/* public/house.css — every component and page of the house, in one sheet (v216, Part E, 28 October 2026). The 27 sheets v215 served,
   each under a banner with its old name, in their cascade order: after tokens.css and the house's dress, before art.css. Each is as
   it was but for its dead rules (Chrome's coverage over the 40 pages and the doors at four widths, every theme and state, never hit
   them, and no template or script names them) and for a zero-weight guard on the rules that would reach a page that never read
   them: :where(:not(.pv-k-door)) keeps the sign-in page and the other doors as they were; :where(.pv-sheet-money) and :where(.pv-sheet-ask)
   keep Money's and Saathi's own rules on their pages (views/preview/kit.js shell). The sheet is public (the sign-in page reads it),
   so its comments keep no one of the house's own by name and none of its wedding's figures, dates or places. A comment that names "preview-design.css 26"
   finds it under that banner, its sections numbered as before. Built by docs/polish-2026-10-28-v216/E/tools/merge.mjs. */

/* ===== preview-home.css ===== */
/* Shaadi Vaala Ghar — the new look (views/preview/, named for how it began as the
   redesign preview; the house wears it with HQ_LOOK=new since 27 September,
   and HQ_PREVIEW shows it as a draft). Nothing else loads this file, and
   everything in it is under body.pv.

   The direction (27 September, evening; his third brief, with apple.com beside it):
   one thing at a time, at scale, and everything else lower in voice.
   - A white page. Ivory ("paper") only where the wedding itself speaks: the foot
     of their photograph on the home, a day's head, the four cards' table, an
     album still waiting for its day, the word from the two of them.
   - Their identity in type: the couple's names in Newsreader, the ampersand in the
     gold of their cards. Every other word on a screen in Inter, shipped with the
     house (the open house round, 13 October: his "make it default for every app").
   - Photographs lead; chrome recedes. No icon where a picture, a face or a word
     will do. Dark ink; wine for the one thing to do and what is chosen; gold for
     the lotus, the ampersand, a pin, a star.
   - One geometry: controls 8px (buttons, fields, filters, menus' rows 6 inside
     12), posts and cards 12px, pictures 8px (a mosaic 4px), dialogs 16px, faces
     and icon-only buttons round. One height for buttons (40, small 34), fields 44.
   - Each kind of page is a bounded column centred beside the rooms; the rooms are
     a column of their own, divided from the page by one hairline. */

/* (open: look, item L1) Inter, the house's one face for words (rsms/inter, SIL OFL 1.1: public/preview-fonts/Inter-OFL.txt):
   one variable file, every weight from 100 to 900; Newsreader stays for the couple's names (--names, --display) */
@font-face{font-family:"Inter"; src:url(/preview-fonts/InterVariable.woff2) format("woff2"); font-weight:100 900; font-style:normal; font-display:swap}
@font-face{font-family:"Newsreader Display"; src:url(/preview-fonts/newsreader-display.woff2) format("woff2"); font-weight:400; font-style:normal; font-display:swap}
@font-face{font-family:"Newsreader Title"; src:url(/preview-fonts/newsreader-title.woff2) format("woff2"); font-weight:500; font-style:normal; font-display:swap}
@font-face{font-family:"Newsreader Text"; src:url(/preview-fonts/newsreader-text.woff2) format("woff2"); font-weight:400; font-style:normal; font-display:swap}
/* (v212 item 5, his word of 24 Oct 2026: "move the names medium font weight instead of regular or light … this feels very light") the
   couple's names at Medium: Newsreader's one real 500 cut, its Title, as the 500 of the Display and the Text, so the browser never
   makes a bold of its own (no Display or Text 500 file exists; the same family, a middle optical size) */
@font-face{font-family:"Newsreader Display"; src:url(/preview-fonts/newsreader-title.woff2) format("woff2"); font-weight:500; font-style:normal; font-display:swap}
@font-face{font-family:"Newsreader Text"; src:url(/preview-fonts/newsreader-title.woff2) format("woff2"); font-weight:500; font-style:normal; font-display:swap}

.pv{
  /* (the colours round, 13 Oct 2026) every colour is a token in public/preview-theme.css: the house's own on :root (the days' tones,
     status, gold, white and black by what they do, the shadows, the drawings), and per theme on .pv and theme-<key> (the papers,
     the tones, the rules and the edge, the words, the accent, the bar). Here the rest: the corners, the sizes, the faces.
     There: --ink-3 takes --ink-2's value (finesse: rules, item 3, 12 Oct), two greys for words, not three; --ink-4 is for rules,
     dots and icons only; --gold-ink, small gold words on the tint, 5.5:1 (gold-deep reads 4.3:1 there); the tones (finesse: rules,
     items 4 and 7), the page's paper under the room's white sheet (laptops), a card on the sheet, its band one tone deeper, the
     one hairline between rows on a tone. */
  --r-ctl:11px; --r-post:16px; --r-media:8px; --r-tile:4px; --r-pop:12px; --r-dialog:16px; --r-sheet:20px; --r-chip:999px;   /* (finesse: rules, items 4, 6, 7) buttons and fields 11 (were 8), cards 16 (were 12), the room's white sheet 20, chips round;
     (the closing touches, 26 Oct 2026) --r-sm is tokens.css's alone: the 6 here held every page at 6 under the fix round's 10; the sign-in page keeps 6 in its own block */
  --nav-w:188px; --tabbar-h:60px; --page:1060px;
  /* (open: look, item L1) one face: --title and --serif are Inter too, so every rule that named them speaks in it; the couple's
     names keep Newsreader (--names in the bar and the heads, --display on the cover and the door) */
  --ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:"Newsreader Display","Newsreader Title",Georgia,"Times New Roman",serif;
  --title:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --names:"Newsreader Text",Georgia,serif;   /* (v209, item 14) the bar's names at Regular: Text 400, as the cover's Display 400 */
}
.pv *,.pv *::before,.pv *::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; background:var(--canvas)}
body.pv{margin:0; min-height:100vh; background:var(--canvas); color:var(--ink); font:400 16px/1.5 var(--ui); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; font-feature-settings:"kern"}
/* the resets weigh nothing (:where), so every component's own rule wins */
:where(.pv) a{color:inherit; text-decoration:none}
:where(.pv) img,:where(.pv) video{display:block; max-width:100%}
:where(.pv) :is(button, input, select, textarea){font:inherit; color:inherit}
:where(.pv) :is(b, strong){font-weight:500}
:where(.pv) :is(p, h1, h2, h3, dl, dd, figure, fieldset, blockquote){margin:0}
:where(.pv) :is(h1, h2, h3){font-weight:600}
:where(.pv) fieldset{border:0; padding:0; min-width:0}
:where(.pv) :is(ul, ol){margin:0; padding:0; list-style:none}
.pv [hidden]{display:none !important}
.pv [id]{scroll-margin-top:16px}
@media (max-width:1023px){ .pv [id]{scroll-margin-top:72px} }
@media (max-width:1023px){ html:has(> body.pv:not(.pv-k-door)){scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px))} }   /* (the interface review #4, 1 Nov 2026) Tab never parks a control under the floating tab bar: 96 is the bar's --tabbar-room (64 + 2 × 16), set on body.pv below, which the root cannot read */
.pv :focus-visible{ outline-offset:2px} :where(.pv :focus-visible){border-radius:4px}   /* (2b: look, X1) the ring follows a control's own corners; its 4 only where nothing gives it corners of its own */
.pv-vh{position:absolute !important; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
.pv-skip{position:absolute; left:12px; top:-80px; z-index:100; padding:10px 14px; border-radius:var(--r-ctl); background:var(--ink); color:var(--on-wine) !important; font-weight:500}
.pv-skip:focus{top:12px}

/* ---- the preview's own note: plainly not part of the design ---------------- */
.pv-banner{display:flex; align-items:center; gap:12px; min-height:34px; padding:4px 4px 4px 16px; background:var(--ink); color:var(--on-wine); font:400 13px/1.4 var(--ui)}
.pv-banner{position:relative; z-index:22}   /* (the design review, item 2, 1 Nov 2026) the band over the lights: from 1024 they stick at 2 on z 21 and hung on its words */
.pv-banner p{flex:1; min-width:0}
.pv-banner b{color:var(--on-wine); font-weight:500}
.pv-banner a{color:var(--on-wine); font-weight:500; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; padding:4px 0}
/* the same strip at the house's own addresses, when the head is trying the look everyone else is not on */
.pv-banner-x{display:grid; place-items:center; width:32px; height:32px; flex:none; border:0; border-radius:var(--r-ctl); background:none; color:var(--on-wine); cursor:pointer}
.pv-banner-x:hover{background:var(--hover); color:var(--on-wine)}
.pv-banner-short{display:none}
@media (max-width:1099px){ .pv-banner-long{display:none} .pv-banner-short{display:inline} }

/* ---- the lights along the front of the house --------------------------------- */
.pv-lights{position:absolute; left:0; right:0; top:6px; height:24px; overflow:hidden; pointer-events:none}
.pv-lights svg{position:absolute; left:50%; top:0; display:block; transform:translateX(-50%)}
.pv-lights .w{fill:none; stroke:var(--ink); stroke-width:.8; opacity:.28}
.pv-bulb .s{stroke:var(--ink); stroke-width:.7; opacity:.28}
.pv-bulb .g{fill:url(#pv-lg); opacity:.45}
.pv-bulb .b{fill:url(#pv-lb); stroke:var(--bulb-edge); stroke-width:.45}
.pv-shell{position:relative; padding-top:32px}
@media (max-width:1023px){ .pv-shell{padding-top:24px} .pv-lights{top:4px} }

/* ---- the rooms' marks: paper, a line of ink, one gold seal ---------------------------- */
.pv-head-mark{flex:none; width:112px; height:90px; margin-top:-2px; align-self:start}
.pv-head-mark svg{display:block; width:100%; height:100%; overflow:visible}
.pv-mark .k{fill:none; stroke:var(--ink); stroke-width:1.3; stroke-linejoin:round; stroke-linecap:round; opacity:.8}
.pv-mark .pk{fill:var(--mark-paper); stroke:var(--ink); stroke-width:1.3; stroke-linejoin:round; stroke-linecap:round; stroke-opacity:.8}
.pv-mark .wk{fill:var(--mark-white); stroke:var(--ink); stroke-width:1.1; stroke-linejoin:round; stroke-opacity:.55}
.pv-mark .sk{fill:var(--mark-shade)}
.pv-mark .f{fill:none; stroke:var(--ink); stroke-width:1.1; stroke-linecap:round; opacity:.3}
.pv-mark .d{fill:var(--ink); opacity:.25}
.pv-mark .hd{stroke:var(--ink); stroke-width:7; stroke-linecap:round; opacity:.8}
.pv-mark .hd2{stroke:var(--mark-paper); stroke-width:4.4; stroke-linecap:round}
.pv-mark .g{fill:var(--mark-gold)}
.pv-mark .g2{fill:none; stroke:var(--mark-gold); stroke-width:1.6; stroke-linecap:round}
.pv-mark .w{fill:var(--mark-wine)}
.pv-mark .t{font:600 12px var(--ui); fill:var(--mark-ink); text-anchor:middle}
.pv-mark .sh{filter:drop-shadow(0 1px 1.4px var(--mark-shadow))}
@media (max-width:1023px){ .pv-head-mark{width:72px; height:58px; margin-top:8px} .pv-head-row:not(:has(.pv-eyebrow)) .pv-head-mark{margin-top:-8px} }

/* ---- their mark, their names, faces ----------------------------------------- */
.pv .mark.img{display:inline-block; flex:none; aspect-ratio:var(--mark-ratio, 96/46); background:var(--gold);
  -webkit-mask:var(--mark) center/contain no-repeat; mask:var(--mark) center/contain no-repeat}
.pv .mark.letters{display:inline-flex; align-items:center; gap:.3em; flex:none; color:var(--gold); font-size:18px}
.pv .mark.letters b{font-weight:400}
.pv .mark.letters i{display:block; width:1px; height:.8em; background:currentColor; opacity:.45}
.pv-names{font-family:var(--names); font-weight:500; letter-spacing:-.005em; color:var(--ink)}   /* (v212 item 5) Medium */
.pv-amp{color:var(--gold)}
.pv .avatar{display:inline-grid; place-items:center; flex:none; width:40px; height:40px; border-radius:50%; overflow:hidden; object-fit:cover;
  background:var(--hover); color:var(--ink-2); font-size:16px; font-weight:600; line-height:1; letter-spacing:0}
.pv .avatar.sm{width:32px; height:32px; font-size:13px}
.pv .avatar.xs{width:22px; height:22px; font-size:12px}   /* 11, the smallest an iPhone's type goes (the design audit of 4 October; was 10) */
.pv .avatar.big{width:96px; height:96px; font-size:32px}
.pv img.avatar{box-shadow:0 0 0 1px var(--line)}
.pv span.avatar[data-tone]{}
.pv span.avatar[data-tone="teal"]{} .pv span.avatar[data-tone="marigold"]{}
.pv span.avatar[data-tone="rose"]{} .pv span.avatar[data-tone="slate"]{}
.pv span.avatar[data-tone="leaf"]{} .pv span.avatar[data-tone="peach"]{}
.pv span.avatar[data-tone="plum"]{} .pv span.avatar[data-tone="red"]{}
.pv span.avatar[data-tone="sky"]{} .pv span.avatar[data-tone="terracotta"]{}
/* the two light tones read 3.6:1 and 4.2:1 at 80%; at 65% they read 5.1:1 and 5.8:1, past the 4.5:1 small letters need (the design audit of 4 October) */
.pv span.avatar[data-tone="marigold"],.pv span.avatar[data-tone="peach"]{}
.pv-gdisc{background:var(--wine-tint) !important; color:var(--wine) !important; font-weight:500}

/* ---- the shell: the phone first ------------------------------------------- */
.pv-shell{display:block}
.pv-nav{display:none}
.pv-main{display:block; width:100%; min-width:0; margin-inline:auto; padding:12px 16px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 28px); outline:none; container-type:inline-size}
.pv-top{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:4px; min-height:56px;
  padding:env(safe-area-inset-top) max(6px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); background:var(--top);
  -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--top-line)}
.pv-top-id{display:flex; align-items:center; gap:8px; flex:1; min-width:0; padding:4px 0}
.pv-top-id .mark.img{width:36px; height:17px !important}
.pv-top-tx{display:flex; flex-direction:column; min-width:0; line-height:1.2}
.pv-top-names{font-size:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pv-top-togo{font-style:normal; font-size:13px; color:var(--ink-2)}
.pv-top-acts{display:flex; align-items:center}
.pv-top-acts .pv-icon-btn{width:44px; height:44px}
.pv-top-me{display:grid; place-items:center; width:44px; height:44px}
.pv-top-acts .pv-badge,.pv-tabbar-ic .pv-badge{position:absolute; top:3px; right:1px; min-width:18px; height:18px; padding:0 4px; font-size:12px; box-shadow:0 0 0 2px var(--badge-ring)}
.pv-tabbar{position:fixed; left:0; right:0; bottom:0; z-index:25; display:flex; background:var(--tab); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-top:1px solid var(--tab-line); padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.pv-tabbar a{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0px; height:var(--tabbar-h); font-size:12px; font-weight:500; color:var(--ink-2)}
.pv-tabbar a[aria-current="page"]{color:var(--ink); font-weight:500}
.pv-tabbar-ic{position:relative; display:grid; place-items:center}
.pv-tabbar-ic .pv-badge{top:-6px; right:auto; left:calc(100% - 8px)}

/* the nav: whose house, your page, home, the rooms (a tablet: a narrow rail) */
.pv-nav-in{position:sticky; top:0; display:flex; flex-direction:column; height:100vh; overflow-y:auto; padding:16px 0 16px;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent}
.pv-list a,.pv-more summary{display:flex; align-items:center; gap:12px; min-height:38px; padding:0 8px; border-radius:var(--r-ctl); font-size:16px; font-weight:500; color:var(--ink); cursor:pointer}
.pv-list a:hover,.pv-more summary:hover{background:var(--hover)}
.pv-list a svg,.pv-more summary svg{flex:none; color:var(--ink-2)}
.pv-list a[aria-current="page"]{background:var(--wine-tint); color:var(--wine); font-weight:500}
.pv-list a[aria-current="page"] svg{color:var(--wine)}
.pv-l{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@media (min-width:1024px){
  .pv-top,.pv-tabbar{display:none}
  .pv-shell{display:grid; grid-template-columns:76px minmax(0, 1fr); column-gap:24px; padding:32px 24px 0 8px}
  .pv-nav{display:block; border-right:1px solid var(--line)}
  .pv-main{padding:8px 0 64px}
  /* the panel starts at the window's top, under the lights (its words where they were: 30px lower), so its whole height
     is in the window and its last line is never cut (it stood 30px down at 100vh tall, and lost 12px at 900) */
  .pv-nav-in{margin-top:-32px; padding:32px 8px 12px 0; align-items:stretch;
    /* on a short window the panel scrolls inside itself: its words fade out before they reach the lights */
    -webkit-mask-image:linear-gradient(transparent 30px, var(--ink) 36px); mask-image:linear-gradient(transparent 30px, var(--ink) 36px); scroll-padding-top:40px}
  .pv-list a{flex-direction:column; justify-content:center; gap:4px; min-height:58px; padding:4px 0px; font-size:12px; font-weight:500; text-align:center; position:relative}
  .pv-list a .pv-l{flex:none; max-width:100%; white-space:normal; line-height:1.15}
  .pv-list a .pv-badge{position:absolute; top:4px; right:10px; min-width:18px; height:18px; font-size:12px}
}
@media (min-width:1024px){
  .pv-shell{grid-template-columns:var(--nav-w) minmax(0, 1fr); column-gap:32px; padding:32px 24px 0 16px}
  .pv-nav-in{padding:32px 12px 16px 0}
  
  .pv-list a{flex-direction:row; justify-content:flex-start; gap:12px; min-height:38px; padding:0 8px; font-size:16px; font-weight:500; text-align:left}
  .pv-list a[aria-current="page"]{font-weight:500}
  .pv-list a .pv-l{flex:1; white-space:nowrap}
  .pv-list a .pv-badge{position:static}
  .pv-main{padding-top:8px}
}
/* each kind of page a bounded column, every one starting at the same line beside the nav */
.pv-k-feed{--page:1040px}
.pv-k-gallery{--page:1100px}
.pv-k-work{--page:1180px}
.pv-k-read{--page:1100px}
.pv-k-narrow{--page:760px}
.pv-k-convo{--page:1160px}
.pv-k-form{--page:700px}
.pv-main{max-width:var(--page)}
@media (min-width:1024px){ .pv-main{margin-inline:0} }

/* ---- type ------------------------------------------------------------------- */
.pv-head{margin:0 0 24px}
/* no rule under a head without tabs (1 October, his "remove the line after 'every room of the…'"): its 1px kept as room, so nothing below moves; the tabs draw their own */
.pv-head:not(:has(.pv-tabs)){padding-bottom:24px}
.pv-back{display:inline-flex; align-items:center; gap:4px; margin:0 0 8px -4px; padding:4px 8px 4px 4px; border-radius:var(--r-ctl); font-size:14px; font-weight:500; color:var(--ink-2)}
.pv-back:hover{background:var(--hover); color:var(--ink)}
/* the head: the words, then the actions, then the room's mark as a stamp in the corner — the same corner on every page */
.pv-head-row{display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"tx mark" "acts acts"; align-items:start; gap:8px 16px}
.pv-head-tx{grid-area:tx; min-width:0}
.pv-head-mark{grid-area:mark}
.pv-head-acts{grid-area:acts}
.pv-head-row:not(:has(.pv-head-mark)){grid-template-areas:"tx tx" "acts acts"}
.pv-head-row:not(:has(.pv-head-acts)){grid-template-areas:"tx mark"}
.pv-head-row:not(:has(.pv-head-mark)):not(:has(.pv-head-acts)){grid-template-columns:minmax(0, 1fr); grid-template-areas:"tx"}
@container (min-width:760px){
  .pv-head-row{grid-template-columns:minmax(0, 1fr) auto auto; grid-template-areas:"tx acts mark"; column-gap:24px}
  .pv-head-row:not(:has(.pv-head-mark)){grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"tx acts"}
  .pv-head-row:not(:has(.pv-head-acts)){grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"tx mark"}
  .pv-head-row:not(:has(.pv-head-mark)):not(:has(.pv-head-acts)){grid-template-columns:minmax(0, 1fr); grid-template-areas:"tx"}
  .pv-head-acts{justify-content:flex-end; align-self:start; margin-top:-1px}
  .pv-head-row:has(.pv-eyebrow) .pv-head-acts{margin-top:24px}
}
.pv-head h1{font-size:32px; font-weight:600; line-height:1.12; letter-spacing:-.024em; color:var(--ink); overflow-wrap:anywhere}
.pv-head.is-serif h1{font-family:var(--title); font-weight:500; font-size:32px; line-height:1.08; letter-spacing:-.01em}
.pv-head-sub{display:flex; flex-wrap:wrap; align-items:center; gap:0 4px; margin-top:8px; max-width:66ch; font-size:16px; line-height:1.5; color:var(--ink-2); text-wrap:pretty}
.pv-head-sub .pv-dot{margin:0 0px}
.pv-head-acts{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.pv-eyebrow{margin-bottom:4px; font-size:13px; font-weight:500; color:var(--ink-2); letter-spacing:.01em}
.pv-dateline{display:flex; flex-wrap:wrap; align-items:center; gap:2px 0; font-size:12.5px; font-weight:500; line-height:1.5; letter-spacing:.075em; text-transform:uppercase; color:var(--ink-2)}
.pv .pv-dateline .pv-dot{margin:0 .5em; color:var(--gold)}
.pv-h2{margin:32px 0 12px; font-size:20px; font-weight:600; letter-spacing:-.018em; line-height:1.3; color:var(--ink)}
.pv-h3{margin:0 0 8px; font-size:16px; font-weight:600; color:var(--ink)}
.pv-serif{font-family:var(--serif)}
.pv-small{font-size:14px; line-height:1.45; color:var(--ink-2)}
.pv-quiet{font-size:16px; line-height:1.55; color:var(--ink-2)}
.pv-hint{margin-top:6px; font-size:13px; line-height:1.45; color:var(--ink-2)}
.pv-hint a,.pv-small a,.pv-quiet a{color:var(--wine); font-weight:500; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px}
.pv-late{color:var(--danger); font-weight:500}
.pv-mt{margin-top:12px}
.pv-mb{margin-bottom:16px}
.pv-prewrap{white-space:pre-wrap}
.pv-big{font-size:32px; font-weight:600; letter-spacing:-.02em; line-height:1.15; color:var(--ink); font-variant-numeric:tabular-nums}
.pv-big span{font-size:14px; font-weight:400; letter-spacing:0; color:var(--ink-2)}
.pv-error{margin:0 0 14px; padding:12px 14px; border-radius:var(--r-ctl); background:var(--danger-tint); color:var(--danger); font-size:14.5px}
.pv-warn{margin:0 0 12px; padding:8px 12px; border-radius:var(--r-ctl); background:var(--warn-tint); color:var(--warn); font-size:14px}
.pv-due{font-size:13px; font-weight:500; color:var(--ink-2); white-space:nowrap}
.pv-due.is-soon{color:var(--warn)}
.pv-due.is-late{color:var(--danger); font-weight:500}
.pv-tone{display:inline-block; flex:none; width:8px; height:8px; border-radius:50%; background:var(--e, var(--gold))}
.pv-daytag{display:inline-flex; align-items:center; gap:4px; font-weight:500; color:var(--ink-2)}
.pv-dot{margin:0 .32em; color:var(--ink-3)}
.pv-dot.is-brk{visibility:hidden}   /* a dot that would end a line: not shown, its room kept (preview-home.js, 40) */
.pv-dot.is-lead{position:absolute; visibility:hidden}   /* a dot that would start a line: no room and not shown, so the words begin on the line */
.pv-dateline .pv-dot.is-brk{flex-basis:100%; height:0; margin:0; line-height:0}   /* in the days' and the place's line the hidden dot is the break itself, so a centred line stays centred */
:is(.pv-head-sub, .pv-meta, .pv-album-tx em, .pv-thread-who em, .pv-daycard-when, .pv-invcard-tx em, .pv-task-meta, .pv-vendor-main > span, .pv-c-meta) .pv-dot{margin:0}
.is-now{color:var(--yes)}

/* ---- controls --------------------------------------------------------------- */
.pv-btn{display:inline-flex; align-items:center; justify-content:center; font:500 14.5px/1.2 var(--ui); white-space:nowrap; cursor:pointer; text-align:center; transition:background-color .12s ease, border-color .12s ease, color .12s ease}

.pv-btn svg{flex:none}

.pv-btn-primary:hover{background:var(--wine-press)}
.pv-btn-primary:active{background:var(--wine-press)}

.pv-btn-secondary:hover{background:var(--hover); border-color:var(--line)}
.pv-btn-secondary:active{background:var(--hover)}
.pv-btn-secondary[aria-pressed="true"]{background:var(--wine-tint); border-color:var(--line); color:var(--wine)}
/* every button has an edge (1 October 2026; his word, of "Not now": "at least need some boundary to know they are buttons
   and not hanging text… make the button edge the rule in every room"). The quiet kind keeps its low voice — no fill,
   softer words — inside a hairline; the kind that takes something away has the same, in its own colour */

.pv-btn-quiet:hover{background:var(--hover); border-color:var(--line); color:var(--ink)}

.pv-btn-danger:hover{background:var(--danger-tint); border-color:var(--line)}
.pv-btn:disabled,.pv-btn[aria-disabled="true"]{opacity:.45; cursor:not-allowed}
.pv-btn.is-busy{cursor:progress; opacity:.75}
.pv-icon-btn{position:relative; display:inline-grid; place-items:center; flex:none; cursor:pointer}
.pv-icon-btn:hover{background:var(--hover); color:var(--ink)}
.pv-badge{display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 4px; border-radius:12px; background:var(--wine);
  color:var(--on-wine); font-size:12px; font-weight:600; line-height:1; letter-spacing:0; font-variant-numeric:tabular-nums}
.pv-link-btn{cursor:pointer}
.pv-link-btn:hover{text-decoration:underline; text-underline-offset:3px}
.pv-actions{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.pv-actions-col{flex-direction:column; align-items:stretch}
.pv-actions-col > *{width:100%}
.pv-actions-col .pv-btn{justify-content:flex-start}
.pv-actions form{display:inline-flex}
.pv-chip{display:inline-flex; align-items:center; gap:4px; flex:none; min-height:22px; padding:0px 8px; border-radius:var(--r-sm); background:var(--hover);
  font-size:13px; font-weight:500; color:var(--ink-2); white-space:nowrap; line-height:1.4}
.pv-chip.is-yes{background:var(--yes-tint); color:var(--yes)}
.pv-chip.is-no{background:var(--danger-tint); color:var(--danger)}
.pv-chip.is-wait{background:var(--warn-tint); color:var(--warn)}
.pv-more-link{display:inline-flex; align-items:center; gap:4px; padding:4px 0; font-size:14px; font-weight:500; color:var(--wine); white-space:nowrap}
.pv-more-link:hover{text-decoration:underline; text-underline-offset:3px}

/* views of one room, and filters within a view */
.pv-tabs{display:flex; gap:24px; margin:16px 0 0; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none}
.pv-tabs::-webkit-scrollbar{display:none}
.pv-tabs a{display:inline-flex; align-items:center; gap:8px; flex:none; min-height:40px; padding:0 0px; margin-bottom:-1px; border-bottom:2px solid transparent;
  font-size:14px; font-weight:500; color:var(--ink-2); white-space:nowrap}
.pv-tabs a:hover{color:var(--ink)}
.pv-tabs a[aria-current="page"]{border-bottom-color:var(--wine); color:var(--ink); font-weight:500}
.pv-tabs-n{min-width:20px; padding:0 4px; border-radius:12px; background:var(--hover); font-size:12px; font-weight:500; line-height:20px; text-align:center; color:var(--ink-2)}
.pv-chips{display:flex; flex-wrap:wrap; gap:4px; margin:0 0 12px}
.pv-chips a{display:inline-flex; align-items:center; gap:4px; min-height:34px; padding:0 12px; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface);
  font-size:14px; font-weight:500; color:var(--ink-2); white-space:nowrap}
.pv-chips a:hover{border-color:var(--line); color:var(--ink)}
.pv-chips a[aria-current="true"]{border-color:var(--line); background:var(--wine-tint); color:var(--wine); font-weight:500}
.pv-chips-n{font-weight:400; color:var(--ink-2)}
.pv-chips a[aria-current="true"] .pv-chips-n{color:inherit; opacity:.8}
.pv-pager{display:flex; justify-content:center; gap:8px; margin:24px 0}
.pv-end{margin:24px 0; font-size:14px; text-align:center; color:var(--ink-2)}
.pv-end a{color:var(--wine); font-weight:500}

/* the note an action leaves */
.pv-note{display:flex; align-items:center; gap:8px; margin:0 0 16px; padding:8px 8px 8px 12px; border-radius:var(--r-post); background:var(--yes-tint); color:var(--yes); font-size:14px}
.pv-note > svg{flex:none}
.pv-note p{flex:1; min-width:0}
.pv-note.is-sim{background:var(--hover); color:var(--ink)}

.pv-note-act{display:inline-flex}

/* ---- forms ------------------------------------------------------------------- */
.pv-form{display:grid; gap:16px}
.pv-field{display:grid; gap:6px; min-width:0}
.pv-field > label:not(.pv-choice):not(.pv-file),.pv-fs > .pv-field > label:not(.pv-choice):not(.pv-file){font-size:13.5px; font-weight:500; color:var(--ink-2)}
:where(.pv) :is(input[type=text], input[type=search], input[type=url], input[type=tel], input[type=email], input[type=number], input[type=date], input[type=time], input[type=datetime-local], input:not([type]), select, textarea){
  width:100%; min-height:44px; padding:9px 12px; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface); font-size:16px; line-height:1.35; color:var(--ink);
  transition:border-color .12s ease, box-shadow .12s ease}
.pv :is(input, select, textarea):hover{border-color:var(--line)}
.pv textarea{min-height:92px; resize:vertical; line-height:1.5}
.pv select{padding-right:32px; -webkit-appearance:none; appearance:none; background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='%2371675F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E") no-repeat right 11px center}
.pv :is(input, select, textarea):focus{outline:none; border-color:var(--wine);}
.pv ::placeholder{color:var(--ink-2)}
.pv-grid2{display:grid; gap:16px}
.pv-grid3{display:grid; gap:16px}
@container (min-width:560px){ .pv-grid2{grid-template-columns:1fr 1fr} .pv-grid3{grid-template-columns:2fr 1fr 1fr} }
.pv-grid2.pv-tight{gap:8px}
.pv-grid2 > .pv-field{align-content:start}   /* a field beside a taller one keeps its own height (7 October: a hint under one select stretched the other) */
.pv-field-wide,.pv-grid2 > .pv-field-wide{grid-column:1 / -1}
.pv-buzz{margin-top:12px; padding-top:12px; border-top:1px solid var(--line)}
/* a choice in a form: its box, then its words and what they mean */
.pv-choice{display:flex; align-items:flex-start; gap:12px; min-width:0; padding:8px 0; cursor:pointer}
.pv-choice > input{flex:none; width:20px; height:20px; margin:0px 0 0; accent-color:var(--wine); cursor:pointer}
.pv-choice-tx{display:block; flex:1; min-width:0}
.pv-choice-tx b{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-size:16px; font-weight:500; line-height:1.35; color:var(--ink)}
.pv-choice-tx em{display:block; margin-top:0px; font-style:normal; font-size:13px; line-height:1.45; color:var(--ink-2)}
.pv-choice:has(input:disabled){cursor:not-allowed; opacity:.55}
.pv-checks{display:grid; gap:0}
.pv-checks > .pv-choice + .pv-choice{border-top:1px solid var(--line)}
.pv-file{position:relative; display:inline-flex; max-width:100%; cursor:pointer; overflow:hidden}   /* the invisible picker kept inside its button (below) */
.pv-file input{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%}
.pv-file-l{display:inline-flex; align-items:center; gap:8px; max-width:100%; min-height:40px; padding:0 12px; border:1px solid var(--line-2); border-radius:var(--r-ctl); background:var(--surface); font-size:14px; font-weight:500; color:var(--ink-2)}
.pv-file-l [data-file-label]{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pv-file:hover .pv-file-l{border-color:var(--wine); color:var(--wine)}
.pv-file:focus-within .pv-file-l{ outline-offset:2px}
.pv-inline{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.pv-inline > input:not([type=checkbox]):not([type=hidden]),.pv-inline > select{flex:1 1 180px; width:auto; min-width:0}
.pv-timepick{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.pv-timepick > select,.pv-timepick > input{flex:1 1 140px; width:auto}
.pv-seg2{display:inline-flex; gap:4px; padding:4px; border-radius:var(--r-ctl); background:var(--hover)}
.pv-seg2 label{position:relative; cursor:pointer}
.pv-seg2 input{position:absolute; opacity:0}
.pv-seg2 span{display:block; padding:8px 12px; border-radius:6px; font-size:14px; font-weight:500; color:var(--ink-2)}
.pv-seg2 input:checked + span{background:var(--surface); color:var(--ink); font-weight:500; box-shadow:var(--shadow-1)}
.pv-seg2 input:focus-visible + span{}
.pv-seg3{display:flex; flex-wrap:wrap; gap:4px}
.pv-dayticks{display:flex; flex-wrap:wrap; gap:4px}
.pv-dayt{position:relative; display:inline-flex; align-items:center; gap:4px; min-height:34px; padding:0 12px; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface); font-size:14px; font-weight:500; color:var(--ink-2); cursor:pointer}
.pv-dayt input{position:absolute; opacity:0; inset:0; cursor:pointer}
.pv-dayt:has(input:checked),.pv-dayt.is-on{border-color:var(--line); background:var(--wine-tint); color:var(--wine)}
.pv-dayt:has(input:focus-visible){outline:2px solid var(--wine); outline-offset:2px}
.pv-dayticks.is-static .pv-dayt{cursor:default; opacity:.55}
.pv-dayticks.is-static .pv-dayt.is-on{opacity:1}
.pv-facepick{display:flex; flex-wrap:wrap; gap:4px}
.pv-facename{position:relative; display:inline-flex; align-items:center; gap:8px; padding:4px 12px 4px 4px; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface); font-size:14px; cursor:pointer}
.pv-facename input{position:absolute; opacity:0; inset:0; cursor:pointer}
.pv-facename:has(input:checked){border-color:var(--wine); background:var(--wine-tint); color:var(--wine)}
.pv-facename:has(input:focus-visible){outline:2px solid var(--wine); outline-offset:2px}
.pv-facepick-one{display:flex; align-items:center; gap:16px}
.pv-crows{display:grid; gap:8px}
.pv-crow{display:grid; gap:4px}
@container (min-width:560px){ .pv-crow{grid-template-columns:1fr 1fr 1.3fr} }
.pv-fs{display:grid; gap:16px}

/* a section that opens in place */
.pv-fold{margin:12px 0 0}
.pv-fold > summary{display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:0 0px; list-style:none; font-size:14px; font-weight:500; color:var(--wine); cursor:pointer}
.pv-fold > summary::-webkit-details-marker{display:none}
.pv-fold > summary > svg:last-child{transition:transform var(--dur-fast) ease}
.pv-fold[open] > summary > svg:last-child{transform:rotate(180deg)}
.pv-fold-in{padding:8px 0 4px}
.pv-card.pv-fold,.pv-taskfold{padding:0 16px}
.pv-card.pv-fold > summary,.pv-taskfold > summary{display:flex; min-height:52px; color:var(--ink); font-size:16px}
.pv-earlierfold > summary{color:var(--ink-2)}

/* a dialog: a form kept out of the way until it is wanted */
.pv-dialog{width:min(560px, calc(100vw - 24px)); max-height:min(88vh, 900px); padding:0; border:0; border-radius:var(--r-dialog); background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1)}
.pv-dialog-wide{width:min(760px, calc(100vw - 24px))}
.pv-dialog::backdrop{background:var(--scrim)}
.pv-dialog-head{position:sticky; top:0; z-index:1; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px 12px 12px 24px; background:var(--surface); border-bottom:1px solid var(--line)}
.pv-dialog-head h2{font-size:20px; font-weight:600; letter-spacing:-.015em; line-height:1.3}
.pv-dialog-head p{margin-top:0px; font-size:14px; color:var(--ink-2)}
.pv-dialog-body{padding:16px 24px 24px; container-type:inline-size}
@media (max-width:1023px){ .pv-dialog{width:100vw; max-width:100vw; max-height:92vh; margin:auto 0 0; border-radius:12px 12px 0 0} }

/* a menu of less frequent actions */
.pv-menu{position:relative; display:inline-block; flex:none}
.pv-menu > summary{list-style:none}
.pv-menu > summary::-webkit-details-marker{display:none}
.pv-menu[open] > summary.pv-icon-btn{background:var(--hover); color:var(--ink)}
.pv-menu-pop{position:absolute; z-index:40; top:calc(100% + 6px); right:0; min-width:240px; max-width:min(320px, 92vw); padding:4px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-pop); box-shadow:var(--shadow-2)}
.pv-menu-left .pv-menu-pop{right:auto; left:0}
.pv-menu-pop > a,.pv-menu-pop button,.pv-menu-form button{display:flex; align-items:center; gap:8px; width:100%; min-height:40px; padding:8px 8px; border:0; border-radius:6px; background:none;
  text-align:left; font-size:14px; font-weight:500; color:var(--ink); cursor:pointer}
.pv-menu-pop svg{flex:none; color:var(--ink-2)}
.pv-menu-pop > a:hover,.pv-menu-pop button:hover{background:var(--hover)}
.pv-menu-pop .is-danger,.pv-menu-pop .is-danger svg{color:var(--danger)}
.pv-menu-form{display:block}
.pv-menu-sep{margin:4px 8px 0px; padding-top:8px; border-top:1px solid var(--line); font-size:12px; font-weight:500; color:var(--ink-2)}
.pv-menu-sep:first-child{margin-top:0px; padding-top:0px; border-top:0}
.pv-menu-named{gap:4px}

/* who something is for: the whole panel of both sides */
.pv-aud{position:relative; display:inline-block; min-width:0; max-width:100%}
.pv-aud > summary{display:inline-flex; align-items:center; gap:8px; max-width:100%; min-height:34px; padding:4px 8px; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface);
  list-style:none; font-size:14px; font-weight:500; color:var(--ink); cursor:pointer}
.pv-aud > summary:hover{border-color:var(--line)}
.pv-aud > summary::-webkit-details-marker{display:none}
.pv-aud-k{color:var(--ink-2)}
.pv-aud-v{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pv-aud-v i{font-style:normal; color:var(--ink-2)}
.pv-aud.is-must > summary{border-color:var(--line); background:var(--warn-tint); color:var(--warn)}
.pv-aud-pop{position:absolute; z-index:40; top:calc(100% + 6px); left:0; width:min(560px, calc(100vw - 32px)); padding:12px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-pop); box-shadow:var(--shadow-2); display:grid; gap:8px}
@media (min-width:640px){ .pv-aud-pop{grid-template-columns:1fr 1fr 1fr} .pv-aud-foot{grid-column:1 / -1} }
/* (day links, part J; his find on the live house, Home's composer at about 1294) the open "Who can see it" in front of everything while it
   is open, as the You menu was lifted (v227): the card that holds it stands at 25 and clips nothing; its columns as wide as their longest
   choice, each choice on one line with its circle level; on a phone it spans the screen's gutters and scrolls within it */
body.pv :is(.pv-card, .pv-compose, .pv-compose-rest, .pv-cform, .pv-cform-row, .pv-form):has(> * .pv-aud[open], > .pv-aud[open]){position:relative; z-index:25; overflow:visible}
body.pv .pv-aud[open]{position:relative; z-index:26}
body.pv .pv-aud-pop{width:max-content; max-width:min(760px, calc(100vw - 32px))}
body.pv .pv-aud-o{white-space:nowrap}
body.pv .pv-aud-o > input{flex:none; margin:0}
@media (min-width:640px){ body.pv .pv-aud-pop{grid-template-columns:repeat(3, max-content); column-gap:24px} }
@media (max-width:639.98px){ body.pv .pv-aud, body.pv .pv-aud[open]{position:static} body.pv :is(.pv-cform, .pv-form):has(.pv-aud[open]){position:relative} body.pv .pv-aud-pop{left:0; right:0; top:auto; width:auto; max-width:none; max-height:min(70dvh, 520px); overflow:auto} body.pv .pv-aud-o{white-space:normal} }
.pv-aud-g legend{margin-bottom:4px; font-size:13px; font-weight:500; color:var(--ink-2)}
.pv-aud-o{display:flex; align-items:center; gap:8px; min-height:34px; padding:0px 4px; border-radius:6px; font-size:14px; cursor:pointer}
.pv-aud-o:hover{background:var(--hover)}
.pv-aud-o input{width:18px; height:18px; accent-color:var(--wine)}
.pv-aud-foot{display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:8px; border-top:1px solid var(--line)}
.pv-aud-foot p{font-size:13px; color:var(--ink-2)}
.pv-aud-meta{display:inline-flex; align-items:center; gap:4px}

/* ---- surfaces: cards, sections, rows ---------------------------------------- */
.pv-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-post); margin:0 0 var(--card-gap, 16px)}   /* (v209, item 6: the gap, 20 from 768: preview-lift.css) */
.pv-pad{padding:16px}
.pv-panel{padding:16px}
.pv-sect{margin:0 0 24px; padding-top:16px; border-top:1px solid var(--line)}
.pv-sect:first-child,.pv-head + .pv-sect,.pv-col-side > .pv-sect:first-child,.pv-sidecol > .pv-sect:first-child{padding-top:0; border-top:0}
.pv-panel-top{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 8px}
.pv-panel-h{display:flex; align-items:center; gap:8px; min-width:0; font-size:16px; font-weight:600; letter-spacing:-.012em; line-height:1.3; color:var(--ink)}
.pv-panel-h em{font-size:14px; font-weight:400; font-style:normal; color:var(--ink-2); font-variant-numeric:tabular-nums}
.pv-panel[data-event]{box-shadow:none}
.pv-listcard{padding:4px 0; overflow:hidden}
.pv-listpanel{padding:0}
.pv-card.pv-listpanel{padding:12px 0 4px}
.pv-card.pv-listpanel > .pv-panel-top{padding:0 16px}
.pv-listcount{padding:12px 16px 4px; font-size:13px; font-weight:500; color:var(--ink-2)}
.pv-rows{margin:0}
.pv-row{display:flex; align-items:center; gap:8px}
.pv-rows > .pv-row + .pv-row{border-top:1px solid var(--line)}
.pv-row-main{display:flex; align-items:center; gap:12px; flex:1; min-width:0; padding:12px 0}
.pv-card .pv-rows > .pv-row{padding:0 16px}
@media (hover:hover){ .pv-card .pv-rows > .pv-row:has(a.pv-row-main:hover){background:var(--hover)} }   /* (the colours round's fixes: under a pointer only, so a tap on a phone leaves nothing behind) */
.pv-card.pv-panel .pv-rows > .pv-row{padding:0}
@media (hover:hover){ .pv-card.pv-panel .pv-rows > .pv-row:has(a.pv-row-main:hover){background:none} }
.pv-card.pv-listpanel .pv-rows > .pv-row{padding:0 16px}
@media (hover:hover){ .pv-card.pv-listpanel .pv-rows > .pv-row:has(a.pv-row-main:hover){background:var(--hover)} }
.pv-card.pv-listpanel > .pv-fold{padding:0 16px 4px}
.pv i[data-part]{font-style:normal}
@media (hover:hover){ a.pv-row-main:hover .pv-row-t{color:var(--wine)} }   /* (the colours round's fixes: wine under a pointer only, so a tap on a phone leaves no row wine) */
.pv-row-ic{display:grid; place-items:center; flex:none; width:34px; height:34px; color:var(--ink-3)}
.pv-row-img{flex:none; width:44px; height:44px; border-radius:var(--r-media); object-fit:cover}
.pv-row-tx{display:flex; flex-direction:column; flex:1; min-width:0}
.pv-row-t{font-size:16px; font-weight:500; line-height:1.4; color:var(--ink); overflow-wrap:anywhere}
.pv-row-m{margin-top:0px; font-size:14px; line-height:1.45; color:var(--ink-2); overflow-wrap:anywhere}
.pv-row-m .pv-daytag{font-weight:500}
.pv-row-r{display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:4px; flex:none; max-width:60%}
.pv-row.is-done .pv-row-t{color:var(--ink-2); text-decoration:line-through}
.pv-rows-loose .pv-row-main{padding:12px 0}
.pv-kv{display:grid; gap:8px 16px; margin:4px 0}
.pv-kv > div{display:grid; grid-template-columns:minmax(120px, 30%) minmax(0, 1fr); gap:12px; align-items:baseline}
.pv-kv dt{font-size:14px; color:var(--ink-2)}
.pv-kv dd{font-size:16px; line-height:1.5; color:var(--ink); overflow-wrap:anywhere}
.pv-kv dd .avatar{vertical-align:-5px; margin-right:4px}
.pv-kv dd a{color:var(--wine); font-weight:500}
@container (max-width:520px){ .pv-kv > div{grid-template-columns:1fr; gap:0px} }
.pv-mini{display:grid; gap:12px}
.pv-mini li{min-width:0}
.pv-mini a,.pv-mini b{display:block; font-size:14px; font-weight:500; line-height:1.4; color:var(--ink); overflow-wrap:anywhere}
.pv-mini a:hover{color:var(--wine)}
.pv-mini em{display:block; margin-top:0px; font-size:13px; font-style:normal; color:var(--ink-2)}
.pv-mini li.is-done a{color:var(--ink-2); text-decoration:line-through}
.pv-empty{margin:0 0 16px; padding:12px 0 4px}
.pv-empty-sm{padding:8px 0 4px}
.pv-empty-h{font-size:16px; font-weight:600; line-height:1.4; color:var(--ink)}
.pv-empty-t{margin-top:4px; max-width:60ch; font-size:14px; line-height:1.5; color:var(--ink-2)}
.pv-empty-acts{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.pv-strip{display:flex; align-items:center; gap:8px; padding:12px 16px; font-size:14px; color:var(--ink-2)}
.pv-strip b{color:var(--wine); font-size:16px; font-variant-numeric:tabular-nums}
.pv-strip > svg:last-child{margin-left:auto; color:var(--ink-2)}
.pv-strip:hover{border-color:var(--line)}
.pv-linkline{margin:8px 0; padding:8px 8px; border-radius:var(--r-ctl); background:var(--hover); font:13px/1.45 var(--ui); color:var(--ink-2); overflow-wrap:anywhere}   /* (open: look, L1: in Inter; it was monospaced) */
.pv-code{font-size:16px; letter-spacing:.14em; color:var(--ink); font-variant-numeric:tabular-nums}
/* one thing and what goes with it: a readable main column, its supporting notes beside it */
.pv-cols{display:grid; gap:0 32px; --side:300px}
.pv-cols-money{--side:340px}
.pv-col-main,.pv-col-side{min-width:0}
/* side by side, a hairline between the two in the middle of the gap — the nav's own line — from the
   columns' top to the foot of the longer one; on a phone the side column's rule above it does this */
@container (min-width:880px){
  .pv-cols{grid-template-columns:minmax(0, 1fr) var(--side); align-items:start}
  .pv-cols:has(> .pv-col-side > *){background:linear-gradient(var(--line), var(--line)) right calc(var(--side) + 20px) top 0 / 1px 100% no-repeat}
  .pv-col-side{position:sticky; top:20px}
  /* (8 October, his look at Edit beside a post: "the text is overflowing in the box") a row of fields in the side column is one
     field to a line, as on a phone: .pv-grid2 measures the page, not the column, so two fields shared its 300 and every choice
     was cut short ("A note, for no…", "Nobody in pa…", "None said (re…") */
  .pv-col-side :is(.pv-grid2, .pv-grid3){grid-template-columns:minmax(0, 1fr)}
}
@container (max-width:879px){ .pv-col-side{margin-top:12px; padding-top:16px; border-top:1px solid var(--line)} }

/* ---- a post -------------------------------------------------------------------- */
.pv-post{padding-top:16px; overflow:hidden}
/* a ··· menu is taller than a short post or the last row of a list: while one is open the box around it
   clips nothing, or its last rows (Edit it, Take it out) were cut off under the next post (1 October, his
   post about Vansh; the same at the foot of a list, Settings' last person on a phone) */
:is(.pv-post, .pv-listcard):has(.pv-menu[open], .pv-aud[open]){overflow:visible}
.pv-post.is-pinned{border-color:var(--line)}
.pv-pinrow{display:flex; align-items:center; gap:4px; margin:0 16px 8px; font-size:13px; font-weight:500; color:var(--ink-2)}
.pv-pinrow svg{color:var(--gold)}
.pv-post-head{display:flex; align-items:flex-start; gap:12px; padding:0 8px 0 16px}
.pv-av{flex:none}
.pv-av-album{display:block; width:40px; height:40px; border-radius:var(--r-media); overflow:hidden; background:var(--hover)}
.pv-av-album img{width:100%; height:100%; object-fit:cover}
.pv-post-who{flex:1; min-width:0; padding-top:0px}
.pv-post-l1{font-size:16px; line-height:1.35; overflow-wrap:anywhere}
.pv-name{font-weight:600; color:var(--ink)}   /* (v209, round B: his call, the names 600 across the house, ink, never underlined, as the links sheet’s "A name") */
a.pv-name:hover{color:var(--ink); text-decoration:none}
@media (hover:hover){ a.pv-name:hover{color:var(--wine)} }   /* (his call, 23 Oct) a linked name turns wine under a pointer, never underlined, as the hover rows do */
.pv-verb{color:var(--ink-2)}
.pv-meta{display:flex; flex-wrap:wrap; align-items:center; gap:0 4px; margin-top:0px; font-size:13px; line-height:1.45; color:var(--ink-2)}
.pv-meta a:hover{text-decoration:underline}
.pv-post-tx{padding:12px 16px 12px; font-size:16px; line-height:1.55; color:var(--ink); overflow-wrap:anywhere}
.pv-post-tx a.tag,.pv-post-tx a.mention,.pv-c-tx a.tag,.pv-c-tx a.mention,.pv-prose a.tag,.pv-msg-tx a{color:var(--wine); font-weight:500}
.pv-pills{display:flex; flex-wrap:wrap; gap:4px; padding:0 16px 12px}
.pv-answer{margin:0 16px 12px; padding:8px 12px; border-left:3px solid var(--yes); border-radius:0 6px 6px 0; background:var(--yes-tint)}
.pv-answer-k{font-size:13px; font-weight:500; color:var(--yes)}
.pv-made{display:flex; flex-wrap:wrap; gap:4px; padding:0 16px 12px}
.pv-madechip{display:inline-flex; align-items:center; gap:4px; max-width:100%; padding:4px 8px; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface); font-size:13px}
.pv-madechip b{font-weight:500; color:var(--wine)}
.pv-madechip span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pv-madechip em{font-style:normal; color:var(--ink-2); white-space:nowrap}
.pv-media{display:grid; gap:0px; container-type:inline-size; background:var(--surface)}
.pv-post-head + .pv-media,.pv-pills + .pv-media{margin-top:12px}
.pv-ph{position:relative; display:block; overflow:hidden; background:var(--hover)}
.pv-ph img{width:100%; height:100%; object-fit:cover; object-position:var(--focus, 50% 38%)}
.pv-n1 .pv-ph{width:100%; height:min(calc(100cqw / var(--r, 1)), 560px)}
.pv-n2{grid-template-columns:1fr 1fr}
.pv-n2 .pv-ph{aspect-ratio:4/5}
.pv-n3{grid-template-columns:3fr 2fr; grid-template-rows:1fr 1fr; aspect-ratio:5/4}
.pv-n3 .pv-ph-big{grid-row:span 2}
.pv-ph-n{position:absolute; inset:0; display:grid; place-items:center; background:var(--scrim); color:var(--on-wine); font-size:24px; font-weight:600}
.pv-ph:hover img{filter:brightness(.97)}
.pv-files{display:flex; flex-wrap:wrap; gap:4px; padding:0 16px 12px}
.pv-filechip{display:inline-flex; align-items:center; gap:4px; max-width:100%; padding:4px 8px; border:1px solid var(--line); border-radius:var(--r-ctl); font-size:14px; color:var(--ink-2)}
.pv-filechip span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pv-filechip:hover{border-color:var(--wine); color:var(--wine)}
.pv-poll{display:grid; gap:8px; padding:0px 16px 12px}
.pv-opt{position:relative; display:flex; align-items:center; gap:8px; width:100%; min-height:48px; padding:0 12px; overflow:hidden;
  border:1px solid var(--line); border-radius:6px; background:var(--surface); font-size:16px; font-weight:500; color:var(--ink); text-align:left; cursor:pointer}
.pv-opt:hover{border-color:var(--line)}
.pv-opt:disabled{cursor:default}
.pv-opt-fill{position:absolute; inset:0 auto 0 0; background:var(--hover)}
.pv-opt[aria-pressed="true"]{border-color:var(--wine)}
.pv-opt[aria-pressed="true"] .pv-opt-fill{background:var(--wine-tint)}
.pv-opt-tick{position:relative; display:grid; place-items:center; flex:none; width:20px; height:20px; border:1.5px solid var(--line-2); border-radius:50%; color:transparent}
.pv-opt[aria-pressed="true"] .pv-opt-tick{border-color:var(--wine); background:var(--wine); color:var(--on-wine)}
.pv-opt-l{position:relative; flex:1; min-width:0; padding:12px 0; line-height:1.3}
.pv-opt-n{position:relative; font-size:14px; font-weight:500; color:var(--ink-2); font-variant-numeric:tabular-nums}
.pv-opt-who{margin:-4px 0 0px 12px; font-size:13px; color:var(--ink-2)}
.pv-poll-note{font-size:13px; color:var(--ink-2)}
.pv-sum{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 16px; padding:12px 0; font-size:14px; color:var(--ink-2)}
.pv-photoside .pv-sum{margin:4px 0}
.pv-rx{display:inline-flex; align-items:center; gap:4px; min-width:0}
.pv-rx-marks{display:inline-flex; padding-left:4px}
.pv-rx-marks i{display:grid; place-items:center; width:20px; height:20px; margin-left:-4px; border-radius:50%; background:var(--surface); box-shadow:0 0 0 2px var(--surface); font-size:13px; font-style:normal; line-height:1}
.pv-sum-c{margin-left:auto; padding:0; border:0; background:none; font-size:14px; color:var(--ink-2); cursor:pointer}
.pv-sum-c:hover{text-decoration:underline}
.pv-acts{display:flex; gap:4px; margin:0 8px; padding:4px 0; border-top:1px solid var(--line)}
.pv-acts > *{flex:1; min-width:0}
.pv-acts-one > *{flex:0 1 auto}
.pv-acts-wrap{flex-wrap:wrap; margin:12px 0 0; padding:4px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.pv-acts-wrap > *{flex:1 1 auto}
.pv-act{display:inline-flex; align-items:center; justify-content:center; width:100%; cursor:pointer; white-space:nowrap}
.pv-act:hover{background:var(--hover); color:var(--ink)}
.pv-act[aria-pressed="true"],.pv-act.is-on{color:var(--wine)}
.pv-act-ic{display:grid; place-items:center}
.pv-mk{font-size:20px; font-style:normal; line-height:1}
.pv-react{position:relative; display:flex; align-items:center}
.pv-react .pv-act{flex:1}
.pv-react-more{display:grid; place-items:center; flex:none; cursor:pointer}
.pv-react-more:hover{background:var(--hover)}
.pv-rpanel{position:absolute; z-index:30; bottom:calc(100% + 6px); left:0; display:flex; gap:0px; padding:4px; border:1px solid var(--line);
  border-radius:12px; background:var(--surface); box-shadow:var(--shadow-2)}
.pv-rpanel button{display:grid; place-items:center; width:42px; height:42px; border:0; border-radius:50%; background:none; font-size:24px; line-height:1; cursor:pointer; transition:transform var(--dur-fast) ease}
.pv-rpanel button:hover,.pv-rpanel button:focus-visible{transform:scale(1.15); background:var(--hover)}
.pv-rpanel button[aria-pressed="true"]{background:var(--wine-tint)}
.pv-rpanel-all{color:var(--ink-2)}
.pv-egrid{position:absolute; z-index:45; left:0; bottom:calc(100% + 56px); display:grid; grid-template-columns:repeat(10, 36px); gap:0px; max-height:260px; overflow-y:auto;
  padding:8px; border:1px solid var(--line); border-radius:var(--r-pop); background:var(--surface); box-shadow:var(--shadow-2)}
.pv-egrid button{width:36px; height:36px; border:0; border-radius:6px; background:none; font-size:20px; cursor:pointer}
.pv-egrid button:hover{background:var(--hover)}
@media (max-width:519px){ .pv-egrid{grid-template-columns:repeat(8, 36px)} }
.pv-comments{padding:4px 16px 12px; border-top:1px solid var(--line)}
.pv-earlier{padding:8px 0 0; border:0; background:none; font-size:14px; font-weight:500; color:var(--ink-2); cursor:pointer}
.pv-earlier:hover{text-decoration:underline}
.pv-c{display:flex; gap:8px; margin-top:12px}
.pv-c-av{flex:none}
.pv-c-main{flex:1; min-width:0}
.pv-bub{display:inline-block; max-width:100%; padding:8px 12px 8px; border-radius:12px; background:var(--hover)}
.pv-c-name{margin-right:4px; font-size:14px; font-weight:500; color:var(--ink)}
a.pv-c-name:hover{text-decoration:underline}
.pv-c-tx{margin-top:0px; font-size:16px; line-height:1.45; color:var(--ink); overflow-wrap:anywhere}
.pv-c-meta{display:flex; align-items:center; gap:4px; padding:0px 0 0 12px; font-size:13px; color:var(--ink-2)}

.pv-cbox{display:flex; align-items:center; gap:4px; margin-top:12px}
.pv .pv-cbox input[type=text],.pv .pv-cbox input:not([type]){flex:1; min-width:0; min-height:40px; padding:0 12px; border:1px solid transparent; border-radius:var(--r-ctl); background:var(--hover); font-size:16px}
.pv .pv-cbox input:focus{background:var(--surface); border-color:var(--line);}
.pv-cpic{cursor:pointer}
.pv-cpic:has(input:focus-visible){outline:2px solid var(--wine)}
.pv-cpic.has-file{color:var(--wine); background:var(--wine-tint)}
.pv-send{color:var(--wine)}

/* ---- the feed, without boxes: the composer as a field, posts one under another with a hairline between ---- */
.pv-feedcol > .pv-compose{border:0; border-radius:var(--r-post); margin:0; padding:0}
.pv-feedcol > .pv-compose .pv-prompt{border-color:var(--line); background:var(--surface)}
.pv-feedcol > .pv-compose .pv-prompt:hover{border-color:var(--line); background:var(--surface)}
.pv-feedcol > .pv-compose .pv-compose-ways{justify-content:flex-start; gap:4px; margin:8px 0 0 48px; padding-top:0; border-top:0}
.pv-feedcol > .pv-compose .pv-way{flex:none; min-height:36px; padding:0 8px; font-size:14px}
.pv-feedcol > .pv-compose.is-open{padding:16px 16px 12px; background:var(--surface)}
.pv-feedbar{margin:24px 0 0; padding-top:16px; border-top:1px solid var(--line)}
.pv-feed > .pv-card{border:0; border-radius:0; margin:0; padding:24px 0 8px}
.pv-feed > .pv-card + .pv-card{border-top:1px solid var(--line)}
.pv-feed .pv-post-head{padding:0}
.pv-feed .pv-pinrow{margin:0 0 8px}
.pv-feed .pv-post-tx,.pv-feed .pv-pills,.pv-feed .pv-made,.pv-feed .pv-files,.pv-feed .pv-poll{padding-left:0; padding-right:0}
.pv-feed .pv-answer{margin-left:0; margin-right:0}
.pv-feed .pv-media{border-radius:var(--r-media); overflow:hidden}
.pv-feed .pv-sum{margin:0}
.pv-feed .pv-acts{margin:0; gap:4px}
.pv-feed .pv-acts > *{flex:0 0 auto}
.pv-feed .pv-act{width:auto}
.pv-feed .pv-react .pv-act{flex:none}
.pv-feed .pv-comments{padding-left:0; padding-right:0}
.pv-feed .pv-digest{padding:24px 0 8px}
.pv-feed .pv-digest-h{padding:0 0 8px}
.pv-feed .pv-post.is-pinned{padding-left:16px; border-left:3px solid var(--line)}

/* ---- the composer ------------------------------------------------------------------ */
.pv-compose{padding:12px 16px 8px}
.pv-compose-rest{display:flex; align-items:center; gap:12px}
.pv-prompt{flex:1; min-width:0; min-height:44px; padding:0 16px; border:1px solid transparent; border-radius:var(--r-ctl); background:var(--hover); color:var(--ink-2);
  font-size:16px; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:text}
.pv-prompt:hover{background:var(--hover)}
/* a phone's box is too narrow for the name too ("…the family, M…"): there the words stop at the family */
.pv-prompt-short{display:none}
@media (max-width:1023px){ .pv-prompt-long{display:none} .pv-prompt-short{display:inline} }
.pv-compose-ways{display:flex; gap:0px; margin:12px -8px 0; padding-top:4px; border-top:1px solid var(--line)}
.pv-way{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:0 4px; border:0; border-radius:6px;
  background:transparent; font-size:14px; font-weight:500; color:var(--ink-2); cursor:pointer; white-space:nowrap}
.pv-way:hover{background:var(--hover); color:var(--ink)}
.pv-way svg{color:var(--ink-2)}
.pv-compose.is-open .pv-compose-rest,.pv-compose.is-open .pv-compose-ways{display:none}
.pv-compose-forms{padding:0px 0 8px}
.pv-intents{display:flex; align-items:center; gap:4px; margin:0 -4px 12px; overflow-x:auto; scrollbar-width:none}
.pv-intents button[role=tab]{display:inline-flex; align-items:center; gap:4px; flex:none; min-height:34px; padding:0 12px; border:0; border-radius:var(--r-ctl); background:none;
  font-size:14px; font-weight:500; color:var(--ink-2); cursor:pointer}
.pv-intents button[role=tab]:hover{background:var(--hover)}
.pv-intents button[aria-selected="true"]{background:var(--wine-tint); color:var(--wine)}
.pv-compose-x{margin-left:auto}
.pv-cform{display:grid; gap:12px}
.pv-compose-who{display:flex; align-items:center; gap:8px; font-size:14px}
.pv-cform textarea{min-height:96px}
.pv-cform-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.pv-pollins{display:grid; gap:4px}
.pv-compose-open{padding:16px}

/* ---- the home ------------------------------------------------------------------------ */
/* the wedding at the door: their photograph across the page, then a paper foot with
   their names, when and where, how long, and the two clocks; the four days beside it in
   the supporting column, then what waits on you and the rest; the feed under the photograph */
.pv-home{display:grid; gap:0; grid-template-columns:minmax(0, 1fr); grid-template-areas:"hero" "days" "feed" "side"; max-width:720px; margin-inline:auto}
.pv-hero{grid-area:hero}
.pv-days-nav{grid-area:days}
.pv-feedcol{grid-area:feed; min-width:0}
.pv-sidecol{grid-area:side; min-width:0}
@container (min-width:940px){
  .pv-home{max-width:none; grid-template-columns:minmax(0, 1fr) 300px; grid-template-rows:auto auto 1fr; grid-template-areas:"hero hero" "feed days" "feed side"; column-gap:32px; align-items:start}
  /* the hairline between the feed and the side column, as on every page with two columns: under the photograph, down the middle of the gap */
  .pv-home::before{content:''; grid-column:1; grid-row:2 / -1; justify-self:end; align-self:stretch; width:1px; margin-right:-16px; background:var(--line)}
}
@container (max-width:939px){
  .pv-sidecol{margin-top:12px; padding-top:24px; border-top:1px solid var(--line)}
}
.pv-hero{margin:0 0 26px; overflow:hidden; background:var(--surface); border-radius:16px}
@container (min-width:640px){ .pv-hero{margin-bottom:44px} }
.pv-hero-ph{position:relative; margin:0; aspect-ratio:16/10; background:var(--hover)}
.pv-hero-ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--focus, 50% 30%)}
.pv-hero-foot{display:grid; gap:18px; padding:20px 18px 22px; background:var(--surface)}
.pv-hero-tx{min-width:0}
.pv-hero-tx h1{margin:0}
.pv-hero .pv-names{display:block; font-family:var(--display); font-weight:500; font-size:36px; line-height:1.02; letter-spacing:-.012em}
.pv-hero .pv-dateline{margin-top:12px}
.pv-hero .pv-dateline + .pv-dateline{margin-top:2px}
.pv-hero-facts{display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px 28px}
.pv-togo{display:flex; flex-direction:column; color:var(--ink)}
a.pv-togo:hover b{color:var(--wine)}
.pv-togo b{font-size:32px; font-weight:600; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums}
.pv-togo span{margin-top:4px; font-size:13px; font-weight:500; line-height:1.25; color:var(--ink-2)}
@container (min-width:640px){
  .pv-hero-ph{aspect-ratio:2.5/1}
  .pv-hero-foot{padding:24px 28px 26px}
  .pv-hero .pv-names{font-size:44px}
  .pv-hero-facts{gap:0 28px}
  .pv-togo b{font-size:32px}
}
@container (min-width:940px){
  .pv-hero-ph{aspect-ratio:2.85/1}
  .pv-hero-foot{grid-template-columns:minmax(0, 1fr) auto; align-items:start; gap:24px 32px; padding:22px 30px 24px}
  .pv-hero .pv-names{font-size:48px}
  .pv-hero-facts{flex-wrap:nowrap; gap:0 26px; min-width:268px; margin-left:auto; padding-left:28px; border-left:1px solid var(--line)}
  .pv-togo b{font-size:32px}
}
/* the two clocks */
.pv-clocks{display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px}
.pv-clock{display:flex; align-items:center; gap:9px; min-width:0}
.pv-clock-face{flex:none; width:32px; height:32px}
.pv-clock-face .f{fill:var(--surface); stroke:var(--line); stroke-width:1}
.pv-clock-face .k{stroke:var(--ink-3); stroke-width:1.2; stroke-linecap:round}
.pv-clock-face .hh{stroke:var(--ink); stroke-width:2; stroke-linecap:round}
.pv-clock-face .mh{stroke:var(--ink); stroke-width:1.3; stroke-linecap:round}
.pv-clock-face .pin{fill:var(--gold)}
.pv-clock.is-night .pv-clock-face .f{fill:var(--clock-night); stroke:var(--clock-night)}
.pv-clock.is-night .pv-clock-face .k{stroke:var(--clock-night-tick)}
.pv-clock.is-night .pv-clock-face :is(.hh, .mh){stroke:var(--clock-night-hand)}
.pv-clock-tx{display:grid; grid-template-columns:auto; line-height:1.2}
.pv-clock-tx .t{font-size:16px; font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:var(--ink)}
.pv-clock-where{font-size:12.5px; font-weight:500; color:var(--ink-2); white-space:nowrap}
.pv-clock-part{font-size:12px; color:var(--ink-2)}
.pv-clock-part i{font-style:normal}
.pv-clocks-gap{flex-basis:100%; font-size:12.5px; color:var(--ink-2)}
.pv-hero .pv-clock-part{display:none}
@container (min-width:940px){ .pv-hero .pv-clocks{flex-direction:column; align-items:flex-start; gap:8px} .pv-hero .pv-clocks-gap{margin-top:2px} }
/* the four days, in the supporting column (a 2×2 on a phone) */
.pv-days-nav{margin:0 0 24px}
.pv-days{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.pv-day{display:flex; flex-direction:column; min-width:0; margin:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-post); background:var(--surface); color:var(--ink)}
.pv-day:hover{border-color:var(--line)}
.pv-day img{width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--hover); border-bottom:var(--line)}
.pv-day > span{display:flex; flex-direction:column; min-width:0; padding:8px 8px 8px}
.pv-day b{display:flex; align-items:baseline; gap:8px; font-family:var(--title); font-weight:500; font-size:16px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pv-day:hover b{color:var(--wine)}
.pv-day em{font-style:normal; margin-top:0px; font-size:12px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pv-day > svg{display:none}
/* what is waiting on you, in one line on a phone, open to see */
.pv-glance{margin:0 0 12px}
.pv-glance > summary{display:flex; align-items:center; gap:8px; min-height:48px; padding:0 12px; border:1px solid var(--line); border-radius:var(--r-post); background:var(--surface);
  list-style:none; font-size:14px; color:var(--ink-2); cursor:pointer}
.pv-glance > summary::-webkit-details-marker{display:none}
.pv-glance > summary b{color:var(--ink); font-weight:500}
.pv-glance > summary .pv-glance-n{display:inline-grid; place-items:center; min-width:24px; height:24px; padding:0 8px; border-radius:12px; background:var(--wine); color:var(--on-wine); font-size:13px; font-weight:500}
.pv-glance > summary > svg:last-child{margin-left:auto; flex:none; color:var(--ink-2); transition:transform var(--dur-fast) ease}
.pv-glance[open] > summary{border-radius:var(--r-post) var(--r-post) 0 0}
.pv-glance[open] > summary > svg:last-child{transform:rotate(180deg)}
.pv-glance-in{padding:12px 16px 16px; border:1px solid var(--line); border-top:0; border-radius:0 0 var(--r-post) var(--r-post); background:var(--surface)}
.pv-glance-in > .pv-sect{margin-bottom:12px}
.pv-glance-in > .pv-sect:last-child{margin-bottom:0}
@container (min-width:940px){ .pv-glance{display:none} }
@container (max-width:939px){ .pv-sidecol .pv-foryou,.pv-sidecol .pv-mood{display:none} }
.pv-feedbar{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px}
.pv-feedbar .pv-chips{margin:0}
/* the supporting column: lower in voice than the feed */
.pv-sidecol .pv-sect{margin-bottom:24px}
.pv-sidecol .pv-panel-h{font-size:16px}
.pv-todo-tx{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin:0 0 4px; font-size:16px; font-weight:500; line-height:1.45; color:var(--ink)}
.pv-todo-tx:hover{color:var(--wine)}
.pv-todo .pv-actions{margin:8px 0 0px}
.pv-todo + .pv-mini{margin-top:12px; padding-top:12px; border-top:1px solid var(--line)}
.pv-mood .pv-quiet{margin-top:8px; font-size:14px}
.pv-folks{margin:0}
.pv-folks li{display:flex; align-items:center; gap:4px; border-radius:6px}
.pv-folk{display:flex; align-items:center; gap:8px; flex:1; min-width:0; padding:4px 0}
.pv-folk > span{min-width:0}
.pv-folk:hover b{color:var(--wine)}
.pv-folk b{display:flex; align-items:center; gap:4px; font-size:14px; font-weight:500; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pv-folk em{display:block; font-style:normal; font-size:13px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pv-folk em.is-unread{color:var(--ink); font-weight:500}
/* the family, as faces */
.pv-facegrid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px 4px; margin:4px 0 0}
.pv-face{position:relative; display:flex; flex-direction:column; align-items:center; gap:0; min-width:0; padding:4px 0px; border-radius:var(--r-ctl); text-align:center; color:var(--ink)}
.pv-face .pv-badge{position:absolute; top:2px; left:calc(50% + 12px); box-shadow:0 0 0 2px var(--surface)}
.pv-around-sect{margin-top:4px}
.pv-face:hover{background:var(--hover)}
.pv-face .avatar{width:48px; height:48px; margin-bottom:4px; font-size:16px}
.pv-face b{font-size:13px; font-weight:500; line-height:1.25; overflow-wrap:anywhere}
.pv-face em{max-width:100%; margin-top:0px; font-style:normal; font-size:12px; line-height:1.3; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pv-bar{display:block; height:6px; margin:8px 0; border-radius:6px; background:var(--hover); overflow:hidden}
.pv-bar i{display:block; height:100%; background:var(--wine)}
.pv-bar-lg{height:8px; margin:12px 0 8px}
.pv-around{display:grid; gap:0}
.pv-around > li + li{border-top:1px solid var(--line)}
.pv-around-row{display:flex; align-items:center; gap:8px; min-height:46px; padding:4px 0}
.pv-around-row > span{display:flex; flex-direction:column; flex:1; min-width:0}
.pv-around-row b{font-size:14px; font-weight:500; line-height:1.3}
.pv-around-row em{font-style:normal; font-size:13px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pv-around-row > svg{flex:none; color:var(--ink-3)}
a.pv-around-row:hover b{color:var(--wine)}
/* The house's bar (views/preview/kit.js houseBar; 30 September under the photograph, 1 October with
   Search: "combine search with Ask AI … the AI can't be the same as regular search or post, visually";
   that evening, of tabs over a boxed field over the composer: "this is looking very bad").
   later that night, "now we have search and ask ghar on both tabs": one way per page, no toggle).
   One row: the words, a clip for Ask, a round go. Search is a plain field like any other; Ask the
   house has the house's gold running into its wine along the edge and a warm white inside */
.pv-housebar{margin:0 0 12px}
.pv-feedcol > .pv-housebar{margin-bottom:24px}
.pv-housebar-row{display:flex; flex-wrap:wrap; align-items:center; gap:4px; min-height:46px; padding:4px 4px 4px 4px; border:1px solid var(--line); border-radius:var(--r-post); background:var(--surface);
  transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease}
.pv-housebar-row:hover{border-color:var(--line)}
.pv-housebar-row:has(:is(input[type=text], input[type=search]):focus){border-color:var(--wine); box-shadow:0 0 0 3px var(--wine-tint)}
.pv-housebar-f{display:flex; flex-wrap:wrap; align-items:center; gap:4px; flex:1; min-width:0}
.pv-housebar-f[hidden]{display:none}
.pv-housebar-ic{display:grid; place-items:center; flex:none; padding-left:4px; color:var(--ink-2)}
.pv .pv-housebar-row :is(input[type=text], input[type=search]){flex:1; width:auto; min-width:0; min-height:36px; padding:0 4px; border:0; border-radius:0; background:none; font-size:16px}
.pv .pv-housebar-row :is(input[type=text], input[type=search]):focus{box-shadow:none}
.pv-housebar-go{display:inline-flex; align-items:center; justify-content:center; gap:4px; flex:none; min-width:34px; height:34px; padding:0; border:0; border-radius:999px; background:var(--wine); color:var(--on-wine); cursor:pointer}
.pv-housebar-go:hover{background:var(--wine-press)}
.pv-housebar-go[disabled]{opacity:.6; cursor:default}
.pv-housebar-go > span{font-size:14px; font-weight:500}
/* its word shows while it has something to say: File it with something attached, Asking… while it waits */
.pv-askbar.has-file .pv-housebar-go,.pv-housebar-go[disabled]{padding:0 12px 0 8px}
.pv-askbar.has-file .pv-housebar-go > span,.pv-housebar-go[disabled] > span{position:static !important; width:auto; height:auto; margin:0; overflow:visible; clip:auto; clip-path:none}
.pv-housebar.is-ask .pv-housebar-row{border-color:transparent;
  background:linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(115deg, var(--gold), var(--gold) 38%, var(--wine) 74%, var(--wine)) border-box}
.pv-housebar.is-ask .pv-housebar-row:hover{border-color:transparent}
.pv-housebar.is-ask .pv-housebar-row:has(input[type=text]:focus){border-color:transparent; box-shadow:0 0 0 3px var(--wine-tint)}
/* (v188, his word of 15 Oct: "a glowing border like Apple does for Siri… the movement I really like of Siri", in the house's
   own colours; then "does not feel very apple-like or premium… elegant", of a 1px line under a wine haze) while an asking bar
   waits for its answer (preview-home.js adds is-working on its press): a lit line of champagne, rose and the house's gold and
   wine turning round its edge, a warm light just inside it, and a soft halo of the light colours only (never the dark wine,
   which blurs to a bruise) turning the other way and breathing; it fades in. The answer's card glows once as it lands and
   settles to its own edge. Less motion asked for: the light stays still while it works and the card simply appears. */
@property --pv-glow{syntax:'<angle>'; inherits:true; initial-value:0deg}
.pv-housebar.is-working{--pv-rose:color-mix(in oklab, var(--wine) 58%, var(--surface)); --pv-champagne:color-mix(in oklab, var(--gold) 62%, var(--surface));
  --pv-line:var(--gold), var(--pv-rose), var(--wine), var(--pv-rose), var(--pv-champagne), var(--gold), var(--gold);
  --pv-halo:var(--pv-champagne), var(--pv-rose), var(--gold), var(--pv-rose), var(--pv-champagne);
  position:relative; isolation:isolate; animation:pv-glow-turn 4.2s linear infinite}
.pv-housebar.is-working .pv-housebar-row,.pv-housebar.is-working .pv-housebar-row:is(:hover, :has(input[type=text]:focus)){border-color:transparent;
  box-shadow:inset 0 0 10px -6px color-mix(in oklab, var(--line) 45%, transparent);
  background:linear-gradient(var(--surface), var(--surface)) padding-box, conic-gradient(from var(--pv-glow), var(--pv-line)) border-box}
.pv-housebar.is-working::before,.pv-housebar.is-working::after{content:''; position:absolute; z-index:-1; border-radius:var(--r-post); pointer-events:none}
/* (v190, his word of 16 Oct: "a bit too much… dialed down a little") the halo half as bright and half as wide, the lit line softer,
   the landing half as far over the card's own light; the same motion */
.pv-housebar.is-working::before{inset:-1px; background:conic-gradient(from var(--pv-glow), var(--pv-line)); filter:blur(2px); opacity:.5; animation:pv-glow-in var(--dur-slow) ease-out both}
.pv-housebar.is-working::after{inset:-3px; background:conic-gradient(from calc(200deg - var(--pv-glow)), var(--pv-halo)); filter:blur(8px); opacity:.3;
  animation:pv-glow-in .8s ease-out both, pv-glow-breathe 3s ease-in-out .8s infinite alternate}
@keyframes pv-glow-turn{to{--pv-glow:360deg}}
@keyframes pv-glow-in{from{opacity:0}}
@keyframes pv-glow-breathe{from{opacity:.3} to{opacity:.48}}
@media (prefers-reduced-motion:reduce){ .pv-housebar.is-working::before,.pv-housebar.is-working::after{animation:none} }
.pv-card:is(.pv-aibox, .pv-answerbox){animation:pv-glow-land var(--dur-slow) ease-out}
@keyframes pv-glow-land{from{box-shadow:0 0 0 1px color-mix(in oklab, var(--line) 60%, transparent), 0 0 20px 1.5px color-mix(in oklab, var(--line) 47%, transparent), 0 0 38px 5px color-mix(in oklab, var(--wine) 15%, transparent)}}
/* (v188, his word of 15 Oct: the answer's box "doesn't have a boundary… give that colored boundary as well, so that it's clear
   that it's… from the AI") the answer's card wears the bar's edge, the house's gold running into its wine, drawn over the card
   so nothing inside it moves; in every room and at Ask the house */
.pv .pv-card:is(.pv-aibox, .pv-answerbox){position:relative}
.pv .pv-card:is(.pv-aibox, .pv-answerbox)::before{content:''; position:absolute; inset:0; padding:0px; border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg, var(--gold), var(--gold) 38%, var(--wine) 74%, var(--wine));
  -webkit-mask:linear-gradient(var(--ink) 0 0) content-box, linear-gradient(var(--ink) 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(var(--ink) 0 0) content-box exclude, linear-gradient(var(--ink) 0 0)}
/* (v188, his word of 15 Oct: "a continuous light glow and a cross button") the answer's card keeps a still, soft light of the
   house's gold and a breath of rose around its edge (lights still: the moving one is the bar's while it works), brighter as it
   lands; its × ends on the card's inset at the right, as a button in a card does, level with "You asked", 44 to press on a phone (as the bar's "?") */
.pv .pv-card:is(.pv-aibox, .pv-answerbox){box-shadow:0 0 0 0 transparent, 0 0 16px 0 color-mix(in oklab, var(--gold) 34%, transparent), 0 0 32px 2px color-mix(in oklab, var(--wine) 10%, transparent)}
.pv .pv-card:is(.pv-aibox, .pv-answerbox) > .pv-answer-x{position:absolute; top:calc(var(--card-in) - 9px); right:var(--card-in); z-index:1}
.pv .pv-card.pv-answerbox > .pv-answer-x{top:9px; right:18px}
/* (v190, his words of 16 Oct: "the line about you asked and then my question… it's merging with the phrase you asked"; "the text can
   wrap a little early so that it's not on the same column as the cross button") the question its own line, in quotes, in ink at 500,
   12 before the answer; the question and the answer wrap 12 before the ×'s column (36), laptop and phone */
.pv .pv-aiq{margin:0 0 12px; font-size:var(--hb, 15px); font-weight:500; line-height:1.45; color:var(--ink); overflow-wrap:anywhere}
.pv .pv-answer-x ~ :is(.pv-aiq, .pv-prose){padding-right:48px}
.pv-aibox .pv-aione{margin:0; font-weight:500; color:var(--ink)}
/* (v190 int) the one change's sentence and the line under it 12 apart, as the last of several changes and that line are */
.pv .pv-aibox .pv-aione + .pv-small{margin-top:12px}
/* (v188, his word of 15 Oct: "the single cross is not looking nice… give it the hover boundary even without the hover… the
   color inside the circles can be a little darker") a × that closes an answer's card or a pop-up keeps its round ground, a
   shade under the hover's, and deeper under a pointer; every closing × (and a note's) is 44 to press on a phone */
.pv .pv-icon-btn:is(.pv-answer-x, [data-close]){background:var(--hover); color:var(--ink-2)}
.pv .pv-icon-btn:is(.pv-answer-x, [data-close]):hover{background:color-mix(in oklab, var(--hover) 86%, var(--ink)); color:var(--ink)}
@media (max-width:1023px){ .pv .pv-icon-btn:is(.pv-answer-x, [data-close], [data-note-x])::after{content:''; position:absolute; inset:-4px} }
/* (3 October, his "i can't click the send to AI button on live mobile browser": an iPhone gives a file input a width of
   its own whatever its rule says, so the invisible picker reached over the send button beside it, and a tap there opened
   Photo Library instead of asking; now it is clipped to its circle, as .pv-file's is to its button) */
.pv-askbar-attach{cursor:pointer; overflow:hidden}
.pv-askbar-attach input{position:absolute; inset:0; width:100%; height:100%; min-width:0; max-width:100%; margin:0; opacity:0; font-size:0; cursor:pointer}
.pv-askbar-attach:has(input:focus-visible){outline:2px solid var(--wine); outline-offset:2px}
.pv-askbar.has-file .pv-askbar-attach{background:var(--wine-tint); color:var(--wine)}
.pv-askbar-picked{flex-basis:100%; padding:4px 4px 4px}
.pv-askbar-files{display:flex; flex-wrap:wrap; align-items:center; gap:4px}

.pv-askbar-picked .pv-small{margin-top:4px}
.pv-fromus{display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--surface)}
.pv-fromus:hover{border-color:var(--line)}
.pv-fromus-mark,.pv-usmark{display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:50%; background:var(--gold-tint); color:var(--gold); font-family:var(--title); font-size:16px; font-weight:500; letter-spacing:.02em}
.pv-fromus-tx{display:flex; flex-direction:column; flex:1; min-width:0}
.pv-fromus-tx em{font-style:normal; font-size:13px; font-weight:500; color:var(--ink-2)}
.pv-fromus-tx b{font-family:var(--title); font-weight:500; font-size:20px; line-height:1.3}
.pv-fromus-tx span{font-size:14px; color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.pv-fromus > svg{flex:none; color:var(--ink-2)}
.pv-confirm{display:flex; align-items:center; gap:8px; padding:12px 16px; background:var(--warn-tint); border-color:var(--line); color:var(--warn); font-size:14px}
.pv-confirm p{flex:1; min-width:0}
.pv-confirm a{font-weight:500; text-decoration:underline}
.pv-invite{display:flex; align-items:center; gap:12px; padding:12px 16px; color:var(--ink)}
.pv-invite > svg{flex:none; color:var(--wine)}
.pv-invite > span:nth-child(2){display:flex; flex-direction:column; flex:1; min-width:0}
.pv-invite em{font-style:normal; font-size:13px; font-weight:500; color:var(--ink-2)}
.pv-invite span span{font-size:14px; color:var(--ink-2)}
.pv-ask{padding:16px 16px; border-color:var(--line); background:var(--surface)}
.pv-ask-t{margin:4px 0 4px; font-size:16px; font-weight:500; line-height:1.4; letter-spacing:-.01em}
.pv-askpanel{padding:16px 16px}
.pv-todaycard{display:block; padding:12px 16px; border-color:var(--line); background:var(--wine-tint)}
.pv-todaycard p{margin-top:4px; font-size:16px}
.pv-todaycard em{font-style:normal; font-weight:500; color:var(--wine)}
.pv-storm{padding:16px}
.pv-storm h2{font-size:20px; font-weight:600; margin-bottom:8px}
/* new photographs, in proportion: several albums as one note, one album as a small strip */
.pv-digest{padding:12px 0 4px}
.pv-digest-h{display:flex; align-items:center; gap:8px; padding:0 16px 8px}
.pv-digest-h > span:first-child{display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:50%; background:var(--gold-tint); color:var(--gold)}
.pv-digest-h p{flex:1; min-width:0; font-size:16px; line-height:1.35}
.pv-digest-h .pv-meta{margin-top:0px}
.pv-nw{white-space:nowrap}

/* ---- photos ---------------------------------------------------------------------------- */
.pv-sec{margin-top:24px}
.pv-sec:first-child{margin-top:0}
.pv-sec-h{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 12px}
.pv-sec-h h2{font-size:16px; font-weight:600; letter-spacing:-.01em}
.pv-sec-h p{font-size:14px; color:var(--ink-2)}
/* albums: chosen columns, not as many as fit — three across for a handful, four for a big collection */
.pv-albums{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px 12px}
@container (min-width:720px){ .pv-albums{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:32px 24px} }
.pv-album{display:block; min-width:0}
.pv-album-cover{position:relative; display:grid; place-items:center; aspect-ratio:1; overflow:hidden; border-radius:var(--r-media); background:var(--hover); color:var(--gold)}
.pv-album-cover img{width:100%; height:100%; object-fit:cover; object-position:var(--focus, 50% 40%)}
.pv-album-tx{display:block; padding:12px 0px 0}
.pv-album-tx b{display:block; font-family:var(--title); font-weight:500; font-size:20px; line-height:1.2; letter-spacing:-.005em; color:var(--ink)}
.pv-album:hover .pv-album-tx b{color:var(--wine)}
.pv-album-tx em{display:flex; flex-wrap:wrap; align-items:center; gap:4px 4px; margin-top:4px; font-size:14px; font-style:normal; color:var(--ink-2)}
.pv-album-tx em svg{vertical-align:-2px}
.pv-album-tx .pv-chip{min-height:20px; font-size:12px; font-weight:500}
/* a photograph keeps its own shape: each row grows to the width at one height (the house's own grid) */
.pv-grid{display:flex; flex-wrap:wrap; gap:4px; --row:170px}
.pv-grid::after{content:''; flex:99999 1 0; min-width:0}
.pv-tile{--r:1; position:relative; display:block; min-width:0; flex:calc(var(--r) * 100) 1 calc(var(--r) * var(--row));
  max-width:calc(var(--r) * var(--row) * 1.9); aspect-ratio:var(--r); overflow:hidden; border-radius:var(--r-tile); background:var(--hover)}
.pv-tile img{width:100%; height:100%; object-fit:cover}
.pv-tile:hover img{filter:brightness(.96)}
.pv-tile-from,.pv-tile-n{position:absolute; bottom:6px; padding:0px 8px; border-radius:6px; background:var(--scrim); color:var(--on-wine); font-size:12px; font-weight:500}
.pv-tile-from{left:6px}
.pv-tile-n{right:6px}
.pv-tick{position:absolute; top:6px; left:6px; display:none}
.pv-tick input{position:absolute; opacity:0}
.pv-tick i{display:grid; place-items:center; width:26px; height:26px; border:2px solid var(--surface); border-radius:50%; background:var(--scrim); color:transparent; box-shadow:var(--shadow-1)}
.pv-tick input:checked + i{background:var(--wine); color:var(--on-wine)}
.pv-tick input:focus-visible + i{ outline-offset:2px}
.is-selecting .pv-tick{display:block}
.is-selecting .pv-tile:has(input:checked){outline:3px solid var(--wine); outline-offset:-3px}
.pv-selbar{position:sticky; top:8px; z-index:15; display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 12px; padding:8px 8px; border-radius:var(--r-post); background:var(--ink); color:var(--on-wine)}
.pv-selbar .pv-btn-quiet{border-color:var(--line); color:var(--on-wine)}
.pv-selbar .pv-btn-quiet:hover{background:var(--hover); border-color:var(--line)}
.pv-selbar .pv-btn-danger{border-color:var(--line); color:var(--danger-tint)}
.pv-selbar .pv-btn-danger:hover{background:var(--hover); border-color:var(--line)}
.pv-selbar .pv-btn-secondary{background:var(--hover); border-color:var(--line); color:var(--on-wine)}
.pv-selbar select{min-height:34px; width:auto; padding-top:4px; padding-bottom:4px; font-size:14px}
.pv-selbar-n{margin-right:auto; font-size:14px}
.pv-pickinto{display:inline-flex; align-items:center; gap:4px}
.pv-outlink{display:flex; align-items:center; gap:12px; padding:8px 12px}
.pv-outlink img{flex:none; width:64px; height:48px; object-fit:cover; border-radius:var(--r-media)}
.pv-outlink-ic{display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:var(--r-media); background:var(--hover); color:var(--ink-2)}
.pv-outlink-tx{display:flex; flex-direction:column; flex:1; min-width:0}
.pv-outlink-tx b{font-weight:500}
.pv-outlink-tx em{font-style:normal; font-size:13px; color:var(--ink-2)}
.pv-emptyart{display:grid; align-items:center; gap:16px; padding:16px; background:var(--surface)}
.pv-emptyart figure{display:grid; gap:4px}
.pv-emptyart img{width:100%; aspect-ratio:2/1; object-fit:cover; border-radius:var(--r-media)}
.pv-emptyart figcaption{font-size:13px; color:var(--ink-2)}
@container (min-width:720px){ .pv-emptyart{grid-template-columns:minmax(0, 340px) 1fr} }
.pv-remote{display:flex; flex-wrap:wrap; gap:4px; margin:8px 0 80px; --row:150px}
.pv-remote::after{content:''; flex:99999 1 0; min-width:0}
.pv-rtile{--r:1; position:relative; display:block; min-width:0; flex:calc(var(--r) * 100) 1 calc(var(--r) * var(--row)); max-width:calc(var(--r) * var(--row) * 1.9);
  aspect-ratio:var(--r); overflow:hidden; border-radius:var(--r-tile); background:var(--hover); cursor:pointer}
.pv-rtile img{width:100%; height:100%; object-fit:cover}
.pv-rtile input{position:absolute; opacity:0}
.pv-rtile i{position:absolute; top:6px; left:6px; display:grid; place-items:center; width:24px; height:24px; border:2px solid var(--surface); border-radius:50%; background:var(--scrim); color:transparent}
.pv-rtile input:checked ~ i{background:var(--wine); color:var(--on-wine)}
.pv-rtile:has(input:checked){outline:3px solid var(--wine); outline-offset:-3px}
.pv-rtile.is-here{opacity:.55; cursor:default}
.pv-rtile.is-here i{background:var(--yes); color:var(--on-wine)}
.pv-stickybar{position:sticky; bottom:12px; z-index:10; display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 12px; border-radius:var(--r-pop); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-2)}
/* one photograph: the picture first, what it is and what was said beside it; the rest behind Manage */
.pv-photoview{display:grid; gap:16px}
.pv-stage{position:relative; display:grid; place-items:center; min-height:300px; border-radius:var(--r-post); overflow:hidden; background:var(--ink)}
.pv-stage img{max-width:100%; max-height:calc(100vh - 170px); object-fit:contain}
.pv-stage-nav{position:absolute; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1)}
.pv-stage-nav:hover{background:var(--surface)}
.pv-stage-nav.is-prev{left:12px}
.pv-stage-nav.is-next{right:12px}
.pv-stage-count{position:absolute; left:12px; bottom:12px; padding:4px 8px; border-radius:12px; background:var(--scrim); color:var(--on-wine); font-size:13px; font-weight:500; font-variant-numeric:tabular-nums}
.pv-photoside{display:grid; gap:12px; align-content:start; min-width:0}
.pv-photoside-top{display:flex; align-items:flex-start; justify-content:space-between; gap:8px}
.pv-photo-cap{font-family:var(--serif); font-size:20px; font-weight:400; line-height:1.4; color:var(--ink)}   /* the page's heading now (an h1, for a screen reader), in the weight it had as words */
.pv-photo-cap.is-empty{font-family:var(--ui); font-size:16px; color:var(--ink-2)}
.pv-photo-by{font-size:14px; color:var(--ink-2)}
.pv-photo-by a{color:var(--ink-2); font-weight:500}
.pv-photo-by a:hover{color:var(--wine)}
.pv-inpic{display:grid; gap:8px}
.pv-tagrow{display:flex; flex-wrap:wrap; gap:4px}
.pv-ptag{display:inline-flex; align-items:center; gap:0px; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface)}
.pv-ptag > a,a.pv-ptag{display:inline-flex; align-items:center; gap:4px; padding:4px 8px 4px 4px; font-size:14px; font-weight:500}
a.pv-ptag:hover,.pv-ptag > a:hover{color:var(--wine)}
.pv-ptag form{display:inline-flex}
.pv-ptag-x{display:grid; place-items:center; width:24px; height:24px; margin-right:4px; border:0; border-radius:50%; background:none; color:var(--ink-2); cursor:pointer}
.pv-ptag-x:hover{background:var(--hover); color:var(--danger)}
.pv-photo-comments{padding-top:12px; border-top:1px solid var(--line)}
.pv-photoside .pv-acts-wrap{flex-wrap:nowrap; gap:0px}
.pv-photoside .pv-acts-wrap > *{flex:1 1 0}
.pv-photoside .pv-act{padding:0 4px; gap:4px}
@container (min-width:900px){ .pv-photoview{grid-template-columns:minmax(0, 1fr) 340px; align-items:start} .pv-stage{min-height:560px; position:sticky; top:14px} }

/* ---- the invitations ---------------------------------------------------------------- */
.pv-film{display:grid; gap:16px; margin:32px 0 8px; padding-top:32px; border-top:1px solid var(--line)}
.pv-film-frame{justify-self:center; width:min(100%, 340px); overflow:hidden; border-radius:var(--r-media); background:var(--ink); box-shadow:var(--shadow-1)}
.pv-film-frame video{width:100%; aspect-ratio:2/3; object-fit:contain; background:var(--ink)}
.pv-film-tx{align-self:center; max-width:46ch}
.pv-film-tx h2{margin-top:0px; font-family:var(--title); font-weight:500; font-size:24px; line-height:1.2}
.pv-film-tx p.pv-film-b{margin-top:8px; font-size:16px; line-height:1.55; color:var(--ink-2)}
.pv-film-tx .pv-acts{justify-content:flex-start; gap:4px; margin:16px 0 0; padding:4px 0}
.pv-film-tx .pv-acts > *{flex:none}
.pv-film-tx .pv-react .pv-act,.pv-film-tx .pv-act{width:auto; padding:0 12px}
@container (min-width:720px){ .pv-film{grid-template-columns:auto minmax(0, 1fr); gap:32px} .pv-film-frame{width:300px} }
.pv-hashnote{margin:8px 0 0; font-size:14px; color:var(--ink-2)}
.pv-hashline b,.pv-hashnote b{color:var(--wine); font-weight:500; margin-right:4px}
/* the four cards, as a set, on a paper table */
.pv-paperband{padding:24px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-post)}
@container (max-width:759px){ .pv-paperband{padding:12px} }
.pv-invcards{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px 12px}
@container (min-width:760px){ .pv-invcards{grid-template-columns:repeat(4, minmax(0, 1fr)); gap:24px} }
.pv-invcards.is-extra{grid-template-columns:repeat(2, minmax(0, 1fr))}
@container (min-width:760px){ .pv-invcards.is-extra{grid-template-columns:repeat(4, minmax(0, 1fr))} }
.pv-invcard{position:relative; display:flex; flex-direction:column; min-width:0; margin:0}
.pv-invcard-art{position:relative; display:block; overflow:hidden; border-radius:6px; background:var(--hover); box-shadow:var(--shadow-1)}
.pv-invcard img{width:100%; aspect-ratio:5/7.5; object-fit:cover; object-position:50% 0; transition:transform var(--dur-slow) ease}
.pv-invcard:hover img{transform:scale(1.012)}
.pv-invcard-tx{display:block; padding:12px 0px 0}
.pv-invcard-tx b{display:block; font-family:var(--title); font-weight:500; font-size:20px; line-height:1.2; color:var(--ink)}
.pv-invcard:hover .pv-invcard-tx b{color:var(--wine)}
.pv-invcard-tx .pv-dateline{margin-top:4px; font-size:12px}
.pv-invcard-tx em{display:flex; flex-wrap:wrap; align-items:center; gap:0 4px; margin-top:4px; font-size:13px; font-style:normal; color:var(--ink-2)}
.pv-invcard-tx em i{font-style:normal}
.pv-invcard[data-event] .pv-invcard-art::after{content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--hover)}
.pv-phonebox{display:grid; place-items:center; aspect-ratio:5/7.5; padding:12px; background:var(--hover)}
.pv-phonebox .live{height:100%; width:auto; border-radius:12px; box-shadow:var(--shadow-1)}
.pv-over{position:absolute; inset:0; z-index:2}
.live{position:relative; display:block; overflow:hidden; background:var(--ink) top center / cover no-repeat; background-image:var(--still, none)}
.live iframe{position:absolute; left:0; top:0; border:0; display:block; background:transparent;
  width:calc(var(--lw) * 1px); height:calc(var(--lh) * 1px); transform-origin:0 0; transform:scale(var(--k, .3))}
.live:not(.touch) iframe{pointer-events:none}
.live.phone{aspect-ratio:390/844}
.live.desk{aspect-ratio:16/10; width:100%}
.live.fluid{width:100%; height:min(76vh, 760px)}
.live.fluid iframe{width:100%; height:100%; transform:none}
@media (max-width:640px){ .live.fluid{background-image:var(--still-phone, var(--still, none))} }
@media (hover:none){ .live.touch iframe{pointer-events:none} }
.pv-piece{display:grid; gap:24px}
.pv-piece-art{justify-self:center; width:min(100%, 520px)}
.pv-piece-art > img{width:100%; border-radius:6px; background:var(--hover); box-shadow:var(--shadow-1)}
.pv-piece-art > img.is-phone{max-width:380px; margin:0 auto; border-radius:12px}
.pv-piece-art > video{width:100%; max-height:76vh; border-radius:var(--r-media); background:var(--ink)}
.pv-piece-art .live.fluid{border-radius:var(--r-media)}
.pv-piece-tx{min-width:0}
.pv-piece-tx p{font-size:16px; line-height:1.55; color:var(--ink-2)}
.pv-piece.is-wide .pv-piece-art{width:100%}
@container (min-width:860px){ .pv-piece:not(.is-wide){grid-template-columns:minmax(0, 1fr) 320px; align-items:start} .pv-piece:not(.is-wide) .pv-piece-art{justify-self:stretch; width:auto} }

/* ---- planning -------------------------------------------------------------------------------- */
.pv-whopick{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:var(--ink-2); white-space:nowrap}
.pv-whopick select{width:auto; min-height:34px; padding-top:4px; padding-bottom:4px; font-size:14px}
.pv-tasks{margin:0}
.pv-task{display:flex; align-items:flex-start; gap:12px; padding:12px 16px}
.pv-tasks > .pv-task + .pv-task{border-top:1px solid var(--line)}
.pv-sect .pv-tasks .pv-task,.pv-card.pv-panel .pv-tasks .pv-task{padding:12px 0}
.pv-tickform{display:inline-flex; flex:none}
/* the round tick of something to do (its own class: form choices are .pv-choice) */
.pv-taskbox{display:grid; place-items:center; flex:none; width:24px; height:24px; margin-top:0px; padding:0; border:1.5px solid var(--line); border-radius:50%;
  background:var(--surface); color:transparent; cursor:pointer}
button.pv-taskbox:hover{border-color:var(--wine); color:var(--line)}
.pv-taskbox.is-on{border-color:var(--wine); background:var(--wine); color:var(--on-wine)}
.pv-taskbox.is-still{cursor:default; border-style:solid}
.pv-taskbox.is-q{color:var(--ink-2); border-style:solid}
/* (homeroom, item 11) a question's round mark that opens it to be answered: pressable, so a solid ring, as a tick's */
a.pv-taskbox.is-q{border-style:solid; color:var(--line)}
a.pv-taskbox.is-q:hover{border-color:var(--wine)}
/* (homeroom, item 12) an icon drawn once and used by name (server.js iconsOnce) takes the house's usual stroke from here, as weightless
   as the attributes it had: any other rule about an icon still wins */
:where(svg.pvi){fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round}   /* (finesse: rules, item 2: the stroke is the icon's own attribute, 36 / its size) */
/* (homeroom, item 13) a heart on a reply: one word under the bubble, as "Love" is under a post, and how many beside it;
   the reply a link opened is marked, so the eye finds it in its conversation */
.pv-c-react{display:inline-flex; margin:0}
.pv-c-love{border:0; background:none; padding:0px 0px; font:inherit; font-weight:500; color:var(--ink-2); cursor:pointer}
.pv-c-love:hover, .pv-c-react.is-on .pv-c-love{color:var(--wine)}
.pv-c-rx{display:inline-flex; align-items:center; gap:0px; margin-left:0px}
.pv-c-rx i{font-style:normal}
.pv-c:target .pv-bub{box-shadow:0 0 0 2px var(--line)}
/* (homeroom, item 18) the planner's desk: the family's work, a heading for each person and how many */
.pvx-atwork + .pvx-atwork{margin-top:12px; padding-top:12px; border-top:1px solid var(--line)}
.pvx-atwork h3{margin:0 0 4px; font-size:16px; font-weight:600}
.pvx-atwork h3 em{margin-left:4px; font-style:normal; font-weight:400; color:var(--ink-2)}
.pv-task-tx{flex:1; min-width:0}
.pv-task-t{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:16px; font-weight:500; line-height:1.4; color:var(--ink); overflow-wrap:anywhere}
.pv-task-t:hover{color:var(--wine)}
.pv-task.is-done .pv-task-t{color:var(--ink-2); text-decoration:line-through}
.pv-task-meta{display:flex; flex-wrap:wrap; align-items:center; gap:0px 4px; margin-top:4px; font-size:13px; color:var(--ink-2)}
.pv-tagchip{display:inline-flex; align-items:center; min-height:20px; padding:0 8px; border-radius:6px; background:var(--hover); font-size:12px; font-weight:500; color:var(--ink-2)}
.pv-tagchip:hover{color:var(--wine)}
/* the timeline: each thread of work towards the wedding; months labelled only where there is room */
[data-tone="rose"]{} [data-tone="peach"]{} [data-tone="marigold"]{} [data-tone="leaf"]{}
[data-tone="teal"]{} [data-tone="slate"]{} [data-tone="plum"]{} [data-tone="red"]{}
[data-tone="wine"]{} [data-tone="gold"]{} [data-tone="sky"]{} [data-tone="terracotta"]{}
/* a thing to do, on its own page */
.pv-task-head{margin:0 0 24px}
.pv-task-head h1{font-size:24px; font-weight:600; line-height:1.3; letter-spacing:-.018em; color:var(--ink); overflow-wrap:anywhere}
.pv-task-head .pv-task-more{margin-top:8px; font-size:16px; line-height:1.55; color:var(--ink-2)}
.pvx-planroom .pv-task-head .pv-task-more{font-size:var(--hb, 15px)}   /* (planroom, item 29: Room 1's leftover, 15.5 was off the type scale) */
/* (planroom, item 22) the Plan's countdown, a card of the List's own kind (its band names it): four steps side by side, each its
   day, how much of what was due by then is done, and a thin bar; the next one named "Next" and in wine, one passed with things
   still open in the late red. (The design audit: no boxes inside the card, every space on the house's steps.) On a phone it is
   one line, the step that matters now, which opens to all four. */
.pvr-plan .pvp-count .pvp-steps{list-style:none; margin:0; padding:12px 16px 16px; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0}
.pvr-plan .pvp-step{display:grid; gap:4px; align-content:start; padding:0 16px; border-left:1px solid var(--line)}
.pvr-plan .pvp-steps > .pvp-step:first-child{padding-left:0; border-left:0}
.pvr-plan .pvp-step-l{display:flex; flex-direction:column; gap:0px}
.pvr-plan .pvp-step-l b{font-size:var(--hd, 13.5px); font-weight:500}
.pvr-plan .pvp-step-l span{font-size:13px; color:var(--ink-2)}
.pvr-plan .pvp-step-tag{font-style:normal; font-weight:500; color:var(--wine)}
.pvr-plan .pvp-step.is-next .pvp-step-l b{color:var(--wine)}
.pvr-plan .pvp-step-n{display:flex; flex-wrap:wrap; align-items:center; gap:4px; font-size:var(--hd, 13.5px); color:var(--ink-2); font-variant-numeric:tabular-nums}
.pvr-plan .pvp-step-n a{color:var(--danger); font-weight:500}
.pvr-plan .pvp-step-bar{display:block; height:4px; border-radius:6px; background:var(--hover); overflow:hidden}
.pvr-plan .pvp-step-bar i{display:block; height:100%; border-radius:inherit; background:var(--yes)}
.pvr-plan .pvp-step.is-late .pvp-step-bar i{background:var(--danger)}
.pvr-plan .pvp-step.is-done .pvp-step-n{color:var(--yes)}
.pvr-plan .pvp-step.is-none .pvp-step-n{color:var(--ink-2)}
.pvr-plan .pvp-count-m{display:none}
@media (max-width:1023px){
  .pvr-plan .pvp-count > .pvp-steps{display:none}
  .pvr-plan .pvp-count-m{display:block}
  .pvr-plan .pvp-count > .pvp-group-h span{display:none}   /* (the days to go are in the page's own band on a phone) */
  .pvr-plan .pvp-count-m > summary{display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; padding:8px 16px 12px; list-style:none; cursor:pointer; font-size:var(--hd, 14px); color:var(--ink-2)}
  .pvr-plan .pvp-count-m > summary::-webkit-details-marker{display:none}
  .pvr-plan .pvp-count-m > summary b{color:var(--ink); font-weight:500}
  .pvr-plan .pvp-count-m > summary svg{flex:none; color:var(--ink-2); transition:transform var(--dur-fast)}
  .pvr-plan .pvp-count-m[open] > summary svg{transform:rotate(180deg)}
  .pvr-plan .pvp-count .pvp-steps-m{list-style:none; margin:0; padding:0 16px 12px; display:grid; grid-template-columns:minmax(0, 1fr); gap:12px}   /* (one under another: the laptop's four across won here) */
  .pvr-plan .pvp-count .pvp-steps-m > .pvp-step{padding:12px 0 0; border-left:0; border-top:1px solid var(--line)}
  /* the three filters in one row (the third, Grouped by, put the list a row further down) */
}
@media (prefers-reduced-motion:reduce){ .pvr-plan .pvp-count-m > summary svg{transition:none} }
/* (planroom, item 28) under an answer from Ask the house, its two ways on: keep it as a note, or make it a task */
.pv-answerbox .pvx-keep{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line)}
.pv-answerbox .pvx-keep-f{display:contents}
/* (planroom, item 27) a task two people's: their two faces, the second a little over the first (the design audit: ringed in the
   card's own white; the ivory ring could not be seen, 1.08:1) */
.pvr-plan .pvp-who.is-two .avatar + .avatar{margin-left:-4px; box-shadow:0 0 0 2px var(--surface)}
/* (planroom, item 25) what a blocked task waits on, beside its chip, in the late red */
.pvr-plan .pvp-waits{color:var(--danger)}
.pv-task-head .pv-eyebrow{display:flex; align-items:center; gap:8px}
.pv-status .pv-actions{margin-top:16px}
.pv-answerform{margin-top:16px; padding-top:16px; border-top:1px solid var(--line)}
.pv-convo-h{margin:24px 0 12px; font-size:16px; font-weight:600}

/* ---- messages -------------------------------------------------------------------------------- */
.pv-msgs{display:grid; gap:0; margin:0; overflow:hidden}
.pv-msglist{padding:8px 0 8px; margin:0; overflow:hidden}
.pv-msglist-h{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px 4px 16px}
.pv-msglist-h h1{font-size:24px; font-weight:600; letter-spacing:-.02em}
.pv-msglist-sub{margin:12px 16px 4px; font-size:13px; font-weight:600; color:var(--ink-2)}
.pv-msglist ul{padding:0 8px}
.pv-convo{display:flex; align-items:center; gap:12px; padding:8px 8px; border-radius:6px}
@media (hover:hover){ .pv-convo:hover{background:var(--hover)} }
.pv-convo[aria-current="page"]{background:var(--wine-tint)}
.pv-convo .avatar{width:44px; height:44px}
.pv-convo-tx{flex:1; min-width:0}
.pv-convo-top{display:flex; justify-content:space-between; gap:8px}
.pv-convo-top b{font-size:16px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pv-convo-top em{font-size:12px; font-style:normal; color:var(--ink-2); white-space:nowrap}
.pv-convo-last{display:block; font-size:14px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pv-convo-last.is-unread{font-weight:500; color:var(--ink)}
.pv-thread{display:flex; flex-direction:column; min-height:540px; margin:0; overflow:hidden}
.pv-thread-h{display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--line)}
.pv-thread-back{display:none}
.pv-thread-who{flex:1; min-width:0}
.pv-thread-who b{display:block; font-size:16px; font-weight:500}
.pv-thread-who b a:hover{text-decoration:underline}
.pv-thread-who em{display:flex; flex-wrap:wrap; align-items:center; gap:0 4px; font-size:13px; font-style:normal; color:var(--ink-2)}
.pv-faces{display:inline-flex; align-items:center}
.pv-faces .avatar{margin-right:-4px; box-shadow:0 0 0 2px var(--surface)}
.pv-faces em{margin-left:8px; font-style:normal; font-size:13px; color:var(--ink-2)}
.pv-pinstrip{display:flex; flex-direction:column; gap:0px; padding:4px 12px; border-bottom:1px solid var(--line); background:var(--surface)}
.pv-pinstrip a{display:flex; align-items:center; gap:4px; min-width:0; font-size:13px; color:var(--ink-2)}
.pv-pinstrip svg{flex:none; color:var(--gold)}
.pv-pinstrip b{flex:none}
.pv-pinstrip span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pv-teamhead{padding:8px 12px; border-bottom:1px solid var(--line); background:var(--surface); font-size:14px}
.pv-teampin{margin:4px 0; white-space:pre-line; color:var(--ink-2)}
.pv-bubbles{display:flex; flex-direction:column; gap:4px; flex:1; padding:12px 16px; overflow-y:auto; background:var(--surface)}
.pv-bubbles-static{max-height:420px; padding:0 0 8px; background:none}
.pv-daysep{margin:12px 0 4px; font-size:12px; font-weight:500; text-align:center; color:var(--ink-2)}
.pv-msg{position:relative; display:flex; align-items:flex-end; gap:4px; max-width:80%}
.pv-msg.is-mine{flex-direction:row-reverse; align-self:flex-end}
.pv-msg-av .avatar{width:28px; height:28px}
.pv-msg-b{min-width:0; padding:8px 12px 4px; border-radius:12px; background:var(--hover)}
.pv-msg.is-mine .pv-msg-b{background:var(--wine); color:var(--on-wine)}
.pv-msg.is-pinned .pv-msg-b{box-shadow:0 0 0 2px var(--line)}
.pv-msg-from{display:block; margin-bottom:0px; font-size:13px; font-weight:500; color:var(--ink-2)}
.pv-msg.is-mine .pv-msg-from{color:var(--on-wine)}
.pv-msg-quote{display:block; margin:0px 0 4px; padding:4px 8px; border-left:3px solid var(--line); border-radius:6px; background:var(--hover); font-size:13px}
.pv-msg.is-mine .pv-msg-quote{border-left-color:var(--line); background:var(--hover)}
.pv-msg-quote b{display:block; font-size:12px}
.pv-msg-quote span{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pv-msg-pic img{max-width:260px; max-height:260px; margin:0px 0 4px; border-radius:12px; object-fit:cover}
.pv-msg-tx{font-size:16px; line-height:1.45; overflow-wrap:anywhere}
.pv-msg.is-mine .pv-msg-tx a{color:var(--on-wine); text-decoration:underline}
.pv-msg-link{display:flex; align-items:center; gap:4px; margin:4px 0 0px; padding:4px 8px; border-radius:12px; background:var(--hover); font-size:13px}
.pv-msg.is-mine .pv-msg-link{background:var(--hover)}
.pv-msg-link i{font-style:normal; font-weight:500}
.pv-msg-link em{margin-left:auto; font-style:normal; opacity:.8}
.pv-msg-time{display:block; margin-top:0px; font-size:12px; text-align:right; color:var(--ink-2)}
.pv-msg.is-mine .pv-msg-time{color:var(--on-wine)}
.pv-msg .pv-menu{align-self:center; opacity:0; transition:opacity var(--dur-fast)}
.pv-msg:hover .pv-menu,.pv-msg:focus-within .pv-menu,.pv-msg .pv-menu[open]{opacity:1}
@media (hover:none){ .pv-msg .pv-menu{opacity:1} }

.pv-msg .pv-made{padding:4px 0 0}
.pv-thread-empty{margin:auto; max-width:40ch; font-size:14px; text-align:center; color:var(--ink-2)}
.pv-msgbox{padding:8px 12px; border-top:1px solid var(--line); display:grid; gap:4px; background:var(--surface)}
.pv-msgbox-row{display:flex; align-items:center; gap:4px}
.pv .pv-msgbox-row input[type=text]{flex:1; min-width:0; min-height:44px; padding:0 12px; border:1px solid transparent; border-radius:var(--r-ctl); background:var(--hover)}
.pv .pv-msgbox-row input[type=text]:focus{background:var(--surface); border-color:var(--line)}
.pv-attached{display:flex; align-items:center; gap:8px; padding:4px; border-radius:12px; background:var(--hover); font-size:14px}
.pv-attached img{width:48px; height:48px; border-radius:6px; object-fit:cover}
.pv-attached span{flex:1; min-width:0}
.pv-replying{display:flex; align-items:center; gap:4px; padding:4px 4px 4px 12px; border-left:3px solid var(--wine); border-radius:6px; background:var(--wine-tint); font-size:13px}
.pv-replying-tx{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pv-linkpick > summary{display:inline-flex; align-items:center; gap:4px; min-height:30px; padding:0 4px; list-style:none; font-size:13px; font-weight:500; color:var(--ink-2); cursor:pointer}
.pv-linkpick > summary::-webkit-details-marker{display:none}
.pv-linkpick > summary:hover{color:var(--wine)}
.pv-linkpick[open] > summary{color:var(--wine)}
.pv-linkpick select{min-height:36px; margin-top:4px; padding-top:4px; padding-bottom:4px; font-size:14px; color:var(--ink-2)}
.pv-thread-none{display:grid; place-content:center; padding:24px}
.pv-thread-none .pv-empty{border:0; text-align:center}
.pv-thread-none .pv-empty-t{margin-inline:auto}
@container (min-width:860px){
  .pv-msgs{grid-template-columns:320px minmax(0, 1fr); align-items:stretch; height:calc(100vh - 112px); min-height:520px}
  .pv-msglist{height:100%; overflow-y:auto; border-right:1px solid var(--line)}
  .pv-thread{height:100%; min-height:0}
}
@container (min-width:1080px){ .pv-msgs{grid-template-columns:340px minmax(0, 1fr)} }
@container (max-width:859px){
  .pv-msgs.has-thread .pv-msglist{display:none}
  .pv-msgs:not(.has-thread) .pv-thread{display:none}
  .pv-thread-back{display:inline-grid}
  .pv-thread{min-height:calc(100vh - 200px)}
}

/* ---- notifications, search ------------------------------------------------------------------ */
.pv-notice.is-new .pv-row-t{font-weight:500}
.pv-newdot{flex:none; width:9px; height:9px; border-radius:50%; background:var(--wine)}
.pv-search{display:flex; align-items:center; gap:8px; margin:0 0 12px; padding:4px 4px 4px 12px; border:1px solid var(--line); border-radius:var(--r-post); background:var(--surface)}
.pv-search:focus-within{border-color:var(--wine);}
.pv-search-ic{display:grid; color:var(--ink-2)}
.pv .pv-search input{flex:1; min-width:0; min-height:42px; border:0; padding:0; background:none; box-shadow:none}
.pv-search-sm{margin:0; flex:1 1 280px; max-width:420px; padding:0px 4px 0px 12px}
.pv .pv-search-sm input{min-height:38px; font-size:16px}
.pv-needs .pv-row-t{font-weight:500}
.pv-results{max-width:820px}
.pv-results .pv-row-m{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

/* ---- family, people ------------------------------------------------------------------------ */
/* each person a face */
.pv-profile{display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:16px 24px; margin-bottom:24px}
.pv-profile-tx h1{font-family:var(--title); font-weight:500; font-size:32px; letter-spacing:-.01em; line-height:1.1}
.pv-profile-tx .pv-quiet{margin-top:4px}
.pv-profile-acts{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px}
.pv-profile-stats{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:4px 16px; font-size:14px; color:var(--ink-2)}
.pv-profile-stats b{font-weight:600; color:var(--ink-2); font-variant-numeric:tabular-nums}
@container (min-width:760px){ .pv-profile{grid-template-columns:auto minmax(0, 1fr) auto} .pv-profile-acts{grid-column:auto; justify-content:flex-end} }
.pv-linkbox{padding:12px 0; border-top:1px solid var(--line)}
.pv-linkbox:first-of-type{margin-top:8px}
/* vendors: one directory, grouped by what they do */
.pv-vhead,.pv-vrow{display:grid; grid-template-columns:minmax(0, 1.5fr) 118px minmax(0, 1fr) 80px; align-items:center; gap:8px 16px; padding:8px 16px}
.pv-vhead{padding-top:12px; padding-bottom:8px; border-bottom:1px solid var(--line); font-size:13px; font-weight:500; color:var(--ink-2)}
.pv-vlist > li + li .pv-vrow{border-top:1px solid var(--line)}
.pv-vrow-st{display:flex}
@media (hover:hover){ .pv-vrow:hover{background:var(--hover)} }
.pv-vrow-main{min-width:0}
.pv-vrow-main b{display:block; font-size:16px; font-weight:500; line-height:1.35}
@media (hover:hover){ .pv-vrow-main a:hover b{color:var(--wine)} }
.pv-vrow-main em{display:flex; flex-wrap:wrap; align-items:center; gap:0px 4px; margin-top:0px; font-size:13px; font-style:normal; color:var(--ink-2)}
.pv-vrow-who{min-width:0; font-size:14px; color:var(--ink-2)}
.pv-vrow-who span{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pv-vrow-acts{display:flex; align-items:center; gap:0px}
@container (max-width:720px){ .pv-vhead{display:none} .pv-vrow{grid-template-columns:minmax(0, 1fr) auto} .pv-vrow-st{grid-column:2; grid-row:1} .pv-vrow-who{grid-column:1; grid-row:2} .pv-vrow-acts{grid-column:2; grid-row:2} }
.pv-keys .pv-keyrow{align-items:flex-start; padding-top:4px; padding-bottom:4px}
.pv-keys .pv-row-main{align-items:flex-start}
.pv-keys .pv-row-r{padding-top:8px}
.pv-keys .pv-linkline{margin:4px 0 0px}
.pv-tablewrap{position:relative; overflow-x:auto}
.pv-table{width:100%; border-collapse:collapse; font-size:14px}
.pv-table th,.pv-table td{padding:8px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.pv-table thead th{font-size:13px; font-weight:500; color:var(--ink-2); white-space:nowrap; background:var(--surface)}
.pv-table tbody th{font-weight:500}
.pv-table th em,.pv-table td em{display:block; font-style:normal; font-weight:400; font-size:13px; color:var(--ink-2)}
.pv-num td{text-align:right; font-variant-numeric:tabular-nums}
.pv-num thead th:not(:first-child){text-align:right}
.pv-matrix th span{display:inline-block; font-size:12px}
.pv-matrix td{text-align:center}
.pv-matrix input{width:20px; height:20px; accent-color:var(--wine)}
.pv-matrix tbody th{position:sticky; left:0; z-index:1; min-width:170px; background:var(--surface); box-shadow:1px 0 0 var(--line)}
.pv-matrix thead th:first-child{position:sticky; left:0; z-index:2; background:var(--surface)}
.pv-scrollcue{display:none; align-items:center; gap:4px; margin:0 0 8px; font-size:13px; color:var(--ink-2)}
.is-scrolls .pv-scrollcue{display:flex}

/* ---- guests --------------------------------------------------------------------------------- */
.pv-findbar{display:grid; gap:8px; margin:0 0 12px}
.pv-findbar .pv-search{margin:0}
.pv-findbar .pv-chips{margin:0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:0px}
.pv-findbar .pv-chips::-webkit-scrollbar{display:none}
@container (min-width:900px){ .pv-findbar{grid-template-columns:minmax(260px, 340px) minmax(0, 1fr); align-items:center} .pv-findbar .pv-chips{flex-wrap:wrap} }
.pv-hh{display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:4px 12px; padding:12px 16px}
@media (hover:hover){ .pv-hh:hover{background:var(--hover)} }
@media (hover:hover){ .pv-hh:hover .pv-hh-name{color:var(--wine)} }
.pv-hh-name{font-size:16px; font-weight:500; line-height:1.35; color:var(--ink); overflow-wrap:anywhere}
.pv-hh-meta{grid-column:1; font-size:13px; line-height:1.4; color:var(--ink-2)}
.pv-hh-state{grid-column:2; grid-row:1 / span 2; display:flex; align-items:center; gap:8px}
.pv-hhs > li + li .pv-hh{border-top:1px solid var(--line)}
@container (min-width:900px){
  .pv-hhs-head,.pv-hh{grid-template-columns:minmax(0, 2.2fr) minmax(0, 1.6fr) 90px 70px 150px}
  .pv-hh-meta{grid-column:auto; font-size:14px}
  .pv-hh-inv,.pv-hh-exp{font-size:14px; color:var(--ink-2)}
  .pv-hh-exp{text-align:right; font-variant-numeric:tabular-nums}
  .pv-hh-state{grid-column:auto; grid-row:auto; justify-content:flex-end}
  .pv-hhs-head{display:grid; gap:12px; padding:8px 16px 8px; border-bottom:1px solid var(--line); font-size:13px; font-weight:500; color:var(--ink-2)}
  .pv-hhs-head span:nth-child(4){text-align:right} .pv-hhs-head span:nth-child(5){text-align:right}
}
@container (max-width:899px){ .pv-hhs-head,.pv-hh-inv,.pv-hh-exp{display:none} }
@container (min-width:900px){ .pv-hh-m2{display:none} }
.pv-hh-m2 .pv-dot{margin:0 .32em}
.pv-finals{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px}
.pv-fin{display:grid; gap:4px; font-size:14px}
.pv-daycounts{display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:8px}
.pv-dc{display:grid; gap:4px; font-size:14px}
.pv-dc.is-not{opacity:.5}
.pv-whogrid td{text-align:center}
.pv-whogrid input{width:20px; height:20px; accent-color:var(--wine)}
.pv-bynames{display:grid; gap:0px; margin-top:4px; font-size:14px; color:var(--ink-2)}
.pv-daygrid{display:grid; gap:0 24px}
@container (min-width:760px){ .pv-daygrid{grid-template-columns:1fr 1fr} }
.pv-numcell{font-variant-numeric:tabular-nums}
/* a phone number stays together; its buttons sit under it on a narrow column */
.pv-phone{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; padding:8px 0}
.pv-phone + .pv-phone{border-top:1px solid var(--line)}
.pv-phone b{flex:1 1 auto; min-width:0; font-size:16px; font-weight:500; white-space:nowrap; font-variant-numeric:tabular-nums}
.pv-phone .pv-actions{flex:none}

/* ---- money --------------------------------------------------------------------------------- */
.pv-ledger{display:grid; gap:12px; margin-bottom:24px}
.pv-ledger-main{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 16px}
.pv-ledger-main .pv-bigsum{font-size:32px; color:var(--ink)}
.pv-ledger-main p{font-size:16px; color:var(--ink-2)}
.pv-ledger-sub{display:flex; flex-wrap:wrap; gap:4px 24px; font-size:14px; color:var(--ink-2)}
.pv-ledger-sub b{font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.pv-moneyline{display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:8px; margin:12px 0 4px; padding-top:12px; border-top:1px solid var(--line)}
.pv-moneyline dt{font-size:13px; color:var(--ink-2)}
.pv-moneyline dd{font-size:16px; font-weight:600; font-variant-numeric:tabular-nums}
.pv-amt{flex:none; margin-left:auto; padding-left:12px; font-size:16px; font-weight:500; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; color:var(--ink)}
.pv-amt.is-est{color:var(--ink-2); font-weight:500}
.pv-amt.is-est::after{content:' est.'; font-size:12px; font-weight:400}
.pv-moneygroup{padding:0px 0 4px}
.pv-moneygroup-h{display:flex; align-items:baseline; gap:8px; padding:12px 16px 4px; font-size:16px; font-weight:600}
.pv-moneygroup-h > span:first-child{flex:1}
.pv-lines .pv-row-main{padding:8px 0}
.pv-bigsum{font-size:32px; font-weight:600; letter-spacing:-.025em; line-height:1.1; font-variant-numeric:tabular-nums}

/* ---- the days ------------------------------------------------------------------------------ */
.pv-daycards{display:grid; gap:24px}
@container (min-width:760px){ .pv-daycards{grid-template-columns:1fr 1fr; gap:24px 24px} }
.pv-daycard{display:flex; flex-direction:column; min-width:0; margin:0; overflow:hidden}
.pv-daycard:hover{border-color:var(--line)}
.pv-daycard img{width:100%; aspect-ratio:2.2/1; object-fit:cover}
.pv-daycard-tx{display:flex; flex-direction:column; gap:4px; padding:16px 16px 16px}
.pv-daycard-when{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px}
.pv-daycard b{margin-top:4px; font-family:var(--title); font-weight:500; font-size:24px; letter-spacing:-.005em; line-height:1.15}
.pv-daycard:hover b{color:var(--wine)}
.pv-daycard em{font-size:14px; font-style:normal; color:var(--ink-2)}
.pv-daycard-line{display:flex; align-items:center; gap:4px; margin-top:0px; font-size:14px; color:var(--ink-2)}
.pv-daycard-line svg{flex:none; color:var(--ink-2)}
.pv-daycard-n{margin-top:8px; padding-top:8px; border-top:1px solid var(--line); font-size:14px; color:var(--ink-2)}
.pv-week{padding:4px 16px}
.pv-weekday{display:grid; grid-template-columns:110px minmax(0,1fr); gap:12px; padding:16px 0; border-top:1px solid var(--line)}
.pv-weekday:first-child{border-top:0}
.pv-weekday h3{font-size:14px; font-weight:600}
.pv-weekday ol,.pv-hours{display:grid; gap:8px}
.pv-weekday li,.pv-hours li{display:grid; grid-template-columns:76px minmax(0,1fr); gap:8px; align-items:baseline}   /* (the colours round's fixes: 76, the widest time, "12:45 pm", is 73.7 at 14/500; at 64 "10:45 am" took two lines) */
.pv-time{font-size:14px; font-weight:500; color:var(--ink-2); font-variant-numeric:tabular-nums}
.pv-weekday li b,.pv-hours li b{display:block; font-size:14px; font-weight:500; line-height:1.35}
.pv-weekday li em,.pv-hours li em{display:block; font-size:13px; font-style:normal; color:var(--ink-2)}
.pv-hours li:not(.is-mine) b{color:var(--ink-2)}
@media (max-width:519px){ .pv-weekday{grid-template-columns:1fr; gap:8px} }
/* the day's tint is the card's own, so it fills the whole side beside the painting, however short the words */
.pv-dayhero-tx{padding:16px 24px 24px}
.pv-dayhero-tx h1{margin:0 0 8px; font-family:var(--title); font-weight:500; font-size:32px; line-height:1.06; letter-spacing:-.012em}
@container (min-width:860px){ .pv-dayhero-tx{align-self:center; padding:24px 32px} }
.pv-daystrip{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:8px; margin-bottom:16px}
.pv-daymini{display:flex; align-items:center; gap:12px; margin:0; padding:8px; color:var(--ink)}
.pv-daymini img{flex:none; width:80px; height:54px; border-radius:var(--r-media); object-fit:cover}
.pv-daymini span{display:flex; flex-direction:column; min-width:0}
.pv-daymini b{font-family:var(--title); font-weight:500; font-size:16px}
.pv-daymini em{font-style:normal; font-size:13px; color:var(--ink-2)}
.pv-nownext{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; margin-bottom:16px}
.pv-nn{margin:0; padding:12px 16px}
.pv-nn > span{display:block; font-size:13px; font-weight:500; color:var(--ink-2)}
.pv-nn b{display:block; margin-top:0px; font-size:16px; line-height:1.35}
.pv-nn em{display:block; font-size:14px; font-style:normal; color:var(--ink-2)}
.pv-nn.is-now{border-color:var(--line); background:var(--wine-tint)}
.pv-nn.is-now > span{color:var(--wine)}
.pv-slots{display:grid}
.pv-slot{display:grid; grid-template-columns:76px minmax(0,1fr); gap:12px; padding:12px 0; border-top:1px solid var(--line)}
.pv-slot:first-child{border-top:0; padding-top:4px}
.pv-slot.is-now b{color:var(--wine)}
.pv-slot.is-done b{color:var(--ink-2); text-decoration:line-through}
.pv-slot-tx{display:grid; gap:4px; min-width:0}
.pv-slot-tx b{font-size:16px; font-weight:500}
.pv-slot-tx em{font-size:13px; font-style:normal; color:var(--ink-2)}
.pv-slot-tx em a{color:var(--wine)}
.pv-slot-state{display:flex; flex-wrap:wrap; align-items:center; gap:4px; font-size:14px}
.pv-slot-edit > summary{display:inline-flex; align-items:center; gap:4px; min-height:32px; margin-top:0px; list-style:none; font-size:14px; font-weight:500; color:var(--wine); cursor:pointer}
.pv-slot-edit > summary::-webkit-details-marker{display:none}
.pv-slot-edit[open] > summary svg{transform:rotate(180deg)}
.pv-stateform{display:flex; flex-wrap:wrap; align-items:center; gap:4px; margin-top:4px}
.pv-stateform input{flex:0 1 140px; min-height:34px !important; padding:4px 8px !important; font-size:14px !important}
.pv-meeting{padding:16px 16px}
.pv-meeting.is-off{opacity:.7}
.pv-meeting-h{display:flex; align-items:center; gap:12px}
.pv-datebox{display:grid; place-items:center; flex:none; width:48px; height:52px; border-radius:6px; background:var(--wine-tint); color:var(--wine); line-height:1}
.pv-datebox b{font-size:20px; font-weight:600; font-variant-numeric:tabular-nums}
.pv-datebox em{font-size:12px; font-style:normal; font-weight:600}
.pv-meeting-tx{display:flex; flex-direction:column; flex:1; min-width:0}
.pv-meeting-tx b{font-size:16px; font-weight:500}
.pv-meeting-tx em{font-size:13px; font-style:normal; color:var(--ink-2)}
.pv-meeting .pv-post-tx{padding:8px 0 0}
.pv-meeting-b{display:grid; gap:12px; margin-top:12px}
@container (min-width:760px){ .pv-meeting-b.has-map{grid-template-columns:minmax(0, 1fr) 280px} }
.pv-opts{display:grid; gap:4px}
.pv-optrow{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:8px 12px; border:1px solid var(--line); border-radius:6px}
.pv-optrow.is-chosen{border-color:var(--yes); background:var(--yes-tint)}
.pv-optrow.is-dim{opacity:.55}
.pv-optick{position:relative; display:grid; place-items:center; flex:none; cursor:pointer}
.pv-optick input{position:absolute; opacity:0}
.pv-optick i{display:grid; place-items:center; width:24px; height:24px; border:1.5px solid var(--line-2); border-radius:6px; color:transparent}
.pv-optick input:checked + i,.pv-optick.is-on i{border-color:var(--wine); background:var(--wine); color:var(--on-wine)}
.pv-optick input:focus-visible + i{ outline-offset:2px}
.pv-optick.is-still{cursor:default}
.pv-opt-when{display:flex; flex-direction:column; flex:1 1 200px; min-width:0}
.pv-opt-when b{font-size:14px; font-weight:500}
.pv-opt-when em{font-size:13px; font-style:normal; color:var(--ink-2)}
.pv-opt-who{display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px; font-size:13px; color:var(--ink-2)}
.pv-opt-who em{font-style:normal; margin-left:4px}
.pv-xpick{padding:0px 4px; border-radius:6px; background:var(--hover)}
.pv-mplace{display:grid; gap:8px; align-content:start}
.pv-mplace iframe{width:100%; height:180px; border:0; border-radius:6px}
.pv-meeting-f{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px}
.pv-meetchips{display:flex; flex-wrap:wrap; gap:4px; margin-top:8px}
.pv-meetchips .chip{display:inline-flex; align-items:center; gap:4px; padding:4px 4px 4px 12px; border-radius:var(--r-ctl); background:var(--wine-tint); color:var(--wine); font-size:14px}
.pv-meetchips .chip em{font-style:normal; color:var(--ink-2); font-size:13px}
.pv-meetchips .chip button{display:grid; place-items:center; width:24px; height:24px; border:0; border-radius:50%; background:none; color:inherit; cursor:pointer}
.pv-feature{display:grid; gap:12px; max-width:640px; margin-bottom:24px}
.pv-k-narrow .pv-feature{max-width:none}
.pv-feature p{font-size:16px; line-height:1.55; color:var(--ink-2)}
ol.pv-acts{display:block; margin:0; padding:0; border:0}
ol.pv-acts li a{display:flex; align-items:center; gap:12px; padding:12px 0}
ol.pv-acts li a:hover .pv-row-t{color:var(--wine)}
ol.pv-acts li + li{border-top:1px solid var(--line)}
.pv-actnum{display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:50%; background:var(--hover); font-size:13px; font-weight:600; color:var(--ink-2); font-variant-numeric:tabular-nums}
.pv-rehearsal .pv-row-main{align-items:flex-start}
.pv-clips{display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:8px}
.pv-clip{display:block}
.pv-clip img,.pv-clip video{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-media); background:var(--hover)}
.pv-clip span{display:block; margin-top:4px; font-size:13px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pv-cuesheet td:nth-child(2),.pv-cuesheet td:nth-child(4){white-space:nowrap; font-variant-numeric:tabular-nums}
.pv-map{margin-bottom:18px; overflow:hidden}
.pv-map svg{display:block; width:100%; height:auto; max-height:600px}
.pv-ocean{fill:var(--map-sea)}
.pv-grat{fill:none; stroke:var(--on-wine); stroke-width:.5}
.pv-land{fill:var(--map-land); stroke:var(--map-coast); stroke-width:.5}
.pv-lake{fill:var(--map-sea); stroke:var(--map-coast); stroke-width:.3}
.pv-border{fill:none; stroke:var(--map-border); stroke-width:.35}
.pv-night{fill:var(--map-night); opacity:.22}
.pv-sunglow{fill:var(--map-glow); opacity:.55}
.pv-sundot{fill:var(--map-sun)}
.pv-arc{fill:none; stroke:var(--wine); stroke-width:1.2; stroke-dasharray:4 3; opacity:.8}
.pv-arclab{font:600 9px var(--ui); fill:var(--wine); text-anchor:middle; paint-order:stroke; stroke:var(--map-halo); stroke-width:2.5px}
.pv-venue circle{fill:var(--gold); stroke:var(--map-halo); stroke-width:1.5}
.pv-venue text{font:500 9px var(--ui); fill:var(--ink); text-anchor:middle; paint-order:stroke; stroke:var(--map-halo); stroke-width:2.5px}
.pv-ring{fill:var(--map-halo); stroke:var(--line); stroke-width:.8}
.pv-ini-bg{fill:var(--map-ini)}
.pv-ini{font:600 9px var(--ui); fill:var(--ink-2); text-anchor:middle}
.pv-maplbl{font:500 9.5px var(--ui); fill:var(--ink); text-anchor:middle; paint-order:stroke; stroke:var(--map-halo); stroke-width:3px}
.pv-talk .pv-talk-now{margin-bottom:10px; font-size:15px}
.pv-talk ul{display:grid; gap:6px; margin:0 0 12px}
.pv-talk li{font-size:14px; color:var(--ink-2)}
.pv-talk li.is-next b{color:var(--wine)}
.pv-strip-grid{display:grid; gap:3px; margin-top:6px; overflow-x:auto}
.pv-srow{display:grid; grid-template-columns:120px repeat(48, minmax(8px, 1fr)); gap:1px; align-items:center; min-width:560px}
.pv-srow .lab{font-size:12px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pv-srow .lab em{display:block; font-style:normal; color:var(--ink-2); font-size:11px}
.pv-srow .h{height:18px; background:var(--hours); border-radius:2px}
.pv-srow .h.sleep{background:var(--hours-sleep)}
.pv-srow .h.good{background:var(--hours-good)}
.pv-srow .h.now{outline:2px solid var(--wine)}
.pv-srow.hours .h{height:auto; background:none; font-size:10px; color:var(--ink-2); white-space:nowrap}
.pv-key{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:8px; font-size:12px; color:var(--ink-2)}
.pv-key i{display:inline-block; width:10px; height:10px; margin-right:4px; border-radius:2px; background:var(--hours); vertical-align:-1px}
.pv-key i.g{background:var(--hours-good)} .pv-key i.s{background:var(--hours-sleep)}

/* ---- the word from the two of them, documents, talks, pages, after ------------------- */
.pv-us-faces{display:flex; flex:none}
.pv-us-faces img{width:56px; height:56px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 3px var(--canvas), 0 0 0 4px var(--line)}
.pv-us-faces img + img{margin-left:-12px}
.pv-update{padding:16px 0 12px}
.pv-update .pv-post-head{padding:0 12px 0 16px}
.pv-update-t{margin:12px 16px 0; font-family:var(--title); font-weight:500; font-size:24px; line-height:1.25; letter-spacing:-.005em}
.pv-update-b{padding:8px 16px 12px}
.pv-update-b.pv-prose p{font-family:var(--serif); font-size:20px; line-height:1.6}
.pv-ackline{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:8px 16px 0; padding-top:12px; border-top:1px solid var(--line)}
.pv-ackline > .pvx-ackwho{flex:1 1 100%; margin:0}   /* (homeroom, item 31: who has it, on its own line under the count and the reminder) */
.pv-stand{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.pv-stand dt{font-size:13px; color:var(--ink-2)}
.pv-stand dd{font-size:20px; font-weight:600; letter-spacing:-.015em; font-variant-numeric:tabular-nums}
/* (homeroom, item 30) each number with its noun, a way into its room */
ul.pv-stand{margin:0; padding:0; list-style:none}
ul.pv-stand a{display:flex; flex-direction:column; gap:0px; margin:-4px -8px; padding:4px 8px; border-radius:var(--r-ctl); color:var(--ink); text-decoration:none}
ul.pv-stand a:hover{background:var(--hover)}
ul.pv-stand b{font-size:20px; font-weight:600; letter-spacing:-.015em; font-variant-numeric:tabular-nums}
ul.pv-stand span{font-size:13px; line-height:1.35; color:var(--wine); font-weight:500; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px}   /* (said as a way in, as the house's small links are) */
.pv-folders{column-gap:24px}
.pv-folders > *{break-inside:avoid}
@container (min-width:880px){ .pv-folders{columns:2} }
.pv-prose h3{margin:24px 0 8px; font-size:16px; font-weight:600}
.pv-prose h3:first-child{margin-top:0}
.pv-prose p{margin:0 0 12px; font-size:16px; line-height:1.65; color:var(--ink)}
.pv-prose p:last-child{margin-bottom:0}
.pv-page-prose{max-width:680px}
.pv-page-prose.is-story p{font-family:var(--serif); font-size:20px; line-height:1.65}
.pv-page-prose.is-story h3{font-family:var(--title); font-weight:500; font-size:24px; margin-top:32px}
.pv-note-kept{padding:16px 24px}
.pv-note-kept .pv-panel-h{font-size:16px}
.pv-note-kept .pv-small{margin:0px 0 8px}
.pv-wishes{display:grid; gap:12px; margin-top:12px}
.pv-wish{padding:12px 16px; border:1px solid var(--line); border-radius:var(--r-post); background:var(--surface)}
.pv-wish-who{display:flex; align-items:center; gap:8px}
.pv-wish-who span{display:flex; flex-direction:column}
.pv-wish-who em{font-style:normal; font-size:13px; color:var(--ink-2)}
.pv-wish-t{margin:8px 0; font-family:var(--serif); font-size:20px; line-height:1.55}
.pv-wish img{max-width:260px; border-radius:var(--r-media); margin-bottom:8px}
.pv-wishbox{margin-bottom:8px}
/* the rooms, grouped by what they are for */
.pv-roomlist{display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:0 32px}
.pv-roomrow{display:flex; align-items:center; gap:12px; min-height:58px; padding:8px 0; border-bottom:1px solid var(--line); color:var(--ink)}
.pv-roomrow > span{display:flex; flex-direction:column; flex:1; min-width:0}
.pv-roomrow b{font-size:16px; font-weight:500; line-height:1.3}
.pv-roomrow:hover b{color:var(--wine)}
.pv-roomrow em{font-style:normal; margin-top:0px; font-size:14px; line-height:1.35; color:var(--ink-2)}
/* (homeroom, item 34) what waits on you in a room, said first, in the house's colour */
.pv-roomrow em.pvx-roomwait{color:var(--wine); font-weight:500}
/* (homeroom, D4) a room opened for you, on your home: its rows one under another */
.pv-card.pvx-opened .pv-roomlist{grid-template-columns:1fr}   /* (above the review trial's columns, preview-review.css) */
/* (homeroom, D6) a button in a letters' bar keeps its own words' colour (the bar's links are wine: preview-harmony.css) */
.pv-card.pv-confirm a.pv-btn-primary{color:var(--on-wine); flex:none; text-decoration:none}
.pvx-opened li:last-child > .pv-roomrow{border-bottom:0}
.pv-roomrow > svg{flex:none; color:var(--ink-3)}
.pv-roomrow:hover > svg{color:var(--wine)}
.pv-spark rect{fill:var(--wine)} .pv-spark rect.nil{fill:var(--line)}
.pv-source{display:flex; align-items:center; gap:8px; padding:12px 16px; font-size:14px; color:var(--ink-2)}
.pv-source > svg{flex:none; color:var(--ink-2)}
.pv-source span{flex:1; min-width:0}
.pv-source-quote{display:block; padding:12px 16px; background:var(--surface)}
.pv-source-quote p + p{margin-top:4px}
.pv-answerbox{padding:16px; border-color:var(--line)}
/* what Ask the house names, linked (views/rooms.js answerHtml) */
.pv-answerbox a.linky{color:var(--wine); font-weight:500}
.pv-answerbox a.linky:hover{text-decoration:underline; text-underline-offset:3px}
.pv-suggest{padding:12px 16px; border-color:var(--line); background:var(--surface)}
.pv-suggest .pv-small + .pv-small{margin-top:0px}
.pv-suggest-go{margin:12px 0 8px}
.pv-fchips{display:flex; flex-wrap:wrap; gap:4px; margin-top:8px}
.pv-fchips img{width:72px; height:72px; object-fit:cover; border-radius:var(--r-media)}
.pv-drow{margin-bottom:8px}
.pv-narrowfeed{max-width:680px}
/* (v187) a room's own assistant (views/preview/kit.js houseBar, aiBox; his word of 15 October: one sparkle, the head's; "a question
   mark… with a pop-up" for how it works): the head's button in the AI's gold, pressed while the bar is open; the bar keeps the
   AI's edge with no sparkle, its words 16 in as a field's (1 + 9 + 6), a "?" before its go; once asked, one card on the house's
   inset (--card-in), what was done or is proposed under a hairline (--line-tone) that runs to its edges, never a box inside it;
   12 between blocks inside a card */
.pv-btn[data-ai] svg{color:var(--gold)}
.pv-btn[data-ai][aria-current]{border-color:var(--line); background:var(--wine-tint)}
.pv-housebar:is(.is-room, .is-saathi) .pv-housebar-row{padding-left:8px}
.pv-askbar-help{color:var(--ink-2)}
.pv .pv-card.pv-aibox > :is(.pv-aidone, .pv-aiprop, .pv-airows){margin:12px calc(-1 * var(--card-in)) 0; padding:12px var(--card-in) 0; border-top:1px solid var(--line)}
.pv .pv-card.pv-aibox > .pv-airows{padding-top:0; list-style:none}
.pv-aibox .pv-aidone{display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px}
.pv-aibox .pv-aidone > svg{flex:none; color:var(--wine)}
.pv-aibox .pv-aidone p{flex:1; min-width:0; margin:0}
.pv-aibox .pv-airows li{display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; padding:12px 0}
.pv-aibox .pv-airows li > svg{flex:none; color:var(--ink-2)}
.pv-aibox .pv-airows li > span{flex:1; min-width:0}
.pv-aibox .pv-airows li + li{border-top:1px solid var(--line)}
.pv-aibox .pv-aiprop .pv-actions{margin-top:12px}
/* (v188) a link on the card (a WhatsApp message ready): a row as the ticks are, under the same hairline as theirs */
.pv-aibox .pv-aiprop .pv-airows > li{border-top:1px solid var(--line)}
/* and on a phone its button under its words, which keep the row's width (beside them, the words stood a word to a line) */
@media (max-width:1023px){ .pv-aibox .pv-airows li.pv-ailink{display:grid; grid-template-columns:22px 1fr; gap:8px 12px} .pv-aibox .pv-ailink > .pv-btn{grid-column:2; justify-self:start} }
.pv-aihelp p + p{margin-top:12px}
/* the proposals are rows, as the lines after the press (12 above and below); a tick takes a ring's 22 (16 + 3 + 3), so the words
   stand where they stood when the card is pressed; on a phone the "?" is pressed over 44 above and below, as every button is
   (the go's own edge reaches round it, so the "?"'s stays above and below: a press beside it never sends) */
.pv-aibox .pv-checks > .pv-choice{padding-block:12px}
.pv-aibox :is(.pv-aidone, .pv-airows li) > svg{margin-inline:3px}
@media (max-width:1023px){ .pv .pv-askbar-help::after{content:''; position:absolute; inset:-4px 0} }
.pv-thx .pv-row-r{max-width:none}
.pv-thx-edit > summary{display:inline-flex; align-items:center; gap:4px; min-height:32px; list-style:none; font-size:14px; font-weight:500; color:var(--wine); cursor:pointer}
.pv-thx-edit > summary::-webkit-details-marker{display:none}
.pv-thx-edit[open]{flex-basis:100%}
.pv-thx-edit .pv-inline{margin-top:4px}

/* ---- the toast, uploads ----------------------------------------------------------------- */
.pv-toast{position:fixed; z-index:50; left:50%; bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px); transform:translateX(-50%);
  width:max-content; max-width:min(92vw, 460px); padding:12px 16px; border-radius:var(--r-post); background:var(--ink); color:var(--on-wine); font-size:14px; line-height:1.4; box-shadow:var(--lift-key) /* (the apply pass, 26 Oct 2026) the sign-in page's own, frozen in tokens.css; the app's toast is --shadow-2 (preview-design.css 15) */}
@media (min-width:1024px){ .pv-toast{bottom:24px} }
.pv-upbar{display:flex; flex-direction:column; gap:4px; margin-top:8px; font-size:14px; color:var(--ink-2)}
.pv-upbar .track{display:block; height:6px; border-radius:6px; background:var(--hover); overflow:hidden}
.pv-upbar .track i{display:block; height:100%; width:0; background:var(--wine); transition:width var(--dur)}
.pv-upbar.failed{color:var(--danger)}

/* ---- the doors: the pages before the house (views/preview/doors.js, kit.js doorShell) ---------------
   Their names on paper, as on the home; one card beneath; the words of both on one line
   (the head's inset 20/30, the card's 19/29 and its 1px edge). */
.pv-doorwrap{position:relative; padding:30px 16px 64px}
.pv-door{max-width:600px; margin:0 auto; padding-top:18px; outline:none; container-type:inline-size}
.pv-doorhead{display:grid; gap:18px; margin:0 0 16px; padding:22px 20px 20px; border-radius:var(--r-dialog); background:var(--surface)}
.pv-doorhead-tx{min-width:0}
.pv-doorhead-mark{display:flex; align-items:center; min-height:30px; margin-bottom:12px}
.pv-doorfaces{display:flex}
.pv-doorfaces img{width:42px; height:42px; border:2px solid var(--surface); border-radius:50%; object-fit:cover; background:var(--door-sunk)}
.pv-doorfaces img + img{margin-left:-10px}
.pv-doorhead h1{margin:0}
.pv-doorhead .pv-names{display:block; font-family:var(--display); font-weight:500; font-size:34px; line-height:1.04; letter-spacing:-.012em}
.pv-doorhead .pv-dateline{margin-top:10px}
.pv-doorhead .pv-dateline + .pv-dateline{margin-top:2px}
.pv-doorhead-facts{display:flex; flex-wrap:wrap; align-items:flex-start; gap:14px 28px; padding-top:16px; border-top:1px solid var(--line)}
.pv-doorhead .pv-clock-part{display:none}
.pv-doorcard{display:grid; gap:12px; min-width:0; margin:0; padding:22px 19px 24px; overflow-wrap:anywhere}
.pv-doorform{gap:18px}
.pv-doorcard p{margin:0}
.pv-doorcard h2{margin:0; font-size:22px; font-weight:600; line-height:1.25; letter-spacing:-.02em; color:var(--ink)}
.pv-doorcard div > h2 + p{margin-top:6px}
.pv-doorlead{font-family:var(--serif); font-size:18px; line-height:1.55; color:var(--ink)}
.pv-doorfoot{display:grid; gap:10px; margin-top:4px}
.pv-doorlater{display:grid; gap:8px; margin-top:6px; padding-top:14px; border-top:1px solid var(--door-line-soft)}
.pv-doorcard .pv-linkline{margin:0}
/* (v217) Find your photographs (views/preview/doors.js): the guests' link's two doors, one above the other; the find page's two ways
   to a picture, the width of the card; the photographs found, square, three or four across on a phone, each opening whole */
.pv-doorpair{display:grid; gap:16px}
.pv-findpick{display:grid; gap:8px}
.pv-findcam{display:grid; gap:8px}   /* (v217) a laptop's or a tablet's camera, in the page */
.pv-findcam video{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; background:var(--line); transform:scaleX(-1)}
.pv-findcam .pv-actions{justify-content:center}
.pv-findpick .pv-file,.pv-findpick .pv-btn{width:100%; justify-content:center}
.pv-findpick .pv-file:focus-within .pv-btn{outline:2px solid var(--wine); outline-offset:2px}
.pv-houseadd{display:grid; gap:12px; padding-top:16px; border-top:1px solid var(--line)}   /* (v217) the album as a dropdown, then Add */
.pv-houseadd select{width:100%}
/* (v217) Settings → Guests: the wedding's link, its QR beside it from 640, above it on a phone */
.pvx-wedlink{display:grid; gap:16px}
.pvx-wedlink-qr{width:152px; padding:8px; border:1px solid var(--line); border-radius:12px; background:var(--surface)}
.pvx-wedlink-qr svg{display:block; width:100%; height:auto}
.pvx-wedlink-tx{display:grid; gap:8px; min-width:0}
.pvx-wedlink-tx .pv-linkline{margin:0}
@media (min-width:640px){ .pvx-wedlink{grid-template-columns:152px minmax(0,1fr); align-items:start} }
/* (v217 part 4) an album's settings: one card, three groups, one Save */
.pvx-albsets{display:grid; gap:0}
.pvx-albgroup{display:grid; gap:12px; padding:0 0 20px; margin:0 0 20px; border-bottom:1px solid var(--line)}
.pvx-albgroup-h{margin:0; font-size:16px; color:var(--ink)}   /* an h2: 600 by the house's own rule; 16, a heading in a card */
.pvx-albwho{display:grid; gap:12px}
@media (min-width:640px){ .pvx-albwho{grid-template-columns:repeat(2, minmax(0,1fr))} }   /* two a row, as The day and Kind: three cut their words at 1440 */
.pvx-albgroup .pv-choice + div, .pvx-albgroup #faces{display:grid; gap:8px}
.pvx-albprog{margin:0}
.pvx-sets .pv-choice{gap:10px}   /* (v217) Settings → Guests: a switch's words on the titles' edge, 32 in (the gate's rule i) */
.pv-houselink{display:grid; gap:8px; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--line)}
.pv-door:has(.pv-found), .pv-doorwrap.is-paper .pv-door:has(.pv-found){max-width:1180px}   /* (v217, layout A, his pick of 30 Oct 2026) the found page: one scroll, wide on a laptop */
.pv-doorcard.pv-found, .pv-doorwrap.is-paper .pv-door .pv-doorcard.pv-found{max-width:none; gap:14px; padding:18px 14px 22px; border:1px solid var(--line); border-radius:20px; background:color-mix(in srgb, var(--surface) 93%, transparent); text-align:left}
.pv-found-intro{text-align:center}
.pv-found-intro h2{margin:0}
.pv-found-intro .pv-found-notyou{display:none}
.pv-found-cover{display:grid; gap:4px}
.pv-found-cover img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:16px}
.pv-found-cover img + img{display:none}
.pv-found-act{display:grid; gap:10px; justify-items:center}
.pv-found-act .pv-btn{width:100%; max-width:420px}
.pv-found-notyou{font-size:14px; color:var(--ink-2); text-decoration:none}
.pv-found-chips{position:sticky; top:0; z-index:3; display:flex; align-items:center; gap:8px; overflow-x:auto; margin:0 -2px; padding:10px 2px; background:color-mix(in srgb, var(--surface) 97%, transparent); border-bottom:1px solid var(--line); scrollbar-width:none}
.pv-found-chip{flex:none; display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px; border:1px solid var(--line-2); border-radius:18px; color:var(--ink); background:var(--surface); font-size:14px; white-space:nowrap; text-decoration:none}
.pv-found-chip b{font-weight:500; color:var(--ink-2)}
.pv-found-bar{display:none}
.pv-found-album{display:grid; gap:8px; scroll-margin-top:64px}
.pv-found-ah{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.pv-found-ah h3{margin:0; font-size:16px}
.pv-found-ah h3 span{font-weight:500; color:var(--ink-2)}
.pv-found-ah a{font-size:14px; color:var(--ink-2); white-space:nowrap}
.pv-found-rows{--row:104px; display:flex; flex-wrap:wrap; gap:4px}   /* rows that keep every photograph's shape: each grows by its width over its height */
.pv-found-rows::after{content:''; flex-grow:999}
.pv-ftile{flex-grow:calc(var(--w) / var(--h)); flex-basis:calc(var(--row) * var(--w) / var(--h)); overflow:hidden; border-radius:12px; background:var(--line)}
.pv-ftile img{display:block; width:100%; height:auto; aspect-ratio:var(--w) / var(--h); object-fit:cover}
.pv-ftile.is-more{display:none}
.pv-found-more{position:absolute; opacity:0; pointer-events:none}
.pv-found-more:checked ~ .pv-found-rows .is-more{display:block}
.pv-found-more:checked ~ .pv-found-showall{display:none}
.pv-found-more:focus-visible ~ .pv-found-showall{outline:2px solid var(--wine); outline-offset:2px}
.pv-found-showall{justify-self:center}
@media (min-width:900px){
  .pv-doorcard.pv-found, .pv-doorwrap.is-paper .pv-door .pv-doorcard.pv-found{padding:28px 32px 32px}
  .pv-found-intro{display:flex; align-items:flex-end; justify-content:space-between; text-align:left}
  .pv-found-intro .pv-found-notyou{display:inline}
  .pv-found-cover.is-3{grid-template-columns:2fr 1fr 1fr}
  .pv-found-cover img, .pv-found-cover img + img{display:block; height:340px; aspect-ratio:auto}
  .pv-found:has(.pv-found-chips) .pv-found-act{display:none}
  .pv-found-act .pv-found-notyou{display:none}
  .pv-found-bar{display:inline-flex; margin-left:auto}
  .pv-found-rows{--row:200px}
}
/* a photograph opened whole, swiped through its album (public/preview-home.js §47) */
.pv-viewer{width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:var(--ink); color:var(--surface)}
.pv-viewer[open]{display:grid; grid-template-rows:auto minmax(0,1fr) auto}
.pv-viewer::backdrop{background:var(--ink)}
.pv-viewer-top{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; font-size:14px}
.pv-viewer-top b{font-weight:500}
.pv-viewer-top span{width:44px}
.pv-viewer-x{display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:22px; background:none; color:inherit; cursor:pointer}
.pv-viewer-strip{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; min-height:0}
.pv-viewer-strip figure{flex:0 0 100%; display:grid; place-items:center; min-width:0; margin:0; scroll-snap-align:center; scroll-snap-stop:always}
.pv-viewer-strip img{max-width:100%; max-height:100%; object-fit:contain}
.pv-viewer-act{display:flex; justify-content:center; gap:10px; padding:12px 16px 24px}
body.pv #pv-page dialog.pv-viewer .pv-viewer-act .pv-btn.pv-btn-quiet{color:var(--surface); border:1px solid color-mix(in srgb, var(--surface) 40%, transparent)}   /* Share, readable on the dark */
.pv-maker{color:var(--ink-2); text-align:center}   /* (v217) 4.5:1 on the door's paper; ink-3 was 2.9 */
.pv-who{display:grid; gap:10px; min-width:0; margin:0; padding:0; border:0}
.pv-who-k{margin:0; padding:0; font-size:13.5px; font-weight:500; color:var(--ink-2)}
.pv-who-list{display:flex; flex-wrap:wrap; gap:8px}
.pv-whoname{position:relative; display:inline-flex; align-items:center; min-height:40px; padding:0 14px; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface); font-size:15px; font-weight:500; color:var(--ink); cursor:pointer}
.pv-whoname i{margin-left:5px; font-style:normal; font-weight:400; color:var(--ink-2)}
.pv-whoname:hover{border-color:var(--line); background:var(--hover)}
.pv-whoname input{position:absolute; inset:0; margin:0; opacity:0; cursor:pointer}
.pv-whoname:has(input:checked){border-color:var(--wine); background:var(--wine-tint); color:var(--wine)}
.pv-whoname:has(input:checked) i{color:var(--wine)}
.pv-whoname:has(input:focus-visible){outline:2px solid var(--wine); outline-offset:2px}
.pv-whofind{max-width:320px}
/* the box's own "clear" ×, in the page's grey rather than the browser's blue (it still clears, and un-chooses: §33) */
.pv-whofind::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none; width:18px; height:18px; margin:0 0 0 8px; cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23978D84' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center / 15px no-repeat}
.pv-codefield input{max-width:220px; font-size:20px; letter-spacing:.18em; font-variant-numeric:tabular-nums}
.pv-four input{max-width:140px}
.pv-fieldk{font-size:14px; font-weight:500; color:var(--ink-2)}
.pv .hp{display:none}
.pv-upfiles{display:grid; gap:8px; margin:0; padding:0; list-style:none}
.pv-upfile{display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:4px 12px; padding:8px 12px; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface); font-size:14px}
.pv-upfile .nm{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink)}
.pv-upfile .say{font-size:13px; color:var(--ink-2); text-align:right}
.pv-upfile .say button{margin-left:4px}
.pv-upfile .track{grid-column:1 / -1; display:block; height:4px; border-radius:6px; background:var(--hover); overflow:hidden}
.pv-upfile .track i{display:block; width:0; height:100%; background:var(--wine); transition:width var(--dur)}
.pv-upfile.more{display:block; color:var(--ink-2)}
@container (min-width:480px){ .pv-doorhead-facts{display:grid; grid-template-columns:auto minmax(0, 1fr); gap:0 36px} }
@container (max-width:479px){ .pv-doorhead .pv-clocks-gap{display:none} }   /* as on the home, a phone keeps the two clocks and not the sentence */
@container (min-width:540px){
  .pv-doorhead{padding:26px 30px 24px}
  .pv-doorhead .pv-names{font-size:44px}
  .pv-doorcard{padding:26px 29px 28px}
}
@media (max-width:1023px){ .pv-doorwrap{padding:26px 12px 40px} .pv-door{padding-top:10px} }
/* every door centred (28 September): one axis, the middle of the card, as on their cards */
.pv-door.is-centered :is(.pv-doorhead, .pv-doorcard){text-align:center}
.pv-door.is-centered .pv-doorcard :is(h2, p){text-wrap:balance}                                       /* centred lines break evenly: no word left alone */
.pv-door.is-centered .pv-doorhead-mark{justify-content:center}
.pv-door.is-centered .pv-dateline{justify-content:center}
.pv-door.is-centered .pv-doorhead-facts{display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:14px 36px}
.pv-door.is-centered .pv-clocks{justify-content:center}
.pv-door.is-centered .pv-clocks-gap{text-align:center}
.pv-door.is-centered :is(.pv-who-list, .pv-actions){justify-content:center}
.pv-door.is-centered .pv-who{justify-items:center}
.pv-door.is-centered .pv-field{justify-items:center}
.pv-door.is-centered .pv-field > :is(input, select){width:320px; max-width:100%; text-align:center}   /* a name, "You are…", who photographs are from */
.pv-door.is-centered .pv-codefield input{width:220px}
.pv-door.is-centered .pv-four input{width:140px}
.pv-door.is-centered .pv-keyfield input{width:100%}                                                    /* a whole link may be pasted */
.pv-door.is-centered .pv-field > textarea{justify-self:stretch; text-align:left}                      /* a wish is written left to right */
.pv-door.is-centered .pv-upfile{text-align:left}
.pv-door.is-centered .pv-doorfoot{justify-items:center}
.pv-whopick{display:grid; gap:14px}
@media (min-width:1024px){ .pv-door.is-centered .pv-togo{align-items:center} }
@media (max-width:1023px){ .pv-door.is-centered .pv-togo{justify-content:center} }

/* ---- the sign-in page on paper (28 September: his "go with option 1" of three painted mock-ups) ----
   No boxes and no lights: their mark, names and place on the paper, a rule with the mark small in it,
   "Welcome" in their type, and the form one column under it — the names that match hanging from the
   box you type in, each with its first letter and its side. */
html:has(.pv-doorwrap.is-paper),body.pv:has(.pv-doorwrap.is-paper){background:var(--surface)}
.pv-doorwrap.is-paper{min-height:100vh; min-height:100svh; padding:64px 16px 72px}
.pv-doorwrap.is-paper .pv-door{max-width:520px; padding-top:0}
.pv-doorwrap.is-paper .pv-doorhead{display:block; margin:0; padding:0; border-radius:0; background:none}
.pv-doorwrap.is-paper .pv-doorhead-mark{min-height:0; margin-bottom:16px}
.pv-doorwrap.is-paper .pv-doorhead .pv-names{font-size:40px; line-height:1.04}
.pv-doorwrap.is-paper .pv-doorhead .pv-dateline{margin-top:14px; font-size:11.5px; letter-spacing:.14em}
.pv-doorwrap.is-paper .pv-doorhead .pv-dateline + .pv-dateline{margin-top:6px}
.pv-doorrule{display:flex; align-items:center; justify-content:center; gap:12px; margin-top:22px}
.pv-doorrule i{display:block; width:min(150px, 30%); height:1px; background:var(--gold); opacity:.42}
.pv-welcome{margin:30px 0 0; font:600 36px/1.08 var(--ui); letter-spacing:-.022em; color:var(--ink)}   /* (open: look, L1: a page's title in Inter, not a name) */
.pv-doorlede{max-width:480px; margin:8px auto 0; font-size:16px; line-height:1.45; color:var(--ink-2); text-wrap:balance}
.pv-doorwrap.is-paper .pv-doorform{display:grid; max-width:480px; margin:0 auto; text-align:center}
.pv-doorwrap.is-paper .pv-doorform.pv-signin{gap:0}
.pv-doorwrap.is-paper .pv-whopick{display:block; margin-top:28px}
.pv-doorwrap.is-paper .pv-door .pv-iconfield{display:block}
.pv-iconfield{position:relative}
.pv-iconfield > svg{position:absolute; left:17px; top:27px; margin-top:-10px; color:var(--ink-2); pointer-events:none}
.pv-doorwrap.is-paper .pv-door .pv-iconfield > input{display:block; width:100%; max-width:none; min-height:54px; padding:12px 16px 12px 50px;
  background:var(--door-veil-64); font-size:17px; letter-spacing:0; text-align:left}
.pv-doorwrap.is-paper .pv-door .pv-iconfield > input:focus{background:var(--surface)}
.pv-doorwrap.is-paper .pv-signin .pv-codefield{margin-top:14px}
.pv-doorwrap.is-paper .pv-door .pv-iconfield.pv-codefield > input{padding-right:118px; font-variant-numeric:tabular-nums}
.pv-doorwrap.is-paper .pv-door .pv-iconfield.pv-codefield > input:not(:placeholder-shown){letter-spacing:.16em}
/* a code's six rings, one filled for each figure typed (public/preview-home.js §37) */
.pv-pindots{position:absolute; right:18px; top:27px; display:flex; gap:7px; margin-top:-4px; pointer-events:none}
.pv-pindots i{display:block; width:8px; height:8px; border:1px solid var(--ink-3); border-radius:50%; transition:background-color .15s ease, border-color .15s ease}
.pv-whopanel{max-height:272px; margin-top:6px; overflow:hidden auto; overscroll-behavior:contain; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--door-veil-82);
  box-shadow:0 12px 30px -18px var(--door-shade-who); text-align:left}   /* five names and a half: more scroll inside it, and the code stays near */
.pv-whopanel:not(:has(.pv-whoname:not([hidden]))){display:none}
.pv-doorwrap.is-paper .pv-whopanel .pv-who{display:block; justify-items:stretch}   /* (the centred door centres a block by its content here: the rows keep the width of the list) */
.pv-doorwrap.is-paper .pv-whopanel .pv-who-k{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}   /* said once on each name instead */
.pv-doorwrap.is-paper .pv-whopanel .pv-who-list{display:block}
.pv-doorwrap.is-paper .pv-whopanel .pv-whoname{display:flex; align-items:center; gap:12px; min-height:50px; margin-top:-1px; padding:8px 14px;
  border:0; border-top:1px solid var(--door-line-soft); border-radius:0; background:none; font-size:16px; font-weight:400; color:var(--ink)}
.pv-doorwrap.is-paper .pv-whopanel .pv-whoname:hover{background:var(--hover)}
.pv-doorwrap.is-paper .pv-whopanel .pv-whoname:has(input:checked){background:var(--wine-tint); color:var(--wine)}
.pv-doorwrap.is-paper .pv-whopanel .pv-whoname:has(input:focus-visible){outline:2px solid var(--wine); outline-offset:-2px}
.pv-whoini{display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:50%; background:var(--hover); font-size:13.5px; font-weight:500; color:var(--ink-2)}
.pv-whoname > span{flex:1; min-width:0}
.pv-whoside{display:none; flex:none; font-size:13px; font-style:normal; color:var(--ink-2)}
.pv-whopanel.is-mixed .pv-whoside{display:block}   /* a side is said only when the names found are from more than one */
.pv-whomore{margin:0; padding:11px 14px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-2)}
.pv-doorwrap.is-paper :is([data-whonone], [data-whomust]){margin-top:10px}
.pv-doorwrap.is-paper .pv-error{margin:14px 0 0}
.pv-doorwrap.is-paper .pv-doorfoot{display:grid; justify-items:center; gap:0; margin-top:28px}
.pv-comein{min-width:min(300px, 100%); min-height:52px; padding:0 28px; gap:10px; font-size:16px; font-weight:500}
.pv-or{display:flex; align-items:center; justify-content:center; gap:14px; width:100%; margin-top:30px; font-size:14px; color:var(--ink-2)}
.pv-or::before,.pv-or::after{content:""; width:min(150px, 30%); height:1px; background:var(--line)}
.pv-doorwrap.is-paper .pv-doorfoot .pv-hint{margin-top:12px; font-size:14.5px; color:var(--ink-2); text-wrap:balance}
/* (security, 14 Oct 2026, item 11) what the house keeps, under the way in: a note in the house's hint size (14), quieter than the ways in above it;
   (at the merge) and a halo of the door's own paper behind its words, where the painting reaches them (the names page at 1294: the leaves
   behind the lines' ends read 2.7:1; now every pixel behind the words 5.7:1 or more). Out of the flow: nothing moves; the door clips it */
.pv-doorwrap.is-paper .pv-privnote{position:relative; z-index:0; max-width:400px; margin:36px auto 0; line-height:1.5; color:var(--ink-2); text-wrap:balance}
/* (at the merge) on the family link's door the note follows a card whose parts stand 16 apart: 20 more, so it stands as far from the way in as on the sign-in page (36) */
.pv-doorwrap.is-paper .pv-doorcard > .pv-privnote{margin-top:20px}
/* every other door on paper too (28 September, his "do the other doors on paper too"): the card's box gone — its
   title in their type, its words and its form one column on the paper under the head, the fields and the one button
   as on the sign-in page */
.pv-doorwrap.is-paper .pv-door .pv-doorcard{display:grid; gap:16px; max-width:480px; margin:30px auto 0; padding:0; border:0; border-radius:0; background:none; box-shadow:none}
.pv-doorwrap.is-paper .pv-door .pv-doorcard h2{font:600 30px/1.12 var(--ui); letter-spacing:-.022em; color:var(--ink)}   /* (open: look, L1) */
.pv-doorwrap.is-paper .pv-door .pv-doorcard div > h2 + p{margin-top:10px}
.pv-doorwrap.is-paper .pv-door .pv-doorcard :is(.pv-quiet, .pv-doorlead){font-family:var(--ui); font-size:16px; line-height:1.45; color:var(--ink-2); text-wrap:balance}
.pv-doorwrap.is-paper .pv-door .pv-doorcard .pv-field:not(.pv-iconfield){gap:8px}
.pv-doorwrap.is-paper .pv-door .pv-doorcard .pv-field > label:not(.pv-vh),.pv-doorwrap.is-paper .pv-door .pv-doorcard .pv-fieldk{font-size:14px; font-weight:500; color:var(--ink-2)}
.pv-doorwrap.is-paper .pv-door .pv-doorcard .pv-field > :is(input[type=text], textarea){width:100%; max-width:none; min-height:52px; background:var(--door-veil-64); font-size:17px}
.pv-doorwrap.is-paper .pv-door .pv-doorcard .pv-four input{min-height:52px; background:var(--door-veil-64)}
.pv-doorwrap.is-paper .pv-door .pv-doorcard :is(input, textarea):focus{background:var(--surface)}
.pv-doorwrap.is-paper .pv-door .pv-doorcard .pv-file-l{min-height:52px; padding:0 18px; background:var(--door-veil-64); font-size:15px}
.pv-doorwrap.is-paper .pv-door .pv-doorcard .pv-linkline{margin:0; padding:12px 14px; border:1px solid var(--line); background:var(--door-veil-64)}
.pv-doorwrap.is-paper .pv-door .pv-doorcard .pv-doorfoot{margin-top:12px}
.pv-doorwrap.is-paper .pv-door .pv-doorcard .pv-doorfoot .pv-btn{min-height:50px}
.pv-doorwrap.is-paper .pv-door .pv-doorcard .pv-doorfoot .pv-btn-primary{min-width:300px; max-width:100%; padding:0 28px; font-size:16px; font-weight:500}   /* (a width of its own: inside a row of one, a share of the row is its own width) */
.pv-doorwrap.is-paper .pv-door .pv-doorcard .pv-doorlater{margin-top:14px; padding-top:18px; border-top:1px solid var(--line)}
.pv-doorwrap.is-paper .pv-door .pv-doorcard .pv-whopick{margin-top:12px}
@container (min-width:480px){
  .pv-doorwrap.is-paper .pv-door .pv-doorcard h2{font-size:36px}
  .pv-doorwrap.is-paper .pv-door .pv-doorcard :is(.pv-quiet, .pv-doorlead){font-size:17px}
  .pv-doorwrap.is-paper .pv-doorhead .pv-names{font-size:56px}
  .pv-doorwrap.is-paper .pv-doorhead .pv-dateline{font-size:13px; letter-spacing:.22em}
  .pv-welcome{font-size:46px}
  .pv-doorlede{font-size:17px}
}
@media (max-width:1023px){
  .pv-doorwrap.is-paper{padding:40px 16px 48px}
  .pv-doorwrap.is-paper:has([data-whopanel][data-open="1"]){padding-bottom:70vh}   /* room for the box to go to the top above the keyboard (§33) */
}
/* the painting at its edges, when the house has one (its dress: lib/wedding.js doorArt), and never under a word.
   On a computer the wide one fills the window behind the column (its middle is empty paper); on a phone, or any
   window taller than wide, the tall one in two pieces: its top across the top of the page, its garden at the foot
   under the last line. The page takes the painting's own paper; a soft glow of it behind the words keeps them on
   paper however narrow the window. */
html:has(.pv-doorwrap.has-art),body.pv:has(.pv-doorwrap.has-art){background:var(--door-paper, var(--paper))}
.pv-doorart{position:fixed; inset:0; z-index:0; pointer-events:none; background:var(--door-wide) center / cover no-repeat}
.pv-k-door .pv-banner{position:relative; z-index:1}   /* a demonstration's band over its painting (8 Oct 2026) */
.pv-doorart i{display:none}
.pv-doorwrap.has-art{overflow-x:clip}   /* (the glow reaches past the column: never past the screen, or a phone zooms the page out) */
.pv-doorwrap.has-art > .pv-door{position:relative; z-index:1}
.pv-doorwrap.has-art > .pv-door::before{content:""; position:absolute; inset:-48px -96px; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, var(--door-paper, var(--paper)) 74%, transparent)}
@media (orientation:portrait){
  .pv-doorart{position:absolute; background:none}
  .pv-doorart i{position:absolute; left:0; right:0; display:block}
  /* its blossoms (its top quarter), drawn smaller in the two top corners so they frame the names and never touch them,
     and its garden (its lower half) at full width; each fades into the paper between */
  .pv-doorart-top{--s:calc(100vw * .66); top:0; height:calc(var(--s) * var(--door-tall-r, 1.5) * .24)}
  .pv-doorart-top::before,.pv-doorart-top::after{content:""; position:absolute; top:0; bottom:0; width:calc(var(--s) * .42);   /* (a corner's branch, never the other's tip) */
    background:var(--door-tall) no-repeat; background-size:var(--s) auto; -webkit-mask:linear-gradient(var(--ink) 60%, transparent); mask:linear-gradient(var(--ink) 60%, transparent)}
  .pv-doorart-top::before{left:0; background-position:left top}
  .pv-doorart-top::after{right:0; background-position:right top}
  .pv-doorart-foot{bottom:0; height:calc(100vw * var(--door-tall-r, 1.5) * .54); background:var(--door-tall) no-repeat bottom center / 100% auto;
    -webkit-mask:linear-gradient(transparent, var(--ink) 16%); mask:linear-gradient(transparent, var(--ink) 16%)}
  .pv-doorwrap.is-paper.has-art{padding-bottom:calc(100vw * var(--door-tall-r, 1.5) * .5)}   /* the garden, under the last line */
}

/* ---- a row whose right side holds buttons, on a narrow page (28 September: "the links in the settings are
   stretching too much"): the buttons go under the words, starting on the words' line (a 32 px face + 12), so the
   words keep the row's width — Settings' links and codes, Today's who to call ---- */
@container (max-width:599px){
  .pv-row:has(> .pv-row-r .pv-btn){flex-wrap:wrap}
  .pv-row:has(> .pv-row-r .pv-btn) > .pv-row-main{flex-basis:100%}
  .pv-row:has(> .pv-row-r .pv-btn) > .pv-row-r{flex-basis:100%; max-width:none; justify-content:flex-start; padding:0 0 12px 48px}
  .pv-row:has(> .pv-row-main > .pv-row-ic) > .pv-row-r{padding-left:48px}
  .pv-row:has(> .pv-row-main > .pv-row-tx:first-child) > .pv-row-r{padding-left:0}
  .pv-keys .pv-row-r{padding-top:0}
  /* the same for the note an action leaves (30 September, "Filed into Mehendi…" was five lines beside
     "Change where it went"): the words keep the line beside the tick and the ×, Undo and the rest go under them */
  .pv-note:has(> :is(.pv-btn, .pv-note-act)){flex-wrap:wrap; row-gap:4px}
  .pv-note:has(> :is(.pv-btn, .pv-note-act)) > p{flex-basis:calc(100% - 74px)}
  .pv-note > [data-note-x]{order:1}
  .pv-note > :is(.pv-btn, .pv-note-act){order:2}
  .pv-note > p + :is(.pv-btn, .pv-note-act){margin-left:24px}
}

/* ---- the home's head on a phone (28 September: "the clocks and the day counter are looking weird on mobile…
   spacing is less between them, too left aligned?"): measured, 6 px between the count and the clocks, 14 between
   the clocks, and 101 px empty to their right. Now as the doors' head on a phone: on the middle axis, a rule
   above the count, the count on its line and the two clocks under it with room between ---- */
@media (max-width:1023px){
  .pv-hero .pv-hero-foot{gap:14px; padding:16px 16px 16px; text-align:center}
  .pv-hero .pv-dateline{justify-content:center}
  .pv-hero .pv-hero-facts{justify-content:center; gap:12px 28px; padding-top:14px; border-top:1px solid var(--line)}
  .pv-hero .pv-togo{justify-content:center}
  .pv-hero .pv-clocks{justify-content:center; gap:8px 28px}
}

/* ---- the phone ---------------------------------------------------------------------------- */
@media (max-width:1023px){
  .pv-lede{display:none}
  .pv-tabs{gap:16px; margin-top:16px; margin-right:-16px; padding-right:24px; -webkit-mask-image:linear-gradient(to right, var(--ink) calc(100% - 28px), transparent); mask-image:linear-gradient(to right, var(--ink) calc(100% - 28px), transparent)}
  .pv-tabs a{font-size:14px}
  .pv-toolbar .pv-chips,.pv-findbar .pv-chips{-webkit-mask-image:linear-gradient(to right, var(--ink) calc(100% - 28px), transparent); mask-image:linear-gradient(to right, var(--ink) calc(100% - 28px), transparent)}
  .pv-moneygroup-h{flex-wrap:wrap}
  .pv-moneygroup-h .pv-small{order:3; flex-basis:100%}
  .pv-toolbar .pv-chips,.pv-findbar .pv-chips{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-right:-16px; padding-right:16px}
  .pv-hero{margin-bottom:12px}
  .pv-hero-ph{aspect-ratio:16/10}
  .pv-hero-foot{padding:14px 16px 14px; gap:10px}
  .pv-hero .pv-names{font-size:31px}
  .pv-hero .pv-dateline{margin-top:6px; font-size:11px; letter-spacing:.06em}
  .pv-hero .pv-dateline + .pv-dateline{margin-top:0}
  .pv-hero-facts{align-items:center; gap:6px 18px}
  .pv-togo{flex-direction:row; align-items:baseline; gap:4px}
  .pv-togo b{font-size:24px}
  .pv-togo span{margin-top:0; font-size:13px}
  .pv-clock-part,.pv-hero .pv-clocks-gap{display:none}
  .pv-clock-face{width:24px; height:24px}
  .pv-clock-tx .t{font-size:14px}
  .pv-clock-where{font-size:11.5px}
  .pv-clocks{gap:6px 14px}
  .pv-days-nav{margin-bottom:8px; padding-top:0; border-top:0}
  .pv-days-nav .pv-panel-top{display:none}
  .pv-days{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px}
  .pv-day{border:0; border-radius:0; background:none; overflow:visible}
  .pv-day img{aspect-ratio:1; border-radius:var(--r-media); border-bottom:var(--line)}
  .pv-day > span{padding:4px 0 0; align-items:center; text-align:center}
  .pv-day b{font-size:14px}
  .pv-day em{display:none}
  .pv-film-frame{width:min(100%, 250px)}
  .pv-head{margin-bottom:16px}
  .pv-head h1{font-size:24px}
  .pv-head.is-serif h1{font-size:32px}
  .pv-head-acts{width:100%}
  
  .pv .pv-cbox input[type=text]{min-height:44px}
  
  .pv-card .pv-rows > .pv-row{padding:0 16px}
  .pv-row{flex-wrap:wrap}
  .pv-row-r{max-width:100%; padding:0 0 8px 48px; justify-content:flex-start}
  .pv-rows > .pv-row:not(:has(.pv-row-ic)):not(:has(.avatar)):not(:has(.pv-row-img)) .pv-row-r{padding-left:0}
  .pv-grid{--row:112px; gap:4px}
  .pv-remote{--row:110px}
  .pv-tabs{gap:16px}
  .pv-search-sm{flex:1 1 100%; max-width:none}
  .pv-pad{padding:16px}
  .pv-panel{padding:16px}
  .pv-post-head{padding-left:16px}
  .pv-post-tx,.pv-pills,.pv-made,.pv-files,.pv-poll{padding-left:16px; padding-right:16px}
  .pv-sum{margin:0 16px}
  .pv-comments{padding-left:16px; padding-right:16px}
  .pv-compose{padding:12px 12px 4px}
  .pv-way{gap:4px; font-size:14px}
}
/* on a phone the composer's five ways stay options (28 September: "random floating text"): each keeps its
   icon, over its word, in five equal columns under the box, edge to edge with it (avatar 40 + gap 12) */
@media (max-width:520px){
  .pv-feedcol > .pv-compose .pv-compose-ways{gap:4px; margin:8px 0 0 48px}
  .pv-feedcol > .pv-compose .pv-way{flex:1 1 0; flex-direction:column; gap:4px; min-height:54px; padding:8px 0px 4px; font-size:13px; font-weight:500}
  .pv-feedcol > .pv-compose .pv-way svg{display:block}
}
/* a day's menu (28 September): on the day's page a glance (views/preview/days.js menuGlance); on its own
   page each meal on paper, the way a caterer's menu reads — its parts in small capitals, the dishes in the
   wedding's serif, what the kitchen must know of a dish beside it, a heart at the end of each line (menuPage) */
.pv-meal{margin:0 0 12px; padding:16px 24px 12px; border-radius:var(--r-post); background:var(--surface)}
.pv-meal-h{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 12px}
.pv-meal-h h2{margin:0; font:500 24px/1.2 var(--title); letter-spacing:-.01em; color:var(--ink)}
.pv-meal-n{flex:none; font-size:14px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.pv-meal-parts{display:grid; gap:8px 32px; align-items:start}
@container (min-width:560px){ .pv-meal-parts{grid-template-columns:repeat(2, minmax(0, 1fr))} }
.pv-mpart h3{margin:4px 0 4px; font-size:12px; font-weight:500; line-height:1.4; letter-spacing:.14em; text-transform:uppercase; color:var(--gold)}
.pv-dishes{margin:0; padding:0; list-style:none}
.pv-dish{display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:4px 0; border-top:1px solid var(--line); scroll-margin-top:96px}
.pv-dish:first-child{border-top:0}
.pv-dish-tx{min-width:0; padding-top:0px}
.pv-dish-n{font:400 16px/1.4 var(--serif); color:var(--ink)}
.pv-dish-k{margin-left:8px; font-size:13px; line-height:1.4; color:var(--gold); white-space:nowrap}
.pv-dish-says{display:block; font:400 14px/1.4 var(--serif); color:var(--ink-2)}
.pv-dish-note{display:block; font-size:13px; line-height:1.4; color:var(--ink-2)}
.pv-dish-love{flex:none}
/* one width for every heart, so the hearts stand in one line whatever their counts */
.pv-dish-love button{display:inline-flex; align-items:center; justify-content:flex-start; gap:4px; width:48px; height:30px; padding:0 0 0 8px; border:0; border-radius:var(--r-sm);
  background:none; color:var(--ink-2); font:500 13px/1 var(--ui); font-variant-numeric:tabular-nums; cursor:pointer}
.pv-dish-love button:hover{background:var(--hover); color:var(--wine)}
.pv-dish-love button.is-on{color:var(--wine)}
@media (pointer:coarse){ .pv-dish-love button{width:52px; height:36px; padding-left:8px} }
/* the second half of a one-part meal: its heading only holds the columns level; on a phone it goes on as one list */
.pv-mpart.is-cont h3{visibility:hidden}
@container (max-width:559px){ .pv-mpart.is-cont h3{display:none} .pv-mpart.is-cont .pv-dish:first-child{border-top:1px solid var(--line)} .pv-mpart.is-cont{margin-top:-8px} }
.pv-meal > .pv-fold{margin-top:4px; padding-top:4px; border-top:1px solid var(--line)}
.pv-meal .pv-fold-in{padding-bottom:8px}
.pv-kitchen-n{margin-left:4px; font-size:14px; font-weight:400; color:var(--ink-2)}
.pv-kitchen-ok{color:var(--yes)}
/* the day's page: the menu at a glance, each sentence on a line of its own (a phone ran them together) */
/* the family's say: anyone's suggestion; the two of them pass it to the caterer or close it */
.pv-say-form{gap:8px}
.pv-say-form textarea{min-height:64px}
.pv-say-send{display:flex; align-items:center; justify-content:space-between; gap:8px}
.pv-says{margin:12px 0 0; padding:0; list-style:none}
.pv-say{padding:12px 0; border-top:1px solid var(--line)}
.pv-says > .pv-say:first-child{border-top:0; padding-top:0px}
.pv-say-who{margin:0; font-size:13px; line-height:1.4; color:var(--ink-2)}
.pv-say-tx{margin:4px 0 0; font-size:16px; line-height:1.45; color:var(--ink); white-space:pre-line; overflow-wrap:anywhere}
.pv-say-acts{display:flex; flex-wrap:wrap; gap:4px; margin-top:8px}
/* (a text-only button that began the row was moved 13px out, to keep its word on the words' line; since 1 October every
   button has an edge, and the edge stands on that line) */
.pv-say-closed{margin-top:4px}
@media print{ .pv-dish-love,.pv-food .pv-fold{display:none !important} .pv-meal{background:none; border:1px solid var(--line)} }
@media (prefers-reduced-motion:reduce){ .pv *{transition:none !important; animation:none !important} }
@media print{
  .pv-nav,.pv-top,.pv-tabbar,.pv-banner,.pv-noprint,.pv-head-acts,.pv-note,.pv-lights{display:none !important}
  .pv-shell{display:block; padding:0} .pv-main{max-width:none; padding:0}
  body.pv{background:var(--surface)} .pv-card{border-color:var(--line)}
}

/* "Ask the house" in the panel (1 October; the bar left the home): the AI's sparkle in the house's gold */
.pv-list .pv-nav-ai a svg,.pv-top-ai svg{color:var(--gold)}
/* The words of a post or a reply, edited where they sit (views/preview/feed.js editBox; the ··· menu's "Edit it" opens it) */
.pv-editbox{padding:4px 16px 12px}
.pv-feed .pv-editbox{padding-left:0; padding-right:0}
.pv-editbox textarea{min-height:72px}
.pv-c .pv-editbox{padding:4px 0 4px}
/* a post being edited reads like the open composer above it: on paper, in its own box (his "why isn't it highlighted like above"),
   no line touching it above or below (his "the highlight is not aligning properly with the border") */
.pv-feed > .pv-post.is-editing{margin:8px 0; padding:16px 16px 12px; border-top:0; border-radius:var(--r-post); background:var(--surface)}
.pv-feed > .pv-post.is-editing + .pv-card{border-top-color:transparent}
.pv-post.is-editing :is(.pv-sum, .pv-acts, .pv-comments, .pv-cbox){display:none}   /* only what the edit needs: who, the words, who can see it, Cancel, Save */
.pv-post.is-editing > .pv-post-head .pv-meta > :is(.pv-dot, .pv-aud-meta){display:none}   /* who can see it is said once, in the box */
.pv-taghint{margin:-4px 0 0; color:var(--ink-2)}
/* Tag someone: the people @ can name, under the box being written in (public/preview-home.js) */
.pv-mentions{position:fixed; z-index:60; min-width:250px; max-width:min(340px, 92vw); padding:4px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pop); box-shadow:var(--shadow-2)}
.pv-mentions button{display:flex; align-items:center; gap:8px; width:100%; min-height:44px; padding:4px 8px; border:0; border-radius:6px; background:none; text-align:left; cursor:pointer}
.pv-mentions button:hover,.pv-mentions button[aria-selected="true"]{background:var(--hover)}
.pv-mentions button > span{display:flex; flex-direction:column; min-width:0}
.pv-mentions b{font-size:14px; font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pv-mentions em{font-style:normal; font-size:13px; color:var(--ink-2)}

/* ------------------------------------------------ a phone: every button pressed over 44 points, its look unchanged
   (Planning's R5.8 in public/preview-answer.css, now every room; the design audit of 4 October measured the house's
   buttons at 40 and 34 tall, its filters and folds at 34, the round search and send buttons at 34, the caret by Love at
   28 × 40 — Apple's default is 44). Each gets an invisible edge past its own; nothing it sits in grows. The caret's
   reaches right only, so a press on Love beside it stays Love. */
@media (max-width:1023px){
  .pv :is(.pv-btn, .pv-chips a, .pv-more > summary, .pv-aud > summary, .pv-housebar-go, .pv-react-more){position:relative}
  .pv :is(.pv-btn, .pv-chips a, .pv-more > summary, .pv-aud > summary, .pv-dayt, .pv-housebar-go)::after{content:''; position:absolute; inset:-6px 0}
  .pv .pv-btn:not(.pv-sm)::after{inset:-4px 0}
  .pv .pv-housebar-go::after{inset:-5px}
  .pv .pv-react-more::after{content:''; position:absolute; inset:-4px -8px -4px 0}
  .pv .pv-act::after{content:''; position:absolute; inset:-4px 0}   /* (the buttons round, part A) a reaction 36, 44 to press */
  .pv .pv-icon-btn::after{content:''; position:absolute; inset:-4px}   /* an icon 36, 44 to press; a named icon's own area (below) outweighs it */
}

/* ---- (planroom) Room 3's design audit (docs/room3-2026-10-08/the-list.md, "The design audit, with Apple's guidelines") ---- */
/* C1: "Record the decision" under a closed poll reads as a link: it was the sentence's own grey, with no line (WCAG 1.4.1) */
.pvx-planroom .pv-pollres a{color:var(--wine); font-weight:500; text-decoration:underline; text-underline-offset:3px}
/* C2: a list band's count in the band's ink, not faded to 3.43:1 */
.pvx-planroom .pvl .pvl-g em{opacity:1; color:var(--ink-2)}
/* C3: the number in a finished group's mark on the Timeline, in --ink (it was 3.0 to 4.2:1 on the tag's half tone) */
.pvx-planroom .pvr-plan .pvp-mk5.is-n.is-done{color:var(--ink)}
/* H3: "Settled in the last two weeks…" is a link that looks like one, at the detail size (it was grey, 14, lined on hover) */
.pvx-planroom.pv-focus .pvr-plan .pvp-after a{font-size:var(--hd, 13.5px)}
.pvx-planroom.pv-focus .pvr-plan .pvp-after a span{color:var(--wine); text-decoration:underline; text-underline-offset:3px}
/* M2: the Suggested card keeps its band on a phone (the house hides a list's column band there, and its name went with it) */
@container (max-width:720px){ .pvx-planroom .pvl .pvl-sugg > .pv-vhead{display:flex} .pvx-planroom .pvl .pvl-sugg > .pv-vhead > span:not(:first-child){display:none} }
/* M6: what holds a task up, and why, a row of their own under How far along, so nothing after them changes its place */
.pvx-planroom .pv-grid2 > .pvx-blockrow{grid-column:1 / -1; display:grid; gap:16px}
@container (min-width:560px){ .pvx-planroom .pv-grid2 > .pvx-blockrow{grid-template-columns:1fr 1fr} }   /* (as the house's own pairs: side by side where there is room) */
/* ------------------------------------------------ (toolsroom) Room 4 of the room audit, Vendors and the house's own tools (8 October
   2026, in trial: lib/answer.js toolsRoom, body class pvx-tools). Placed before Room 1's block, which stays last. */
.pvx-tools .pvl-compare{width:100%; border-collapse:collapse}
.pvx-tools .pvl-compare thead th{font-size:16px; color:var(--ink); white-space:normal}
.pvx-tools .pvl-compare thead th a{color:var(--ink); text-decoration:none; font-weight:500}
.pvx-tools .pvl-compare tbody th{font-weight:500; color:var(--ink-2); white-space:normal}
.pvx-tools .pvl-compare td{font-size:16px; min-width:180px}

.pvx-tools .pv-msgfind{position:relative; padding:0 16px 8px}
/* (the design audit's C1, H4) the house's field: 16-point words (an iPhone does not zoom), 44 tall, 8 corners, a search icon,
   and the wine edge on focus */
.pvx-tools .pv-msgfind input{width:100%; min-height:44px; padding:8px 12px 8px 32px; border:1px solid var(--line); border-radius:6px; background:var(--surface); font:inherit; font-size:16px; color:var(--ink)}
.pvx-tools .pv-msgfind input:focus{border-color:var(--wine); background:var(--surface); outline:none;}
.pvx-tools .pv-msgfind-ic{position:absolute; left:29px; top:14px; display:flex; color:var(--ink-2); pointer-events:none}
.pvx-tools .pv-msgchips{padding:0 16px 8px}
.pvx-tools .pv-msgnone{padding:4px 16px 12px; margin:0}
.pvx-tools .pv-seenby{margin:4px 0 0; font-size:14px; color:var(--ink-2); text-align:right}
.pvx-tools .pvl-compare{table-layout:fixed}
.pvx-tools .pvl-compare thead th{background:transparent; font-size:16px; font-weight:500; color:var(--ink)}
.pvx-tools .pvl-compare tbody th{font-size:16px; font-weight:500; color:var(--ink-2)}
.pvx-tools .pvl-compare th:first-child{width:168px; position:sticky; left:0; z-index:1; background:var(--surface)}
@media (max-width: 1023px){
  /* (the design audit's H2) the table keeps its columns and scrolls; the labels wrap in their own column and stay in view */
  .pvx-tools .pvl-compare{table-layout:auto; width:max-content; min-width:100%}
  .pvx-tools .pvl-compare th:first-child{width:112px; min-width:112px; max-width:112px}
  .pvx-tools .pvl-compare td, .pvx-tools .pvl-compare thead th:not(:first-child){min-width:168px; max-width:220px; white-space:normal}
}
.pvx-tools .pv-btn[data-on]{color:var(--wine); border-color:var(--wine); background:var(--wine-tint)}
.pvx-tools .pvx-word .pvx-inline{display:inline}
.pvx-tools .pvx-word .pv-link-btn{margin-left:8px}
.pvx-tools .pvx-tie{display:block}
.pvx-tools .pvx-tie form{margin-top:8px}
.pvx-tools .pv-col-main > :first-child{margin-top:0}
.pvx-tools .pvx-gap{margin-bottom:12px}
.pvx-tools .pv-quiet.pv-mb{max-width:760px}
.pvx-tools .pvx-facehead{margin:12px 0 4px; font-size:14px; font-weight:500; color:var(--ink-2)}
.pvx-tools .pvx-talk{margin-top:32px}

.pvx-tools .pvl .pvl-seen{flex-wrap:nowrap; align-items:flex-start}
.pvx-tools .pvl .pvl-seen svg{margin-top:3px}

.pvx-tools .pv-partof .pv-partof-h{list-style:none; margin:12px 0 0px; font-size:14px; font-weight:500; color:var(--ink-2)}
.pvx-tools .pv-partof .pv-partof-h:first-child{margin-top:0}

/* ------------------------------------------------ (guestsroom) Room 5 of the room audit, Guests, the website's reply, Invitations,
   the families (8 October 2026, in trial: lib/answer.js guestsRoom; v160's "Kept apart" panels too). Before Room 1's block,
   which stays last. Every class here is drawn only by the room's own markup. */
.pvg-wide{grid-column:1 / -1}
/* (the design audit's H5) a caterer's number the register has moved past, in the house's colour for a status, not grey;
   the request over the table says it in words */
.pv-table .pvg-stale{display:block; font-size:14px; font-weight:500; color:var(--warn)}
.pvg-req{margin-bottom:16px}
.pvg-travelnote{margin:0 0 16px}
.pvg-apart .pv-actions{flex-wrap:wrap; gap:8px}
.pvg-history .pv-row-t{font-weight:400}
/* (M6) a group's label as a card's band: 13.5/500, its own name in ink, the rest quieter */
.pv-card .pvg-sub{margin:0; padding:16px 16px 0px; font-size:14px; font-weight:500; color:var(--ink)}
.pv-card .pvg-sub span{font-weight:400; color:var(--ink-2)}
/* (H4) the room sheet is the house's matrix: its names stay in view; a place is a row of its own; the nights in ink */
.pvg-rooms .pvg-night{text-align:center; color:var(--ink)}
.pvg-rooms tfoot th{font-weight:500} .pvg-rooms tfoot td{font-weight:600}
.pvg-rooms tfoot th{position:sticky; left:0; z-index:1; background:var(--surface); box-shadow:1px 0 0 var(--line)}
.pvg-rooms .pvg-stay th, .pvg-rooms .pvg-stay td{background:var(--surface)}
.pvg-rooms .pvg-stay th{font-size:14px; font-weight:500; color:var(--ink-2); text-align:left}
/* (M5) the kitchen's wait, first, in the colour of a status */
.pvg-wait{color:var(--warn); font-weight:500}
/* (H6) a day not on stays readable (5.5:1), its ground empty, never told by colour alone (its edge solid since the fix round, his E.12); (M2) a day not answered yet says so */
.pvx-guests .pv-dayticks.is-static .pv-dayt:not(.is-on){opacity:1; color:var(--ink-2); border-style:solid; background:none}
.pvx-guests .pv-dayticks.is-static .pv-dayt.is-open{opacity:1; border-style:solid; background:var(--warn-tint); color:var(--warn)}
/* (M11) the button of an inline chooser as tall as the chooser */

/* (M12) a section's heading is never squeezed by its note: the note goes under it */
.pvx-guests .pv-sec-h{flex-wrap:wrap}
.pvx-guests .pv-sec-h h2{flex:none}
/* (L1) the kitchen's cards each as tall as they need, on the scale's 24 */
.pvx-guests .pvg-kitchen{align-items:start; gap:0 24px}
/* (L7) the room's explanations keep a reading measure */
.pvx-guests .pvg-note, .pvx-guests .pvg-travelnote{max-width:76ch}
/* (L2) a card two days share: the second day's colour on the right half of its bar */
.pvx-guests .pv-invcard-art .pvg-tone2{position:absolute; right:0; bottom:0; width:50%; height:3px; background:var(--hover); z-index:1}

/* ------------------------------------------------ (daysroom) Room 6, the days, in trial: body class pvx-days.
   Five parts, each in its own block below (keep each part's rules inside its own block). */
/* (daysroom: today) Today and the run of the day */
/* item 62: the venue's weather, a quiet line of its own under the day's place */
/* item 49: a slot's short chooser, and the way to everyone */
.pvx-days .pvy-else{display:inline-flex; align-items:center; min-height:32px; font-size:14px; font-weight:500; color:var(--wine); text-underline-offset:3px}
/* item 13: a rehearsal or a meeting you are in, a row of the day: its name opens it */
.pvx-days .pvy-own .pv-slot-tx b a{color:inherit; text-decoration:none}
.pvx-days .pvy-own .pv-slot-tx b a:hover{color:var(--wine); text-decoration:underline; text-underline-offset:3px}
/* item 19: a celebration's hour by hour holds only its own slots, so none is dimmed as another's */
.pvx-days .pvr-day .pvd-seq:not(.has-mine) li b{color:var(--ink)}
/* item 61: which invitation is yours, one quiet line above the note on the copy kept */
.pvx-days .pvy-whose{margin:0 0 12px}
.pvx-days .pvy-whose .pv-form{margin-top:8px}

/* -- */
/* (daysroom: mapcal) the Map, the calendar, the days someone is invited to */
/* (item 42, call I) the wedding's places: a place's way there and its menu side by side; the form to add one under the list */
.pvx-days #pv-places .pv-row-r{display:flex; align-items:center; gap:4px}
.pvx-days .pvx-addplace{margin-top:12px}
.pvx-days .pvx-menuspace{flex:none; width:36px}
/* (call I) in the wedding week, the households under where they stay: a second line, quieter */
.pvx-days .pvx-stayers{color:var(--ink-2)}

/* -- */
/* (daysroom: days) the celebrations' pages and their menus */
/* (call F) "Its money, in Money": ruled off as the parts above it */

/* -- */
/* (daysroom: meet) Meet */
/* a line under the times: who can't come any more; someone asked who cannot open Meetings */
.pvx-days .pvd-meet-line{margin:8px 0 0}
/* what the meeting decided, on its card (item 57): a part of the card under a hairline, never a box inside it */
.pvx-days .pvd-meet-decided{margin-top:12px; padding-top:12px; border-top:1px solid var(--line)}
.pvx-days .pvd-meet-decided .pv-eyebrow{margin:0 0 4px}
.pvx-days .pvd-meet-decided .pv-post-tx{padding:0 0 4px}
.pvx-days .pvd-meet-decided .pv-fold{margin-top:4px}
/* "I can't make it any more" in the card's foot (item 59) */
.pvx-days .pvd-meet-cant{display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0}

/* -- */
/* (daysroom: sangeet) the Sangeet */
/* a surprise, said quietly on its row and on its page (call B); the order's move, the song's list (items 55, 60) */
.pvx-days .pvx-sg-secret{display:flex; align-items:center; gap:4px; margin-top:4px; font-size:14px; line-height:1.35; color:var(--ink-2)}
.pvx-days .pvx-sg-secret svg{flex:none; color:var(--wine)}
.pvx-days .pvx-sg-note{display:flex; align-items:center; flex-wrap:wrap; gap:0px 0; margin:0 0 16px; font-size:14px; color:var(--ink-2)}
.pvx-days .pvx-sg-note > svg{flex:none; margin-right:6px; color:var(--wine)}
.pvx-days .pvx-sg-note .pvx-sg-secret{display:inline-flex; margin:0; font-size:14px; color:var(--ink-2)}
.pvx-days .pvx-sg-order{margin:-4px 0 16px}
.pvx-days .pvx-sg-order > select{flex:0 0 auto; width:auto; min-width:140px; min-height:36px; padding-top:4px; padding-bottom:4px; font-size:14px}
.pvx-days .pvx-sg-list{margin-left:8px; font-size:14px; white-space:nowrap}
/* the DJ's sheet: the run's own rows quieter than the acts; the acts not in it under their own line */
.pvx-days .pvx-sg-run td{color:var(--ink-2)}
.pvx-days .pv-cuesheet .pvx-sg-later th{padding-top:16px; font-size:14px; font-weight:500; color:var(--ink-2); background:var(--surface)}
@media print{ .pvx-days .pv-cuesheet .pvx-sg-later th{background:none} .pvx-days .pvx-sg-list{display:none} }

/* -- end of (daysroom) */

/* ------------------------------------------------ (keepsroom) Room 7, what the house keeps, in trial: body class pvx-keeps.
   Four parts, each in its own block below (keep each part's rules inside its own block). */
/* (keepsroom: papers) Documents */
/* the documents most weddings need: one quiet card-fold below the folders (the house's .pv-card.pv-fold, its summary a band as
   the folders' heads are), the house's 24 apart from them; a row that is there wears the house's yes */
.pvx-keeps .pvx-pp-needs{margin-top:24px}
.pvx-keeps .pvx-pp-needs .pv-row.is-have .pv-row-ic{color:var(--yes)}
.pvx-keeps .pvx-pp-needs-foot{padding:4px 0 16px}
.pvx-keeps .pvx-pp-needs-back{margin-top:16px}
/* a paper's own page: its facts (who sees it, changed in place; its dates; its Money line), then the calendar's line, a step under */
/* its three choices, changed in place: the chosen one ticked, the others' words in line with it */

/* -- */
/* (keepsroom: after) After the wedding */
/* items 26 and 54: what the download holds, one thing to a line, in the panel's own small type (a long one hangs under its mark) */
.pvx-keeps .pvx-keepall .pvx-keeplist{margin:4px 0 0; padding:0; list-style:none; display:grid; gap:4px}
.pvx-keeps .pvx-keepall .pvx-keeplist li{position:relative; padding-left:12px; font-size:14px; line-height:1.45; color:var(--ink-2)}
.pvx-keeps .pvx-keepall .pvx-keeplist li::before{content:''; position:absolute; left:3px; top:.62em; width:4px; height:4px; border-radius:50%; background:var(--ink-2)}
/* item 25 (and 36): the thank-yous' one quiet line on where shagun is kept, under the head */
.pvx-keeps .pvx-thxnote{margin:-4px 0 16px}
/* item 36: a household's shagun in Money, on its thank-you's line, looks like the way to it that it is (as a link in a kv does) */
.pvx-keeps .pv-thx .pv-row-m a{color:var(--wine); font-weight:500; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px}

/* -- */
/* (keepsroom: story) Our story, the written pages, Talks */
/* Talks: a talk's title and its menu on one line, the menu in the card's corner */
.pvx-keeps .pvx-talk-top{display:flex; align-items:flex-start; gap:8px}
.pvx-keeps .pvx-talk-top > .pv-panel-h{flex:1; min-width:0}
.pvx-keeps .pvx-talk-top > .pv-menu{flex:none; margin:-8px -12px -4px 0}
.pvx-keeps .pvx-talk .pv-made{padding:0; margin:12px 0 0}   /* what was made of it, on the talk's own edge (a post's chips sit 18px in) */
.pvx-keeps .pvx-talk-day{white-space:nowrap}   /* a talk's day kept whole on a phone ("Thursday 8 / October") */
/* Our story: its photographs under the words, the hearts under them, then the website and the brief, quietly (the narrow page's one measure) */
.pvx-keeps .pv-page-prose.is-story > h3:first-child{margin-top:0}   /* the story opens on its first heading, as it opened on the prompt's line */
.pvx-keeps .pvx-storypics{margin:24px 0 0}
@media (min-width:1024px){ .pvx-keeps .pvx-storypics{--row:160px} }   /* three side by side on the words' measure, not two and one */
.pvx-keeps .pvx-storyrx{margin:16px 0 0}
.pvx-keeps .pvx-storyrx .pv-sum{margin:0; padding:0 0 8px}
.pvx-keeps .pvx-storyrx .pv-acts{margin:0; padding:4px 0; border-top:1px solid var(--line)}
.pvx-keeps .pvx-storyrx .pv-acts > *{flex:0 1 auto}
.pvx-keeps .pvx-storysite{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin:24px 0 0}
.pvx-keeps .pvx-storysite .pv-small{flex:1 1 280px; margin:0}
.pvx-keeps .pvx-storybrief{margin:24px 0 0; border-top:1px solid var(--line)}
.pvx-keeps .pvx-storypick .pv-grid{--row:120px; margin:4px 0 0}
@media (max-width:1023px){ .pvx-keeps .pvx-storypick .pv-grid{--row:84px} }   /* the picker's photographs three to a row on a phone, none alone and stretched */

/* -- */
/* (keepsroom: drawers) the old drawers, Recently removed, removing a person */
/* a reply under a letter or an invitation: the letter it is to, a link as the house's links are (item 33) */
.pvx-keeps .pv-head-sub a.pvx-dr-to{color:var(--wine); font-weight:500; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px}
/* Today: a slot's name opens its editor for the two of them; it reads as the name until it is pointed at (call B) */
.pvx-keeps .pv-slot-tx b a{color:inherit; text-decoration:none}
.pvx-keeps .pv-slot-tx b a:hover{color:var(--wine); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px}
.pvx-keeps .pvx-slotedit{margin-top:8px}
/* Key dates and Links: the button to add after the list, and "Take it out" under a dialog's Save, apart from it (call B) */
.pvx-keeps .pvx-kd .pv-actions{margin-top:12px}
.pvx-keeps .pvx-kd-out{margin-top:16px; padding-top:16px; border-top:1px solid var(--line)}
/* (int, call C) someone taken out: their page's way to Recently removed apart from its words; a conversation with them, where the box
   to write was, its one line on the box's own ground and edge */
.pvx-keeps .pvx-gone .pv-actions{margin-top:12px}
.pvx-keeps .pvx-gone-box{margin:0; padding:12px 16px; border-top:1px solid var(--line); background:var(--surface)}

/* -- end of (keepsroom) */

/* ------------------------------------------------ (roomsaudit) Rooms 5–7's audits mended, in trial: body class pvx-ra.
   One part per helper, each in its own block below (keep each part's rules inside its own block). */
/* (roomsaudit: guests) Guests, the website's reply, Invitations, the families */
/* item 16 (D2): Headcounts on a phone was a table 537 wide in a 356 window, the caterer's number off the screen: a block for each
   day instead, its name and households, then its four figures two by two, each under its own word; a laptop keeps the table */
.pvx-ra .pvg-ra-k{display:none}
@media (max-width:1023px){
  .pvx-ra .pvg-ra-counts, .pvx-ra .pvg-ra-counts tbody{display:block}
  .pvx-ra .pvg-ra-counts thead{display:none}
  .pvx-ra .pvg-ra-counts tbody tr{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px 16px; padding:12px 16px}
  .pvx-ra .pvg-ra-counts tbody tr + tr{border-top:1px solid var(--line)}
  .pvx-ra .pvr-gl .pvg-ra-counts tbody :is(th, td){display:block; padding:0; border:0; text-align:left}
  .pvx-ra .pvr-gl .pvg-ra-counts tbody th{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:0 12px}
  .pvx-ra .pvg-ra-counts tbody th em{display:inline}
  .pvx-ra .pvg-ra-counts .pvg-ra-k{display:block; margin-bottom:4px; font-size:14px; line-height:1.4; color:var(--ink-2)}
}
/* item 23 (D9): on a phone a card is the guideline's 16 in from its edge, so a band pulled out 16 meets its edges (the kept-apart
   card's stopped 2 short: every card .pv-pad kept 18 on a phone); Guests and a household's page */
@media (max-width:1023px){ .pvx-ra :is(.pvr-gl, .pvr-hh) .pv-card.pv-pad{padding:16px} }
/* item 42 (F28): at the door, a parent's side said in words where the others choose it, level with the field beside it */
.pvx-ra .pvg-ra-fieldv{display:flex; align-items:center; min-height:44px; margin:0; font-size:16px; line-height:1.4; color:var(--ink)}
/* item 65 (D26): Invitations, the cards' note under its heading on the page's edge (at 1294 it sat alone at the far right) */
.pvx-ra .pv-sec:has(> .pv-paperband) > .pv-sec-h{flex-direction:column; align-items:flex-start; gap:8px}
/* item 68 (D29): Invitations on the scale: the page's head to the cards 28 (18 on a phone) as in every room (the cards' own 32
   won), a card's name the serif's name in a list (17, not 19), the band's inset and the cards' gaps 24 (16 on a phone) */
.pvx-ra .pv-head + .pv-sec:has(> .pv-paperband){margin-top:0}
.pvx-ra .pv-invcard-tx b{font-size:16px}
.pvx-ra .pv-invcard-tx em{margin-top:4px}
.pvx-ra .pv-sec > .pv-paperband{padding:24px}
.pvx-ra .pv-invcards{gap:24px}
@container (max-width:759px){ .pvx-ra .pv-sec > .pv-paperband{padding:16px} .pvx-ra .pv-invcards{gap:24px 16px} }

/* (roomsaudit: today) Today, the run of the day and its slot editor, Meet */
/* item 19: the run's hour column is the day's page's 72 (preview-harmony.css 6.1); at 64, "10:45 am" (14/600, 64.8 wide on a
   phone) broke after "10:45". A time keeps one line. */
.pvx-ra .pv-slot{grid-template-columns:76px minmax(0, 1fr)}   /* (the colours round's fixes: 76 as the week's, the widest time, "12:45 pm", is 73.7) */
.pvx-ra .pv-slot .pv-time{white-space:nowrap}
/* item 54 (call 16): the head's one line, the day's celebrations each a way to its page, named as the day line named them */
.pvx-ra .pvx-ra-line a{color:var(--ink); font-weight:500; text-decoration:none}
.pvx-ra .pvx-ra-line a:hover{color:var(--wine); text-decoration:underline; text-underline-offset:3px}
.pvx-ra .pv-head-sub .pvx-ra-line .pv-dot{margin:0 .32em}   /* (the head's own rule spaces a dot that stands as an item of its own) */
/* item 54 (call 16): where the day is and what to wear, the run's first rows (they were six lines of the page's head); the
   as-of and the note that the page stays on the phone, its last line */
.pvx-ra .pvx-ra-dayfacts{display:grid; margin:0; padding:0; list-style:none}
.pvx-ra .pvx-ra-dayfacts > li{display:grid; grid-template-columns:76px minmax(0, 1fr) auto; align-items:start; gap:12px; padding:12px 0; border-top:1px solid var(--line)}
.pvx-ra .pvx-ra-dayfacts > li > .pv-btn{align-self:center}   /* Directions, the row's one thing at its end */
.pvx-ra .pvx-ra-dayfacts > li:first-child{border-top:0; padding-top:4px}
.pvx-ra .pvx-ra-dayfacts + .pv-slots > .pv-slot:first-child, .pvx-ra .pvx-ra-dayfacts + .pv-small{border-top:1px solid var(--line); padding-top:12px}
.pvx-ra .pvx-ra-fic{display:flex; padding-top:0px; color:var(--ink-2)}
.pvx-ra .pvx-ra-asof{margin:12px 0 0; padding-top:12px; border-top:1px solid var(--line); color:var(--ink-2)}
/* item 61: a count as a band writes it, the label then the count in --ink-3 (the same rule is in the keeps block) */
.pvx-ra .pvx-ra-count{margin-left:8px; font-style:normal; font-weight:400; font-size:var(--hd); color:var(--ink-2); font-variant-numeric:tabular-nums}
/* items 17, 22, 52: Meet's times as the house's rows. The whole row is the tick's label, 44 at least (the 24 box was the
   only press); a rule between rows, no box round each; the chosen one by its tick and "Chosen" in green (it was a green
   box); the others not faded (opacity .55 gave 3.6:1 and 2.3:1), their time in --ink-3 (5.5:1) and their box empty (solid since the fix round, his E.12) */
.pvx-ra .pv-opts{gap:0; align-content:start}   /* (the rows stood as tall as the map beside them) */
.pvx-ra .pv-optrow{flex-wrap:nowrap; gap:12px; padding:0; border:0; border-radius:0; background:none}
.pvx-ra .pv-optrow + .pv-optrow{border-top:1px solid var(--line)}
.pvx-ra .pv-optrow.is-chosen{background:none}
.pvx-ra .pv-optrow.is-dim, .pvx-ra .pv-meeting.is-off{opacity:1}
.pvx-ra .pvx-ra-opt{display:grid; grid-template-columns:24px minmax(0, 1fr) auto; align-items:center; gap:4px 12px; flex:1; min-width:0; min-height:44px; box-sizing:border-box; padding:8px 0; cursor:pointer}
.pvx-ra .pvx-ra-opt.is-still{cursor:default}
.pvx-ra .pvx-ra-opt .pv-opt-who{justify-content:flex-end; margin:0}   /* (a poll's .pv-opt-who put the faces 14 off the time's edge) */
.pvx-ra .pvx-ra-opt:hover .pv-optick:not(.is-still) i{border-color:var(--wine)}
.pvx-ra .pvx-ra-chosen{margin-left:8px; font-size:var(--hd); font-weight:500; color:var(--yes)}
.pvx-ra .pv-optrow.is-dim .pv-opt-when b{color:var(--ink-2)}
.pvx-ra .pv-optrow.is-dim .pv-optick i{border-style:solid}
.pvx-ra .pv-opts > .pv-actions{margin-top:12px}
/* item 52: a call is a detail line with its icon, not a grey box inside the card */
.pvx-ra .pvx-ra-call{display:flex; align-items:flex-start; gap:8px; margin:0; font-size:var(--hd); line-height:1.45; color:var(--ink-2)}
.pvx-ra .pvx-ra-call svg{flex:none; margin-top:.15em}
.pvx-ra .pvx-ra-call b{font-weight:600; color:var(--ink-2); font-variant-numeric:tabular-nums}
/* item 56: the slot editor's vendors, the house's ticks, then the box for anyone else 12 under them */
.pvx-ra .pv-form .pv-dayticks + input{display:block; margin-top:4px}   /* (with the field's own 6 between its parts: 12) */
/* item 51: the meeting card is the house's one card: an 18 inset (16 on a phone) */
.pvx-ra .pv-meeting{padding:16px}
/* item 66: Meet's empty heading in --ink, as every empty note's (.pv-feature p outranked it into --ink-2) */
.pvx-ra .pv-feature .pv-empty-h{color:var(--ink)}
@media (max-width:1023px){
  .pvx-ra .pv-meeting{padding:16px}
  /* (item 54) on a phone the venue's Directions goes under its words, on their edge */
  .pvx-ra .pvx-ra-dayfacts > li{grid-template-columns:76px minmax(0, 1fr)}   /* (the day's facts on the hours' own line, 76) */
  .pvx-ra .pvx-ra-dayfacts > li > .pv-btn{grid-column:2; justify-self:start; margin-top:-4px}
  /* (item 51) the head on a phone: the date, its state and ··· on one line, the title and who over the card's width under them
     (squeezed beside them, the title ran to five lines of two words) */
  .pvx-ra .pv-meeting-h{display:grid; grid-template-columns:48px minmax(0, 1fr) auto; align-items:center; gap:12px}
  .pvx-ra .pv-meeting-h > .pv-meeting-tx{grid-row:2; grid-column:1 / -1}
  .pvx-ra .pv-meeting-h > .pv-chip{grid-row:1; grid-column:2; justify-self:start}
  .pvx-ra .pv-meeting-h > .pv-menu{grid-row:1; grid-column:3}
  /* (item 17) on a phone the faces and the count go under the time, on its edge */
  .pvx-ra .pvx-ra-opt{grid-template-columns:24px minmax(0, 1fr)}
  .pvx-ra .pvx-ra-opt .pv-opt-who{grid-column:2; justify-content:flex-start}
  /* item 69 (call 21): the rooms' own presses at 44, by the house's own reach (a ::after, nothing drawn larger) */
  .pvx-ra .pv-slot-edit > summary, .pvx-ra .pvy-else, .pvx-ra .pvx-today .pv-panel-top .pv-more-link, .pvx-ra .pvx-today .pv-slot-tx > b > a, .pvx-ra .pvx-today .pv-kv dd > a, .pvx-ra .pvx-today .pvx-slotedit a,
  .pvx-ra .pv-meeting .pv-menu > summary, .pvx-ra .pv-meeting .pv-fold > summary, .pvx-ra .pv-earlierfold:has(.pv-meeting) > summary{position:relative}
  .pvx-ra .pv-slot-edit > summary::after, .pvx-ra .pvy-else::after{content:''; position:absolute; inset:-6px 0}   /* 32 drawn */
  .pvx-ra .pvx-today .pv-panel-top .pv-more-link::after{content:''; position:absolute; inset:-9px -4px}   /* 26 drawn */
  .pvx-ra .pvx-today .pv-slot-tx > b > a::after{content:''; position:absolute; inset:-13px 0}   /* 18 drawn */
  .pvx-ra .pv-meeting .pv-menu > summary::after{content:''; position:absolute; inset:-4px}   /* 36 drawn */
  .pvx-ra .pvx-today .pv-kv dd > a::after, .pvx-ra .pvx-today .pvx-slotedit a::after{content:''; position:absolute; inset:-13px 0}   /* "see or change it", "Change its time, place or name": 18 drawn */
  .pvx-ra .pv-meeting .pv-fold > summary::after, .pvx-ra .pv-earlierfold:has(.pv-meeting) > summary::after{content:''; position:absolute; inset:-3px 0}   /* 38 drawn */
  .pvx-ra .pv-stateform input{min-height:44px !important}
  .pvx-ra .pv-form .pv-dayticks{row-gap:8px}   /* (item 56) the ticks reach 44 (34 and 5 either side): rows 10 apart so no two reaches meet */   /* the field for how late: a field is 44 (it was 34) */
}

/* (roomsaudit: days) the celebrations' pages and menus, the Sangeet, the Map, the calendar */
/* item 55 (his call 17): a celebration with no painting of its own shows none (the stand-in was a blank gradient over half the
   hero); its name leads and its tone is a 3-point bar along the card's top, as the invitation cards' colour bars */
.pvx-ra .pv-daycard.pvx-ra-noart,.pvx-ra .pv-dayhero.pvx-ra-noart{box-shadow:none}
.pvx-ra .pv-daycard.pvx-ra-noart .pv-daycard-tx{padding-top:16px}   /* the card's 16, under the bar's 3 */
/* …and wherever else a day's picture stood: the home's list of days (a card, the tone along its top; on a phone, where the
   pictures were squares with the names under them, each day a small card of its own) and a day strip (an invitation, Today) */
.pvx-ra .pv-day.pvx-ra-noart{box-shadow:none}
.pvx-ra .pv-day.pvx-ra-noart > span{padding-top:12px}
.pvx-ra .pv-daymini.pvx-ra-noart{padding:16px 16px 12px; box-shadow:none}
/* items 49, 51, 68 (his calls 13 and 15): the menu in the system font, each meal on the house's one card (white, 12 corners, the
   --line edge, 18 inset, 16 on a phone, 16 between cards); the meal a section heading (16/600), its courses a label over a group
   (13.5/500 --ink-3, in their own case), its dishes row titles (15/500, 16 on a phone). It was paper with no edge, the meal in the
   serif at 22, courses in spaced gold capitals at 11.5, dishes in the serif 17 */
.pvx-ra .pv-meal{margin:0 0 16px; padding:16px; border:1px solid var(--line); border-radius:var(--r-post); background:var(--surface)}
.pvx-ra .pv-meal-h{margin:0 0 8px}
.pvx-ra .pv-meal-h h2{font:600 16px/1.35 var(--ui); letter-spacing:0}
.pvx-ra .pv-mpart h3{margin:8px 0 4px; font-size:var(--hd); font-weight:500; line-height:1.4; letter-spacing:0; text-transform:none; color:var(--ink-2)}
.pvx-ra .pv-dish-n{font:500 var(--hb)/1.4 var(--ui)}
.pvx-ra .pv-dish-says{font:400 var(--hd)/1.45 var(--ui); color:var(--ink-2)}
.pvx-ra .pv-dish-k{color:var(--gold)}   /* gold words in --gold-ink (the guideline's §2) */
.pvx-ra .pv-dish-note{font-size:var(--hd)}   /* a detail, 13.5 (14 on a phone); it was 13 */
/* item 64: the menu's "The numbers" is a link, drawn as the house's inline link (it was grey detail) */
.pvx-ra .pv-caterer .pv-row-m a{color:var(--wine); font-weight:500; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px}
/* item 20: "For the caterer", one household a line, three and a fold; who has not replied and what the menu has, a line each */
.pvx-ra #pv-everyone .pvx-ra-nb{white-space:nowrap}   /* the Map's list: "291 km from you" whole, never "291 / km from you" */
.pvx-ra .pv-caterer .pvx-ra-kline{display:block}
.pvx-ra .pv-caterer .pvx-ra-whomore{margin:0}
.pvx-ra .pv-caterer .pvx-ra-whomore > summary{min-height:32px; padding:0; gap:4px; font-size:var(--hd)}
.pvx-ra .pv-caterer .pvx-ra-whomore .pv-fold-in{padding:0 0 4px}
/* item 16: the DJ's sheet on a phone is a list, one act a row (views/preview/days.js runListDays); the table, for a laptop and print */
.pvx-ra .pvx-ra-runcard{display:none}
.pvx-ra .pvx-ra-run{margin:0; padding:0; list-style:none}
.pvx-ra .pvx-ra-runrow{padding:12px 16px; border-top:1px solid var(--line)}
.pvx-ra .pvx-ra-runrow:first-child{border-top:0}
.pvx-ra .pvx-ra-runrow p{margin:0}
.pvx-ra .pvx-ra-run-at{font-size:var(--hd); font-weight:500; color:var(--ink-2); font-variant-numeric:tabular-nums}
.pvx-ra .pvx-ra-run-t{margin-top:0px; font-size:var(--hb); line-height:1.4; color:var(--ink-2)}
.pvx-ra .pvx-ra-runrow.is-act .pvx-ra-run-t{font-weight:500; color:var(--ink)}
.pvx-ra .pvx-ra-run-m{margin-top:0px; font-size:var(--hd); line-height:1.45; color:var(--ink-2); overflow-wrap:anywhere}
.pvx-ra .pvx-ra-run-m a{color:var(--wine); font-weight:500; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px}
.pvx-ra .pvx-ra-runband{padding:8px 16px; border-top:1px solid var(--line); background:var(--surface); font-size:var(--hd); font-weight:500; color:var(--ink-2)}
@media screen and (max-width:1023px){
  .pvx-ra .pv-listcard:has(+ .pvx-ra-runcard){display:none}
  .pvx-ra .pvx-ra-runcard{display:block}
}
/* item 21: the Map's drawing on a phone: a dot where people live (no faces, initials or links; everyone is named in the list under
   it, with the same places and times). Its faces were 14 points with 5-point initials, 57 links of 14 by 14; its words 5 points */
.pvx-ra .pv-map .pvx-ra-mapdot{display:none}
/* item 63: faces in a stack never cover initials (4 apart; only photographs overlap): "AN" read "AI" */
.pvx-ra .pv-faces span.avatar{margin-right:4px}
.pvx-ra .pv-faces span.avatar:has(+ em){margin-right:0}
@media (max-width:1023px){
  /* item 58 (his call 19): every room keeps one supporting line on a phone: a head whose only line is its lede shows it (Meet and
     others showed none; a head with its own short line keeps that one, as before) */
  .pvx-ra .pv-head-tx > h1 + .pv-lede{display:flex}   /* (as a head's line is drawn, .pv-head-sub) */
  .pvx-ra .pv-head-tx > h1 + .pvx-titlemenu + .pv-lede{display:flex}   /* (hierarchy round 3, 8.6: the same, with a room's menu after its title) */
  .pvx-ra .pv-day.pvx-ra-noart{justify-content:center; min-height:44px; border:1px solid var(--line); border-radius:var(--r-post); background:var(--surface); overflow:hidden}   /* (item 55; a press, 44) */
  .pvx-ra .pv-day.pvx-ra-noart > span{padding:12px 4px 8px}
  .pvx-ra .pv-daymini.pvx-ra-noart{padding:16px 16px 12px}
  .pvx-ra .pv-meal{padding:16px}
  /* item 69 (his call 21): the menu's hearts 44 on a phone (30, 36 by touch) */
  .pvx-ra .pv-dish{padding:0}
  .pvx-ra .pv-dish-tx{padding:12px 0 8px}   /* the first line level with the 44 heart */
  .pvx-ra .pv-dish-love button{height:44px; width:52px; padding-left:8px}
  .pvx-ra .pv-caterer .pvx-ra-whomore > summary{min-height:44px}
  .pvx-ra .pv-map .pvx-ra-face,.pvx-ra .pv-map .pv-maplbl,.pvx-ra .pv-map .pv-arclab,.pvx-ra .pv-map .pv-venue text{display:none}
  .pvx-ra .pv-map .pvx-ra-mapdot{display:inline; fill:var(--ink-2); stroke:var(--surface); stroke-width:2}
}

/* (roomsaudit: keeps) Documents, Talks, Our story, After the wedding, the thank-yous, Recently removed */
/* 18 (D4): a wish's details are one line that wraps as words do, at the detail's size (each dot was a line of its own: "9 October
   2026 / · / through the wish link / · / only the two of you", at 12.5); in a card with a face, the wish, its photograph and its
   buttons start on the name's edge (the 32 face and 12, as a row's), so the card has one left edge */
.pvx-ra .pv-wish-who{align-items:flex-start; gap:12px}
.pvx-ra .pv-wish-who em{font-size:var(--hd); line-height:1.45}
.pvx-ra .pv-wish-who em span{display:inline}
.pvx-ra .pv-wish-who em .pvx-ra-whole{white-space:nowrap}   /* each detail whole where the line wraps */
.pvx-ra .pv-wish:has(> .pv-wish-who > .avatar) > :not(.pv-wish-who){margin-left:48px}
/* 50 (D11, his call 14): a wish is read in the house's reading type, the system font 16 in --ink, as a post, a letter and the story
   are (it was the serif 18); one block to the next in the card 12 */
.pvx-ra .pv-wish-t{margin:12px 0 0; font-family:var(--ui); font-size:16px; line-height:1.6; color:var(--ink)}
.pvx-ra .pv-wish > img{display:block; margin:12px 0 0}
.pvx-ra .pv-wish > .pv-actions{margin-top:12px}
/* 51 (D12): the wish and the talk on the house's one card: the --line edge (a wish's was --line-soft), 18 in (16 on a phone; a
   wish was 14 / 16, a talk 20 / 22), 16 apart (wishes were 12, talks 32: Room 4's 32 above a task's talk reached Talks' cards), a
   talk's title a section heading's 16 (it was 17), its details 12 above its words; the wishes 12 under their heading, 16 under
   the wish box */
.pvx-ra .pv-wish{padding:16px; border-color:var(--line)}
.pvx-ra .pv-wishes{gap:16px; margin-top:12px}
.pvx-ra .pv-wishbox{margin-bottom:16px}
.pvx-ra .pv-note-kept.pvx-talk{margin-top:0; padding:16px}
.pvx-ra .pv-note-kept .pv-panel-h{font-size:16px}
.pvx-ra .pv-note-kept .pv-small{margin:0px 0 12px}
.pvx-ra .pvx-talk-top > .pv-menu{margin:-8px -8px -8px 0}   /* its ··· on the title's line, 10 from the card's edge as a post's */
@media (max-width:1023px){
  .pvx-ra :is(.pv-wish, .pv-note-kept.pvx-talk){padding:16px}
  .pvx-ra .pvx-talk-top > .pv-menu{margin-right:-8px}
}
/* 53 (D14) and 69 (D30): "Note what they gave" is the house's quiet button, the height of WhatsApp beside it: 34, and 44 on a
   phone as every button there (it was "Note it", wine words 32 high with no edge) */
.pvx-ra .pv-thx-edit > summary.pv-btn-quiet{color:var(--ink-2)}
.pvx-ra .pv-thx-edit > summary.pv-btn-quiet:hover{color:var(--ink)}
/* 68 (D29): the thank-yous' note 16 under the tabs at both widths (22 on a laptop, 12 on a phone) */
.pvx-ra .pv-head:has(+ .pvx-thxnote){margin-bottom:16px}
.pvx-ra .pvx-thxnote{margin-top:0}
/* 68 (D29): Our story's headings on the serif's steps, 24 (they were 22), 32 above and 12 to the words they head (30 and 8); under
   the words, the spaces on the scale: 16 to the hearts, 24 to the website's line, 24 to the brief (18, 28 and 22) */
.pvx-ra .pv-page-prose.is-story h3{margin:32px 0 12px; font-size:24px}
.pvx-ra .pv-page-prose.is-story > h3:first-child{margin-top:0}
.pvx-ra .pvx-storyrx{margin-top:16px}
.pvx-ra .pvx-storysite{margin-top:24px}
.pvx-ra .pvx-storybrief{margin-top:24px}
/* 62 (D23): in a line that is a flex row, the line break written after each dot (kit.js dots) is no item of its own, so a dot sits
   as far from the word after it as from the word before (a post's line was 5 / 10; a task's, a document's head line and
   Planning's 6 / 12; a Lists or Vendors row's line too) */
.pvx-ra :is(.pv-head-sub, .pv-meta, .pv-task-meta, .pvr-plan .pvp-main, .pv-vrow-main em) > wbr{display:none}
/* and a dot left alone at the end of a flex line (a long fact after it took the next line) takes no height: on a phone a Lists
   row read "another city / (a blank line) / Meera’s Mumma, no longer in the house, was on it" */
.pvx-ra :is(.pv-head-sub, .pv-meta, .pv-task-meta, .pvr-plan .pvp-main, .pv-vrow-main em) > .pv-dot.is-brk{height:0; line-height:0}

/* (roomsaudit: cel) a celebration added or taken out */
/* on a celebration's own page, under "Change the …'s details": the quiet way to take it out, or why it stays, the house's 16 from it */
.pvx-ra .pvd-plan .pvx-celout,.pvx-ra .pvd-plan .pvx-celkept{margin-top:16px}

/* -- end of (roomsaudit) */

/* (ties: priv) privacy holes (no word: no CSS expected) (word ties: every rule under body.pvx-ties) */

/* (ties: cel) one identity for each celebration, renaming (word ties: every rule under body.pvx-ties) */

/* (ties: days) the run of the day by its celebration, the Sangeet by its ties (word ties: every rule under body.pvx-ties) */

/* (ties: who) invited, organising, on the website (word ties: every rule under body.pvx-ties) */
/* item 5: a household's form says "Not decided yet" while nothing is ticked, as it loads (.is-on) and as its boxes are ticked (:has) */
body.pvx-ties .pvx-who-none{display:none}
body.pvx-ties .pvx-who-none.is-on{display:block}
body.pvx-ties .pvx-who-ticks:has(input:checked) .pvx-who-none{display:none}
body.pvx-ties .pvx-who-ticks:not(:has(input:checked)) .pvx-who-none{display:block}

/* (ties: steps) a list row's step, someone removed handing on their work (word ties: every rule under body.pvx-ties) */
body.pvx-ties .pvx-st-left .pvx-st-k{margin:16px 0 0px; font-size:14px; font-weight:500; line-height:20px; letter-spacing:0; color:var(--ink-2)}
body.pvx-ties .pvx-st-left .pvx-st-k:first-of-type{margin-top:4px}
body.pvx-ties .pvx-st-left > .pv-small{margin:0 0 4px}
body.pvx-ties .pvx-st-left > .pv-small + .pvx-st-k{margin-top:12px}
body.pvx-ties .pvx-st-left .pv-rows > .pv-row{padding:0}
body.pvx-ties .pvx-st-left .pv-row-ic{width:18px; height:18px}
body.pvx-ties .pvx-inplan .pvx-st-ask{margin-top:16px}
body.pvx-ties .pvx-inplan .pvx-st-ask > .pv-small{margin:0 0 12px}
body.pvx-ties .pvx-inplan .pvx-st-fold{margin-top:12px}
body.pvx-ties .pvx-inplan .pvx-st-form{margin-top:4px}

/* (ties: rules) the shared rules, Not now as your own pause (word ties: every rule under body.pvx-ties) */

/* ------------------------------------------------ (homedesign) Room 1's design audit (7 October 2026, night; lib/answer.js
   homeDesign; docs/room1-2026-10-07/design-audit.md): what Room 1 added, held to docs/brand-guideline.md and Apple's guidelines */
/* 1. the planner's open box leaves the house's 16 before the card under it (its Post sat on that card's edge, 0 apart) */
.pvx-homedesign .pv-compose-open{margin-bottom:16px}
/* 2. a link that stands alone is the house's "more" link (brand guideline › Links: 13.5/600 wine, no underline, its arrow),
   above the underlined small links of a card's words */
.pvx-homedesign a.pv-more-link{font-size:14px; font-weight:500; color:var(--wine); text-decoration:none}
.pvx-homedesign a.pv-more-link:hover{text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px}
.pvx-homedesign .pvn-about a.pv-more-link, .pvx-homedesign .pv-small a.pv-more-link{font-size:14px; font-weight:500; text-decoration:none}
/* 4. a letter's hearts and replies drawn as a post's are on the home (preview-open.css's .pvo .pv-feed rules, for letters) */
.pvx-homedesign .pv-update .pv-acts{gap:0; margin:0 12px; padding:4px 0}
.pvx-homedesign .pv-update .pv-acts > *{flex:1 1 0}
.pvx-homedesign .pv-update .pv-act{width:100%}
.pvx-homedesign .pv-update .pv-react{justify-content:center}
.pvx-homedesign .pv-update .pv-react .pv-act{flex:0 1 auto; width:auto}

.pvx-homedesign .pv-update .pv-comments{margin:0 12px; padding:0px 12px 16px}
.pvx-homedesign .pv-update:has(> .pv-comments){padding-bottom:0}
.pvx-homedesign .pv-update .pv-cbox{gap:8px; margin-top:12px}
.pvx-homedesign .pv-update .pv-cbox input[type=text]{min-height:40px; padding:0 16px; border-radius:12px}
.pvx-homedesign .pv-update .pv-cbox input::placeholder{color:var(--ink-2); opacity:1}
.pvx-homedesign .pv-update .pv-cbox .pv-send{background:var(--hover); color:var(--ink-2); transition:background-color var(--dur-fast) ease, color var(--dur-fast) ease}
.pvx-homedesign .pv-update .pv-cbox .pv-send:hover{background:var(--hover); color:var(--ink)}
.pvx-homedesign .pv-update .pv-cbox:has([data-cbox-input]:not(:placeholder-shown)) .pv-send{background:var(--wine); color:var(--on-wine)}
.pvx-homedesign .pv-update .pv-cbox:has([data-cbox-input]:not(:placeholder-shown)) .pv-send:hover{background:var(--wine-press)}
.pvx-homedesign .pv-update .pv-cbox:not(:has([data-cbox-input]:not(:placeholder-shown))) .pv-send{pointer-events:none}
/* 5. Messages on the home: the unread dot sits on the corner of the face, so it never drops to a line of its own under a
   name, and takes no room from the name or the time (beside the time it pushed "Arjun’s Mumma" onto two lines) */
.pvx-homedesign .pvo-msg.is-unread .pvo-msg-top b::after{content:none}
.pvx-homedesign .pvo-msg.is-unread{position:relative}
.pvx-homedesign .pvo-msg.is-unread::before{content:''; position:absolute; left:38px; top:6px; width:10px; height:10px; border-radius:50%; background:var(--wine); box-shadow:0 0 0 2px var(--surface)}
/* 6. the Rooms page: rooms side by side share a height, so their rules meet; 7. what waits on you is said in the colour of a
   request, as on the home and in Notifications (wine is for what you can do) */
.pvx-homedesign .pv-roomlist > li{display:flex}
.pvx-homedesign .pv-roomlist > li > .pv-roomrow{flex:1}
.pvx-homedesign .pv-roomrow em.pvx-roomwait{color:var(--warn)}
/* 8. a button's words are 600, the one in a letters' bar too ("Read them" was 500 beside "Got it") */
.pvx-homedesign .pv-card.pv-confirm a.pv-btn-primary{font-weight:500}
/* 9. small ones: the family's work, one person to the next on the space scale (12, not 14); the "Who sees it" box as wide as
   the two boxes over it, edge to edge; a busy day's rest folded as every fold in the house is, a line with its arrow (not a box); the hashtags
   wrap in a narrow column (they ran past its edge: no space between them to break at) */
.pvx-homedesign .pvx-atwork + .pvx-atwork{margin-top:12px}
.pvx-homedesign .pv-compose-open .pv-cform-row > .pv-field{flex:1 1 100%; min-width:0}   /* (the row over it is two boxes 16 apart: this one runs under both, its words whole) */
.pvx-homedesign .pv-compose-open .pv-cform-row > .pv-field select{width:100%}
.pvx-homedesign .pv-fold.pvx-sincefold > summary{display:inline-flex; min-height:38px; padding:4px 0px; border:0; border-radius:0; background:none}
.pvx-homedesign .pv-fold.pvx-sincefold > summary:hover{background:none}
.pvx-homedesign .pv-fold.pvx-sincefold > summary:hover b{text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px}
.pvx-homedesign .pv-fold.pvx-sincefold > summary b{font-size:14px}
.pvx-homedesign .pv-fold.pvx-sincefold > summary > svg:last-child{color:var(--wine)}
.pvx-homedesign .pv-hashline{display:flex; flex-wrap:wrap; row-gap:0px}
/* a phone: what Room 1 added is pressed over 44 points, its look unchanged (the house's rule, above): a fold ("Who has it",
   "36 more to chase"), a reply's Love and its menu, the post box's kinds and its close */
@media (max-width:1023px){
  .pvx-homedesign :is(.pv-fold > summary, .pv-c-meta .pv-c-love, .pv-c-meta .pv-menu > summary, .pv-intents button[role=tab]){position:relative}
  .pvx-homedesign .pv-fold > summary::after{content:''; position:absolute; inset:-3px 0}
  /* (a reply's line sits 4 under its bubble and 12 over the next reply: the press reaches no further, 41 and 42 tall) */
  .pvx-homedesign .pv-c-meta .pv-c-love::after{content:''; position:absolute; inset:-4px -4px -12px}
  .pvx-homedesign .pv-c-meta .pv-menu > summary::after{content:''; position:absolute; inset:-2px -4px -12px}
  .pvx-homedesign .pv-intents button[role=tab]::after{content:''; position:absolute; inset:-2px 0}
  .pvx-homedesign .pvo .pv-compose .pv-compose-x::after{content:''; position:absolute; inset:-4px}   /* (placed absolutely there already) */
  /* 4. a letter's hearts and replies on a phone, as a post's on the home there (preview-open.css's phone block) */
  .pvx-homedesign .pv-update .pv-acts{margin:0 8px; padding:4px 0}
  
  
  .pvx-homedesign .pv-update .pv-comments{margin:0 8px; padding:0 8px 12px}
  .pvx-homedesign .pv-update .pv-cbox input[type=text]{min-height:44px}
}


/* (v199, round 2 of the walk: Memories) His words of 20 October, night, on Memories: "this has to be improved. It's just shit."
   The albums were four kinds on one page (square covers; pills with the lotus in them for an album with nothing in it; small
   pills with the days' paintings for the albums waiting for their day; a lone fourth tile on a row). Now one album tile for every
   album (views/preview/photos.js albumTile): the same square, its name 17/500 and one line 14 in --ink-3 under it; three in a
   row in a wide window, two on a phone, in every group, so the groups' columns share their edges, and a short last row keeps the
   tile's size on the left (a grid, never a stretched tile). The newest album is the cover over them and is not in the grid. */
.pv .pvr-pic .pvq-albums.is-c3{grid-template-columns:repeat(2, minmax(0, 1fr))}
@container (min-width:720px){ .pv .pvr-pic .pvq-albums.is-c3{grid-template-columns:repeat(3, minmax(0, 1fr))} }
.pv .pvr-pic .pvq-album .pv-album-tx b{font-size:16px; font-weight:500; line-height:1.3}   /* "Name in a list, 17: an album" (the guideline's §3) */
.pv .pvr-pic .pvq-album .pv-album-tx em{margin-top:4px; font-size:14px; line-height:1.4; color:var(--ink-2)}   /* a detail, 14 at every width */
/* an album with no photograph: the same square on the house's paper, with a card's hairline inside its edge so it holds its
   shape on the white sheet; its line says "Nothing in it yet". No lotus: the lotus is the house's mark, not an empty sign. */
.pv .pvr-pic .pvq-album.is-empty .pv-album-cover{background:var(--surface); box-shadow:inset 0 0 0 1px var(--line)}
/* a day's album still waiting for its day: the day's date tile (kit.js dayTile, the home's 44, in the day's tone through the
   tile's data-event) at the square's top-left corner, inside it; its line says the day it fills, in the house's long form */
.pv .pvr-pic .pvq-album .pv-album-cover > .pv-dtile{position:absolute; top:12px; left:12px}
@container (min-width:720px){ .pv .pvr-pic .pvq-album .pv-album-cover > .pv-dtile{top:16px; left:16px} }

/* ===== preview-next.css ===== */
/* preview-next.css — the few rules of the home's TRIAL (views/preview/next.js), 1 October 2026.
   Served and linked only by a house started with HQ_TRY=home; the live house never sees it.
   The trial is the house's own home: its columns, its cards and its type are public/preview-home.css,
   untouched. These are only what the trial adds: whose morning it is on the cover's clocks and the Sundays
   under its count; the greeting and the line about the lights; a quiet day's photograph; what closes a card
   that has no buttons; the gold thread where you last stood; the warmer bulbs. The way back: delete this file. */

/* ------------------------------------------------ the cover: whose morning it is, and the Sundays */
.pvn .pvn-sundays{margin-top:0px; font-size:13px; font-weight:400; color:var(--ink-2); white-space:nowrap}
.pvn-city-tx{display:grid; line-height:1.2; min-width:0}
.pvn-city-who{font-size:16px; font-weight:500; line-height:19.2px; letter-spacing:-.005em; color:var(--ink); white-space:nowrap}   /* the line of the time it replaced, so the cover keeps its height */
.pvn-city-who i{font-style:normal}
.pvn-city-at{font-size:13px; color:var(--ink-2); white-space:nowrap}
.pvn-city-at .t{font-weight:400; font-variant-numeric:tabular-nums}
.pvn-city-name{white-space:nowrap}   /* a city's name is never broken: "4:54 am in" over "the city" */

/* ------------------------------------------------ the door: a greeting, and what the lights say */
.pvn-door{margin:0 0 16px}
.pvn-hello{font-family:var(--title); font-weight:500; font-size:24px; line-height:1.2; letter-spacing:-.01em; color:var(--ink)}
.pvn-say{display:flex; align-items:flex-start; margin-top:4px; font-size:16px; line-height:1.5; color:var(--ink-2)}
.pvn-say span{text-wrap:pretty}
.pvn-bulb{flex:none; margin:1px 22px 0 11px}   /* the bulb on the faces' axis, the words on the line every name under it starts on */
.pvn-bulb .g{fill:url(#pvn-warm)}
.pvn-bulb line{stroke:var(--ink); stroke-width:.8; opacity:.35}
.pvn-bulb .b{fill:var(--bulb-warm); stroke:var(--bulb-warm-edge); stroke-width:.6}
.pvn-defs{position:absolute; width:0; height:0}
.pvn-later{margin:0 0 16px}
.pvn-later a{color:var(--wine); font-weight:500}

/* ------------------------------------------------ since you were here: the house's own cards */
/* the feed's bar: its words on the left say where you stand, what it shows on the right */
.pvn-bar .pv-panel-h{margin-right:auto}
.pvn-bar > .pv-small{flex-basis:100%}
@media (min-width:1024px){ .pvn-bar > .pv-small{text-align:right} }
/* a card that says what someone did (answered you, came into the house) has no row of buttons to close it */
.pv-feed > .pvn-told{padding-bottom:16px}
.pv-feed .pvn-told .pv-post-tx{padding-bottom:0}
.pvn-about{margin-top:4px}
.pv-post-head + .pvn-about{margin-top:8px}
.pvn-more{margin:4px 0 12px}
/* a quiet day's photograph: the picture at its own shape, its words beside it */
/* the gold thread: where you last stood */
.pvn-thread{display:flex; align-items:center; gap:12px; margin:8px 0 0; font-size:13px; font-weight:500; letter-spacing:.01em; color:var(--gold)}
.pvn-thread::before,.pvn-thread::after{content:''; flex:1; height:1px; background:var(--gold)}

/* ------------------------------------------------ small care in the house's own cards, on this home only */
@container (min-width:940px){
  /* the days' head stands on the greeting's line: no rule over it, now that the left column opens with words and not a card's edge */
  .pvn > .pv-days-nav{padding-top:0px; border-top:0}   /* 2px: the two heads on one baseline */
}
/* two or three photographs fill their row (the house's strip is four across, and leaves a hole beside three) */
/* a heavy day's note (next.js heavyNote): on the house's paper, as its other words to you are, so it is not a white
   box of text over the box you write in; each thought its own paragraph; under one rule, how today is, the question
   on a line with its three choices; and it closes at its own padding */
.pvn .pvn-heavy{padding:16px 24px; border-color:var(--line); background:var(--surface)}
.pvn .pvn-heavy .pv-prose p{margin:0 0 8px}
.pvn .pvn-heavy .pv-prose p:last-child{margin-bottom:0}
.pvn .pvn-heavy-more{margin-top:8px}
.pvn .pvn-heavy > .pv-sect{display:flex; flex-wrap:wrap; align-items:center; gap:0 16px; margin:16px 0 0; padding-top:16px; border-top:1px solid var(--line)}
.pvn .pvn-heavy .pv-mood > .pv-panel-top{flex:1 1 auto; margin:0}
.pvn .pvn-heavy .pv-mood > .pv-seg3{flex:none}
.pvn .pvn-heavy .pv-mood > :not(.pv-panel-top):not(.pv-seg3){flex:0 0 100%}
.pvn .pvn-heavy .pv-panel-h{font-size:16px; margin-bottom:0}
.pvn .pvn-heavy .pv-buzz{margin-top:12px; padding-top:0; border-top:0}
/* what the house says to you and the box you write in are two things: room between them (28px after any card
   above it; the margins of two blocks fold into the larger) */
.pvn .pv-feedcol > .pv-card:not(.pv-compose) ~ .pv-compose{margin-top:24px}

/* ------------------------------------------------ one column with room (a tablet, a narrow window): the four days are two rows of
   large pictures there, so the greeting stands before them, as it does to their left on a wide screen; nothing else moves */
@container (min-width:640px) and (max-width:939px){
  .pvn.pv-home{display:flex; flex-direction:column}
  .pvn > .pv-feedcol{display:contents}
  .pvn > .pv-feedcol > *{order:3}
  .pvn > .pv-feedcol > .pvn-door{order:1}
  .pvn > .pv-days-nav{order:2}
  .pvn > .pv-sidecol{order:4}
}
/* there too the cover keeps the height it has on the house's home: the clocks stay beside the count (their longer
   words would otherwise drop under it), and the Sundays share the line of "days to go" */
@media (min-width:1024px){
  @container (max-width:939px){
    .pvn .pv-hero .pv-clocks{flex:1 1 0; min-width:0}
    .pvn .pv-togo{display:grid; grid-template-columns:auto 1fr; align-items:baseline}
    .pvn .pv-togo b{grid-column:1 / -1}
    .pvn .pvn-sundays{margin-top:4px}
    .pvn .pvn-sundays::before{content:'·'; margin:0 .45em; color:var(--ink-3)}
  }
}
/* ------------------------------------------------ a phone: the cover keeps its height; the same order as the house's home */
@media (max-width:1023px){
  .pvn-door{margin:16px 0 16px}   /* the days sit 10px over it: the greeting has the room a head has */
  .pvn-bar{row-gap:8px}
  /* where the count is set in a row: the Sundays on its line */
  .pvn .pvn-sundays{margin-top:0}
  .pvn .pvn-sundays::before{content:'·'; margin:0 .45em 0 .1em; color:var(--ink-3)}
}
@container (max-width:639px){
  /* the two clocks in one row, with the room between them he asked for (28px where there is room) */
  .pvn .pv-hero .pv-clocks{flex-wrap:nowrap; justify-content:center; gap:6px clamp(14px, calc(100cqw - 304px), 28px)}
  /* and each may give way, its words onto a second line, before a long city pushes the other off the cover (7 October
     2026: "4:42 am in another city" beside "the city" ran out of the card at 390) */
  .pvn .pv-hero .pv-hero-foot{grid-template-columns:minmax(0, 1fr)}
  .pvn .pv-hero .pv-clocks{min-width:0}
  .pvn .pv-hero .pv-clock{min-width:0; flex:0 1 auto}
  .pvn .pv-hero .pv-clock > *{min-width:0}
  .pvn .pv-hero .pvn-city-at{white-space:normal}   /* (only where it does not fit: "4:54 am in" over "another city") */
  .pvn-city-who{font-size:13px; line-height:16.8px}
  .pvn-city-at{font-size:12px}
  .pvn-hello{font-size:24px}
}
@container (max-width:318px){
  /* the smallest phones: the two clocks one under the other, on one edge */
  .pvn .pv-hero .pv-clocks{flex-direction:column; align-items:flex-start; width:max-content; margin-inline:auto}
}

/* ------------------------------------------------ the lights say who is home
   One bulb warmer for each of the family who has been in over the last day (data-home on the trial home: a
   number, never a name) — deeper than a resting bulb, not paler; unevenly placed, in the middle of the string so
   the narrowest phone sees all seven. Still: no motion. The glow is light that fades to nothing at its rim
   (the gradient #pvn-warm, printed by next.js), in a box tall enough that none of it is cut. */
.pv-shell:has(.pvn[data-home]) .pv-lights{height:38px}
.pv-shell:has(.pvn[data-home]) .pv-lights svg{overflow:visible}
.pv-shell:has(.pvn[data-home]) .pv-lights .pv-bulb:nth-of-type(36) .g,
.pv-shell:has(.pvn:is([data-home="2"], [data-home="3"], [data-home="4"], [data-home="5"], [data-home="6"], [data-home="7"])) .pv-lights .pv-bulb:nth-of-type(33) .g,
.pv-shell:has(.pvn:is([data-home="3"], [data-home="4"], [data-home="5"], [data-home="6"], [data-home="7"])) .pv-lights .pv-bulb:nth-of-type(38) .g,
.pv-shell:has(.pvn:is([data-home="4"], [data-home="5"], [data-home="6"], [data-home="7"])) .pv-lights .pv-bulb:nth-of-type(35) .g,
.pv-shell:has(.pvn:is([data-home="5"], [data-home="6"], [data-home="7"])) .pv-lights .pv-bulb:nth-of-type(39) .g,
.pv-shell:has(.pvn:is([data-home="6"], [data-home="7"])) .pv-lights .pv-bulb:nth-of-type(34) .g,
.pv-shell:has(.pvn[data-home="7"]) .pv-lights .pv-bulb:nth-of-type(37) .g{fill:url(#pvn-warm); opacity:1; transform-box:fill-box; transform-origin:center; transform:scale(2.1); animation:none}
.pv-shell:has(.pvn[data-home]) .pv-lights .pv-bulb:nth-of-type(36) .b,
.pv-shell:has(.pvn:is([data-home="2"], [data-home="3"], [data-home="4"], [data-home="5"], [data-home="6"], [data-home="7"])) .pv-lights .pv-bulb:nth-of-type(33) .b,
.pv-shell:has(.pvn:is([data-home="3"], [data-home="4"], [data-home="5"], [data-home="6"], [data-home="7"])) .pv-lights .pv-bulb:nth-of-type(38) .b,
.pv-shell:has(.pvn:is([data-home="4"], [data-home="5"], [data-home="6"], [data-home="7"])) .pv-lights .pv-bulb:nth-of-type(35) .b,
.pv-shell:has(.pvn:is([data-home="5"], [data-home="6"], [data-home="7"])) .pv-lights .pv-bulb:nth-of-type(39) .b,
.pv-shell:has(.pvn:is([data-home="6"], [data-home="7"])) .pv-lights .pv-bulb:nth-of-type(34) .b,
.pv-shell:has(.pvn[data-home="7"]) .pv-lights .pv-bulb:nth-of-type(37) .b{fill:var(--bulb-warm); stroke:var(--bulb-warm-edge)}

/* ===== preview-answer.css ===== */
/* preview-answer.css — the trial of 2 October 2026 (lib/answer.js): every room answers to what it holds — how new,
   how many, how settled, whose words. Served and linked only by a house started with "answer" in HQ_TRY; the live
   house never sees it. Everything here is the house's own look (public/preview-home.css, untouched): its type, its
   colours, its picture layouts. These are only the proportions that change with what a page holds. Room 1, the
   home (.pva is on its root; .is-back when the person at the door has been in before). The way back: delete this
   file. */

/* ------------------------------------------------ 1. the cover, shorter for someone coming back
   A first visit has the cover whole. After that only the photograph is shorter (their faces kept, a little air
   over their heads); the paper under it is the cover's own at every width: their names, the date, the place, the
   count, the clocks. his word, 2 October, of a first proposal that kept only the count and the clocks on a phone
   and a 4.2:1 band on a wide screen: "i like the name of the couples and the venue to be brought back", "also add
   the date", and of the wide one "a bit too cropped out" (so 3.3:1 there: 295 px at his window, for 342 whole). */
.pva.is-back .pv-hero-ph{aspect-ratio:2.7/1}
@container (min-width:640px){ .pva.is-back .pv-hero-ph{aspect-ratio:3/1} }
@container (min-width:940px){ .pva.is-back .pv-hero-ph{aspect-ratio:3.3/1} }
.pva.is-back .pv-hero-ph img{object-position:var(--focus-short, 50% 26%)}
@media (max-width:1023px){ .pva.is-back .pv-hero-ph{aspect-ratio:2.7/1} }

/* ------------------------------------------------ 2. coming back on a phone: the celebrations' pictures after the feed
   They are doors that never change (and the tab bar's Events is one press away), so they wait where a wide screen
   already has them: at the head of what stands beside the feed, under their own name. */
@container (max-width:639px){
  .pva.is-back{grid-template-areas:"hero" "feed" "days" "side"}
}
@container (min-width:640px) and (max-width:939px){
  .pva.is-back > .pv-days-nav{order:4}
  .pva.is-back > .pv-sidecol{order:5}
}
@container (max-width:939px){
  .pva.is-back > .pv-days-nav{margin:12px 0 12px; padding-top:24px; border-top:1px solid var(--line)}
  .pva.is-back > .pv-days-nav .pv-panel-top{display:flex}
}

/* ------------------------------------------------ 3. new photographs, by how many (feed.js photoPost, photoDigest)
   The pictures are the house's own layout for a post's pictures (.pv-media: one at its own shape, two side by
   side, one large with two beside it). Under them, the line someone wrote under the photograph that leads. */
.pva-cap{margin:8px 0 0px; font-size:16px; line-height:1.5; color:var(--ink); text-wrap:pretty; overflow-wrap:anywhere}
.pva-cap-by{display:block; margin-top:0px; font-size:13px; color:var(--ink-2)}
.pva-cap-by:hover{color:var(--wine)}
/* two or three keep the shape of the photograph that leads: a wide one leads at 4:3 with two beside it (the house's
   own three are 5:4 with a tall lead, right for a portrait), a square one at 1:1 */
.pv-n3.is-wide{grid-template-columns:2fr 1fr; aspect-ratio:2/1}
.pv-n3.is-square{grid-template-columns:2fr 1fr; aspect-ratio:3/2}
.pv-n2.is-wide .pv-ph{aspect-ratio:4/3}
.pv-n2.is-square .pv-ph{aspect-ratio:1}
/* several albums given photographs together: one large and four beside it, then the albums by name */
.pv-n5{grid-template-columns:2fr 1fr 1fr; grid-template-rows:1fr 1fr; aspect-ratio:2/1}
.pv-n5 .pv-ph-big{grid-row:span 2}
.pva-digest .pv-digest-h + .pv-media{margin-top:4px}
.pva-albums{display:flex; flex-wrap:wrap; gap:0 16px; margin:4px 0 4px}
.pva-albums a{display:inline-flex; align-items:baseline; gap:4px; min-width:0; max-width:100%; padding:8px 0; color:var(--ink)}
/* (3 October, his "fonts look different" of this card on a phone: the names were the serif at 17 px under a head and a
   caption in the phone's own type, the caption naming an album itself; now one type in the card, at its head's size) */
.pva-albums b{min-width:0; font-family:var(--ui); font-weight:500; font-size:16px; line-height:1.35; overflow-wrap:anywhere}
.pva-albums em{font-style:normal; font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.pva-albums a:hover b{color:var(--wine)}

/* ------------------------------------------------ 4. a few words of someone's own
   The words lead their card: a size larger than the controls under them, and no rule between the two (they are
   one thought: who, what they said, what you can do about it). The box to reply in opens under Comment
   (public/preview-answer.js); until then the card ends at its row of buttons. */
.pva .pv-post.is-short .pv-post-tx{padding-bottom:8px; font-size:20px; line-height:1.45}
.pva .pvn-told .pva-own{font-size:20px; line-height:1.45}   /* and a few words said back to you (next.js saidBack) */
.pva .pv-post.is-short .pv-acts{padding-top:0; border-top:0}

/* ------------------------------------------------ 5. what waits on you, leading
   A wide screen: above the celebrations, on the greeting's line, so the one thing and its buttons are in the first
   window; the celebrations and the rest follow under a rule each, as every part of this column does. */
@container (min-width:940px){
  .pva{grid-template-rows:auto auto auto 1fr; grid-template-areas:"hero hero" "feed you" "feed days" "feed side"}
}
/* a phone: the closed line says the thing itself and how late it is; opened, it is not said twice */
.pva-glance > summary{align-items:flex-start; padding:12px 12px 12px}
.pva-one{display:grid; gap:4px; flex:1; min-width:0}
.pv-glance > summary .pva-one b{display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:16px; font-weight:500; line-height:1.4}
.pv-glance[open] > summary .pva-one b{white-space:normal}   /* opened: the whole of it */
.pva-one-meta{display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:13px; color:var(--ink-2)}
.pva-glance > summary > svg:last-child{margin-top:2px}
.pva-glance[open] .pva-one-meta{display:none}
.pva-glance .pv-glance-in .pv-todo-tx{display:none}

/* ------------------------------------------------ 6. on a phone, nothing a person reads is under 13px
   (the date and place on a first visit's cover stay as they are: larger, the place runs to a second line and the
   cover he approved grows) */
@media (max-width:1023px){
  .pva.is-back .pvn-city-at{font-size:13px}
  .pva .pvn-thread{font-size:13px}
  .pva .pv-c-meta{font-size:13px}
  .pva .pv-feedcol > .pv-compose .pv-way{font-size:13px}
  .pva .pv-face em{font-size:13px}   /* whose Mumma, which city: under a face in People */
}

/* ------------------------------------------------ 7. the box you write in (in a feed), at rest
   his word, 2 October, shown the box moved below what is new: "leave the box where it is, just one change in the box
   itself. Can we include the image inside the box? and then the options below can also spread till the edges of
   the box." So his face sits inside the field, the field starts on the column's own line, and the five ways to
   begin share the box's whole width. The field is still one button: the face does not take the press. */
.pv-feedcol > .pv-compose .pv-compose-rest{position:relative; display:block}
.pv-feedcol > .pv-compose .pv-compose-rest > .avatar{position:absolute; left:6px; top:50%; width:32px; height:32px; margin-top:-16px; font-size:13px; pointer-events:none}
.pv-feedcol > .pv-compose .pv-prompt{display:block; width:100%; padding-left:48px; text-align:left}
.pv-feedcol > .pv-compose .pv-compose-ways{margin-left:0}
.pv-feedcol > .pv-compose .pv-way{flex:1 1 0}

/* ================================================ Room 2: Photos, an album, a photograph (views/preview/photos.js)
   Live (his "room 2 is approved, make it live", 2 October): these pages put .pvr on their <main>, so every rule here
   waits on that class. Since v172 the albums and an album are laid out by "Photos, the second pass" below; what stays
   here is the quieter head, the large tile, the full album's card on a phone and a photograph's page. */

/* ------------------------------------------------ R2.1 a quieter head (Photos and an album)
   The photographs lead, so the two things done here are small and edged, none filled, and the counts are one
   quiet line. Select, pressed, wears what the house's pressed button wears. */
.pvr > .pv-head .pv-head-sub{font-size:14px; color:var(--ink-2)}
.pvr .pv-btn-quiet[aria-pressed="true"]{background:var(--wine-tint); border-color:var(--line); color:var(--wine)}
@media (min-width:1024px){ .pvr > .pv-head .pv-head-acts{margin-top:4px} }

/* ------------------------------------------------ R2.2 a large tile (photos.js bigTile: an album of one photograph,
   laid out by "Photos, the second pass" Q.2 below; R2.3, two to four in two columns, gave way to its one layout, Q.3) */
.pvr-tile img{display:block}

/* ------------------------------------------------ R2.4 the full album's card on a phone
   Its two buttons stood beside the words and left them 46 px, a word a line: there they go under the words. */
@container (max-width:560px){
  .pvr .pv-outlink{display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:8px 12px}
  .pvr .pv-outlink > .pv-actions{grid-column:2; flex-wrap:wrap}
  .pvr .pv-outlink-tx b{overflow-wrap:anywhere}
}

/* ------------------------------------------------ R2.5 a photograph's page
   The stage is the photograph's own shape (--r on .pvr-fit, when its size is known): as tall as the window gives
   and no wider than its column, so nothing dark stands beside a portrait or above a wide one, and its words sit
   right beside it. Manage is with what else is done with the photograph, on a line of its own under the three
   (they need 311 of the column's 340), which leaves the caption and who added it the column's whole width. */
.pvr .pvr-fit .pv-stage{justify-self:start; width:min(100%, calc(max(260px, 100vh - 170px) * var(--r))); min-height:0; aspect-ratio:var(--r)}
.pvr .pvr-fit .pv-stage img{width:100%; height:100%; max-height:none; object-fit:contain}
@container (min-width:900px){
  .pvr .pv-photoview.pvr-fit{grid-template-columns:minmax(0, auto) 340px; justify-content:start}
  .pvr .pvr-fit .pv-stage{width:min(100cqw - 358px, calc(max(260px, 100vh - 170px) * var(--r))); min-height:0}
}
.pvr .pv-photoside-top > div{flex:1; min-width:0}
.pvr .pv-photo-cap,.pvr .pv-photo-by{overflow-wrap:anywhere}
.pvr-in{display:inline-block; max-width:100%}   /* "in The Roka" goes to the next line whole */
.pvr .pv-photoside .pv-acts-wrap{flex-wrap:wrap; row-gap:4px}
.pvr .pv-photoside .pv-acts-wrap > .pv-menu{flex:0 0 100%}

/* ================================================================ Photos, the second pass (views/preview/photos.js:
   photosRoom, gallery, onePhoto, emptyAlbum, favouritesRoom, minePhotosRoom)
   Live with v172 (his verdict of 11 October night: all of it but the trial's photograph page, whose rules went; the
   house's own photograph page stays as Room 2 left it). Every rule here is under .pvr-pic, which only the roots of
   Photos, an album, Photos of you, Your photos and Your favourites wear (beside .pvr), so the home's digest, a
   photograph's page and every other room are untouched.
   His brief of 2 October, "Refine the Photos room": the photographs, their order and the family's own words give the
   room its character; every album is laid out for what it holds; the words and the people stay close to a picture. */

/* ------------------------------------------------ Q.1 the albums, in shelves
   Memories, ideas being collected, and the albums waiting for their celebration, each under the house's own section
   head. The covers are the house's squares, three in a row in a wide window (his word of 2 October; four once the
   first shelf holds eight or more: photos.js colsFor). A phone keeps two. The count comes last in the quiet line
   under a name. */
.pvr-pic .pvq-sec{margin-top:32px}
.pvr-pic > .pv-head + .pvq-sec{margin-top:0}
.pvr-pic .pvq-sec > .pv-sec-h{flex-wrap:wrap; gap:0px 16px; margin-bottom:16px}
.pvr-pic .pvq-albums{gap:24px 12px}
@container (min-width:720px){ .pvr-pic .pvq-albums{gap:32px 24px} }
.pvr-pic .pvq-album .pv-album-tx{padding-top:12px}
.pvr-pic .pvq-album .pv-album-tx b{overflow-wrap:anywhere; text-wrap:balance}
.pvr-pic .pvq-album .pv-album-tx em{margin-top:4px}
.pvr-pic .pvq-album:focus-visible{outline:none}
.pvr-pic .pvq-album:focus-visible .pv-album-cover{ outline-offset:3px}
.pvr-pic .pvq-album:focus-visible .pv-album-tx b{color:var(--wine)}
/* the albums with nothing in them yet: a quiet row each, its name and its celebration's day; under a shelf of covers
   they keep a clear step away from the covers' own lines */
.pvr-pic .pvq-albums + .pvq-waitlist{margin-top:24px}
.pvr-pic .pvq-waiting{min-height:62px}
.pvr-pic .pvq-waiting b{overflow-wrap:anywhere}
.pvr-pic .pvq-waiting em{margin-top:0px; font-size:14px}

/* ------------------------------------------------ Q.2 an album of one photograph
   Large, at its own shape, never past its own pixels. An upright one has its words beside it where the window has
   room for both; a wide one, and any on a phone, has them under it. */
.pvr-pic .pvq-one{display:grid; gap:12px; justify-items:start}
.pvr-pic .pvq-one > .pv-tile{flex:none; max-width:none; border-radius:var(--r-media); width:min(100%, var(--nw, 100%), calc(max(300px, 100vh - 330px) * var(--r)), 760px)}
.pvr-pic .pvq-one.is-tall > .pv-tile{width:min(100%, var(--nw, 100%), calc(max(300px, 76vh) * var(--r)))}
.pvr-pic .pvq-one > .pv-tile.is-free{width:fit-content; max-width:min(100%, 760px); aspect-ratio:auto}
.pvr-pic .pvq-one > .pv-tile.is-free img{width:auto; height:auto; max-width:100%; max-height:max(300px, 100vh - 330px)}
.pvr-pic .pvq-words{display:block; max-width:560px; min-width:0; overflow-wrap:anywhere}
.pvr-pic .pvq-cap{display:block; font-family:var(--serif); font-size:20px; line-height:1.4; color:var(--ink); text-wrap:pretty}
.pvr-pic .pvq-by{display:block; margin-top:4px; font-size:14px; color:var(--ink-2)}
.pvr-pic .pvq-by:first-child{margin-top:0}
.pvr-pic .pvq-words:hover :is(.pvq-cap, .pvq-by){color:var(--wine)}
@container (min-width:720px){
  .pvr-pic .pvq-one.is-tall{grid-template-columns:auto minmax(0, 420px); justify-content:start; gap:24px; align-items:start}
  .pvr-pic .pvq-one.is-tall > .pv-tile{width:min(100cqw - 288px, var(--nw, 100cqw), calc(min(640px, max(320px, 100vh - 290px)) * var(--r)))}
  .pvr-pic .pvq-one.is-tall > .pvq-words{padding-top:0px}
}

/* ------------------------------------------------ Q.3 an album of two or more: one layout
   The structure he pointed to on 3 October, an album on Facebook ("the captions under the photo preview doesn't
   work… use this structure of facebook"): close rows that fill the page, every photograph at its own shape, a fine
   gap, the house's small corner, and nothing written under them; what someone wrote is on the photograph's own page.
   photos.js plans the rows for a window (from 560 wide) and for a phone, near one height (about 220 in a window, 160
   on a phone), and gives each photograph its row's height for each plan (--hw, --hp); a row break shows only for the
   plan in use. Photos of you, Your photos and both lists of favourites are laid out the same way. */
.pvr-pic .pvq-gal{gap:4px}
.pvr-pic .pvq-plan{display:flex; flex-wrap:wrap; align-items:flex-start; gap:0 4px}
.pvr-pic .pvq-gc{flex:none; width:calc(var(--r) * var(--hp)); min-width:0; margin:0 0 4px}
.pvr-pic .pvq-gc > .pv-tile{flex:none; width:100%; max-width:none}
.pvr-pic .pvq-gal .pv-tile{border-radius:var(--r-tile)}
.pvr-pic .pvq-gal .pv-tile img{display:block}
.pvr-pic .pvq-br{flex:0 0 100%; height:0}
.pvr-pic .pvq-br.is-w{display:none}
@container (min-width:560px){
  .pvr-pic .pvq-plan{column-gap:4px}
  .pvr-pic .pvq-gc{width:calc(var(--r) * var(--hw)); margin-bottom:4px}
  .pvr-pic .pvq-br.is-w{display:block}
  .pvr-pic .pvq-br.is-p{display:none}
}
@media (max-width:1023px){
  .pvr-pic .pvq-gal{gap:4px}
}
/* a photograph someone wrote about wears a small mark at its corner (the words show when it is pointed at, and on
   its own page) */
.pvr-pic .pvq-capmark{position:absolute; top:6px; right:6px; display:grid; place-items:center; width:24px; height:22px; border-radius:6px; background:var(--scrim); color:var(--on-wine)}
/* a tile reached by the keyboard is ringed inside its own edge */
.pvr-pic :is(.pv-grid, .pvq-one) .pv-tile:focus-visible{ outline-offset:-3px}
/* how many loved it, and who sent it, at a size that can be read */
.pvr-pic .pv-tile-n,.pvr-pic .pv-tile-from{font-size:13px}
/* choosing: every tile shows its ring to tick, large enough for a finger */
.pvr-pic .is-selecting .pv-tile{cursor:pointer}
@media (max-width:1023px){
  .pvr-pic .pv-tick{top:0; left:0; padding:8px}
  .pvr-pic .pv-tick i{width:28px; height:28px}
  .pvr-pic .pv-selbar{top:calc(var(--topbar-h, 56px) + 8px)}
}

/* ------------------------------------------------ Q.3b one voice for the room's words
   Measured on every page of the room (2 October, his "check fonts everywhere"): what someone wrote about a photograph
   is always the reading serif at 20 (beside a lone photograph); a name of an album or a celebration is the
   title serif; everything the house says is the system face, its quiet lines 13.5 throughout (the full album's card
   and the painting's note were 13 and 12.5), and the full album's name no heavier than the buttons beside it. */
.pvr-pic .pv-outlink-tx b{font-size:16px; font-weight:500; overflow-wrap:anywhere}
.pvr-pic .pv-outlink-tx em{font-size:14px}
.pvr-pic .pv-emptyart figcaption{font-size:14px}

/* ------------------------------------------------ Q.4 an album with nothing in it yet
   Its celebration's painting and one calm line; the day is in the head and the way to add is the head's own button. */
.pvr-pic .pvq-emptyart .pv-empty-h{font-family:var(--title); font-size:20px; font-weight:500; line-height:1.3; color:var(--ink); text-wrap:balance}
.pvr-pic .pvq-emptyart .pv-quiet{margin-top:4px; max-width:44ch}

/* ------------------------------------------------ Q.5 a photograph that cannot be shown says so
   (preview-answer.js marks its tile or cover is-broken) */
.pvr-pic .is-broken img{visibility:hidden}
.pvr-pic :is(.pv-tile, .pv-album-cover).is-broken{background:var(--hover)}
.pvr-pic :is(.pv-tile, .pv-album-cover).is-broken::before{content:'Could not load'; position:absolute; inset:0; display:grid; place-items:center; padding:4px; text-align:center; font-size:13px; color:var(--ink-2)}

/* ------------------------------------------------ Q.6 Your favourites, Photos of you, Your photos
   Each list says whose it is and who sees it. */
.pvr-pic .pvq-favsec > .pv-sec-h{display:block; margin-bottom:12px}
.pvr-pic .pvq-favsec > .pv-sec-h p{margin-top:4px; max-width:62ch}
.pvr-pic .pvq-h-note{font-weight:400; font-size:14px; letter-spacing:0; color:var(--ink-2)}
.pvr-pic .pvq-none{padding:16px 16px; border:1px solid var(--line); border-radius:var(--r-post); background:var(--surface); font-size:14px; color:var(--ink-2)}
.pvr-pic .pvq-favsec .pv-selectable > .pv-actions{margin:0 0 12px}

/* ================================================================ Room 3: a celebration's page, and Events
   Every rule here is under .pvr-day, which the root of a day's page and of Events wears
   (views/preview/days.js dayRoom, events). The page reads in a guest's
   order: the celebration, what is known, how the day unfolds, what was said and the photographs, the planning. */

/* ------------------------------------------------ R3.1 what is not settled, said once
   A plain line in the house's quiet text: under the when and where in a day's hero, under the room's name on
   Events when no day is final, on a card when only some are not. Never a chip. */
.pvr-day .pvd-maybe{display:block; font-size:14px; font-weight:400; line-height:1.45; letter-spacing:0; text-transform:none; color:var(--ink-2)}
.pvr-day .pv-head-sub .pvd-maybe{flex-basis:100%; margin-top:4px}
.pvr-day .pv-daycard .pvd-maybe{margin-top:0px}

/* ------------------------------------------------ R3.2 the ways out of the hero
   Equal, small and edged until the week of the day, when Directions leads, filled. The grid's columns keep
   three on one row and four on two rows of two, so no button is ever alone on a row. On a phone they share the
   row's width, without their glyphs (with them three need 358 and the card gives 314), on every day alike. */
.pvr-day .pvd-ways{display:grid; grid-template-columns:repeat(3, max-content); justify-content:start; gap:8px}
.pvr-day .pvd-ways .pv-btn{min-width:0}
@container (max-width:420px){
  .pvr-day .pvd-ways{grid-template-columns:repeat(3, minmax(0, 1fr)); justify-content:stretch}
  .pvr-day .pvd-ways .pv-btn{padding:0 4px}
  .pvr-day .pvd-ways .pv-btn > svg{display:none}
}

/* ------------------------------------------------ R3.3 what is known, and the one line for what is not */
.pvr-day .pvd-open{margin-top:12px}
.pvr-day .pvd-open a{white-space:nowrap}   /* each way in stays whole on its line */

/* ------------------------------------------------ R3.4 how the day unfolds
   The times in one column, one thin rule joining the entries; the entries that are this celebration in ink (and
   the rule beside them), the rest of the day in the lower grey. Under them, on its day, the way to the sangeet. */
.pvr-day .pvd-seq{gap:0}
.pvr-day .pvd-seq li{grid-template-columns:76px minmax(0, 1fr); gap:0}   /* (the colours round's fixes: 76 as the week's, the widest time, "12:45 pm", is 73.7) */
.pvr-day .pvd-seq li > span:last-child{padding:8px 0 8px 16px; border-left:1px solid var(--line)}
.pvr-day .pvd-seq li:first-child > span:last-child{padding-top:0px}
.pvr-day .pvd-seq li:last-child > span:last-child{padding-bottom:0px}
.pvr-day .pvd-seq li.is-mine .pv-time{color:var(--ink)}
.pvr-day .pvd-seq li.is-mine > span:last-child{border-left-color:var(--ink)}
.pvr-day .pvd-seq li b,.pvr-day .pvd-seq li em{overflow-wrap:anywhere}
.pvr-day .pvd-also{margin-top:12px; border-top:1px solid var(--line)}

/* ------------------------------------------------ R3.5 planning, last and together
   One name over to do, open questions, the people, money and the day's details: beside the page in a window (the
   column scrolls with the page, it is longer than a window), after everything else on a phone. */
.pvr-day .pvd-plan{position:static}
.pvr-day .pvd-plan > .pv-h2{margin:0 0 12px; font-size:16px; letter-spacing:-.012em}   /* a panel's head, not louder than "What to know" beside it */
.pvr-day .pvd-plan .pv-sect .pv-panel-h{font-size:16px}
.pvr-day .pvd-plan > .pv-h2 + .pv-sect{padding-top:0; border-top:0}
.pvr-day .pvd-plan > .pv-sect:last-child{margin-bottom:0}
.pvr-day .pvd-plan > .pv-sect + .pv-fold{margin:0; padding-top:8px; border-top:1px solid var(--line)}

/* ------------------------------------------------ R3.6 the second pass (2 October, his reviewer's notes)
   The box you write in has no rule here: it is the home's own box in the home's own classes (days.js dayRoom), so
   it cannot drift from it. What one of the two of them posted about what to wear says where it is from, quietly,
   under the words. An open question that waits on the reader carries "Answer" beside it. The people and the money
   start closed, as the house's fold, each with one quiet line for what it holds (gone once it is open: what it
   holds is then in sight); the three folds stand one under another, a rule between them. */
.pvr-day .pvd-say{margin:0 0 16px}
.pvr-day .pvd-from{display:block; margin-top:4px}
/* the planning column is as narrow as a phone: "Answer" stands under the question's words, as the house's rows do there */
.pvr-day .pvd-asks .pv-row{flex-wrap:wrap}
.pvr-day .pvd-asks .pv-row-main{flex-basis:100%}
.pvr-day .pvd-asks .pv-row-r{flex-basis:100%; max-width:none; justify-content:flex-start; padding:0 0 12px 48px}
.pvr-day .pvd-plan > .pv-fold + .pv-fold{margin:8px 0 0; padding-top:8px; border-top:1px solid var(--line)}
.pvr-day .pvd-plan > .pv-fold > summary{display:flex; padding:0}   /* on the column's own line, its arrow at the column's edge */
.pvr-day .pvd-plan > .pv-fold > summary > svg:last-child{flex:none; margin-left:auto}
.pvr-day .pvd-part > summary > span{display:flex; flex-direction:column; gap:0px; min-width:0; padding:4px 0}
.pvr-day .pvd-part .pvd-sum{font-style:normal; font-size:14px; font-weight:400; line-height:1.45; color:var(--ink-2)}
.pvr-day .pvd-part[open] .pvd-sum{display:none}
.pvr-day .pvd-part .pv-fold-in > .pv-more-link{margin-top:4px}

/* ================================================================ Room 4: Family (views/preview/people.js familyRoomNew)
   Approved 2 October 2026 ("room 4 is approved, make it live"; on with lib/answer.js answering()), from a friend's
   review: every rule here is under .pvr-fam, which the root of /family wears only then. Each family inside one fine border of
   its own, under its banner (the paper strip he asked to keep); no box round a person; a hairline over each circle's
   name; in a wide window the two families stand level, part by part and row by row (R4.4). The house's own type
   and colours throughout; nothing a person reads under 13px. */

/* ------------------------------------------------ R4.1 the two families
   Side by side from 760 (as .pv-sides), one under the other below it. Each family inside one fine, softly rounded
   border of its own, its banner joined to the upper corners, the way to add someone inside at its foot; no line
   between the two: the borders and the room between them say it. Each family is set on its own middle (his word, 2
   October: "the bride and groom sit at the center… the circles below are also center aligned"): the banner alone
   keeps its words at the left, as it always had them. */
.pvr-fam .pvm-sides{display:grid; grid-template-columns:minmax(0, 1fr); margin:0 0 32px}
.pvr-fam .pvm-side{min-width:0; padding:0 16px 16px; border:1px solid var(--line); border-radius:var(--r-post); background:var(--surface); text-align:center}
.pvr-fam .pvm-side + .pvm-side{margin-top:16px}
.pvr-fam .pvm-gap{display:none}   /* the place kept level with the other family: only where they stand side by side (R4.4) */
@container (min-width:760px){
  .pvr-fam .pvm-sides{grid-template-columns:repeat(2, minmax(0, 1fr)); align-items:start; column-gap:24px}
  .pvr-fam .pvm-side + .pvm-side{margin-top:0}
}
/* the way to a family from the head, when the house holds more than twelve: only while they stand one under another */
.pvr-fam .pvm-jump{display:flex; flex-wrap:wrap; gap:8px; margin:-12px 0 24px}
@container (min-width:760px){ .pvr-fam .pvm-jump{display:none} }
@media (max-width:1023px){ .pvr-fam .pvm-side{scroll-margin-top:68px} }   /* clear of the phone's top bar (56) and 12 */

/* a family's name on the banner it has always had (his word, 2 October: "i like this current top banner"): the
   paper, the hairline, the serif name and one quiet line; the way to add someone is at the family's foot, not here */
.pvr-fam .pvm-head{margin:0 -16px; padding:16px 16px; border-bottom:1px solid var(--line); border-radius:calc(var(--r-post) - 1px) calc(var(--r-post) - 1px) 0 0; background:var(--surface); text-align:left}
.pvr-fam .pvm-head h2{font-family:var(--title); font-size:24px; font-weight:500; line-height:1.15; color:var(--ink); text-wrap:balance}
.pvr-fam .pvm-head p{font-size:13px; line-height:1.4; color:var(--ink-2)}
/* what follows it: 20 under the banner, 6 between the bride or groom and Mumma and Papa, 22 before each circle, 18
   over the way to add someone */
.pvr-fam .pvm-side > * + *{margin-top:24px}
.pvr-fam .pvm-side > .pvm-head + *{margin-top:16px}
.pvr-fam .pvm-side > .pvm-lead + .pvm-parents{margin-top:4px}
.pvr-fam .pvm-side > .pvm-add{display:flex; width:fit-content; max-width:100%; margin:16px auto 0}
   /* the room's own words on a button: not bold */
.pvr-fam .pvm-group{padding-top:16px; border-top:1px solid var(--line)}
.pvr-fam .pvm-label{margin:0 0 8px; font-size:13px; font-weight:500; line-height:1.4; color:var(--ink-2); text-align:center}
.pvr-fam .pvm-none{font-size:16px; line-height:1.5; color:var(--ink-2)}
/* the planner, with both families: under them, on the page's middle */
.pvr-fam .pvm-planner{margin:0 0 32px; padding-top:16px; border-top:1px solid var(--line); text-align:center}

/* ------------------------------------------------ R4.2 a person
   The face, and under it the name, who they are, and when they were last in, each on the face's middle. A row of
   people stands on its family's middle, and so does a last row of one or two. A name is kept whole and never
   counted: it wraps, in a place two lines tall at the least, so who they are sits level along a row; a longer name
   makes its row taller. Nothing is cut and no type is made smaller. */
.pvr-fam .pvm-people{display:flex; flex-wrap:wrap; justify-content:center; gap:4px 12px}
.pvr-fam .pvm-cell{position:relative; flex:0 0 140px; min-width:0}
.pvr-fam .pvm-lead .pvm-cell{flex-basis:292px}
@container (max-width:759px){
  .pvr-fam .pvm-cell{flex-basis:calc(50% - 6px)}
  .pvr-fam .pvm-lead .pvm-cell{flex-basis:100%}
}
.pvr-fam .pvm-person,.pvr-fam .pvm-msg{touch-action:manipulation}
.pvr-fam .pvm-person{display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; min-height:48px; padding:8px 0px; border-radius:var(--r-ctl); color:var(--ink)}
@media (hover:hover){ .pvr-fam .pvm-person:hover{background:var(--hover)} }   /* (the colours round's fixes: under a pointer only, so a tap on a phone leaves nothing behind) */
@media (hover:hover){ .pvr-fam .pvm-person:hover .pvm-name{color:var(--wine)} }
.pvr-fam .pvm-person:focus-visible{ outline-offset:2px; border-radius:var(--r-ctl)}   /* the house's ring, at the person's own corners */
.pvr-fam .pvm-person .avatar{width:64px; height:64px; font-size:24px}
.pvr-fam .pvm-tx{display:flex; flex-direction:column; align-items:center; width:100%; min-width:0}
.pvr-fam .pvm-nb{display:flex; flex-direction:column; justify-content:flex-end; width:100%; min-height:39px}   /* two lines of a name, the name on the lower */
.pvr-fam .pvm-lead .pvm-nb{min-height:0}
.pvr-fam .pvm-lead .pvm-person{gap:8px}
.pvr-fam .pvm-name{font-size:16px; font-weight:500; line-height:1.3; color:var(--ink); overflow-wrap:anywhere; text-wrap:balance}
.pvr-fam .pvm-you{font-weight:400; color:var(--ink-2)}
.pvr-fam .pvm-rel{margin-top:0px; font-size:14px; line-height:1.35; color:var(--ink-2); overflow-wrap:anywhere}
.pvr-fam .pvm-seen{font-size:13px; line-height:1.35; color:var(--ink-2)}
.pvr-fam .pvm-seen.is-now{color:var(--ink-2)}   /* here now: said, not lit */
/* the bride or the groom, leading their family from its middle */
.pvr-fam .pvm-lead .avatar{width:80px; height:80px; font-size:24px}
.pvr-fam .pvm-lead .pvm-name{font-size:16px}

/* ------------------------------------------------ R4.3 a message, at the person's corner
   With a mouse it shows on the person's hover or focus, as before; on a touch screen it is always there, quiet, with
   a 44 square to press, clear of the face. */
.pvr-fam .pvm-msg{position:absolute; top:6px; right:6px; width:30px; height:30px; opacity:0; background:var(--surface); box-shadow:0 0 0 1px var(--line)}
.pvr-fam .pvm-cell:hover .pvm-msg,.pvr-fam .pvm-cell:focus-within .pvm-msg,.pvr-fam .pvm-msg:focus-visible{opacity:1}
.pvr-fam .pvm-msg:hover{background:var(--hover); color:var(--ink)}
.pvr-fam .pvm-msg:focus-visible{border-radius:50%}
.pvr-fam .pvm-lead .pvm-msg{right:auto; left:calc(50% + 50px)}   /* the bride or groom's place is wide: beside the face, not at a far corner */
@media (hover:none){
  .pvr-fam .pvm-msg{top:0; right:0; width:44px; height:44px; opacity:1; background:transparent; box-shadow:none; color:var(--ink-2)}
}

/* ------------------------------------------------ R4.4 the two families, level with each other
   Only where they stand side by side and the browser can share a grid's rows (elsewhere each family flows by itself,
   as above). The page's rows belong to both families: the banner, the bride or groom, Mumma and Papa, then for each
   circle its name and each row of its people; a row is as tall as its tallest person on either side, and a family
   with fewer rows in a circle has quiet room there, so the next circle starts level. How many rows a part takes
   comes from the page (--r3 at three people a row, --r2 at two, in a narrower window): no height is written here. */
@supports (grid-template-rows:subgrid){
  @container (min-width:760px){
    .pvr-fam .pvm-sides{align-items:stretch}
    .pvr-fam .pvm-side{display:grid; grid-template-columns:minmax(0, 1fr); grid-template-rows:subgrid; grid-row:1 / span var(--r2); row-gap:0}
    .pvr-fam .pvm-gap{display:block; grid-row:span var(--r2)}
    .pvr-fam .pvm-group{display:grid; grid-template-columns:minmax(0, 1fr); grid-template-rows:subgrid; grid-row:span var(--r2); row-gap:0}
    .pvr-fam .pvm-group > .pvm-people{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); grid-template-rows:subgrid; grid-row:span var(--p2); gap:4px}
    .pvr-fam .pvm-group .pvm-cell{grid-column:span 2}
    .pvr-fam .pvm-side > .pvm-add{align-self:end}
  }
  @container (min-width:760px) and (max-width:899px){
    .pvr-fam .pvm-group .pvm-cell:last-child:nth-child(odd){grid-column:2 / span 2}   /* a last row of one, on the middle */
  }
  @container (min-width:900px){
    .pvr-fam .pvm-side{grid-row:1 / span var(--r3)}
    .pvr-fam .pvm-gap,.pvr-fam .pvm-group{grid-row:span var(--r3)}
    .pvr-fam .pvm-group > .pvm-people{grid-template-columns:repeat(6, minmax(0, 1fr)); grid-row:span var(--p3)}
    .pvr-fam .pvm-group .pvm-cell:last-child:nth-child(3n + 1){grid-column:3 / span 2}   /* a last row of one, on the middle */
    .pvr-fam .pvm-group .pvm-cell:nth-last-child(2):nth-child(3n + 1){grid-column:2 / span 2}   /* and of two */
  }
}

/* ================================================================ Room 5: Planning (views/preview/plan.js planRoomNew, askRoomNew)
   Every rule here is under .pvr-plan, which the root of the List, the Calendar, the Timeline and Questions &
   decisions wears; its classes are pvp-. The house's own
   type and colours; nothing a person reads on a phone under 13px (the wide calendar's cells and the line of time at
   12.5px). */

/* ------------------------------------------------ R5.1 the head: one sentence, the four views on one line */
.pvr-plan .pv-head-sub{display:block}
.pvr-plan .pvp-late{color:var(--danger); font-weight:500}   /* (his call, 23 Oct) words, never a link, never underlined; amber by preview-finesse.css */
.pvr-plan .pvp-mine{color:var(--ink); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px}
.pvr-plan .pvp-mine:hover{text-decoration-color:currentColor}
.pvr-plan .pv-tabs{gap:16px}
@media (max-width:1023px){
  .pvr-plan .pv-tabs{gap:12px}
  .pvr-plan .pv-tabs a{font-size:14px}
}
@media (max-width:374px){ .pvr-plan .pv-tabs{gap:8px} .pvr-plan .pv-tabs a{font-size:14px} }

/* ------------------------------------------------ R5.2 the filters, each named
   A wide window: "Celebration" and its chips (and on the Calendar and the Timeline, "Whose" beside them). A phone:
   the two as choices, half the row each. What is chosen, said under them, with the way to clear it. */

/* ------------------------------------------------ R5.3 a thing, the same everywhere (planRow)
   The tick's middle on the title's first line (15px on 21), its press 46 square without making the row taller; a
   question has the ask glyph in its place, no circle. One line under the title: whose, one dot, when; then where it
   belongs, 12 apart, no dots. */
.pvr-plan .pvp-rows{margin:0}
.pvr-plan .pvp-rows > li + li{border-top:1px solid var(--line)}
.pvr-plan .pvp-row{display:grid; grid-template-columns:24px minmax(0, 1fr); column-gap:12px; align-items:start; padding:12px 16px}
.pvr-plan .pvp-row.has-act{grid-template-columns:24px minmax(0, 1fr) auto}
.pvr-plan .pvp-lead{display:flex; align-items:center; justify-content:center; height:21px}
.pvr-plan .pvp-lead .pv-tickform{position:relative}
.pvr-plan .pvp-lead .pv-taskbox{position:relative; margin:0}
.pvr-plan .pvp-lead button.pv-taskbox::before{content:''; position:absolute; inset:-12px}
.pvr-plan .pvp-lead button.pv-taskbox:focus-visible{ outline-offset:2px; border-radius:50%}
.pvr-plan .pvp-lead button.pv-taskbox[aria-busy="true"]{opacity:.45; cursor:progress}
.pvr-plan .pvp-q{display:grid; place-items:center; width:24px; height:24px; color:var(--ink-2)}
.pvr-plan .pvp-tx{min-width:0}
.pvr-plan .pvp-t{display:block; font-size:16px; font-weight:500; line-height:1.4; color:var(--ink); overflow-wrap:anywhere}   /* the title whole: never clamped */
.pvr-plan a.pvp-t:hover{color:var(--wine)}
.pvr-plan .pvp-rest{display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; margin-top:0px; font-size:14px; line-height:1.45; color:var(--ink-2); overflow-wrap:anywhere}
.pvr-plan .pvp-meta{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin-top:4px; font-size:13px; line-height:1.45; color:var(--ink-2)}
.pvr-plan .pvp-main{display:inline-flex; flex-wrap:wrap; align-items:center; gap:0px 4px; min-width:0}
.pvr-plan .pvp-main .pv-dot{margin:0}
.pvr-plan .pvp-who{display:inline-flex; align-items:center; gap:4px; min-width:0; color:var(--ink-2)}
.pvr-plan .pvp-who > span{min-width:0; overflow-wrap:anywhere}
.pvr-plan .pvp-who.is-none{color:var(--ink-2)}
.pvr-plan .pvp-noone{flex:none; width:22px; height:22px; border:1.5px solid var(--line); border-radius:50%}
.pvr-plan .pvp-ctx{display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 12px; min-width:0}
.pvr-plan .pvp-day:hover .pv-daytag,.pvr-plan a.pvp-src:hover,.pvr-plan .pvp-tag:hover{color:var(--wine)}
.pvr-plan .pvp-team{display:inline-flex; align-items:center; gap:4px; color:var(--ink-2)}
.pvr-plan a.pvp-src{text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px}
.pvr-plan .pvp-tag{color:var(--ink-2)}
.pvr-plan .pvp-row.is-done .pvp-t{color:var(--ink-2); text-decoration:line-through}
.pvr-plan .pvp-act{align-self:center}
.pvr-plan .pvp-row.is-ticked .pvp-meta{color:var(--ink-2)}
.pvr-plan .pvp-meta .pvp-undo{position:relative; min-height:28px; margin:-4px 0; padding:0 8px}
.pvr-plan .pvp-meta .pvp-undo::before{content:''; position:absolute; inset:-8px -2px}
.pvr-plan .pvp-err{color:var(--danger); font-weight:500}
@media (max-width:1023px){
  .pvr-plan .pvp-row.has-act{grid-template-columns:24px minmax(0, 1fr)}
  .pvr-plan .pvp-row .pvp-act{grid-column:2; justify-self:start; margin-top:8px}
  .pvr-plan .pvp-ctx .pv-chip{font-size:13px}
}

/* ------------------------------------------------ R5.4 the List: a card a group, the long tail folded, Done quiet */
.pvr-plan .pvp-group{padding:4px 0}
.pvr-plan .pvp-group-h{display:flex; align-items:center; gap:8px; padding:12px 16px 4px; font-size:16px; font-weight:600}
.pvr-plan .pvp-group-h span{padding:0px 8px; border-radius:12px; background:var(--hover); font-size:13px; font-weight:500; color:var(--ink-2); font-variant-numeric:tabular-nums}
.pvr-plan .pvp-group.is-late .pvp-group-h{color:var(--danger)}
.pvr-plan .pvp-fold > .pv-fold-in{padding:0 0 4px; border-top:1px solid var(--line)}
.pvr-plan .pvp-fold .pvp-row,.pvr-plan .pvp-done .pvp-row{padding:12px 0}
.pvr-plan .pvp-done{margin:24px 0 0; padding-top:4px; border-top:1px solid var(--line)}
.pvr-plan .pvp-done > summary{display:flex; min-height:44px; color:var(--ink-2); font-size:14px}
.pvr-plan .pvp-done > summary:hover{color:var(--ink)}
.pvr-plan .pvp-done > .pv-fold-in{padding:0 0 4px}
.pvr-plan .pvp-done .pvp-t{color:var(--ink-2); text-decoration:line-through}
.pvr-plan .pvp-done .pv-taskbox.is-on{border-color:var(--ink-2); background:var(--ink-2)}
.pvr-plan .pvp-cols .pv-empty{margin:0 0 16px}
/* the side column: the next date, who it waits on (a wide window's second way to choose a person), what was
   settled lately */
.pvr-plan .pvp-untied{margin:4px 0 16px; font-size:14px; line-height:1.45; color:var(--ink-2)}
@media (max-width:1023px){
  /* the column's own rule is the one line above Settled lately (3 Oct, his word: "why do we have double lines here?") */
  .pvr-plan .pvp-group-h span{font-size:13px}
}

/* ------------------------------------------------ R5.5 the Calendar
   The month across the card. A day: its date (a constant height; today's number in the filled wine circle, the word
   beside it), then at most two soft strips, 4 apart (a celebration and what is tied to one in its colour at 14%,
   everything else the ink at 5%; a ring for a task, filled when done, the ask glyph for a question, a gold diamond
   for a date to keep; late in red words, done struck), then one edged strip "N more" that chooses the day. The day
   chosen: tinted, a fine wine ring inside its edge. Its agenda: on a wide card a full-width row under its week (the
   date at the left, the day's things at the right); below 860 under the whole month (CSS order). A phone: a month
   to choose a day in (the number, a mark for each thing) and the day's things under it. */
.pvr-plan .pvp-cal{padding:16px}
.pvr-plan .pvp-cal-head{display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); align-items:center; gap:8px; margin:0 0 12px}
.pvr-plan .pvp-cal-l{justify-self:start}
.pvr-plan .pvp-cal-head h2{font-size:20px; font-weight:600; text-align:center; white-space:nowrap}
.pvr-plan .pvp-cal-r{display:flex; gap:8px; justify-self:end}
.pvr-plan .pvp-grid{display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); border-top:1px solid var(--line)}
.pvr-plan .pvp-week{display:contents}
.pvr-plan .pvp-week > :first-child{border-left:1px solid var(--line)}
.pvr-plan .pvp-dow{padding:4px 8px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); font-size:13px; font-weight:500; color:var(--ink-2)}
.pvr-plan .pvp-cell{position:relative; display:flex; flex-direction:column; gap:4px; min-width:0; min-height:84px; padding:4px 4px 4px; border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
.pvr-plan .pvp-cell.is-out{background:var(--hover)}
.pvr-plan .pvp-cell[data-event]{box-shadow:none}
.pvr-plan .pvp-cell.is-sel{background:var(--wine-tint); outline:1.5px solid var(--wine); outline-offset:-1.5px}
.pvr-plan .pvp-d{display:flex; flex:none; align-items:center; gap:4px; height:26px}
.pvr-plan .pvp-num{display:grid; place-items:center; min-width:26px; height:26px; padding:0 4px; border-radius:12px; font-size:13px; font-weight:500; color:var(--ink-2); font-variant-numeric:tabular-nums}
.pvr-plan .pvp-num:hover{background:var(--hover); color:var(--ink)}
.pvr-plan .pvp-num:focus-visible{outline-offset:1px; border-radius:12px}
.pvr-plan .pvp-cell.is-past .pvp-num{color:var(--ink-2); font-weight:500}
.pvr-plan .pvp-cell.is-today .pvp-num{background:var(--wine); color:var(--surface); font-weight:600}
.pvr-plan .pvp-today-w{font-size:13px; font-weight:500; color:var(--wine)}
.pvr-plan .pvp-in{display:flex; flex-direction:column; gap:4px; min-width:0}
.pvr-plan .pvp-strip{display:flex; align-items:flex-start; gap:4px; min-width:0; padding:4px 4px; border-radius:6px; background:color-mix(in srgb, var(--ink) 5%, var(--surface)); font-size:13px; line-height:1.35; color:var(--ink)}
.pvr-plan .pvp-strip > span{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-width:0; overflow-wrap:anywhere}
.pvr-plan .pvp-strip[data-event]{background:var(--hover)}
.pvr-plan a.pvp-strip:hover{background:color-mix(in srgb, var(--ink) 9%, var(--surface))}
.pvr-plan a.pvp-strip[data-event]:hover{background:var(--hover)}
.pvr-plan a.pvp-strip:focus-visible{ outline-offset:1px}
.pvr-plan .pvp-strip.is-ev{font-weight:500}
.pvr-plan .pvp-strip .pv-tone{width:7px; height:7px; margin-top:4px}
.pvr-plan .pvp-ring{flex:none; width:7px; height:7px; margin-top:4px; border:1.25px solid var(--ink-2); border-radius:50%}
.pvr-plan .pvp-strip > svg{flex:none; margin-top:2.5px; color:var(--ink-2)}
.pvr-plan .pvp-dmk{flex:none; width:7px; height:7px; margin:4px 0px 0; background:var(--gold); transform:rotate(45deg)}
.pvr-plan .pvp-strip.is-late{color:var(--danger)}
.pvr-plan .pvp-strip.is-late .pvp-ring{border-color:var(--danger)}
.pvr-plan .pvp-strip.is-done > span{color:var(--ink-2); text-decoration:line-through}
.pvr-plan .pvp-strip.is-done .pvp-ring{border-color:var(--ink-2); background:var(--ink-2)}
.pvr-plan .pvp-strip.pvp-more{display:block; padding:0px 4px; border:1px solid var(--line); background:var(--surface); font-weight:500; color:var(--wine)}
.pvr-plan a.pvp-strip.pvp-more:hover{border-color:var(--line); background:var(--hover)}
.pvr-plan .pvp-marks{display:none}
/* the chosen day's agenda: under its week on a wide card, under the month below that */
.pvr-plan .pvp-wkag{grid-column:1 / -1; min-width:0}
.pvr-plan .pvp-wkag[hidden],.pvr-plan .pvp-agenda[hidden]{display:none}
@container (max-width:859px){ .pvr-plan .pvp-wkag{order:1; padding-top:24px} }
.pvr-plan .pvp-agenda-h{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:0 0 8px; font-size:16px; font-weight:600; line-height:1.35}
.pvr-plan .pvp-agenda-h .pvp-today-w{font-size:13px}
.pvr-plan .pvp-agenda-h:focus{outline:none}
.pvr-plan .pvp-ag-add{margin:0 0 12px}
.pvr-plan .pvp-ag-ms{display:grid; gap:4px; margin:0 0 12px; font-size:14px; line-height:1.45; color:var(--ink-2)}
.pvr-plan .pvp-ag-ms li{display:flex; align-items:baseline; gap:8px; min-width:0; overflow-wrap:anywhere}
.pvr-plan .pvp-ag-ms .pvp-dmk{align-self:flex-start; margin-top:8px}
.pvr-plan .pvp-ag-ms a:hover{color:var(--wine)}
.pvr-plan .pvp-agenda .pvp-rows{border-top:1px solid var(--line)}
.pvr-plan .pvp-agenda .pvp-row{padding:12px 0}
.pvr-plan .pvp-agenda .pvp-row.has-act{grid-template-columns:24px minmax(0, 1fr)}
.pvr-plan .pvp-agenda .pvp-act{grid-column:2; justify-self:start; margin-top:8px}
.pvr-plan .pvp-ag-none > p{font-size:14px; line-height:1.5; color:var(--ink-2)}
.pvr-plan .pvp-ag-acts{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.pvr-plan .pvp-undated{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:16px 0 0; padding-top:12px; border-top:1px solid var(--line); font-size:14px; line-height:1.45; color:var(--ink-2)}
.pvr-plan .pvp-cal > .pvp-untied{margin:16px 0 0}
@container (min-width:860px){
  .pvr-plan .pvp-wkag{border-right:1px solid var(--line); border-bottom:1px solid var(--line); border-left:1px solid var(--line); background:var(--surface)}
  .pvr-plan .pvp-agenda{display:grid; grid-template-columns:200px minmax(0, 1fr); gap:0 24px; padding:16px 16px 8px}
  .pvr-plan .pvp-ag-side{min-width:0}
  .pvr-plan .pvp-agenda-h{flex-direction:column; align-items:flex-start; gap:0px}
  .pvr-plan .pvp-ag-main{min-width:0; padding-bottom:4px}
  .pvr-plan .pvp-agenda .pvp-rows{border-top:0}
  .pvr-plan .pvp-ag-ms + .pvp-rows{border-top:1px solid var(--line)}
  .pvr-plan .pvp-agenda .pvp-row:first-child{padding-top:0px}
  .pvr-plan .pvp-ag-ms + .pvp-rows .pvp-row:first-child{padding-top:12px}
  .pvr-plan .pvp-agenda .pvp-row.has-act{grid-template-columns:24px minmax(0, 1fr) auto}
  .pvr-plan .pvp-agenda .pvp-act{grid-column:auto; margin-top:0}
  .pvr-plan .pvp-ag-none > p{margin-top:0px}
}
@media (max-width:1023px){
  /* the month runs to the screen's edges, so seven days have 44 each at 320 */
  .pvr-plan .pvp-cal{margin-inline:-16px; padding:12px 0 16px; border-inline:0; border-radius:0}
  .pvr-plan .pvp-cal-head,.pvr-plan .pvp-wkag,.pvr-plan .pvp-cal > .pvp-undated,.pvr-plan .pvp-cal > .pvp-untied{margin-inline:16px}
  .pvr-plan .pvp-cal-head h2{font-size:16px}
  .pvr-plan .pvp-week > :first-child{border-left:0}
  .pvr-plan .pvp-week > :last-child{border-right:0}
  .pvr-plan .pvp-dow{padding:4px 0; font-size:13px; text-align:center}
  .pvr-plan .pvp-cell{align-items:center; justify-content:flex-start; gap:4px; min-height:52px; padding:4px 0 4px}
  .pvr-plan .pvp-d{justify-content:center}
  .pvr-plan .pvp-num{min-width:28px; height:28px; font-size:14px}
  .pvr-plan .pvp-num::after{content:''; position:absolute; inset:0}
  .pvr-plan .pvp-num:focus-visible{outline:none}
  .pvr-plan .pvp-cell:has(.pvp-num:focus-visible){outline:2px solid var(--wine); outline-offset:-7px; border-radius:var(--r-ctl)}   /* inside the chosen day's ring, so the two never look alike */
  .pvr-plan .pvp-d .pvp-today-w,.pvr-plan .pvp-in{display:none}
  .pvr-plan .pvp-cell[data-event]{box-shadow:none}
  .pvr-plan .pvp-marks{display:flex; align-items:center; justify-content:center; gap:4px; min-height:13px}
  .pvr-plan .pvp-mk{width:6px; height:6px; border:1.25px solid var(--ink-2); border-radius:50%}
  .pvr-plan .pvp-mk.is-done{border-color:var(--ink-2); background:var(--ink-2)}
  .pvr-plan .pvp-mk.is-late{border-color:var(--danger)}
  .pvr-plan .pvp-marks b{min-width:22px; padding:0px 4px; border-radius:6px; background:var(--hover); font-size:13px; font-weight:500; line-height:15px; text-align:center; color:var(--ink-2); font-variant-numeric:tabular-nums}
  .pvr-plan .pvp-undated .pv-btn{flex:none}
}

/* ------------------------------------------------ R5.6 the Timeline: the road (A), the month drawn large (B), the detail (C)
   A, a wide window only: the whole road on one line, each month a link (its name, "13 due" under it; the chosen one
   tinted and underlined in wine), today's wine line, the wedding's days tinted with a tick for each celebration,
   every date to keep a gold diamond; a word above the line only where it touches nothing. B, a wide card only
   (900 and over, so a month has 28 a day or more and two markers on neighbouring days never touch): the chosen
   month, a tick each day and the number under each Monday; the dates to keep (gold diamonds) and the celebrations
   (their dots) named above the line, up to four rows, each hanging by a fine line to its day; under the line a
   disc for each date with things due (their number; a red ring when one is late; a tick when all are done; filled
   wine when chosen); "Today" and "The wedding" at the foot. C, at every width: the chronology of what is chosen,
   a date's dates to keep first and stronger, then its things. A phone: no A or B; a head to step month by month. */
.pvr-plan .pvp-tl{padding:16px}
/* B */
/* C */
.pvr-plan .pvp-sc-all[hidden],.pvr-plan .pvp-date[hidden],.pvr-plan .pvp-nowrule[hidden],.pvr-plan .pvp-lateline[hidden]{display:none}
.pvr-plan .pvp-date{display:grid; grid-template-columns:64px minmax(0, 1fr); gap:12px; padding:12px 0; border-top:1px solid var(--line)}
.pvr-plan .pvp-dates > .pvp-date:first-child,.pvr-plan .pvp-nowrule + .pvp-date{border-top:0}
.pvr-plan .pvp-date-d{font-size:14px; font-weight:500; line-height:22px; color:var(--ink-2); white-space:nowrap; font-variant-numeric:tabular-nums}
.pvr-plan .pvp-things{display:grid; gap:8px; min-width:0}
.pvr-plan .pvp-thing,.pvr-plan .pvp-mile{display:grid; grid-template-columns:16px minmax(0, 1fr); gap:8px; align-items:start; border-radius:6px}
.pvr-plan .pvp-thing:target,.pvr-plan .pvp-mile:target,.pvr-plan .pvp-date:target{background:var(--wine-tint); box-shadow:0 0 0 6px var(--wine-tint)}
.pvr-plan .pvp-pt-k{width:10px; height:10px; margin:4px 0 0 4px; border:1.5px solid var(--ink-2); border-radius:50%}
.pvr-plan .pvp-pt-k.is-done{border-color:var(--ink-2); background:var(--ink-2)}
.pvr-plan .pvp-pt-k.is-late{border:2px solid var(--danger)}
.pvr-plan .pvp-thing-q{display:grid; place-items:center; height:21px; color:var(--ink-2)}
.pvr-plan .pvp-thing-tx{display:flex; flex-direction:column; gap:4px; min-width:0}
.pvr-plan .pvp-thing-m{display:flex; flex-wrap:wrap; align-items:center; gap:0px 4px; font-size:13px; line-height:1.45; color:var(--ink-2)}
.pvr-plan .pvp-thing-m .pv-dot{margin:0}
.pvr-plan .pvp-thing.is-done .pvp-t{color:var(--ink-2); font-weight:400; text-decoration:line-through}
.pvr-plan .pvp-tl > .pvp-untied{margin:16px 0 0}
@container (min-width:860px){
  .pvr-plan .pvp-thing-tx{flex-direction:row; align-items:baseline; justify-content:space-between; gap:4px 16px}
  .pvr-plan .pvp-thing-tx > .pvp-t{min-width:0}
  .pvr-plan .pvp-thing-m{flex:none; max-width:44%; justify-content:flex-end; text-align:right}
  .pvr-plan .pvp-things{gap:8px}
}
@media (max-width:1023px){
  .pvr-plan .pvp-tl{padding:12px 16px 16px}
  .pvr-plan .pvp-date{grid-template-columns:50px minmax(0, 1fr); gap:8px}
}

/* ------------------------------------------------ R5.7 Questions & decisions
   Open or settled, a two-way choice under the filters (the house's chips, their counts). Open: what waits on you,
   what is to be made final, what waits on each of the others (the face once, at the head; "asked by you" there
   when one person asked them all). A row: the question whole; under it when and how it stands, its replies, and
   (quietest) who asked, spaced, no dots; its next step a small edged control at the right (under the lines on a
   phone). Settled: a decision's own words lead; an answer's words in ink under its question, which is quiet. A row
   returned to from its page is tinted for a moment. */
.pvr-plan .pvp-halves{margin:0 0 16px}
.pvr-plan .pvp-ask{padding:4px 0}
.pvr-plan .pvp-ask-h{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; min-width:0; padding:12px 16px 4px; font-size:16px; font-weight:600; line-height:1.35}
.pvr-plan .pvp-ask-hl{display:inline-flex; align-items:center; gap:8px; min-width:0; max-width:100%}
.pvr-plan .pvp-ask-hl > span{min-width:0; overflow-wrap:anywhere}
.pvr-plan .pvp-ask-h em{flex:none; padding:0px 8px; border-radius:12px; background:var(--hover); font-size:13px; font-weight:500; font-style:normal; color:var(--ink-2); font-variant-numeric:tabular-nums}
.pvr-plan .pvp-ask-h .pvp-ask-by{margin-left:4px; font-size:14px; font-weight:400; color:var(--ink-2)}
.pvr-plan .pvp-arow{display:grid; grid-template-columns:minmax(0, 1fr); column-gap:16px; align-items:center; padding:12px 16px}
.pvr-plan .pvp-arow.has-act{grid-template-columns:minmax(0, 1fr) auto}
.pvr-plan .pvp-arow:target:not(.is-seen){background:var(--wine-tint)}
.pvr-plan .pvp-ameta{gap:4px 12px; margin-top:4px}
.pvr-plan .pvp-qdue{color:var(--ink-2)}
.pvr-plan .pvp-qrep{color:var(--ink-2)}
.pvr-plan .pvp-qby{color:var(--ink-2)}
.pvr-plan .pvp-aq{display:block; font-size:14px; line-height:1.45; color:var(--ink-2); overflow-wrap:anywhere}
.pvr-plan a.pvp-aq:hover{color:var(--wine)}
.pvr-plan .pvp-ans{margin-top:4px; font-size:16px; font-weight:500; line-height:1.45; color:var(--ink); overflow-wrap:anywhere}
@media (max-width:1023px){
  .pvr-plan .pvp-arow.has-act{grid-template-columns:minmax(0, 1fr)}
  .pvr-plan .pvp-arow .pvp-act{justify-self:start; margin-top:8px}
  .pvr-plan .pvp-row,.pvr-plan .pvp-arow{padding-inline:16px}
  .pvr-plan .pvp-group-h,.pvr-plan .pvp-ask-h{padding-inline:16px}
  .pvr-plan .pvp-ask-h em{font-size:13px}
}

/* ------------------------------------------------ R5.8 a phone: every small button pressed over 44, its look unchanged */
@media (max-width:1023px){
  .pvr-plan .pv-btn.pv-sm{position:relative}
  .pvr-plan .pv-btn.pv-sm::after{content:''; position:absolute; inset:-5px 0}
}

/* ------------------------------------------------ R5.9 movement, only for those who want it */
@media (prefers-reduced-motion:no-preference){
  .pvr-plan .pvp-lead .pv-taskbox{transition:background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, opacity var(--dur-fast) ease}
  .pvr-plan .pvp-arow{transition:background-color var(--dur-slow) ease}
}

/* ------------------------------------------------ R5.10 a second look, at his window and on a phone
   The head's sentence never breaks inside "3 of them late". */
.pvr-plan .pvp-late{white-space:nowrap}

/* ------------------------------------------------ R5.11 the Calendar and the Timeline composed again (2 October, his word:
   "keep the calendar grid continuous"; "one primary representation of time")
   The Calendar: a wide window has the whole month, and beside it one panel for the chosen day; choosing a day moves
   nothing in the month. Narrower, and on a phone, the panel is under the whole month (R5.5). */
@container (min-width:860px){
  .pvr-plan .pvp-cal-head{margin-right:276px}
  .pvr-plan .pvp-grid{position:relative; margin-right:276px}
  .pvr-plan .pvp-wkag{position:absolute; top:0; left:calc(100% + 20px); width:256px; max-height:100%; overflow-y:auto; border:0; border-radius:12px; background:var(--surface)}   /* as tall as what it holds, never taller than the month */
  .pvr-plan .pvp-agenda{display:flex; flex-direction:column; gap:0; padding:12px 16px 12px}
  .pvr-plan .pvp-ag-side{display:contents}
  .pvr-plan .pvp-agenda-h{order:0; flex-direction:row; align-items:baseline; gap:0px 8px; margin:0 0 8px}
  .pvr-plan .pvp-ag-main{order:1; padding-bottom:0}
  .pvr-plan .pvp-ag-add{order:2; align-self:flex-start; margin:12px 0 0}
  .pvr-plan .pvp-agenda .pvp-rows,.pvr-plan .pvp-ag-ms + .pvp-rows{border-top:1px solid var(--line)}
  .pvr-plan .pvp-agenda .pvp-row:first-child,.pvr-plan .pvp-ag-ms + .pvp-rows .pvp-row:first-child{padding-top:12px}
  .pvr-plan .pvp-agenda .pvp-row.has-act{grid-template-columns:24px minmax(0, 1fr)}
  .pvr-plan .pvp-agenda .pvp-act{grid-column:2; justify-self:start; margin-top:8px}
  .pvr-plan .pvp-ag-none > p{margin:0}
  .pvr-plan .pvp-cell{padding:4px 4px 4px}
  .pvr-plan .pvp-strip{gap:4px; padding:4px 4px}
  .pvr-plan .pvp-strip .pvp-ring{display:none}   /* a day is about 93px here: a thing to do is the plain strip, a question keeps its glyph, a date to keep its diamond */
}

/* ------------------------------------------------ R5.12 the Timeline as one line of the dates that matter (2 October)
   Today, the dates to keep, the wedding. A wide window: left to right, a date above the line, its name under it, and on
   each stretch between two stops one small count that opens that stretch's work in the panel below. Narrower and on a
   phone: the same stops top to bottom. Gold is a date to keep, wine is today, the wedding and what is chosen. */
.pvr-plan .pvp-sg-c{position:relative; display:inline-flex; align-items:center; height:24px; padding:0 8px; border:1px solid var(--line); border-radius:12px; background:var(--surface); font-size:13px; font-weight:400; line-height:1; color:var(--ink-2); white-space:nowrap; font-variant-numeric:tabular-nums}
.pvr-plan .pvp-sg-c::after{content:''; position:absolute; inset:-10px -4px}
.pvr-plan .pvp-sg-c:hover{border-color:var(--wine); color:var(--wine)}
.pvr-plan .pvp-sg-c.is-on{border-color:var(--wine); background:var(--wine); color:var(--surface)}
.pvr-plan .pvp-sg-c.is-late{border-color:color-mix(in srgb, var(--danger) 45%, var(--surface)); color:var(--danger)}
.pvr-plan .pvp-sg-c.is-late.is-on{border-color:var(--danger); background:var(--danger); color:var(--surface)}
.pvr-plan .pvp-sp{margin:24px 0 0; padding:16px 0 0; border-top:1px solid var(--line)}
.pvr-plan .pvp-sp-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:0px 12px; margin:0 0 4px}
.pvr-plan .pvp-sp-h{font-size:16px; font-weight:600; line-height:1.35}
.pvr-plan .pvp-sp-m,.pvr-plan .pvp-sp-none{font-size:14px; line-height:1.45; color:var(--ink-2)}
@container (min-width:860px){
  .pvr-plan .pvp-sp{scroll-margin-top:100vh}
}
@media (max-width:1023px){
  .pvr-plan .pvp-sg-c{height:30px; padding:0 12px; border-radius:12px; font-size:13px}
}

/* ------------------------------------------------ R5.13 the Timeline: a light for every day to the wedding (2 October)
   A month is a row of its days. A day gone by is lit; today wears a wine ring; a day with work is a darker point,
   larger with more due; a date to keep is a gold diamond, named under its day; the wedding days carry their
   celebrations' colours. Above: the days left, and what comes next. Under: one panel for what is pressed. */
.pvr-plan .pvp-keep{display:none; margin:16px 0 0; padding:0; list-style:none}
.pvr-plan .pvp-keep a{display:grid; grid-template-columns:14px 58px minmax(0, 1fr); gap:0 8px; align-items:baseline; min-height:44px; padding:12px 0; border-top:1px solid var(--line); font-size:14px; line-height:1.4; color:var(--ink)}
.pvr-plan .pvp-keep b{font-weight:500; white-space:nowrap}
.pvr-plan .pvp-keep em{margin-left:8px; font-style:normal; font-size:13px; color:var(--ink-2)}
.pvr-plan .pvp-keep .pv-tone{align-self:center}
.pvr-plan .pvp-mk-d{display:block; align-self:center; width:9px; height:9px; margin:0 0px; border-radius:6px; background:var(--gold); transform:rotate(45deg)}
.pvr-plan .pvp-thing.is-ms{display:grid; grid-template-columns:12px minmax(0, 1fr); gap:8px; align-items:start}
.pvr-plan .pvp-thing.is-ms .pvp-mk-d,.pvr-plan .pvp-thing.is-ms .pv-tone{margin-top:4px}
.pvr-plan .pvp-thing.is-ms .pvp-t{font-weight:500}
.pvr-plan .pvp-tl5 .pvp-sp{margin-top:24px}
@container (max-width:859px){
  .pvr-plan .pvp-keep{display:block}
}

/* ------------------------------------------------ R5.14 the Timeline by topic (2 October, his brief): a row a #tag, time across them
   A stable column of names at the left; months, one Today line and the wedding's band over every row; the dates to
   keep in one lane above the topics; a thing a point on its due date (a ring a task, a rounded square a question, a
   disc with a number several on one date), neutral unless late or pressed. Narrow: the topics as a list, in words. */
.pvr-plan .pvp-tl5{padding:16px 24px 24px}
.pvr-plan .pvp-tk-top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; margin:0 0 8px}
.pvr-plan .pvp-tk-cd{font-size:14px; line-height:1.45; color:var(--ink-2)}
.pvr-plan .pvp-ch{position:relative; --lab:156px; --gap:16px}
.pvr-plan .pvp-ch-bg{position:absolute; left:calc(var(--lab) + var(--gap)); right:0; top:0; bottom:0; pointer-events:none}
.pvr-plan .pvp-ch-bg i{position:absolute; top:20px; bottom:0; width:1px; background:var(--line)}
.pvr-plan .pvp-ch-bg .pvp-ch-wed{background:var(--wine-tint); border-radius:6px}
.pvr-plan .pvp-ch-bg .pvp-ch-today{top:18px; width:1.5px; margin-left:0px; background:var(--wine)}
.pvr-plan .pvp-ch-head,.pvr-plan .pvp-ch-ms{position:relative; margin-left:calc(var(--lab) + var(--gap))}
.pvr-plan .pvp-ch-head{height:44px}
.pvr-plan .pvp-ch-mo{position:absolute; top:20px; padding-left:8px; font-size:13px; font-weight:500; line-height:22px; color:var(--ink-2); white-space:nowrap}
.pvr-plan .pvp-ch-now{position:absolute; top:0; transform:translateX(-50%); font-size:13px; font-weight:500; line-height:18px; color:var(--wine); white-space:nowrap}
.pvr-plan .pvp-ms5{position:absolute; z-index:1; top:13px; width:10px; height:10px; margin:-4px 0 0 -4px; border-radius:6px; background:var(--gold); box-shadow:0 0 0 2px var(--surface); transform:rotate(45deg)}
.pvr-plan .pvp-ms5::after{content:''; position:absolute; inset:-8px}
.pvr-plan .pvp-ms5.is-past{background:color-mix(in srgb, var(--ink) 28%, var(--surface))}
.pvr-plan .pvp-ms5.is-on{box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px var(--wine)}
.pvr-plan .pvp-tps{margin:0; padding:0; list-style:none}
.pvr-plan .pvp-tp{position:relative; display:grid; grid-template-columns:var(--lab) minmax(0, 1fr); gap:0 var(--gap); align-items:center; min-height:40px; border-top:1px solid var(--line)}
.pvr-plan .pvp-tp-n{display:flex; align-items:baseline; gap:8px; min-width:0; margin-left:-8px; padding:8px 8px; border-radius:var(--r-ctl); font-size:14px; line-height:22px; color:var(--ink)}
.pvr-plan .pvp-tp-n b{min-width:0; overflow:hidden; font-weight:500; text-overflow:ellipsis; white-space:nowrap}
.pvr-plan .pvp-tp-n em{flex:none; font-style:normal; font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.pvr-plan .pvp-tp-w{display:none}
.pvr-plan .pvp-tp-n:hover{background:var(--hover)}
.pvr-plan .pvp-tp.is-on .pvp-tp-n{background:var(--wine-tint)}
.pvr-plan .pvp-tp.is-on .pvp-tp-n b{color:var(--wine)}
.pvr-plan .pvp-tp-t{position:relative; height:40px}
.pvr-plan .pvp-mk5{position:absolute; z-index:1; top:50%; display:grid; place-items:center; box-sizing:border-box; width:14px; height:14px; margin:-8px 0 0 -8px; border:1.5px solid var(--ink-2); border-radius:50%; background:var(--surface); box-shadow:0 0 0 2px var(--surface); color:var(--ink)}
.pvr-plan .pvp-mk5::after{content:''; position:absolute; inset:-12px -5px}
.pvr-plan .pvp-mk5.is-q{border-radius:6px}
.pvr-plan .pvp-mk5.is-n{width:22px; height:22px; margin:-12px 0 0 -12px; border:0; background:color-mix(in srgb, var(--ink) 11%, var(--surface)); font-size:13px; line-height:1; font-variant-numeric:tabular-nums}
.pvr-plan .pvp-mk5.is-done{border-color:var(--line); background:var(--hover); color:var(--ink-2)}
.pvr-plan .pvp-mk5.is-late{border-color:var(--danger)}
.pvr-plan .pvp-mk5.is-n.is-late{box-shadow:0 0 0 2px var(--surface), inset 0 0 0 1.5px var(--danger); color:var(--danger)}
.pvr-plan .pvp-mk5:hover{z-index:2; border-color:var(--wine)}
.pvr-plan .pvp-mk5.is-n:hover{box-shadow:0 0 0 2px var(--surface), inset 0 0 0 1.5px var(--wine)}
.pvr-plan .pvp-mk5.is-on,.pvr-plan .pvp-mk5.is-n.is-on{z-index:3; border-color:var(--wine); background:var(--wine); box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px var(--wine); color:var(--surface)}
.pvr-plan .pvp-tk-foot{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:12px 0 0; padding-top:12px; border-top:1px solid var(--line); font-size:13px; line-height:1.45; color:var(--ink-2)}
.pvr-plan .pvp-sp-acts{display:flex; flex-wrap:wrap; gap:8px; margin-left:auto}
.pvr-plan .pvp-sp-h .pv-dot{margin:0 8px; color:var(--ink-2)}
.pvr-plan .pvp-date-loose{border-top:1px solid var(--line)}
@container (max-width:859px){
  .pvr-plan .pvp-tl5{padding:16px}
  .pvr-plan .pvp-ch-bg,.pvr-plan .pvp-ch-head,.pvr-plan .pvp-ch-ms,.pvr-plan .pvp-tp-t{display:none}
  .pvr-plan .pvp-tp{grid-template-columns:minmax(0, 1fr); min-height:56px}
  .pvr-plan .pvp-tp-n{display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:0 12px; margin:0; padding:8px 4px}
  .pvr-plan .pvp-tp-n b{font-size:16px}
  .pvr-plan .pvp-tp-w{display:block; grid-column:1 / -1; font-size:13px; line-height:18px; color:var(--ink-2)}
  .pvr-plan .pvp-keep{display:block}
}

/* ------------------------------------------------ R5.15 the Timeline's older character, kept in today's page (2 October, his word:
   "coloured topic lines, matching markers, compact rows and a softly framed surface")
   A topic wears the house's own colour for its tag: on its swatch, on the soft line that joins its first date to its
   last, and on its points. The chart is one white, softly rounded surface on warm paper. The dates to keep are
   diamonds on the scale; the next one is said above the chart. */
.pvr-plan .pvp-tl5{padding:12px 16px 16px; background:var(--surface)}
.pvr-plan .pvp-tk-top{margin:0px 4px 12px}
.pvr-plan .pvp-tk-cd .pv-dot{margin:0 8px; color:var(--ink-2)}
.pvr-plan .pvp-tk-cd em{margin-left:4px; font-style:normal; color:var(--ink-2)}
.pvr-plan .pvp-tk-nx{color:var(--ink); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px}
.pvr-plan .pvp-tk-nx:hover{color:var(--wine); text-decoration-color:currentColor}
.pvr-plan .pvp-ch{--lab:206px; --gap:14px; padding:4px 24px 4px 16px; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent), 0 10px 24px -18px color-mix(in srgb, var(--ink) 30%, transparent)}
.pvr-plan .pvp-ch-bg{left:calc(18px + var(--lab) + var(--gap)); right:24px; top:4px; bottom:4px}
.pvr-plan .pvp-ch-bg i{top:36px; bottom:0}
.pvr-plan .pvp-ch-bg .pvp-ch-today{top:36px; bottom:20px}
.pvr-plan .pvp-ch-head{height:36px; border-bottom:1px solid var(--line)}
.pvr-plan .pvp-ch-mo{top:9px; font-size:13px; font-weight:500; color:var(--ink-2)}
.pvr-plan .pvp-ms5{top:36px}
.pvr-plan .pvp-tp{min-height:38px; border-top:0; border-bottom:1px solid var(--line)}
.pvr-plan .pvp-tp:last-child{border-bottom:0}
.pvr-plan .pvp-tp-n{display:grid; grid-template-columns:9px minmax(0, 1fr) auto; gap:0 8px; align-items:center; margin-left:-8px; padding:4px 8px}
.pvr-plan .pvp-tp-sw{display:block; width:9px; height:9px; border-radius:6px; background:var(--hover)}
.pvr-plan .pvp-tp-n b{font-size:14px}
.pvr-plan .pvp-tp.is-on{background:var(--hover); box-shadow:none}
.pvr-plan .pvp-tp.is-on .pvp-tp-n{background:none}
.pvr-plan .pvp-tp.is-on .pvp-tp-n b{color:var(--ink)}
.pvr-plan .pvp-tp.is-fin .pvp-tp-n b{font-weight:400; color:var(--ink-2)}
.pvr-plan .pvp-tp-t{height:38px}
.pvr-plan .pvp-tp-ln{position:absolute; top:50%; height:4px; margin-top:-2px; border-radius:6px; background:var(--hover)}
.pvr-plan .pvp-mk5,.pvr-plan .pvp-mk5.is-q{width:14px; height:14px; margin:-8px 0 0 -8px; border:var(--line); border-radius:50%; background:var(--surface); box-shadow:none; color:var(--ink)}
.pvr-plan .pvp-mk5.is-n{width:20px; height:20px; margin:-8px 0 0 -8px; border:var(--line); background:var(--surface); font-size:13px}
.pvr-plan .pvp-mk5.is-done,.pvr-plan .pvp-mk5.is-n.is-done{border-color:var(--line); background:var(--hover); color:var(--ink-2)}
.pvr-plan .pvp-mk5.is-late,.pvr-plan .pvp-mk5.is-n.is-late{border-color:var(--danger); background:var(--danger); box-shadow:none; color:var(--surface)}
.pvr-plan .pvp-mk5:hover,.pvr-plan .pvp-mk5.is-n:hover{border-color:var(--line); box-shadow:none}
.pvr-plan .pvp-mk5.is-late:hover{border-color:var(--danger)}
.pvr-plan .pvp-mk5.is-on,.pvr-plan .pvp-mk5.is-n.is-on{border-color:var(--line); background:var(--hover); box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--wine); color:var(--surface)}
.pvr-plan .pvp-mk5.is-late.is-on{border-color:var(--danger); background:var(--danger)}
.pvr-plan .pvp-ch-wl{position:absolute; top:4px; font-size:13px; font-weight:500; line-height:18px; color:var(--wine); white-space:nowrap}
.pvr-plan .pvp-ch-wl:hover,.pvr-plan .pvp-ch-wl.is-on{text-decoration:underline; text-underline-offset:3px}
.pvr-plan .pvp-tk-foot{margin:12px 4px 0; padding-top:0; border-top:0}
.pvr-plan .pvp-tl5 .pvp-sp{margin:16px 4px 0}
@container (max-width:859px){
  .pvr-plan .pvp-tl5{padding:12px}
  .pvr-plan .pvp-ch{padding:0px 12px}
  .pvr-plan .pvp-tp{min-height:56px}
  .pvr-plan .pvp-tp-n{grid-template-columns:9px minmax(0, 1fr) auto; margin:0; padding:8px 0}
  .pvr-plan .pvp-tp-w{grid-column:2 / -1}
  .pvr-plan .pvp-tp.is-on{box-shadow:none}
}

/* ------------------------------------------------ R5.16 his five points on the Timeline (2 October, with his own picture)
   "N open" under the topic's name; Today named at the top of its line; the dates to keep named over their diamonds,
   always, and in full (with the day) when pointed at, focused or chosen; a month's name set on its own line, so it
   stands over the diamond of a month's end; a row whose dates lie past the scale, or that has things with no date,
   says so in the row; and when something is chosen a bar stays in view until its detail is reached. */
.pvr-plan .pvp-tl5{overflow:visible}
.pvr-plan .pvp-ch{--hh:calc(60px + var(--rows, 1) * 18px)}
.pvr-plan .pvp-ch-head{height:var(--hh)}
.pvr-plan .pvp-ch-mo{top:22px; padding:0; transform:translateX(-50%)}
.pvr-plan .pvp-ch-head .pvp-ch-now{top:2px}
.pvr-plan .pvp-ch-bg i{top:46px}
.pvr-plan .pvp-ch-bg .pvp-ch-wed{top:var(--hh)}
.pvr-plan .pvp-ch-bg .pvp-ch-today{top:22px; bottom:0}
.pvr-plan .pvp-ml6{position:absolute; z-index:2; bottom:calc(11px + var(--row) * 18px); padding:0 4px; background:var(--surface); font-size:13px; line-height:18px; color:var(--ink-2); white-space:nowrap; transform:translateX(-50%)}
.pvr-plan .pvp-ml6.is-l{margin-left:-8px; transform:none}
.pvr-plan .pvp-ml6.is-r{margin-left:8px; transform:translateX(-100%)}
.pvr-plan .pvp-ml6:hover,.pvr-plan .pvp-ml6.is-on{color:var(--wine)}
.pvr-plan .pvp-ml6-ld{position:absolute; z-index:1; bottom:4px; width:1px; height:calc(7px + var(--row) * 18px); background:color-mix(in srgb, var(--gold) 60%, var(--surface))}
.pvr-plan .pvp-ms5{top:var(--hh); display:grid; place-items:center; width:18px; height:18px; margin:-8px 0 0 -8px; border-radius:0; background:none; box-shadow:none; transform:none}
.pvr-plan .pvp-ms5.is-past,.pvr-plan .pvp-ms5.is-on{background:none; box-shadow:none}
.pvr-plan .pvp-ms5 > i{display:block; width:10px; height:10px; border-radius:6px; background:var(--gold); box-shadow:0 0 0 2px var(--surface); transform:rotate(45deg)}
.pvr-plan .pvp-ms5.is-past > i{background:color-mix(in srgb, var(--ink) 28%, var(--surface))}
.pvr-plan .pvp-ms5.is-on > i{box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px var(--wine)}
.pvr-plan .pvp-ms5::after{inset:-6px}
.pvr-plan .pvp-ms5-l{position:absolute; z-index:6; top:calc(100% + 5px); left:50%; display:none; padding:4px 8px; border:1px solid var(--line); border-radius:6px; background:var(--surface); box-shadow:0 6px 16px -10px color-mix(in srgb, var(--ink) 45%, transparent); font-size:13px; line-height:18px; color:var(--ink-2); white-space:nowrap; transform:translateX(-50%)}
.pvr-plan .pvp-ms5-l b{font-weight:500; color:var(--ink)}
.pvr-plan .pvp-ms5.is-r .pvp-ms5-l{left:auto; right:-4px; transform:none}
.pvr-plan .pvp-ms5.is-l .pvp-ms5-l{left:-4px; transform:none}
.pvr-plan .pvp-ms5:hover .pvp-ms5-l,.pvr-plan .pvp-ms5:focus-visible .pvp-ms5-l,.pvr-plan .pvp-ms5.is-on .pvp-ms5-l{display:block}
.pvr-plan .pvp-ms5:hover,.pvr-plan .pvp-ms5:focus-visible{z-index:7}
.pvr-plan .pvp-tp-out{position:absolute; z-index:1; top:50%; padding:0px 8px; border-radius:12px; background:var(--surface); font-size:13px; line-height:20px; color:var(--ink-2); white-space:nowrap; transform:translateY(-50%)}
.pvr-plan .pvp-tp.is-on .pvp-tp-out{background:none}
.pvr-plan .pvp-tp-out:hover{color:var(--wine); text-decoration:underline; text-underline-offset:3px}
.pvr-plan .pvp-tk-go{position:sticky; z-index:5; bottom:16px; display:flex; justify-content:center; margin:12px 0 0; pointer-events:none}
.pvr-plan .pvp-tk-go a{pointer-events:auto; background:var(--surface); box-shadow:0 8px 20px -12px color-mix(in srgb, var(--ink) 55%, transparent)}
.pvr-plan .pvp-tl5 .pvp-sp{scroll-margin-top:16px}
.pvr-plan .pvp-untied .pv-btn{margin-left:8px}
@container (min-width:860px){
  .pvr-plan .pvp-ch{--lab:150px}
  .pvr-plan .pvp-tp{min-height:46px}
  .pvr-plan .pvp-tp-t{height:46px}
  .pvr-plan .pvp-tp-n{grid-template-columns:9px minmax(0, 1fr); gap:0 8px; padding:4px 8px}
  .pvr-plan .pvp-tp-sw{grid-row:1}
  .pvr-plan .pvp-tp-n b{grid-row:1; line-height:20px}
  .pvr-plan .pvp-tp-n em{grid-column:2; grid-row:2; line-height:17px}
}
@container (max-width:859px){
  .pvr-plan .pvp-tk-go{bottom:76px}
  .pvr-plan .pvp-tl5 .pvp-sp{scroll-margin-top:64px}
}

/* ------------------------------------------------ R5.17 the foot of the Timeline put in order (2 October, his picture: "the alignment and the design seems way off at the bottom")
   The wedding is named at the top of its band, as today is at the top of its line, and nothing hangs under the last
   row; "later dates" ends before the band; everything outside the chart starts on the chart's own left edge; the bar
   that leads to the detail shows only while the detail is out of sight; one kind of button under the chart. */
.pvr-plan .pvp-ch{padding-bottom:4px}
.pvr-plan .pvp-ch-head .pvp-ch-wl{top:2px}
.pvr-plan .pvp-ch-bg .pvp-ch-wed{top:22px; border-radius:6px 6px 0 0}
.pvr-plan .pvp-tp-out{padding:0; background:none}
.pvr-plan .pvp-tk-top,.pvr-plan .pvp-tk-foot,.pvr-plan .pvp-tl5 .pvp-sp,.pvr-plan .pvp-tl5 > .pvp-untied,.pvr-plan .pvp-tl5 > .pvp-undated{margin-inline:16px 24px}
.pvr-plan .pvp-tk-foot .pv-btn.is-on{border-color:var(--wine); color:var(--wine)}
.pvr-plan .pvp-tk-go{display:none}
.pvr-plan .pvp-tk-go.is-up{display:flex}
@container (min-width:860px){
  .pvr-plan .pvp-sp-up{display:none}
}
@container (max-width:859px){
  .pvr-plan .pvp-tk-top,.pvr-plan .pvp-tk-foot,.pvr-plan .pvp-tl5 .pvp-sp,.pvr-plan .pvp-tl5 > .pvp-untied,.pvr-plan .pvp-tl5 > .pvp-undated,.pvr-plan .pvp-tl5 > .pvp-keep{margin-inline:12px}
}

/* ------------------------------------------------ R5.18 the rows short again (2 October, his word: "reduce the font size of the 1 open… it's causing each row to become long")
   The count under a topic's name is smaller and set tight, so a row is 38px as it was before the count moved down. */
@container (min-width:860px){
  .pvr-plan .pvp-tp{min-height:38px}
  .pvr-plan .pvp-tp-t{height:38px}
  .pvr-plan .pvp-tp-n{padding:4px 8px}
  .pvr-plan .pvp-tp-n b{font-size:14px; line-height:18px}
  .pvr-plan .pvp-tp-n em{font-size:12px; line-height:14px}
}

/* ------------------------------------------------ R5.19 the detail list set true (2 October, his picture: a date ran into the question mark)
   The date has a column wide enough for its longest ("Wed 30 Sep"), with clear room before the marker; a task's ring,
   a question's mark, a date-to-keep's diamond and a celebration's dot all sit on one centre, so every title starts on
   one line; a narrow window sets the date above its things. */
.pvr-plan .pvp-tl5 .pvp-date{grid-template-columns:96px minmax(0, 1fr); gap:16px}
.pvr-plan .pvp-tl5 .pvp-thing,.pvr-plan .pvp-tl5 .pvp-thing.is-ms{grid-template-columns:16px minmax(0, 1fr); gap:8px}
.pvr-plan .pvp-tl5 .pvp-thing > :first-child{justify-self:center}
.pvr-plan .pvp-tl5 .pvp-pt-k{margin:4px 0 0}
.pvr-plan .pvp-tl5 .pvp-thing-q{width:16px}
.pvr-plan .pvp-tl5 .pvp-thing.is-ms .pvp-mk-d{align-self:start; margin:4px 0 0}
.pvr-plan .pvp-tl5 .pvp-thing.is-ms .pv-tone{align-self:start; margin:8px 0 0}
@container (max-width:859px){
  .pvr-plan .pvp-tl5 .pvp-date{grid-template-columns:minmax(0, 1fr); gap:4px}
}


/* ------------------------------------------------ R5.20 a thing of the Plan on its own page (2 October, his word: "you didn't fix the individual tasks pages")
   One column, a reading measure wide. The facts sit close to their names; the due day is said in full beside how far
   off it is; Edit is a control of its own, edged, under the facts, and opens its form in place; what changed is a
   quiet fold after the conversation. */
.pvr-plan .pvp-en{max-width:720px}
.pvr-plan .pvp-en .pv-status{padding:16px 16px 16px}
.pvr-plan .pvp-en .pv-kv{gap:8px 16px; margin:0}
.pvr-plan .pvp-en .pv-kv > div{grid-template-columns:104px minmax(0, 1fr); gap:16px}
.pvr-plan .pvp-en .pv-kv dt{font-size:14px; line-height:22.5px}
.pvr-plan .pvp-en-day{margin-right:8px}
.pvr-plan .pvp-en .pv-status .pv-actions{margin-top:16px; padding-top:16px; border-top:1px solid var(--line)}
.pvr-plan .pvp-en-edit{margin:12px 0 0}
.pvr-plan .pvp-en-edit > details > summary{display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:0 12px; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface); font-size:14px; font-weight:500; color:var(--ink); cursor:pointer; list-style:none}
.pvr-plan .pvp-en-edit > details > summary::-webkit-details-marker{display:none}
.pvr-plan .pvp-en-edit > details > summary:hover{border-color:var(--wine); color:var(--wine)}
.pvr-plan .pvp-en-edit > details > summary svg{flex:none; color:currentColor}
.pvr-plan .pvp-en-edit > details[open] > summary{margin-bottom:12px}
.pvr-plan .pvp-en-edit > details[open] > .pv-fold-in{padding:16px 16px 16px; border:1px solid var(--line); border-radius:12px; background:var(--surface)}
.pvr-plan .pvp-en .pv-convo-h{margin-top:24px}
.pvr-plan .pvp-en-hist{margin:16px 0 0}
.pvr-plan .pvp-en-hist > details > summary{font-size:14px; color:var(--ink-2)}
@media (max-width:1023px){
  .pvr-plan .pvp-en-edit > details > summary{min-height:44px}
}

/* ------------------------------------------------ R5.21 the conversation card on a thing's own page, spaced (2 October, his picture)
   On this page the card has no words of its own between its head and its actions (the words are the page's title), so
   the rule sat 0px under "5 days ago". Now: 14px between the head and the rule; both rules run the card's full width;
   Love and its "more ways" caret stand together; the box to write in has the same room above it as below it. */
.pvr-plan .pvp-en .pv-post.is-bare .pv-post-head{padding-bottom:12px}
.pvr-plan .pvp-en .pv-post .pv-acts{margin:0; padding:4px 8px}
.pvr-plan .pvp-en .pv-post .pv-react{justify-content:center; gap:0}
.pvr-plan .pvp-en .pv-post .pv-react > .pv-act{flex:0 0 auto; width:auto}
.pvr-plan .pvp-en .pv-post .pv-react > .pv-react-more{position:static; flex:0 0 auto; margin:0; transform:none}
.pvr-plan .pvp-en .pv-post .pv-comments{padding:0 16px 16px}
.pvr-plan .pvp-en .pv-post .pv-cbox{margin-top:16px}

/* ------------------------------------------------ R5.22 from the sweep at the room's end
   On a phone a question's "Answer" or "Open discussion" is a full-size press, and "Back to the chart" lands clear of
   the bar at the top. */
@media (max-width:1023px){
  
  .pvr-plan .pvp-tl5{scroll-margin-top:64px}
}

/* ------------------------------------------------ R5.23 To do's Mine / Everyone (the hierarchy round, round 2, 4.3: his call of 22 Oct 2026, "offer an obvious 'Mine /
   Everyone' filter"): the two-way switch on the list's bar (kit.js listBar; views/preview/plan.js mineSwitch), in view without opening Tools, on the List, the
   Calendar and the Timeline alike. Two of the house's chips joined into one control at the line, the chosen on the chips' wine tint; 40 tall, as Tools' button
   on the same line (44 on a phone, as every button there). On a laptop the count follows it, 16 after it, on the same line; on a phone the switch and Tools share
   the first line and the count is the line under them, on the card's inset, so nothing is squeezed at 320 (the switch is about 150 wide, Tools 104, of 288).
   "Showing: … · Clear" stays the line after. (Each rule outweighs the finesse sheet's toolbar, inlined after this sheet, by its own classes.) */
.pvr-plan .pv-listbar:has(> .pvp-switch){grid-template-columns:max-content minmax(0, 1fr) auto}
.pvr-plan .pv-listbar > .pv-chips.pvp-switch{grid-area:1 / 1 / 2 / 2; position:relative; z-index:1; display:flex; flex-wrap:nowrap; gap:0; margin:0; padding:0; overflow:visible}
.pvr-plan .pv-listbar > .pvp-switch > a{position:relative; min-height:40px; border-radius:0}
.pvr-plan .pv-listbar > .pvp-switch > a:first-child{border-radius:var(--r-chip) 0 0 var(--r-chip)}
.pvr-plan .pv-listbar > .pvp-switch > a:last-child{margin-left:-1px; border-radius:0 var(--r-chip) var(--r-chip) 0}
.pvr-plan .pv-listbar > .pvp-switch > a[aria-current="true"]{z-index:1}   /* the chosen one's wine edge over the hairline they share */
.pvr-plan .pv-listbar:has(> .pvp-switch) > .pv-listbar-n{grid-area:1 / 2 / 2 / 3; padding:8px 128px 8px 16px}
.pvr-plan .pv-listbar:has(> .pvp-switch) > .pv-tools{grid-area:1 / 1 / 2 / 4}
.pvr-plan .pv-listbar:has(> .pvp-switch) > .pv-tools-on{grid-row:2}
@media (max-width:1023px){
  .pvr-plan .pv-listbar:has(> .pvp-switch){grid-template-columns:minmax(0, 1fr) auto}
  .pvr-plan .pv-listbar > .pvp-switch > a{min-height:44px}
  .pvr-plan .pv-listbar:has(> .pvp-switch) > .pv-listbar-n{grid-area:2 / 1 / 3 / 3; padding:12px 0 0}   /* (A1 final, the alignment fix round) under the switch it starts a line: on the content edge */
  .pvr-plan .pv-listbar:has(> .pvp-switch) > .pv-tools{grid-area:1 / 1 / 2 / 3}
  .pvr-plan .pv-listbar:has(> .pvp-switch) > .pv-tools-on{grid-row:3}
}
/* (4.3) inside Late, the line that says where the reader's own late things are ("Three of them are yours, at the top of the list."):
   the quiet line's 14 in ink-3, as "not tied to a celebration" is said; 12 under the band's rule, as a row's words are */
.pvr-plan .pvp-fold > .pv-fold-in > .pvp-yours{margin:0; padding-top:12px; font-size:14px; line-height:20px; color:var(--ink-2)}

/* ------------------------------------------------ Room 6: a household's page opens on the answer (3 October; the friend's brief for the
   Guests room: "what is the status for an elder… in the simplest manner possible"; views/preview/guests.js householdAnswer, approved
   3 October, "make it live"; root .pvr-hh on the page). Under the name, before the record and its forms: a few short sentences, the reply,
   the journey, the stay, food; on the paper, not in a card; the same measure as the line under the name; a sentence a line, 16px as that
   line, in ink; what is still open in the house's warning tone at 500; what nobody has said in one quiet line. The head keeps its 28px;
   the block has the same 28px under it, so the name, the answer and the record stand at one rhythm. Nothing else on the page moves. */
.pvr-hh .pv-head:not(:has(.pv-tabs)){padding-bottom:0}   /* the head's 21px of room (the rule he had removed, kept as room) goes under the answer instead, so the name, its line and the answer stand together and the record starts where it did */
.pvr-hh .pvh-answer{max-width:66ch; margin:0 0 24px; padding-bottom:24px}
@media (max-width:1023px){ .pvr-hh .pvh-answer{margin-bottom:16px} }
@container (min-width:880px){ .pvr-hh .pvh-answer{max-width:calc(100% - 340px)} }   /* as wide as the record's column under it (.pv-cols: the side 300 and its 40 gap), so no line runs past the card's edge */
.pvr-hh .pvh-answer p{margin:0; font-size:16px; line-height:1.5; color:var(--ink); text-wrap:pretty}
.pvr-hh .pvh-answer p + p{margin-top:4px}
.pvr-hh .pvh-open{font-style:normal; font-weight:500; color:var(--warn)}
.pvr-hh .pvh-quiet{color:var(--ink-2)}

/* ------------------------------------------------ Room 6, the list: the Guests room's first screen (3 October, his "okay show me the 6 changes"; views/preview/guests.js
   guestsRoom, approved 3 October, "make it live"; on with answering(), off with "answer-off", root .pvr-gl). (1) The numbers are said once, in the head's sentence; the big row and the line of celebrations are not
   drawn. (2) One row of filters: the four replies with their counts, and one small menu for the rest. (3) On a wide window the search box is as wide as the Household
   column under it (the table's own first column plus the card's 19px inset, worked out from the container), so its right edge and the first chip's left edge stand on
   the table's column lines; the box, the chips and the menu are one height (34) and one size (13.5). (4) A reply's pill fits its column ("3 to 5 coming"). (5) The count
   line and the column heads are the quiet text's own size, and they, the pills and the chosen chip are 500. (6) A search that finds one household is answered in place,
   under its row, in the card. The tabs, the columns and the rows are as they were. */
.pvr-gl .pvg-filters{display:flex; align-items:center; gap:4px; min-width:0}
.pvr-gl .pvg-filters .pv-chips{flex:none}
.pvr-gl .pvg-more{display:flex; flex:0 1 150px; min-width:104px; margin-left:auto}
.pvr-gl .pvg-more select{width:100%; min-height:34px; padding-top:4px; padding-bottom:4px; font-size:14px; font-weight:500; color:var(--ink-2); text-overflow:ellipsis}
.pvr-gl .pvg-more select.is-on{border-color:var(--line); background-color:var(--wine-tint); color:var(--wine)}
.pvr-gl .pv-chips a[aria-current="true"]{font-weight:500}
.pvr-gl .pv-listcount,.pvr-gl .pv-hhs-head{font-size:14px; font-weight:500}
.pvr-gl .pv-hh-state .pv-chip{font-weight:500}
@container (min-width:900px){
  .pvr-gl .pv-findbar{grid-template-columns:calc((100cqw - 404px) * 2.2 / 3.8 + 19px) minmax(0, 1fr); gap:12px}
  .pvr-gl .pv-findbar .pv-search{padding:0 4px 0 12px; border-radius:var(--r-ctl)}
  .pvr-gl .pv-findbar .pv-search input{min-height:32px; font-size:14px}
  .pvr-gl .pvg-filters .pv-chips{flex-wrap:nowrap; overflow:visible; padding-bottom:0}
}
@container (max-width:899px){
  .pvr-gl .pvg-filters{position:relative; overflow-x:auto; scrollbar-width:none}   /* relative: the row's hidden labels are held inside its scroll, or the page itself scrolled sideways on a phone (509 wide on a 375 screen; 4 Oct review round) */
  .pvr-gl .pvg-filters::-webkit-scrollbar{display:none}
  .pvr-gl .pvg-filters .pv-chips{overflow:visible; -webkit-mask-image:none; mask-image:none; margin-right:0; padding-right:0; padding-bottom:0}
  .pvr-gl .pvg-more{flex:none; width:150px; margin-left:0}
}
.pvr-gl .pvg-ans{padding:0px 16px 16px}
.pvr-gl .pvh-answer{max-width:66ch}
.pvr-gl .pvh-answer p{margin:0; font-size:16px; line-height:1.5; color:var(--ink); text-wrap:pretty}
.pvr-gl .pvh-answer p + p{margin-top:4px}
.pvr-gl .pvh-open{font-style:normal; font-weight:500; color:var(--warn)}
.pvr-gl .pvh-quiet{color:var(--ink-2)}
.pvr-gl .pv-hh-state > span[title]{display:grid}   /* the face of whoever chases: its wrapper is the face's own box, so the row centres it on the pill (it sat 3px high as a photograph, 2px low as a letter) */
.pvr-hh .pv-chip{font-weight:500}   /* the same pills on a household's own page, so the room has one weight for them */
@media (max-width:1023px){
  .pvr-gl .pv-lede{display:flex}   /* on a phone the head's sentence is the only place the people are counted, now that the big row is not drawn: it stays */
  .pvr-gl .pvg-filters{margin-right:-16px; padding-right:16px; -webkit-mask-image:linear-gradient(to right, var(--ink) calc(100% - 28px), transparent); mask-image:linear-gradient(to right, var(--ink) calc(100% - 28px), transparent)}   /* the row runs to the screen's edge and fades there, as every chip row does on a phone */
}

/* ------------------------------------------------ Room 6, the band: a card's head on the paper tint, flush to the card's top edge (3 October, his picture of Headcounts:
   "the header has a white band over the top. also use this border at other places too on the guest room"). The table's card had 4px of white above its tinted head and
   under its last row: gone, and the last row draws no rule. The same band is the head of the list (its first cell is the count, "132 households", so nothing stands above
   the band; on a phone, where the list has no column heads, the count keeps its own line) and of each group's card on Travel & rooms and To chase (the group's title).
   Every band's words start on the card's one inset (18px), the table's too; column heads in the quiet text's size at 500. */
.pvr-gl .pv-listcard{padding:0}
.pvr-gl .pv-table tbody tr:last-child > *{border-bottom:0}
.pvr-gl .pv-table thead th{font-size:14px; font-weight:500}
.pvr-gl .pv-table tbody th{font-weight:500}
.pvr-gl .pv-table tr > :first-child{padding-left:16px}
.pvr-gl .pv-table tr > :last-child{padding-right:16px}
@container (min-width:900px){
  .pvr-gl .pv-hhs-head{padding:8px 16px; background:var(--surface)}
  .pvr-gl .pv-listcount{position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
}
.pvr-gl .pv-card.pv-panel > .pv-panel-top{margin:-16px -16px 12px; padding:8px 16px; border-bottom:1px solid var(--line); border-radius:12px 12px 0 0; background:transparent}
.pvr-gl .pv-card.pv-panel:has(> .pv-rows) > .pv-panel-top{margin-bottom:0}   /* rows bring their own room: the first sits under the band as the list's first row does, and the last ends the card */
.pvr-gl .pv-card.pv-panel:has(> .pv-rows){padding-bottom:0}
.pvr-gl .pv-daygrid{gap:0 16px}   /* the kitchens' cards stand as far apart sideways as cards do one under another */
.pvr-gl .pv-card.pv-panel[data-event]{box-shadow:none}   /* a kitchen's card names its celebration by the dot in its band; the house's coloured edge for a celebration's panel would start under the band, and no other card in this room has one */
@media (max-width:1023px){
  .pvr-gl .pv-card.pv-panel > .pv-panel-top{margin-top:-16px; margin-left:-16px; margin-right:-16px; padding-left:16px; padding-right:16px}   /* a card's inset is 16 on a phone: the band meets its edges there too */
}

/* ------------------------------------------------ Room 6, one head for every band (3 October, his two pictures side by side: "but the headers are not uniform": the
   list's band held 13.5/500 grey labels, a group's band a 16/600 dark title). Every band in the room now reads the same: the quiet text's size at 500 in ink-3, on a
   20px line, 10px above and under, a 1px rule: 41px tall, whether it holds a table's column heads, the list's, a group's title with its count, or a celebration's name. */
.pvr-gl .pv-table thead th{line-height:20px; padding-top:8px; padding-bottom:8px}
.pvr-gl .pv-hhs-head{line-height:20px}
.pvr-gl .pv-card.pv-panel > .pv-panel-top{align-items:center}
.pvr-gl .pv-card.pv-panel > .pv-panel-top .pv-panel-h{font-size:14px; font-weight:500; line-height:20px; letter-spacing:0; color:var(--ink-2)}
.pvr-gl .pv-card.pv-panel > .pv-panel-top .pv-panel-h em{font-size:14px; font-weight:500; color:var(--ink-2)}
/* the rows under a band run the card's whole width, as the list's do (the house's own rule for a card that is a list, .pv-listpanel): the rule between two rows goes
   edge to edge, a row lights up whole under the pointer, and the words keep the card's inset */
.pvr-gl .pv-card.pv-panel:has(> .pv-rows){padding:0}
.pvr-gl .pv-card.pv-panel:has(> .pv-rows) > .pv-panel-top{margin:0}
.pvr-gl .pv-card.pv-panel > .pv-rows > .pv-row{padding:0 16px}
@media (hover:hover){ .pvr-gl .pv-card.pv-panel > .pv-rows > .pv-row:has(a.pv-row-main:hover){background:var(--hover)} }
@media (max-width:1023px){
  .pvr-gl .pv-card.pv-panel > .pv-rows > .pv-row{padding:0 16px}
}

/* ------------------------------------------------ Room 6, a search on Travel & rooms and To chase (3 October, his word: "add searching… otherwise it would become so
   difficult to look for a particular family"). The register's box, in the same place and at the same width on both tabs, so it does not move between tabs; beside it,
   while a search is on, what it found and a way to clear it, a control of the same height as the chips. */
.pvr-gl .pvg-found{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0; font-size:14px; line-height:20px; color:var(--ink-2)}
.pvr-gl .pvg-clear{display:inline-flex; align-items:center; min-height:34px; padding:0 12px; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface); font-size:14px; font-weight:500; color:var(--ink-2); white-space:nowrap}
.pvr-gl .pvg-clear:hover{border-color:var(--line); color:var(--ink)}

/* ===== preview-open.css ===== */
/* preview-open.css — the home, open to conversation (2 October 2026; lib/answer.js homeOpen). Served and linked
   only by a house started with the word "open" in HQ_TRY; the live house never sees it. Every rule waits on .pvo,
   which only the home's root wears (views/preview/next.js), so no other room can change. The house's own look
   (public/preview-home.css) is untouched: its type, its colours, its buttons. The way back: leave the word out.

   his word, with a picture of an older home: "I prefer its post cards, visible reply fields and right-hand column…
   generous space, clear relationships between elements, subtle separators, warm surfaces, and family context
   alongside the conversation." That home stood on a tinted page; this one stands on white. So a card here is
   white on white, held by a warm hairline and a soft, low shadow, and the warmth is inside it: the tinted field
   you write in, the reply bubbles, the faces. */

/* ------------------------------------------------ 1. the surface every card here shares */
.pvo{--o-r:999px; --o-pad:24px; --o-gap:16px;
  --o-edge:var(--line);
  --o-lift:0 1px 2px var(--line), 0 14px 30px -22px var(--line)}
.pvo .pv-feed > .pv-card,
.pvo .pv-feedcol > .pv-card,
.pvo > .pva-you,
.pvo .pv-sidecol > .pv-sect.pv-sect,
.pvo .pvo-around > .pv-sect{border:1px solid var(--o-edge); border-radius:var(--o-r); background:var(--surface); box-shadow:var(--o-lift)}

/* ------------------------------------------------ 2. two columns of cards (a wide screen)
   The feed, and a narrower column beside it. The cards hold the columns, so the hairline between them goes.
   Beside the feed, in order: what waits on you, the people in the house, a message, what is coming, how today is;
   then the celebrations' four pictures, and the ways into the rest of the house. */
@container (min-width:940px){
  .pvo{grid-template-columns:minmax(0, 1fr) 320px; column-gap:24px; grid-template-rows:auto auto auto auto 1fr;
    grid-template-areas:"hero hero" "feed you" "feed side" "feed days" "feed around"}
  .pvo::before{content:none}
  .pvo > .pv-days-nav,.pvo > .pva-you ~ .pv-days-nav{margin:8px 0 24px; padding:0 0px; border-top:0}
  .pvo > .pvo-around{grid-area:around}
}
.pvo .pv-sidecol > .pv-sect.pv-sect,
.pvo .pvo-around > .pv-sect{margin:0 0 var(--o-gap); padding:16px 24px 16px}
.pvo .pv-sidecol .pv-panel-top,.pvo > .pva-you .pv-panel-top{margin-bottom:12px}

/* ------------------------------------------------ 3. a post, on its card
   Who and when; the words, which lead; the pictures to the card's edges; then, under a fine rule each, what you
   can do and the box to reply in. The rules stop short of the card's edges and the words start on one line. */
.pvo .pv-feed > .pv-card{margin:0 0 var(--o-gap); padding:24px 0 0}
.pvo .pv-feed > .pv-card + .pv-card{border-top:1px solid var(--o-edge)}
.pvo .pv-feed .pv-post-head{padding:0 12px 0 var(--o-pad)}
.pvo .pv-feed .pv-pinrow{margin:0 var(--o-pad) 12px}
.pvo .pv-feed :is(.pv-post-tx, .pv-pills, .pv-made, .pv-files, .pv-poll, .pv-editbox){padding-left:var(--o-pad); padding-right:var(--o-pad)}
.pvo .pv-feed .pv-post-tx{padding-top:12px; padding-bottom:16px; line-height:1.6; text-wrap:pretty}
.pvo .pv-feed .pv-post.is-short .pv-post-tx{padding-bottom:16px}
.pvo .pv-feed .pv-answer{margin-left:var(--o-pad); margin-right:var(--o-pad)}
.pvo .pv-feed .pv-media{border-radius:0}
.pvo .pv-feed .pv-media + .pv-acts{border-top-color:transparent}   /* a photograph that ends the post is its own rule */
.pvo .pv-feed .pv-sum{margin:0 var(--o-pad)}
.pvo .pv-feed > .pv-post.is-pinned{padding-left:0; border:1px solid var(--line)}   /* a pinned post keeps its gold edge, all the way round */
/* the hearts' panel and the emoji grid open over the card, as its ··· menu does */
.pvo .pv-feed > .pv-post:has([data-rpanel]:not([hidden]), .pv-egrid){overflow:visible}
.pvo .pv-feed > .pv-post.is-editing{margin:0 0 var(--o-gap); padding:24px 0 16px; border-radius:var(--o-r); background:var(--surface)}   /* the open thing is on paper, as the open box you write in is */
/* what you can do: each in an equal share of the row, quieter than the words over it */
.pvo .pv-feed .pv-acts,
.pvo .pv-feed .pv-post.is-short .pv-acts{gap:0; margin:0 12px; padding:4px 0; border-top:1px solid var(--line)}
.pvo .pv-feed .pv-acts > *{flex:1 1 0}
.pvo .pv-feed .pv-act{width:100%}
.pvo .pv-feed .pv-react{justify-content:center}
.pvo .pv-feed .pv-react .pv-act{flex:0 1 auto; width:auto}

.pvo .pv-feed .pv-acts-one > *{flex:0 0 auto}
.pvo .pv-feed .pv-acts-one .pv-act{width:auto}
/* the replies and the box to reply in: one more rule, then the same line the words start on */
.pvo .pv-feed .pv-comments{margin:0 12px; padding:0px 12px 16px; border-top:1px solid var(--line)}
.pvo .pv-cbox{gap:8px; margin-top:12px}
.pvo .pv-cbox input[type=text]{min-height:40px; padding:0 16px; border-radius:12px}
.pvo .pv-cbox input::placeholder{color:var(--ink-2); opacity:1}
.pvo .pv-cbox .pv-cpic{color:var(--ink-2)}
.pvo .pv-cbox .pv-cpic:hover{color:var(--ink)}
.pvo .pv-cbox .pv-cpic.has-file{color:var(--wine)}
/* send: quiet until there is something to send, then the house's wine */
.pvo .pv-cbox .pv-send{background:var(--hover); color:var(--ink-2); transition:background-color var(--dur-fast) ease, color var(--dur-fast) ease}
.pvo .pv-cbox .pv-send:hover{background:var(--hover); color:var(--ink)}
.pvo .pv-cbox:has([data-cbox-input]:not(:placeholder-shown)) .pv-send,
.pvo .pv-cbox:has(.pv-cpic.has-file) .pv-send{background:var(--wine); color:var(--on-wine)}
.pvo .pv-cbox:has([data-cbox-input]:not(:placeholder-shown)) .pv-send:hover,
.pvo .pv-cbox:has(.pv-cpic.has-file) .pv-send:hover{background:var(--wine-press)}
.pvo .pv-cbox .pv-send:disabled{opacity:.5; cursor:default}
/* with nothing to send it does not take a press (Enter in an empty field is still the house's: nothing is posted) */
.pvo .pv-cbox:not(:has([data-cbox-input]:not(:placeholder-shown))):not(:has(.pv-cpic.has-file)) .pv-send{pointer-events:none}
.pvo .pv-cbox :is(.pv-send, .pv-cpic):focus-visible{border-radius:50%}
.pvo .pv-act:focus-visible{border-radius:6px}
.pvo-folk:focus-visible,.pvo-msg:focus-visible{border-radius:12px}
.pvo .pvo-memory:focus-visible{border-radius:var(--o-r)}
/* the house's own cards in the feed: what someone did, new photographs, several albums */
.pvo .pv-feed > .pvn-told{padding-bottom:16px}
.pvo .pv-feed .pvn-about{padding:0 var(--o-pad)}
.pvo .pv-feed .pva-cap{margin:12px var(--o-pad) 12px}
.pvo .pv-feed .pv-photopost .pv-acts{padding:4px 0}
.pvo .pv-feed .pv-digest{padding:24px 0 0}
.pvo .pv-feed .pv-digest-h{padding:0 var(--o-pad) 12px}
.pvo .pv-feed .pva-digest .pva-cap{margin-bottom:4px}
.pvo .pv-feed .pva-albums{margin:4px var(--o-pad) 12px}
.pvo .pv-feed .pv-empty{padding:24px var(--o-pad) 32px}

/* ------------------------------------------------ 4. the box you write in, on a card of its own
   As he approved it (his face inside the field, the ways to begin spread to the box's edges), now with the
   same field the replies have and a fine rule over the ways to begin, as a post has over what you can do. */
.pvo .pv-feedcol > .pv-compose{padding:16px 12px 4px}
.pvo .pv-feedcol > .pv-compose .pv-compose-rest{margin:0 12px}
.pvo .pv-feedcol > .pv-compose .pv-prompt{min-height:44px; border-color:transparent; border-radius:999px; background:var(--hover)}
.pvo .pv-feedcol > .pv-compose .pv-prompt:hover{border-color:transparent; background:var(--hover)}
.pvo .pv-feedcol > .pv-compose .pv-compose-ways{margin:16px 0 0; padding-top:4px; border-top:1px solid var(--line)}
/* opened: the field you pressed gives way to the form (since v118 a rule that set it as a block also kept it in
   sight over the form: his word, 2 October, with a picture of his phone, "when i click the text box to post something,
   this is what i get"), and the open thing is on paper, as an edit in place is */
.pv-feedcol > .pv-compose.is-open .pv-compose-rest{display:none}
.pvo .pv-feedcol > .pv-compose.is-open{padding:16px var(--o-pad) 16px; border-color:var(--o-edge); background:var(--surface); box-shadow:none}
/* and the ways to begin are under the box you write in, as they are before it is pressed (his word, 2 October, of the
   opened box with them over it: "can't we bring the type of post button below the text box? like it is there
   before i click the text box?"): who is writing, the words (and the hint that goes with them), then the five ways
   across the box's width, then the rest of the form. The form's own parts are laid out by the box (display:
   contents), so the row can stand between two of them; the cross to close it is at the box's top corner. */
.pvo .pv-feedcol > .pv-compose.is-open{position:relative}
.pvo .pv-compose .pv-compose-forms{display:flex; flex-direction:column; gap:12px; padding:0}
.pvo .pv-compose .pv-compose-forms[hidden]{display:none}
.pvo .pv-compose .pv-compose-forms > form:not([hidden]){display:contents}
.pvo .pv-compose .pv-compose-forms > form > *{order:3}
.pvo .pv-compose .pv-compose-forms > form > .pv-compose-who{order:0; padding-right:48px}
.pvo .pv-compose .pv-compose-forms > form > :is(textarea, .pv-taghint){order:1}
.pvo .pv-compose .pv-intents{order:2; gap:0px; margin:0; overflow:visible}   /* the chosen one is filled: it starts on the box's line */
.pvo .pv-compose .pv-intents button[role=tab]{flex:1 1 0; justify-content:center; min-width:0; min-height:40px}
/* (planroom, item 13: "Ask someone") each tab as wide as its words, so the longest keeps one line on a phone */
.pvo .pv-compose .pv-intents.pvx-asksomeone button[role=tab]{flex:1 1 auto; white-space:nowrap}
.pvo .pv-compose .pv-compose-x{position:absolute; top:14px; right:12px; margin:0}
/* the house's other cards in this column start on the same line */
.pvo .pv-feedcol > :is(.pv-ask, .pv-fromus, .pv-invite, .pv-confirm, .pv-todaycard, .pv-storm, .pv-strip){padding-left:var(--o-pad); padding-right:var(--o-pad)}
.pvo .pv-feedcol > .pv-ask{padding-top:16px; padding-bottom:16px; border-color:var(--line); box-shadow:none}
.pvo .pv-feedcol > :is(.pv-confirm, .pv-todaycard, .pvn-heavy){box-shadow:none}
.pvo .pv-feedcol > .pv-confirm{border-color:var(--line)}
.pvo .pv-feedcol > .pv-todaycard{border-color:var(--line)}

/* ------------------------------------------------ 5. the door, and where you stand
   The line about the lights is a note, not a second greeting. And on a quiet day "nothing new" is a small line
   beside what the feed shows; the photograph under it is the thing to look at. */
.pvo .pvn-say{font-size:14px; color:var(--ink-2)}
.pvo .pv-feedbar{margin:24px 0 12px; padding:0 0px; border-top:0}
.pvo .pvo-status{margin-right:auto; font-size:14px; font-weight:400; line-height:1.45; color:var(--ink-2)}
.pvo .pvn-more{margin:-4px 0px 16px}
.pvo .pvn-thread{margin:4px 0 24px}
.pvo .pvo-memory + .pvn-thread{margin-top:24px}
/* a quiet day's photograph: the picture at the card's width, its words right under it */
.pvo .pvo-memory{display:block; margin:0; overflow:hidden; color:var(--ink)}
.pvo-memory-ph{display:block; width:100%; height:auto; aspect-ratio:var(--r, 1.5); object-fit:cover; object-position:50% 30%; background:var(--hover)}
.pvo-memory-tx{display:block; padding:16px var(--o-pad) 16px}
/* the line someone wrote is in the house's own type, as a person's words are everywhere else on this page (his word, 2
   October, of this caption set in the serif: "why does the homepage have different fonts?"); the serif stays for
   their names and the names of what is theirs */
.pvo-memory-cap{display:block; font-size:20px; font-weight:400; line-height:1.45; letter-spacing:-.005em; text-wrap:balance; overflow-wrap:anywhere}
.pvo-memory-tx em{display:block; margin-top:4px; font-style:normal; font-size:14px; line-height:1.45; color:var(--ink-2)}
.pvo-memory-tx em .pv-dot{margin:0 4px}
.pvo-memory:hover .pvo-memory-cap{color:var(--wine)}
.pvo-memory:hover .pvo-memory-ph{filter:brightness(.97)}
@container (min-width:640px){
  .pvo .pvo-memory.is-tall{display:grid; grid-template-columns:minmax(0, 44%) minmax(0, 1fr); align-items:center}
  .pvo-memory.is-tall .pvo-memory-tx{padding:24px var(--o-pad)}
  .pvo-memory.is-tall .pvo-memory-cap{font-size:20px; line-height:1.4}
}

/* ------------------------------------------------ 6. what waits on you: one thing, each part on its own line */
.pvo .pv-todo-tx{display:block; overflow:visible; margin-bottom:8px; line-height:1.45; text-wrap:pretty; overflow-wrap:anywhere}
.pvo-todo-meta{display:grid; gap:0px}
.pvo .pv-todo .pv-actions{flex-wrap:wrap; gap:8px; margin:12px 0 0}
.pvo .pv-glance > summary{border-color:var(--o-edge); border-radius:999px; box-shadow:var(--o-lift)}
.pvo .pv-glance[open] > summary{border-radius:999px 999px 0 0; box-shadow:none}
.pvo .pv-glance-in{border-color:var(--o-edge); border-radius:0 0 999px 999px}
.pvo .pv-glance > summary .pva-one b{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:normal; text-overflow:clip}
.pvo .pv-glance[open] > summary .pva-one b{display:block}
.pvo .pva-one-meta{flex-wrap:wrap; gap:0px 12px}

/* ------------------------------------------------ 7. the people in the house, a message, what is coming
   Rows on one line: the face, then the name, and under it whose they are and, quieter, when they were last in. */
.pvo-folks,.pvo-msgs{display:grid; gap:0px; margin:0 -8px}
.pvo-folk,.pvo-msg{display:flex; gap:12px; min-width:0; padding:8px 8px; border-radius:12px; color:var(--ink)}
@media (hover:hover){ .pvo-folk:hover,.pvo-msg:hover{background:var(--hover)} }   /* (the colours round's fixes: under a pointer only, so a tap on a phone leaves nothing behind) */
.pvo-folk b,.pvo-msg-top b{min-width:0; font-size:16px; font-weight:500; line-height:1.3; overflow-wrap:anywhere}
.pvo-go{gap:4px; margin-top:12px}
.pvo-go svg{transition:transform var(--dur-fast) ease}
.pvo-go:hover svg{transform:translateX(2px)}
.pvo-msg{align-items:flex-start}
.pvo-msg-tx{display:grid; gap:0px; flex:1; min-width:0}
.pvo-msg-top{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.pvo-msg-top time{flex:none; font-size:13px; color:var(--ink-2); white-space:nowrap}
.pvo-msg-say{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:14px; line-height:1.45; color:var(--ink-2); overflow-wrap:anywhere}
.pvo-msg.is-unread .pvo-msg-say{color:var(--ink); font-weight:500}
.pvo-msg.is-unread .pvo-msg-top b::after{content:''; display:inline-block; width:7px; height:7px; margin-left:8px; border-radius:50%; background:var(--wine); vertical-align:middle}
.pvo .pvo-messages .pv-quiet{font-size:14px; text-wrap:pretty}
.pvo .pv-sidecol .pv-mini{gap:12px}
.pvo .pv-sidecol .pv-mini a{text-wrap:pretty}
.pvo .pv-sidecol .pv-mini em{margin-top:0px}

/* ------------------------------------------------ 8. one column (a tablet, a narrow window, a phone)
   The feed first; the family, a message and what is coming after it, as cards of the same kind. */
@container (max-width:939px){
  .pvo > .pv-sidecol{margin-top:4px; padding-top:24px; border-top:0}   /* cards say where the column starts; no rule over them */
  .pvo > .pvo-around{order:6}
}
@container (max-width:639px){
  .pvo{--o-r:999px; --o-pad:16px; --o-gap:12px}
  .pvo,.pvo.is-back{grid-template-areas:"hero" "days" "feed" "side" "around"}
  .pvo.is-back{grid-template-areas:"hero" "feed" "days" "side" "around"}
  .pvo > .pvo-around{grid-area:around}
  .pvo .pv-feed > .pv-card{padding-top:16px}
  .pvo .pv-feed .pv-post-head{padding-right:4px}
  .pvo .pv-feed .pv-acts,.pvo .pv-feed .pv-post.is-short .pv-acts{margin:0 8px; padding:4px 0}
  .pvo .pv-feed .pv-act{min-height:44px}
  .pvo .pv-feed .pv-react-more{height:44px}
  .pvo .pv-feed .pv-comments{margin:0 8px; padding:0 8px 12px}
  .pvo .pv-feedcol > .pv-compose{padding:12px 8px 4px}
  .pvo .pv-feedcol > .pv-compose .pv-compose-rest{margin:0 8px}
  .pvo .pv-feedcol > .pv-compose .pv-compose-ways{margin-top:12px}
  /* opened on a phone: the five ways fit the row (their icons took the room, and "To do" ran off the edge);
     without an icon each has an edge, so it still reads as something to press */
  .pvo .pv-compose .pv-intents{gap:4px; margin:0}
  .pvo .pv-compose .pv-intents button[role=tab]{padding:0 4px; box-shadow:inset 0 0 0 1px var(--line)}
  .pvo .pv-compose .pv-intents button[role=tab][aria-selected="true"]{box-shadow:inset 0 0 0 1px var(--line)}
  .pvo .pv-compose .pv-intents button[role=tab] svg{display:none}
  .pvo .pv-feedbar{margin:24px 0 12px}
  .pvo .pv-sidecol > .pv-sect.pv-sect,.pvo .pvo-around > .pv-sect{padding:16px 16px 12px}
  .pvo-memory-cap{font-size:20px}
  /* the box to reply in, as an invitation: a face and a field; pressed (or holding words or a photograph) it is
     the whole box, with the photograph and the send button */
  .pvo .pv-cbox{margin-top:12px}
  .pvo .pv-cbox > .avatar{width:28px; height:28px; font-size:12px}
  .pvo .pv-cbox :is(.pv-cpic, .pv-send){display:none}
  .pvo .pv-cbox:is(:focus-within, :has([data-cbox-input]:not(:placeholder-shown)), :has(.pv-cpic.has-file)) :is(.pv-cpic, .pv-send){display:inline-grid}
  .pvo .pv-cbox input[type=text]{scroll-margin-block:96px}
  /* fewer rows after the feed: four faces, one message */
  .pvo-folks > li:nth-child(n+5),.pvo-msgs > li:nth-child(n+2){display:none}
}

/* ================================================ 9. a finishing pass (.pvf on the home's root; lib/answer.js homeFinish)
   NOT approved yet: only a house started with the word "finish" wears .pvf, so every rule here waits on it. From a
   second review he pasted on 2 October ("preserve this version and refine its hierarchy"): beside the feed three
   cards — the people, a message, what waits on you, in that order — and after them, quieter, what is coming, the
   celebrations as they are, and the ways into the rest of the house as a foot. */

/* ------------------------------------------------ 9.1 what is coming: a list under its name, not a fourth card */
.pvo.pvf .pv-sidecol > .pvf-coming.pv-sect{margin:8px 0 24px; padding:0 0px; border:0; border-radius:0; background:none; box-shadow:none}
.pvo.pvf .pvf-coming .pv-mini a{font-weight:400}

/* ------------------------------------------------ 9.2 the ways into the rest of the house: a quiet foot under a rule */
.pvo.pvf .pvo-around > .pv-sect{margin:0; padding:12px 0px 0; border:0; border-top:1px solid var(--line); border-radius:0; background:none; box-shadow:none}
.pvo.pvf .pvo-around .pv-around > li + li{border-top:0}
.pvo.pvf .pvo-around .pv-around-row{min-height:40px; padding:4px 0}
.pvo.pvf .pvo-around .pv-around-row b{font-size:14px; color:var(--ink-2)}
.pvo.pvf .pvo-around .pv-small{margin-top:8px}

/* ------------------------------------------------ 9.3 "How is today?", a line under the greeting
   Closed: the question and what each of the two has said. Opened: the three choices and who is told. It has an
   edge, so it reads as something to press; it starts on the column's line, as the box you write in does. */
.pvf-today{margin:12px 0 0}
.pvf-today > summary{display:inline-flex; align-items:center; gap:8px; max-width:100%; min-height:36px; padding:4px 8px 4px 12px; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); font-size:14px; line-height:1.4; color:var(--ink-2); cursor:pointer; list-style:none}
.pvf-today > summary::-webkit-details-marker{display:none}
.pvf-today > summary:hover{border-color:var(--line)}
.pvf-today > summary b{flex:none; font-weight:500; color:var(--ink)}
.pvf-today > summary span{min-width:0; overflow-wrap:anywhere}
.pvf-today > summary svg{flex:none; color:var(--ink-2); transition:transform var(--dur-fast) ease}
.pvf-today[open] > summary svg{transform:rotate(180deg)}
.pvf-today > summary:focus-visible{border-radius:999px}
.pvf-today-in{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:8px 0 0 0px}
.pvf-today-in .pv-small{flex:1 1 220px; margin:0}

/* ------------------------------------------------ 9.4 several albums' photographs: the caption with its picture, the albums as the card's foot */
.pvo.pvf .pv-feed .pva-digest .pva-cap{margin-bottom:16px}
/* (3 October, his "these album names seem floating in mid air, no layout design for them", then of an edged panel in
   the card: "the box inside the box is not working - figure something else out". Now the card's own foot: a line
   across the whole card and the albums in cells whose lines run to its edges, as the Guests room's rows do; two to a
   row on a phone, three where the page is wide; each cell pressed whole, its lines saying where (no ›: it put a name
   on two lines), the name on the caption's line, how many came at the right, the right column's on the caption's
   right edge; the last cell takes what its row leaves.
   Still no thumbnails: the picture above is the photographs.) */
.pvo.pvf .pv-feed .pva-digest{overflow:hidden}   /* the foot's last cells keep the card's round corners */
.pvo.pvf .pv-feed .pva-albums{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0; margin:0; padding:0; border-top:1px solid var(--line)}
.pvo.pvf .pv-feed .pva-albums a{display:flex; align-items:center; gap:8px; min-height:48px; max-width:none; padding:12px var(--o-pad); border-top:1px solid var(--line)}
.pvo.pvf .pv-feed .pva-albums a:nth-child(-n+2){border-top:0}
.pvo.pvf .pv-feed .pva-albums a:nth-child(2n){border-left:1px solid var(--line)}
.pvo.pvf .pv-feed .pva-albums a:last-child:nth-child(odd){grid-column:1 / -1}
.pvo.pvf .pv-feed .pva-albums a:hover{background:var(--hover)}
.pvo.pvf .pv-feed .pva-albums b{flex:1; text-wrap:balance}   /* a name on two lines breaks evenly, never a word alone under it */
.pvo.pvf .pv-feed .pva-albums em{flex:none; font-size:13px}   /* (3 October: nothing read under 13 px on a phone) */
@container (min-width:640px){
  .pvo.pvf .pv-feed .pva-albums{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .pvo.pvf .pv-feed .pva-albums a:nth-child(3){border-top:0}
  .pvo.pvf .pv-feed .pva-albums a:nth-child(n){border-left:0}
  .pvo.pvf .pv-feed .pva-albums a:not(:nth-child(3n+1)){border-left:1px solid var(--line)}
  .pvo.pvf .pv-feed .pva-albums a:last-child:nth-child(odd){grid-column:auto}
  .pvo.pvf .pv-feed .pva-albums a:last-child:nth-child(3n+1){grid-column:1 / -1}
  .pvo.pvf .pv-feed .pva-albums a:last-child:nth-child(3n+2){grid-column:span 2}
}

/* ------------------------------------------------ 10. Every room's card head on the band (3 October, his two pictures side by side, the Guests
   list's head and Planning's groups: "this top ivory header and its font style is not there on every relevant page. check each page and add it
   accordingly"). The Guests room's band (preview-answer.css, Room 6) in every room: a card whose first thing is its title wears it flush to the
   card's top edge on the paper tint, a 1px rule under it, its words on the card's own inset in the quiet text's size at 500 in ink-3 on a 20px
   line, 10px above and under: 41px tall. A count reads as the same words, not a pill; Planning's Late keeps its warning colour; rows start at
   the band's rule, as in Guests. Not a band: a post or a digest (the feed's own words), a card tinted whole (Next date), the Calendar's month
   and the Timeline's scale, the Messages room's own title, Family's banners (their own design). :where() keeps a room's own sharper rule in
   charge (Guests' bands, Late's colour). On wherever the rooms answer since his "make it live" (lib/answer.js bandsOn(): the class pv-bands on the page); the way back is the word bands-off. */
:where(.pv-bands) .pv-card.pv-panel > .pv-panel-top,
:where(.pv-bands) .pv-card.pvp-group > .pvp-group-h,
:where(.pv-bands) .pv-card.pvp-ask > .pvp-ask-h,
:where(.pv-bands) .pv-card.pv-listcard > .pv-moneygroup-h,
:where(.pv-bands) .pv-card.pv-listcard > .pv-vhead,
:where(.pv-bands) .pv-card.pv-fold > summary,
:where(.pv-bands) .pv-card.pv-pad > h2.pv-panel-h:not(:not(input[type=hidden]) ~ *),
:where(.pv-bands) .pvo :is(.pv-sidecol > .pv-sect.pv-sect:not(.pvf .pvf-coming), .pvo-around > .pv-sect, .pva-you) > .pv-panel-top{
  margin:0; padding:8px 16px; min-height:0; align-items:center; border-bottom:1px solid var(--line); border-radius:12px 12px 0 0;
  background:transparent; font-size:14px; font-weight:500; line-height:20px; letter-spacing:0; color:var(--ink-2)}
/* its words, and a count among them, in the band's one hand (an avatar keeps its own) */
:where(.pv-bands) .pv-card.pv-panel > .pv-panel-top .pv-panel-h,
:where(.pv-bands) .pv-card.pv-panel > .pv-panel-top .pv-panel-h em,
:where(.pv-bands) .pvo :is(.pv-sidecol > .pv-sect.pv-sect:not(.pvf .pvf-coming), .pvo-around > .pv-sect, .pva-you) > .pv-panel-top .pv-panel-h,
:where(.pv-bands) .pvo :is(.pv-sidecol > .pv-sect.pv-sect:not(.pvf .pvf-coming), .pvo-around > .pv-sect, .pva-you) > .pv-panel-top .pv-panel-h em,
:where(.pv-bands) .pv-card.pvp-group > .pvp-group-h > span,
:where(.pv-bands) .pv-card.pvp-ask > .pvp-ask-h :is(span, em):not(.avatar, .avatar *),
:where(.pv-bands) .pv-card.pv-listcard > .pv-moneygroup-h *,
:where(.pv-bands) .pv-card.pv-listcard > .pv-vhead > span,
:where(.pv-bands) .pv-card.pv-fold > summary *:not(svg, svg *){
  font-size:14px; font-weight:500; line-height:20px; letter-spacing:0; color:var(--ink-2)}
:where(.pv-bands) .pv-card.pvp-group > .pvp-group-h > span,
:where(.pv-bands) .pv-card.pvp-ask > .pvp-ask-h em{padding:0; border-radius:0; background:none}
/* what stands in a band keeps its size without stretching it: a link to the rest (26px with its padding), a face (22px) */
:where(.pv-bands) :is(.pv-card.pv-panel, .pvo :is(.pv-sidecol > .pv-sect.pv-sect:not(.pvf .pvf-coming), .pvo-around > .pv-sect, .pva-you)) > .pv-panel-top .pv-more-link{margin-block:-4px}
:where(.pv-bands) .pv-card.pvp-ask > .pvp-ask-h .avatar{margin-block:-1px}
/* the card's own inset and corner, kind by kind, so the band meets its edges */
:where(.pv-bands) .pv-card.pv-panel > .pv-panel-top{margin:-16px -16px 12px}
:where(.pv-bands) .pv-card.pv-panel:has(> .pv-rows) > .pv-panel-top{margin-bottom:0}
:where(.pv-bands) .pv-card.pv-panel.pv-listpanel > .pv-panel-top{margin:-12px 0 0}
:where(.pv-bands) .pv-card:is(.pvp-group, .pvp-ask),
:where(.pv-bands) .pv-card.pv-listcard:has(> .pv-moneygroup-h, > .pv-vhead){padding-top:0}
:where(.pv-bands) .pv-card.pv-fold > summary{display:flex; margin:0 -16px; border-radius:12px}
:where(.pv-bands) .pv-card.pv-fold[open] > summary{border-radius:12px 12px 0 0}
:where(.pv-bands) .pv-card.pv-fold:not([open]) > summary{border-bottom:0}
:where(.pv-bands) .pv-card.pv-pad > h2.pv-panel-h:not(:not(input[type=hidden]) ~ *){margin:-16px -16px 12px; padding-inline:16px}
/* on the home (approved as it is) the band takes the place of the card's top padding and its head, and 11px under it (7px on a phone) keep
   each card exactly as tall as it was */
:where(.pv-bands) .pvo :is(.pv-sidecol > .pv-sect.pv-sect:not(.pvf .pvf-coming), .pvo-around > .pv-sect, .pva-you) > .pv-panel-top{margin:-16px -24px 12px; padding-inline:24px;
  border-radius:calc(var(--o-r) - 1px) calc(var(--o-r) - 1px) 0 0}
/* a form's fields stand apart by its own gap (16px), under the band as between themselves */
:where(.pv-bands) .pv-card.pv-pad.pv-form > h2.pv-panel-h:not(:not(input[type=hidden]) ~ *){margin-bottom:0}
@media (max-width:1023px){
  :where(.pv-bands) .pv-card.pv-panel > .pv-panel-top{margin:-16px -16px 12px; padding-inline:16px}
  :where(.pv-bands) .pv-card.pv-panel:has(> .pv-rows) > .pv-panel-top{margin-bottom:0}
  :where(.pv-bands) .pv-card.pv-panel.pv-listpanel > .pv-panel-top{margin:-12px 0 0}
  :where(.pv-bands) .pv-card:is(.pvp-group, .pvp-ask) > :is(.pvp-group-h, .pvp-ask-h),
  :where(.pv-bands) .pv-card.pv-listcard > :is(.pv-moneygroup-h, .pv-vhead){padding-inline:16px}
  :where(.pv-bands) .pv-card.pv-pad > h2.pv-panel-h:not(:not(input[type=hidden]) ~ *){margin:-16px -16px 12px; padding-inline:16px}
}
@container (max-width:639px){
  :where(.pv-bands) .pvo :is(.pv-sidecol > .pv-sect.pv-sect:not(.pvf .pvf-coming), .pvo-around > .pv-sect, .pva-you) > .pv-panel-top{margin:-16px -16px 8px; padding-inline:16px}
}

/* ===== preview-phone.css ===== */
/* The house on your phone (3 October 2026; lib/answer.js phoneOn; views/preview/phone.js). Served and linked only
   where it is on. Built from the house's own tokens and parts: a card, a small button with an
   edge, the column's quiet type; nothing heavier than 500. */

/* the card on the home, under the greeting: a phone, what it is for, two ways on (public/preview-phone.js shows it
   only on a phone's browser) */
/* as the open home's notes beside it (.pv-ask, .pv-invite): one line for words and buttons */
/* (3 October, his "i can't see the po-up or the page": under the greeting the card fell below a phone's first screen.
   Now, once the script has found a phone and lifted it to the page itself, it rises at the foot of the screen like the
   house's toast, above the bar of rooms and over the page, on the first screen whatever the page holds; Show me how
   or Not now, and it is gone) */
@keyframes pvk-rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
/* out of the way of the keyboard, as the bar of rooms is */
/* the house opened from the Home Screen never asks to be put there */

/* /phone: the taps, one to a line, each drawn as the phone shows it */
.pvk-here{display:flex; align-items:center; gap:12px; padding:14px 18px; background:var(--yes-tint); border-color:transparent; color:var(--yes)}
.pvk-here p{margin:0; font-size:15px; line-height:1.45; color:var(--ink)}
.pvk-since{margin:0 0 12px}
.pvk-how{padding:4px 18px 16px}
.pvk-steps{list-style:none; margin:0; padding:0; counter-reset:pvk}
.pvk-steps li{display:flex; align-items:center; gap:14px; padding:12px 0; border-top:1px solid var(--line)}
.pvk-steps li:first-child{border-top:0}
.pvk-steps li::before{counter-increment:pvk; content:counter(pvk); flex:none; width:14px; font-size:13.5px; color:var(--ink-2); text-align:right; font-variant-numeric:tabular-nums}
/* what to press, as a key that is not itself pressed: filled, no edge (the house's controls have one); one width, so
   every step's words start on one line */
.pvk-key{flex:none; display:inline-flex; align-items:center; justify-content:center; width:52px; height:40px; border-radius:12px; background:var(--hover); color:var(--ink)}
.pvk-key.is-word{font-size:13.5px; font-weight:500}
.pvk-step-tx{display:flex; flex-direction:column; gap:1px; min-width:0; font-size:15px; line-height:1.4; color:var(--ink-2)}
.pvk-what{font-weight:500; color:var(--ink)}
.pvk-where{font-size:13.5px; line-height:1.4; color:var(--ink-2)}
/* the house's own icon under the keys, its words on the steps' line (14 number + 14 gap, then a key's 52) */
.pvk-found{display:flex; align-items:center; gap:14px; margin:0; padding:14px 0 2px 28px; border-top:1px solid var(--line); font-size:15px; line-height:1.45; color:var(--ink-2)}
.pvk-found img{flex:none; width:44px; height:44px; margin:0 4px; border-radius:10px; border:1px solid var(--line)}
.pvk-older{margin:12px 0 0}
.pvk-one{padding:14px 0 10px; border-bottom:1px solid var(--line)}
.pvk-one .pv-small{margin:8px 0 0}
.pvk-say{margin:12px 0; font-size:15px; line-height:1.5; color:var(--ink-2)}
.pvk-copy{margin:4px 0 4px}
.pvk-buzz,.pvk-other{margin:14px 0 0}

/* ===== preview-review.css ===== */
/* The review round (4 October 2026; lib/answer.js reviewTrial, on only with the word "review"), the part that is CSS: the
   house at a larger text size. Safari's aA at 125% or 150% lays a 375-point iPhone out as if it were 300 or 250 wide, and
   there (measured, every room) four places pushed the page sideways: Rooms' list (columns of at least 290), Today's day
   cards (240), and the long buttons on your page and Your details ("What buzzes your phone", "Your details, photo…"),
   which never wrapped, and the wedding's hashtags in Guests, one long word each. Nothing here changes at an ordinary size: each rule only acts below the width it names.
   Inlined by views/preview/kit.js shell, on the page root's class pv-review. */
.pv-review .pv-roomlist{grid-template-columns:repeat(auto-fill, minmax(min(290px, 100%), 1fr))}
.pv-review .pv-daystrip{grid-template-columns:repeat(auto-fill, minmax(min(240px, 100%), 1fr))}
.pv-review .pv-nownext{grid-template-columns:repeat(auto-fit, minmax(min(220px, 100%), 1fr))}
@media (max-width:340px){
  /* a button whose words are longer than the screen wraps inside its edge instead of running off it */
  .pv-review .pv-btn{max-width:100%; white-space:normal; text-align:center}
  .pv-review .pv-btn > span{white-space:normal}
  /* the phone's top bar: at this size the count pushed the couple's names down to "Mee…"; the names keep the room, the count and the M|A mark stepping aside (the
     home's card and every room's own head say how many days) */
  .pv-review .pv-top-togo, .pv-review .pv-top-id .pv-id-mark{display:none}   /* and the M|A mark, which says what the names say */
  .pv-review .pv-top-names{white-space:normal; overflow:visible; line-height:1.1}   /* and they take two lines rather than lose letters */
  /* and one long word (Guests' #KapoorsMeetTheNairs) breaks rather than widening the page */
  .pv-review .pv-main{overflow-wrap:break-word}
}

/* A conversation on a phone (the design audit of 4 October): the top bar, the string of lights and a card's frame left
   the messages about 460 of 844 points. In a thread the lights step aside and the frame goes, so the thread runs to the
   screen's edges between the top bar and the tabs, as a phone's own Messages does. The list of conversations keeps
   its card. */
@media (max-width:1023px){
  .pv-review.pv-k-convo:has(.pv-msgs.has-thread) .pv-lights{display:none}
  .pv-review.pv-k-convo:has(.pv-msgs.has-thread) .pv-shell{padding-top:0}
  .pv-review .pv-msgs.has-thread{margin:-12px -16px 0; border:0; border-radius:0; background:var(--surface)}
  .pv-review .pv-msgs.has-thread .pv-thread{min-height:calc(100dvh - 56px - var(--tabbar-h) - env(safe-area-inset-bottom))}
}

/* The map on a phone (the design audit of 4 October): drawn to fit a 360-point card, the map's words came out 5 points
   tall and its faces 16 — too small to read or to press. On a narrow card the map is the picture (faces, the arcs, night
   and the sun), and its words are the clocks and the list of everyone under it, where they are full size. */
.pv-review .pv-map{container-type:inline-size}
@container (max-width:559px){
  .pv-review .pv-map :is(.pv-arclab, .pv-maplbl, .pv-venue text){display:none}
  .pv-review .pv-map svg a{pointer-events:none}
}

/* A day's picture while it loads (the design audit of 4 October: on a phone the home's four days and three of the four
   invitation cards stood as blank paper first): the frame is the day's own colour, faint, the colour already under each,
   so a slow picture arrives into its day rather than out of nothing. */
.pv-review .pv-day[data-event] img, .pv-review .pv-invcard[data-event] .pv-invcard-art{background:var(--hover)}

/* ===== preview-heads.css ===== */
/* The rooms' heads (4 October 2026; lib/answer.js headsTrial, on only with the word "heads"). His words: "buttons are of
   different colors and sizes, plus they feel hanging with the infographic on the right… have a look at a new layout for
   the headers". Measured that day on 17 heads: five looks (filled 40, outlined 40, outlined 34, words alone 34, a bare
   ··· 36), and every button pinned to the title's top edge, between the words and the drawing, with nothing under it.
   Here a head is two columns. On the left, one edge: the room's name, its line, and under them its buttons. On the
   right, the room's drawing, alone in its corner as before, centred on everything on the left. Every button in a head
   is one size; the room's one main action is filled (each page says which), anything else outlined, and the ··· an
   outlined square of the same height. Inlined by views/preview/kit.js shell, on the page root's class pv-heads. */

.pv-heads .pv-head-row{row-gap:16px}
.pv-heads .pv-head-acts{gap:8px; justify-content:flex-start}

/* a laptop: the words over the buttons, the drawing beside both and centred on them */
@container (min-width:760px){
  .pv-heads .pv-head-row{grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"tx mark" "acts mark"; column-gap:32px; row-gap:16px}
  .pv-heads .pv-head-row:not(:has(.pv-head-mark)){grid-template-columns:minmax(0, 1fr); grid-template-areas:"tx" "acts"}
  .pv-heads .pv-head-row:not(:has(.pv-head-acts)){grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"tx mark"}
  .pv-heads .pv-head-row:not(:has(.pv-head-mark)):not(:has(.pv-head-acts)){grid-template-columns:minmax(0, 1fr); grid-template-areas:"tx"}
  .pv-heads .pv-head-acts, .pv-heads .pv-head-row:has(.pv-eyebrow) .pv-head-acts{justify-content:flex-start; align-self:start; margin-top:0}
  /* the drawing never sets the head's height: its margins take back its own 90 so the words and buttons alone make the
     block, and the drawing is centred on that, a few points over it where a room has only a name and a line */
  .pv-heads .pv-head-mark{align-self:center; margin-block:-48px}
  /* a head with no buttons keeps the drawing where it is live, level with the name: centred on a name and a line, it
     rose into the string of lights (Search, 16 points over it; Rooms and Invitations, touching) */
  .pv-heads .pv-head-row:not(:has(.pv-head-acts)) .pv-head-mark{align-self:start; margin-block:-2px 0}
}

/* one size for every button in a head: 40 tall, the words at 14.5, an icon of 18 */
.pv-heads .pv-head-acts .pv-btn{min-height:40px; padding:0 16px; gap:8px; font-size:14px}
.pv-heads .pv-head-acts .pv-btn svg{width:18px; height:18px}
/* words alone become an outlined button: a control looks like one */

.pv-heads .pv-head-acts .pv-btn-quiet:hover{background:var(--hover); border-color:var(--line)}
/* the ··· in a head: an outlined square, the height of the buttons beside it */
.pv-heads .pv-head-acts .pv-menu > summary.pv-icon-btn{width:40px; height:40px; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface); color:var(--ink-2)}
.pv-heads .pv-head-acts .pv-menu > summary.pv-icon-btn:hover{background:var(--hover); border-color:var(--line-2); color:var(--ink)}   /* (the colours round, the merge: under the pointer it keeps the outlined control's edge, 3:1) */

/* ===== preview-harmony.css ===== */
/* The house as one system (4 October 2026; lib/answer.js harmonyTrial, on only with the word "harmony"). His words, with
   four rooms side by side: "fonts are still different - plus why does the sangeet buttons so far down… make sure
   everything is harmonious and rightly placed with the entire app". Measured across 34 pages that day: two families for
   page titles (the phone's own at 34 in 25 rooms, the serif at 38 in four), five styles of supporting line (16 grey;
   14 lighter in Photos; spaced capitals in Sangeet; a second, smaller size in Today and Events), seven page widths
   (1040 to 1180, and 760 or 700 for reading pages, so the room's drawing moved from room to room), a room's main action
   down in its empty place in four rooms, four sizes of small grey label and a 20-point section heading among 16s.
   Here, one of each. The serif is for the house's names and page titles (his rule); everything else is the phone's
   own type. Inlined by views/preview/kit.js shell, on the page root's class pv-harmony. */

/* every page title in one face: live's own, the system font at 34 / 600 (26 on a phone), the four rooms that wore the serif
   included (Events, From the two of us, an album, After the wedding). His word on seeing the serif everywhere (4 October,
   evening, Family side by side): "the text on the headings looks different than live - but i like the one on live".
   The serif stays for names: the couple's, a family's side, a celebration's own page, a person's page. */
.pv-harmony .pv-head h1, .pv-harmony .pv-head.is-serif h1{font-family:var(--ui); font-weight:600; font-size:32px; line-height:1.12; letter-spacing:-.024em}
.pv-harmony .pv-msglist-h h1{font-family:var(--ui); font-weight:600; font-size:24px; letter-spacing:-.02em}
@media (max-width:1023px){ .pv-harmony .pv-head h1, .pv-harmony .pv-head.is-serif h1, .pv-harmony .pv-msglist-h h1{font-size:24px} }

/* one supporting line: 16, grey, in its own case; a second line in the same voice */
.pv-harmony .pv-head .pv-head-sub{font-size:16px; line-height:1.5; color:var(--ink-2)}
.pv-harmony .pv-head .pv-head-sub :is(.pv-small, .pvd-maybe, .pv-dateline){font:inherit; color:inherit; text-transform:none; letter-spacing:0}

/* one page width for every room, so the drawing keeps one corner; a reading page keeps its column under the full head */
/* (Messages too: it was 1160, 20 short of every room's edge; the home keeps its approved 1040, its feed reads best narrower) */
.pv-harmony:is(.pv-k-gallery, .pv-k-read, .pv-k-narrow, .pv-k-form, .pv-k-work, .pv-k-convo){--page:1180px}
.pv-harmony.pv-k-narrow .pv-main > :not(.pv-head, dialog, script){max-width:760px}
.pv-harmony.pv-k-form .pv-main > :not(.pv-head, dialog, script){max-width:700px}

/* the drawing never pushes the page down: in a head with no buttons it hangs from the name and its foot is let go */
@container (min-width:760px){
  .pv-harmony .pv-head-row:not(:has(.pv-head-acts)) .pv-head-mark{margin-bottom:-48px}
}

/* From the two of us: their two faces in the drawing's corner */
.pv-harmony .pv-head-mark:has(.pv-us-faces){display:flex; align-items:center; justify-content:flex-end}
.pv-harmony .pv-head-mark .pv-us-faces img{width:64px; height:64px}

/* one style for small grey labels over a group (the cards' bands use it already) */
.pv-harmony :is(.pv-roomgroup h2, .pv-msglist-sub, .pvm-label){font-size:var(--hd); font-weight:500; color:var(--ink-2); letter-spacing:0}
/* one size for a section's heading */
.pv-harmony .pv-h2{font-size:16px}

/* side-by-side columns start level: an empty note first in a column loses the 14 it carries above (Sangeet and From
   the two of us stood 14 and 15 points lower than the column beside them) */
.pv-harmony :is(.pv-col-main, .pv-col-side) > .pv-empty:first-child{padding-top:0}

/* ======================================================================================================================
   The body, as one system (4 October 2026, after the body audit — A&Mwedding/Body audit (4 Oct 2026).md — and his calls:
   "rooms card, drop the dateline, 44 on phone … then do the fixes"). Each rule names the finding it answers.
   ==================================================================================================================== */

/* 4.2 one card: the rooms' card everywhere — the home's open cards take its 12, its soft edge, its 18, and no shadow */
.pv-harmony .pvo{--o-r:12px; --o-pad:16px; --o-edge:var(--line); --o-lift:none}
@media (max-width:1023px){ .pv-harmony .pvo{--o-r:12px} }
.pv-harmony .pvo .pv-glance > summary{border-radius:12px}
.pv-harmony .pvo .pv-glance[open] > summary{border-radius:12px 12px 0 0}
.pv-harmony .pvo .pv-glance-in{border-radius:0 0 12px 12px}
.pv-harmony :is(.pv-hero, .pv-confirm){border-radius:12px}

/* 6.2 no spaced capitals: a dateline is words in their own case, the detail's size */
.pv-harmony .pv-dateline{font-size:var(--hd); font-weight:500; letter-spacing:0; text-transform:none}
.pv-harmony .pv-invcard-tx .pv-dateline{font-size:var(--hd)}

/* 5.3 on a phone every button is drawn at 44 */
@media (max-width:1023px){
  .pv-harmony .pv-btn, .pv-harmony .pv-btn.pv-sm, .pv-harmony .pv-head-acts .pv-btn{min-height:44px}
}

/* 1.1 headings: one size (an empty note's heading was 15.5, Planning's "Coming up" 17) */
.pv-harmony .pv-empty-h, .pv-harmony .pvr-plan .pvp-sp-h{font-size:16px}
/* 1.1 body: an empty note's words at the body's 15 */
.pv-harmony .pv-empty-t{font-size:var(--hb)}

/* 1.2 details: one size, one grey — 13.5 in --ink-3 (they were 12, 12.5, 13 and 13.5, in --ink-2 or --ink-3) */
.pv-harmony :is(.pvn-sundays, .pv-clocks-gap, .pvn-city-at, .pv-clock-where, .pvo-folk em, .pvo-folk .pvo-rel, .pvm-rel){font-size:var(--hd); color:var(--ink-2)}
.pv-harmony .pv-due{font-size:var(--hd)}
.pv-harmony .pv-due:not(.is-soon):not(.is-late){color:var(--ink-2)}

/* 1.3 one weight per role: pills 500, a chosen filter 500 (its tint says it is chosen), row titles 500, buttons 600 */
.pv-harmony main .pv-chip, .pv-harmony main .pvr-plan .pv-chip{font-weight:500}
.pv-harmony .pv-chips a[aria-current="true"]{font-weight:500}
.pv-harmony :is(.pvo-folk b, .pv-convo b, .pv-convo strong){font-weight:500}


/* 1.5 one face for codes: the sign-in code in the house's face wherever it is shown, as the links beside it are, its figures
   tabular (open: look, item L1: Inter; it was monospaced) */
.pv-harmony .pv-code{font-family:var(--ui); font-variant-numeric:tabular-nums}

/* 1.6 one figure: 36 for a page's big number (Guests' 28 now matches Money's 36) */
.pv-harmony .pv-big{font-size:32px}

/* 2.3 links: telephone numbers and the house's "more" links in one weight each */
.pv-harmony main a[href^="tel:"]:not(.pv-btn){font-weight:500}

/* 5.5 faces: people listed in a row are 40 (Messages' 44 matched to the home's 40) */
.pv-harmony .pv-convo .avatar{width:40px; height:40px; font-size:var(--hb)}

/* 5.6 icons: 14 · 16 · 18 · 20 (a 15 in three places goes to 16) */
.pv-harmony svg[width="15"]{width:16px; height:16px}

/* 3.2 one card padding (18) and one band (10 / 18): Settings' 20 and Family's taller side heads */
.pv-harmony .pv-card.pv-pad{padding:16px}
.pv-harmony .pvr-fam .pvm-head{padding-top:12px; padding-bottom:12px}

/* 2.1 the house's own greys only: Planning's strip was #F4F4F4 */
.pv-harmony .pvp-strip.is-it{background:var(--hover)}
/* 4.1 radii: 6 · 8 · 12 · round (Planning's strip was 5) */
.pv-harmony .pvp-strip{border-radius:6px}

/* 3.1 spacing on the scale (the week's day picker sat 22 above what follows) */
.pv-harmony .pv-days-nav{margin-bottom:24px}

/* 7.1 nothing under 11: the hours over "When can we talk?" (Map, Meetings) were 10 */
.pv-harmony .pv-srow.hours .h{font-size:11px}

/* 1.2 the rest of the details, by name: 13.5 in --ink-3 (a caption in a tight place — the home's day tiles, the map's
   hour strip and its key, the clock's "night" — stays at the scale's smallest step, 12) */
.pv-harmony :is(.pv-weekday > em, .pv-hours em, .pv-slot-tx > em, .pv-daystrip .pv-card > em, .pv-around-row > em,
  .pv-waiting > em, .pvm-seen, .pvm-head > p, .pvp-who > span:not(.avatar), .pvp-when, .pvp-s-m, .pvp-panel-note, .pv-aud-meta > span:not(.avatar),
  .pv-convo-top em){font-size:var(--hd); color:var(--ink-2)}
.pv-harmony .pv-srow > .lab{color:var(--ink-2)}
.pv-harmony main a[href^="tel:"]:not(.pv-btn){font-size:var(--hd)}
/* labels over a thing: 13.5 / 500 in --ink-3 */
.pv-harmony :is(.pv-togo > span, .pv-fromus-tx > em, .pv-nownext .pv-card > span, .pv-eyebrow){font-size:var(--hd); font-weight:500; color:var(--ink-2)}
.pv-harmony .pv-answer-k{font-size:var(--hd); font-weight:500}
.pv-harmony .pvp-day .pv-daytag{font-size:var(--hd)}
/* a tag is a pill: 12.5 */
.pv-harmony .pv-tagchip{font-size:13px}

/* 5.1 one row: a face or an icon, two lines, 12 over and under: about 64 tall wherever people and things are listed (the home's people were 54, Messages 60) */
.pv-harmony .pv-convo{padding-top:12px; padding-bottom:12px}
/* and a row's own padding is on the spacing scale: 12 over and under (it was 11); a room's looser or tighter list keeps its own */
:where(.pv-harmony) .pv-row-main{padding-top:12px; padding-bottom:12px}

/* 5.2 a field you write a reply in is 44, as every field is */
.pv-harmony .pv-cbox input[type=text]{min-height:44px}

/* 4.1 radii: Planning's week panel (10), its chooser (14) and the message bubbles (14) take the card's 12 */
.pv-harmony :is(.pvp-wkag, .pvp-ch, .pv-bub){border-radius:12px}

/* 2.3 a link that leads to more of the house is the "more" link everywhere: 13.5 / 600 in wine ("Every room of the house" was 500) */
.pv-harmony .pv-small > a[href$="/rooms"]{font-size:var(--hd); font-weight:500; color:var(--wine)}

/* 1.1 / 1.3 the last twins, by name: a thing's title in a run sheet is a row's title (15 / 500, was 15.5 / 600); a
   conversation's name is a heading (16 / 600, was 15.5); the lights' line is a detail (13.5, was 14); a hashtag over a
   group on the timeline is a band label's size (13.5); every button's words are 600 (a row's "Call" was 500) */
.pv-harmony .pv-slot-tx > b{font-size:var(--hb); font-weight:500}
.pv-harmony .pv-thread-who > :is(b, a){font-size:16px}
.pv-harmony .pvn-say{font-size:var(--hd)}
.pv-harmony .pvp-tp-n > b{font-size:var(--hd)}



/* 5.1 a row in a side column (300 wide) with two buttons at its end puts them under its words, where the words start:
   beside them, Today's "Who to call" had 90 points left and "Petal & Brass Décor" broke over three lines */
@container (min-width:880px){
  .pv-harmony .pv-col-side .pv-row:has(> .pv-row-r > .pv-btn + .pv-btn){flex-wrap:wrap}
  .pv-harmony .pv-col-side .pv-row:has(> .pv-row-r > .pv-btn + .pv-btn) > .pv-row-r{flex-basis:100%; max-width:none; justify-content:flex-start; margin-top:-4px; padding:0 0 12px 48px}
  .pv-harmony .pv-col-side .pv-row:has(> .pv-row-main > .avatar):has(> .pv-row-r > .pv-btn + .pv-btn) > .pv-row-r{padding-left:48px}
}

/* ======================================================================================================================
   The second sweep (4 October, evening): the whole house measured again with the rules above on, and every value still
   off the scale set to its step. The scale, for the guideline: words 11 · 12.5 · 13.5 · 15 · 16, the serif 15 · 17 ·
   24 · 30 · 38 · 48, figures 20 · 36; space 4 · 8 · 12 · 16 · 24 · 32 (a card's own inset 18, a column gutter 40).
   ==================================================================================================================== */

/* 1.2 every detail is 13.5 in --ink-3 (the base rules that still drew 12.5 or 13, by their own selectors) */
.pv-harmony :is(.pv-hint, .pv-choice-tx em, .pv-mini em, .pv-meta, .pv-poll-note, .pv-digest-row em, .pv-outlink-tx em,
  .pv-invcard-tx em, .pv-task-meta, .pv-side-head em, .pv-circles-empty, .pv-vrow-main em, .pv-hh-meta, .pv-figure span,
  .pv-weekday li em, .pv-hours li em, .pv-daymini em, .pv-slot-tx em, .pv-meeting-tx em, .pv-docfile em, .pv-upfile .say,
  .pv-whoside, .pv-whomore, .pv-dish-note, .pv-say-who, .pvo-msg-top time, .pv-opt-who, .pv-c-meta, .pv-folk em,
  .pv-around-row em, .pv-waiting em, .pv-emptyart figcaption, .pv-aud-foot p, .pv-table th em, .pv-table td em,
  .pvo.pvf .pv-feed .pva-albums em, .pvr-plan .pvp-qdue, .pv-daycard-tx > em, .pvo-msg-say){font-size:var(--hd); color:var(--ink-2)}
/* the same size where the words are a link or a control's, in their own colour */
.pv-harmony :is(.pv-g-lab, .pv-pinstrip a, .pv-clip span, .pv-linkpick > summary, .pv-msg-quote, .pv-msg-link, .pv-replying){font-size:var(--hd)}
/* labels over a thing: 13.5 / 500 in --ink-3 (these were 12.5 / 600, or 13 / 600) */
.pv-harmony :is(.pv-invite em, .pv-nextdate em, .pv-listcount, .pv-aud-g legend, .pv-table thead th, .pv-pinrow, .pv-weekday h3){font-size:var(--hd); font-weight:500; color:var(--ink-2)}
/* a caption in a tight place (a day tile, a clock, a calendar's cells, a count in a tab, the nav's small words): 12.5,
   the pill's size, so 12, 11.5 and 12.5 are one step */
.pv-harmony :is(.pv-day em, .pv-clock-part, .pv-cal-dow, .pv-cal-date, .pv-cal-item, .pv-tabs-n, .pv-nav-all, .pv-nav-note,
  .pv-cal-more, .pv-face em, .pv-datebox em, .pv-menu-sep){font-size:13px}
.pv-harmony .pv-album-tx .pv-chip{font-size:13px; font-weight:500}

/* 1.1 body words are 15 (they were 14, 14.5 and 15.5 room by room); a row's title 15 / 500 */
.pv-harmony :is(.pv-confirm, .pv-strip, .pv-table, .pv-compose-who, .pvo .pvo-messages .pv-quiet, .pv-mood .pv-quiet,
  .pv-fromus-tx span, .pv-invite span span, .pv-hashnote, .pv-filtered, .pv-thread-empty, .pv-film-tx p.pv-film-b, .pv-piece-tx p){font-size:var(--hb)}
.pv-harmony .pv-big span{font-size:var(--hb)}
.pv-harmony :is(.pv-weekday li b, .pv-hours li b, .pv-mini a, .pv-mini b, .pv-folk b, .pv-around-row b, .pv-phone b){font-size:var(--hb); font-weight:500}
/* a control's words: 13.5 at 34 tall (a chooser, a two-way switch, a count), 14.5 in a menu */
.pv-harmony :is(.pv-seg2 span, .pv-selbar select, .pv-selbar-n, .pv-whopick select, .pv-counts b, .pv-opt-n){font-size:14px}
.pv-harmony .pv-aud-o{font-size:14px}
.pv-harmony :is(.pv-link-btn, .pv-back){font-size:14px}
/* 5.8 headings: a side column's 15.5 and the calendar's month at 19 (17 on a phone) take the section heading's 16 */
.pv-harmony :is(.pv-sidecol .pv-panel-h, .pvr-plan .pvp-cal-head h2){font-size:16px}
/* a post's or a task's own title on its page: 24 (it was 26, between the scale's steps) */
.pv-harmony .pv-task-head h1{font-size:24px}

/* 1.4 the serif in its steps: 48 the couple's names, 38 a page's title (30 on a phone or in a pane), 24 a name, 17 a name
   in a list or on a card, 15 a line on a card */
.pv-harmony .pv-daycard-tx > b{font-size:24px}
.pv-harmony .pv-daycard-line{font-size:16px}
.pv-harmony :is(.pv-update-b.pv-prose p, .pv-dayhero-line){font-size:16px}
.pv-harmony .pv-fromus-tx b{font-size:16px}
.pv-harmony :is(.pv-dayhero-tx h1, .pv-profile-tx h1){font-size:32px}
@media (max-width:1023px){ .pv-harmony :is(.pv-dayhero-tx h1, .pv-profile-tx h1){font-size:32px} }

/* 1.6 a figure: 36 (the home's countdown was 40 on a laptop), or 20 in a small box */
@media (min-width:1024px){ .pv-harmony .pv-togo b{font-size:32px} }

/* 5.5 faces: the bride and groom on Family are 64 like everyone beside them (80 was the house's only 80) */
.pv-harmony .pvr-fam .pvm-lead .avatar{width:64px; height:64px; font-size:24px}
.pv-harmony .pvr-fam .pvm-lead .pvm-name{font-size:var(--hb)}
.pv-harmony .pvr-fam .pvm-lead .pvm-msg{left:calc(50% + 42px)}

/* 2.3 two link styles. An inline link is wine, 500, underlined, telephone numbers and #tags included (a link told only
   by colour fails Apple's "nothing by colour alone"); the confirm banner's link is one too, not warn-coloured 600. */
.pv-harmony main a[href^="tel:"]:not(.pv-btn), .pv-harmony main a.tag{text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px}
.pv-harmony .pv-confirm a{color:var(--wine); font-weight:500}

/* 2.1 / 2.2 colours from tokens only: a calendar's days outside the month on --sunk (it was the hover colour), the
   confirm card's edge mixed from --warn (it was #EAD9B3) */
.pv-harmony .pvr-plan .pvp-cell.is-out{background:var(--hover)}
.pv-harmony .pv-confirm{border-color:color-mix(in srgb, var(--warn) 20%, var(--warn-tint))}

/* 3.1 space on the scale. Mirrors of the base rules at the same weight (:where), so a room's own exceptions still win. */
/* a heading to what it heads: 12 */
:where(.pv-harmony) .pv-panel-top{margin-bottom:12px}
:where(.pv-harmony) .pv-sec-h{margin-bottom:12px}
:where(.pv-harmony) .pv-h2{margin:32px 0 12px}
:where(.pv-harmony) .pv-back{margin-bottom:12px}
:where(.pv-harmony) .pv-eyebrow{margin-bottom:4px}
:where(.pv-harmony) .pv-panel-top + .pv-kv{margin-top:0}
/* one block under another, and a bar over the list it filters: 16 */
:where(.pv-harmony) .pv-mt{margin-top:16px}
:where(.pv-harmony) .pv-mb{margin-bottom:16px}
:where(.pv-harmony) .pv-chips{margin-bottom:16px}
:where(.pv-harmony) .pv-housebar{margin-bottom:16px}
:where(.pv-harmony) .pv-findbar{margin-bottom:16px}
:where(.pv-harmony) .pv-msglist-sub{margin-top:16px}
:where(.pv-harmony) .pvr-plan .pvp-en .pv-status .pv-actions{margin-top:16px}
:where(.pv-harmony) .pv-status .pv-answerform{margin-top:16px}
:where(.pv-harmony) .pvr-plan .pvp-tl5 .pvp-sp{margin-top:16px}
:where(.pv-harmony) .pvr-day .pvd-say{margin-bottom:16px}
:where(.pv-harmony) .pv-card.pv-map{margin-bottom:16px}
:where(.pv-harmony) .pv-meeting-f{margin-top:16px}
:where(.pv-harmony) .pv-glance-in > .pv-sect{margin-bottom:16px}
.pv-harmony .pvo{--o-gap:16px}
/* inside a card, one block to the next: 12 */
:where(.pv-harmony) .pv-meeting-b{gap:12px; margin-top:12px}
:where(.pv-harmony) .pv-update-t{margin-top:12px}
:where(.pv-harmony) .pv-answer{margin-bottom:12px}
/* a small step: 8 */
:where(.pv-harmony) .pvr-plan .pvp-sp-head{margin-bottom:8px}
:where(.pv-harmony) .pv-hint{margin-top:8px}
:where(.pv-harmony) .pvr-fam .pvm-side > .pvm-lead + .pvm-parents{margin-top:8px}
/* a page's opening block to what follows: 24; one section to the next: 32 (a section's rule to its heading: 24) */
:where(.pv-harmony) .pv-profile{margin-bottom:24px}
:where(.pv-harmony) .pv-task-head{margin-bottom:24px}
:where(.pv-harmony) .pv-pager{margin:24px 0}
:where(.pv-harmony) .pvo > .pv-days-nav{margin-bottom:24px}
:where(.pv-harmony) .pvr-fam .pvm-side > .pvm-head + *{margin-top:24px}
:where(.pv-harmony) .pvr-fam .pvm-group{margin-top:24px; padding-top:16px}
:where(.pv-harmony) .pv-sect{margin-bottom:32px; padding-top:24px}
:where(.pv-harmony) .pv-sidecol .pv-sect{margin-bottom:32px}
:where(.pv-harmony) .pv-sec{margin-top:32px}
:where(.pv-harmony) .pvr-fam .pvm-sides{margin-bottom:32px}
:where(.pv-harmony) .pvr-fam .pvm-planner{margin-bottom:32px}
:where(.pv-harmony) .pvr-hh .pvh-answer{margin-bottom:32px}

/* 6.1 a time in words needs its room: "2:30 pm" in the day's run sheet touched the line beside it in a 58 column */
.pv-harmony .pvr-day .pvd-seq li{grid-template-columns:76px minmax(0, 1fr)}   /* (the colours round's fixes: 76 as the week's, the widest time, "12:45 pm", is 73.7) */

/* 3.2 the home's cards are a card: an inset of 18 (16 on a phone), like every room's (they were 20 / 22 / 18) */
:where(.pv-harmony) .pvo .pv-sidecol > .pv-sect.pv-sect,
:where(.pv-harmony) .pvo .pvo-around > .pv-sect{padding:16px}
@container (max-width:639px){
  :where(.pv-harmony) .pvo .pv-sidecol > .pv-sect.pv-sect,
  :where(.pv-harmony) .pvo .pvo-around > .pv-sect{padding:16px}
}
/* every band sits 12 over what it heads (a room's card had 14, the home's 11, the home on a phone 7), and meets the
   card's edges at its new inset (a card .pv-pad is 18 here, its band was drawn for 20) */
:where(.pv-harmony.pv-bands) .pv-card.pv-panel > .pv-panel-top{margin:-16px -16px 12px}
:where(.pv-harmony.pv-bands) .pvo :is(.pv-sidecol > .pv-sect.pv-sect:not(.pvf .pvf-coming), .pvo-around > .pv-sect, .pva-you) > .pv-panel-top{margin:-16px -16px 12px; padding-inline:16px}
:where(.pv-harmony.pv-bands) .pv-card.pv-pad > h2.pv-panel-h:not(:not(input[type=hidden]) ~ *){margin:-16px -16px 12px; padding-inline:16px}
:where(.pv-harmony.pv-bands) .pv-card.pv-pad.pv-form > h2.pv-panel-h:not(:not(input[type=hidden]) ~ *){margin-bottom:0}
@media (max-width:1023px){
  :where(.pv-harmony.pv-bands) .pv-card.pv-panel > .pv-panel-top{margin:-16px -16px 12px}
  :where(.pv-harmony.pv-bands) .pv-card.pv-pad > h2.pv-panel-h:not(:not(input[type=hidden]) ~ *){margin:-16px -16px 12px; padding-inline:16px}
  :where(.pv-harmony.pv-bands) .pv-card.pv-pad.pv-form > h2.pv-panel-h:not(:not(input[type=hidden]) ~ *){margin-bottom:0}
}
@container (max-width:639px){
  :where(.pv-harmony.pv-bands) .pvo :is(.pv-sidecol > .pv-sect.pv-sect:not(.pvf .pvf-coming), .pvo-around > .pv-sect, .pva-you) > .pv-panel-top{margin:-16px -16px 12px; padding-inline:16px}
}
:where(.pv-harmony) .pvr-day .pvd-plan > .pv-h2{margin-bottom:12px}
:where(.pv-harmony) .pvr-fam .pvm-side > .pv-btn{margin-top:16px}

/* the last odd sizes, room by room: Planning's details at 13.5, its answers and empty days at 15, its timeline's
   captions at 12.5; a poll's choice is a row's title (15 / 500); the map's good hours are body words (15) */
.pv-harmony :is(.pvr-plan .pvp-meta, .pvr-plan .pvp-thing-m, .pvr-plan .pvp-hero-x span, .pvr-plan .pvp-hero-x em, .pvr-plan .pvp-keep em,
  .pvr-plan .pvp-untied, .pvr-plan .pvp-aq, .pvr-plan .pvp-tk-cd, .pva-cap-by, .pva-albums em, .pva-one-meta){font-size:var(--hd); color:var(--ink-2)}
.pv-harmony :is(.pvr-plan .pvp-s-o, .pvr-plan .pvp-ag-none > p, .pvr-plan .pvp-ag-ms, .pvr-plan .pvp-showing, .pvr-pic .pvq-none){font-size:var(--hb)}
.pv-harmony .pvr-plan .pvp-agenda-h .pvp-today-w{font-size:var(--hd)}
.pv-harmony :is(.pvr-plan .pvp-tp-n em, .pvr-plan .pvp-ch-mo, .pvr-plan .pvp-ch-ms::before){font-size:13px}
@media (min-width:1024px){
  .pv-harmony .pvr-plan .pvp-dow{font-size:13px}
  .pv-harmony .pvr-plan .pvp-num, .pv-harmony .pv-actnum{font-size:var(--hd)}
}
.pv-harmony .pv-opt-when b{font-size:var(--hb); font-weight:500}
.pv-harmony .pv-opt-when em{font-size:var(--hd)}
.pv-harmony .pv-talk li{font-size:var(--hb)}
.pv-harmony .pv-talk li b{font-size:var(--hb)}
.pv-harmony .pv-srow > .lab{font-size:12.5px}
/* the mood's line on the home: a control's words, 13.5 */
.pv-harmony .pvf-today > summary :is(b, span){font-size:14px}

/* 2.3 an inline link in a list of facts is underlined like any other; a link to more of the house stands alone, so
   it is not ("Every room of the house", 13.5 / 600 in wine, as "All of them" and "In the Plan" are) */
.pv-harmony .pv-kv dd a{text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px}
.pv-harmony .pv-around-sect .pv-small > a{text-decoration:none}

/* 3.2 a card's words start 18 in, everywhere: the couple's update (20), the Family strip and the calendar (16) */
:where(.pv-harmony) .pv-update-t{margin-inline:16px}
:where(.pv-harmony) .pv-update-b{padding-inline:16px}
:where(.pv-harmony) .pv-ackline{margin-inline:16px}
:where(.pv-harmony) .pv-strip{padding:12px 16px}
:where(.pv-harmony) .pvr-gl .pv-card.pv-panel > .pv-panel-top{margin-bottom:12px}
/* Today's Now / Next: its label a label, its details a detail */
.pv-harmony .pv-nn > span{font-size:var(--hd); font-weight:500}
.pv-harmony .pv-nn em{color:var(--ink-2)}
/* the map's key is a caption (12.5) */
.pv-harmony .pv-key span{font-size:12.5px}


/* the two sizes that step up on a phone, as variables: a detail (13.5, a phone 14) and a line of body words or a row's
   title (15, a phone 16). Every rule above that draws one of them uses the variable, so its own weight still decides. */
.pv-harmony{--hd:14px; --hb:15px}   /* (finesse: rules, item 3) details 14 on a laptop as on a phone (it was 13.5) */
@media (max-width:1023px){ .pv-harmony{--hd:14px; --hb:16px} }

/* 7.2 on a phone the words are a step larger, as Apple sizes a phone's text above a laptop's: a detail 14 (13.5 on a
   laptop), a row's title and a line of body words 16 (15), what you read already 16. Measured on 43 pages at 390: 1,868
   pieces of text at 13.5 and 577 at 15; these are the rules behind nearly all of them. A caption in a tight place (a
   calendar's cells, the timeline's chart, the map's strip) keeps its size. */
/* (finesse: rules, item 3) details 14 at every width (this list was the phone's only); a row's title and body words 16 stay the phone's */
  .pv-harmony :is(.pv-row-m, .pv-hh-meta, .pv-small, .pv-meta, .pv-hint, .pvp-thing-m, .pvr-plan .pvp-meta, .pv-slot-tx em,
    .pv-convo-last, .pvm-rel, .pvm-seen, .pv-kv dt, .pv-choice-tx em, .pv-vrow-main em, .pv-vrow-who span:not(.avatar), .pv-aud-meta > span:not(.avatar),
    .pv-daycard-tx > em, .pv-around-row em, .pv-folk em, .pvo-folk em, .pv-waiting em, .pv-mini em, .pv-task-meta, .pv-due,
    .pv-weekday li em, .pv-hours li em, .pv-meeting-tx em, .pv-opt-when em, .pv-docfile em, .pv-outlink-tx em, .pv-invcard-tx em,
    .pv-c-meta, .pvo-msg-say, .pvo-msg-top time, .pv-nn em, .pv-convo-top em, .pvm-head > p, .pvp-s-m, .pvp-who > span:not(.avatar),
    .pvp-when, .pvp-panel-note, .pv-hh-m2, .pva-cap-by, .pva-albums em, .pva-one-meta){font-size:14px}
@media (max-width:1023px){
  .pv-harmony :is(.pv-row-t, .pv-hh-name, .pvp-t, .pv-slot-tx > b, .pv-convo-top > b, .pvm-name, .pv-choice-tx > b, .pv-vrow-main > b,
    .pv-task-t, .pv-mini a, .pv-mini b, .pv-weekday li b, .pv-hours li b, .pv-kv dd, .pv-table td, .pv-quiet, .pv-empty-t,
    .pvo-folk b, .pv-folk b, .pv-around-row b, .pv-opt-when b, .pvr-plan .pvp-s-o, .pv-talk li, .pv-fromus-tx span, .pv-strip){font-size:16px}
}

/* 7.2, the rest: every other rule in the house that draws words at the detail step (13 or 13.5) or the body step (15),
   mirrored for a phone at its own weight (:where), so a room's sharper rule still wins: 14 and 16. Controls, pills, the
   page heads and the captions of tight places (a calendar, a chart, the map, a tile) are left as they are. Listed by a
   script over the stylesheets on 4 October (152 detail rules, 53 body rules); a new rule at 13.5 or 15 joins it here. */
/* (finesse: rules, item 3) details 14 on a laptop as on a phone: the detail rules below are read at every width; the body step (16) stays the phone's */
  :where(.pv-harmony) .pv-eyebrow,
  :where(.pv-harmony) .pv-small,
  :where(.pv-harmony) .pv-hint,
  :where(.pv-harmony) .pv-due,
  :where(.pv-harmony) .pv-more-link,
  :where(.pv-harmony) .pv-end,
  :where(.pv-harmony) .pv-choice-tx em,
  :where(.pv-harmony) .pv-dayt,
  :where(.pv-harmony) .pv-dialog-head p,
  :where(.pv-harmony) .pv-panel-h em,
  :where(.pv-harmony) .pv-row-m,
  :where(.pv-harmony) .pv-kv dt,
  :where(.pv-harmony) .pv-mini em,
  :where(.pv-harmony) .pv-pinrow,
  :where(.pv-harmony) .pv-meta,
  :where(.pv-harmony) .pv-poll-note,
  :where(.pv-harmony) .pv-earlier,
  :where(.pv-harmony) .pv-c-name,
  :where(.pv-harmony) .pv-feedcol > .pv-compose .pv-way,
  :where(.pv-harmony) .pv-togo span,
  :where(.pv-harmony) .pv-face b,
  :where(.pv-harmony) .pv-digest-row em,
  :where(.pv-harmony) .pv-sec-h p,
  :where(.pv-harmony) .pv-album-tx em,
  :where(.pv-harmony) .pv-outlink-tx em,
  :where(.pv-harmony) .pv-photo-by,
  :where(.pv-harmony) .pv-invcard-tx em,
  :where(.pv-harmony) .pv-task-rest,
  :where(.pv-harmony) .pv-task-meta,
  :where(.pv-harmony) .pv-convo-last,
  :where(.pv-harmony) .pv-pinstrip a,
  :where(.pv-harmony) .pv-msg-quote,
  :where(.pv-harmony) .pv-msg-link,
  :where(.pv-harmony) .pv-attached,
  :where(.pv-harmony) .pv-replying,
  :where(.pv-harmony) .pv-side-head em,
  :where(.pv-harmony) .pv-circles-empty,
  :where(.pv-harmony) .pv-profile-stats,
  :where(.pv-harmony) .pv-vrow-main em,
  :where(.pv-harmony) .pv-vrow-who,
  :where(.pv-harmony) .pv-evline,
  :where(.pv-harmony) .pv-hh-meta,
  :where(.pv-harmony) .pv-hh-inv,
  :where(.pv-harmony) .pv-hh-exp,
  :where(.pv-harmony) .pv-fin,
  :where(.pv-harmony) .pv-dc,
  :where(.pv-harmony) .pv-bynames,
  :where(.pv-harmony) .pv-figure span,
  :where(.pv-harmony) .pv-time,
  :where(.pv-harmony) .pv-daymini em,
  :where(.pv-harmony) .pv-nn em,
  :where(.pv-harmony) .pv-slot-tx em,
  :where(.pv-harmony) .pv-slot-state,
  :where(.pv-harmony) .pv-slot-edit > summary,
  :where(.pv-harmony) .pv-meeting-tx em,
  :where(.pv-harmony) .pv-clip span,
  :where(.pv-harmony) .pv-roomgroup h2,
  :where(.pv-harmony) .pv-roomrow em,
  :where(.pv-harmony) .pv-docfile em,
  :where(.pv-harmony) .pv-thx-edit > summary,
  :where(.pv-harmony) .pv-upbar,
  :where(.pv-harmony) .pv-who-k,
  :where(.pv-harmony) .pv-fieldk,
  :where(.pv-harmony) .pv-upfile .say,
  :where(.pv-harmony) .pv-whoside,
  :where(.pv-harmony) .pv-whomore,
  :where(.pv-harmony) .pv-stat,
  :where(.pv-harmony) .pv-way,
  :where(.pv-harmony) .pv-dish-note,
  :where(.pv-harmony) .pv-say-who,
  :where(.pv-harmony) .pvo .pvo-status,
  :where(.pv-harmony) .pvo-memory-tx em,
  :where(.pv-harmony) .pvo-folk em,
  :where(.pv-harmony) .pvo.pvf .pvo-around .pv-around-row b,
  :where(.pv-harmony) .pvo.pvf .pv-feed .pva-albums em,
  :where(.pv-harmony.pv-bands) .pv-card.pv-panel > .pv-panel-top,
  :where(.pv-harmony.pv-bands) .pv-card.pvp-group > .pvp-group-h,
  :where(.pv-harmony.pv-bands) .pv-card.pvp-ask > .pvp-ask-h,
  :where(.pv-harmony.pv-bands) .pv-card.pv-listcard > .pv-moneygroup-h,
  :where(.pv-harmony.pv-bands) .pv-card.pv-listcard > .pv-vhead,
  :where(.pv-harmony.pv-bands) .pv-card.pv-fold > summary,
  :where(.pv-harmony.pv-bands) .pvo :is(.pv-sidecol > .pv-sect.pv-sect:not(.pvf .pvf-coming), .pvo-around > .pv-sect, .pva-you) > .pv-panel-top,
  :where(.pv-harmony.pv-bands) .pv-card.pv-panel > .pv-panel-top .pv-panel-h,
  :where(.pv-harmony.pv-bands) .pv-card.pv-panel > .pv-panel-top .pv-panel-h em,
  :where(.pv-harmony.pv-bands) .pvo :is(.pv-sidecol > .pv-sect.pv-sect:not(.pvf .pvf-coming), .pvo-around > .pv-sect, .pva-you) > .pv-panel-top .pv-panel-h,
  :where(.pv-harmony.pv-bands) .pvo :is(.pv-sidecol > .pv-sect.pv-sect:not(.pvf .pvf-coming), .pvo-around > .pv-sect, .pva-you) > .pv-panel-top .pv-panel-h em,
  :where(.pv-harmony.pv-bands) .pv-card.pvp-group > .pvp-group-h > span,
  :where(.pv-harmony.pv-bands) .pv-card.pv-listcard > .pv-moneygroup-h *,
  :where(.pv-harmony.pv-bands) .pv-card.pv-listcard > .pv-vhead > span,
  :where(.pv-harmony.pv-bands) .pv-card.pv-fold > summary *:not(svg, svg *),
  :where(.pv-harmony) .pva-cap-by,
  :where(.pv-harmony) .pva-albums em,
  :where(.pv-harmony) .pva-one-meta,
  :where(.pv-harmony) .pva.is-back .pvn-city-at,
  :where(.pv-harmony) .pva .pvn-thread,
  :where(.pv-harmony) .pva .pvn-album-tx em,
  :where(.pv-harmony) .pva .pv-c-meta,
  :where(.pv-harmony) .pva .pv-feedcol > .pv-compose .pv-way,
  :where(.pv-harmony) .pva .pv-face em,
  :where(.pv-harmony) .pvr-pic .pvq-waiting em,
  :where(.pv-harmony) .pvr-pic .pvq-by,
  :where(.pv-harmony) .pvr-pic .pv-outlink-tx em,
  :where(.pv-harmony) .pvr-pic .pv-emptyart figcaption,
  :where(.pv-harmony) .pvr-pic .pvq-h-note,
  :where(.pv-harmony) .pvr-day .pvd-maybe,
  :where(.pv-harmony) .pvr-day .pvd-part .pvd-sum,
  :where(.pv-harmony) .pvr-fam .pvm-head p,
  :where(.pv-harmony) .pvr-fam .pvm-seen,
  :where(.pv-harmony) .pvr-plan .pvp-bar-l,
  :where(.pv-harmony) .pvr-plan .pvp-rest,
  :where(.pv-harmony) .pvr-plan .pvp-meta,
  :where(.pv-harmony) .pvr-plan .pvp-next-l,
  :where(.pv-harmony) .pvr-plan .pvp-panel-note,
  :where(.pv-harmony) .pvr-plan .pvp-s-q,
  :where(.pv-harmony) .pvr-plan .pvp-s-m,
  :where(.pv-harmony) .pvr-plan .pvp-group-h span,
  :where(.pv-harmony) .pvr-plan .pvp-agenda-h .pvp-today-w,
  :where(.pv-harmony) .pvr-plan .pvp-date-d,
  :where(.pv-harmony) .pvr-plan .pvp-thing-m,
  :where(.pv-harmony) .pvr-plan .pvp-ask-h .pvp-ask-by,
  :where(.pv-harmony) .pvr-plan .pvp-ask-h em,
  :where(.pv-harmony) .pvr-plan .pvp-sp-m,
  :where(.pv-harmony) .pvr-plan .pvp-sp-none,
  :where(.pv-harmony) .pvr-plan .pvp-hero-x span,
  :where(.pv-harmony) .pvr-plan .pvp-hero-x em,
  :where(.pv-harmony) .pvr-plan .pvp-keep em,
  :where(.pv-harmony) .pvr-plan .pvp-tk-foot,
  :where(.pv-harmony) .pvr-plan .pvp-en .pv-kv dt,
  :where(.pv-harmony) .pvr-plan .pvp-en-hist > details > summary,
  :where(.pv-harmony) .pvr-gl .pv-listcount,
  :where(.pv-harmony) .pvr-gl .pv-hhs-head,
  :where(.pv-harmony) .pvr-gl .pv-card.pv-panel > .pv-panel-top .pv-panel-h,
  :where(.pv-harmony) .pvr-gl .pv-card.pv-panel > .pv-panel-top .pv-panel-h em,
  :where(.pv-harmony) .pvr-gl .pvg-found,
  :where(.pv-harmony) .pvr-gl .pvg-clear,
  :where(.pv-harmony) .pvn .pvn-sundays,
  .pv-harmony .pvf-today > summary :is(b, span){font-size:14px}
@media (max-width:1023px){
  :where(.pv-harmony) .pv-list a,
  :where(.pv-harmony) .pv-h3,
  :where(.pv-harmony) .pv-quiet,
  :where(.pv-harmony) .pv-choice-tx b,
  :where(.pv-harmony) .pv-row-t,
  :where(.pv-harmony) .pv-kv dd,
  :where(.pv-harmony) .pv-post-l1,
  :where(.pv-harmony) .pv-opt,
  :where(.pv-harmony) .pv-c-tx,
  :where(.pv-harmony) .pv-todo-tx,
  :where(.pv-harmony) .pv-todaycard p,
  :where(.pv-harmony) .pv-digest-h p,
  :where(.pv-harmony) .pv-photo-cap.is-empty,
  :where(.pv-harmony) .pv-taskgroup-h,
  :where(.pv-harmony) .pv-task-t,
  :where(.pv-harmony) .pv-convo-top b,
  :where(.pv-harmony) .pv-msg-tx,
  :where(.pv-harmony) .pv-vrow-main b,
  :where(.pv-harmony) .pv-hh-name,
  :where(.pv-harmony) .pv-ledger-main p,
  :where(.pv-harmony) .pv-amt,
  :where(.pv-harmony) .pv-moneygroup-h,
  :where(.pv-harmony) .pv-dayhero-where,
  :where(.pv-harmony) .pv-feature p,
  :where(.pv-harmony) .pv-talk .pv-talk-now,
  :where(.pv-harmony) .pv-whoname,
  :where(.pv-harmony) .pv-say-tx,
  :where(.pv-harmony) .pvo-folk b,
  :where(.pv-harmony) .pvo-msg-top b,
  :where(.pv-harmony) .pva-albums b,
  :where(.pv-harmony) .pv-glance > summary .pva-one b,
  :where(.pv-harmony) .pvr-pic .pv-outlink-tx b,
  :where(.pv-harmony) .pvr-day .pvd-plan .pv-sect .pv-panel-h,
  :where(.pv-harmony) .pvr-fam .pvm-none,
  :where(.pv-harmony) .pvr-fam .pvm-name,
  :where(.pv-harmony) .pvr-plan .pvp-t,
  :where(.pv-harmony) .pvr-plan .pvp-group-h,
  :where(.pv-harmony) .pvr-plan .pvp-next-t,
  :where(.pv-harmony) .pvr-plan .pvp-ask-h,
  :where(.pv-harmony) .pvr-plan .pvp-ans,
  :where(.pv-harmony) .pvr-gl .pvh-answer p,
  :where(.pv-harmony) .pvn-say,
  :where(.pv-harmony) .pvn-album-tx span,
  .pv-harmony .pv-daycard-line{font-size:16px}
}

/* the phone pass's last few, found by measuring it: a topic's line on the timeline and the Planning filters' names are
   a detail and a label (they were 13), the celebrations' count line a detail; a calendar's weekday names a caption */
.pv-harmony :is(.pvr-plan .pvp-tp-w, .pv-daycard-n){font-size:var(--hd)}
@media (max-width:1023px){ .pv-harmony .pvr-plan .pvp-dow{font-size:13px} }
/* the serif on a phone keeps its steps: the greeting is a name (24, it was 22), a day tile's name a line on a card (15,
   it was 14); the couple's own names on the cover stay the house's display, sized with the cover */
@media (max-width:1023px){
  .pv-harmony .pvn-hello{font-size:24px}
  .pv-harmony .pv-day b{font-size:16px}
}
/* 1.2 the register's columns and a vendor's number are details: --ink-3, like the same words in the register's phone line */
.pv-harmony :is(.pv-hh-inv, .pv-hh-exp, .pv-vrow-who > span:not(.avatar)){color:var(--ink-2)}

/* 6.2 the sign-in door's dateline too: its own rule spaced the letters (.14em, .22em on a wide screen) and outweighed the
   one above; in words, unspaced, the size of the home cover's (he saw it on the door the same evening) */
.pv-harmony .pv-doorwrap.is-paper .pv-doorhead .pv-dateline{font-size:var(--hd); font-weight:500; letter-spacing:0; text-transform:none}

/* Planning's leading marks are one size: a question is the tick's own 24 circle with a ? in it (its drawn circle was 16
   inside the 24, so beside a task's circle the column looked out of line and its words further off; his "text not
   aligned with the tick option / question mark", 4 October evening) */
.pv-harmony .pvr-plan .pvp-q{box-sizing:border-box; border:1.5px solid var(--line); border-radius:50%}
.pv-harmony .pvr-plan .pvp-q svg{width:26px; height:26px; flex:none; stroke-width:1.5}
.pv-harmony .pvr-plan .pvp-q svg circle{display:none}

/* the couple's letters and their story in the house's own type, as every other post: the system font at the reading size
   (16, --ink). His words: "the font on the body text of a post versus… 'shown under your names'… I like that font… use it
   for the posts. So here, from the two of us, use that font. Also do the same in 'Our story'". */
.pv-harmony :is(.pv-update-b.pv-prose p, .pv-page-prose.is-story p, .pv-us-intro p){font-family:var(--ui); font-size:16px; line-height:1.6}
.pv-harmony .pv-update-b.pv-prose p, .pv-harmony .pv-page-prose.is-story p{color:var(--ink)}

/* ======================================================================================================================
   One frame for every page (5 October, lib/answer.js frameTrial; the page root's class pv-frame). His words, with the
   home beside the Mehendi's page: "on the home page we have some space on the right - on the events page - we have almost
   0 space on the right", then "let's use this width and center it in the space available (as nav bar on the left is using
   some)". Every page is the home's width, 1040, centred between the rooms' hairline and the window's edge (the shell's
   right padding matches the gap on the hairline's side, so the two margins are equal); inside the frame the home and the
   rooms split the same way, a side column of 300 and 40 between, so a post box is one width wherever it is. A reading
   page (760) and a form (700) keep their columns inside the frame, under its full-width head.
   ==================================================================================================================== */
.pv-harmony.pv-frame:is(.pv-k-feed, .pv-k-gallery, .pv-k-read, .pv-k-narrow, .pv-k-form, .pv-k-work, .pv-k-convo){--page:1040px}
@media (min-width:1024px){
  .pv-harmony.pv-frame .pv-main{margin-inline:auto}
  .pv-harmony.pv-frame .pv-shell{padding-right:24px}
}
@media (min-width:1024px){ .pv-harmony.pv-frame .pv-shell{padding-right:32px} }
@container (min-width:940px){
  .pv-harmony.pv-frame .pvo{grid-template-columns:minmax(0, 1fr) 300px; column-gap:32px}
}
.pv-harmony.pv-frame :is(.pv-cols-plan, .pv-cols-money){--side:300px}
/* (with the rooms' bar folded to its icons, lib/answer.js flowRail: its gap beside the hairline is 24, so the shell's right
   padding is 24 too, and the page stays centred between the two) */
@media (min-width:1024px){ .pv-harmony.pv-frame.pv-flow.pv-rail .pv-shell{padding-right:24px} }

/* one banner (the brand audit of 5 October, his "just adjust the spacing - leave the color for now"): the confirm card
   is spaced as the two bands over a page are, 12 above and below and 18 at the sides (16 on a phone); its colour stays */
.pv-harmony .pv-confirm{padding:12px 16px}
@media (max-width:1023px){ .pv-harmony .pv-confirm{padding:12px 16px} }


/* ===== preview-flow.css ===== */
/* The way through the house (in trial: lib/answer.js flowTrial; the word "flow" in HQ_TRY). Set inline after the
   house's other sheets by views/preview/kit.js shell; every rule is under .pv-flow, which only the trial puts on the
   page. What it draws is views/preview/flow.js: a thing's place in its run, on the line of the way back, and the
   page's ending, "From here". Sizes, gaps and corners are the house's own (docs/brand-guideline.md): detail 13.5 and
   body 15 (14 and 16 on a phone, --hd and --hb), the row (a 40 leading thing, a title, a detail, an arrow, 12 above and
   below, a --line-soft rule), buttons 34 with 8 corners (44 on a phone), 32 between sections, 40 between columns. */

/* 1. One page gives way to the next in a short cross-fade. The frame (the rooms, the lights, a phone's two bars) is
      the same picture in both, so it holds still and only the page changes. Still for anyone who asks for less motion. */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}
  :where(:root:not(:has(> .pv-k-door)))::view-transition-group(root){animation-duration:var(--dur-slow); animation-timing-function:ease}
}

/* 2. The line of the way back: at its other end, where this thing stands in its run, the one before and the next. */
.pv-flow .pv-backline{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px}
.pv-flow .pv-backline > .pv-back{margin-bottom:0; min-width:0}
.pv-flow .pv-backline > .pv-back span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* (the line stays as tall as the way back alone, so nothing under it moves: the 34 buttons reach 2 above and 2 below it) */
.pv-flow .pv-run{display:flex; align-items:center; gap:8px; flex:none; margin:-2px 0 -2px auto; font-size:var(--hd, 13.5px); color:var(--ink-2)}
.pv-flow .pv-run-at{margin-right:4px; white-space:nowrap}
.pv-flow .pv-run-at b{font-weight:500; color:var(--ink-2); font-variant-numeric:tabular-nums}
.pv-flow .pv-run-b{display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface); color:var(--ink-2)}
.pv-flow a.pv-run-b:hover{border-color:var(--line); background:var(--hover); color:var(--ink)}
.pv-flow .pv-run-b.is-off{border-color:var(--line); background:none; color:var(--ink-3)}
/* a way back the trail adds to a room that has none of its own sits where every other one does */
.pv-flow .pv-trailback span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:min(60vw, 420px)}

/* 3. The page's ending: the next step, then what goes with it. A label over a group, a rule, the house's rows. */
.pv-flow .pv-fromhere{margin:32px 0 0}
.pv-flow .pv-fromhere h2{margin:0; padding-bottom:8px; border-bottom:1px solid var(--line); font-size:var(--hd, 13.5px); font-weight:500; line-height:1.4; letter-spacing:0; color:var(--ink-2)}
.pv-flow .pv-fh-list{display:grid; grid-template-columns:1fr; gap:0 32px; margin:0; padding:0; list-style:none}
/* three doors side by side where all three fit; one to a line otherwise, never two and one left over */
@container (min-width:900px){ .pv-flow .pv-fh-list{grid-template-columns:repeat(3, minmax(0, 1fr))} }
/* (doors side by side are one height, so their rules stay level when one line runs to two) */
.pv-flow .pv-fh-list > li{display:flex}
.pv-flow .pv-fh-row{display:flex; flex:1; align-items:center; gap:12px; min-width:0; min-height:64px; padding:12px 0; border-bottom:1px solid var(--line); color:var(--ink)}
.pv-flow .pv-fh-lead{display:grid; place-items:center; flex:none; width:40px; height:40px; overflow:hidden; border-radius:var(--r-ctl); background:var(--surface); color:var(--ink-2)}
.pv-flow .pv-fh-lead.is-pic img{display:block; width:100%; height:100%; object-fit:cover}
.pv-flow .pv-fh-lead.is-face{border-radius:50%; background:none}
.pv-flow .pv-fh-lead.is-face .avatar{width:40px; height:40px}
.pv-flow .pv-fh-tx{display:flex; flex-direction:column; flex:1; min-width:0}
.pv-flow .pv-fh-tx b{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:var(--hb, 15px); font-weight:500; line-height:1.3}
.pv-flow .pv-fh-tx em{margin-top:0px; font-style:normal; font-size:var(--hd, 13.5px); line-height:1.4; color:var(--ink-2)}
.pv-flow .pv-fh-row > svg{flex:none; color:var(--ink-3)}
.pv-flow .pv-fh-row:hover b{color:var(--wine)}
.pv-flow .pv-fh-row:hover > svg{color:var(--wine)}

/* A page that reads in one column keeps its ending, and its line of the way back, to that column: one door to a line. */
.pv-flow.pv-k-narrow .pv-fromhere, .pv-flow.pv-k-narrow .pv-backline{max-width:760px}
.pv-flow .pvr-entry .pv-fromhere, .pv-flow .pvr-entry .pv-backline{max-width:720px}
.pv-flow.pv-k-narrow .pv-fh-list, .pv-flow .pvr-entry .pv-fh-list{grid-template-columns:1fr}

/* 4. A phone: one door to a line, and every press 44. */
@media (max-width:1023px){
  .pv-flow .pv-run{margin-block:0}
  .pv-flow .pv-run-b{width:44px; height:44px}
  .pv-flow .pv-run:not(.is-said) .pv-run-at span{display:none}
}

/* 5. A person's own line through the wedding (views/preview/line.js), on the home under the greeting. The day page's own
      sequence (public/preview-answer.css, .pvd-seq): when at the left, a rule, then the thing; here with what can be done
      about it at the row's end. A question opens on its box where it stands, on the house's paper, one at a time. */
.pv-flow .pv-line-list{display:grid; margin:0; padding:0; list-style:none}
.pv-flow .pv-line-row:not(.is-ask), .pv-flow .pv-line-open > summary{display:grid; grid-template-columns:96px minmax(0, 1fr) auto; align-items:start}
.pv-flow .pv-line-open > summary{list-style:none; cursor:pointer}
.pv-flow .pv-line-open > summary::-webkit-details-marker{display:none}
.pv-flow .pv-line-when{padding:12px 12px 0 0; font-size:var(--hd, 13.5px); font-weight:500; line-height:1.4; white-space:nowrap; color:var(--ink-2); font-variant-numeric:tabular-nums}
.pv-flow .pv-line-when .pv-line-h{display:block; font-weight:400; color:var(--ink-2)}
.pv-flow .pv-line-tx{display:flex; flex-direction:column; align-self:stretch; justify-content:center; min-width:0; min-height:44px; padding:12px 0 12px 16px; border-left:1px solid var(--line)}
.pv-flow .pv-line-t{font-size:var(--hb, 15px); font-weight:500; line-height:1.35; color:var(--ink); overflow-wrap:anywhere}
.pv-flow .pv-line-t:hover{color:var(--wine)}
.pv-flow .pv-line-t .pv-tone{margin:0 8px 0px 0; vertical-align:middle}
.pv-flow .pv-line-tx em{margin-top:0px; font-style:normal; font-size:var(--hd, 13.5px); line-height:1.4; color:var(--ink-2)}
.pv-flow .pv-line-act{align-self:center; padding-left:12px}
.pv-flow .pv-line-row.is-done .pv-line-t{font-weight:400; color:var(--ink-2)}
.pv-flow .pv-line-opened, .pv-flow .pv-line-open[open] .pv-line-closed{display:none}
.pv-flow .pv-line-open[open] .pv-line-opened{display:inline}
.pv-flow .pv-line-form{margin-left:96px; padding:0 0 12px 16px; border-left:1px solid var(--line)}
.pv-flow .pv-line-form > form{display:grid; gap:12px; padding:12px; border-radius:var(--r-ctl); background:var(--surface)}
.pv-flow .pv-line-form textarea{min-height:64px}
.pv-flow .pv-line-form .pv-actions{align-items:center; margin:0}
.pv-flow .pv-line-clear{display:flex; align-items:center; gap:8px; margin:12px 0 0; font-size:var(--hb, 15px); color:var(--ink-2)}
.pv-flow .pv-line-more{margin:12px 0 0}
@media (max-width:1023px){
  .pv-flow .pv-line-row:not(.is-ask), .pv-flow .pv-line-open > summary{grid-template-columns:96px minmax(0, 1fr)}
  .pv-flow .pv-line-act{grid-column:2; align-self:stretch; padding:0 0 8px 16px; border-left:1px solid var(--line)}
  .pv-flow .pv-line-tx{padding-bottom:8px}
  .pv-flow .pv-line-form{margin-left:0; padding-left:0; border-left:0}
}

/* 6. Carrying the subject (flow.js lensBar): one band over a page that has a celebration as its subject. Whose it is at
      the left (its painting, its name, its day), its rooms as the house's filter chips, and the way to let go at the
      end. The room under it shows only that celebration's part, so its own chooser of celebrations steps aside. */
.pv-flow .pv-lens{display:flex; align-items:center; gap:8px 16px; flex-wrap:wrap; margin:0 0 16px; padding:12px 16px; border-radius:var(--r-post); background:var(--surface)}
.pv-flow .pv-lens-id{display:flex; align-items:center; gap:12px; min-width:0; margin-right:8px; color:var(--ink)}
.pv-flow .pv-lens-id img{display:block; flex:none; width:40px; height:40px; border-radius:var(--r-ctl); object-fit:cover}
.pv-flow .pv-lens-id span{display:flex; flex-direction:column; min-width:0}
.pv-flow .pv-lens-id b{font-size:var(--hb, 15px); font-weight:500; line-height:1.3}
.pv-flow .pv-lens-id em{font-style:normal; font-size:var(--hd, 13.5px); line-height:1.4; color:var(--ink-2)}
.pv-flow .pv-lens-id:hover b{color:var(--wine)}
.pv-flow .pv-lens .pv-chips{margin:0; flex:1 1 auto; min-width:0}
.pv-flow .pv-lens-off{margin-left:auto; flex:none}
.pv-flow .pv-cols-money.is-one{display:block}
@media (max-width:1023px){
  .pv-flow .pv-lens, .pv-flow .pv-walk{padding:12px 16px}
  /* 9. its rooms in one line that scrolls, as the house's other rows of chips do on a phone (they wrapped to two) */
  .pv-flow .pv-lens .pv-chips{order:3; flex-basis:100%; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-right:-16px; padding-right:16px;
    -webkit-mask-image:linear-gradient(to right, var(--ink) calc(100% - 28px), transparent); mask-image:linear-gradient(to right, var(--ink) calc(100% - 28px), transparent)}
  .pv-flow .pv-lens .pv-chips::-webkit-scrollbar{display:none}
}

/* 7. The home (views/preview/next.js under the trial): one line under the greeting, the next moment that is theirs, in
      the dress of "How is today?" beside it (public/preview-open.css .pvf-today): it opens their whole line on their own
      page. And a question asked of you opens its box on its own card. */
.pv-flow .pvf-next{display:inline-flex; align-items:center; gap:8px; max-width:100%; min-height:36px; margin:12px 0 0; padding:4px 8px 4px 12px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink-2); vertical-align:top}
.pv-flow .pvf-next:hover{border-color:var(--line)}
.pv-flow .pvf-next b{flex:none; font-size:var(--hd, 13.5px); font-weight:500; color:var(--ink)}
.pv-flow .pvf-next span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--hd, 13.5px)}
/* (its day is never cut: a long name gives way first) */
.pv-flow .pvf-next i{flex:none; font-style:normal; font-size:var(--hd, 13.5px); color:var(--ink-2)}
.pv-flow .pvf-next svg{flex:none; color:var(--ink-2)}
.pv-flow .pvf-today + .pvf-next{margin-top:8px}
.pv-flow .pvn-answer{margin:12px 0 0}
.pv-flow .pvn-answer > form{display:grid; gap:12px; padding:12px; border-radius:var(--r-ctl); background:var(--surface)}
.pv-flow .pvn-answer textarea{min-height:64px}
.pv-flow .pvn-answer .pv-actions{align-items:center; margin:0}
/* (on a person's own page the line is the page's first thing, across both columns, with the room a section has under it) */
.pv-flow .pv-profile + .pv-line{margin:0 0 32px}

/* 8. Who of the house is in an act (views/preview/days.js actPage): their names on the act's page are doors to them;
      the picker in its form is the meeting's own, kept to a height so the form's other fields stay near. */
.pv-flow .pv-inact{display:flex; flex-wrap:wrap; gap:4px 16px}
/* (a person's name is ink, 600, with no underline: docs/brand-guideline.md, Links) */
.pv-flow .pv-kv dd .pv-inact a{display:inline-flex; align-items:center; gap:4px; font-weight:500; color:var(--ink); text-decoration:none; border-bottom:0; background:none}
.pv-flow .pv-kv dd .pv-inact a:hover{color:var(--wine)}
.pv-flow .pv-actpick{max-height:220px; overflow-y:auto; padding:0px}
.pv-flow .pv-kv dd a.pvh-who{display:inline-flex; align-items:center; gap:4px; font-weight:500; color:var(--ink); text-decoration:none; border-bottom:0; background:none}
.pv-flow .pv-kv dd a.pvh-who:hover{color:var(--wine)}

/* 9. What waits on a person is three rows and one fold on their page (his word: "show 3 and a dropdown to expand - it
      should not become a task page"). The fold is the house's own (kit.js fold), standing on the line's rule. */
.pv-flow .pv-line-row.is-more{display:block}
.pv-flow .pv-line-fold{margin:0}
.pv-flow .pv-line-fold > summary{display:flex; min-height:44px; margin-left:96px; padding:0 0 0 16px; border-left:1px solid var(--line)}
.pv-flow .pv-line-fold > .pv-line-list{margin:0}

/* 10. A walk through the house (flow.js walkBar): one band over the page for whoever asked for it, in the lens band's
       dress: what this room is for in a sentence, and the way to the next. */
.pv-flow .pv-walk{display:flex; align-items:center; gap:8px 16px; flex-wrap:wrap; margin:0 0 16px; padding:12px 16px; border-radius:var(--r-post); background:var(--surface)}
.pv-flow .pv-walk-at{display:flex; flex-direction:column; flex:none}
.pv-flow .pv-walk-at b{font-size:var(--hb, 15px); font-weight:500; line-height:1.3; color:var(--ink)}
.pv-flow .pv-walk-at em{font-style:normal; font-size:var(--hd, 13.5px); line-height:1.4; color:var(--ink-2); font-variant-numeric:tabular-nums}
.pv-flow .pv-walk p{flex:1 1 280px; min-width:0; margin:0; font-size:var(--hb, 15px); line-height:1.45; color:var(--ink-2)}
.pv-flow .pv-walk-acts{display:flex; align-items:center; gap:8px; flex:none; margin-left:auto}

/* 11. What was left since the reader was last in: one quiet line under a page's doors (flow.js newsLine). */
.pv-flow .pv-fh-new{margin:12px 0 0}

/* 12. Two options, each behind its own word (lib/answer.js flowRail, flowArrows), to be looked at before he decides.
       "rail": on a laptop the rooms' bar folded to its icons, exactly as the house already draws it between 768 and
       1023 wide (public/preview-home.css): the same rules, at any width from 1024.
       "arrows": on a phone a run's two arrows drawn 34 and pressed 44, so the line they stand on stays as tall as the
       way back alone and nothing under it moves. */
@media (min-width:1024px){
  /* (84, not the narrow window's 76: at 76 the longest name, Notifications, was cut by two points) */
  .pv-flow.pv-rail .pv-shell{grid-template-columns:84px minmax(0, 1fr); column-gap:24px; padding:32px 24px 0 8px}
  .pv-flow.pv-rail .pv-nav-in{padding:32px 8px 12px 0}
  .pv-flow.pv-rail .pv-list a{flex-direction:column; justify-content:center; gap:4px; min-height:58px; padding:4px 0px; font-size:12px; font-weight:500; text-align:center; position:relative}
  .pv-flow.pv-rail .pv-list a .pv-l{flex:none; max-width:100%; white-space:normal; line-height:1.15}
  .pv-flow.pv-rail .pv-list a .pv-badge{position:absolute; top:4px; right:10px; min-width:18px; height:18px; font-size:12px}
  .pv-flow.pv-rail .pv-main{padding-top:8px}
  /* Folded, the bar holds more than a laptop's window is tall at the narrow window's 58 an icon (855 for twelve): its
     icons share the height there is, between 46 and 58 each (--pv-n: how many, kit.js nav; 160: the head, your
     photograph and the bar's own edges), so "Your page" and Settings are never under the window's edge. */
  .pv-flow.pv-rail .pv-list a{min-height:52px; padding-block:4px}
  /* "Ask the house" is 76 wide where an icon has 71: folded it reads "Ask" (kit.js nav) */
  /* What opens the bar and folds it: a bead on the bar's own line, level with the names (5 October: "an option to bring
     it back to full words like it currently is"; and, of a menu button at the bar's head, "just hangin there in both
     states"). It is in neither bar, so the open bar is the bar as it is today and the folded one keeps its mark; it
     points the way the bar will go. kit.js nav, preview-flow.js pvBar; drawn once the script has run. The bar's inside
     scrolls, so the bead is the bar's own child and keeps to the window with it (30: where the bar begins under the
     lights, 13: down to the names' line). */
  .pv-flow.pv-bar-js .pv-bar-k{display:block; position:sticky; top:30px; height:0; z-index:3}
  .pv-flow .pv-bar-t{position:absolute; top:13px; right:-13.5px; display:grid; place-items:center; width:26px; height:26px; padding:0;
    border:1px solid var(--line); border-radius:50%; background:var(--bar); color:var(--ink-2); cursor:pointer}
  .pv-flow .pv-bar-t::after{content:""; position:absolute; inset:-6px}   /* (pressed 38) */
  .pv-flow .pv-bar-t:hover{border-color:var(--line); color:var(--ink)}
  .pv-flow .pv-bar-t svg{transform:rotate(180deg)}
  .pv-flow.pv-rail .pv-bar-t svg{transform:none}
}
.pv-flow .pv-bar-k{display:none}   /* (not on a narrower window, which has no room for the open bar, and not without script) */

/* 13. The house's own narrow bar, in a window 768 to 1023 wide (public/preview-home.css; 5 October, "yes fix the narrow
       bar too"): at its 76 the longest name, Notifications, was cut ("Notificati…"), and at 58 an icon its last ones
       went under the edge of a window less than 855 tall. So, with the trial: 84 wide, and its icons share the height
       as the folded bar's do; "Ask the house" reads "Ask". */
@media (max-width:1023px){
  .pv-flow.pv-arrows .pv-run{margin-block:-2px}
  .pv-flow.pv-arrows .pv-run-b{position:relative; width:34px; height:34px}
  .pv-flow.pv-arrows .pv-run-b::after{content:""; position:absolute; inset:-5px -4px}
}

/* 14. After the brand audit of 5 October (A&Mwedding/Brand audit of the thread (5 Oct 2026).md), his "fix all of them":
   - 1. the line "new since you were last here" is a sentence, so it wraps; as a "more" link it never did, and on a phone
     it ran to 426 and every page with it could be dragged sideways;
   - 4. on a phone a person's line puts the day over the thing (it kept a 96 column, and a title ran to four lines in
     the rest); the rule still runs down the left, and a row with no day of its own has none over it;
   - 7. the fold of what waits is a "more" link's size, as "The rest of the line" under it is;
   - 8. "End the walk" is the house's link-button (wine words, no edge), so "Next" is the one button in the band;
   - 2, 9, 11 and 6 are in their own sections above. */
.pv-flow .pv-fh-new .pv-more-link{display:inline; white-space:normal}
.pv-flow .pv-line-fold > summary{font-size:var(--hd, 13.5px)}
.pv-flow .pv-walk-acts .pv-btn-quiet{border-color:transparent; background:none; color:var(--wine)}
.pv-flow .pv-walk-acts .pv-btn-quiet:hover{background:var(--hover); color:var(--wine-press)}
@media (max-width:1023px){
  .pv-flow .pv-line-row:not(.is-ask), .pv-flow .pv-line-open > summary{grid-template-columns:minmax(0, 1fr)}
  .pv-flow .pv-line-when{padding:12px 0 0 16px; border-left:1px solid var(--line)}
  .pv-flow .pv-line-when:empty{display:none}
  .pv-flow .pv-line-when .pv-line-h{display:inline}
  .pv-flow .pv-line-when .pv-line-d + .pv-line-h::before{content:" · "; color:var(--ink-3)}
  .pv-flow:where(:not(.pv-k-door)) .pv-line-when:not(:empty) + .pv-line-tx{padding-top:0px}
  .pv-flow .pv-line-act{grid-column:1}
  .pv-flow .pv-line-fold > summary{margin-left:0}
}


/* ===== preview-lists.css ===== */
/* Lists (6 October 2026, in trial: lib/answer.js listsOn, the word "lists"; views/preview/lists.js). Inlined by
   views/preview/kit.js shell on the room's own pages only (the page's root wears .pvl). The rows are the Vendors room's
   (pv-listcard, pv-vhead, pv-vrow), so they wear the house's band and its columns; only what is the room's own is here. */

/* the columns: what it is, where it stands, its one figure (a quote, a budget, a room), and the heart or the pencil (on a
   wide page only: narrower, the house's own two columns take over, the name and where it stands, then the figure and the heart) */
@container (min-width:721px){ .pvl .pv-vhead, .pvl .pv-vrow{grid-template-columns:minmax(0, 1.5fr) 136px minmax(0, 1fr) 88px} }
.pvl .pv-vrow-acts{justify-content:flex-end; gap:4px}
.pvl li[id]{scroll-margin-top:96px}                       /* a heart comes back to its own row, clear of the bar */

/* a list's name with its icon (the room, and "Make a list") */
.pvl .pvl-name{display:flex; align-items:flex-start; gap:12px}
.pvl .pvl-ic{flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:12px; background:var(--wine-tint); color:var(--wine)}
.pvl .pvl-name-tx{min-width:0; padding-top:0px}

/* a group's band: its name and how many, in the band's own hand (the band rules give the size and colour) */
.pvl .pvl-g em{margin-left:8px; font-style:normal; opacity:.8}
/* "+ Add a vendor for Décor", under a group's rows */
.pvl .pvl-more{margin:0; padding:8px 16px 12px; border-top:1px solid var(--line)}
.pvl .pvl-more a{display:inline-flex; align-items:center; gap:4px; min-height:28px; font-size:14px; font-weight:500; color:var(--wine)}
.pvl .pvl-more a:hover{text-decoration:underline; text-underline-offset:3px}
.pvl .pvl-group + .pvl-group{margin-top:16px}

/* the family's heart on a row: plain, its count beside it; theirs once pressed */
.pvl .pvl-pick{display:inline-flex; margin:0}
.pvl .pvl-heart{display:inline-flex; align-items:center; gap:4px; min-height:34px; min-width:34px; padding:0 8px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface); color:var(--ink-2); font:500 13px/1 var(--ui); cursor:pointer}
.pvl .pvl-heart:hover{border-color:var(--line); color:var(--wine)}
.pvl .pvl-heart.is-on{border-color:var(--line); background:var(--wine-tint); color:var(--wine)}
.pvl .pvl-heart span:empty{display:none}
.pvl .pvl-love{display:flex; align-items:center; gap:12px}
.pvl .pvl-love p{margin:0}

/* who sees it, under the list's name */
.pvl .pvl-seen{display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px}
.pvl .pvl-seen svg{flex:none; color:var(--ink-2)}
.pvl .pvl-change{color:var(--wine); font-weight:500}

/* a paste just brought in, with its way back out */
.pvl .pvl-batch{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px; background:var(--gold-tint); border-color:var(--line)}
.pvl .pvl-batch p{margin:0; flex:1 1 320px}

/* the list's own settings, and the red button kept apart */
.pvl .pvl-del{margin-top:16px; padding-top:12px; border-top:1px solid var(--line)}
.pvl #pvl-settings{margin-top:16px}

/* "Make a list": the kinds, their columns, who sees one at first */
@container (min-width:721px){ .pvl .pvl-tpl, .pvl .pvl-tpl-head{grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr) 150px 128px} }
.pvl .pvl-cols{display:block; font-size:13px; line-height:1.45; color:var(--ink-2)}
.pvl .pvl-own{margin-top:16px}

/* "Bring in from Excel" */
.pvl textarea[name=rows]{font:13px/1.5 var(--ui); white-space:pre; tab-size:39; tab-size:10.8em; overflow-x:auto}   /* (open: look, L1: in Inter, it was monospaced; its columns as wide as they were, 18 of the old face's figures) */

/* a phone: a group keeps its band with its name (the house hides the columns' band there); a kind of list reads in two lines */
@container (max-width:720px){
  .pvl .pv-vrow-st{align-self:start; margin-top:0px}          /* where it stands beside the name, not halfway down a long row */
  .pvl .pvl-group > .pv-vhead{display:flex}
  .pvl .pvl-group > .pv-vhead > span:not(:first-child){display:none}
  .pvl .pvl-tpl{grid-template-columns:minmax(0, 1fr) auto}
  .pvl .pvl-tpl .pv-vrow-acts{grid-column:2; grid-row:1}
  .pvl .pvl-tpl .pv-vrow-st{grid-column:1 / -1; grid-row:2; padding-left:48px}
  .pvl .pvl-tpl .pv-vrow-who{display:none}
}
@media (max-width:1023px){
  .pvl .pvl-heart{min-height:44px; min-width:44px}
  .pvl .pvl-more{padding-inline:16px}
}

/* who sees it: said in full, on two lines where it needs them (the house's rows cut it short with "…") */
.pvl .pv-vrow-who > span{white-space:normal; overflow:visible; text-overflow:clip}

/* a job's quotes, lowest to highest, in its band ("₹… to ₹…") */
.pvl .pvl-g .pvl-range{margin-left:12px; opacity:1; color:var(--ink-2)}
/* one day of a list, from that day's page, and the way back to every day */
.pvl .pvl-day{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:0 0 12px; font-size:14px; color:var(--ink-2)}
.pvl .pvl-day svg{color:var(--ink-2)}
.pvl .pvl-day a{color:var(--wine); font-weight:500}
/* the sheets kept in rooms of their own, at the foot of the Lists room: a name, a line, the way there */
.pvl .pvl-rooms{margin-top:16px}
.pvl .pvl-roomrow{grid-template-columns:minmax(0, 1fr) auto; color:inherit; text-decoration:none}
.pvl .pvl-roomrow:hover b{color:var(--wine)}
.pvl .pvl-go{display:flex; color:var(--ink-2)}
/* a sheet that could not be read */
.pvl .pvl-batch.is-warn{background:var(--danger-tint); border-color:var(--line)}

/* ---- bringing a sheet in (views/preview/sheets.js) ---- */
/* the two ways, side by side on a laptop, one above the other on a phone */
.pvl .pvs-ways{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.pvl .pvs-way{display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:24px}
.pvl .pvs-way h2{margin:4px 0 0; font-size:16px; font-weight:600; line-height:1.3; color:var(--ink)}
.pvl .pvs-way p{margin:0; font-size:14px; line-height:1.45; color:var(--ink-2)}
.pvl .pvs-way .pv-hint{font-size:13px; color:var(--ink-2)}
.pvl .pvs-way textarea{width:100%; min-height:132px; font:13px/1.5 var(--ui); white-space:pre; tab-size:17; tab-size:4.8em; overflow-x:auto}   /* (open: look, L1, as above: 8 of the old face's figures) */
.pvl .pvs-way .pv-file{margin-top:4px}
.pvl .pvs-ic{display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--wine-tint); color:var(--wine)}
.pvl .pvs-go{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px}
.pvl .pvs-any{display:flex; align-items:flex-start; gap:8px; margin:12px 0 0; font-size:14px; line-height:1.45; color:var(--ink-2)}
.pvl .pvs-any svg{flex:none; margin-top:2px; color:var(--yes)}
/* looking it over: where each column goes, then the first rows as the sheet has them */
.pvl .pvs-map, .pvl .pvs-rows{margin-bottom:16px}
.pvl .pvs-head{display:flex}
.pvl .pvs-cols{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); margin:0 -1px -1px 0; padding:0; list-style:none}
.pvl .pvs-col{display:flex; flex-direction:column; gap:8px; padding:12px 16px; border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
.pvl .pvs-col label{display:flex; flex-direction:column; gap:0px; min-width:0}
.pvl .pvs-col label b{font-size:14px; font-weight:500; color:var(--ink)}
.pvl .pvs-col label em{font-size:13px; font-style:normal; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pvl .pvs-col select{width:100%}
.pvl .pvs-scroll{overflow-x:auto}
.pvl .pvs-table{width:100%; border-collapse:collapse; font-size:14px}
.pvl .pvs-table th, .pvl .pvs-table td{padding:8px 12px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); white-space:nowrap; max-width:260px; overflow:hidden; text-overflow:ellipsis}
.pvl .pvs-table th{font-weight:500; color:var(--ink-2); background:var(--surface)}
.pvl .pvs-table tr:last-child td{border-bottom:0}
@media (max-width:1023px){
  .pvl .pvs-ways{grid-template-columns:1fr}
  .pvl .pvs-way{padding:16px}
  .pvl .pvs-col{padding:12px 16px}
}

/* ===== preview-focus.css ===== */
/* One thing in focus in every room (6 October 2026, in trial: lib/answer.js focusTrial, the word "focus"; inlined by
   views/preview/kit.js, body class pv-focus). His rule 52: "whichever room we're in, that room should have the main element
   in focus which is directly about that room… if it's a bedroom, you focus on the bed… the other elements are complement to
   it". Page by page (A&Mwedding/Task list.md, item 1); each room's part says what its one thing is, and what was moved. */

/* ---- Planning: its one thing is the list of what is to do (views/preview/plan.js) ----
   It had a column beside it with three more things (the next date, who has how many, what was settled lately) and, over
   it, a row of six celebration chips beside a choice of person: "a lot of things which are fighting for my attention… not
   able to see the list as a dedicated view". Now: the list has the page's whole width; the two filters are two quiet
   choices, the person's choice saying who has how many; the next date is on the Calendar; what was settled is one line
   after the list, leading to Questions & decisions. */
.pv-focus .pvr-plan .pvf-one{display:block}
.pv-focus .pvr-plan .pvp-after{margin:16px 0 0}
.pv-focus .pvr-plan .pvp-after a{display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-2)}
.pv-focus .pvr-plan .pvp-after a svg{flex:none; color:var(--yes)}
.pv-focus .pvr-plan .pvp-after a:hover span{color:var(--wine); text-decoration:underline; text-underline-offset:3px}
/* A question is not a box to tick ("either you check it off or you don't check it off. What's the question mark for?"):
   in the lead's place a speech bubble, in the wine of things asked, with no ring; its line says "Question for Arjun". */
.pv-focus .pvr-plan .pvp-q.is-ask{border:0; border-radius:0; color:var(--wine)}
.pv-focus .pvr-plan .pvp-q.is-ask svg{width:20px; height:20px; stroke-width:1.7}

/* ===== preview-finish.css ===== */
/* The task list's remaining items, in trial (6 October 2026, night; A&Mwedding/Task list.md, his "finish all the remaining tasks").
   Inlined by views/preview/kit.js only while one of their words is on (lib/answer.js: focus2, doors, views, profile, equal,
   justme); each word's rules sit under its body class (pvx-focus2, pvx-doors, pvx-views, pvx-profile, pvx-justme), so dropping a
   word drops its rules. Built from the house's own pieces (pv-card, pv-vrow, chips, buttons); nothing here grows a part he
   approved. */

/* ---- 1. One thing in focus, room by room (focus2; his rule 52) ------------------------------------------------------- */
/* A room whose one thing has the page's whole width: its side column, if it still holds anything, goes under it. */
.pvx-focus2 .pv-cols.pvx-whole{display:block}
/* and without the hairline the two columns drew between them (preview-home.css paints it wherever the side column holds
   anything): on a page of one column it ran down behind the cards (7 October, on his house's Sangeet, which has no acts) */
.pvx-focus2 .pv-cols.pvx-whole{background:none}
.pvx-focus2 .pv-cols.pvx-whole > .pv-col-side:not(:has(> *)){display:none}
.pvx-focus2 .pv-cols.pvx-whole > .pv-col-side{margin-top:24px; max-width:700px}
/* Sangeet: what an act still needs, on its own row, in the wine of things that wait */
.pvx-focus2 .pvx-sangeet .pvx-sort{display:block; margin-top:0px; font-size:14px; color:var(--wine)}
/* a line of quiet ways on after a list (Sangeet's loose ends, Guests' days): shared by the words that use it */
.pvx-after{display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; margin:12px 0 0}
.pvx-after > span:first-child{font-size:14px; color:var(--ink-2)}
.pvx-after a{display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-2)}
.pvx-after a svg{flex:none; color:var(--wine)}
.pvx-after a:hover span{color:var(--wine); text-decoration:underline; text-underline-offset:3px}
/* past its date and not settled: the wine of things that wait, never red alarm */
.pvx-late{color:var(--wine)}
/* Today: the day's celebrations, one line in the head */
/* (Room 6, item 11) where the day is, under its celebrations, with the way there */
/* the pin, and the words in a column of their own */
/* on a phone, where Today is used most, the day's celebrations and its venue stay in the head (other pages' lines fold away) */
/* "Amer Road" kept together */
/* on a phone, each fact on its own line: a wrapped line never starts with a dot ("· wear greens", "· Directions") */
@media (max-width:1023px){
  .pvx-focus2 .pvx-today .pv-lede{display:block}
}
/* one celebration to a line, now that each says what to wear */


/* ---- 2. Lists connect to the rest of the house (doors; his rule 53) ------------------------------------------------- */
/* a function's name over its rows leads to its day */
.pvx-doors .pvx-dayg{color:inherit; text-decoration:none}
.pvx-doors .pvx-dayg:hover{color:var(--wine); text-decoration:underline; text-underline-offset:3px}
/* a row's own page: what was asked or made of it in Planning, and the ways there */
.pvx-doors .pvx-inplan{margin-top:16px}
.pvx-doors .pvx-inplan .pv-panel-h em{margin-left:8px; font-style:normal; color:var(--ink-2); font-weight:500}
.pvx-doors .pvx-inplan .pv-row-main{display:flex; align-items:flex-start; gap:12px}
.pvx-doors .pvx-inplan .pv-row-main > svg{flex:none; margin-top:2px; color:var(--wine)}

/* ---- 3. Saved views (views; his "pivot table") ------------------------------------------------------------------------ */
/* on a list or on Vendors: one quiet line under the head, the views by name and a way to make one */
.pvx-views .pvx-views{display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; margin:0 0 16px; font-size:14px; color:var(--ink-2)}
.pvx-views .pvx-views > svg{flex:none; color:var(--ink-2)}
.pvx-views .pvx-views-h{font-weight:500; color:var(--ink-2)}
.pvx-views .pvx-views a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px}
.pvx-views .pvx-views a:hover{color:var(--wine); text-decoration-color:currentColor}
.pvx-views .pvx-views a.pvx-views-new{display:inline-flex; align-items:center; gap:4px; color:var(--wine); text-decoration:none}
.pvx-views .pvx-views a.pvx-views-new:hover span{text-decoration:underline; text-underline-offset:3px}
.pvx-views .pvx-views-sib [aria-current]{font-weight:500; color:var(--ink)}
/* a view's page: the pivot first, a plain table on the house's paper; its numbers to the right, figures lined up */
.pvx-views .pvx-pivot{margin:0 0 16px; overflow:hidden}
.pvx-views .pvx-pivot table{width:100%; border-collapse:collapse; font-size:16px}
.pvx-views .pvx-pivot th, .pvx-views .pvx-pivot td{padding:12px 16px; text-align:left; border-bottom:1px solid var(--line); font-weight:400}
.pvx-views .pvx-pivot thead th{padding-top:12px; padding-bottom:8px; background:var(--surface); font-size:13px; font-weight:500; color:var(--ink-2)}
.pvx-views .pvx-pivot .is-n{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.pvx-views .pvx-pivot tbody th a{color:var(--ink); text-decoration:none}
.pvx-views .pvx-pivot tbody th a:hover{color:var(--wine); text-decoration:underline; text-underline-offset:3px}
.pvx-views .pvx-pivot tfoot th, .pvx-views .pvx-pivot tfoot td{border-bottom:0; font-weight:600} .pvx-views .pvx-pivot tfoot th{font-weight:500}
.pvx-views .pvx-hearts{display:inline-flex; align-items:center; gap:4px; color:var(--ink-2)}
.pvx-views .pvx-hearts svg{color:var(--wine)}

/* ---- 4. The house profile (profile) ----------------------------------------------------------------------------------- */
/* Settings › The house: each room on one row — its name and where it is, the choice, and ↑ ↓ while it is in the bar */
.pvx-profile .pvx-house .pv-vhead, .pvx-profile .pvx-house-row{display:grid; grid-template-columns:minmax(0, 1fr) 190px 88px; align-items:center; column-gap:16px}
.pvx-profile .pvx-house-row.is-off .pv-vrow-main b{color:var(--ink-2)}
.pvx-profile .pvx-house-place select{width:100%; min-height:36px}
.pvx-profile .pvx-house-move{display:flex; gap:4px; justify-content:flex-end}
.pvx-profile .pvx-house-move .pv-icon-btn[disabled]{opacity:.35; cursor:default}
.pvx-profile .pvx-leads{display:grid; gap:8px; margin-top:12px}
@media (max-width:640px){
  .pvx-profile .pvx-house .pv-vhead{display:none}
  .pvx-profile .pvx-house-row{grid-template-columns:minmax(0, 1fr) auto; row-gap:8px}
  .pvx-profile .pvx-house-place{grid-column:1; grid-row:2}
  .pvx-profile .pvx-house-move{grid-column:2; grid-row:1 / span 2}
}
/* the home's first card, where the profile says: the newest photographs, or how far along — numbers, never work */
.pvx-profile .pvx-lead{margin:0 0 16px}
.pvx-profile .pvx-lead-top{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px}
/* (v203) its way on is the house's one "more" link (pv-more-link), no longer wine: his word of 21 Oct 2026, "Planning is in red" beside
   "See all 23" underlined; the guideline: wine is never a link */
.pvx-profile .pvx-lead-grid{grid-template-columns:repeat(6, minmax(0, 1fr))}
@media (max-width:640px){ .pvx-profile .pvx-lead-grid{grid-template-columns:repeat(3, minmax(0, 1fr))} }
.pvx-profile .pvx-ready{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:16px; margin:0}
.pvx-profile .pvx-ready div{display:flex; flex-direction:column-reverse; justify-content:flex-end; gap:0px}   /* (v198, his walk: "the 2% is going up") a column-reverse packs from its foot: flex-end is its top, so every figure is on one line however its label wraps */
.pvx-profile .pvx-ready dd{margin:0; font-size:24px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.pvx-profile .pvx-ready dt{font-size:14px; color:var(--ink-2)}

/* ---- 5. "Just me" (justme) ---------------------------------------------------------------------------------------- */
/* the mark, to the one who kept it back (no one else is shown the thing): quiet, beside its name */
.pvx-just{display:inline-flex; align-items:center; gap:4px; margin-left:8px; padding:0px 8px; border:1px solid var(--line); border-radius:999px;
  font-family:var(--ui); font-size:12px; font-weight:500; color:var(--ink-2); vertical-align:middle; white-space:nowrap}
.pvx-just svg{color:var(--ink-2)}
.pv-head .pvx-just{margin-left:0}

/* ===== preview-ask.css ===== */
/* The Saathi page (v190, 16 October 2026; his words: "combine search and ask on the navbar into one… and then split the normal
   search or the AI search inside that"; his pick, a switch above the bar). Inlined by views/preview/kit.js on the page whose
   current is '/search' only (views/preview/talk.js searchRoom). How many of today's asks are left and what is sent where (his
   words of 7 October) moved into the bar's "?" (rule 69), so their lines and fold are gone from the page.
   The switch: two equal halves on the house's sunk track, each a link (it works without script), the chosen one on the paper with
   its hairline and its words in ink; the Ask half's sparkle in the AI's gold. 40 tall on a laptop, as a head's button, and 44 on a
   phone; 12 over the bar it chooses, and as wide as it (the page's column, 760; a phone's), so the two share both edges. */
:where(.pv-sheet-ask) .pv-way{display:grid; grid-template-columns:1fr 1fr; gap:4px; width:100%; margin:0 0 12px; padding:4px; border-radius:var(--r-ctl); background:var(--hover)}
.pv-way a{display:flex; align-items:center; justify-content:center; gap:8px; min-height:34px; padding:0 12px; border-radius:6px; font-size:14px; font-weight:500; line-height:1.2; color:var(--ink-2); text-decoration:none; text-align:center}
.pv-way a:hover{color:var(--ink)}
.pv-way a[aria-current]{background:var(--surface); color:var(--ink); box-shadow:0 0 0 1px var(--line)}
.pv-way a svg{flex:none; color:var(--wine)}
.pv-way a:focus-visible{ outline-offset:1px}
/* a phone: the column's width, each half 38 to look at and 44 to press (its touch reaches over the track's edge, as a closing ×'s does) */
@media (max-width:1023px){ .pv-way a{position:relative; min-height:38px; font-size:16px} .pv-way a::after{content:''; position:absolute; inset:-3px -1.5px} }

/* ===== preview-loved.css ===== */
/* The home's feed (7 October 2026; lib/answer.js lovedOn, off with "loved-off", and familyFeed, off with "feed-off"):
   under "Mumma and 2 others loved 3 photographs in Décor we love", the photographs, small, in a row; what was said, in
   quotes; for the guests who replied, the house's own mark in the face's place. On the card's own inner edge, as its other
   lines are. Inlined by views/preview/kit.js on the home only. */
.pv-feed .pvn-told .pvn-lovedpic{display:block; width:132px; aspect-ratio:4/3; margin:8px 0 0; border-radius:var(--r-media); overflow:hidden; background:var(--hover)}
.pvo .pv-feed .pvn-told .pvn-lovedpic{margin-left:var(--o-pad)}
.pv-feed .pvn-told .pvn-lovedpic img{display:block; width:100%; height:100%; object-fit:cover}
.pv-feed .pvn-told .pvn-lovedpics{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 0}
.pvo .pv-feed .pvn-told .pvn-lovedpics{padding:0 var(--o-pad)}
.pv-feed .pvn-told .pvn-lovedpics .pvn-lovedpic{margin:0}
.pv-feed .pvn-told .pvn-feedq{margin-top:8px; color:var(--ink-2)}
.pvo .pv-feed .pvn-told .pvn-feedq{padding:0 var(--o-pad)}
.pv-feed .pvn-told .pvn-feedic{display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--surface); color:var(--wine)}
/* Kept to a room's size (7 October 2026, his "this is a ghar… different rooms have different weights… but they're still
   there"): the house room by room after two days away — each room a door, what happened there in numbers; the last card,
   "And since you were here", the rest room by room; the page of everything, by day. */
.pvx-sinceday{margin:24px 0 0}
/* the page's rooms in one line that scrolls on a phone, as the house's other rows of chips do (they wrapped to four) */
@media (max-width:1023px){
  .pvx-sincerooms{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-right:-16px; padding-right:16px;
    -webkit-mask-image:linear-gradient(to right, var(--ink) calc(100% - 28px), transparent); mask-image:linear-gradient(to right, var(--ink) calc(100% - 28px), transparent)}
  .pvx-sincerooms::-webkit-scrollbar{display:none}
  .pvx-sincerooms a{flex:none}
}
.pvx-sinceday > .pv-h2{margin:0 0 12px}
/* (homeroom, item 24) a busy day's rest, folded under one line that says what is in it, room by room */
.pv-fold.pvx-sincefold{margin:12px 0 0}
.pv-fold.pvx-sincefold > summary{display:flex; align-items:center; gap:12px; box-sizing:border-box; min-height:58px; padding:12px 16px;
  border:1px solid var(--line); border-radius:var(--r-post); background:var(--surface); color:var(--ink)}
.pv-fold.pvx-sincefold > summary:hover{background:var(--hover)}
.pv-fold.pvx-sincefold > summary > span{display:flex; flex-direction:column; gap:4px; flex:1; min-width:0}
.pv-fold.pvx-sincefold > summary b{font-size:16px; font-weight:500; color:var(--wine)}
.pvx-sincefold-says{font-size:14px; font-weight:400; line-height:1.45; color:var(--ink-2)}
.pv-fold.pvx-sincefold > summary > svg:last-child{flex:none; color:var(--ink-2)}
.pv-fold.pvx-sincefold > .pv-fold-in{padding:12px 0 0}

/* ===== preview-homeaudit.css ===== */
/* The home audit (7 October 2026): ON wherever the rooms answer (his "let's take it live now"); the way back is the word
   "homeaudit-off" (lib/answer.js homeAudit). Body class pvx-homeaudit, inlined on every page by views/preview/kit.js. The audit: A&Mwedding/Home audit (7 Oct 2026).md.
   Numbers are its findings. */

/* 1. Every card's edge one step stronger than the rules inside it. A card was white on the white page with a
   --line-soft edge (#EEE8E0, 1.22:1), and the rules inside it were the same colour, so a card looked no stronger than
   its own insides. Now the edge is --line (#E1DAD0, 1.39:1) and the rules inside stay --line-soft. It is done with the
   token, not a colour: on a card, --line-soft means --line, and for the card's children it means --line-soft again.
   So a card drawn in another colour on purpose (a request in gold, a chosen one in wine) keeps it, and the dark trial
   keeps its own values. Floating menus keep their edge: their shadow already lifts them. */
.pvx-homeaudit .pvo{--o-edge:var(--line)}
/* (the apply pass, 26 Oct 2026) the card's --line and its children's --line (via --edge-in) stood here: since phase 1 the edge and the
   rules inside are the one --line, so the card's became `--line:var(--line)`, a loop that left every card without its edge. Gone. */

/* 2. Gaps that group, on the house's scale. Top to bottom they were 20, 16, 28, 26, 14 and 16, so a break between
   sections was barely more than the gap between two posts. Now three groups with 32 between them: the greeting (with
   its pills), what is for you (the letter, an invitation, a question), the composer; then the feed, 12 under its
   heading, 16 between cards. On a phone, 24 between groups. */
.pvx-homeaudit .pvn-door{margin-bottom:32px}
.pvx-homeaudit .pvn .pv-feedcol > .pv-glance{margin-bottom:16px}   /* (a phone's "Waiting on you", a card among cards: it was 14) */
.pvx-homeaudit .pvn .pv-feedcol > .pv-card:not(.pv-compose) ~ .pv-compose{margin-top:32px}
.pvx-homeaudit .pvo .pv-feedbar{margin:32px 0 12px}

/* 3. The couple's letter said once: its "Got it" inside its own card (views/preview/feed.js fromUs), under a rule to
   the card's edges, instead of a banner over it. The card is a box holding the link, so the button is never inside
   the link. */
.pvx-homeaudit .pvo .pv-feedcol > .pvx-fromus-ack{display:block; padding:0}
.pvx-homeaudit .pvx-fromus-open{display:flex; align-items:center; gap:12px; padding:16px var(--o-pad); color:inherit; text-decoration:none; border-radius:inherit}
.pvx-homeaudit .pvx-fromus-open > svg{flex:none; color:var(--ink-2)}
.pvx-homeaudit .pvx-fromus-ack:has(.pvx-fromus-open:hover){border-color:var(--line)}
.pvx-homeaudit .pvx-ack{display:flex; align-items:center; gap:12px; padding:12px var(--o-pad); border-top:1px solid var(--line)}
.pvx-homeaudit .pvx-ack p{flex:1; min-width:0; margin:0; font-size:var(--hd); line-height:1.4; color:var(--ink-2)}
.pvx-homeaudit .pvx-ack form{flex:none; margin:0}

/* 4. "The house, room by room" (views/preview/next.js roomsCard): the card's words are its heading, centred on its
   circle, and each room is the house's row: its name, what happened in numbers at the right, an arrow, because the row
   opens the room. The other cards the house writes itself ("19 households replied", "And since you were here") get
   the same: their words take the place a person's name has, in ink, and sit on their circle's centre. */
.pvx-homeaudit .pv-feed .pvn-told .pv-post-head:has(> .pvn-feedic){align-items:center}
.pvx-homeaudit .pv-feed .pvn-told .pv-post-l1 > .pv-verb:only-child{color:var(--ink); font-weight:500}
.pvx-homeaudit .pv-feed .pvn-told .pv-meta:empty{display:none}
.pvx-homeaudit .pvo .pv-feed > .pvx-roomscard{padding-bottom:4px}
.pvx-homeaudit .pvx-roomscard-h{margin:0; font-size:var(--hb); font-weight:600; line-height:1.35; color:var(--ink)}
.pvx-homeaudit .pvx-roomrows{list-style:none; margin:12px 0 0; padding:0; border-top:1px solid var(--line)}
.pvx-homeaudit .pvx-roomrows li + li{border-top:1px solid var(--line)}
.pvx-homeaudit .pvx-roomrows a{display:flex; align-items:center; gap:12px; min-height:44px; box-sizing:border-box; padding:12px var(--o-pad); color:var(--ink); text-decoration:none}
.pvx-homeaudit .pvx-roomrows b{flex:1 1 auto; min-width:0; font-size:var(--hb); font-weight:500}
.pvx-homeaudit .pvx-roomrows span{flex:0 1 auto; font-size:var(--hd); color:var(--ink-2); text-align:right}
.pvx-homeaudit .pvx-roomrows svg{flex:none; color:var(--ink-3)}
.pvx-homeaudit .pvx-roomrows a:hover b{color:var(--wine)}
.pvx-homeaudit .pvx-roomrows a:focus-visible{ outline-offset:-2px}

/* 5. The lights line on the greeting's edge: the bulb starts the line (its glow may run past it), the words follow it,
   and a second line keeps to the words. It was pushed in 51 by the bulb's margins. */
.pvx-homeaudit .pvn-say .pvn-bulb{margin:1px 6px 0 -5px}

/* 6. Small values back on the scale: the letter's mark is a 40 face (it was 44); its card has the 18 inset above and
   below (it was 14). */
.pvx-homeaudit .pv-fromus .pv-fromus-mark{width:40px; height:40px}
.pvx-homeaudit .pvo .pv-feedcol > a.pv-fromus{padding-top:16px; padding-bottom:16px}

@media (max-width:1023px){
  .pvx-homeaudit .pvn-door{margin-bottom:24px}
  .pvx-homeaudit .pvn .pv-feedcol > .pv-card:not(.pv-compose) ~ .pv-compose{margin-top:24px}
  .pvx-homeaudit .pvo .pv-feedbar{margin:24px 0 12px}
  .pvx-homeaudit .pvx-fromus-open{padding:16px var(--o-pad)}
  .pvx-homeaudit .pvo .pv-feedcol > a.pv-fromus{padding-top:16px; padding-bottom:16px}
}

/* ===== preview-walk.css ===== */
/* The fixes from his walk through the demo (7 October 2026, A&Mwedding/Task list.md A1–A5; lib/answer.js walkTrial, the
   word "walk"; inlined by views/preview/kit.js, body class pvx-walk). Only what the five need; the rest is the house's own. */

/* A5: a heart is said more quietly than a reply or an answer, new or not, so the answer stands out among them */
.pvx-walk .pv-notice.pvx-heart .pv-row-t{font-weight:400; color:var(--ink-2)}
.pvx-walk .pv-notice.pvx-heart.is-new .pv-row-t{font-weight:500; color:var(--ink)}

/* A3: the estimates' line under Money's three figures, and a vendor's step said with its money */
.pvx-walk .pv-ledger .pvx-est{margin:8px 0 0; color:var(--ink-2)}
.pvx-walk .pvx-step{margin:8px 0 0; color:var(--ink-2)}
.pvx-walk .pv-col-side .pvx-step{margin:8px 0 0}

/* A4: the past rehearsals, folded under the ones to come */
.pvx-walk .pvx-pastfold{margin:12px 0 0}
.pvx-walk .pv-rehearsal.pvx-past .pv-row-t{color:var(--ink-2)}

/* The Money review (7 October 2026; lib/amount.js, lib/money.js, views/preview/money.js): what it found wrong, and what
   Money could not record. Only what the house's own classes do not already do. */
/* under Money's figures: what was paid over, a line that needs its amount, what came in, each a quiet line */
.pvx-walk .pv-ledger .pvx-over,.pvx-walk .pv-ledger .pvx-needs,.pvx-walk .pv-ledger .pvx-in{margin:4px 0 0; color:var(--ink-2)}
.pvx-walk .pv-ledger .pvx-follows,.pvx-walk .pv-ledger .pvx-plate{margin:0; color:var(--ink-2)}
.pvx-walk .pvx-paidover b{color:var(--warn)}
/* each side's "comes to": its own budget, how far along, what came in for it */
.pvx-walk .pvx-sidesum{margin:0; color:var(--ink-2)}
.pvx-walk .pvx-comes .pv-bar,.pvx-walk #split > .pv-bar{margin:4px 0 8px}
/* what a change of the split would move, said before it is saved: a rule under it, never a box */
.pvx-walk .pvx-moves{margin:0 0 16px; padding:0 0 12px; border-bottom:1px solid var(--line)}
.pvx-walk .pvx-moves p{margin:0 0 8px; font-size:14px; line-height:1.5}
.pvx-walk .pvx-moves .pv-inline{margin-top:4px}
/* a payment: its amount and its Change; money given back in the quieter colour */
.pvx-walk .pvx-pay .pv-row-r,.pvx-walk .pvx-nc .pv-row-r{max-width:64%}
.pvx-walk .pvx-pay.is-back .pv-amt{color:var(--ink-2); font-weight:500}
.pvx-walk .pvx-intotals{margin-top:8px}
.pvx-walk .pvx-from{margin:0}
/* at phone width a row's buttons go under its words, so nothing scrolls sideways */
@media (max-width:560px){
  .pvx-walk .pvx-pay,.pvx-walk .pvx-nc,.pvx-walk .pvx-dues > .pv-row{flex-wrap:wrap}
  .pvx-walk .pvx-pay .pv-row-r,.pvx-walk .pvx-nc .pv-row-r,.pvx-walk .pvx-dues .pv-row-r{flex:1 1 100%; max-width:100%; justify-content:flex-start; padding-bottom:8px}
  .pvx-walk .pvx-pay .pv-row-r .pv-amt,.pvx-walk .pvx-nc .pv-row-r .pv-amt{margin-left:0; padding-left:0; margin-right:auto}
}
/* a form sent back (an amount it could not read, a day it needs): its words above the fields, in the warning's colour, no box */
.pvx-walk .pvx-said{margin:0 0 0px; color:var(--warn); font-weight:500}
/* a link in a row's small words ("‘Invitations and printing’ may be it already"): the house's inline link, as a hint's (.pv-hint a) */
.pvx-walk a.pvx-link{color:var(--wine); font-weight:500; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px}
/* an amount kept with its words ("came in ₹…", "₹… of ₹… paid so far"): never the figure alone on a line */
.pvx-walk .pvx-keep{white-space:nowrap}
/* a part-paid due: its "₹… of ₹… paid so far" is one phrase that never breaks; where the row is too narrow for it
   and the buttons, the buttons go under it, on the right */
.pvx-walk .pvx-dues > .pv-row.pvx-part{flex-wrap:wrap}
.pvx-walk .pvx-dues > .pv-row.pvx-part > .pv-row-main{flex:1 1 320px}
.pvx-walk .pvx-dues > .pv-row.pvx-part > .pv-row-r{margin-left:auto}
/* the Money parts' hints and notes: never one word alone on the last line */
.pvx-walk :where(.pvx-est, .pvx-over, .pvx-needs, .pvx-in, .pvx-follows, .pvx-plate, .pvx-step, .pvx-said, .pvx-from, .pvx-sidesum, .pvx-moves p),
.pvx-walk :where(#budget, #split, #record, #due, #pays, #in, #notcounted, .pvx-comes, .pvx-owed, .pv-ledger, #pv-addline, #pv-addin, #pv-editline, #pv-editin, [id^="pv-paid-"], [id^="pv-pay-"]) :where(.pv-hint, .pv-small, .pv-quiet){text-wrap:pretty}

/* ===== preview-money.css ===== */
/* Room 2, Money (in trial: lib/answer.js moneyRoom, the word "moneyroom"; inlined by views/preview/kit.js on pages whose body
   has the class pvx-money). The room's own parts, written to docs/brand-guideline.md's tokens and steps: the position (room
   left, the projection in three parts, how firm), To pay in three groups, Needs a look, the two families, every line with
   its statuses, and a parent's own side. Everything else is the house's own card, band, row, chip, tab and dialog. */

/* 1. The position. The big figure is the house's (.pv-bigsum in .pv-ledger-main); the budget's button sits at its right. (With a
   budget, since the hierarchy round's 5.1, the card is section 5's grid; the swatches of its key are the bar's colours, here) */
.pvx-money .pvm-pos{margin-bottom:24px}
.pvx-money .pvm-pos-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px 16px; flex-wrap:wrap}
.pvx-money .pvm-pos-top .pv-ledger-main{flex:1 1 320px}
.pvx-money .pvm-overby{color:var(--danger)}
/* one bar in three parts, room left the empty track; a budget passed is a mark where it ends */
.pvx-money .pvm-bar{position:relative; display:flex; height:12px; margin:16px 0 12px; border-radius:6px; background:var(--hover); overflow:hidden}
.pvx-money .pvm-bar i{display:block; height:100%; flex:none}
.pvx-money .pvm-bar i + i{box-shadow:inset 2px 0 0 var(--surface)}
.pvx-money :is(.pvm-bar i, i.pvm-pos-sw).is-paid{background:var(--wine)}
.pvx-money :is(.pvm-bar i, i.pvm-pos-sw).is-firm{background:color-mix(in srgb, var(--wine) 42%, var(--surface))}
.pvx-money :is(.pvm-bar i, i.pvm-pos-sw).is-est{background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--wine) 30%, var(--surface)) 0 3px, var(--wine-tint) 3px 6px)}
.pvx-money .pvm-pos-sw.is-left{background:var(--hover)}
.pvx-money .pvm-mark{position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; background:var(--ink)}
.pvx-money :is(.pvm-firm, .pvm-missing){margin:16px 0 0; font-size:var(--hb); line-height:1.5; color:var(--ink-2)}
.pvx-money .pvm-missing{margin-top:8px}
.pvx-money :is(.pvm-firm, .pvm-missing) b{font-weight:500; color:var(--ink)}
.pvx-money :is(.pvm-missing a, .pvm-inl){font-weight:500; color:var(--wine); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:2px}

/* 2. To pay, and Needs a look: a band card (the house's .pv-listpanel) holding groups; a group's rule runs the card's width.
   A group's head is the house's section heading (16/600); its sentence is body (--hb, --ink-2) */
.pvx-money:where(.pv-sheet-money) .pvm-group + .pvm-group, .pvx-money .pvm-looks + .pvm-group{border-top:1px solid var(--line); margin-top:4px}
.pvx-money .pvm-group-h{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0; padding:12px 16px 4px; font-size:16px; font-weight:600; color:var(--ink)}
.pvx-money .pvm-group.is-quiet .pvm-group-h{color:var(--ink-2)}
.pvx-money .pvm-sum{font-variant-numeric:tabular-nums; white-space:nowrap}
/* every sum ends over the amounts it adds up: a row's button is 96 wide, 12 after its amount */
.pvx-money .pvm-pay .pvm-sum{margin-right:108px}
.pvx-money .pvm-pay .pv-row-r .pv-btn{min-width:96px; justify-content:center}
.pvx-money .pvm-group.is-quiet .pvm-sum{color:var(--ink-2); font-weight:500}
.pvx-money .pvm-group-note{margin:0 0 8px; padding:0 16px; font-size:var(--hb); line-height:1.5; color:var(--ink-2)}
.pvx-money .pvm-group.is-quiet .pvm-group-note{padding-bottom:8px}
.pvx-money .pvm-none{margin:0; padding:4px 16px 12px; font-size:var(--hb); color:var(--ink-2)}
.pvx-money .pv-card.pv-listpanel .pvm-group > .pv-fold{padding:0 16px 8px}
/* a payment due: its day in a column of its own (the house's timeline row: 96, the thing 16 from it), what it is, the amount
   and its button; owed with no date says "No date" where the date would be, so every title starts at one edge */
.pvx-money .pvm-due{display:grid; grid-template-columns:96px minmax(0, 1fr) max-content; align-items:center; column-gap:16px}
/* an expected line has no day and no button: its words take the day's column too, so they start on the edge of the words
   above (his word of 15 Oct: "why are they not aligned to the text above? They're just floating"); its amount in the
   amounts' column */
.pvx-money .pvm-exp > .pv-row-main{grid-column:1 / 3}
/* (15 Oct, the same word: "No date yet… shift it to the right, so it's aligned with the text above") every row of To pay
   starts and ends where its group's heading and note do (the card's inset and the group's 18), so a day, "No date yet" and
   a title sit on the heading's edge, and the amounts under the group's sum; a row in a fold the same */
.pv.pvx-money .pv-card.pvm-pay .pvm-group > .pv-rows > .pv-row{padding-inline:calc(var(--card-in) + 18px)}
.pv.pvx-money .pv-card.pvm-pay .pvm-group > .pv-fold .pv-rows > .pv-row{margin-inline:calc(-1 * (var(--card-in) + 18px)); padding-inline:calc(var(--card-in) + 18px)}
.pv.pvx-money .pv-card.pvm-pay .pvm-group > .pv-fold > summary{padding-left:0}   /* its words on the same edge (a fold's own 2 dropped here) */
.pv.pvx-money .pv-row.pvm-exp > .pv-row-r{padding-right:108px}
/* the amount and its button side by side (the house's row lets its right part wrap, under 60% of the row) */
.pv.pvx-money .pv-row:is(.pvm-due, .pvm-owed) > .pv-row-r{max-width:none; flex-wrap:nowrap; gap:12px}
.pvx-money .pvm-when{display:flex; flex-direction:column; gap:4px; padding:12px 0; font-size:14px}
.pvx-money .pvm-when b{font-weight:500; color:var(--ink-2); white-space:nowrap}
.pvx-money .pvm-when b.pvm-nodate{color:var(--warn)}   /* "No date yet", where a date would be, said in the warning colour */
.pvx-money .pvm-when span{color:var(--ink-2)}
.pvx-money .pvm-when span.pv-late{color:var(--danger); font-weight:500}   /* a payment past its day says so in red, as the house says late */
.pvx-money .pvm-nodate{font-weight:500; color:var(--warn)}
.pvx-money .pvm-paidup{font-weight:500; color:var(--yes)}
/* what needs a look: its name, what disagrees, and the one or two things that set it right, under the words */
.pvx-money .pvm-looks{margin:0; padding:0; list-style:none}
.pvx-money .pvm-look{padding:12px 16px}
.pvx-money .pvm-look + .pvm-look{border-top:1px solid var(--line)}
.pvx-money .pvm-look-t{margin:0; font-size:16px; font-weight:500}
.pvx-money .pvm-look-t a{color:var(--ink); text-decoration:none}
/* the name's press covers its words too, as a row's does (44 and more on a phone); the buttons stay outside it */
.pvx-money .pvm-look-hit{position:relative}
.pvx-money .pvm-look-t a::after{content:''; position:absolute; inset:0}
.pvx-money .pvm-look-t a:hover{text-decoration:underline; text-decoration-color:var(--line)}
.pvx-money .pvm-look-m{margin:4px 0 0; font-size:var(--hb); line-height:1.5; color:var(--ink-2)}
.pvx-money .pvm-look-acts{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px}
.pvx-money .pvm-look-acts .pv-inline{display:inline-flex; margin:0}

/* 3. The two families, in short (Where it stands, beside) and whole (their own view). A side's block is .pvm-fside: .pvm-side
   is the Family room's, and the home audit's card edge names it */
.pvx-money .pvm-fside{padding:12px 16px; border-bottom:1px solid var(--line)}
.pvx-money .pvm-side-h{margin:0; font-family:var(--serif); font-size:16px; font-weight:500; color:var(--ink)}
/* (the colours round, his note of 13 Oct: "reduce the font size of the money values … too closely aligned with the column on the
   right") In the side column the figures had 216: "₹…" at 20 filled its half (112) and stood 12 from the next. At 17 (600
   kept) two of ten letters take 96 each, 24 apart; two columns as they were while both fit, and "Paid so far" under "Its share"
   when they cannot (a crore), never touching. A phone's card (286) is unchanged in shape */
.pvx-money .pvm-figs{display:flex; flex-wrap:wrap; gap:8px 16px; margin:8px 0 0}
.pvx-money .pvm-figs > div{flex:1 1 0; min-width:max-content}
.pvx-money .pvm-figs dt{font-size:14px; color:var(--ink-2)}
.pvx-money .pvm-figs dd{margin:4px 0 0; font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap}
.pvx-money .pvm-sidebudget{margin:12px 0 0; font-size:var(--hd); color:var(--ink-2)}
.pvx-money .pvm-sidebudget .pv-btn{margin-left:8px; vertical-align:middle}
.pvx-money .pvm-settle{padding:12px 16px 16px}
.pvx-money .pvm-sidecard .pvm-settle, .pvx-money .pvm-settlecard .pvm-settle{padding:0}
.pvx-money .pvm-sidecard .pvm-settle{margin-top:16px; padding-top:16px; border-top:1px solid var(--line)}
.pvx-money .pvm-settle-h{margin:0; font-size:14px; font-weight:500; color:var(--ink-2)}
.pvx-money .pvm-settle-t{margin:4px 0 0; font-size:16px; font-weight:600; color:var(--ink)}
.pvx-money .pvm-settle-amt{font-variant-numeric:tabular-nums; white-space:nowrap}
.pvx-money .pvm-settle-m{margin:4px 0 0; font-size:var(--hb); line-height:1.5; color:var(--ink-2)}
.pvx-money .pvm-tblwrap{overflow-x:auto; margin-top:12px}
.pvx-money .pvm-tbl{width:100%; border-collapse:collapse; font-size:16px}
.pvx-money .pvm-tbl :is(th, td){padding:12px 0 12px 16px; border-top:1px solid var(--line); text-align:right; white-space:nowrap}
.pvx-money .pvm-tbl :is(th, td):first-child{padding-left:0; text-align:left}
.pvx-money .pvm-tbl thead th{border-top:0; padding-top:0; font-size:14px; font-weight:500; color:var(--ink-2)}
.pvx-money .pvm-tbl tbody th{font-weight:500; color:var(--ink)}
.pvx-money .pvm-tbl td{font-variant-numeric:tabular-nums; color:var(--ink)}
.pvx-money:where(.pv-sheet-money) .pvm-sides{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:32px; margin-bottom:24px}
.pvx-money .pvm-sides .pvm-sidecard{margin:0}
.pvx-money .pvm-side-name{margin:0 0 8px; font-family:var(--serif); font-size:24px; font-weight:500; color:var(--ink)}
.pvx-money .pvm-sharelabel{margin:0; font-size:var(--hd); color:var(--ink-2)}   /* (moneyshare) what the figure is, before it */
.pvx-money .pvm-share{margin:4px 0 0}
.pvx-money .pvm-sharehow{margin:12px 0 0; font-size:var(--hd); color:var(--ink-2)}
.pvx-money .pvm-made-h{margin:24px 0 0; font-size:14px; font-weight:500; color:var(--ink-2)}
.pvx-money .pvm-sidecard .pv-rows > .pv-row{padding:0}
.pvx-money :is(.pvm-settlecard, .pvm-splitcard, .pvm-incard){margin-bottom:16px}
/* a band card's own words and controls, on the band's edge (18), 12 under the band */
.pvx-money .pvm-in{padding:12px 16px 16px}
.pvx-money .pvm-in > :first-child, .pvx-money .pvm-in > .pvm-settle > :first-child{margin-top:0}
.pvx-money .pvm-note{margin:0 0 8px; font-size:var(--hb); line-height:1.5; color:var(--ink-2)}
.pvx-money .pvm-in > .pv-fold{margin-top:8px}
/* Coming in, a band card like its neighbours: its words on the band's edge, its sentences body */
.pvx-money .pvm-incard > :is(p, div, dl){margin-left:16px; margin-right:16px}
.pv.pvx-money .pvm-incard > p.pv-small{font-size:var(--hb); color:var(--ink-2)}   /* (over the house's small, which a phone sets at 14) */
.pvx-money .pvm-incard > :last-child{margin-bottom:16px}
.pvx-money .pvm-incard > p:first-of-type:not(.pv-mt){margin-top:12px}
/* the table a side a row on a phone; the rows hidden on a laptop */
.pvx-money .pvm-tblph{display:none}
/* a parent's page: the card and the words under it, one width */
.pvx-money .pvm-mine{max-width:700px}
.pvx-money .pvm-mine > .pvm-sidecard{margin-bottom:16px}

/* 4. Every line: its tags (the day, the amount, the vendor's step) between its name and its payment */
.pvx-money .pvm-tags{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:4px 0}
.pvx-money .pvm-tags .pv-daytag{margin-right:4px; font-size:14px; color:var(--ink-2)}
.pvx-money .pv-amt.pvm-est{color:var(--ink-2); font-weight:500}
.pvx-money .pvm-linetags{margin:0; gap:8px}
.pvx-money .pvm-linetags .pvm-nodate{font-size:var(--hd)}

/* a phone: one idea per line; a payment's day over what it is; the sides one under the other (the position's key: section 5) */
@media (max-width:600px){
  .pvx-money .pvm-pos-top .pv-btn{order:3}
  /* a payment's day over what it is, then its amount and its button on a line of their own */
  .pvx-money .pvm-due{grid-template-columns:minmax(0, 1fr); row-gap:0}   /* (the house's row has a gap of its own, which a grid also puts between rows) */
  .pvx-money .pvm-when{flex-direction:row; gap:4px; padding:12px 0 0; font-size:14px}
  .pvx-money .pvm-when span::before{content:'· '}
  .pv.pvx-money .pv-row:is(.pvm-due, .pvm-owed) > .pv-row-r{flex-basis:100%; justify-content:flex-end; padding:0 0 12px}
  /* on a phone a row's button starts at the line (the house's rule for a control) and its amount ends at the card's edge,
     under the sum: so a group's head keeps its one line */
  .pvx-money .pvm-pay .pvm-sum{margin-right:0}
  .pv.pvx-money .pvm-pay .pv-row:is(.pvm-due, .pvm-owed) > .pv-row-r{flex-direction:row-reverse; justify-content:space-between}
  .pv.pvx-money .pv-row.pvm-exp > .pv-row-r{padding:0 0 12px}
  .pv.pvx-money .pv-row.pvm-exp > .pv-row-main{padding-top:12px}
  .pv.pvx-money .pvm-due > .pv-row-main{padding-top:4px; padding-bottom:4px}
  .pv.pvx-money .pvm-owed > .pv-row-main{padding-bottom:4px}
  .pvx-money .pvm-look-t{font-size:16px}
  .pvx-money:where(.pv-sheet-money) .pvm-sides{grid-template-columns:minmax(0, 1fr); gap:16px}
  /* the families' table, a side a row (it was cut off at the card's edge) */
  .pvx-money .pvm-tblwrap{display:none}
  .pvx-money .pvm-tblph{display:block; margin-top:12px}
  .pv.pvx-money .pvm-tblph > .pv-row{padding:12px 0; border-top:1px solid var(--line)}
  /* an expected line, as a payment: its words, then its amount on a line of its own at the amounts' edge */
  .pvx-money .pvm-exp > .pv-row-main{grid-column:auto}
}
/* (the hierarchy round, round 3, his call i of 22 Oct 2026 night) To pay's group heads where the column is under 300 (320, and 360 and
   390 at 120 % text): the amount on a line of its own under the words, every head alike ("Owed, no date yet" wrapped beside its
   ₹… three lines at 320 at 120 %; now two) */
@container (max-width:300px){ .pvx-money .pvm-pay .pvm-group-h{flex-direction:column; align-items:flex-start; gap:0} }
/* rows inside a band card's own words (the payments between the families) keep the words' edge, not the card's */
.pv.pvx-money .pvm-in .pv-rows > .pv-row{padding:0}
.pvx-money .pvm-settled{margin-top:12px}

/* 5. The position (v212 item 9, his word of 24 Oct 2026: "there's some issue with the money overview … the estimate section is below,
   the paid and confirmed is on the right … a black vertical line next to the 313,000 figure"): one order at every width. "Budget" and
   "Projected" side by side at the big figure's size (the hierarchy round 2, 5.1, his call of 22 Oct); the verdict on a line of its own,
   "Change the budget" at its end; the bar, its budget's tick named at the tick; the bar's three parts under it, its legend, each part
   its swatch, its words and its figure at one size, in one row where the room allows and one under another on a phone; then the
   sentences. Its own classes: the house's .pv-bigsum (preview-home.css) and .pvm-overby (preview-finesse.css, the alarm's amber) are
   met here by specificity, not by order */
.pvx-money .pvm-pos-grid{--fig:32px; display:grid; grid-template-columns:auto auto; justify-content:start; column-gap:48px; align-items:start}
.pvx-money .pvm-pos-fig{min-width:0}
.pvx-money .pvm-pos-fig dt{display:flex; align-items:center; gap:8px; font-size:var(--hd); line-height:1.4; color:var(--ink-2)}
.pvx-money .pvm-pos-fig dd{margin-top:4px; white-space:nowrap}
.pv.pvx-money .pvm-pos-fig .pv-bigsum{font-size:var(--fig); color:var(--ink)}
/* (v213 item 2, the review of 25 Oct 2026) under Projected, the lines it does not count yet: the card's small words, wrapping in its column */
.pvx-money .pvm-pos-fig dd.pvm-pos-short, .pvx-money .pvm-pos-top .pvm-pos-short{margin-top:4px; white-space:normal; font-size:var(--hd); line-height:1.4; color:var(--ink-2)}
.pvx-money .pvm-pos-short a{font-weight:500; color:var(--wine); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:2px}
/* the verdict: larger than the card's words, smaller than the two figures; left in ink, over in red on its figure alone; no mark
   before it; the budget's one control at the line's end */
.pvx-money .pvm-verdict{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 16px; margin-top:16px}
.pvx-money .pvm-pos-diff{margin:0; font-size:24px; font-weight:500; line-height:1.25; letter-spacing:-.01em; color:var(--ink)}
.pvx-money .pvm-pos-diff b{font-weight:600; font-variant-numeric:tabular-nums}
.pv.pvx-money .pvm-pos .pvm-overby{color:var(--danger)}   /* (his word, "red", over finesse's amber for the alarms) */
/* the bar, and over it the budget's name at its tick: small, centred on the tick, or kept to the tick's own side near either end */
.pvx-money .pvm-barwrap{position:relative; margin-top:16px}
.pvx-money .pvm-barwrap.has-tick{padding-top:16px}
.pv.pvx-money .pvm-pos .pvm-barwrap > .pvm-bar{margin:0}
.pvx-money .pvm-tick{position:absolute; top:0; transform:translateX(-50%); font-size:12px; line-height:16px; font-weight:500; color:var(--ink-2); white-space:nowrap}
.pvx-money .pvm-tick.is-end{transform:translateX(-100%)}
.pvx-money .pvm-tick.is-start{transform:none}
.pvx-money .pvm-mark.is-end{margin-left:-2px}
.pvx-money .pvm-mark.is-start{margin-left:0}
/* a part's swatch, the bar's own colour (section 1) */
.pvx-money .pvm-pos-sw{display:inline-block; flex:none; width:10px; height:10px; border-radius:6px}
/* the bar's three parts: each its swatch, its words and its figure at one size, in the bar's order */
.pvx-money .pvm-parts3{display:flex; flex-wrap:wrap; gap:8px 32px; margin-top:12px}
.pvx-money .pvm-parts3 > div{display:flex; align-items:center; gap:8px; min-width:0; font-size:var(--hb); line-height:1.4}
.pvx-money .pvm-parts3 dt{display:flex; align-items:center; gap:8px; min-width:0; color:var(--ink-2)}
.pvx-money .pvm-parts3 dd{font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ink)}
.pv.pvx-money .pvm-parts3 a{color:var(--ink); font-weight:500; text-decoration:underline; text-decoration-color:var(--line); text-decoration-thickness:1px; text-underline-offset:3px}
.pvx-money .pvm-pos-est{margin-top:8px; font-size:var(--hd); line-height:1.45; color:var(--ink-2)}
/* no budget, or a celebration's own: its one big figure and its control, then the bar and the parts */
.pvx-money .pvm-pos-top + .pvm-barwrap{margin-top:16px}
.pv.pvx-money .pvm-pos > :is(.pvm-parts3, .pvm-pos-est) + :is(.pvm-firm, .pvm-missing){margin-top:16px}
/* a narrower room (a phone, a small laptop): the two figures as large as two fit side by side (--chars, the longer one's characters,
   from views/preview/money.js; a figure about 0.6 of its size a character; the card's 18 inset and the 16 between them); the
   verdict's figure a little smaller; the parts one under another, each figure at the line's end */
@container (max-width:899px){
  .pvx-money .pvm-pos-grid{--fig:min(32px, calc((100cqw - 52px) / (var(--chars, 10) * 1.26))); grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:16px}
  .pvx-money .pvm-pos-diff{font-size:clamp(17px, calc(var(--fig) * .8), 20px)}
  /* (the design review, item 5, 1 Nov 2026) the fit lands on a whole pixel, rounded down so two still fit: 24 at 390 (was 24.29),
     18 at 320 (was 18.73); "nothing fractional". A browser without round() keeps the line above */
  @supports (width:round(down, 1.5px, 1px)){
    .pvx-money .pvm-pos-grid{--fig:round(down, min(32px, calc((100cqw - 52px) / (var(--chars, 10) * 1.26))), 1px)}
  }
  .pvx-money .pvm-parts3{flex-direction:column; flex-wrap:nowrap; gap:4px}
  .pvx-money .pvm-parts3 > div{justify-content:space-between; gap:12px}
}

/* ===== preview-theme.css ===== */
/* The house's colours (the colours round, 13 October 2026, v180; docs/finesse-2026-10-12/colours/build.md). Every colour the
   house draws with is a token here, and nowhere else: test/colours.test.mjs reads every other preview-*.css and every view in
   views/preview/ and finds no colour written by hand (preview-cheq.css, his one trial house, keeps its own; the dark trial's
   sheet went in v216's fix round; transparent, currentColor and inherit need no token). Inlined by views/preview/kit.js, the shell and
   the door, after preview-home.css and every other sheet that uses the tokens, before the trials (dark, cheq, quiet), so a
   trial still redefines what it redefines.

   Three parts:
   1. :root, the house's own, the same in every theme: the days' and the people's tones (--c-*: a day's colour stays small, a
      date tile, a dot, a strip, and no theme touches it), status, gold, the white page and sheet, white and black by what they
      do, the shadows, and the drawings (the marks, the lights, the clocks, the world, the hours). On :root so the page's own
      ground (html) has them too.
   2. The four themes (White, Linen, Wine, Midnight; ten until the fix round of 26 October), one class each on body.pv: theme-<key> (Paper, the default, needs none). Each block sets every token it owns,
      so the class works on any element (a swatch drawn in a theme carries its class). Light seven, then dark three; in a dark
      one the bar, the page around the white sheet and the phone's two bars are deep and the papers inside are its light
      sibling's. Wine is the accent in all ten. The values: docs/finesse-2026-10-12/tools/colours/themes3.mjs (OKLCH), with
      --edge, every outlined control's edge (fields, buttons, chips) at 3:1 on white, the theme's card, its band and its
      paper (Paper's included).
   3. A theme's bar: on .pv-nav (laptop and tablet), .pv-top and .pv-tabbar (phone) the inside's tokens take the bar's, scoped,
      so the inside keeps its own; the current room and tab a light pill; badges ringed in the bar's colour. Paper has none of
      this: its bar is white, as its page.
   4. Paper's wings (v200, the dress): each wing its colour, shown small, on Paper alone (body.pv-paper); and the home's box
      under its photograph in v199's ivory (his ask of 21 Oct). */

/* ---- 1. the house's own, in every theme ---------------------------------------------------------------------------------- */
:root{
  /* (v200, the dress: direction 1, his pick of 21 Oct 2026) on the white, a card lifted by the house's lightest shadow (app.css
     --lift, the old look's), and a hair more under the pointer where a card is a way in (preview-finesse.css (v200: the lift)) */
  /* (v203, the home again: his word of 21 Oct 2026, "the shadows at different elements of different shadows", with a Keynote shape:
     blur 10 pt, offset 0, 50 %, no border, which on his screen is CSS's 8 px blur) one shadow all round every card and post, in place
     of the lift's shade under the bottom edge and the hairline the home's sections and posts wore (public/preview-lift.css 8) */
  /* his word on the first pictures, the same evening: "lighten the shadow a bit … it's looking a little too prominent … research
     about how Meta and Facebook, Insta"; a helper read them live (Facebook: white cards on a grey wash, 0 1px 2px at 20 %; Instagram:
     hairlines, no shadow; Material 3's level 1; Airbnb's layers; Comeau: tint a shadow with the ink, not black) and drew three; his
     pick of them ("shadow 1"): his Keynote at half its weight, all round, with a crisp 1 px edge, in the ink */
  /* (v205, his word of 21 Oct 2026, night: "we might have to slightly further reduce the shadows. Slightly more, but everywhere")
     the same shape a little lighter: the edge .10 → .08, the soft round .12 → .08, and the pointer's rise with them */
  /* (v209, item 6: one card recipe; his words "subtle outline, slightly more spacing, lighter shadow") every card and post is drawn
     by the same four. Its edge, 1 px of the theme's --line-tone drawn inside it (outline-offset -1, preview-finesse.css (v198)); the
     token holds the width, as a var() here would resolve before a theme sets the line. Its lift, an offset and a soft blur, about 4
     below and 2 at the sides (v205's 12 all round blended neighbours); a little more under the pointer where a card is a way in. The
     gap to the next card, 16 here (a phone) and 20 from 768 (preview-lift.css (v209, item 6)). --lift and --lift-up stay, as aliases */
  --card-edge:1px; --card-gap:16px;
  /* (2d: ticks) the tick a tick box draws (preview-finesse.css (2d: ticks)): a mask, so its colour is the token it is painted in
     (currentColor in an image is only its shape) */
  --tick-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.57' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4 4L19 7'/%3E%3C/svg%3E");
}

/* ---- 2. the four themes ---------------------------------------------------------------------------------------------------- */
/* Paper (the default: no class, or theme-linen; Linen until v200, renamed on his word of 21 Oct 2026, "let's call it paper").
   (v200, the dress: his word of 21 Oct 2026, "do away with the ivory, the rose gold … touches", and of the paper drawn a shade
   warm, "I don't like the ivory or the creamish either … everything white") every ground, paper, bar, card and band is white, the
   strip white with its rule; the fills a neutral step under white (no ivory in a fill either): way A as the dress's first mock drew
   it (docs/page-by-page-2026-10-20/v200-dress/mock/mock.css 1). A card is lifted by its hairline, a band by --line-soft under it
   (preview-finesse.css), the sheet by its hairline (preview-wings.css); the pictures are the warm thing now. */
.pv, .theme-linen{ --strip-rule:1; --tab-cur-bg:transparent;
}







/* Wine (dark: the bar, the page around the sheet and the phone’s two bars deep; inside, Blush) */
.theme-wine{ --strip-rule:1;
}


/* Midnight (dark: the bar, the page around the sheet and the phone’s two bars deep; inside, Sky) */
.theme-midnight{ --strip-rule:1;
}

/* ---- (2d: first) 36, the moods of "How is today?" ---------------------------------------------------------------------------------
   His word (14 Oct): "fine should be greenish, heavy should be yellowish, and storm should be red… the colors playing on the
   emotions": Fine a calm sage green, Heavy haldi yellow with a dark ochre word, Storm brick red. Moods of their own, never the
   house’s status (done --yes, waiting --warn, an alarm --danger) nor the wine; outside the mood, amber and red keep their one
   meaning (item 15). Each: the word’s tone, its tint at rest (the mood’s light, 85% over the theme’s card, --tone-card) and a
   button’s edge at rest (3:1 on the card). The word is 4.5:1 or more on its tint, the card and white; white is 4.5:1 or more
   on the chosen fill (test/r2d-first.test.mjs checks every theme). Worked out from each theme’s --tone-card, so a new
   --tone-card has its tints and edges worked out again the same way. Its own block, after the themes, before their bars.
   (the merge, from the final sheets: chosen, Heavy filled in its dark word tone read as olive, not "yellowish") Chosen, Heavy is
   a haldi yellow fill (--mood-heavy-fill, hue 42°) with the house’s ink on it, 9:1 or more, and an ochre edge between the word
   tone and the fill, 3:1 or more on the card (--mood-heavy-fill-line, also the partner’s dot); Fine and Storm stay filled in
   their tone with white words. */
.pv, .theme-linen{ }
.theme-wine{ }
.theme-midnight{ }

/* ---- 3. a theme's bar (not Paper's: its bar is white, as its page) ------------------------------------------------------------- */
/* the rooms' bar, laptop and tablet: the inside's tokens take the bar's, scoped, so the page inside keeps its own */
:is(.theme-wine, .theme-midnight) .pv-nav{--ink:var(--bar-ink); --ink-2:var(--bar-ink-2); --ink-2:var(--bar-ink-2); --ink-3:var(--bar-icon); --line:var(--bar-line);
  --line:var(--bar-line); --line:var(--bar-hover); --hover:var(--bar-hover); --hover:var(--bar-hover); --wine:var(--bar-link);
  --gold:var(--bar-amp); color:var(--bar-ink)}
:is(.theme-wine, .theme-midnight) .pv-nav .pv-list a svg, :is(.theme-wine, .theme-midnight) .pv-nav .pv-more summary svg{color:var(--bar-icon)}
/* the room you are in: a light pill, its words and icon in the bar's own */
:is(.theme-wine, .theme-midnight) .pv-nav .pv-list a[aria-current="page"], :is(.theme-wine, .theme-midnight) .pv-nav .pv-me[aria-current="page"]{background:var(--paper); color:var(--ink)}
:is(.theme-wine, .theme-midnight) .pv-nav .pv-list a[aria-current="page"] svg, :is(.theme-wine, .theme-midnight) .pv-nav .pv-me[aria-current="page"] *{color:var(--wine)}
:is(.theme-wine, .theme-midnight) .pv-nav .pv-badge{background:var(--bar-badge); color:var(--bar-badge-ink)}
:is(.theme-wine, .theme-midnight) :is(.pv-nav, .pv-top, .pv-tabbar) :focus-visible{}
/* the phone's top bar (its ground and its line are --top and --top-line, preview-home.css) */
:is(.theme-wine, .theme-midnight) .pv-top{--ink:var(--top-ink); --ink-2:var(--top-ink-2); --ink-2:var(--top-ink-2); --ink-3:var(--top-ink-2); --hover:var(--top-hover);
  --gold:var(--bar-amp); color:var(--top-ink)}
:is(.theme-wine, .theme-midnight) .pv-top .pv-icon-btn{color:var(--top-ink)}
/* the tab bar: a tab's words at rest, and the current one's icon on a light pill */
:is(.theme-wine, .theme-midnight) .pv-tabbar{--ink-2:var(--tab-ink); --wine:var(--tab-cur)}
:is(.theme-wine, .theme-midnight) .pv-tabbar a[aria-current="page"]{color:var(--ink)}
:is(.theme-wine, .theme-midnight) .pv-tabbar a[aria-current="page"] .pv-tabbar-ic{width:56px; height:30px; border-radius:999px; background:var(--paper); color:var(--wine)}
/* a count on the phone's bars (ringed in the bar's colour: --badge-ring) */
:is(.theme-wine, .theme-midnight) :is(.pv-top-acts, .pv-tabbar-ic) .pv-badge{background:var(--bar-badge); color:var(--bar-badge-ink)}

/* ---- 4. Paper's wings (v200, the dress; his pick of 21 Oct 2026: way A, "one colour a wing, shown small") ---------------------
   Each wing its colour, from the four pieces (docs/page-by-page-2026-10-20/v200-dress/START-HERE.md 2 and 4): Home the brass that
   is in all four (#CEA86A), Celebrations the marigold (#E2A01C), Family the mehendi's leaf (#7C8342), Planning the ledger's ink
   (#5B7391, the house's own slate: the one cool wing, the house's work), Memories the rose (#D8786A). Shown as two tokens: its tint, 13% of the
   hue on white (as a date tile mixes its own), and its ink, the hue darkened in OKLCH until it reads 4.5:1 on that tint
   (v200-dress/tools/ink.mjs; Home's is the house's own --gold-ink, Planning's its --c-slate-ink; Memories' one step darker than the
   first mock's, which read 4.49). Shown small and only where you are: the rail's current pill and the phone's current tab on the
   wing's tint with its mark and words in its ink; a room's key on its wing's tint; on Rooms each card's keys in that wing's colour;
   a page in no wing (Rooms) in ink on the neutral fill. Never a ground, a button or words in the raw hue; wine stays the one action.
   Paper's alone (body.pv-paper, views/preview/kit.js shell): the nine themes keep their bars and pills (3). The page's wing is
   body[data-wing] (views/preview/wings.js wingOf). ---- */
.pv.pv-paper{}   /* (v203: each wing's own colour, whole, for the strips: preview-lift.css 13) */
.pv.pv-paper[data-wing="home"], .pv.pv-paper .pv-wing[data-wing="home"]{}
.pv.pv-paper[data-wing="cel"], .pv.pv-paper .pv-wing[data-wing="cel"]{}
.pv.pv-paper[data-wing="fam"], .pv.pv-paper .pv-wing[data-wing="fam"]{}
.pv.pv-paper[data-wing="plan"], .pv.pv-paper .pv-wing[data-wing="plan"]{}
.pv.pv-paper[data-wing="mem"], .pv.pv-paper .pv-wing[data-wing="mem"]{}
/* the rail's current wing (or Rooms): its mark and name in the wing's ink on its tint */
.pv.pv-paper .pv-nav .pv-list a[aria-current="page"]{background:var(--paper); color:var(--ink)}
.pv.pv-paper .pv-nav .pv-list a[aria-current="page"] svg{color:var(--wine)}
/* the rail's hover: the neutral fill, on white (the ivory bar's deeper shade was for ivory) */
.pv.pv-paper .pv-nav .pv-list a:hover, .pv.pv-paper .pv-nav .pv-more summary:hover{background:var(--hover)}
.pv.pv-paper .pv-nav .pv-list a[aria-current="page"]:hover{background:var(--paper)}
/* a room's key (40, at its head) and the floor plan's keys (24): the wing's tint, its mark in the wing's ink */
.pv.pv-paper .pv-roomkey, .pv.pv-paper .pv-wing-km{background:var(--w-tint); color:var(--w-ink)}
/* the phone's tab bar: the current wing's words in its ink, its mark on a pill of its tint (56 by 30) */
.pv.pv-paper .pv-tabbar a[aria-current="page"]{color:var(--ink)}
.pv.pv-paper .pv-tabbar a[aria-current="page"] .pv-tabbar-ic{width:56px; height:30px; border-radius:999px; background:var(--paper); color:var(--wine)}
/* (21 Oct 2026, his word on the home's cover card: "I am open to giving this the ivory color like it was original … in this box it
   was looking nice") the box under the home's photograph (the names, the dates, the count) in v199's paper, Linen's: that box
   alone, on Paper */
.pv.pv-paper{}
.pv.pv-paper .pv-hero-foot{background:var(--panel)}   /* (the closing touches) the head's cream panel on --panel; --paper stays the strips' */

/* ===== preview-cheq.css ===== */
/* The landing page's way of working, in the house (6 October 2026; lib/answer.js cheqTrial, body class pv-cheq; inlined by
   views/preview/kit.js, the door's shell too). First on the home alone ("now apply the same style to the app home - but
   show me screen by screen the changes"), then, his next word, everywhere: "give me a full app in the version and let me
   explore and see how i feel about it". The learnings: ../Shaadi-HQ-site/docs/learning-from-chequpi.md. Five numbered
   parts, each keepable or droppable on his word; 2 and the greeting in 3 are the home's own, the rest every room's. */

/* the landing page's tokens, here only (the house's own palette: wine, ivory, gold; a wine-black for the dark parts) */
.pv-cheq{--cq-night:var(--ink); --cq-on:var(--wine-tint); --cq-on-2:var(--danger-tint); --cq-line:var(--surface);
  --cq-ivory:var(--warn-tint); --cq-card:0 1px 2px var(--hover), 0 16px 36px -20px var(--line)}

/* 1. The bars dark, as the landing page's (its bar is wine-black end to end, the lights hanging under it): on a phone
   the house's top bar; on a laptop the rooms' bar down the left, dark from the window's edge and top, the room you are
   in lit in wine. The mark keeps its gold, a face keeps its own colours, the lights hang over it. */
.pv-cheq .pv-top{background:var(--ink); color:var(--cq-on); box-shadow:none; border-color:transparent}
.pv-cheq .pv-top :is(.pv-top-names, .pv-top-tx, h1){color:var(--on-wine)}
.pv-cheq .pv-top :is(a, button):not(.pv-top-id):not(.pv-top-me){color:var(--cq-on)}
.pv-cheq .pv-top .pv-amp{color:var(--gold)}
.pv-cheq .pv-top :is(.pv-top-tx :not(.pv-top-names):not(.pv-top-names *), .pv-top-togo){color:var(--cq-on-2)}   /* the line under the names ("88 days to go") light on the dark */
@media (min-width:1024px){
  /* the dark runs from the window's left edge and top (his word, 6 Oct: "it's not getting joined to the left edge of the
     screen"): a fill behind the bar reaching past the page's own margins, square like the landing page's bar */
  .pv-cheq .pv-nav{position:relative; isolation:isolate; background:none; border:0; border-radius:0; box-shadow:none}
  .pv-cheq .pv-nav::before{content:""; position:absolute; z-index:-1; top:-40px; bottom:0; left:-60px; right:0; background:var(--cq-night)}
  .pv-cheq .pv-lights{z-index:3}
  /* every word on it white or near it ("plus the text is brown, not white"), the lines faint */
  .pv-cheq .pv-nav :is(.pv-l, .pv-nav-all, .pv-more-closed, .pv-more-open, summary, h2){color:var(--on-wine)}
  .pv-cheq .pv-nav :is(a, button, summary) svg{color:var(--on-wine)}
  .pv-cheq .pv-nav .pv-bar-t, .pv-cheq .pv-nav .pv-bar-t svg{color:var(--ink-2)}   /* the round button that folds it keeps its own dark arrow on white */
  .pv-cheq .pv-nav :is(.pv-id, .pv-nav-h, .pv-nav-foot, hr){border-color:var(--cq-line)}
  .pv-cheq .pv-nav a:not(.pv-id):hover{background:var(--surface)}
  .pv-cheq .pv-nav a:not(.pv-id):hover :is(.pv-l, svg){color:var(--on-wine)}
  .pv-cheq .pv-nav a[aria-current="page"]{background:var(--danger)}
  .pv-cheq .pv-nav a[aria-current="page"] :is(.pv-l, span, svg){color:var(--on-wine)}
}

/* 2. The home's cover as one of the landing page's panels: 28 corners, the photograph across its top, and the facts on
   the dark of its how-it-works panel: the names white with their gold "&", the date and the place in light words, the
   days and the two clocks the same, the line between them a faint one. */
.pv-cheq .pv-home .pv-hero{border-radius:28px; overflow:hidden; background:var(--cq-night); box-shadow:0 1px 2px var(--surface), 0 20px 44px -24px var(--ink-3)}
.pv-cheq .pv-home .pv-hero-foot{background:var(--cq-night); color:var(--cq-on)}
.pv-cheq .pv-home .pv-hero-foot .pv-names{color:var(--on-wine)}
.pv-cheq .pv-home .pv-hero-foot .pv-dateline, .pv-cheq .pv-home .pv-hero-foot .pvn-city-at, .pv-cheq .pv-home .pv-hero-foot .pv-hero-facts span:not(.pvn-city-who){color:var(--cq-on-2)}
.pv-cheq .pv-home .pv-hero-foot b, .pv-cheq .pv-home .pv-hero-foot .pvn-city-who, .pv-cheq .pv-home .pv-hero-foot .pvn-city-who i{color:var(--on-wine)}
.pv-cheq .pv-home .pv-hero-foot :is(.pv-hero-facts, hr){border-color:var(--cq-line)}
.pv-cheq .pv-home .pv-hero-foot p:not(.pv-dateline){color:var(--cq-on-2)}

/* 3. The home's greeting as the landing page's heads (larger, tighter), and its "How is today?" and "New here?" as the
   landing page's chips: ivory filled, no edge. */
.pv-cheq .pv-home .pvn-hello{font-size:clamp(30px, 22px + 1.6vw, 40px); line-height:1.06; letter-spacing:-.02em}
.pv-cheq .pv-home .pvf-today > summary, .pv-cheq .pv-home .pvf-next{border-color:transparent; background:var(--cq-ivory); border-radius:999px}
.pv-cheq .pv-home .pvf-today > summary:hover, .pv-cheq .pv-home .pvf-next:hover{background:var(--line)}

/* 4. Every card as the landing page's: 24 corners and soft, layered depth instead of the hairline (the house's rule is
   flat, 12 corners, a line: this is the one to decide); a card's ivory band (his, 3 Oct) keeps its place, its corners
   now the card's; a notice to confirm a soft gold wash instead of its gold edge; the home's side column's panels ivory,
   without the band (on ivory it would not show). */
.pv-cheq .pv-card{border-radius:24px; border-color:transparent; box-shadow:var(--cq-card); outline:0}
.pv-cheq .pv-card.pv-confirm{background:var(--paper); box-shadow:none}
.pv-cheq .pv-card.pv-panel > .pv-panel-top, .pv-cheq .pv-card.pvp-group > .pvp-group-h, .pv-cheq .pv-card.pvp-ask > .pvp-ask-h,
.pv-cheq .pv-card.pv-listcard > .pv-moneygroup-h, .pv-cheq .pv-card.pv-listcard > .pv-vhead,
.pv-cheq .pv-card.pv-pad > h2.pv-panel-h, .pv-cheq .pv-card.pv-fold[open] > summary{border-radius:23px 23px 0 0}
.pv-cheq .pv-card.pv-fold > summary{border-radius:23px}
.pv-cheq .pv-home .pv-sidecol .pv-sect{border-radius:24px; border-color:transparent; background:var(--cq-ivory); box-shadow:none}
.pv-cheq .pv-home .pv-sidecol .pv-sect.pv-sect.pv-sect > .pv-panel-top.pv-panel-top{background:transparent; border-color:transparent; border-radius:24px 24px 0 0}   /* over the bands' own rule, (0,7,0) */

/* 5. Buttons and the boxes people write in as the landing page's: 12 corners, and plain (his word, 6 Oct: "i don't like 3d
   buttons - use plain buttons on both the app and the landing page"): the house's own filled wine and outlined white,
   no lip, no gradient, no glow. */
.pv-cheq .pv-btn{border-radius:12px}
.pv-cheq :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea){border-radius:12px}

/* ===== preview-quiet.css ===== */
/* The quiet house (12 October 2026; lib/answer.js quietTrial, the word "quiet"; plan: docs/quiet-2026-10-12/plan.md).
   Inlined last by views/preview/kit.js when the word is on. Every rule starts with .pvx-quiet (the body class); no token
   changes, nothing in :root; sizes and radii from the house's scale (test/audit-signed-in.test.mjs). One part per section,
   each part's rules only inside its own section. */

/* (quiet: shape) the front rooms: the bar, the phone's tab bar, the Rooms page (items 1–4) */
/* the Rooms page: the fold's summary on the rows' left edge, how many of its rooms wait on you a quiet line under it; the phone's
   row and the walk after the fold on a rule of their own, so they never read as the fold's */
/* Settings › The house: the line on who sees which rooms in front starts on the rows' edge (their 18), at every width */
.pvx-quiet .pvx-qfront{padding-inline:16px}

/* (quiet: home) the drawing room: one line per room, the last few words, the end line, the post at rest (items 5–9) */
/* the feed in two parts (views/preview/next.js nextHome): what is yours and new, then the family's last words and the end line.
   On a wide screen they are one column, as the feed was; in one column the doors beside it (the people, messages, what is
   coming, the ways into the house) come between them, so the end line is the page's last thing (his call E) */
.pvx-quiet .pv-home > .pvx-q-col{grid-area:feed; min-width:0}
@container (max-width:639px){
  .pvx-quiet .pvo.pv-home{grid-template-areas:"hero" "days" "feed" "side" "around" "tail"}
  .pvx-quiet .pvo.pv-home.is-back{grid-template-areas:"hero" "feed" "days" "side" "around" "tail"}
  .pvx-quiet .pvo.pv-home > .pvx-q-col{display:contents}
  .pvx-quiet .pvo.pv-home > .pvx-q-col > .pvx-q-tail{grid-area:tail; margin-top:24px}
}
@container (min-width:640px) and (max-width:939px){
  .pvx-quiet .pvn.pv-home > .pvx-q-col,.pvx-quiet .pvn.pv-home > .pvx-q-col > .pv-feedcol:not(.pvx-q-tail){display:contents}
  .pvx-quiet .pvn.pv-home > .pvx-q-col > .pv-feedcol > *{order:3}
  .pvx-quiet .pvn.pv-home > .pvx-q-col > .pv-feedcol > .pvn-door{order:1}
  .pvx-quiet .pvn.pv-home > .pvx-q-col > .pvx-q-tail{order:7; margin-top:24px}
}
/* the composer at rest, on the home only (a celebration's page keeps its own). Here .pv-home.pvn is the family's home: the
   planner's desk (.pv-home alone) is left as it is. (open: home, item H1) its five ways show again at rest, drawn in
   preview-finesse.css (open: home) */
.pvx-quiet .pv-home.pvn .pv-feedcol > .pv-compose:not(.is-open){padding:12px}
/* the room-by-room card's way to everything since, under its rows */
.pvx-quiet .pvx-roomscard .pvx-q-all{margin-top:4px}
/* the phone nudge, one line inside the page under the greeting (his call D): its mark and words a link, "Not now" at its right */
.pvx-quiet .pvx-q-phone{display:flex; align-items:center; gap:8px; margin:0 0 16px; padding:4px 4px 4px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface)}
.pvx-quiet .pvx-q-phone[hidden]{display:none}
.pvx-quiet .pvx-q-phone > a{display:flex; flex:1 1 auto; align-items:center; gap:8px; min-width:0; min-height:44px; font-size:14px; font-weight:500; color:var(--ink)}
.pvx-quiet .pvx-q-phone > a svg{flex:none; color:var(--wine)}
.pvx-quiet .pvx-q-phone > .pv-btn{flex:none}
/* (quiet: walk, fix 1) the home's last words: a post's replies folded behind who replied and how many (views/preview/feed.js post
   `fold`). The opener sits where the count sat, at the right of the reactions line: up to three faces, the count in the line's own
   grey and the house's chevron, on the replies' own fill (the bubbles' --sunk), so it reads as the replies folded, not as an act
   (Love, Reply, Open), a link or a chip; flat, 30 drawn and 44 to press; the chevron turns while they are open */
/* his call 1 (12 Oct night): on a phone the faces leave, so the reactions beside the opener keep their two lines */

/* (quiet: rooms) the tools fold, Vendors, Guests (items 10–11) */
/* The tools fold (views/preview/kit.js toolsFold): an outlined "Tools" beside the head's one filled button. The filled button
   floats, so "Tools" stays where it was pressed and what it holds opens under both, across the head. */
.pvx-quiet .pv-head-acts:has(> .pv-tools){display:flow-root}
.pvx-quiet .pv-head-acts:has(> .pv-tools) > .pv-btn{float:left; margin-right:8px}
.pvx-quiet .pv-tools > summary{display:inline-flex; vertical-align:top; list-style:none; cursor:pointer; user-select:none}
.pvx-quiet .pv-tools > summary::-webkit-details-marker{display:none}
.pvx-quiet .pv-tools > summary > svg:last-child{margin-right:-4px; color:var(--ink-2); transition:transform var(--dur-fast)}
.pvx-quiet .pv-tools[open] > summary{border-color:var(--line-2)}   /* (the colours round, the merge: open, the outlined control's own edge, 3:1; --line-strong is now the lighter line) */
.pvx-quiet .pv-tools[open] > summary > svg:last-child{transform:rotate(180deg)}
/* The colours round's fixes, item 4 (his note of 13 Oct night, "Tools differ between Guests and Vendors"): one Tools in every room: its chevron
   16 wherever it sits (in a head's acts, The log's, the head's 18 for its buttons' icons drew it 18) */
.pvx-quiet .pv-tools > summary > svg:last-child{width:16px; height:16px}
/* (quiet: tools) what Tools holds, one structure in every room (kit.js toolsFold): the house's paper panel (pv-paperband:
   --paper, the card's edge and corners) 12 under the head's buttons, the card's inset (18; 16 on a phone). Its groups 16 apart,
   each a label 4 over its chips, the chips 8 apart and wrapping (nothing runs off a phone); then, 16 under the groups, one rule
   and the rarer acts as the house's rows, 40 tall (44 on a phone): an 18 icon on the panel's edge, the words on one indent, a
   fold's chevron at the row's end. */
.pvx-quiet .pv-tools-in{clear:both; display:grid; gap:16px; margin-top:12px; padding:16px 16px 0}
.pvx-quiet .pv-tools-in:not(:has(> .pv-tools-acts)){padding-bottom:16px}
.pvx-quiet .pv-tools-in > *{margin:0; min-width:0}
.pvx-quiet .pv-tools-row{display:grid; gap:4px; min-width:0}
.pvx-quiet .pv-tools-k{margin:0; font-size:14px; font-weight:500; line-height:16px; color:var(--ink-2)}
.pvx-quiet .pv-tools-in .pv-chips, .pvx-quiet .pv-tools-in .pvg-filters{display:flex; flex-wrap:wrap; gap:8px; min-width:0; margin:0; padding:0; overflow:visible; -webkit-mask-image:none; mask-image:none}
.pvx-quiet .pv-tools-in .pvg-filters .pv-chips{flex:0 1 auto}
.pvx-quiet .pv-tools-in .pvg-more{flex:none; width:auto; min-width:0; margin:0}
.pvx-quiet .pv-tools-in .pvg-more select{width:auto}
.pvx-quiet .pv-tools-acts{margin:0 -16px; border-top:1px solid var(--line)}
.pvx-quiet .pv-tools-acts > li{display:block; padding:0 16px}
.pvx-quiet .pv-tools-acts > li > .pv-row-main, .pvx-quiet .pv-tools-acts > li > .pv-fold > summary{display:flex; align-items:center; gap:12px; min-height:40px; padding:0; font-size:16px; font-weight:500; color:var(--ink)}
.pvx-quiet .pv-tools-acts > li > .pv-row-main .pv-row-t, .pvx-quiet .pv-tools-acts > li > .pv-fold > summary > span{font-size:16px; font-weight:500; line-height:1.4; color:inherit}
.pvx-quiet .pv-tools-acts > li > .pv-row-main .pv-row-ic{width:18px; height:18px; color:var(--ink-3)}
.pvx-quiet .pv-tools-acts > li > .pv-fold > summary > svg:first-child{flex:none; color:var(--ink-3)}
.pvx-quiet .pv-tools-acts > li > .pv-fold > summary > svg:last-child{margin-left:auto; color:var(--ink-2)}
@media (hover:hover){ .pvx-quiet .pv-tools-acts > li > a.pv-row-main:hover, .pvx-quiet .pv-tools-acts > li > .pv-fold > summary:hover{color:var(--wine)} }   /* (the colours round's fixes: under a pointer only; a tap on a phone leaves no row wine) */
.pvx-quiet .pv-tools-acts > li > .pv-fold{margin:0}
.pvx-quiet .pv-tools-acts > li > .pv-fold > .pv-fold-in{padding:4px 0 16px}
.pvx-quiet .pv-tools-acts > li > .pv-fold > .pv-fold-in .pv-fold > summary{padding-inline:0}
@media (max-width:1023px){
  .pvx-quiet .pv-tools-in{padding:16px 16px 0}
  .pvx-quiet .pv-tools-in:not(:has(> .pv-tools-acts)){padding-bottom:16px}
  .pvx-quiet .pv-tools-acts{margin:0 -16px}
  .pvx-quiet .pv-tools-acts > li{padding:0 16px}
  .pvx-quiet .pv-tools-acts > li > .pv-row-main, .pvx-quiet .pv-tools-acts > li > .pv-fold > summary{min-height:44px; font-size:16px}
  .pvx-quiet .pv-tools-acts > li > .pv-row-main .pv-row-t, .pvx-quiet .pv-tools-acts > li > .pv-fold > summary > span{font-size:16px}
  .pvx-quiet .pv-tools-acts > li > .pv-fold > .pv-fold-in{padding-bottom:16px}
}
/* closed with a filter in use: what is chosen, in one quiet line under the head's buttons */
.pvx-quiet .pv-tools-on{clear:both; margin:0; padding-top:12px; font-size:14px; line-height:1.5; color:var(--ink-2)}
.pvx-quiet .pv-tools-on b{font-weight:500; color:var(--ink)}
.pvx-quiet .pv-tools-on a:not(.pv-btn){font-weight:500; color:var(--wine)}
.pvx-quiet .pv-tools[open] + .pv-tools-on{display:none}
@media (prefers-reduced-motion:reduce){ .pvx-quiet .pv-tools > summary > svg:last-child{transition:none} }
/* a laptop: a head with Tools keeps its drawing level with the name (as a head without buttons does), so opening Tools never
   moves it, and what Tools holds has the head's whole width */
@container (min-width:760px){
  .pvx-quiet .pv-head-row:has(> .pv-head-acts > .pv-tools):has(> .pv-head-mark){grid-template-areas:"tx mark" "acts acts"}
  .pvx-quiet .pv-head-row:has(> .pv-head-acts > .pv-tools) > .pv-head-mark{align-self:start; margin-block:-2px 0}
}

/* Guests at rest: the households needing attention first, then the register under its own heading */
.pvx-quiet .pvq-attn{margin:0 0 24px}
.pvx-quiet .pvq-attn-top{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 16px; padding:12px 16px 8px; border-bottom:1px solid var(--line)}
.pvx-quiet .pvq-attn-h{margin:0; font-size:16px; font-weight:600; line-height:1.35; color:var(--ink)}
.pvx-quiet .pvq-attn-go{display:flex; flex-wrap:wrap; gap:0 16px; margin:0}
.pvx-quiet .pvq-attn-more{margin:0; padding:12px 16px 12px; border-top:1px solid var(--line); font-size:14px; color:var(--ink-2)}
.pvx-quiet .pvq-attn-more a{font-weight:500; color:var(--wine)}
.pvx-quiet .pvq-register{scroll-margin-top:16px}
/* (quiet: walk, fix 2) Vendors: the head's counts of jobs that are views ("8 booked", "5 still open"), each the house's filter chip
   (.pv-chips a: its edge, corners, 13.5/500 and 44 to press on a phone) in the line, marked while chosen (people.js vendorsSheet) */

/* (quiet: log) The log in the home's own cards (views/preview/feed.js logRoom, his word of 12 Oct): the cards are the home feed's
   (.pv-feed inside the home's own classes, .pvn .pva .pvo .pvf), nothing of their own; the page's end is its line in the house's words and, under it, the ways to the newer and the
   older page (the house's buttons), wrapping onto a second row on a phone when "Back to the newest" is there too */
.pvx-quiet .pv-main .pvx-q-log:not(.pv-head), .pvx-quiet .pv-main .pvx-q-logend:not(.pv-head){max-width:700px}   /* the home feed's own column, so a card is the same size in both */
.pvx-quiet .pvx-q-logend{margin:24px 0}
.pvx-quiet .pvx-q-logend > .pv-end{margin:0}
.pvx-quiet .pvx-q-logend > .pv-pager{flex-wrap:wrap; margin:12px 0 0}

/* (quiet: plan) Planning and Money behind the house's one Tools (plan item 13; views/preview/plan.js planTools, money.js
   moneyHouse). Planning's "Show": the celebrations as the chips they are, then "Waiting on" and its choice, wrapping 8 apart as
   Guests' row does; the choice as tall as a chip on a laptop and 44 to press on a phone. */
.pvx-quiet .pv-tools-in .pvp-qshow{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; min-width:0}
.pvx-quiet .pv-tools-in .pvp-qshow > .pv-chips{flex:0 1 auto}

/* (quiet: day) a celebration's page (views/preview/days.js dayRoom, plan item 14): the day first; beside it (on a phone, after it)
   everything else one line each, ruled off as the Vendors line always was. A line to a page of its own (the menu, who is coming,
   its money, the calendar) is the closed line's twin: the same title over the same grey words (it wears .pvd-part for them), its
   arrow pointing on instead of down. The talk's newest three, then its fold; the page's end line under both columns. */
.pvx-quiet .pvx-q-go{margin:0; padding:0; list-style:none}
.pvx-quiet .pvd-plan > .pvx-q-go{margin:8px 0 0; padding-top:8px; border-top:1px solid var(--line)}
.pvx-quiet .pvd-plan > .pv-h2 + .pvx-q-go{margin-top:12px; padding-top:0; border-top:0}
.pvx-quiet .pvd-plan > .pvx-q-go + .pv-fold{margin:8px 0 0; padding-top:8px; border-top:1px solid var(--line)}
.pvx-quiet .pvx-q-go > li > a, .pvx-quiet .pvx-q-go > li > p{display:flex; align-items:center; gap:8px; min-height:38px; margin:0; font-size:14px; font-weight:500; line-height:1.5; color:var(--wine)}
.pvx-quiet .pvx-q-go > li > p{color:var(--ink)}
.pvx-quiet .pvx-q-go > li > * > span{display:flex; flex-direction:column; gap:0px; min-width:0; padding:4px 0}
.pvx-quiet .pvx-q-go > li > a > svg{flex:none; margin-left:auto}
.pvx-quiet .pvx-q-go > li > a:hover > span{text-decoration:underline; text-underline-offset:3px}
.pvx-quiet .pvx-q-go > li > a:hover .pvd-sum{text-decoration:none}
.pvx-quiet .pvr-day .pvx-q-daysaid{margin:12px 0 0}

/* (quiet: desk) The planner's desk (views/preview/feed.js quietDesk): "Ask the family" opens its form in place under the head's
   buttons, as Tools does (the same summary, the same row); the home's end line is the desk's last thing: on a phone after the side
   column, on a laptop under the desk's own column */
.pvx-quiet .pvx-desk-ask-in{clear:both; display:grid; gap:12px; margin-top:12px}
.pvx-quiet .pvx-desk-ask-in > *{margin:0; min-width:0}
.pvx-quiet .pv-home.pvx-desk{grid-template-areas:"hero" "days" "feed" "side" "end"}
.pvx-quiet .pv-home.pvx-desk > .pvx-desk-end{grid-area:end}
@container (min-width:940px){
  .pvx-quiet .pv-home.pvx-desk{grid-template-rows:auto auto 1fr auto; grid-template-areas:"hero hero" "feed days" "feed side" "end side"}
}

/* (quiet: log2) The log's head (views/preview/feed.js logRoom, item 15a): the search and Tools on one line, the search taking
   what Tools (119) leaves, at most the house's 420, both the head's button height (40; 44 on a phone); Tools opens under both */
.pvx-quiet .pvx-q-loghead .pv-head-acts > .pv-search{float:left; width:calc(100% - 127px); max-width:420px; margin:0 8px 0 0}
.pvx-quiet .pvx-q-loghead .pv-head-acts > .pv-search input{min-height:34px}
.pvx-quiet .pvx-q-loghead .pv-tools-in{max-width:700px}   /* open, on the cards' own column (the log's 700), not the head's width */
@media (max-width:1023px){
  .pvx-quiet .pvx-q-loghead .pv-head-acts > .pv-search{max-width:none}
  .pvx-quiet .pvx-q-loghead .pv-head-acts > .pv-search input{min-height:38px}
}
/* Since you were here (views/preview/next.js sincePage, item 15b): each older day one line between the rows' rules, the day in
   the ink, how many things in grey, the chevron at the line's end, 52 to press; open, its cards under it as the open days hold
   theirs, then the page's end line */
.pvx-quiet .pvx-q-sinceold{margin:24px 0 0; border-bottom:1px solid var(--line)}
.pvx-quiet .pv-main:has(.pvx-q-sinceold){overflow-anchor:none}   /* a day opened keeps its line where it was pressed (preview-quiet.js), never the browser's guess */
.pvx-quiet .pvx-q-sinceold > .pvx-sinceday{margin:0; border-top:1px solid var(--line)}
.pvx-quiet .pv-fold.pvx-q-sinceday{margin:0}
.pvx-quiet .pv-fold.pvx-q-sinceday > summary{display:flex; gap:8px; min-height:52px; padding:0; font-size:16px; font-weight:400; color:var(--ink-2)}
.pvx-quiet .pv-fold.pvx-q-sinceday > summary > span{flex:1; min-width:0}
.pvx-quiet .pv-fold.pvx-q-sinceday > summary b{font-weight:500; color:var(--ink)}
.pvx-quiet .pv-fold.pvx-q-sinceday > summary:hover b{color:var(--wine)}
.pvx-quiet .pv-fold.pvx-q-sinceday > summary > svg:last-child{flex:none; color:var(--ink-2)}
.pvx-quiet .pv-fold.pvx-q-sinceday > .pv-fold-in{padding:0 0 16px}

/* (quiet: settings) Settings (views/preview/people.js settingsQuiet, his item 15c): each part of a tab one row of one card, closed,
   drawn as Tools draws a fold (an 18 icon on the card's edge, the words on one indent, the chevron at the row's end; the words 15,
   16 on a phone), what is set after the part's name in the card's grey, rows 52 tall under one rule each. What a part holds opens
   in place under its row on the card's own inset, nothing boxed inside it; one open at a time (preview-quiet.js). */
.pvx-quiet .pvx-sets{padding:0 16px}
.pvx-quiet .pvx-sets .pvx-set{margin:0; border-top:1px solid var(--line)}
.pvx-quiet .pvx-sets > .pvx-set:first-child, .pvx-quiet .pvx-sets > :first-child > .pvx-set:first-of-type{border-top:0}
.pvx-quiet .pvx-set > summary{display:flex; align-items:center; gap:12px; min-height:52px; padding:8px 0; font-size:16px; font-weight:500; line-height:1.4; color:var(--ink)}
.pvx-quiet .pvx-set > summary > span{flex:1; min-width:0; font-size:16px; font-weight:500; color:inherit}
.pvx-quiet .pvx-set > summary > svg:first-child{flex:none; color:var(--ink-3)}
.pvx-quiet .pvx-set > summary > svg:last-child{flex:none; margin-left:auto; color:var(--ink-2)}
.pvx-quiet .pvx-set > summary:hover{color:var(--wine)}
.pvx-quiet .pvx-set-is{font-weight:400; color:var(--ink-2)}
.pvx-quiet .pvx-set > .pv-fold-in{padding:4px 0 16px}
.pvx-quiet .pvx-set .pv-rows > .pv-row{padding:0}
.pvx-quiet .pvx-sets > form{display:block}   /* a form of several parts: its parts are the card's rows, its fields spaced in each part as the form spaced them */
.pvx-quiet .pvx-sets > form.pv-form > .pvx-set > .pv-fold-in{display:grid; gap:16px}
.pvx-quiet .pvx-set, .pvx-quiet .pvx-set > .pv-fold-in, .pvx-quiet .pvx-set > .pv-fold-in > *{min-width:0}   /* a wide table scrolls inside its part */
.pvx-quiet .pvx-set .pv-vhead, .pvx-quiet .pvx-set .pv-vrow{padding-inline:0}
.pvx-quiet .pvx-set > .pv-fold-in > .pv-quiet{font-size:16px}   /* a part's own words in the card's one body size (a panel's lede was larger) */
@media (hover:hover){ .pvx-quiet .pvx-set .pv-card .pv-rows > .pv-row:has(a.pv-row-main:hover){background:none} }   /* (the colours round's fixes: under a pointer only, so a tap on a phone leaves nothing behind) */
@media (max-width:1023px){
  .pvx-quiet .pvx-sets{padding:0 16px}
  .pvx-quiet .pvx-set > summary, .pvx-quiet .pvx-set > summary > span, .pvx-quiet .pvx-set > .pv-fold-in > .pv-quiet{font-size:16px}
  .pvx-quiet .pvx-set > .pv-fold-in{padding-bottom:16px}
}

/* (quiet: ends) the house's one end line in the long rooms (the Map, Family, Today, From the two of us; views/preview/days.js,
   people.js, more.js): 22 px under the room's last thing, as after Vendors' and Guests' lists. Where it follows the two
   columns, their last panels give up the space under them (a grid keeps a panel's margin), so the line is not 54 px down;
   (the merge made it every room's: the rule is the house's end line's own now, (quiet: int3) below) */

/* (quiet: int3) the merge's own (12 Oct, build-brief-3.md "The merge"; rule 47: the same role drawn the same way in every room).
   The end line is the house's one form in every room that has one (.pv-end, the house's sheet: its words 13.5, 14 on a phone,
   in the grey, centred on the room's own column): 22 under the room's last thing, whatever that thing is (the thing before it
   gives up its own space below, and so do the last panels of two columns before it, which a grid keeps), so the line's own 22
   is the gap; then "From here" (its own 32 above it), or the room's pager 12 under it, as The log's. The home's and the desk's
   "That is all for today…" are the drawing room's own line and keep theirs (.pv-home). */
.pvx-quiet main :has(+ .pv-end):not(.pv-home *){margin-bottom:0}
.pvx-quiet .pv-cols:has(+ .pv-end) > * > :last-child{margin-bottom:0}
.pvx-quiet .pv-end:has(+ .pv-pager){margin-bottom:12px}
.pvx-quiet .pv-end + .pv-pager{margin-top:12px}
/* Tools that hold only the rarer acts (Money's first view, The two families): the rows start at the panel's edge, as they end
   at it; the one rule parts the groups from the acts, so with no group above there is nothing for it to part */
.pvx-quiet .pv-tools-in:has(> .pv-tools-acts:first-child){padding-top:0}
.pvx-quiet .pv-tools-in > .pv-tools-acts:first-child{border-top:0}

/* ===== preview-finesse.css ===== */
/* The finesse round (12 October 2026, v175; docs/finesse-2026-10-12/the-list.md, build-rules.md). Inlined last in every room by
   views/preview/kit.js shell, after the quiet sheet and its script; every selector under .pv. The values live in their tokens
   (public/preview-home.css .pv: --ink-3, the corners, the paper and the tones; public/preview-harmony.css: --hd); what is here is
   the rules that only work by being read after every other sheet. Three parts, each built on its own branch: the rules (items
   1–7), the room's three layers (item 8), the home's six changes (items 9–14). */

/* (finesse: rules) the seven house-wide rules, items 1–7 */

/* 4. The page on paper (laptops, 1024 and wider): the page and the bar on the paper, no rule between them; the room one white sheet
   with 20-point corners from the bar's side to the window's, reaching the page's end, its column centred inside it as before (at
   least 40 inside it at the sides); the lights stay where they are, over the paper. Every kind of page, the home included, the
   open and the folded bar alike. Phones and narrower windows stay as they are (white). */
@media (min-width:1024px){
  body.pv:not(.pv-k-door){background:var(--canvas); background-attachment:fixed}   /* (v198) linen's wash (preview-theme.css), fixed to the window */
  html:has(> body.pv:not(.pv-k-door)){background:transparent}   /* (so the window's own ground, past the page's ends, is the body's paper) */
  .pv .pv-shell, .pv.pv-flow .pv-shell, .pv.pv-flow.pv-rail .pv-shell{min-height:100vh; padding-bottom:24px}
  .pv.pv-harmony.pv-frame .pv-shell, .pv.pv-harmony.pv-frame.pv-flow.pv-rail .pv-shell{padding-right:24px}
  .pv .pv-nav{border-right:0}
  .pv .pv-nav-in{margin-bottom:-24px}   /* (the bar is the window's height; the paper's 24 under the sheet is not counted twice, so a short page does not scroll) */
  .pv .pv-nav .pv-list a:hover, .pv .pv-nav .pv-more summary:hover{background:var(--hover)}   /* (v200: the ivory bar retired; a theme's bar keeps its own hover, Paper's is its fill: preview-theme.css 4) */
  .pv.pv-harmony.pv-frame .pv-main, .pv .pv-main{max-width:none; margin:8px 0 0; padding:32px max(40px, calc((100% - var(--page)) / 2)) 64px;
    border-radius:var(--r-sheet); background:var(--surface)}
  .pv.pv-flow.pv-rail .pv-main{padding-top:32px}
  .pv .pv-msgs{height:calc(100vh - 168px)}   /* (Messages keeps to the window inside the sheet: 30 over the sheet, 10 + 40 into it, 64 + 24 under) */
}

/* 1. Spacing, one scale: 8 within a block, 16 between related blocks, 32 between sections, 48 before a new region (32 on a phone).
   The head: the name, its line and its second line 8 apart (one block); the head's buttons 16 under them; the room's content 48
   under the head. A card in a column 16 from the next; a section 32 from the next; a panel's title 8 over its content; a row's
   title 4 over its detail (8 between their words, with the lines' own leading). (The couple's note keeps 4/4 inside: item 10's.) */
.pv .pv-head{margin-bottom:48px}
.pv .pv-head:not(:has(.pv-tabs)){padding-bottom:0}
.pv .pv-head-row{row-gap:16px}
.pv .pv-head-sub{margin-top:8px}
@media (max-width:1023px){ .pv .pv-head{margin-bottom:32px} }
/* (the base rules restated at their own weight, so a room's own sharper rule still places its part: a card's 16 is the base's already) */
:where(.pv) .pv-sect{margin-bottom:32px}
:where(.pv) .pv-panel-top{margin-bottom:8px}
:where(.pv) .pv-vrow-main em, :where(.pv) .pv-row-m{margin-top:4px}

/* 2. One meaning per look. Wine only for the one main act (the filled button) and the chosen thing (a chosen chip or tab, the room
   you are in, a pressed choice). Text links in ink-2 when they stand alone, in ink inside a sentence, each underlined in the firm
   line 3 px under its words, at 500. An alarm (late, overdue) is amber words, said once, never wine. Icons in their word's ink. */
.pv:where(:not(.pv-k-door)) :is(.pv-more-link, .pvl-more a, .pvl-cmp, .pv-nav-all, .pvq-attn-more a, .pv-link-btn, a.pvy-else, .pv-slot-edit > summary, .pvx-slotedit a, .pv-poll-note a),
.pv.pvx-views .pvx-views a, .pv.pvx-views .pvx-views a.pvx-views-new, .pv.pvx-tools .pvl .pvl-g .pvl-cmp{
  color:var(--ink-2); font-weight:500; text-decoration:underline; text-decoration-color:var(--line); text-decoration-thickness:1px; text-underline-offset:3px}
.pv:where(:not(.pv-k-door)) :is(.pv-more-link, .pvl-more a, .pvl-cmp, .pv-nav-all):hover, .pv.pvx-views .pvx-views a:hover{color:var(--ink); text-decoration-color:currentColor}
.pv :is(.pv-end, .pv-small, .pvm-missing, .pv-head-sub, .pv-post-tx) a:not(.pv-btn, .pv-more-link, .pv-chips a){color:var(--ink); font-weight:500; text-decoration:underline; text-decoration-color:var(--line); text-decoration-thickness:1px; text-underline-offset:3px}
.pv:where(:not(.pv-k-door)) svg:is(.pv-more-link svg, .pvl-more a svg){color:inherit}
/* the same roles as the rooms draw them: a figure's caption that is a link (From the two of us), a phone number or a tag in a line, a
   link in a day's detail (Today) */
.pv ul.pv-stand span{color:var(--ink-2); text-decoration-color:var(--line)}
.pv.pv-harmony main a[href^="tel:"]:not(.pv-btn), .pv.pv-harmony main a.tag{text-decoration-color:var(--line); text-decoration-thickness:1px}
.pv .pv-slot-tx em a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px}
/* wine on what is neither the act nor the chosen thing goes to ink: a count in a strip, a hashtag's lead, the next step's name and its
   tag (Planning), a song's order (Sangeet), a meeting's date tile, Planning's question mark (an icon in its words' ink) */
.pv .pv-strip b, .pv :is(.pv-hashline, .pv-hashnote) b, .pv .pvr-plan .pvp-step.is-next .pvp-step-l b, .pv.pv-focus .pvr-plan .pvp-q.is-ask{color:var(--ink)}
.pv .pvr-plan .pvp-step-tag, .pv.pvx-focus2 .pvx-sangeet .pvx-sort{color:var(--ink-2)}
.pv .pv-datebox{background:var(--surface); color:var(--ink)}
.pv .pv-datebox em{color:var(--ink-2)}
/* Planning's "Settled in the last two weeks": the link is its words, the tick beside them keeps its green */
.pv.pvx-planroom.pv-focus .pvr-plan .pvp-after a{text-decoration:none}
.pv.pvx-planroom.pv-focus .pvr-plan .pvp-after a span{color:var(--ink-2); font-weight:500; text-decoration:underline; text-decoration-color:var(--line); text-decoration-thickness:1px; text-underline-offset:3px}
/* a fold's line: a fold that shows more in ink-2 (its chevron says it opens), a row's name in ink (a celebration's parts, the rest of
   the house, the lines to a page of their own beside them); never wine */
:where(.pv) .pv-fold > summary{color:var(--ink-2)}   /* (weightless, so a room's own fold that is a row keeps its ink: Settings' parts, Tools' rows) */
.pv .pv-fold:is(.pvd-part, .pvx-qrest) > summary, .pv.pvx-quiet .pvx-q-go > li > a, .pv .pv-fold.pvx-sincefold > summary b, .pv.pvx-homedesign .pv-fold.pvx-sincefold > summary > svg:last-child{color:var(--ink)}
/* alarms: late and overdue in amber words, once */
.pv :is(.pv-due.is-late, .pv-late, .pvx-late, .pvr-plan .pvp-late, .pvr-plan .pvp-step-n a, .pvr-plan .pvp-waits),
.pv.pvx-money .pvm-when span.pv-late, .pv.pvx-money .pvm-overby, .pv .pvr-plan .pvp-strip.is-late{color:var(--warn)}
/* once: Planning's late group says it in its rows ("due yesterday"), so its band reads as every band does; and what is due soon is
   not an alarm: its words in ink, a step darker than the line they stand in, never amber */
.pv .pvr-plan .pvp-group.is-late .pvp-group-h, .pv .pvr-plan .pvp-group.is-late .pvp-group-h > span{color:var(--ink-2)}
.pv .pv-due.is-soon{color:var(--ink)}
/* icons in their word's ink: the bar's in ink (the room you are in keeps its wine), a chevron or a dot at rest may stay the faint grey */
.pv .pv-list a svg, .pv .pv-more summary svg{color:inherit}
:where(.pv) .pv-row-ic{color:inherit}
.pv.pvx-quiet .pvx-set > summary > svg:first-child, .pv.pvx-quiet .pv-tools-acts > li > .pv-row-main .pv-row-ic, .pv.pvx-quiet .pv-tools-acts > li > .pv-fold > summary > svg:first-child{color:inherit}
.pv .pv-list a[aria-current="page"] svg{color:var(--wine)}

/* 3. Two greys for words (the tokens: --ink-3 is --ink-2's value; --ink-4 keeps rules, dots and resting icons); details 14, on a
   laptop as on a phone (--hd, and the detail rules the phone pass listed, public/preview-harmony.css 7.2). The links and filter chips
   that stood at 13.5 are details too; a state chip 13 (it was 12.5, a size of its own). */
.pv:where(:not(.pv-k-door)) :is(.pv-chips a, .pvl-cmp, .pvl-more a, .pv-more-link), .pv.pvx-tools .pvl .pvl-g .pvl-cmp{font-size:14px}
.pv .pv-chip{font-size:13px}
/* the details the phone pass's list did not reach, at 13.5 on a laptop: Money's dates and its labels, a list of facts' names, a
   post's "2 replies", the way back */
.pv.pvx-money :is(.pvm-when, .pvm-settle-h, .pvm-made-h), .pv .pv-kv dt, .pv .pvr-plan .pvp-en .pv-kv dt, .pv.pvx-quiet .pvx-q-thread, .pv.pv-harmony :is(.pv-link-btn, .pv-back){font-size:14px}

/* 5. The house speaks in the serif, data and controls in the sans: every room's name in Newsreader Title 500, 42 on a laptop and 30 on
   a phone, once; the end lines ("That is every job.") in Newsreader Text 400 at 17, ink-2. Rows, figures, chips and buttons stay in
   the system font. */
.pv .pv-head h1, .pv .pv-head.is-serif h1, .pv.pv-harmony .pv-head h1, .pv.pv-harmony .pv-head.is-serif h1{
  font-family:var(--title); font-weight:500; font-size:32px; line-height:1.1; letter-spacing:-.012em}
@media (max-width:1023px){ .pv .pv-head h1, .pv .pv-head.is-serif h1, .pv.pv-harmony .pv-head h1, .pv.pv-harmony .pv-head.is-serif h1{font-size:32px; line-height:1.15} }
.pv .pv-end, .pv main .pv-end{font-family:var(--serif); font-weight:400; font-size:16px; line-height:1.5; color:var(--ink-2)}
.pv main .pv-end:not(.pv-home *){margin-block:32px}   /* (1: the room's end line a section's 32 under its last thing; it was 22) */

/* 6. Controls look like controls: a firmer edge on outlined and quiet buttons, chips and fields; buttons and fields 11-point corners
   (the token); chips round, the chosen one wine-tint with wine words. Buttons keep 40 in a head and 34 elsewhere, 44 on a phone as
   now. On touch, a row's actions (call, WhatsApp and their like) 44 to press; chips drawn 36 with a 44 press area.
   (The colours round, 13 Oct: every outlined control's edge, a field's, a button's, a filter chip's and the composer's prompt's, is
   --edge, 3:1 on white, a card, a band and the paper in every theme, Linen's included; it was --line-strong, 1.78:1. Ticks and
   links' underlines keep --line-strong.) */
.pv:where(:not(.pv-k-door)) .pv-btn, .pv.pv-heads .pv-head-acts .pv-btn{border-radius:var(--r-ctl); font-size:16px}   /* (15, a row's title's size: 14.5 was a size of its own) */

:where(.pv) .pv-fold > summary{font-size:16px}   /* (a fold's line and a tab's words a control's 15 too; 14.5 was a size of its own) */
@media (min-width:1024px){ :where(.pv) .pv-tabs a{font-size:16px} }
.pv:where(:not(.pv-k-door)) :is(.pv-btn-secondary, .pv-btn-quiet), .pv.pv-heads .pv-head-acts .pv-btn-quiet, .pv .pv-head-acts .pv-menu > summary.pv-icon-btn{border-color:var(--line-2)}
.pv :is(.pv-btn-secondary, .pv-btn-quiet)[aria-pressed="true"]{border-color:var(--line)}
.pv:where(:not(.pv-k-door)) :is(input[type=text], input[type=search], input[type=url], input[type=tel], input[type=email], input[type=number], input[type=date], input[type=time], input[type=datetime-local], input:not([type]), select, textarea){border-color:var(--line-2)}
.pv:where(:not(.pv-k-door)) :is(input, select, textarea):focus{border-color:var(--wine)}
.pv .pv-chips a{border-color:var(--line-2); border-radius:var(--r-chip)}
.pv .pv-chips a[aria-current="true"], .pv .pv-chips a.is-on{border-color:var(--line); background:var(--wine-tint); color:var(--wine)}
/* what you write in keeps its edge on a tone: a post's reply box and the composer at rest, white with the firm edge (they were a fill) */
.pv .pv-cbox :is(input[type=text], input:not([type])){border-color:var(--line-2); background:var(--surface)}
.pv .pv-prompt, .pv .pvo .pv-feedcol > .pv-compose .pv-prompt{border-color:var(--line-2); background:var(--surface)}
.pv .pv-prompt:hover, .pv .pvo .pv-feedcol > .pv-compose .pv-prompt:hover{border-color:var(--line-2); background:var(--surface)}   /* (its hover keeps the edge: --ink-4 is now the lighter grey) */
@media (pointer:coarse){
  .pv .pv-chips a{position:relative; min-height:36px}
  .pv .pv-chips a::after{content:""; position:absolute; inset:-4px 0}
  
}

/* 7. Cards by tone, not by line: a card on the card's tone, no border, 16-point corners (the token), 24 inside on a laptop and 18 on a
   phone; its band one tone deeper with no rule under it; one hairline between rows. Only what you write in or press keeps an edge. */
.pv:where(:not(.pv-k-door)){--card-in:24px}
@media (max-width:1023px){ .pv:where(:not(.pv-k-door)){--card-in:18px} }
.pv:where(:not(.pv-k-door)) .pv-card{background:var(--surface); border:0}
/* (v198, his walk, 20 Oct 2026: "give each box or section inside the homepage a slight border"; of a post, "it's a little mixing
   with the white background") every surface on the card's tone keeps its tone and gains one hairline, --line-tone, drawn as an
   outline inside its edge: nothing it holds moves, a photograph at its top runs to the line, a band keeps its corners, and a
   card that is a link still shows the focus ring when it has the focus. Measured on 25 pages at 1294 and 390 as the couple: no
   card sits in another (rule 43); the phone's floor plan is one card of rows (preview-wings-rows.css); the home's cover, white
   over its paper foot, the same line; the home's "In the house" is a list on the sheet, not a card, and keeps none */
.pv:where(:not(.pv-k-door)) :is(.pv-card, .pv-paperband, .pvm-side):not(:focus-visible), .pv:where(:not(.pv-k-door)) .pvo :is(.pv-sidecol > .pv-sect.pv-sect, .pvo-around > .pv-sect, .pv-feedcol > .pv-sect.pvh-ask):not(:focus-visible, .pvh-rooms),
  .pv:where(:not(.pv-k-door)) .pvo > .pva-you:not(:focus-visible), .pv .pv-hero.pvn-cover{outline:var(--card-edge) solid var(--line); outline-offset:-1px}   /* (v209, item 6: the edge a token) */
:where(.pv) :is(.pv-card.pv-panel > .pv-panel-top, .pv-card.pvp-group > .pvp-group-h, .pv-card.pvp-ask > .pvp-ask-h, .pv-card.pv-listcard > .pv-moneygroup-h,
  .pv-card.pv-listcard > .pv-vhead, .pv-card.pv-fold > summary, .pv-card.pv-pad > h2.pv-panel-h:not(:not(input[type=hidden]) ~ *)){
  border-bottom-color:transparent; background:transparent; border-radius:var(--r-post) var(--r-post) 0 0}
.pv .pv-card.pv-fold.pv-fold:not([open]) > summary{border-radius:var(--r-post)}   /* (v210, item 5: his "rounded at the top, but square
   at the bottom") a closed fold's band is the whole card, so its fill takes the card's corners at the bottom too: one class more than
   the band's rule above, whose :is() list carries its h2 (0-4-2 against this line's 0-4-1 before, so the fill stayed square) */
.pv .pv-vlist > li + li .pv-vrow, .pv .pv-card .pv-rows > .pv-row + .pv-row, .pv .pv-card .pvl-more{border-top-color:var(--line)}
.pv .pv-card.pv-pad{padding:var(--card-in)}
.pv .pv-card.pv-panel{padding:var(--card-in)}
.pv .pv-card.pv-panel > .pv-panel-top{margin-inline:calc(-1 * var(--card-in)); margin-top:calc(-1 * var(--card-in)); padding-inline:var(--card-in)}
.pv .pv-card.pv-pad > h2.pv-panel-h:not(:not(input[type=hidden]) ~ *){margin-inline:calc(-1 * var(--card-in)); margin-top:calc(-1 * var(--card-in)); padding-inline:var(--card-in)}
.pv .pv-vhead, .pv .pv-vrow, .pv .pv-card.pv-listcard > :is(.pv-moneygroup-h, .pv-vhead), .pv .pv-card:is(.pvp-group, .pvp-ask) > :is(.pvp-group-h, .pvp-ask-h){padding-inline:var(--card-in)}
.pv .pv-card .pv-rows > .pv-row, .pv .pv-card.pv-listpanel .pv-rows > .pv-row, .pv .pv-card.pv-listpanel > .pv-panel-top{padding-inline:var(--card-in)}
.pv .pv-card.pv-panel .pv-rows > .pv-row{padding-inline:0}
.pv .pv-card.pv-fold{padding-inline:var(--card-in)}
.pv .pv-card.pv-fold > summary{margin-inline:calc(-1 * var(--card-in)); padding-inline:var(--card-in)}
.pv .pvl-more{padding-inline:var(--card-in)}
/* (the apply pass, 26 Oct 2026) here stood a card's own `--line:var(--line)`, left by phase 1's collapse of --line-soft onto --line: a
   custom property defined by itself is invalid, so on every card --line resolved to nothing and no card edge painted. Gone: a card
   reads the one --line of its theme (tokens.css), and its edge is drawn once, in preview-design.css */
/* the rooms' own cards, the same: Family's two families (their band one tone deeper, no rule under it) and Photos' albums still
   waiting for their day */
.pv .pvr-fam .pvm-side{border:0; background:var(--surface); padding:0 var(--card-in) var(--card-in)}
.pv .pvr-fam .pvm-head{margin-inline:calc(-1 * var(--card-in)); padding-inline:var(--card-in); border-bottom:0; background:var(--surface); border-radius:var(--r-post) var(--r-post) 0 0}
/* what Tools holds, on its panel (views/preview/kit.js toolsFold, pv-paperband): the card's tone, no edge, a hairline between its rows */
.pv .pv-paperband{border-width:0; background:var(--surface)}
.pv .pv-tools-in :is(.pv-tools-acts, .pv-rows) > .pv-row + .pv-row, .pv .pv-tools-in > .pv-tools-acts{border-color:var(--line)}
/* a card's words start at its inset, everywhere (public/preview-harmony.css 3.2 had them all at 18): Guests' households and the
   register's band, its attention card's head and foot, Tools' panel and its rows, Planning's countdown, Settings' parts, a strip, a
   letter from the two of you, a post's head */
.pv .pv-hh{padding-inline:var(--card-in)}
.pv .pv-hhs-head, .pv .pvr-gl .pv-hhs-head{padding-inline:var(--card-in); border-bottom-color:transparent; background:var(--surface)}
.pv.pvx-quiet .pvq-attn-top, .pv.pvx-quiet .pvq-attn-more{padding-inline:var(--card-in)}
.pv.pvx-quiet .pv-tools-in{padding:var(--card-in) var(--card-in) 0}
.pv.pvx-quiet .pv-tools-acts{margin-inline:calc(-1 * var(--card-in))}
.pv.pvx-quiet .pv-tools-acts > li{padding-inline:var(--card-in)}
.pv .pvr-plan .pvp-count .pvp-steps{padding-inline:var(--card-in)}
.pv.pvx-quiet .pvx-sets{padding-inline:var(--card-in)}
.pv .pv-strip, .pv.pv-harmony .pv-strip{padding-inline:var(--card-in)}
.pv .pv-update-t{margin-inline:var(--card-in)}
.pv .pv-update-b{padding-inline:var(--card-in)}
.pv .pv-ackline{margin-inline:var(--card-in)}
.pv .pv-card > .pv-post-head{padding-left:var(--card-in)}
/* the home's cards (public/preview-open.css .pvo) the same, through the home's own tokens: the posts, the note, the side column */
.pv .pvo{--o-r:var(--r-post); --o-pad:var(--card-in); --o-edge:transparent; --o-lift:none}
.pv .pvo :is(.pv-feed > .pv-card, .pv-feedcol > .pv-card, .pv-sidecol > .pv-sect.pv-sect), .pv .pvo:not(.pvf) .pvo-around > .pv-sect, .pv .pvo > .pva-you{border:0; background:var(--surface)}
.pv .pvo .pv-sidecol > .pv-sect.pv-sect, .pv .pvo:not(.pvf) .pvo-around > .pv-sect, .pv .pvo > .pva-you{padding:var(--card-in)}
.pv .pvo :is(.pv-sidecol > .pv-sect.pv-sect:not(.pvf .pvf-coming), .pvo-around > .pv-sect, .pva-you) > .pv-panel-top{margin:calc(-1 * var(--card-in)) calc(-1 * var(--card-in)) 8px; padding-inline:var(--card-in);
  border-bottom-color:transparent; background:transparent; border-radius:var(--r-post) var(--r-post) 0 0}

/* (finesse: head) the room's three layers, item 8 */
/* 1. The room: its drawing, its name, one sentence, at most one small line, one act (views/preview/kit.js pageHead, `is-room`: a
   page with no way back of its own). The sentence is the head's first line, in the house's serif (Newsreader Text 400, 21 on a
   laptop, 19 on a phone, ink, about 62 characters a line), a sentence and not a row of parts (the line's flex, for a meta line of
   middle dots, set aside); its links ink, underlined in the firm line, in the sentence's own weight. The small line is the second,
   14, ink-2, in the system font. On a phone the sentence always shows (it was hidden there when it came as a room's second line);
   the small line keeps the phone's rule, save Vendors' "Seen by", which the sheet keeps. */
.pv .pv-head.is-room .pv-head-tx > p.pv-head-sub:first-of-type, .pv.pv-harmony .pv-head.is-room .pv-head-tx > p.pv-head-sub:first-of-type{
  display:block; max-width:30em; margin-top:8px; font-family:var(--serif); font-weight:400; font-size:20px; line-height:1.45; color:var(--ink);
  letter-spacing:0; text-wrap:pretty}
.pv .pv-head.is-room .pv-head-tx > p.pv-head-sub:first-of-type :is(.pv-small, .pvd-maybe, .pv-dateline, span){font:inherit; color:inherit; letter-spacing:0; text-transform:none}
/* (his call, 23 Oct) To do's late words are a span now, never a link: they keep their amber and 500 against the rule above */
.pv .pv-head.is-room .pv-head-tx > p.pv-head-sub:first-of-type span.pvp-late{color:var(--warn); font-weight:500}
.pv .pv-head.is-room .pv-head-tx > p.pv-head-sub:first-of-type a:not(.pv-btn){color:var(--ink); font-weight:inherit; text-decoration:underline;
  text-decoration-color:var(--line); text-decoration-thickness:1px; text-underline-offset:4px}
.pv .pv-head.is-room .pv-head-tx > p.pv-head-sub:first-of-type a:not(.pv-btn):hover{text-decoration-color:currentColor}
.pv .pv-head.is-room .pv-head-tx > p.pv-head-sub:first-of-type .pv-dot{margin:0 .25em}
.pv .pv-head.is-room .pv-head-tx > p.pv-head-sub:first-of-type .pvd-maybe{display:inline; margin:0 0 0 .25em}   /* (the celebrations: "… days to go. The times and places may still change.", one sentence on) */
.pv .pv-head.is-room .pv-head-tx > p.pv-head-sub ~ p.pv-head-sub, .pv.pv-harmony .pv-head.is-room .pv-head-tx > p.pv-head-sub ~ p.pv-head-sub{
  margin-top:8px; font-family:inherit; font-size:14px; line-height:1.5; color:var(--ink-2)}
.pv .pvl .pv-head.is-room .pvl-seen{display:inline; gap:0}
/* the five list rooms (Vendors, Guests, Planning, Money, Lists: `pv-head-3`): the drawing level with the name, as it was while Tools
   sat in the head, the act under the words */
@container (min-width:760px){
  .pv .pv-head.pv-head-3 .pv-head-row:has(> .pv-head-mark), .pv.pv-heads .pv-head.pv-head-3 .pv-head-row:has(> .pv-head-mark){grid-template-areas:"tx mark" "acts acts"}
  .pv .pv-head.pv-head-3 .pv-head-row > .pv-head-mark, .pv.pv-heads .pv-head.pv-head-3 .pv-head-row > .pv-head-mark{align-self:start; margin-block:-2px 0}
}
@media (max-width:1023px){
  .pv .pv-head.is-room .pv-head-tx > p.pv-head-sub:first-of-type, .pv.pv-harmony .pv-head.is-room .pv-head-tx > p.pv-head-sub:first-of-type{display:block; font-size:20px; line-height:1.45}
  .pv .pv-head.is-room .pv-head-tx > p.pv-head-sub.pv-lede:has(> .pvl-seen){display:block}
}

/* 2. The list's toolbar (kit.js listBar), directly above the rows: the count (500, ink; 600 until open 2) and what the list is grouped by (14, ink-2)
   on the left; Tools on the right, its panel the list's width under the toolbar when open; "Showing: … · Clear" with it. The
   count and Tools share the toolbar's first line (Tools' fold spans the line so its panel can run the whole width; the count sits
   over the fold's empty left, clear of the button). 16 to the rows under it. */
.pv .pv-listbar{display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:start; margin:0 0 16px}
.pv .pv-listbar > .pv-listbar-n{grid-area:1 / 1 / 2 / 2; position:relative; z-index:1; display:block; margin:0; padding:8px 128px 8px var(--card-in);
  font-size:14px; line-height:20px; color:var(--ink-2); text-wrap:pretty; pointer-events:none}
.pv .pv-listbar > .pv-listbar-n:only-child{padding:0 0 0 var(--card-in)}   /* (v188, his word of 15 Oct: "14 lines, where they stand… should be aligned with the text in the box") the count on the card's inset, its words' edge */
.pv .pv-listbar > .pv-listbar-n b{font-weight:500; color:var(--ink)}
.pv .pv-listbar > .pv-tools{grid-area:1 / 1 / 2 / 3; min-width:0}
.pv .pv-listbar > .pv-tools > summary, .pv.pvx-quiet .pv-listbar > .pv-tools > summary{display:flex; width:max-content; margin-left:auto}
.pv .pv-listbar > .pv-tools > .pv-tools-in, .pv.pvx-quiet .pv-listbar > .pv-tools > .pv-tools-in{margin-top:8px}
.pv .pv-listbar > .pv-tools-on, .pv.pvx-quiet .pv-listbar > .pv-tools-on{grid-column:1 / -1; padding-top:8px; padding-left:var(--card-in)}   /* (v189, his word of 15 Oct: words over a box start where its words start) "Showing: … · Clear" on the card's inset, under the count */
.pv .pvr-plan .pvp-untied:has(+ .pv-card), .pv.pvr-plan .pvp-untied:has(+ .pv-card){padding-left:var(--card-in)}   /* (v189, the same) "23 things are not tied to a celebration…" over the list's card */
.pv .pv-listbar > .pv-tools-on:first-child{padding-top:0}
@media (max-width:1023px){ .pv .pv-listbar > .pv-listbar-n{padding-right:120px} }   /* (Tools' button is 104 wide on a phone) */
/* The colours round's fixes, item 2 (his note of 13 Oct night, Vendors: the space under "Add a vendor" before "14 jobs, by what they are for",
   "check for other pages"): the room and its list one section apart at every width: 32 from the head's foot (its one act, or its
   tabs) to the list's toolbar, or to Guests' search over it (it was 48 on a laptop, 32 on a phone, in all seven rooms that have
   both); the toolbar stays 16 over its rows, so the count reads with the list it counts */
.pv .pv-head:has(+ .pv-listbar), .pv .pv-head:has(+ .pv-findbar + .pv-listbar), .pv .pv-head:has(+ .pv-housebar.is-room){margin-bottom:32px}

/* 3. The rows say their state in words; no column-head band on screen (each value's name kept for a screen reader, .pv-vh beside it).
   A group's band keeps its name and its state words. */
.pv .pv-hhs-head.is-finesse{display:none}
/* a value's hidden name takes the size of the value it names (the state's chip, 13), so it is never a size of its own */
.pv :is(.pv-vrow-st, .pv-hh-state) > .pv-vh{font-size:13px}
.pv .pv-vrow-who .pv-vh{font-size:inherit}
/* Guests' register: the toolbar names it and counts it, so the panel's own title is kept for a screen reader alone */
.pv .pvq-register > .pv-panel-top{position:absolute; width:1px; height:1px; margin:0; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}
.pv .pv-sect.pvq-register{margin-top:0; padding-top:0; border-top:0}
.pv .pvq-register .pv-listcard > .pv-listcount{display:none}   /* (the phone's count of the households shown: the toolbar says it) */
/* Vendors: a quote is its row's figure, at the row's right beside Call and WhatsApp, now that no "Quote" heads its column */
@container (min-width:721px){ .pv .pvl .pvl-group .pv-vrow-who{justify-self:end; text-align:right} }


/* (finesse: home) the home's six changes, items 9–14 */
/* 9 under the greeting: the greeting (serif 28, 24 on a phone), one line with the bulb, then one row: the question, its three
   small outlined answers (the /weather form; pressed as before) and the other's answer, quiet */
.pv .pv-home.pvn .pvn-door{display:flex; flex-direction:column; gap:8px; margin-top:4px; margin-bottom:32px}   /* the cover 48 above the greeting */
.pv .pv-home.pvn .pvn-hello{margin:0; font-size:32px; line-height:1.2}
.pv .pv-home.pvn .pvn-say{margin:0; font-size:14px; color:var(--ink-2)}
.pv .pv-home.pvn .pvh-today{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:8px}
.pv .pv-home.pvn .pvh-today-q{margin:0; font-size:16px; font-weight:600; line-height:1.3; color:var(--ink)}
.pv .pv-home.pvn .pvh-today-f{display:flex; flex-wrap:nowrap; gap:8px; margin:0}
.pv .pv-home.pvn .pvh-today-said{margin:0; font-size:14px; line-height:1.4; color:var(--ink-2)}
@media (max-width:1023px){ .pv .pv-home.pvn .pvn-hello{font-size:24px} .pv .pv-home.pvn .pvn-door{margin-top:16px; margin-bottom:24px} }

/* 14 the one thing asked of you, alone under the greeting, and the composer: the note's insets (16 / 20), by tone */
.pv .pv-home.pvn .pv-feedcol > :is(.pv-ask, .pvh-ask), .pv .pv-home.pvn .pvx-pair > .pvh-ask{margin:0 0 16px; padding:16px 16px; border:0; border-radius:var(--r-post); background:var(--surface); box-shadow:none}
.pv .pv-home.pvn .pv-feedcol > .pv-compose:not(.is-open){padding:16px 16px}
.pv .pv-home.pvn .pvh-ask > .pv-panel-top{display:flex; align-items:baseline; justify-content:space-between; gap:12px; min-height:0; margin:0 0 4px; padding:0; border:0; background:none}
.pv .pv-home.pvn :is(.pvh-ask > .pv-panel-top .pv-panel-h, .pv-ask .pv-eyebrow){margin:0; font-size:14px; font-weight:500; color:var(--ink-2)}
.pv .pv-home.pvn :is(.pvh-ask .pv-todo-tx, .pv-ask .pv-ask-t){margin:0 0 4px; font-size:16px; font-weight:500; line-height:1.4; color:var(--ink)}
.pv .pv-home.pvn .pvh-ask .pvo-todo-meta{margin:0}
.pv .pv-home.pvn .pvh-ask .pv-actions{margin-top:16px}
.pv .pv-home.pvn .pvh-ask .pv-mini{margin:0}

/* 10 the couple's note: one type, a quiet byline with "New" the one wine word, 4 and 4 inside, 16 outside; the mark on the
   first line, the chevron centred */
.pv .pv-home.pvn .pv-feedcol > :is(a.pv-fromus, .pvx-fromus-ack){margin:0 0 16px; padding:16px 16px; border:0; border-radius:var(--r-post); background:var(--surface)}
.pv .pv-home.pvn .pv-feedcol > div.pvx-fromus-ack.pvx-fromus-ack{padding:0}
.pv .pv-home.pvn .pvx-fromus-ack > .pvx-fromus-open{padding:16px 16px}
.pv .pv-home.pvn .pvx-fromus-ack > .pvx-ack{padding:12px 16px; border-top-color:var(--line)}
.pv .pv-home.pvn :is(a.pv-fromus, .pvx-fromus-open){align-items:flex-start; gap:12px}
.pv .pv-home.pvn .pv-feedcol > :is(a.pv-fromus, .pvx-fromus-ack) + .pv-card{margin-top:16px}
.pv .pv-home.pvn .pv-fromus .pv-fromus-mark{width:40px; height:40px; margin-top:0}
.pv .pv-home.pvn .pv-fromus-tx{gap:4px}
.pv .pv-home.pvn .pv-fromus-tx > em{font-size:14px; font-weight:500; line-height:20px; color:var(--ink-2)}
.pv .pv-home.pvn .pv-fromus-tx > em .pvh-new{display:inline; margin-left:4px; font-size:inherit; font-weight:500; color:var(--wine)}
.pv .pv-home.pvn .pv-fromus-tx > b{font-family:var(--ui); font-size:16px; font-weight:500; line-height:1.35; letter-spacing:0; color:var(--ink)}
.pv .pv-home.pvn .pv-fromus-tx > span{font-size:14px; line-height:1.45; color:var(--ink-2)}
.pv .pv-home.pvn :is(a.pv-fromus, .pvx-fromus-open) > svg{align-self:center; width:16px; height:16px; color:var(--ink-3)}

/* 11 the celebrations: a calendar tile in the day's tone on a 13% tint of it, the name in the serif, the time under it; 2 × 2 */
.pv .pv-home.pvn .pvh-days{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; margin:0; padding:0; list-style:none; overflow:visible}
.pv .pv-home.pvn .pvh-days > li{min-width:0; margin:0}
.pv .pv-home.pvn .pvh-day{display:flex; flex-direction:row; align-items:center; gap:12px; min-height:44px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; overflow:visible}
.pv .pv-home.pvn .pvh-tile{display:flex; flex:none; flex-direction:column; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px;
  background:color-mix(in srgb, var(--e, var(--gold)) 13%, var(--surface));}
.pv .pv-home.pvn .pvh-tile small{flex:none; font-size:12px; font-weight:600; line-height:13px}
.pv .pv-home.pvn .pvh-day .pvh-tile b{display:block; flex:none; overflow:visible; font-family:var(--ui); font-size:20px; font-weight:600; line-height:22px; letter-spacing:0; color:inherit}
.pv .pv-home.pvn .pvh-day > span:not(.pvh-tile){display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding:0; text-align:left}
.pv .pv-home.pvn .pvh-day > span:not(.pvh-tile) > b{display:block; font-family:var(--title); font-size:16px; font-weight:500; line-height:1.25; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.pv .pv-home.pvn .pvh-day:hover > span:not(.pvh-tile) > b{color:var(--ink); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px}
.pv .pv-home.pvn .pvh-day em{display:block; margin:0px 0 0; font-size:14px; font-style:normal; color:var(--ink-2); max-width:100%}   /* (v216 B, the walk: a day's name of 40 letters, the most its form takes, ran past its tile and widened the phone's page; it ends in "…" as the name above it does) */
/* (v216 B, the full sweep: an album's "More for this album" opened under its photographs, so "Ask for photographs" pressed the photograph
   beneath it; the head and the grid each keep their entrance's transform, the grid painted later) a head with a menu open is drawn above
   the page under it; at rest nothing changes */
.pv .pv-head:has(details[open]){position:relative; z-index:3}

/* 12 the rooms' lines: a small label over the group, a row each (52), the name in ink, one line of 14, a hairline between, the
   chevron on the row's line; "Every room of the house" a row like the rest. "Coming up" and Messages the same rows */
.pv .pv-home.pvn .pvo-around > .pvh-rooms.pvh-rooms.pvh-rooms.pvh-rooms > .pv-panel-top{display:block; min-height:0; margin:0 0 4px; padding:0; border:0; background:none; border-radius:0}
.pv .pv-home.pvn .pvh-rooms > .pv-panel-top .pv-panel-h{margin:0; font-size:14px; font-weight:600; color:var(--ink-2)}
.pv .pv-home.pvn .pvo-around > .pvh-rooms{padding-top:0; border-top:0}
.pv .pv-home.pvn .pvh-rooms .pv-around{display:block; margin:0; padding:0; list-style:none}
.pv .pv-home.pvn .pvh-rooms .pv-around > li + li{border-top:1px solid var(--line)}
.pv .pv-home.pvn .pvh-rooms .pv-around-row{display:flex; align-items:center; gap:12px; min-height:52px; padding:4px 0; color:var(--ink); text-decoration:none}
.pv .pv-home.pvn .pvh-rooms .pv-around-row > span{display:flex; flex:1; flex-direction:column; gap:0px; min-width:0}
.pv .pv-home.pvn .pvh-rooms .pv-around-row b{font-size:16px; font-weight:500; line-height:20px; color:var(--ink)}
.pv .pv-home.pvn .pvh-rooms .pv-around-row em{display:block; margin:0; font-size:14px; font-style:normal; line-height:20px; color:var(--ink-2)}
.pv .pv-home.pvn .pvh-rooms .pv-around-row > svg{flex:none; width:16px; height:16px; color:var(--ink-3)}
.pv .pv-home.pvn .pvh-rooms a.pv-around-row:hover b{text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px}
.pv .pv-home.pvn .pv-sidecol > .pvf-coming{border-radius:var(--r-post)}
.pv .pv-home.pvn .pvf-coming .pv-mini{display:block}
.pv .pv-home.pvn .pvf-coming .pv-mini > li{display:flex; flex-direction:column; justify-content:center; gap:0px; min-height:52px; padding:4px 0}
.pv .pv-home.pvn .pvf-coming .pv-mini :is(a, em){line-height:20px}
.pv .pv-home.pvn .pvf-coming .pv-mini > li + li{border-top:1px solid var(--line)}
.pv .pv-home.pvn .pvf-coming .pv-mini a{font-size:16px; font-weight:500; color:var(--ink)}
.pv .pv-home.pvn .pvf-coming .pv-mini em{margin:0; font-size:14px; color:var(--ink-2)}
.pv:has(.pv-home.pvn) .pv-fromhere .pv-fh-row{min-height:52px; padding-block:4px}
.pv:has(.pv-home.pvn) .pv-fromhere .pv-fh-tx b{font-weight:500; line-height:20px; color:var(--ink)}
.pv:has(.pv-home.pvn) .pv-fromhere .pv-fh-tx em{line-height:20px; color:var(--ink-2)}
.pv .pv-home.pvn .pvo-msgs > li + li{border-top:1px solid var(--line)}
.pv .pv-home.pvn .pvo-msg{padding-block:8px}
.pv .pv-home.pvn .pvo-msg-top b{font-size:16px; font-weight:500; color:var(--ink)}
.pv .pv-home.pvn .pvo-msg-say{font-size:14px; font-weight:400; color:var(--ink-2)}

/* 13 people in the house: up to six faces (34, overlapping, a white ring) and one line */
.pv .pv-home.pvn .pvh-faces{display:flex; margin:0 0 8px; padding:0; list-style:none}
.pv .pv-home.pvn .pvh-faces > li + li{margin-left:-4px}
.pv .pv-home.pvn .pvh-faces a{display:block; border-radius:50%}
.pv .pv-home.pvn .pvh-faces .avatar{width:34px; height:34px; font-size:13px; box-shadow:0 0 0 2px var(--surface)}
.pv .pv-home.pvn .pvh-here{display:block; margin:0; font-size:14px; line-height:1.45; color:var(--ink-2); text-decoration:none}
.pv .pv-home.pvn .pvh-here b{font-weight:500; color:var(--ink)}
.pv .pv-home.pvn .pvh-here > svg{display:inline-block; width:16px; height:16px; margin-left:2px; vertical-align:-3px; color:var(--ink-3)}
.pv .pv-home.pvn a.pvh-here:hover b{text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px}

/* 14 unread counts on rows in the row's second grey on a quiet tint (the home's Messages, the Messages room's list; on
   Notifications' list the new dot the same grey); the bar's totals stay wine. The couple's state line under the countdown */
.pv .pvh-n, .pv .pv-convo .pv-badge{display:inline-grid; place-items:center; min-width:22px; height:20px; padding:0 8px; border-radius:var(--r-chip);
  background:var(--surface); color:var(--ink-2); font-size:13px; font-weight:600; box-shadow:none}
.pv .pv-home.pvn .pvo-msg-tx:has(> .pvh-n){display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:8px}
.pv .pv-home.pvn .pvo-msg-tx > .pvo-msg-top{grid-column:1 / -1}
.pv .pv-home.pvn .pvo-msg-tx > .pvh-n{align-self:start; margin-top:0px}
.pv .pv-home.pvn .pvo-msg.is-unread .pvo-msg-top b::after, .pv .pv-home.pvn .pvo-msg.is-unread::before{display:none}
.pv .pv-home.pvn .pvo-msg.is-unread .pvo-msg-say{font-weight:400}
.pv .pv-notice .pv-newdot{background:var(--ink-2)}
.pv .pv-home.pvn .pv-hero-facts:has(.pvh-state){flex-wrap:wrap; row-gap:12px}
.pv .pv-home.pvn .pvh-state{flex:1 0 100%; contain:inline-size; margin:0; font-size:14px; line-height:1.45; color:var(--ink-2); text-wrap:pretty}

/* (finesse: states) one meaning for amber and red, item 15: amber is said only by what is late, red only by what refuses or
   is gone; what waits is a state, in the tone */
/* 15.1 a chip that waits (kit.js chip(), kind is-wait: Shortlisted, No reply yet, In progress, Picking a time, To answer…) on the
   band's tone in the row's second grey (5.7:1); its size, weight and corners as every chip's. Over preview-home.css .pv-chip.is-wait */
.pv .pv-chip.is-wait{background:var(--surface); color:var(--ink-2)}
/* 15.3 Messages: a group's disc (talk.js gdisc) on the band's tone with its initial in the row's second grey, the weight of a
   person's disc beside it; it was wine. Over preview-home.css .pv-gdisc, which says it with !important */
.pv .pv-gdisc{background:var(--surface) !important; color:var(--ink-2) !important; font-weight:500}
/* 15.4 what waits on you in a room, said in its row ("4 questions for you · 6 things to do": /rooms, and the home's card of the
   rooms opened for you) in the row's second grey at 14, a status word's weight; it was amber (wine before). Over preview-home.css
   .pv-roomrow em.pvx-roomwait and .pvx-homedesign .pv-roomrow em.pvx-roomwait */
.pv .pv-roomrow em.pvx-roomwait{font-size:14px; font-weight:500; color:var(--ink-2)}
/* 15.5 the other words that wait, out of amber too, so amber is said once, by what is late (the alarms rule above: .pv-late, kit.js
   due()): a household's open ends (guests.js householdAnswer: "Nobody is chasing them yet"), the kitchen's "3 of the 9 still to
   reply", a day not answered yet (its own edge, as before), Money's "No date yet"; each in the row's second grey, at its own size and
   weight. Over preview-answer.css .pvr-hh/.pvr-gl .pvh-open, preview-home.css .pvg-wait and .pv-dayt.is-open, preview-money.css
   .pvm-nodate. What stays amber is an alarm: a warning (.pv-warn), a letter to confirm and a number moved (.pv-confirm), a
   private thing's audience to choose (.pv-aud.is-must), a caterer's number gone stale, money paid over, a refusal said */
.pv :is(.pvr-hh, .pvr-gl) .pvh-open, .pv .pvg-wait, .pv .pvm-when b.pvm-nodate, .pv .pvm-nodate{color:var(--ink-2)}
.pv .pv-dayticks.is-static .pv-dayt.is-open{background:var(--surface); color:var(--ink-2)}

/* (finesse: notes) the word back is honest, item 17 (round 2a): a note that was refused wears the door's error look (.pv-error,
   preview-home.css) with a cross, one where nothing was done is quiet with a dash, done keeps its green and tick; and a form says
   once what it needs */
.pv .pv-note.is-no{background:var(--danger-tint); color:var(--danger)}
.pv .pv-note.is-none{background:var(--hover); color:var(--ink-2)}
.pv .pv-need{margin:0 0 16px; font-size:14px; line-height:1.45; color:var(--ink-2); text-wrap:pretty}
.pv .pv-form > .pv-need{margin-bottom:0}   /* (its 16 is the form's own gap) */
.pv .pv-cform > .pv-need{margin-bottom:4px}   /* (a composer's gap is 12) */

/* (finesse: presses) a press answers at once, item 16: a title done where it was ticked (the Plan's rows, the days' and a
   person's tasks and your line already draw theirs), and the one line a card folds to on "Not now" */
.pv .pv-todo.is-done .pv-todo-tx,.pv .pvn-ask.is-done .pv-ask-t a{color:var(--ink-2); text-decoration:line-through}
.pv .pv-putoff{margin:0; font-size:14px; color:var(--ink-2)}

/* (open: look) the open house round, 13 October (docs/finesse-2026-10-12/open-house/build.md). L1, Inter everywhere: his "Inter
   for every word on screen … make it default for every app". The face is the tokens' (preview-home.css: --ui, --title and --serif
   are one Inter stack; the couple's names keep Newsreader through --names and --display); here, the scale in Inter. Sizes in px;
   a phone keeps each rule's own phone size less what Inter's width needs (it sets wider than Newsreader: 30 → 28 for a title). */
/* the room's name: 40 / 1.1 / 600, -.022em (it was Newsreader Title 500 at 42); 28 on a phone (30) */
.pv .pv-head h1, .pv .pv-head.is-serif h1, .pv.pv-harmony .pv-head h1, .pv.pv-harmony .pv-head.is-serif h1{
  font-weight:600; font-size:32px; line-height:1.1; letter-spacing:-.022em}
@media (max-width:1023px){ .pv .pv-head h1, .pv .pv-head.is-serif h1, .pv.pv-harmony .pv-head h1, .pv.pv-harmony .pv-head.is-serif h1{font-size:32px; line-height:1.15} }
/* the other pages' titles (a person's page, a day's), the same weight and spacing at their own sizes; 28 on a phone (30) */
.pv.pv-harmony :is(.pv-profile-tx h1, .pv-dayhero-tx h1){font-weight:600; letter-spacing:-.022em}
@media (max-width:1023px){ .pv.pv-harmony :is(.pv-profile-tx h1, .pv-dayhero-tx h1){font-size:32px} }
/* every name that was in the title serif at 500 (a day, an album, a card, a letter, the greeting, a family's side…): 600, -.01em,
   each at its own size */
.pv .pv-day b, .pv .pv-fromus-mark, .pv .pv-usmark, .pv .pv-fromus-tx b, .pv .pv-album-tx b, .pv .pv-waiting b, .pv .pv-film-tx h2,
.pv .pv-invcard-tx b, .pv .pv-daycard b, .pv .pv-daymini b, .pv .pv-update-t, .pv .pv-page-prose.is-story h3, .pv .pv-meal-h h2,
.pv .pvn-hello, .pv .pv-home.pvn .pvn-hello, .pv .pvr-pic .pvq-emptyart .pv-empty-h, .pv .pvr-fam .pvm-head h2,
.pv .pv-home.pvn .pvh-day > span:not(.pvh-tile) > b{font-weight:600; letter-spacing:-.01em}
/* (open 2: type) of those, the ones that name a thing on a card or in a list are a card's title, 500 as every card's title (and the
   couple's mark with the title it sits beside); the greeting, a letter's title and the headings keep 600 */
.pv .pv-day b, .pv .pv-fromus-mark, .pv .pv-usmark, .pv .pv-fromus-tx b, .pv .pv-album-tx b, .pv .pv-waiting b, .pv .pv-invcard-tx b,
.pv .pv-daycard b, .pv .pv-daymini b, .pv .pv-home.pvn .pvh-day > span:not(.pvh-tile) > b{font-weight:500}
.pv .pv-dtile > small, .pv .pv-dtile > b{font-weight:600}   /* the day's date tile on a celebration's card, round 2b's merge (kit.js dayTile; its box and colour at the sheet's end): a date box, 600 as the home's own */
/* the room's sentence: 18 / 1.55 in the second grey, about 36em a line (it was the reading serif at 21, ink); 17 on a phone (19) */
.pv .pv-head.is-room .pv-head-tx > p.pv-head-sub:first-of-type, .pv.pv-harmony .pv-head.is-room .pv-head-tx > p.pv-head-sub:first-of-type{
  max-width:36em; font-size:20px; line-height:1.55; color:var(--ink-2)}
@media (max-width:1023px){
  .pv .pv-head.is-room .pv-head-tx > p.pv-head-sub:first-of-type, .pv.pv-harmony .pv-head.is-room .pv-head-tx > p.pv-head-sub:first-of-type{font-size:16px; line-height:1.55}
}
/* reading: a story, a letter, a wish, the letters' opening line: 17 / 1.6, ink */
.pv.pv-harmony :is(.pv-update-b.pv-prose p, .pv-page-prose.is-story p, .pv-us-intro p), .pv.pvx-ra .pv-wish-t, .pv .pv-wish-t{font-size:16px; line-height:1.6; color:var(--ink)}
/* a photograph's caption, its page's heading: 20 / 1.4 / 500 */
.pv .pv-photo-cap:not(.is-empty), .pv .pvr-pic .pvq-cap{font-size:20px; line-height:1.4; font-weight:500}
/* the room's end line: 16 / 1.5, the second grey (it was the reading serif at 17) */
.pv .pv-end, .pv main .pv-end{font-weight:400; font-size:16px; line-height:1.5; color:var(--ink-2)}
/* Money's side heads (a side's name, its parts): 600 at their sizes */
.pv.pvx-money .pvm-side-h, .pv.pvx-money .pvm-side-name{font-weight:600}
/* the labels Inter would have broken (it sets about 2% wider than the system's face; measured over the sweep's pages as four people at
   1440 and 390): a post's "1 comment" kept on one line, and a fold's line and the Plan's count on a phone given Inter's own tracking
   at 14–15 (its dynamic metrics, about -.01em), so each stays the one line it was */
.pv .pv-sum-c{white-space:nowrap}
.pv .pv-fold > summary, .pv .pvr-plan .pvp-count-m > summary{letter-spacing:-.01em}
/* L2, "From here" in pictures (views/preview/flow.js): a room's own drawing on the paper tile its icon sat on, in the same box (40),
   the drawing filling it and its empty margins outside; the marks are drawn a little right of their box's middle, to sit beside a
   title (marks.js), so the box takes them 5 to the left, to its middle (measured: 4–7 clear on each side, 3–8 above and below) */

/* (open: home) the open house's home (13 Oct; docs/finesse-2026-10-12/open-house/build.md H1–H6), his word on v176: "make all
   the relevant parts a little more open". Colours from the tokens; no face is set here (the font is the look's) */
/* H1 the composer's ways at rest on the home (views/preview/feed.js composer `home`): outlined, 44 high, white, 1px --line, the
   control's radius, the words ink 14.5/500, the icons wine 18; one row whose edges are the box's own (its 12 at the sides, 8 on
   a phone) under a fine rule. The row measures itself: where the words of what each starts ("Write a post") do not fit, the
   tabs' short words ("Post", "Ask"); a phone (767 and under): five across, the icon over the word, 54 high */
.pv .pv-feedcol > .pv-compose > .pvx-oh-ways{container-type:inline-size; display:flex; gap:8px; margin:12px 12px 0; padding:12px 0 0; border-top:1px solid var(--line)}
.pv .pv-feedcol > .pv-compose > .pvx-oh-ways > .pv-way{flex:1 1 auto; flex-direction:row; justify-content:center; gap:8px; min-width:0; min-height:44px; padding:0 8px;
  border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface); font-size:14px; font-weight:500; line-height:1.2; color:var(--ink); white-space:nowrap}
.pv .pv-feedcol > .pv-compose > .pvx-oh-ways > .pv-way:hover{border-color:var(--line); background:var(--surface); color:var(--ink)}
.pv .pv-feedcol > .pv-compose > .pvx-oh-ways > .pv-way svg{flex:none; display:block; color:var(--wine)}
.pv .pvx-oh-ways .pvx-oh-ws{display:none}
@container (max-width:619px){ .pv .pvx-oh-ways .pvx-oh-wl{display:none} .pv .pvx-oh-ways .pvx-oh-ws{display:inline} }
@media (max-width:1023px){
  .pv .pv-feedcol > .pv-compose > .pvx-oh-ways{gap:4px; margin:12px 8px 0; padding-top:12px}
  .pv .pv-feedcol > .pv-compose > .pvx-oh-ways > .pv-way{flex:1 1 0; flex-direction:column; gap:4px; min-height:54px; padding:4px 0px}
}
/* H3 the house's question over the home's box (views/preview/next.js houseQuestion): one line on the pill's left edge, 12 over
   it, --gold-ink 15/500 (600 until open 2: type); a press opens the post form with it as the field's words (public/preview-quiet.js (open: home)). A phone,
   or a line too narrow for the whole of it (the script's is-cut), says its shorter form; longer still, it ends in "…" (the whole
   question is the field's when pressed); the form open, it is the field's, not here */
.pv .pv-feedcol > .pv-compose > .pvx-oh-q{position:relative; display:flex; max-width:calc(100% - 24px); margin:0 12px 12px; padding:0; border:0; background:none;
  font-size:16px; font-weight:500; line-height:1.4; color:var(--gold); text-align:left; cursor:pointer}
.pv .pv-feedcol > .pv-compose > .pvx-oh-q > span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pv .pv-feedcol > .pv-compose > .pvx-oh-q:hover > span{text-decoration:underline; text-underline-offset:3px}
.pv .pv-feedcol > .pv-compose > .pvx-oh-q::after{content:''; position:absolute; inset:-10px 0 -6px}
.pv .pv-feedcol > .pv-compose.is-open > .pvx-oh-q{display:none}
/* (int) the open composer has its own tabs (Post, Ask someone, Poll, Photos, To do): the ways at rest leave with the box, as the
   house's own rule meant (preview-home.css 737, which this section's display:flex outweighed), so one row of choices shows, never two */
.pv .pv-feedcol > .pv-compose.is-open > .pvx-oh-ways{display:none}
.pv .pvx-oh-q > .pvx-oh-qs{display:none}
.pv .pvx-oh-q.is-cut > .pvx-oh-ql{display:none} .pv .pvx-oh-q.is-cut > .pvx-oh-qs{display:block}   /* (the line too narrow for the whole) */
@media (max-width:1023px){
  .pv .pv-feedcol > .pv-compose > .pvx-oh-q{max-width:calc(100% - 16px); margin:0 8px 12px}
  .pv .pvx-oh-q > .pvx-oh-ql{display:none} .pv .pvx-oh-q > .pvx-oh-qs{display:block}
}
/* H6 the bar open from 1280 (item 20 of the-list.md; public/preview-flow.js pvBar opens it by default from 1280, a kept choice
   wins). 20.2, way (a): beside the open bar, from 1280 to 1439 wide (the sheet's column 880 to 1039), the home keeps its two
   columns, the side column Planning's 272 and the gutter 32, both columns starting under the cover. From 880 to 939 the rules
   that put the home in one column under 940 (preview-home.css, -answer, -open, -next, -quiet) give way to the two columns'
   (as preview-open.css and preview-quiet.css draw them from 940); the cover keeps its own width's look. From 1440 as before */
@media (min-width:1280px) and (max-width:1439px){
  @container (min-width:880px) and (max-width:1039px){
    .pv:not(.pv-rail) .pvo.pv-home, .pv:not(.pv-rail) .pv-home.pvx-desk{grid-template-columns:minmax(0, 1fr) 272px; column-gap:32px}
    .pv:not(.pv-rail) .pv-home.pvx-desk::before{margin-right:-16px}   /* (the hairline in the middle of the gutter) */
  }
  @container (min-width:880px) and (max-width:939px){
    .pv:not(.pv-rail) .pvn.pv-home.pvo{display:grid; max-width:none; grid-template-rows:auto auto auto auto 1fr;
      grid-template-areas:"hero hero" "feed you" "feed side" "feed days" "feed around"; align-items:start}
    .pv:not(.pv-rail) .pvn.pv-home.pvo > .pvx-q-col, .pv:not(.pv-rail) .pvn.pv-home.pvo > .pvx-q-col > .pv-feedcol{display:block}
    .pv:not(.pv-rail) .pvn.pv-home.pvo > .pvx-q-col > .pvx-q-tail{margin-top:0}
    .pv:not(.pv-rail) .pvn.pv-home.pvo > .pv-days-nav{order:0; margin:8px 0 24px; padding-top:0; border-top:0}
    .pv:not(.pv-rail) .pvn.pv-home.pvo > .pv-sidecol{order:0; margin-top:0; padding-top:0; border-top:0}
    .pv:not(.pv-rail) .pvn.pv-home.pvo > .pvo-around{grid-area:around; order:0}
    .pv:not(.pv-rail) .pv-home.pvx-desk{max-width:none; grid-template-rows:auto auto 1fr auto; grid-template-areas:"hero hero" "feed days" "feed side" "end side"; align-items:start}
    .pv:not(.pv-rail) .pv-home.pvx-desk::before{content:''; grid-column:1; grid-row:2 / -1; justify-self:end; align-self:stretch; width:1px; background:var(--line)}
    .pv:not(.pv-rail) .pv-home.pvx-desk > .pv-sidecol{margin-top:0; padding-top:0; border-top:0}
  }
}

/* (open: docs) Documents, the open house's D1–D4 (13 October 2026): a folder's quiet menu sits in its band without stretching it,
   as a link to the rest does; the list's foot holds "Add one to the list" and "Hide this list" on one line; the rows set aside
   fold under the list */
.pv .pvx-oh-folder > .pv-panel-top{align-items:center}
.pv :is(.pvx-oh-folder > .pv-panel-top, .pvx-oh-empty .pv-row-r) > .pv-menu{margin-block:-8px}
.pv .pvx-pp-needs .pvx-pp-needs-foot{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.pv .pvx-pp-needs .pvx-oh-off{margin:4px 0 0}

/* (open 2: type) W1, the weights (13 October 2026; docs/finesse-2026-10-12/open-house-2/build.md), his "a bit too bold… dial it
   down", then his word on the sheets ("500 is feeling a little too light" for the headings). 600 (Inter SemiBold), as v177 had
   them: every title and heading (h1–h3, a room's name, a page's, the greeting, .pv-h2, .pv-panel-h and a panel's band head, a
   section's, a dialog's, a group's head in Money and the Plan, the door's Welcome and its card's head, "How is today?"); the
   figures (the countdown, a big number, Money's totals and figures, a group's sum and the settle amount in their heading line,
   a date box, today on the Plan's calendar, the clocks, a count badge, a totals row's figures, the map's distances); the marks
   (an avatar's initials, a drawing's letters, a file's type). 500 (Inter Medium), at each source rule: a card's and a row's
   title (the house's b and strong, a name on a card or in a list, a waiting card's title, the couple's mark with it), button
   words, labels (a band's, a field's, a table's head, the bar's), chips, and a figure inside a row (a row's amount, a time in a
   list, a poll's share, a table's count, the calendar's other days). Nothing is 700. Print keeps its own type
   (views/menu-card.js). The older comments that give a card's title, a label or a button 600 describe the house before this. */

/* (open 2: space) The open house, second pass (13 October 2026; docs/finesse-2026-10-12/open-house-2/build.md S1–S5, R1–R2, G1):
   the house's steps where his notes found things too close (8 within a block, 16 between related blocks, 32 between sections, 48
   before a region); the Rooms page's groups as the house's panels; the Guests' attention card's head on the band. No weight and no
   face here: those are the type part's, (open 2: type) above */

/* R1–R2 the Rooms page (views/preview/more.js quietRoomsPage): each group the house's panel, its name on the band as Documents'
   folders, its rooms the panel's rows, a hairline between two rows and none over the first or under the last (rule 43: no box
   inside a card); the columns counted from the card's own width, one and two from 620 (in a card three left Lists' and Sangeet's
   words two lines at 1440), so the first row is known */

/* G1 the Guests' attention card ("41 have not replied", views/preview/guests.js): its head on the tone band, as every panel's
   (.pv-panel-top) and the register's own head row (.pv-hhs-head); preview-quiet.css drew it, Guests' own, on the card's tone over
   a hairline. The other Guests table that heads its card, the counts by celebration, the same (its head row was on the paper) */
.pv.pvx-quiet .pv-card.pvq-attn > .pvq-attn-top{padding-block:8px; border-bottom-color:transparent; background:var(--surface); border-radius:var(--r-post) var(--r-post) 0 0}
.pv .pvr-gl .pv-card.pv-listcard > .pv-tablewrap:first-child{border-radius:var(--r-post) var(--r-post) 0 0}
.pv .pvr-gl .pv-card.pv-listcard > .pv-tablewrap:first-child > .pv-table > thead th{border-bottom-color:transparent; background:var(--surface)}

/* S1 the home's side column (views/preview/next.js; his note: "very close to each other"): a section's 32 between its parts
   wherever the column stands them, the cards (people, messages, what is coming: 16 apart, related) and the celebrations, the
   celebrations and "In the house"; the label "In the house" 8 over its rows, a block's. The cards' last margin goes, so each gap
   is one number. Beside the feed (from 940, and 880–939 with the bar open at 1280–1439): the cards, the celebrations, the rows; in
   one column, coming back: the feed, the celebrations (under their rule, as they were), the cards, the rows */
.pv .pvn.pv-home.pvo > .pv-sidecol > .pv-sect:last-child{margin-bottom:0}
.pv .pvn.pv-home.pvo > .pvo-around{margin-top:32px}
.pv .pv-home.pvn .pvo-around > .pvh-rooms.pvh-rooms.pvh-rooms.pvh-rooms > .pv-panel-top{margin-bottom:8px}
@container (min-width:940px){
  .pv .pvn.pv-home.pvo > .pv-days-nav{margin:32px 0 0}
}
@container (max-width:939px){
  .pv .pvn.pv-home.pva.is-back > .pv-days-nav{margin-bottom:0}
  .pv .pvn.pv-home.pva.is-back > .pv-sidecol{margin-top:0; padding-top:32px}
}
@media (min-width:1280px) and (max-width:1439px){
  @container (min-width:880px) and (max-width:939px){
    .pv:not(.pv-rail) .pvn.pv-home.pvo > .pv-days-nav{margin:32px 0 0}
    .pv:not(.pv-rail) .pvn.pv-home.pva.is-back > .pv-sidecol{padding-top:0}
  }
}

/* S2 the home's "Earlier" (views/preview/next.js, the gold rule over the posts before; his note: "right under the photograph"):
   32 over it, a section's, from whatever stands above (the last new post, the memory's photograph, "In the house" in one column),
   and 16 under it, to the posts it heads. In one column the quiet house's tail is the grid's own item (preview-quiet.css), so the
   rule's 32 is the gap there, and the tail's own 24 goes when the rule leads it */
.pv .pvn.pv-home .pvn-thread{margin:32px 0 16px}
@container (max-width:939px){
  .pv.pvx-quiet .pvn.pv-home > .pvx-q-col > .pvx-q-tail:has(> .pvn-thread:first-child){margin-top:0}
}

/* S3 Messages' head (views/preview/talk.js; his note: the title, New group, the search and the chips "too close"): the title and
   New group one line, level, on the list's 16 at both sides as the search and the chips are; 16 from that line to the search,
   12 from the search to All and Unread, which belong to it */
.pv .pv-msglist-h{padding:8px 16px 0}
.pv .pv-msglist-h + .pv-msgfind{margin-top:16px}
.pv .pv-msgfind{padding-bottom:12px}

/* S4 a one-line note between two panels (his note on Sangeet: "The choreographer is still to find" ran straight into Rehearsals):
   24 under it, so it stays with what is above it (16, that panel's own) and the next panel starts a new block. The house's part
   for such a line is .pvx-after (Sangeet's loose ends, Guests' days' runs: preview-finish.css); the Map's line under "Everyone" is
   the same pattern as a small paragraph. One rule for every room's column */
.pv :is(.pv-col-main, .pv-col-side) > :is(p.pvx-after, p.pv-small) + :is(.pv-panel, .pv-sect){margin-top:24px}

/* S5 the clocks in a card, Meetings' and the Map's (views/preview/kit.js clockPair, mapcalClocks; his note: "a bit off and too
   closely aligned"): the pair given room, 48 between the two clocks (40 up to 767; on a phone, where two do not fit beside each
   other with that room, one under the other, 16 apart); each face level with its time line (its top on the time's, where it sat
   across the three lines); 4 between the time, the city and whose, and morning or night (2 up to 767, two lines there); the line
   under ("the other city is 9½ hours behind the city") 16 below. The cover's clocks and the door's keep their own (not in a card) */
.pv .pv-card > .pv-clocks{align-items:flex-start; gap:16px 48px}
.pv .pv-card > .pv-clocks > .pv-clock{align-items:flex-start; gap:12px}
.pv .pv-card > .pv-clocks .pv-clock-tx{row-gap:4px}
.pv .pv-card > .pv-clocks > .pv-clocks-gap{margin:0}
@media (max-width:1023px){
  .pv .pv-card > .pv-clocks{gap:16px 40px}
  .pv .pv-card > .pv-clocks > .pv-clock{gap:10px}
  .pv .pv-card > .pv-clocks .pv-clock-tx{row-gap:2px}
}
@media (max-width:479px){
  .pv .pv-card > .pv-clocks{flex-direction:column; gap:16px}
}
/* (his word on the sheets: "still too left aligned", the card's right empty) wherever the two sit side by side (from 480) the
   pair shares the card's width: two equal halves, each clock's face and lines at its half's left edge, so the second starts at
   the card's middle; the gap kept as each half's own right edge (48; 40 up to 767), so nothing comes nearer the middle than it;
   the sentence under them across the card, 16 below. One clock (the same zone, the wedding's days) keeps its place */
@media (min-width:480px){
  .pv .pv-card > .pv-clocks:has(> .pv-clock + .pv-clock){display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px 0}
  .pv .pv-card > .pv-clocks:has(> .pv-clock + .pv-clock) > .pv-clock{padding-right:48px}
  .pv .pv-card > .pv-clocks:has(> .pv-clock + .pv-clock) > .pv-clocks-gap{grid-column:1 / -1}
}
@media (min-width:480px) and (max-width:1023px){
  .pv .pv-card > .pv-clocks:has(> .pv-clock + .pv-clock) > .pv-clock{padding-right:40px}
}

/* (open 2: int) his word on the sheets, of Meetings' and the Map's clocks: the line under the pair "looks aligned to the left
   with the left clock". In a room's card the pair is tied (views/preview/kit.js clocksWhose, tie): how far apart is said under
   the second clock, the one it is about ("morning · 9½ hours behind"), and the pair has no line of its own. Its part line
   shows at every width there (a phone's too, where the house hides it elsewhere), so the words are never lost */
.pv .pv-card > .pv-clocks.is-tied .pv-clock-part{display:block}

/* (2b: touch) round 2b, item 18 (docs/finesse-2026-10-12/round-2b/build.md): what was still under 44 on a phone. Nothing is
   drawn larger: where a press is text, its reach grows by padding with an equal negative margin (the layout unmoved), else by an
   ::after; each under (pointer:coarse), so a laptop is unmoved. No colour and no weight here.
   18.1 the rows' small links as the kit's small button: Vendors' "Compare side by side" and "Add an option for X" on the job's
   band at its right (under the name on a phone, where the line cannot hold them); Today's "Add to the day" in its band. Since the
   colours round, every band's end is underlined words (the (2b: int) section) */
.pv .pvl .pvl-group > .pv-vhead.pvl-ghead{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px}
.pv .pvl .pvl-ghead > .pvl-gacts{display:flex; flex-wrap:wrap; gap:8px 16px; margin-left:auto}
@container (max-width:720px){
  .pv .pvl .pvl-ghead > .pvl-gacts{flex-basis:100%; margin-left:0}
}
/* "Change where it stands" 44 on touch, its words in the middle; 4 and 6 back above and below keep the slot as tall as it was
   (it was 32 with 2 above, and reached 44 by an ::after) */
@media (pointer:coarse){
  .pv .pv-slot-edit > summary{display:flex; align-items:center; min-height:44px; margin:-4px 0 -4px}
  .pv.pvx-ra .pv-slot-edit > summary::after{content:none}
}
/* 18.2 the Done circle (and a question's round mark) stays 24 drawn and reaches 44 on touch: an ::after 10 past its edge each
   way. On Planning its own reach (an ::before 12 past, preview-answer.css) was there already; elsewhere (a celebration's to-dos,
   the home's) it had none */
@media (pointer:coarse){
  .pv :is(button, a).pv-taskbox{position:relative}
  .pv :is(button, a).pv-taskbox::after{content:""; position:absolute; inset:-10px}
}
/* 18.3 the post's meta links and the rows' titles on touch: each reaches 44 by padding with the same margin back (an inline link's
   padding moves nothing at all), drawn as it was. Each reaches up no further than half the room above it, and the rest below,
   where the next press, coming after it, keeps its own words. What is drawn as a shape keeps its own reach by an ::after:
   "N more replies" (44 already), "More ways to react" (28 drawn, reaching 8 to its right: Love touches it on the left, and on
   a person's page "Reply" is 4 to its right on some posts and starts 8 inside it on others, so it has no room to give; left
   as it is), a round menu by a card's title. The faces of who was here (34, round) overlap as a stack 28 apart, so any
   reach would take from the next face: they stay, and the line under them is the strip's own link, 44. The tabs (40) and the
   chips (36, reaching 44) are left as they are */
@media (pointer:coarse){
  /* a post's head: the face 2 above and below and 4 to its left (the name is 11 to its right); the author 12 above, 13 below,
     5 and 20 to the sides (so "Ira" reaches 44 too); the time under it 2 above (4 between them) and 22 below */
  .pv .pv-post-head > a.pv-av{padding:0px 0 0px 4px; margin:0px 0 0px -4px}
  .pv .pv-post-l1 a.pv-name{padding:12px 16px 12px 4px; margin:-12px -16px -12px -4px}
  .pv .pv-post-who .pv-meta > a{padding-block:0px 24px; margin-block:0px -24px}
  /* a #tag or a name in what is written: 12 above, 13 below, 4 to each side */
  .pv :is(.pv-post-tx, .pv-c-tx) :is(a.tag, a.mention){padding:12px 4px 12px; margin:-12px -4px -12px}
  /* a comment: its face 12 further to the left; its author 12 above, 16 below and 5 to each side (its 6 to the right kept);
     its Love 44 by 12 above, 7 below and 4 to each side, in place of its ::after; "1 comment" and "View 5 earlier comments"
     the same way */
  .pv .pv-c > a.pv-c-av{padding-left:12px; margin-left:-12px}
  .pv .pv-bub a.pv-c-name{padding:12px 4px 16px; margin:-12px 0px -16px -4px}
  .pv .pv-c-meta .pv-c-love{padding:12px 4px 8px; margin:-12px -4px -8px}
  .pv.pvx-homedesign .pv-c-meta .pv-c-love::after{content:none}
  .pv .pv-sum > button.pv-sum-c{padding-block:8px 16px; margin-block:-8px -16px}
  .pv .pv-comments > button.pv-earlier{padding-block:12px 8px; margin-block:-4px -8px}
  /* "See all 11", "All four", "All of them", "Your line": in a band 13 above and 4 below its words (the list starts 4 under
     it), the band's line kept; "See everything since you…" and "Open messages" under a list the same way */
  .pv .pv-panel-top > a.pv-more-link{padding-block:16px 8px; margin-block:-12px -4px}
  .pv.pvx-ra .pvx-today .pv-panel-top .pv-more-link::after{content:none}
  .pv p.pv-small > a.pv-more-link{padding-block:8px 16px; margin-block:-4px -12px}
  .pv a.pv-more-link.pvo-go{padding-block:12px 16px; margin-block:4px -12px}
  /* the home: the count to the day, the days coming, the line under who was here, the question's line */
  .pv a.pv-togo{padding-block:8px; margin-block:-8px}
  .pv .pv-mini > li > a{padding-block:12px; margin-block:-12px}
  .pv .pv-home.pvn a.pvh-here{padding-block:4px 16px; margin-block:-4px -16px}
  .pv .pv-feedcol > .pv-compose > .pvx-oh-q{padding-block:12px 12px; margin-block:-12px 0px}
  .pv .pv-feedcol > .pv-compose > .pvx-oh-q::after{content:none}
  .pv :is(.pv-actions, .pv-around-row) > details.pv-menu > summary.pv-icon-btn::after{content:""; position:absolute; inset:-1px -4px -7px}
  /* a link in a head's sentence ("décor, catering…", "The Mehendi", "one of them late"): 3 above (its lines are 6 apart), 21 below */
  .pv .pv-head-sub a:not(.pv-btn){padding-block:4px 24px; margin-block:-4px -24px}
  /* a row's title is the row's link, 44 tall: Planning's and the Questions room's (12 above, 10 below), a person's page's lines
     (12 each way); a row's #tag, day and source 3 above (the title is 7 over them), 21 below, 4 to each side; the phone of
     whoever looks after a slot 12 above, 16 below; "Settled in the last two weeks" 1 each way */
  .pv .pvr-plan :is(.pvp-row, .pvp-arow) a.pvp-t{padding-block:12px 8px; margin-block:-12px -8px}
  .pv .pvr-plan .pvp-ctx > :is(a.pvp-tag, a.pvp-day, a.pvp-src){padding:4px 4px 24px; margin:-4px -4px -24px}
  .pv .pvr-plan .pvp-after > a{padding-block:4px; margin-block:-4px}
  .pv .pv-line-tx > a.pv-line-t{padding-block:12px; margin-block:-12px}
  .pv .pv-slot-tx em a[href^="tel:"]{padding-block:12px 16px; margin-block:-12px -16px}
}

/* (2b: head) one act per head (docs/finesse-2026-10-12/round-2b/build.md, item 19 of the-list.md); colours from the tokens, no
   press areas here (the touch helper's section sets those) */
/* 19.2 Questions & decisions (views/preview/plan.js askRoomNew): a row with no act of the reader's is its title, the link to its
   page, run to the row's end with the house's chevron there (16, --ink-4 at rest, as on every row), centred on the title's line;
   the words as they were (15/500 ink, a phone's 16) */
.pv .pvr-plan a.pvp-t.pvp-go{display:flex; align-items:center; justify-content:space-between; gap:12px}
.pv .pvr-plan a.pvp-t.pvp-go > span{min-width:0}
.pv .pvr-plan a.pvp-t.pvp-go > svg{flex:none; color:var(--ink-3)}
/* 19.4 a celebration's box (views/preview/days.js, the home's composer with its ways at rest): at rest, the home's own inset too
   (16 / 20 at every width, as section 14 above sets the home's); open, both keep the open box's own (preview-open.css) */
.pv .pvr-day .pvd-say > .pv-feedcol > .pv-compose:not(.is-open){padding:16px 16px}
/* 19.5 Photos (views/preview/photos.js photosRoom): New album (the two of them only) at the end of the albums' own line, centred on
   the first shelf's name; on the waiting shelf's line (when it is the only one), its words go under the two */
.pv .pvr-pic .pvq-sec > .pv-sec-h > .pv-btn{flex:none; align-self:center}
.pv .pvr-pic .pvq-sec > .pv-sec-h > .pv-btn + p{flex-basis:100%}

/* (2b: look) His notes of 13 October 2026 (docs/finesse-2026-10-12/round-2b/build.md, L1–L6), each built from the house's own
   parts and steps; measured on the demo (Arjun) at 1440 and 390 before and after. */
/* L1 Settings: a field keeps its own corners when the keyboard reaches it. The house's ring (.pv :focus-visible, 4 corners,
   preview-home.css) out-ranked the shared field style's 11 (its :where(.pv) rule), so every field drew 4 corners on focus
   (470 of 580 fields on 28 pages); here it is the field's 11 again. Ticks and choices keep their own shapes */
.pv:where(:not(.pv-k-door)) :focus-visible:where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color], [type=submit], [type=button]), select, textarea){border-radius:var(--r-ctl)}
/* every choice of a part's field shown whole: the house's rooms' choices in words that fit their own column of 142 at the
   fields' 16 ("Further in" for "In the rest of the house", his word on sheet 07, 13 Oct evening: "the box is too big"; the
   column had been widened to 232), and a choice longer than a phone's field (the sign-in page's, the website's) goes on to a
   second line in its field rather than being cut */
.pv .pvx-sets select{height:auto; white-space:normal}
/* a part's Save: 24 under what it saves, every part alike (14 Oct: at the fields' own 16 it read as one more field, and the
   rooms' sat at 0, the order's hidden words between its list and its Save), and a section's 32 from its line to the next
   part's rule (18; 16 on a phone) */
.pv.pvx-quiet .pvx-set > .pv-fold-in > .pv-actions:not(:first-child), .pv.pvx-quiet .pvx-set > .pv-fold-in > form > .pv-actions:not(:first-child){margin-top:8px}   /* + the form's gap of 16 */
.pv.pvx-quiet .pvx-set > .pv-fold-in > :is(ul, .pvx-leads) ~ .pv-actions{margin-top:24px}   /* the house's two parts are no grid: the whole 24 (after the line above) */
.pv.pvx-quiet .pvx-sets :is(.pvx-set:not(:last-child), form:not(:last-child) > .pvx-set:last-child) > .pv-fold-in:has(> .pv-actions:last-child, > form:last-child > .pv-actions:last-child){padding-bottom:32px}

/* L2 the coloured tops of the celebrations' cards go (his "a classic AI design move"). A day with no painting of its own had
   its tone as a 3-point bar along the card's top (roomsaudit item 55, preview-home.css), so a card's 16 corners drew it as an
   arc: Celebrations' cards, a day's own head, the home's list of days and an invitation's day strip. Each is now the card as
   every card is (its tone, no edge), its words where they stood under the bar's 3. The day's colour stays where it says
   which day it is (its dots, a calendar's days, the home's date tiles) */
.pv.pvx-ra :is(.pv-daycard, .pv-dayhero, .pv-day, .pv-daymini).pvx-ra-noart{box-shadow:none}
.pv.pvx-ra .pv-daycard.pvx-ra-noart .pv-daycard-tx{padding-top:16px}
.pv.pvx-ra .pv-day.pvx-ra-noart > span{padding-top:8px}
.pv.pvx-ra .pv-daymini.pvx-ra-noart{padding-top:12px}

/* L3 the mark at the bar's top, larger (his "increase the size of the logo here"): his own picture, never redrawn, cut tight to
   its ink (the dress's ink box, views/layout.js: the lotus is 62 of its frame's 96, so it drew 28 by 15 in a box of 44 by 21)
   and drawn 48 wide from the bar's one line (the rooms' icons), its gap to the names 8, so the names and the dates are where
   they were; level with their two lines, centred on them (25.8 tall: the 34 of the lines would move the names 18 to the right).
   The folded bar the same mark; the phone's top bar the same cut in its 36 */
.pv .pv-id .mark.img, .pv .pv-top-id .mark.img{height:auto !important; aspect-ratio:var(--mark-cut-ratio, var(--mark-ratio, 96/46));
  -webkit-mask-size:var(--mark-cut-size, contain); mask-size:var(--mark-cut-size, contain); -webkit-mask-position:var(--mark-cut-pos, center); mask-position:var(--mark-cut-pos, center)}
.pv .pv-top-id .mark.img{width:36px; max-height:26px}
.pv :is(.pv-id, .pv-top-id) > .pv-id-mark:has(> .mark.img){display:flex}   /* (its line's baseline held it 3 high of the lines' middle) */

/* L4 the bar's fold control (his "hanging in midair… place it at the intersection of the nav bar and the main page"): a small
   round control ON the seam where the bar meets the room's white sheet, half on each, level with the names' line (and, folded,
   with the mark), in the same place on the seam folded and open; a finer chevron (12, its stroke 1.5, --ink-3) on the paper's
   face with a hairline edge; pressed 44. It is the same button (preview-flow.js pvBar: its kept choice, its words, its keys),
   only drawn and placed anew. The seam: the bar's column then the shell's gap (24 folded; open 18 since the merge, the (2b: int) section); 15: down to
   the names */
@media (min-width:1024px){
  .pv.pv-flow .pv-bar-t{top:15px; right:-52px; width:24px; height:24px; border-color:var(--bar-line); background:var(--bar-cur); color:var(--bar-ink-2)}   /* (the hall round) the bar's own colours */
  .pv.pv-flow.pv-rail .pv-bar-t{right:-36px}
  .pv.pv-flow .pv-bar-t:hover{border-color:var(--line); color:var(--ink)}   /* (as preview-flow.css's own) */
  .pv.pv-flow .pv-bar-t::after{inset:-11px}   /* (from its 22 inside the hairline: 44) */
  .pv.pv-flow .pv-bar-t svg{width:12px; height:12px; stroke-width:3}
  .pv.pv-flow .pv-bar-t:focus-visible{border-radius:50%}
}

/* L6 Settings › Who sees what (his "use circular … instead of the square ones? It's not looking very appealing … refine it").
   Each door's tick drawn round in the Done circle's hand (Planning's .pv-taskbox): 22 across, off a ring in --line-strong (the
   tick shows in --wine-line under the pointer), on the wine filled with a white tick of 14 at 1.5, a tick and never a dot, so it
   never reads as a choice of one; round with the keyboard's ring; pressed 44 on a touch screen. It stays the same checkbox
   (its name, its label, its keys). Since round 2d (item 37, his "change those to circles. Everywhere") every tick box in the
   house is drawn so, by one rule, (2d: ticks) at the end of this sheet; the grid keeps its own place here: no margin, and on a
   touch screen rows and columns of 44 at least, so no two ticks' presses meet */
.pv .pv-matrix input[type=checkbox]{margin:0}
@media (pointer:coarse){
  .pv .pv-matrix td{padding-block:12px}   /* (rows and columns of 44 at least, so no two ticks' presses meet) */
  .pv .pv-matrix input[type=checkbox]{margin-inline:12px}
}
/* refined: the heads on the tone band as every panel's head, each centred over its ticks and wrapping to two lines, so the table
   fits a laptop's part (its least 941 of the 992 at 1440: its line "The table scrolls sideways" shows only where it does, on a
   phone or a narrower window); the circles' names on the card's own tone (they were a white band), 12 from the band's end */
.pv .pv-matrix thead th{white-space:normal; text-align:center; vertical-align:bottom; border-bottom-color:transparent; background:var(--surface)}
.pv .pv-matrix thead th:first-child{background:var(--surface); border-radius:var(--r-ctl) 0 0 var(--r-ctl)}
.pv .pv-matrix thead th:last-child{border-radius:0 var(--r-ctl) var(--r-ctl) 0}
.pv .pv-matrix :is(th, td){padding-inline:4px}
.pv .pv-matrix :is(thead, tbody) th:first-child{padding-left:12px}
.pv .pv-matrix tbody th{min-width:140px; background:var(--surface)}
/* The colours round's fixes, item 1 (his note of 13 Oct night): no head over two lines: a door's name of three words or more comes as two halves
   that never break inside (views/preview/people.js headTwoLines), so "From the two of us" reads "From the" over "two of us", its
   column just wide enough for that (it was three lines at 1440, four on a narrower laptop); the heads stay on the band's foot */
.pv .pv-matrix thead th .pvx-mh{display:inline; white-space:nowrap}

/* X1 (L1's move, extended; his word of 13 Oct, evening): every control keeps its own corners when the keyboard reaches it.
   The house's ring (preview-home.css, the line of .pv :focus-visible) now gives its 4 corners at no weight (:where), so a
   control's own corners always win: a button's 11, a chip's and a round control's circle, a card's 16 (148 of 1,122 buttons
   drew 4 on focus). Words, rows and tabs, which have no corners of their own, keep the ring's 4. Two shapes the ring cannot
   see from the element itself: a photograph is square (its ring square, and no corner of it cut while it has the focus), and
   the phone's "Your page" is its round face in a press area of 44 (its ring round) */
.pv .pv-ph:focus-visible{border-radius:0}
.pv .pv-top-me:focus-visible{border-radius:50%}

/* X2 (L2's move, extended; his word of 13 Oct, evening): the last coloured top. Planning's month drew a celebration's day with
   its tone as a 3-point band along the day's top (preview-answer.css, .pvp-cell[data-event]); the day is now the month's
   cell as every day is, its celebration named in its own tinted strip with the day's dot (as L2 left it). On a phone the
   strips are hidden and the tone is a line under the day, the month's only sign of which days are the celebrations: kept */
@media (min-width:1024px){
  .pv .pvr-plan .pvp-cell[data-event]{box-shadow:none}
}

/* (2b: int) the merge's own (docs/finesse-2026-10-12/round-2b/report-int.md). The bar's seam (his note on sheet 09, 13 Oct
   evening: "a lot of extra space between the navbar and the main page"): open, the bar's words ended 54 from the page (the
   bar's own 14 and the shell's 40); folded, 32. Open now as folded: the shell's gap 18, so the words end 32 from the page
   either way, and the fold control (L4) stays on the seam, 20 from them, open and folded */
/* (v198, his walk, 21 Oct: "reduce the space of the left nav bar … there's space even after that") the open bar 188 (was 236) and
   its gap the folded bar's 12 (was 18), so the fold control sits on the seam as folded does (right -24) */
@media (min-width:1024px){
  .pv.pv-flow:not(.pv-rail) .pv-shell{column-gap:12px}
  .pv.pv-flow:not(.pv-rail) .pv-bar-t{right:-24px}
}
/* A band's end is underlined words (his note, 13 Oct, the colours round, Vendors beside Guests: "with vendors we have white
   buttons but on other pages like … guest we don't … it's not looking nice in that row"): Today's "+ Add to the day", Vendors'
   "Compare" and "+ Add an option" (the band names the job; a screen reader hears it whole) as Guests' "All 137", the house's
   link (ink-2, 500, underlined, 14), a plus where it adds; 20 apart. Pressed 44 on a touch screen by an ::after (on a phone
   stacked under a job's name, 16 apart, so two reaches never meet).
   The colours round's fixes (the owner's rule: never grow a container he approved; a band is 41 with or without its act): the
   words at a band's end take its line alone, 26 drawn with its 3 above and below given back, at every width, and reach 44 on
   touch by an ::after, never by padding the band must hold. Vendors' job bands were 47 at 1440 with their acts; a card's band
   with a link on a phone (Today's "+ Add to the day", Notifications', Money's) was 58, by the panel link's 16 and 7 (2b: touch) */
.pv .pv-more-act{display:inline-flex; align-items:center; gap:4px}
.pv .pv-more-act > svg{flex:none}
.pv .pvl .pvl-ghead > .pvl-gacts > .pv-more-link{margin-block:-4px}
@media (pointer:coarse){
  .pv .pvl .pvl-ghead > .pvl-gacts > .pv-more-link{position:relative}
  .pv .pvl .pvl-ghead > .pvl-gacts > .pv-more-link::after{content:""; position:absolute; inset:-9px 0}
  .pv .pvl .pvl-ghead > .pvl-gacts{row-gap:16px}
  .pv:where(.pv-bands) :is(.pv-card.pv-panel, .pvo :is(.pv-sidecol > .pv-sect.pv-sect:not(.pvf .pvf-coming), .pvo-around > .pv-sect, .pva-you)) > .pv-panel-top .pv-more-link{position:relative; padding-block:4px}
  .pv:where(.pv-bands) :is(.pv-card.pv-panel, .pvo :is(.pv-sidecol > .pv-sect.pv-sect:not(.pvf .pvf-coming), .pvo-around > .pv-sect, .pva-you)) > .pv-panel-top .pv-more-link::after{content:""; position:absolute; inset:-9px -4px}
}
/* Settings › The house › The rooms: a handle for each room in front (his note on the merge's sheets, 13 Oct night: "instead of
   these arrows … a hamburger button … to drag wherever we want"). Three short lines in the icons' hand (18, ink-3), where ↑ and
   ↓ were, pressed 44 on touch; the row it moves follows the pointer up and down only (one left edge), lifted on the card's own
   paper with the house's lift, and the others open a gap where it will land. ↑ and ↓ stay in the page for a browser without
   script; the script hides them when it shows the handles (views/preview/people.js GRIP) */
.pv .pvx-house .pvx-grip{color:var(--ink-2); cursor:grab; touch-action:none}
.pv .pvx-house [data-rooms] > li.is-lifted{position:relative; z-index:2; background:var(--surface); box-shadow:var(--shadow-2)}
.pv.pvx-profile .pvx-house .pvx-house-h > span:last-child{text-align:right}   /* the column's word over its handle */
.pv .pvx-house [data-rooms] > li.is-lifted .pvx-grip{cursor:grabbing; background:var(--hover); color:var(--ink)}
.pv .pvx-house [data-rooms].is-moving > li[data-room]:not(.is-lifted){transition:transform var(--dur-fast) ease}
.pv .pvx-house [data-rooms].is-moving, .pv .pvx-house [data-rooms].is-moving *{user-select:none; -webkit-user-select:none}
.pv .pvx-house [data-rooms][aria-busy] .pvx-grip{cursor:progress}
/* the keyboard's ring, kept on the handle when the page comes back after its arrow key (a page's first focus draws none) */
@media (prefers-reduced-motion:reduce){
  .pv .pvx-house [data-rooms].is-moving > li[data-room]:not(.is-lifted){transition:none}
}
@media (pointer:coarse){
  .pv .pvx-house .pvx-grip::after{content:""; position:absolute; inset:-4px}
}
/* The day's date tile on every celebration's card (his pick B on sheet 13, 13 Oct night: "let's go with way B … with these
   colors, there could be a lot of mix up"): the home's own tile (11, above), one class wherever a celebration has a card
   (views/preview/kit.js dayTile): Celebrations' cards, a day's own head, an invitation's days, the home's list (the guests'
   website has its own copy in app.css). 44 by 44, corners 10, the weekday 11 over the date 20 (600), in the day's colour on 13%
   of it in the house's surface, so a dark house follows (the home's own too, its white until now). Beside the name, its top 2
   below the card's first line's top; the card's lines keep one left edge beside it. Its weights are the type part's (600, a
   date box's, after (open 2: type) W1); its face the house's Inter, as every card's words */
.pv .pv-dtile, .pv .pv-home.pvn .pvh-tile{background:color-mix(in srgb, var(--e, var(--gold)) 11%, var(--surface))}   /* (the interface review #6, 1 Nov 2026) 13 % → 11 %: the day and date on the tile were 4.42:1 on Linen (4.45 Wine, 4.46 Midnight), under 4.5; at 11 % the lowest is 4.52 */
.pv .pv-dtile{display:flex; flex:none; flex-direction:column; align-items:center; justify-content:center; width:44px; height:44px; border-radius:10px;}   /* the words a shade darker than the day (preview-theme.css --c-*-ink) */
.pv .pv-dtile.pv-dtile > small{display:block; flex:none; font-size:11px; line-height:13px; letter-spacing:0; color:inherit}
.pv .pv-dtile.pv-dtile > b{display:block; flex:none; overflow:visible; font-size:20px; line-height:22px; letter-spacing:0; color:inherit}
.pv :is(.pv-daycard-tx, .pv-dayhero-tx):has(> .pv-dtile){display:grid; grid-template-columns:44px minmax(0, 1fr); column-gap:14px; align-content:start}
.pv :is(.pv-daycard-tx, .pv-dayhero-tx):has(> .pv-dtile) > *{grid-column:2}
.pv :is(.pv-daycard-tx, .pv-dayhero-tx) > .pv-dtile{grid-column:1; grid-row:1 / span 2; margin-top:2px}
.pv .pv-daymini > .pv-dtile{align-self:flex-start; margin-top:2px}
@container (max-width:420px){
  .pv .pv-dayhero-tx:has(> .pv-dtile) > .pvd-ways{grid-column:1 / -1}   /* a phone's three equal buttons keep the card's width, under the tile */
}
/* The lotus on the phone's top bar, level with the names (his note on the merge's sheets, 13 Oct night: "the Lotus feels
   sitting too below … It should be center aligned or middle aligned"). Its box is its ink (L3 cuts the picture to it), and
   the bar centres that box on the line's box; the names' serif sits high in its line, so on the home, where the names stand
   alone, the ink's middle was 2.3 below the middle of their capitals (27.5 against 25.2 at 390, the capitals 18.9 to 31.4). It
   is raised by that, its place in the line unmoved. Under the countdown (every other room) the ink's middle is already the
   middle of the two lines (27.5 against 27.3), as on the laptop's bar: unmoved. (The top bar, 21 Oct 2026: the days to go stand
   beside the names inside their link, on their line, on every page, and a phone hides them, so the names' line is the one line
   everywhere and the lotus is raised everywhere, as the home's was; it no longer moves between the home and the rooms) */
.pv .pv-top > .pv-top-id > .pv-id-mark > .mark.img{position:relative; top:-2.33px}
/* The laptop's bar the same (his yes, 13 Oct, the colours round): the lotus's ink 1.04 below its two lines' middle (66.55
   against 65.51; 0.75 on the pixels), raised 1. Open only: folded it stands alone, centred in its own line */
/* The folded bar centred on its linen (his note, 13 Oct, the colours round, a picture of the folded bar: "the icons and the names
   … a little too left aligned, they're not in the center of this collapsed bar"): its column stood 8 from the window and 32 from
   the sheet (its own 8 inside and the gap's 24), so its marks and names sat 12 left of the linen's middle. Now 20 and 20: 12 more
   before the column, 12 less gap; the sheet, its width and the fold control's place on the seam unmoved */
@media (min-width:1024px){
  .pv.pv-flow.pv-rail .pv-shell{column-gap:12px; padding-left:20px}
  .pv.pv-flow.pv-rail .pv-bar-t{right:-24px}
}
/* (colours: chooser) Settings › The house › The colours (the colours round, 13 Oct 2026; docs/finesse-2026-10-12/colours/build.md):
   each theme a radio drawn as a small picture of the house in it, by carrying its class (views/preview/people.js houseColours),
   so every colour here is the theme's own token (public/preview-theme.css). The bar's ground beside the page's white sheet, a
   card on the sheet with two lines, and the one filled button; its name under it. 3:2; on a laptop (1024 and wider) each group
   one row of seven columns, so Light's seven fill it and Dark's three take the same size from the same left line (never five
   and two: his word on uneven rows, 13 Oct); two to a row on a phone; from the fold's one left line. The chosen one ringed in wine and said in words ("Chosen"); the edge,
   the ring and the hover are the house's, read on the label before the picture takes its theme's tokens. No weight here: the
   words are the house's b (500) */
.pv .pvx-colours .pvx-themes{min-width:0; margin:0; padding:0; border:0}
.pv .pvx-colours .pvx-themes-h{float:left; width:100%; margin:0 0 8px; padding:0; font-size:14px; line-height:1.4; color:var(--ink-2)}
.pv .pvx-colours .pvx-themes-row{clear:both; display:grid; grid-template-columns:repeat(auto-fill, minmax(116px, 1fr)); gap:16px}
.pv .pvx-colours .pvx-theme{--pvx-edge:var(--line); --pvx-ring:var(--wine); --pvx-halo:var(--wine-tint); display:block; min-width:0; cursor:pointer}
.pv .pvx-colours .pvx-sw{position:relative; display:block; aspect-ratio:3 / 2; overflow:hidden; border:1px solid var(--pvx-edge); border-radius:12px; background:var(--canvas)}
.pv .pvx-colours .pvx-sw i{position:absolute; display:block}
.pv .pvx-colours .pvx-sw-bar{inset:0 auto 0 0; width:30%}
.pv .pvx-colours .pvx-sw-bar > i{left:26%; height:3px; border-radius:6px; background:var(--ink-2)}
.pv .pvx-colours .pvx-sw-bar > i:nth-child(1){top:16%; width:52%; background:var(--ink)}
.pv .pvx-colours .pvx-sw-bar > i:nth-child(2){top:29%; width:40%}
.pv .pvx-colours .pvx-sw-bar > i:nth-child(3){top:42%; width:46%}
.pv .pvx-colours .pvx-sw.is-dark .pvx-sw-bar > i{background:var(--surface); opacity:.62}
.pv .pvx-colours .pvx-sw.is-dark .pvx-sw-bar > i:nth-child(1){opacity:.92}
.pv .pvx-colours .pvx-sw-page{inset:9% 0 9% 32%; border-radius:6px 0 0 6px; background:var(--surface)}
.pv .pvx-colours .pvx-sw-card{inset:13% 10% auto; height:38%; border-radius:6px; background:var(--surface)}
.pv .pvx-colours .pvx-sw-card > i{left:12%; height:3px; border-radius:6px; background:var(--ink-3)}
.pv .pvx-colours .pvx-sw-card > i:nth-child(1){top:30%; width:62%}
.pv .pvx-colours .pvx-sw-card > i:nth-child(2){top:58%; width:42%; opacity:.6}
.pv .pvx-colours .pvx-sw-btn{left:10%; top:64%; width:36%; height:13%; border-radius:6px; background:var(--wine)}
.pv .pvx-colours .pvx-theme-name{display:flex; flex-wrap:wrap; align-items:baseline; gap:0 8px; margin-top:8px; font-size:16px; line-height:1.35; color:var(--ink)}
.pv .pvx-colours .pvx-theme-name > .pvx-theme-is{display:none; font-size:13px; color:var(--wine)}
.pv .pvx-colours .pvx-theme > input:checked ~ .pvx-theme-name > .pvx-theme-is{display:inline; flex-basis:100%}   /* (int) under the name at every width, one way: on a laptop the 88 swatch left no room beside it, on a phone it sat beside */
.pv:where(:not(.pv-k-door)) .pvx-colours .pvx-theme:hover > input:not(:checked) + .pvx-sw{outline:2px solid var(--pvx-edge); outline-offset:2px}
.pv .pvx-colours .pvx-theme > input:checked + .pvx-sw{outline:2px solid var(--pvx-ring); outline-offset:2px}
.pv .pvx-colours .pvx-theme > input:focus-visible + .pvx-sw{ outline-offset:2px;}
/* (v232, dark mode) three looks: Light, Dark and Automatic, whose picture is Light's and Dark's together, each a half cut on a
   slant inside the one rounded frame (views/preview/people.js houseColours) */
.pv .pvx-colours .pvx-sw.pvx-sw-auto{background:none}
.pv .pvx-colours .pvx-sw-auto > .pvx-sw{position:absolute; inset:0; aspect-ratio:auto; border:0; border-radius:0}
.pv .pvx-colours .pvx-sw-auto > .pvx-sw.theme-dark{clip-path:polygon(62% 0, 100% 0, 100% 100%, 38% 100%)}
@media (min-width:1024px){
  .pv .pvx-colours .pvx-themes-row{grid-template-columns:repeat(7, minmax(0, 1fr))}
}
@media (max-width:1023px){
  .pv .pvx-colours .pvx-themes-row{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .pv .pvx-colours .pvx-theme-name{font-size:16px}
}

/* (2c: rooms) round 2c, the rooms' order and groups (docs/finesse-2026-10-12/round-2c/build.md; items 21 and 23.3 of the-list.md).
   Family's jumps lead to a circle of a family now ("Kapoors · Immediate"): on a phone the circle clears the top bar (56) and 12, as a
   family did. No colour, no weight. */
@media (max-width:1023px){ .pv .pvr-fam .pvm-group{scroll-margin-top:68px} }

/* (2c: guests) Guests' register grouped by side, then by circle (round-2-brief.md item 22; views/preview/guests.js quietGuests): a
   card for each side, 16 apart as Vendors' jobs; its band the list rooms' band (the house's .pv-vhead on --tone-band, 41 tall, its
   words a label over a group, the house's .pv-eyebrow, 14/500 --ink-3), the side and its count, at every width (the house hides a
   columns' band on a phone; this one has no columns); in the card a small head for each circle, the same label on the card's tone,
   with its count,
   nearer its own rows than what is above it: 12 under the band as a band's first content, 16 after a group's rows with the rows'
   own hairline between, and its first row 7 under it (the row's 11 above its name, 4 given back), so the words are 10 apart. */
.pv .pvq-register .pvg-side + .pvg-side{margin-top:16px}
.pv .pvr-gl .pvg-side > .pv-vhead.pvg-band{display:flex; align-items:center}
.pv .pvr-gl .pvg-side .pvg-g, .pv .pvr-gl .pvg-side .pvg-sub{margin:0; font-size:14px; line-height:20px; letter-spacing:0; color:var(--ink-2)}
.pv .pvr-gl .pvg-side .pvg-sub{padding:16px var(--card-in) 0}
.pv .pvr-gl .pvg-side > .pv-vhead + .pvg-sub{padding-top:12px}
.pv .pvr-gl .pvg-side > .pv-hhs + .pvg-sub{border-top:1px solid var(--line)}
.pv .pvr-gl .pvg-side > .pvg-sub + .pv-hhs > li:first-child > .pv-hh{padding-top:8px}

/* (2c: home) Round 2c, the home's helper (docs/finesse-2026-10-12/round-2c/build.md; items 23.1, 23.2 and E19 of the-list.md).
   23.1: the house on your phone now follows the letter (views/preview/next.js nextHome), a card's 16 under it; (his verdict,
   14 Oct) one place up, before the composer, which keeps 16 under it (its 24 or 32 after a card is for what the house says). 23.2: Messages' "Everyone in the house · N" (views/preview/talk.js messagesRoom) a row of the list:
   its words on the rows' edge (the list's 8, the row's 10: the faces' and the labels' 34 on a phone), 44 to press, the house's
   fold's 15/500 in ink-2; open, its rows on the same edge as the rows above. E19: a room's news is a sentence with a name in it
   (views/preview/next.js roomNews), so it wraps to its second line rather than lose its end to an ellipsis on a phone. */
.pv.pvx-quiet .pvx-q-phone{margin:16px 0 0}
.pv.pvx-quiet .pv-home.pvn .pv-feedcol > .pvx-q-phone:not([hidden]) + .pv-compose{margin-top:16px}
.pv .pv-msglist > .pvx-msgall{margin:0}
.pv .pv-msglist > .pvx-msgall > summary{display:flex; min-height:44px; padding:0 16px}
.pv .pv-msglist > .pvx-msgall > .pv-fold-in{padding:0}
.pv .pv-msglist > .pvx-msgall > .pv-fold-in > ul{padding:0}
.pv .pv-home.pvn .pvh-rooms .pv-around-row em.pvx-news{white-space:normal}

/* (2c: figures) round 2c, item 24 of docs/finesse-2026-10-12/the-list.md, a figure said once (round-2c/build.md). 24.1 Money's
   first card: (his verdict, 14 Oct) its one big figure and the budget's button over the bar again, drawn as v184 drew them
   (preview-money.css "1. The position"); the bar's room left is a part of its own for its title, drawn as the empty track; "How
   it is worked out" under the bar on the house's 16 */
.pv.pvx-money .pvm-bar i.is-left{background:transparent; box-shadow:none}
/* 24.3 the letters: where things stand today, a fold in its own section of the side column, its line where a section's head sits */
.pv .pvx-standsect > .pvx-standfold{margin-top:0}
/* E16 a parent's own side: what it has paid and still has to pay after what its share is made of, on the house's 16 */
.pv.pvx-money .pvm-sidecard .pvm-paidfigs{margin-top:16px}
/* (v200, the dress: bands) a card's band, a list's head and a table's head were lifted by their tone (--tone-band); on Paper the
   tone is white (preview-theme.css), so each is lifted by the house's soft hairline under it instead, and a closed fold keeps none.
   The small things that sat on the band's tone (a date's box, a waiting chip, an open day, a guest's disc) take the neutral fill,
   so they still show. Way A as the dress's first mock drew it (docs/page-by-page-2026-10-20/v200-dress/mock/mock.css 2). Paper's
   alone: a theme keeps its tones. */
.pv.pv-paper .pv-card.pv-panel > .pv-panel-top, .pv.pv-paper .pv-card.pvp-group > .pvp-group-h, .pv.pv-paper .pv-card.pvp-ask > .pvp-ask-h,
.pv.pv-paper .pv-card.pv-listcard > .pv-moneygroup-h, .pv.pv-paper .pv-card.pv-listcard > .pv-vhead, .pv.pv-paper .pv-card.pv-fold > summary,
.pv.pv-paper .pv-card.pv-pad > h2.pv-panel-h:not(:not(input[type=hidden]) ~ *), .pv.pv-paper .pvr-fam .pvm-head, .pv.pv-paper .pv-hhs-head,
.pv.pv-paper .pv-card.pvq-attn > .pvq-attn-top, .pv.pv-paper .pv-table thead th, .pv.pv-paper .pv-matrix thead th{border-bottom:1px solid var(--line)}
.pv.pv-paper .pv-card.pv-fold:not([open]) > summary{border-bottom-color:transparent}
.pv.pv-paper .pv-datebox, .pv.pv-paper .pv-chip.is-wait, .pv.pv-paper .pv-dayticks.is-static .pv-dayt.is-open{background:var(--hover)}
.pv.pv-paper .pv-gdisc{background:var(--hover) !important}

/* (v200, the dress: the lift) direction 1, his pick of the dress's second round: on the white a card is lifted by the house's
   lightest shadow (--lift, preview-theme.css) as well as its hairline, so a big white page is not dead (his words: "very light
   shadow … gets uplifted a little"); where a card is a way in (the floor plan's wings, a celebration's card) it rises a pixel under
   the pointer, and a floor plan's key with it; a row keeps the house's own highlight (--hover), never a lift. The cards that carry
   their own shadow keep it: the assistant's answer (its glow) and a card that floats over the page (a phone's). The feed's posts
   are rows of one card, not cards. Paper's alone. */
.pv.pv-paper .pv-card:not(.pv-aibox, .pv-answerbox, .pvk-card){box-shadow:var(--shadow-1)}
.pv.pv-paper .pv-feed > .pv-card{box-shadow:none}
@media (max-width:1023px){ .pv.pv-paper .pv-plan{box-shadow:var(--shadow-1)} .pv.pv-paper .pv-plan > li.pv-card.pv-wing, .pv.pv-paper .pv-card.pv-msgs.has-thread{box-shadow:none} }   /* (a phone's floor plan is one card, its wings its rows: v198; an open conversation fills the screen) */
.pv.pv-paper .pv-card, .pv.pv-paper .pv-wing-key, .pv.pv-paper .pvh-tile, .pv.pv-paper .pv-around-row{transition:transform var(--dur) ease, box-shadow var(--dur) ease, background-color var(--dur) ease}
@media (hover:hover){
  /* (the closing touches, 26 Oct 2026, his 2) the image tiles rise 1 with the second shadow (a day's card, a room's tile); a text-led card
     (a wing's card on Rooms, a room's key on it) keeps its place and answers with the shadow alone */
  .pv.pv-paper .pv-daycard:hover, .pv.pv-paper .pv-roomtiles a.pv-roomtile:hover{transform:translateY(-1px); box-shadow:var(--shadow-2)}
  .pv.pv-paper .pv-plan > li.pv-card:hover, .pv.pv-paper .pv-wing-key:hover{box-shadow:var(--shadow-2)}
  .pv.pv-paper .pv-wing-key:hover .pv-wing-km{box-shadow:var(--shadow-1)}
  .pv.pv-paper .pv-around-row:hover, .pv.pv-paper .pvh-tile:hover{background:var(--hover)}
}

/* (2d: day) Round 2d, the day helper (docs/finesse-2026-10-12/round-2d/build.md; items 25 and 33 of the-list.md; his word on
   sheets 01 and 02, 14 Oct night: "all as you say").
   25 a celebration's page as the peak (views/preview/days.js dayRoom): the head is the day's picture, 300 tall at 1440 and 180 on
   a phone, its bottom edge the day's tone, 3 (the album's cover for whoever may see the album; else the painting from its card;
   else the Celebrations room's drawing on the day's tint, 13 %, as the date tile's); the card keeps the house's ground. Under it
   the tile beside the name at the page title's size (Inter 600, 40 / 28), the time and place one line, what to wear the first
   fact, the faces of who is coming with the figure, and the ways as one quiet row of links (14, --ink-2, underlined). The
   words at 500 are the house's b (the type part owns the weights). */
/* (v209, item 10) a picture they chose, where they put it; else the middle, as before */
.pv .pvx-2d-peak .pv-dayhero-tx{padding:24px 32px 32px}
.pv .pvx-2d-peak .pv-daycard-when{margin:4px 0 0; font-size:16px; color:var(--ink-2)}
.pv .pvx-2d-peak .pvd-maybe{margin:4px 0 0; font-size:16px}
.pv .pvx-2d-peak .pvx-2d-wear{margin:16px 0 0; font-size:16px; line-height:1.45; color:var(--ink)}
.pv .pvx-2d-peak .pvx-2d-k{margin-right:8px}
.pv .pvx-2d-peak .pvx-2d-wear .pvd-from{display:block; margin:4px 0 0; font-size:14px; color:var(--ink-2)}
.pv .pvx-2d-peak .pvx-2d-wear .pvd-from a{color:inherit; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px}
.pv .pvx-2d-peak .pvx-2d-who{display:flex; align-items:center; gap:12px; margin:16px 0 0}
.pv .pvx-2d-peak .pvx-2d-faces{display:flex; margin:0; padding:0; list-style:none}
.pv .pvx-2d-peak .pvx-2d-faces > li + li{margin-left:-4px}
.pv .pvx-2d-peak .pvx-2d-faces a{display:block; border-radius:50%}
.pv .pvx-2d-peak .pvx-2d-faces .avatar{width:34px; height:34px; font-size:13px; box-shadow:0 0 0 2px var(--surface)}
.pv .pvx-2d-peak .pvx-2d-n{display:inline-flex; align-items:center; gap:0px; font-size:16px; color:var(--ink); text-decoration:none; white-space:nowrap}
.pv .pvx-2d-peak .pvx-2d-n svg{color:var(--ink-2)}
.pv .pvx-2d-peak .pvx-2d-ways{margin:16px 0 0; font-size:14px; color:var(--ink-2)}
.pv .pvx-2d-peak .pvx-2d-ways a{color:var(--ink-2); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px}
.pv .pvx-2d-peak .pvx-2d-ways a svg{margin-left:2px; vertical-align:-2px}
@media (max-width:1023px){
  .pv .pvx-2d-peak .pv-dayhero-tx{padding:16px 16px 24px}
  .pv .pvx-2d-peak .pv-dayhero-tx:has(> .pv-dtile) > :is(.pv-dayhero-line, .pvd-maybe, .pvx-2d-wear, .pvx-2d-who, .pvx-2d-ways){grid-column:1 / -1}
  .pv .pvx-2d-peak .pvx-2d-faces > li:nth-child(n+6){display:none}   /* five faces and the figure on one line at 390 */
}
/* 33 the day's part and the arrivals (days.js todayPage): each household's relation, whose it is, on its own line under its name */
.pv .pvx-today .pvx-2d-rel{display:block; color:var(--ink)}
/* (2d: week) round 2d, the week's helper (docs/finesse-2026-10-12/round-2d/build.md; items 30, 27.3 and 34 of the-list.md, as on
   sheets 03a, 03b and 04, his word "all as you say", 14 Oct night) */
/* 30.4 a late thing in the wedding week says the month it is from, in ink (kit.js due(), is-from), never the alarm's amber; its
   weight stays the due words' own 500 (preview-home.css .pv-due), none set here, as every section after the open house's */
.pv .pv-due.is-from:not(.is-soon):not(.is-late){color:var(--ink-2)}
/* 30.1 the cover's line on the planner's desk too, as the home has it (feed.js hero) */
.pv .pv-home.pvx-desk .pv-hero-facts:has(.pvh-state){flex-wrap:wrap; row-gap:12px}
.pv .pv-home.pvx-desk .pvh-state{flex:1 0 100%; contain:inline-size; margin:0; font-size:14px; line-height:1.45; color:var(--ink-2); text-wrap:pretty}
/* 34 her desk greets her as the home greets (28, 24 on a phone; 600 as every greeting), 8 above the desk's title */
.pv .pv-home.pvx-desk .pvx-desk-hello{margin:0 0 8px; font-size:32px; line-height:1.2; color:var(--ink)}
.pv .pv-home.pvx-desk .pvx-desk-hello + header.pv-head{margin-top:0}
@media (max-width:1023px){ .pv .pv-home.pvx-desk .pvx-desk-hello{font-size:24px} }
/* (2d: first) round 2d, the first open and the ends of the home (docs/finesse-2026-10-12/round-2d/build.md; items 27 and 31 of
   the-list.md, E1, E8 and E11 of emotion-pass.md; views/preview/next.js yoursLine, nextHome's day one, yesCard; phone.js faceNudge) */
/* 27 the first open's line: under the greeting and before the lights' line, at the door's own 8, in ink, at most 62 characters */
.pv .pv-home.pvn .pvn-door > .pvn-yours{margin:0; max-width:62ch; font-size:16px; line-height:1.5; color:var(--ink); text-wrap:pretty}
/* 27.2 the day-one home: From here's doors repeat the page above it */
.pv:has(.pv-home.is-day1) .pv-fromhere{display:none}
/* 27 a face asked once: the install line's own shape (preview-quiet.css .pvx-q-phone) in its place, the reader's initials where the
   phone is, Not now its own small form */
.pv .pvx-q-face{display:flex; align-items:center; gap:8px; margin:16px 0 0; padding:4px 4px 4px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface)}
.pv .pvx-q-face > a{display:flex; flex:1 1 auto; align-items:center; gap:8px; min-width:0; min-height:44px; font-size:14px; color:var(--ink)}   /* its weight the install line's (preview-quiet.css) */
.pv .pvx-q-face > a .avatar{flex:none; width:28px; height:28px; font-size:12px}
.pv .pvx-q-face > a > span:last-child{text-wrap:pretty}
.pv .pvx-q-face > form{flex:none; margin:0}
.pv .pv-home.pvn .pv-feedcol > .pvx-q-face + .pv-compose{margin-top:16px}
/* 31 a household's yes: the told card, its line in ink, the household's own words as a quote */
.pv .pvn-yes .pv-post-l1 .pv-verb{color:var(--ink)}
.pv .pvn-yes .pvn-feedq{margin:8px 0 4px}
/* 36 How is today? (his word, 14 Oct): a card of its own under the greeting (the door is not a card: no box in a box), 12/16
   inside; when it ends the door, the door's gap to the next card is a card's 16 */
.pv .pv-home.pvn .pvn-door > .pvh-today.pv-card{margin:8px 0 0; padding:12px 12px 12px 16px; gap:8px 16px}
.pv .pv-home.pvn .pvn-door > .pvh-today.pv-card .pvh-today-said{margin-left:auto}
.pv .pv-home.pvn .pvn-door:has(> .pvh-today.pv-card:last-child){margin-bottom:16px}
/* (the merge) and in a house's first days, when the newcomer's walk follows it in the door, the walk 16 under the card as any card's
   neighbour (the door's 8 and the walk's own 12 made 20) */
.pv .pv-home.pvn .pvn-door > .pvh-today.pv-card + .pvf-next{margin-top:8px}
@media (max-width:1023px){ .pv .pv-home.pvn .pvn-door > .pvh-today.pv-card .pvh-today-said{flex:1 1 100%; margin-left:0} }
/* the three moods wherever a mood is asked ([data-mood]: the home's card, a heavy day's note): each at rest in its tint, its word
   in its tone; the chosen one filled in its tone, flat, white words; the other's answer a dot and the word in its tone */
.pv [data-mood="fine"]{--m:var(--yes); --m-tint:var(--yes-tint); --m-line:var(--line); --m-fill:var(--yes); --m-fill-line:var(--yes); --m-on:var(--on-wine); --m-dot:var(--yes)}
.pv [data-mood="heavy"]{--m:var(--warn); --m-tint:var(--warn-tint); --m-line:var(--line); --m-fill:var(--warn-tint); --m-fill-line:var(--line); --m-on:var(--ink); --m-dot:var(--line)}
.pv [data-mood="storm"]{--m:var(--mood-storm); --m-tint:var(--mood-storm-tint); --m-line:var(--line); --m-fill:var(--mood-storm); --m-fill-line:var(--mood-storm); --m-on:var(--on-wine); --m-dot:var(--mood-storm)}   /* (the interface review #8, 1 Nov 2026) Storm its own brick red, as this block says (never the house's status): --danger is delete and errors */
.pv .pv-btn[data-mood]{background:var(--m-tint); border-color:var(--m-line); color:var(--m)}
/* chosen: Fine and Storm filled in their tone, white words; (the merge) Heavy a haldi yellow, the house's ink, its ochre edge */
.pv .pv-btn[data-mood][aria-pressed="true"]{background:var(--m-fill); border-color:var(--m-fill-line); color:var(--m-on)}
.pv .pvh-mood-said{color:var(--m)}
.pv .pvh-mood-said::before{content:""; display:inline-block; width:8px; height:8px; margin:0 4px 0 0px; border-radius:50%; background:var(--m-dot); vertical-align:1px}
/* (2d: ends) round 2d, item 27.1 of docs/finesse-2026-10-12/the-list.md (round-2d/build.md): a room's own empty place with the
   room's drawing (views/preview/kit.js empty({ mark })), above its title: 120 × 96, and 160 × 128 from 1024; the drawing's ink,
   not its paper, on the text's left edge (--ink: where marks.js measured its ink beginning, at 120 wide); its strokes the width
   the head draws them; the title is the house's empty title (16/600, its weight the type part's), the line 15 in ink-2, the act 16
   under it */
.pv .pv-empty.has-mark{padding:16px 0 8px}
.pv .pv-empty-mark{width:120px; height:96px; margin:0 0 16px}
.pv .pv-empty-mark .pv-mark{display:block; width:100%; height:100%; max-width:none; overflow:visible; margin-left:calc(var(--ink, 0) * -1px)}
.pv .pv-empty-mark .pv-mark :is(.k, .pk, .wk, .f, .g2){vector-effect:non-scaling-stroke}
.pv .pv-empty.has-mark .pv-empty-t{font-size:16px; line-height:1.5; color:var(--ink-2)}
.pv .pv-empty.has-mark .pv-empty-acts{margin-top:16px}
@media (min-width:1024px){
  .pv .pv-empty-mark{width:160px; height:128px}
  .pv .pv-empty-mark .pv-mark{margin-left:calc(var(--ink, 0) * -4px / 3)}
}
/* (2d: rows) round 2d, item 35 of docs/finesse-2026-10-12/the-list.md (round-2d/build.md; his note of 14 Oct with Messages and
   Notifications: the fill inside the lists "differs from place to place … make it one, and a little lighter", and a row's
   highlight on hover "must cover the entire row": the part-row fill gave "a very bad effect of shadow"; his word "all as you
   say"). The ground: --tone-card a third of the way to white in all ten themes, --hover one step under it, 35% of the way to the
   band, so a hover reads alike in every theme (public/preview-theme.css). Here: a hovered or chosen row runs its card's full
   width, edge to edge. Only the fill moves: each row takes the inset it runs over as a negative margin and the same as padding,
   so its words keep their line; the hairline between rows runs to the card's edges with it, as Guests', Vendors' and Money's
   every line already did (rule 43). Under a pointer only, as before (preview-home.css 516–520). */
/* a list panel's rows (Notifications, Money's To pay, Documents' folders, Search's results): over the card's inset */
.pv .pv-card.pv-listpanel .pv-rows > .pv-row{margin-inline:calc(-1 * var(--card-in)); padding-inline:var(--card-in)}
/* the fold of more rows under them (Notifications' "8 more waiting on you"): its rows on the card's line with the rows above them
   (they stood 18 further in), its words on the band's */
.pv .pv-card.pv-listpanel > .pv-fold{padding-inline:0}
/* Money's lines still at their estimates, in their own fold 18 in from the card's inset: over both, their words where they are,
   in their own column under "Expected, not owed yet" */
.pv .pv-card .pvm-expfold .pv-rows > .pv-row{margin-inline:calc(-1 * (var(--card-in) + 18px)); padding-inline:calc(var(--card-in) + 18px)}
/* a folded card's rows (Documents' "The documents most weddings need"): over the card's inset, on the card's line as its summary
   (they stood 24 further in) */
.pv .pv-card.pv-fold:not(.pv-panel) > .pv-fold-in > .pv-rows > .pv-row{margin-inline:calc(-1 * var(--card-in))}
/* Messages: the list's conversations, the one under the pointer and the one open, edge to edge and square; the faces on the list's
   one line, 16, its title's and its search's (they stood at 8 + 10); "Everyone in the house" with them (2c: home, above) */
.pv .pv-msglist ul{padding-inline:0}
.pv .pv-convo{padding-inline:16px; border-radius:0}
.pv .pv-msglist-sub{margin-inline:16px}
/* a table's head, the band's one tone in every room (it was the paper's on a household's page and the Sangeet's sheet, and white
   in Vendors' side by side); on the screen only, so a printed sheet keeps its own. (the merge, from the final sheets) Vendors' side
   by side too: its head row of names, its corner with them, was left on the card's ground */
@media screen{ .pv .pv-table thead th, .pv .pvl-compare thead th:first-child{background:var(--surface)} }
/* Vendors' side by side: its first column, held still while the rest scrolls, on its card's ground, not a white column in the card */
.pv .pvl-compare th:first-child{background:var(--surface)}
/* (the merge) the home's Messages card the same: a conversation under the pointer runs the card's full width, square, its face and
   words where they were (the list stood 8 out of the card's inset, each row 8 in, corners 12); the hairline between the two
   conversations to the card's edges with them. Its classes are feed.js houseMessages', which neither the week's nor the first
   helper changed; no view draws .pvo-folks any more, so rows' second selector is left out */
.pv .pv-home.pvn .pvo-msgs{margin-inline:calc(-1 * var(--card-in))}
.pv .pv-home.pvn .pvo-msg{padding-inline:var(--card-in); border-radius:0}
/* (v190: rooms) the room fixes from his walk-through of the live house, 16 Oct 2026 (docs/v190-2026-10-16/brief.md, section 3),
   before the tick boxes' section, which stays the sheet's last; tokens only, no weight or face of its own (the house's own parts
   carry them: an h3, .pv-eyebrow; Meetings' heads over faces are the house's .pvx-facehead, as in Messages) */

/* (v190: rooms, item 2; his walk-through, 16 Oct: "there isn't any space with the tag family 80 and the first entry… let's give those
   different tables") Guests' register by group (views/preview/guests.js quietGuests): each side's name over its groups, outside them
   (no box inside a card, rule 43), as a section's heading (16, the house's h3 at 600; 12 over what it heads, 32 between one side
   and the next); each
   group a card of its own, 16 apart as Vendors' jobs, its band the house's (--tone-band, 10 above and below, the card's inset at the
   sides): the group and its count, the house's label (.pv-eyebrow, 500) in ink as the card's title, and on a laptop the columns'
   names over theirs, as labels (500, --ink-3),
   on the rows' own grid; on a phone (no columns, each row says them) the band keeps the group alone. The band's edge to the first
   row's words is the row's own 12. A to Z keeps one card for each side; a letter's rows have the same 12 under it. */
.pv .pvq-register :is(.pvg-side, .pvg-sidegrp) + .pvg-sidegrp, .pv .pvq-register .pvg-sidegrp + .pvg-side{margin-top:32px}
.pv .pvr-gl .pvg-sidename{margin:0 0 12px; font-size:16px; line-height:24px; letter-spacing:-.01em; color:var(--ink)}
.pv .pvr-gl .pvg-grp + .pvg-grp{margin-top:16px}
.pv .pvr-gl .pv-card.pv-listcard.pvg-grp{padding-top:0}
.pv .pvr-gl .pvg-grp > .pv-hhs-head.pvg-gband{display:flex; align-items:center; padding-block:8px; border-bottom:0; border-radius:var(--r-post) var(--r-post) 0 0; line-height:20px}
.pv .pvr-gl .pvg-gband > .pvg-gname{margin:0; font-size:14px; line-height:20px; letter-spacing:0; color:var(--ink)}
.pv .pvr-gl .pvg-gband > span{display:none}
@container (min-width:900px){
  .pv .pvr-gl .pvg-grp > .pv-hhs-head.pvg-gband{display:grid; align-items:center}
  .pv .pvr-gl .pvg-gband > span{display:block}
}
.pv .pvr-gl .pvg-grp > .pvg-gband + .pv-hhs > li:first-child > .pv-hh{padding-top:12px}
.pv .pvr-gl .pvg-side > .pvg-sub + .pv-hhs > li:first-child > .pv-hh{padding-top:12px}

/* (v190: rooms, item 1) a household's Edit (views/preview/guests.js householdForm): "Remove from the register" on Save's row, at its
   far end on a laptop, so the red act is never the one beside Save under a pointer; on a phone the row wraps and it is the last,
   on the line as every button */
@media (min-width:1024px){ .pv .pv-actions > .pv-btn[data-remove]{margin-left:auto} }

/* (v190: rooms, item 5; his walk-through: "on the right hand side, at the bottom, it's just one horizontal line and there's no end…
   give this a border") Messages: the list and the conversation in one frame, the house's 1px line and the card's corners, so the
   conversation's right and bottom edges end; on a phone a conversation keeps the whole screen (preview-review.css, no frame) */
.pv .pv-card.pv-msgs{border:1px solid var(--line); border-radius:var(--r-post)}
@media (max-width:1023px){ .pv .pv-card.pv-msgs.has-thread{border:0; border-radius:0} }

/* (v190: rooms, item 8; his walk-through: "if the city time is selected, it looks like the entire bar is then for the other city time… fix
   that") Meetings' "Times are in": two equal halves across the field, the words centred, the chosen one the house's chosen
   (a chosen chip's --wine-tint, its wine words and edge); the other on the bar's own --sunk */
.pv .pv-seg2{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); width:100%}
.pv .pv-seg2 span{border:1px solid transparent; text-align:center}
.pv .pv-seg2 input:checked + span{border-color:var(--line); background:var(--wine-tint); color:var(--wine); box-shadow:none}

/* (v190 int) Notifications' "Watching for you" (views/preview/watch.js): three and a fold on a laptop; on a phone, where each Stop
   goes under its words, one and a fold, so "Waiting on you" stays on the first screen */
.pv .pvx-watching .pvx-w-phone{display:none}
@media (max-width:1023px){
  .pv .pvx-watching .pvx-w-wide{display:none}
  .pv .pvx-watching .pvx-w-phone{display:block}
}

/* (2d: ticks) round 2d, item 37 of docs/finesse-2026-10-12/the-list.md (his note of 14 Oct night: "there are still a lot of places
   where we still have square boxes with a small radius tick boxes. So can we change those to circles? Everywhere."; his word "A for
   10f"). Every tick box in the house is the round tick Settings' Who sees what has had since L6 (above), in the Done circle's hand:
   22 across, an empty ring in --line-strong; under the pointer the ring wine and the tick showing in --wine-line; ticked, wine with
   its tick in --on-wine (--tick-mask, preview-theme.css). A tick and never a dot, so a ticked box never reads as a radio's one
   choice (a radio keeps its ring and dot); round with the keyboard's ring; its edge solid when it cannot be pressed (the fix round, his E.12), as the Done circle is
   when it is not yours to tick; 44 to press on a touch screen (a box in a table cell, by its own reach; a box in a label, by its
   row). It stays the same checkbox (its name, its label, its keys). The screen only: print keeps the browser's own box. The boxes
   hidden inside a chip, a face, a photograph, a meeting's option or a swatch keep theirs (what shows there is the chip or the
   drawn mark); a meeting's drawn option is the same round, 22. flex:none ends "Who can see it"'s first column squeezing its boxes
   to 13 and 15 wide. */
@media screen{
  .pv input[type=checkbox]:not(:is(.pv-dayt, .pv-facename, .pv-tick, .pv-optick, .pvx-theme) input){position:relative; display:inline-grid;
    place-items:center; flex:none; width:22px; height:22px; vertical-align:middle; -webkit-appearance:none; appearance:none;
    border:1.5px solid var(--line-2); border-radius:50%; background:var(--surface); cursor:pointer}
  .pv input[type=checkbox]:not(:is(.pv-dayt, .pv-facename, .pv-tick, .pv-optick, .pvx-theme) input)::before{content:""; width:14px; height:14px;
    -webkit-mask:var(--tick-mask) center/14px 14px no-repeat; mask:var(--tick-mask) center/14px 14px no-repeat; background:transparent}
  .pv input[type=checkbox]:not(:is(.pv-dayt, .pv-facename, .pv-tick, .pv-optick, .pvx-theme) input):checked{border-color:var(--wine); background:var(--wine)}
  .pv input[type=checkbox]:not(:is(.pv-dayt, .pv-facename, .pv-tick, .pv-optick, .pvx-theme) input):checked::before{background:var(--on-wine)}
  .pv input[type=checkbox]:not(:is(.pv-dayt, .pv-facename, .pv-tick, .pv-optick, .pvx-theme) input):focus-visible{ outline-offset:2px; border-radius:50%}
  .pv input[type=checkbox]:not(:is(.pv-dayt, .pv-facename, .pv-tick, .pv-optick, .pvx-theme) input):disabled{border-style:solid; cursor:default}
  .pv input[type=checkbox]:not(:is(.pv-dayt, .pv-facename, .pv-tick, .pv-optick, .pvx-theme) input):disabled:checked{opacity:.55}
  /* a form's choice: the 22 round centred on its first line (it sat 1 lower as a 20) */
  .pv .pv-choice > input[type=checkbox]{margin-top:0}
  /* a meeting's option, drawn beside its hidden input: the same round, 22 */
  .pv .pv-optick i{width:22px; height:22px; border-radius:50%}
  /* (the merge, measured on Family › remove at 1294 and 390) a radio keeps its native 20 on the line, and its words start where a
     tick's do, 22 and 12 after the line (they began at 20 and 12, 2 short of the tick's under them) */
  .pv .pv-choice > input[type=radio]{margin-right:0px}
}
@media screen and (hover:hover){
  .pv:where(:not(.pv-k-door)) input[type=checkbox]:not(:is(.pv-dayt, .pv-facename, .pv-tick, .pv-optick, .pvx-theme) input):not(:checked, :disabled):hover{border-color:var(--wine)}
  .pv:where(:not(.pv-k-door)) input[type=checkbox]:not(:is(.pv-dayt, .pv-facename, .pv-tick, .pv-optick, .pvx-theme) input):not(:checked, :disabled):hover::before{background:var(--line)}
}
@media screen and (pointer:coarse){
  /* a box with no label around it (a household's day grid, Who sees what) reaches 44 by itself; a box in a label is pressed by its
     row, 44 at least (a form's choice was 38 for one line, "Who can see it"'s 34) */
  .pv input[type=checkbox]:not(label input, :is(.pv-dayt, .pv-facename, .pv-tick, .pv-optick, .pvx-theme) input)::after{content:""; position:absolute; inset:-12.5px}   /* (from its 19 inside the ring: 44) */
  .pv .pv-choice:has(> input[type=checkbox]), .pv .pv-aud-o{min-height:44px}
}

/* ===== preview-wings.css ===== */
/* The next level, round 2 (20 Oct 2026): the wings as navigation, the frame. The rail of five wings and Rooms under its
   hairline; the strip pinned at 0-74 on a laptop with the lights in it, The house behind the names, the field that searches
   and asks, Messages, Notifications and the portrait; the phone's five tabs. Ported from
   docs/next-level-2026-10-20/round-1/mockups/mock.css, never pasted: pv- names, the house's tokens. Inlined after the finesse
   sheet (views/preview/kit.js shell). The pinned strip is drawn wherever the rail is (768 and wider): one frame, the field from
   1024 and the strip's icons below that, as on a phone. */

/* the page's own inks, taken where the theme's words are: the strip renames --ink and its kin for its own ground (a theme's
   bar, preview-theme.css 3), so what is drawn on white inside it (the field, The house's menu) reads these instead. The field's
   edge is the AI's own, the ask bar's gold-to-wine line (preview-home.css: .pv-housebar.is-ask .pv-housebar-row) */
.pv:where(:not(.pv-k-door)){--pv-page-ink:var(--ink); --pv-page-ink-2:var(--ink-2); --pv-page-ink-3:var(--ink-2); --pv-page-ink-4:var(--ink-3); --pv-page-hover:var(--hover);
  --pv-find-ground:var(--surface); --pv-ai-edge:linear-gradient(115deg, var(--gold), var(--gold) 38%, var(--wine) 74%, var(--wine))}

/* ---- the strip, every width: the names (a link home, no arrow), the field's column, the tools at the right ---- */
/* (the top bar, 21 Oct 2026, his pick: "something of YouTube … another search bar at the central place at the top … the drop
   down in front of the name is also not clear … what it can do") */
.pv .pv-top{gap:0}   /* (v190's 4 stood between the names and the tools; a phone's names keep 118) */
.pv .pv-top-id{flex:0 1 auto}
.pv .pv-top-acts{margin-left:auto}
/* The house under the portrait, YouTube's and Gmail's place: the kit's menu (a details), the portrait its button with a ring under
   the pointer and while open; its menu under the portrait's right edge, on white in the page's own inks */
.pv .pv-top .pv-house > summary.pv-top-me{cursor:pointer; border-radius:50%}
.pv .pv-top .pv-house > summary.pv-top-me .avatar{transition:box-shadow var(--dur-fast)}
.pv .pv-top .pv-house > summary.pv-top-me:hover .avatar, .pv .pv-top .pv-house[open] > summary.pv-top-me .avatar{box-shadow:0 0 0 3px var(--line)}
.pv .pv-top .pv-house > .pv-menu-pop{top:calc(100% + 4px); min-width:276px;
  --ink:var(--pv-page-ink); --ink-2:var(--pv-page-ink-2); --ink-2:var(--pv-page-ink-3); --ink-3:var(--pv-page-ink-4); --hover:var(--pv-page-hover)}
/* you first: your portrait, your name, your page under it, a hairline, then the house's rooms that are no wing's */
.pv .pv-menu-pop > a.pv-me-head{gap:12px; min-height:0; margin:0 0 4px; padding:8px 8px 12px; border-bottom:1px solid var(--line); border-radius:6px 6px 0 0}
.pv .pv-me-head > span:not(.avatar){display:flex; flex-direction:column; gap:0px; min-width:0}
.pv .pv-me-head b{font-size:16px; font-weight:500; line-height:1.25; color:var(--ink)}
.pv .pv-me-head b + span{font-size:13px; font-weight:400; line-height:1.3; color:var(--ink-2)}
.pv .pv-house-note{margin:4px 8px 4px; padding-top:8px; border-top:1px solid var(--line); font-size:12px; line-height:1.45; color:var(--ink-2)}
/* the field and its column are the laptop's; below that, its magnifier (the rooms' Ask buttons keep the one sparkle: rule 69) */
.pv .pv-top-mid, .pv .pv-find{display:none}

/* ---- the frame wherever the rail is (1024 and wider; the audit clean: below it the phone): the strip pinned at 0-74 with the lights in it, the rail under it ---- */
@media (min-width:1024px){
  .pv .pv-top{display:flex; position:sticky; top:0; z-index:20; box-sizing:border-box; height:74px; min-height:74px; margin:0; gap:0; align-items:center;
    padding:32px 24px 0 8px; background:var(--bar-tablet); -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom:0; --badge-ring:var(--bar-tablet)}
  /* its hairline only once the page has scrolled (public/preview-flow.js: a 1 px sentinel at the page's top, watched) */
  .pv .pv-top::after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--line); opacity:0; pointer-events:none}
  .pv.pv-scrolled .pv-top::after{opacity:1}
  /* the mark over the rail's icons (76 wide), the names on the sheet's left edge (116), the count beside them on one baseline
     (inside their link: 16 from the names); the names never give way, the field's column does */
  .pv .pv-top-id{flex:none; align-self:stretch; align-items:center; gap:0; padding:0}
  .pv .pv-top .pv-id-mark{display:inline-flex; justify-content:center; flex:none; width:76px}
  .pv .pv-top-tx{flex-direction:row; align-items:baseline; gap:12px; margin-left:32px}
  .pv .pv-top-names{font-size:20px; color:var(--bar-ink)}
  .pv .pv-top .pv-amp{color:var(--bar-amp)}
  .pv .pv-top-togo{margin-left:4px; font-size:14px; line-height:1.2; color:var(--bar-ink-2)}
  .pv .pv-top-acts{gap:8px}
  .pv .pv-top-acts .pv-icon-btn{color:var(--bar-ink)}

  /* the lights in the strip's top 30, moved by position alone (one copy, still the shell's first child): sticky at 2 for the
     whole page, so they stay in the pinned strip, over its ground; full width (the shell's own 8 and 24 at its sides); the
     rail and the sheet in the grid's second row, under them. 30 everywhere (the home's 38, preview-next.css, is the shell's) */
  /* (the top bar, 21 Oct 2026, his word on picking it: "add a little space above the search bar and below the light, so there's
     slightly more space there, not too much") the lights 4 higher (sticky at 2, was 6) and the strip's row 2 lower (its padding-top
     34, its middle 54): 15 of air between the lowest bulb over the field and the field (was 9); the strip stays 74, the rail and
     the sheet stay */
  .pv.pv-frame .pv-shell, .pv.pv-frame.pv-flow.pv-rail .pv-shell{padding-top:0; grid-template-rows:0 1fr}   /* (the second row takes what a short page leaves, as the one row did) */
  .pv.pv-frame .pv-shell > .pv-lights{position:sticky; top:2px; right:auto; left:auto; z-index:21; grid-row:1 / 3; grid-column:1 / -1; align-self:start;
    height:30px; margin:-72px -24px 0 -8px}
  .pv.pv-frame .pv-shell > .pv-nav{grid-row:2; grid-column:1}
  .pv.pv-frame .pv-shell > .pv-main{grid-row:2; grid-column:2}
  /* the rail under the strip: at 74, the window's height less the strip's; its words start level with the sheet */
  .pv.pv-frame .pv-nav-in{top:74px; height:calc(100vh - 74px); margin-top:0; padding-top:8px; -webkit-mask-image:none; mask-image:none}
  .pv.pv-flow.pv-bar-js .pv-bar-k{top:74px}
  /* the five wings, a hairline 8 above and below and 12 in from the rail's sides, then Rooms */
  .pv .pv-nav-rule{height:1px; margin:8px 12px; background:var(--line)}

  /* what the pinned strip forces: anchors land under it; the parts that stick keep clear of it (74 more each) */
  /* (v212 item 3, the rule at this sheet's end, his word of 24 Oct 2026: "links that land clear of the sticky bars") from 1024 a room or a door has its wing's
     local nav pinned under the top bar (top 85, 48 high, preview-lift.css): a link within its page lands clear of both, and 16 more */
  html:has(> body.pv.pv-frame){scroll-padding-top:90px}
  .pv:where(:not(.pv-k-door)) [id]{scroll-margin-top:0}
  .pv .pvl li[id], .pv .pv-dish, .pv .pvq-register[id]{scroll-margin-top:0}   /* (at the merge) their own margins (96, 96, 16) would add to the 90 */
  .pv .pv-selbar{top:82px}
  @container (min-width:880px){ .pv .pv-col-side{top:94px} }   /* (sticky only there, preview-home.css) */
  @container (min-width:900px){ .pv .pv-stage{top:88px} }      /* (sticky only there; elsewhere it is placed relative, and top would move it) */
}
@media (min-width:1024px){
  .pv .pv-top{padding-left:16px; background:var(--strip, var(--bar)); background-attachment:fixed; --badge-ring:var(--strip-ring, var(--bar))}
  .pv.pv-scrolled .pv-top{background:var(--strip-scrolled, var(--bar)); background-attachment:fixed}
  .pv.pv-scrolled .pv-top::after{opacity:var(--strip-rule, 1)}   /* (v198) on linen's wash the strip and the rail are one ground: no rule above Home */
  .pv .pv-top-tx{margin-left:16px}
  .pv.pv-frame .pv-shell > .pv-lights{margin-left:-20px}
  .pv.pv-frame .pv-shell, .pv.pv-frame.pv-flow.pv-rail .pv-shell{min-height:calc(100vh - 74px)}   /* (finesse's 100vh, less the strip over it: a short page does not scroll) */
  .pv .pv-msgs{height:calc(100vh - 144px)}   /* (1 Nov 2026, his "we have extra space, so why not use it?": 212 left 156 empty under the
     card and 56 over it; now 68 taller: the card's top (56 with the hall folded, 62 open), the main column's foot 58 and the shell's 24
     fit the window, so the page does not scroll) */
  /* (the top bar, 21 Oct 2026) the field in the middle, in its own column between the names and the tools, centred in it with 40
     at its sides: equal room to the days to go and to the icons (56 each at 1294; at 1024 the field is 427) */
  .pv .pv-top-mid{display:flex; flex:1 1 0; justify-content:center; min-width:0; padding:0 32px}
  /* the field that searches, and asks for whoever may: 34 (it stands under the lights), 560 at most (280 before), a pill (his word
     with YouTube's: "can we use this rounded edge?"), the magnifier 16 in --ink-4, its words 15 in --ink-3, the microphone at its
     end, the AI's own edge (rule 19); the plain --line-strong edge for whoever may not ask */
  .pv .pv-find{display:flex; align-items:center; gap:8px; box-sizing:border-box; width:100%; max-width:560px; height:34px; margin:0; padding:0 12px;
    border:1px solid var(--line); border-radius:999px; background:var(--pv-find-ground); color:var(--pv-page-ink-3)}
  .pv .pv-find.pv-find-ai{border-color:transparent; background:linear-gradient(var(--pv-find-ground), var(--pv-find-ground)) padding-box, var(--pv-ai-edge) border-box}
  .pv .pv-find:focus-within{ outline-offset:2px}
  /* (v198, his walk, 20 Oct 2026: "the things on the top of the navbar, it's not very well aligned. It's looking very shabby") with
     the rail open, the strip keeps the folded one's two lines: the mark centred over the rail's icons (their middle at 41: the
     shell's 20, the row's 10, half the icon's 22; the mark's box was centred at 58, over the folded icons), the names on the
     sheet's left edge (the shell's 20, the rail, the gap's 12: 220 at 188). (His word, the same
     night: "reduce the space of the left nav bar … a lot of empty space to its right": 236 to 188, "Celebrations" 39 from its pill's end) */
  .pv.pv-flow:not(.pv-rail) .pv-top .pv-id-mark{margin-left:-17px}
  .pv.pv-flow:not(.pv-rail) .pv-top-tx{margin-left:calc(var(--nav-w) - 47px)}
  .pv .pv-find-ic{display:grid; flex:none; color:var(--pv-page-ink-4)}
  .pv .pv-find input{flex:1; min-width:0; height:100%; margin:0; padding:0; border:0; background:none; -webkit-appearance:none; appearance:none;
    color:var(--pv-page-ink); font:400 16px/1 var(--ui); outline:none}
  .pv .pv-find input::placeholder{color:var(--pv-page-ink-3); opacity:1}
  .pv .pv-find input::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none}
  .pv .pv-top-find{display:none}
}
/* the sentinel the strip's hairline is told by (public/preview-flow.js) */
.pv-top-seen{position:absolute; top:0; left:0; width:1px; height:1px; pointer-events:none}

/* ---- the phone (767 and narrower): Rooms is The house's first; the rail's own place for it is gone ---- */
/* under 390 the strip's four tools (the magnifier and Messages beside v190's two) leave the names 103 of their 114 at 375: the
   M|A mark steps aside, as it does under 340 (preview-review.css: it says what the names say), and the names keep their room */
@media (max-width:389px){ .pv .pv-top-id > .pv-id-mark{display:none} }
@media (min-width:1024px){ .pv .pv-house-phone{display:none} }

/* the days line beside the names, inside their link (the top bar, 21 Oct 2026; v198 to v200 it stood after The house's chevron), on
   the names' line; the phone's names keep the strip. On the home it is there but unseen (kit.js topBar), keeping its room */
.pv .pv-top-togo{flex:none; white-space:nowrap}
.pv .pv-top-togo.is-unseen{visibility:hidden}
@media (max-width:1023px){ .pv .pv-top-togo{display:none} }

/* ---- (the top bar, 21 Oct 2026, his word with YouTube's field: "can we use this rounded edge? and maybe let's try this
   everywhere? plus i want a voice memo as well") every field that searches or asks the assistant is a pill, and carries a
   microphone at its end: the strip's field, Search's and the assistant's bars, a room's assistant, Guests', the log's and
   Messages' finds. The bar that grows (a picked file under the ask's row) keeps its one line's round ends (23, half its 46) ---- */
.pv .pv-housebar-row{border-radius:999px}
.pv .pv-search, .pv .pvr-gl .pv-findbar .pv-search{border-radius:999px}
.pv.pvx-tools .pv-msgfind input{padding-right:48px; border-radius:999px}
/* the microphone: the house's round icon button in --ink-3, shown only where the browser can hear (public/preview-voice.js) */
.pv .pv-voice{color:var(--ink-2)}
.pv .pv-voice[hidden]{display:none}
/* in the strip's field: 28, its circle 3 inside the pill's end, on white in the page's own inks */
.pv .pv-find .pv-voice{width:28px; height:28px; margin-right:-12px; color:var(--pv-page-ink-3)}
.pv .pv-find .pv-voice:hover{background:var(--pv-page-hover); color:var(--pv-page-ink)}
.pv.pvx-tools .pv-msgfind .pv-voice{position:absolute; top:5px; right:20px}
/* in a room's own find on a laptop (Guests' 34, the log's 40): 30, its margins giving back what it is taller than the words, so no
   find grows (rule 17); a phone's finds are tall enough for the 36 */
@media (min-width:1024px){ .pv .pv-search .pv-voice{width:30px; height:30px; margin-block:-4px} }
/* listening: the button in the house's wine, a soft ring breathing round it (still, for whoever asks for less motion) */
.pv .pv-voice.is-listening, .pv .pv-voice.is-listening:hover{background:var(--wine); color:var(--on-wine); box-shadow:0 0 0 3px var(--wine-tint)}
@media (prefers-reduced-motion:no-preference){
  .pv .pv-voice.is-listening{animation:pv-hear 1.4s ease-in-out infinite alternate}
  @keyframes pv-hear{from{box-shadow:0 0 0 2px var(--wine-tint)} to{box-shadow:0 0 0 6px var(--wine-tint)}}
}

/* ---- (v200, the dress: the sheet) on Paper the page round the sheet is white too (preview-theme.css), so the room's one white sheet
   keeps its 20-point corners (his pick: "with its corners") and is drawn by the house's hairline outside its box (--line as a
   box-shadow, so nothing inside it moves). A theme's page keeps its colour round the sheet, and needs none. ---- */
@media (min-width:1024px){
  .pv.pv-paper.pv-harmony.pv-frame .pv-main, .pv.pv-paper .pv-main{box-shadow:0 0 0 1px var(--line)}
}

/* ---- (v200, the dress: the rail's motion) his pick of the dress's second round: direction 1 with direction 2's motion
   (docs/page-by-page-2026-10-20/v200-dress), on Paper. The room you are in settles into its pill as the page opens (on a phone its
   tab rises into place); the lights breathe, one bulb at a time along the wire, a wave every 21 seconds (each bulb's place is --i,
   views/preview/kit.js lights; the bulbs that say who is home stay still, preview-next.css); and a rose petal falls down the rail's
   free space every 5 to 8 seconds and fades into the paper before the bottom (his word: "just keep the falling petals and
   disappearing into oblivion"); preview-petal.js works each fall out. The petal's box covers the free space and clips it;
   nothing in it can be pressed. None of it for someone who asks for less motion. ---- */
.pv .pv-petals{position:absolute; left:0; right:0; overflow:hidden; pointer-events:none}
.pv .pv-petal{position:absolute; left:0; top:0; display:block; max-width:none; height:auto; pointer-events:none; user-select:none; will-change:transform, opacity}
@media (prefers-reduced-motion:no-preference){
  .pv.pv-paper .pv-nav .pv-list a[aria-current="page"]{animation:pv-settle var(--dur-slow) cubic-bezier(.2,.7,.2,1) backwards}
  .pv.pv-paper .pv-tabbar a[aria-current="page"] .pv-tabbar-ic{animation:pv-settle-up var(--dur-slow) cubic-bezier(.2,.7,.2,1) both}
  @keyframes pv-settle{from{transform:translateX(-10px); opacity:0} 60%{opacity:1} to{transform:none; opacity:1}}
  @keyframes pv-settle-up{from{transform:translateY(8px); opacity:0} 60%{opacity:1} to{transform:none; opacity:1}}
  .pv.pv-paper .pv-bulb .g{animation:pv-breathe 21s ease-in-out infinite; animation-delay:calc(var(--i, 0) * .3s)}
  .pv.pv-paper .pv-bulb .b{animation:pv-breathe-b 21s ease-in-out infinite; animation-delay:calc(var(--i, 0) * .3s); transform-box:fill-box; transform-origin:center}
  @keyframes pv-breathe{0%, 7%, 100%{opacity:.45} 3.5%{opacity:1}}
  @keyframes pv-breathe-b{0%, 7%, 100%{transform:none} 3.5%{transform:scale(1.18)}}
}
@media (prefers-reduced-motion:reduce){ .pv .pv-petals{display:none} }
/* ---- (v200, the dress: the rail's motion, end) ---- */
@media (min-width:1024px){ html:has(> body.pv.pv-frame .pv-local){scroll-padding-top:calc(85px + 48px + 16px)} }   /* (v212 item 3) */

/* ===== preview-wings-rows.css ===== */
/* The next level, round 2 (20 Oct 2026): the wings as navigation, the rows. Under each wing's head its rooms as one row of
   the house's own chips (nav.pv-chips.pv-wingrow), the current one chosen; the Rooms page as the floor plan (.pv-plan).
   Ported from docs/next-level-2026-10-20/round-1/mockups/mock.css, never pasted. Inlined after the frame's sheet
   (views/preview/kit.js shell). Tokens only. */

/* ---- the row of rooms: the house's own filter row, nav.pv-chips and its a items exactly as preview-home.css 350-356 and
   preview-finesse.css 86, 115-123 draw them (the chosen one a[aria-current="true"]; a day's dot .pv-tone under data-event).
   Only its place is the row's own: the head's last line, 16 above it (a room's own tabs, Money's or Notifications', follow it
   with their own 20) ---- */
/* (v196, his pick of the sub-rooms study, 20 Oct: "Let's do apple one") the row leaves the head for a local nav of the frame's
   own, as Apple's product families have: the wing's name at the left (17/600, a link to its first room), its rooms at the right
   as small words (13/400 grey, the one you are in in ink at 500), a hairline, pinned under the strip. From 1024 the rooms stand
   in the bar; under it the name and its arrow open them as the house's own menu (kit.js menu), so no row runs off the edge.
   The bar takes the head's width on every kind of page (the narrow kinds hold all but the head to 760 or 700). */
.pv .pv-main > div.pv-local.pv-local{max-width:none}
.pv .pv-local{position:sticky; top:56px; z-index:18; display:flex; align-items:center; box-sizing:border-box; height:48px; margin:-12px -16px 12px; padding:0 16px; border-bottom:1px solid var(--line); background:var(--surface)}
.pv .pv-local-name, .pv .pv-local > .pv-chips.pv-wingrow{display:none}
.pv .pv-local-menu > summary.pv-menu-named{flex-direction:row-reverse; gap:4px; height:44px; min-height:0; padding:0; border:0; background:none; box-shadow:none; font-size:16px; font-weight:600; color:var(--ink)}
.pv .pv-local-menu > summary.pv-menu-named > svg{color:var(--ink-2)}
.pv .pv-local-menu .pv-menu-pop a[aria-current="page"]{color:var(--wine); font-weight:500}
@media (min-width:1024px){ .pv .pv-local{top:74px; margin-bottom:16px} }   /* (a tablet: the laptop's 20 under the hairline, not the phone's 12) */
@media (min-width:1024px){
  .pv .pv-local{justify-content:space-between; gap:24px; margin:-24px 0 16px; padding:0}
  .pv .pv-local-name{display:inline-flex; flex:none; font-size:16px; font-weight:600; color:var(--ink); text-decoration:none; white-space:nowrap}
  .pv .pv-local > .pv-chips.pv-wingrow{display:flex; flex-wrap:nowrap; gap:0 24px; min-width:0; margin:0}
  .pv .pv-local > .pv-chips.pv-wingrow > a{min-height:44px; padding:0; border:0; border-radius:0; background:none; font-size:13px; font-weight:400; color:var(--ink-2)}
  .pv .pv-local > .pv-chips.pv-wingrow > a:hover{color:var(--ink)}
  .pv .pv-local > .pv-chips.pv-wingrow > a[aria-current="true"]{border:0; background:none; color:var(--ink); font-weight:500}
  .pv .pv-local-menu{display:none}
}

/* ---- the floor plan (more.js roomsPage): Home the column wide, its cover 160; the other wings alike, four across, 16 apart
   ((1040 - 3 × 16) / 4 = 248 at 1512), each cover 140; the grid alone spaces them (a stacked .pv-card's own 16 below is let go).
   (the seven calls, 20 Oct) the card is the list item; its cover and its name are the link to the wing, each room's name its own ---- */
.pv .pv-plan{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; margin:0; padding:0; list-style:none}
.pv .pv-plan > li.pv-card.pv-wing{display:flex; flex-direction:column; min-width:0; margin:0; padding:0; overflow:hidden; border-radius:12px; color:var(--ink)}
.pv .pv-plan > li:first-child{grid-column:1 / -1}
.pv .pv-wing-cover{position:relative; display:grid; place-items:center; flex:none; height:140px; overflow:hidden; background:var(--surface); color:inherit; text-decoration:none}
.pv .pv-plan > li:first-child .pv-wing-cover{height:160px}
.pv .pv-wing-cover > img{position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:var(--focus, 50% 40%)}
/* (v195, his finding on v194 live, 20 Oct: "My photo is cropping") each cover placed as the house already places that picture: an
   album's or a day's as its album card (preview-home.css .pv-album-cover img, 50% 40%), the home's photo as the home's own hero
   (.pv-hero-ph img, 50% 30%), so the home's wide strip keeps the faces where it centred the chests */
.pv .pv-plan > li:first-child .pv-wing-cover > img{object-position:var(--focus, 50% 30%)}
.pv .pv-wing-tx{padding:16px 24px 24px}
.pv .pv-wing-tx h2{margin:0; font-size:20px; font-weight:600; line-height:1.3; letter-spacing:-.01em; color:var(--ink)}
.pv .pv-wing-tx a{color:inherit; text-decoration:none}
/* its rooms in one line: 14 in --ink-2 at the house's own 1.45 for a 14 line (the mock's 1.55 took the four cards' foot to 820.4
   with the strip, over the one screen's 820), the house's dot (kit.js dots) in --ink-4; a room's name never breaks inside itself */
.pv .pv-wing-tx p{margin:4px 0 0; font-size:14px; font-weight:400; line-height:1.45; color:var(--ink-2)}
/* what waits on you and what is new in the wing, one quiet line under the rooms (v190's Rooms page's words, finesse 359: the
   waiting part 500 in --ink-2) */
.pv .pv-wing-tx p.pv-wing-now{margin-top:4px; font-size:13px; line-height:1.4}
.pv .pv-wing-wait{font-weight:500}
@media (hover:hover){
  .pv .pv-wing-tx a:hover, .pv .pv-wing:has(> .pv-wing-cover:hover) h2 > a{color:var(--ink); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px}
}
/* (v198, his word on the floor plan, 21 Oct 2026: its rooms were "just plain words with underline when you hover over them … a little
   more prominence. But the layout I want to keep it like this") each room in a card is a key of its own (more.js wingKey): a small
   button on white with the house's hairline and a control's corners, 32 tall (36 to a finger); the room's mark at 16 in a 24 square
   of the sunk paper (a day its dot in its own tone, 8: rule 63), 8 to the name, 14/500 in ink; 8 between keys, 12 under the wing's
   name, the line of what waits 10 under them. Pointed at, its edge firms and its mark turns wine; no underline */
.pv .pv-wing-tx ul.pv-wing-rooms{display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0; padding:0; list-style:none}
.pv .pv-wing-rooms > li{display:flex; min-width:0; max-width:100%; margin:0}
.pv .pv-wing-tx a.pv-wing-key{display:inline-flex; align-items:center; gap:8px; box-sizing:border-box; min-width:0; max-width:100%; min-height:32px;
  padding:4px 12px 4px 4px; border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface); color:var(--ink);
  font-size:14px; font-weight:500; line-height:1.3; text-decoration:none}
.pv .pv-wing-km{display:grid; place-items:center; flex:none; width:24px; height:24px; border-radius:6px; background:var(--hover); color:var(--ink-2)}
.pv .pv-wing-km > svg{display:block}
.pv .pv-wing-km > i{display:block; width:8px; height:8px; border-radius:50%; background:var(--e, var(--ink-3))}
.pv .pv-wing-rooms + p.pv-wing-now{margin-top:8px}
@media (hover:hover){
  .pv .pv-wing-tx a.pv-wing-key:hover{border-color:var(--line); color:var(--ink); text-decoration:none}
  .pv .pv-wing-tx a.pv-wing-key:hover .pv-wing-km{color:var(--wine)}
  .pv.pv-paper .pv-wing-tx a.pv-wing-key:hover .pv-wing-km{color:var(--w-ink)}   /* (v200, the dress) on Paper the mark keeps its wing's ink (preview-theme.css 4) */
}
/* (to a finger 36, and 44 to press, as the house's chips: the press reaches 4 above and below, into the 8 between rows) */
@media (pointer:coarse){
  .pv .pv-wing-tx a.pv-wing-key{position:relative; min-height:36px}
  .pv .pv-wing-tx a.pv-wing-key::after{content:""; position:absolute; inset:-4px 0}
}
/* between a laptop and a phone (768-1023) two wings to a line, so a room's name still has room */

/* ---- the phone (767 and narrower): the cards stack, one column, 16 apart, every cover 140 (v196: the row that scrolled here
   is the local nav's menu now) ---- */
@media (max-width:1023px){
  /* (the seven calls) on a phone the plan is one of the house's lists (kit.js rows in a .pv-card.pv-listcard: preview-home.css
     506-515, preview-finesse.css 131-142): the five wings five rows, a hairline between; each row its cover a 60 square at the left,
     the name and the rooms at the right; the line under them only when something waits on you, and only that */
  .pv .pv-plan{display:block; padding:4px 0; border-radius:var(--r-post); background:var(--surface); overflow:hidden; outline:var(--card-edge) solid var(--line); outline-offset:-1px}
  .pv .pv-plan > li.pv-card.pv-wing{outline:0}   /* (v198) the plan is the card; its five wings are its rows */
  .pv .pv-plan > li.pv-card.pv-wing{display:grid; grid-template-columns:60px minmax(0, 1fr); align-items:start; gap:0 12px; padding:12px var(--card-in);
    border-radius:0; background:none; overflow:visible}
  .pv .pv-plan > li.pv-card.pv-wing + li.pv-card.pv-wing{border-top:1px solid var(--line)}
  .pv .pv-wing-cover, .pv .pv-plan > li:first-child .pv-wing-cover{width:60px; height:60px; border-radius:var(--r-pop)}
  .pv .pv-wing-tx{padding:0; min-width:0}
  .pv .pv-wing-tx h2{font-size:16px; line-height:1.35}
  .pv .pv-wing-tx p{margin-top:0px; line-height:1.5}
  .pv .pv-wing-tx ul.pv-wing-rooms{margin-top:8px}
  .pv .pv-wing-now:not(.is-waiting), .pv .pv-wing-now > :not(.pv-wing-wait){display:none}
}

/* (v199, round 2 of the walk: the doors, 21 Oct 2026) Planning's door and the Rooms page, from his walk of 20 October
   (docs/page-by-page-2026-10-20/feedback.md, Planning and Rooms, way A of each, accepted). One part for a room in both: the
   room's key. Tokens only; the card, the row and the date tile are the house's own, placed here. ---- */
/* the room's key (kit.js roomMark): his "proper weightage" for a room "but it can also become too circly": a 40 rounded square
   with a control's corners, on --sunk, the room's mark at 20 in ink. Never round: in this house round means a face */
.pv .pv-roomkey{display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:var(--r-ctl); background:var(--hover); color:var(--ink)}
.pv .pv-roomkey > svg{display:block}

/* Planning's door (views/preview/plan.js planningDoor): his "an overview page, with different buttons, and not start with the to-do
   first". One tile per room, two a row (one on a phone), 16 apart; each tile one card and all of it the link: the key, 16, then
   the room's name (17/500, a name in a list), its state in figures (14, --ink-3, 4 under) and what waits on you (14/500, wine) */
.pv .pv-roomtiles{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; margin:0; padding:0; list-style:none}
.pv .pv-roomtiles > li{display:flex; min-width:0; margin:0}
.pv .pv-roomtiles a.pv-card.pv-roomtile{display:flex; align-items:flex-start; gap:16px; flex:1; box-sizing:border-box; min-width:0; margin:0;
  padding:var(--card-in); color:var(--ink); text-decoration:none}
.pv .pv-roomtile-tx{display:flex; flex-direction:column; flex:1; min-width:0; padding-top:0px}
.pv .pv-roomtile-t{font-size:16px; font-weight:500; line-height:1.35; letter-spacing:-.01em; color:var(--ink)}
.pv .pv-roomtile-m, .pv .pv-roomtile-wait{margin-top:4px; font-size:14px; line-height:1.45; color:var(--ink-2)}
/* (21 Oct) a tile's line wraps in even halves ("205 of 338 coming, / 41 not yet replied", never "replied" alone); its words keep
   a number with its word (views/preview/plan.js glued) */
.pv .pv-roomtile-m{text-wrap:balance}
/* (the cleanup, 27 Oct 2026) the tiles keep the clip their old pieces gave them (position and overflow), so they draw as before */
.pv .pv-roomtiles a.pv-card.pv-roomtile{position:relative; overflow:hidden}
@media (hover:hover){ .pv .pv-roomtiles a.pv-roomtile:hover .pv-roomtile-t{text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px} }

@media (max-width:1023px){
  .pv .pv-roomtiles{grid-template-columns:minmax(0, 1fr); gap:12px}
}

/* ===== preview-covers.css ===== */
/* The next level, round 3b (20 October 2026): his pick of the colour-and-life study, way A, the photographs, on every wing ("the
   images, this one is nice"). What is new, in one sheet, inlined in every room after the rows' sheet (views/preview/kit.js shell):
   the cover under a wing's head (kit.js cover: Celebrations, Memories; Family's faces on paper), a day card's photograph at its top,
   the faces where a count is (kit.js faceRun), Planning's face in a row's line, the home's run of who was in this week. The
   house's own parts (avatar, pv-daycard, pv-card); tokens only (preview-home.css :root, the ten themes in
   preview-theme.css). The strip, the local nav, the sheet and every head keep v196's rects (rule 17):
   a cover is a band under the head, and a card grows by its photograph only. */

/* ---- a run of faces: the house's avatar at one of its sizes, overlapping by 6, the first in front (each face over the next) ---- */
.pv .pv-facerun{display:inline-flex; align-items:center; flex:none; isolation:isolate}
.pv .pv-facerun > *{position:relative; flex:none; box-shadow:0 0 0 2px var(--run-ring, var(--surface))}
.pv .pv-facerun > * + *{margin-left:-4px}
.pv .pv-facerun > :nth-child(1){z-index:8} .pv .pv-facerun > :nth-child(2){z-index:7} .pv .pv-facerun > :nth-child(3){z-index:6}
.pv .pv-facerun > :nth-child(4){z-index:5} .pv .pv-facerun > :nth-child(5){z-index:4} .pv .pv-facerun > :nth-child(6){z-index:3}
.pv .pv-facerun > :nth-child(7){z-index:2}
.pv .pv-facerun.is-24 > .avatar{width:24px; height:24px; font-size:12px}   /* a count's line, a row's line (§6) */
.pv .pv-facerun.is-32 > .avatar{width:32px; height:32px; font-size:12px}   /* on a cover */

/* ---- the cover: under the head, the column wide, 240 tall on a laptop and 200 under 1024, the house's 16 corners; on a phone 200,
   edge to edge with square corners (round 1's, as he approved it). The head's 48 under it is split, 24 over the cover and 24 under
   (16 and 16 on a phone). Its words on the house's scrim (round 1's: --scrim-62 over --scrim-42), white (--on-dark) ---- */
.pv .pv-head:has(+ .pv-cover){margin-bottom:24px}
.pv .pv-cover{position:relative; display:block; box-sizing:border-box; height:240px; margin:0 0 24px; border-radius:12px; overflow:hidden; background:var(--surface); --run-ring:var(--surface)}
.pv .pv-cover + *{margin-top:0 !important}
.pv .pv-cover-img{position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:var(--focus, 50% 30%)}   /* (v198) faces sit in a photograph's top third: never cut through the eyes; (v209, item 10) or where the two of them put a cover they chose */
.pv .pv-cover-foot{position:absolute; left:0; right:0; bottom:0; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding:48px 24px 24px;
  background:linear-gradient(to top, var(--scrim) 0, var(--scrim) 62%, transparent 100%), linear-gradient(to top, var(--scrim) 0, var(--scrim) 58%, transparent 92%)}
.pv .pv-cover-words{min-width:0}
.pv .pv-cover .pv-cover-name{margin:0; font-family:var(--ui); font-size:24px; font-weight:600; line-height:1.25; letter-spacing:-.01em; color:var(--on-wine)}
.pv .pv-cover .pv-cover-name a{color:inherit; text-decoration:none}
.pv .pv-cover .pv-cover-name a:hover{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
.pv .pv-cover .pv-cover-name a:focus-visible{ outline-offset:2px; border-radius:6px}
.pv .pv-cover .pv-cover-line{margin:4px 0 0; font-size:14px; font-weight:500; line-height:1.43; color:var(--on-wine)}
.pv .pv-cover-who{display:flex; align-items:center; gap:8px; flex:none}
/* (v211 item 7) Memories' cover: "Move the picture" on its corner, the two of them's; the photograph's own point (--focus) at every width */
.pv .pv-cover-act{position:absolute; top:12px; right:12px; z-index:1}
.pv .pv-cover .pv-cover-n{font-size:14px; font-weight:500; line-height:1.43; color:var(--on-wine); white-space:nowrap}
/* a celebration's tone, small: 2 px at its cover's foot, the one place the tone shows here (rule 63) */
.pv .pv-cover.is-day::after{content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--hover); pointer-events:none}

/* ---- Family's cover: the two sides' faces on paper (round 1's sheet 03), no photograph and no scrim. 64 a face, overlapping by 12
   (round 1's), seven a side and the rest as "+N"; four, two or one as the cover narrows, the "+N" that goes with them (a side of
   k faces and its "+N" is 64 + 52k wide: seven need 912 of the cover's inside, four 600, two 352 with a phone's 16s) ---- */
.pv .pv-cover.is-faces{container-type:inline-size; display:grid; grid-template-columns:1fr 1fr; column-gap:48px; align-content:center; padding:0 24px; --run-ring:var(--surface)}
.pv .pv-cover-side{min-width:0}
.pv .pv-facerun.is-64 > *{width:64px; height:64px; font-size:24px}
.pv .pv-facerun.is-64 > * + *{margin-left:-12px}
.pv .pv-facerun-more{display:inline-grid; place-items:center; border-radius:50%; background:var(--hover); color:var(--ink-2); font-size:20px; font-weight:600; font-variant-numeric:tabular-nums}
.pv .pv-cover-side-n{margin:12px 0 0; font-size:24px; font-weight:600; line-height:1.25; letter-spacing:-.01em; color:var(--ink)}
.pv .pv-cover-side-d{margin:0px 0 0; font-size:14px; line-height:1.43; color:var(--ink-2)}
.pv .pv-cover.is-faces .pv-facerun-more:not(.is-of7){display:none}
@container (max-width:911.98px){
  .pv .pv-cover.is-faces .pv-facerun > .avatar:nth-child(n+5){display:none}
  .pv .pv-cover.is-faces .pv-facerun-more.is-of7{display:none} .pv .pv-cover.is-faces .pv-facerun-more.is-of4{display:inline-grid}
}
@container (max-width:599.98px){
  .pv .pv-cover.is-faces .pv-facerun > .avatar:nth-child(n+3){display:none}
  .pv .pv-cover.is-faces .pv-facerun-more.is-of4{display:none} .pv .pv-cover.is-faces .pv-facerun-more.is-of2{display:inline-grid}
}
@container (max-width:351.98px){
  .pv .pv-cover.is-faces .pv-facerun > .avatar:nth-child(n+2){display:none}
  
}

/* ---- a day card: its photograph at its top, the card's full width, 180 tall (160 on a phone), clipped by the card's own 16 corners
   (no edge, no inset: rule 43); the words as v196 draws them under it. Its count: five faces at 24, then "114 coming" where it was;
   the run sits inside the line (it overhangs the line's 21 by 1.5 above and below), so the card grows by its photograph only ---- */
.pv .pv-daycard > img.pv-daypic{display:block; box-sizing:border-box; width:100%; height:180px; aspect-ratio:auto; object-fit:cover; object-position:var(--focus, 50% 30%); flex:none}   /* (v209, item 10) a picture they chose, where they put it */
.pv .pv-daycard-n.has-run{display:flex; align-items:center; gap:8px}
.pv .pv-daycard .pv-facerun{--run-ring:var(--surface); margin-block:-1.5px}

/* ---- Planning: the person in a row's line is a 24 face (§6), in the 22 x 22 the line already gives it (it overhangs by 1 on
   each side), so no row grows and no line wraps where v196's did not; the row's leading circle (the tick, the question) stays, it is
   the row's control. Two of them: the first in front, overlapping by 6, the pair in v196's 38 ---- */
.pvr-plan .pvp-who > .avatar.xs{width:24px; height:24px; margin:-1px; font-size:12px}
.pvr-plan .pvp-who.is-two > .avatar.xs + .avatar.xs{margin:-1px -3px -1px -5px}
.pvr-plan .pvp-who.is-two > .avatar:first-child{position:relative; z-index:1; box-shadow:0 0 0 2px var(--surface)}

/* ---- the home's "People in the house": six at 32 (§6, a run), the first in front ---- */
.pv .pv-home.pvn .pvh-faces .avatar{width:32px; height:32px; font-size:12px}
.pv .pv-home.pvn .pvh-faces > li{position:relative}
.pv .pv-home.pvn .pvh-faces > li:nth-child(1){z-index:6} .pv .pv-home.pvn .pvh-faces > li:nth-child(2){z-index:5} .pv .pv-home.pvn .pvh-faces > li:nth-child(3){z-index:4}
.pv .pv-home.pvn .pvh-faces > li:nth-child(4){z-index:3} .pv .pv-home.pvn .pvh-faces > li:nth-child(5){z-index:2} .pv .pv-home.pvn .pvh-faces > li:nth-child(6){z-index:1}


/* ---- under 1024 the cover is 200 tall; on a phone (767 and narrower) edge to edge, square, its faces under its words ---- */
@media (max-width:1023px){ .pv .pv-cover{height:200px} }
@media (max-width:1023px){
  .pv .pv-head:has(+ .pv-cover){margin-bottom:16px}
  .pv .pv-cover{margin:0 -16px 16px; border-radius:0}
  .pv .pv-cover-foot{flex-direction:column; align-items:flex-start; gap:8px; padding:32px 16px 16px}
  .pv .pv-cover.is-faces{column-gap:16px; padding:0 16px}
  .pv .pv-cover.is-faces .pv-cover-side-n{margin:8px 0 0; font-size:20px}
  .pv .pv-daycard > img.pv-daypic{height:160px}
}

/* (v200, round 3 of the walk: their own picture) A celebration's picture is theirs to change (his words of 20 October: "It's their
   function. They should be able to upload the images they want"), and the house's painting is a suggestion until they do. For the
   two of them only (views/preview/days.js ownPicDay); nobody else gets either.
   - On the day's page, a row tied to the picture's foot, at its right: "Suggested" while the picture is the painting, then their one
     act on it, the house's quiet button "Change the picture" (34; a phone's 44) with the file field inside it, and once they have
     chosen one, the link-button that takes the choice back. 12 under the picture's tone rule, at the words' own inset (32, a
     phone's 16); the words under it start 16 under the row instead of 24 under the picture.
   - (the hierarchy round, 22 Oct 2026) the row is the first field of the day's details now (preview-lift.css §24), and its line says
     where the picture is from; the word "Suggested" is gone from the page, and from the card's first line on his call d the same
     day (the word's own rule went with it). ---- */
.pv .pvx-ownpic{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px 16px; padding:12px 32px 0}
.pv .pvx-2d-peak .pvx-ownpic + .pv-dayhero-tx{padding-top:16px}
.pv .pvx-ownpic-f{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; margin:0}
.pv .pvx-ownpic-f .pv-upbar{flex-basis:100%; min-width:180px}   /* a photograph on its way: the house's own bar, under the button */
.pv .pvx-ownpic label.pv-btn{cursor:pointer}
.pv .pvx-ownpic label.pv-btn:has(input:focus-visible){outline:2px solid var(--wine); outline-offset:2px}   /* the field is inside, unseen */
@media (max-width:1023px){
  .pv .pvx-ownpic{padding:12px 16px 0}
}
/* (v209, item 10: covers you can position) the point the two of them put a picture they chose at is the picture's own --focus
   (kit.js focusStyle), hooked above (the cover, a day's card) and in preview-finesse.css (the day's page), today's crops the
   fallbacks. "Position it" (kit.js positionDialog): the picture in a laptop's frame and a phone's, each the shape the page gives it
   at 1294 and at 390 (the column 1040 wide in the sheet at 1294, the sheet's --page; Memories' cover 1040 by 240 and, edge to edge,
   390 by 200; a celebration's picture 1040 by 300 and, inside a phone's 16 sides, 358 by 180), the laptop's above the phone's in a
   narrow dialog and beside it in a wide one. The fields are the point without script. */
.pv .pvx-pos-pic{display:grid; grid-template-columns:minmax(0, 1fr); gap:12px; margin:0 0 12px; border-radius:12px; outline-offset:4px}
.pv .pvx-pos-frame{min-width:0; margin:0}
.pv .pvx-pos-frame.is-phone{width:min(100%, 240px)}
.pv .pvx-pos-win{position:relative; display:block; overflow:hidden; border-radius:6px; background:var(--surface); box-shadow:0 0 0 1px var(--line)}
.pv .pvx-pos-pic.is-mem .is-laptop .pvx-pos-win{aspect-ratio:1040 / 240}
.pv .pvx-pos-pic.is-mem .is-phone .pvx-pos-win{aspect-ratio:390 / 200}
.pv .pvx-pos-pic.is-day .is-phone .pvx-pos-win{aspect-ratio:358 / 180}
.pv .pvx-pos-win img{position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; object-fit:cover; object-position:var(--focus, 50% 30%)}
.pv .pvx-pos-pic.is-day .pvx-pos-win img{object-position:var(--focus, 50% 50%)}
.pv .pvx-pos-frame figcaption{margin:4px 0 0; font-size:13px; font-weight:500; line-height:18px; color:var(--ink-2)}
.pv .pvx-pos-how{margin:0 0 12px}
.pv .pvx-pos-fields input[type=range]{width:100%; min-height:44px; margin:0; accent-color:var(--wine); touch-action:manipulation}
.pv .pvx-pos-f .pv-btn{touch-action:manipulation}
@container (min-width:520px){
  .pv .pvx-pos-pic{grid-template-columns:minmax(0, 2.4fr) minmax(0, 1fr); align-items:end}
  .pv .pvx-pos-frame.is-phone{width:auto}
}
/* with script the picture is the handle (public/preview-home.js §44), held as the rooms' handles are (people.js GRIP): a finger's
   drag moves the picture, not the dialog (touch-action none on the handle alone), nothing is selected while it moves, and during
   the drag each picture is moved by its own transform, drawn at its full size with the frame cropping it; let go, its point */
.pv .pvx-pos-pic[tabindex]{cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none}
.pv .pvx-pos-pic[tabindex]:focus-visible{}
.pv .pvx-pos-f.is-held{-webkit-user-select:none; user-select:none}
.pv .pvx-pos-pic.is-held{cursor:grabbing}
.pv .pvx-pos-pic.is-held .pvx-pos-win img{right:auto; bottom:auto; object-fit:fill; will-change:transform}

/* ===== preview-lift.css ===== */
/* The home again (v203; his word of 21 October 2026, late evening, on his house at his laptop, full screen: the walk's feedback.md,
   Home, "Again, on v201", 8–15, measured on the demo before a line was changed). Inlined last in every room by views/preview/kit.js
   shell, after the covers' sheet, so what is here is read after every other rule. Paper's (body.pv-paper) unless it says otherwise. */

/* 8. One shadow (his: "the shadows at different elements of different shadows … blur at 10 points and offset at 0 and opacity at
   50%", with a Keynote shape). The home had three frames: the dress's lift (a shade under the bottom edge only) on its cards, a
   hairline and no shadow round Waiting on you and the side's sections, the same hairline round every post. One shadow now, the
   theme's --lift (public/preview-theme.css, read from his Keynote picture), on every card and every post in the house, with no
   hairline (his "No Border"); the assistant's own glow and a phone's floating card keep theirs, the pop-up menus their deeper one
   (they float over the page), the sheet its ring. A way in that rises under the pointer rises with it (--lift-up).
   (v209, item 6: one card recipe) the shadow is --card-lift, offset and soft, and the hairline is back (outline:0 gone, so the
   edge, --card-edge in --line-tone inside it, preview-finesse.css (v198), draws on every card and post again: his "subtle outline"). */
.pv.pv-paper:where(:not(.pv-k-door)) :is(.pv-card:not(.pv-aibox, .pv-answerbox, .pvk-card), .pv-paperband, .pvm-side):not(:focus-visible),
.pv.pv-paper:where(:not(.pv-k-door)) .pvo :is(.pv-sidecol > .pv-sect.pv-sect, .pvo-around > .pv-sect, .pv-feedcol > .pv-sect.pvh-ask):not(:focus-visible, .pvh-rooms),
.pv.pv-paper:where(:not(.pv-k-door)) .pvo > .pva-you:not(:focus-visible), .pv.pv-paper .pv-hero.pvn-cover, .pv.pv-paper .pv-plan{box-shadow:var(--shadow-1)}

/* (v209, item 6) One card recipe, the gap (his "slightly more spacing"): cards one under another and side by side are --card-gap
   apart, 20 from 768, 16 on a phone as before (preview-theme.css), every kind alike: a card's own margin (preview-home.css .pv-card),
   the home's posts and its side's sections (the open house's --o-gap, 16 in preview-harmony.css), the floor plan and Planning's
   tiles (preview-wings-rows.css), the home's hand-set 16s (the one thing asked of you and the couple's note, preview-finesse.css 14
   and 10; How is today? under the ask, below). The guideline's one exception to its 8 steps (docs/brand-guideline.md 4). Grids
   already wider keep theirs (the days' cards, the albums); a table's rows keep theirs, only their card follows; a phone is untouched
   (Planning's tiles stay 12 apart there). */
@media (min-width:1024px){
  .pv:where(:not(.pv-k-door)){--card-gap:16px}
  .pv .pvo{--o-gap:var(--card-gap)}
  .pv .pv-plan, .pv .pv-roomtiles{gap:var(--card-gap)}
  .pv .pv-home.pvn .pv-feedcol > :is(.pv-ask, .pvh-ask, a.pv-fromus, .pvx-fromus-ack), .pv .pv-home.pvn .pvx-pair > .pvh-ask{margin-bottom:var(--card-gap)}
}

/* 9. One "more" link (his: "See all 23, it's an underline and a hyperlink. Whereas … how far along, and planning is in red"): the
   guideline's one look for a card's way on, 14/500 --ink-2 underlined 3 px under in --line-strong, on How far along's Planning (it
   was wine, which is never a link), Messages' Open messages (its arrow gone, views/preview/feed.js) and the side's "were here this
   week" (its chevron gone) */
.pv .pv-home.pvn a.pvh-here{font-weight:500; color:var(--ink-2); text-decoration:underline; text-decoration-color:var(--line);
  text-decoration-thickness:1px; text-underline-offset:3px}
.pv .pv-home.pvn a.pvh-here b{font-weight:inherit; color:inherit}
.pv .pv-home.pvn .pvn-about a.pv-more-link{text-decoration:underline; text-decoration-color:var(--line); text-decoration-thickness:1px; text-underline-offset:3px}   /* (the house's news cards' doors, views/preview/next.js moreLink, their arrow gone too) */

/* 10. Air under the bar once scrolled (his: "once you start to scroll … the top search bar is too close aligned to the text … there's
   no space"). The sheet's top edge stays where it stands at rest: the 10 of the window's ground under the bar and the sheet's
   rounded edge, pinned, and the page slides under that edge (the inset panel of Arc's, Spotify's and Apple Music's windows). Two
   layers in the sheet's own cell of the shell's grid (the rail's 2, the sheet's column), so they are exactly the sheet's width
   whatever the rail and the window do: the ground over the 10 and outside the two top corners (masked, so a theme's wash runs
   through it as the body's does), and the sheet's 1 px ring along its top and round its corners. A wing's own pinned bar (its
   rooms, preview-wings-rows.css) pins just under that edge. Laptops (the frame's 1024 and wider); the hairline the bar showed once
   scrolled is not needed: the bar and the ground are one, as at rest. */
@media (min-width:1024px){
  .pv.pv-frame .pv-shell::before, .pv.pv-frame .pv-shell::after{content:''; grid-row:2; grid-column:2; align-self:start; position:sticky;
    z-index:17; pointer-events:none}
  .pv.pv-frame .pv-shell::before{top:74px; height:30px; margin:0 -1px; background:var(--canvas); background-attachment:fixed;
    -webkit-mask:linear-gradient(currentColor 0 10px, transparent 10px) top left / 100% 30px no-repeat,
      radial-gradient(circle at 21px 30px, transparent 20px, currentColor 20.5px) top left / 21px 30px no-repeat,
      radial-gradient(circle at 0 30px, transparent 20px, currentColor 20.5px) top right / 21px 30px no-repeat;
    mask:linear-gradient(currentColor 0 10px, transparent 10px) top left / 100% 30px no-repeat,
      radial-gradient(circle at 21px 30px, transparent 20px, currentColor 20.5px) top left / 21px 30px no-repeat,
      radial-gradient(circle at 0 30px, transparent 20px, currentColor 20.5px) top right / 21px 30px no-repeat}
  .pv.pv-frame .pv-shell::after{top:84px; height:20px; margin-top:8px; border-radius:var(--r-sheet) var(--r-sheet) 0 0; clip-path:inset(-1px -1px 0 -1px)}
  .pv.pv-paper.pv-frame .pv-shell::after{box-shadow:0 0 0 1px var(--line)}
  .pv.pv-frame .pv-local{top:85px}
  .pv.pv-frame.pv-scrolled .pv-top::after{opacity:0}
}

/* 11. The lotus and the names as one (his: "why has the logo in the navbar been shifted to the absolute left?"; v198 had set the
   lotus over the rail's icons and the names 160 further, over the sheet's edge, and nothing tied them). The names beside the lotus,
   as YouTube sets its mark and its name and as the phone's bar already does (10 between them): the lotus still centred over the
   rail's icons (its box its own 40, at their 41; the folded rail's 58), the names 10 after it; the field stays in the middle. */
@media (min-width:1024px){
  .pv .pv-top .pv-id-mark{width:40px; margin-left:18px}
  .pv.pv-flow:not(.pv-rail) .pv-top .pv-id-mark{margin-left:1px}
  .pv .pv-top-tx, .pv.pv-flow:not(.pv-rail) .pv-top-tx{margin-left:8px}
}

/* 12. (v209, item 14) The names at Regular: the 600 cuts of v203 left the house; the cover and the door drew Newsreader Display 400,
   the bar Newsreader Text 400 (--names, preview-home.css; Title exists only at 500 and 600). (v212 item 5, his word) Now Medium: the
   Title cut as the 500 of both (preview-home.css's @font-face). */

/* 13. A coloured strip on every card of the home and on every post (his: "can we add a color bar on each post where you have the
   name, date, and … where is it being targeted to? … I think that would add a lot of color and character to the homepage because
   currently it's too white … how far along … waiting on you … people in the house and messages, coming up … can go in a colored
   strip as well"). A strip says the wing a card comes from, in that wing's colour from v200's pieces (public/preview-theme.css 4):
   the home's cards by their own classes (Waiting on you, How far along and Coming up Planning's; People in the house the Family's;
   How is today?, the post box, From the two of us and Messages the home's; the newest photographs and a memory, Memories'); a post
   by the class it carries (pv-w-*, views/preview/feed.js stripOf); the house's own news (pvn-told) by the room its line leads to,
   as the house's wings are kept (views/preview/wings.js wingOf), else the home's. Drawn two ways for him, his pick "strip A"
   (21 Oct 2026, night): the card's head on a strip of its wing's tint, its label in the wing's ink (the other, a 4 px line of the
   wing's own colour across the top, taken out). Paper's alone. */
.pv.pv-paper :is(.pv-home :is(.pvh-today, .pv-fromus, .pv-compose, .pvo-messages), .pv-post.pv-w-home, .pvn-told){--s-hue:var(--w-home-hue); --s-tint:var(--w-home-tint); --s-ink:var(--w-home-ink)}
.pv.pv-paper :is(.pv-home :is(.pv-foryou, .pvf-coming, .pvx-lead), .pv-post.pv-w-plan,
  .pvn-told:has(.pvn-about a:is([href*="/plan"], [href*="/entry/"], [href*="/guests"], [href*="/people/"], [href*="/money"], [href*="/documents"], [href*="/notes"], [href*="/lists"]))){--s-hue:var(--w-plan-hue); --s-tint:var(--w-plan-tint); --s-ink:var(--w-plan-ink)}
.pv.pv-paper :is(.pv-home .pvo-people, .pv-post.pv-w-fam, .pvn-told:has(.pvn-about a:is([href*="/family"], [href*="/map"], [href*="/meet"]))){--s-hue:var(--w-fam-hue); --s-tint:var(--w-fam-tint); --s-ink:var(--w-fam-ink)}
.pv.pv-paper :is(.pv-post.pv-w-cel, .pvn-told:has(.pvn-about a:is([href*="/event"], [href*="/sangeet"], [href*="/invites"]))){--s-hue:var(--w-cel-hue); --s-tint:var(--w-cel-tint); --s-ink:var(--w-cel-ink)}
.pv.pv-paper :is(.pv-home :is(.pvo-memory, .pvx-lead:has(.pvx-lead-grid)), .pv-post.pv-w-mem, .pvn-told:has(.pvn-about a:is([href*="/photo"], [href*="/after"], [href*="/story"], [href*="/memories"])))
  {--s-hue:var(--w-mem-hue); --s-tint:var(--w-mem-tint); --s-ink:var(--w-mem-ink)}
/* the side's heads paint their own band (--tone-band, white on Paper) over their card's top: none, so either way's strip shows */
.pv.pv-paper .pv-home.pvo :is(.pvo-people, .pvo-messages).pv-sect.pv-sect.pv-sect > .pv-panel-top.pv-panel-top{background:none}

/* The head on its strip (:root keeps each rule over the one it moves, as the trial's switch did). The strip is the card's own ground down to --strip-h, so nothing is laid over the words; one strip for
   every card of the home, 48 tall with its label's line in its middle (at 14 or 15, as the line is 20 or 18), the card's body 16
   under it (at 64); a post's 72, its head (a face, a name, the day and who it is for: 44) 14 in, its words 16 under it (at 88).
   Measured per kind at 1512 (the side's and Coming up's heads sat 10 and 27 down, Waiting on you's 21, a post's 22): each kind's
   own top and gap set so all of them land on those lines, each rule over the one it moves (named beside it). A card that is one
   row (How is today?, From the two of us) is all head, so all strip; a photograph's card has no head and no strip. */
:root .pv.pv-paper.pv-paper :is(.pv-home :is(.pvh-today, .pv-fromus, .pv-compose, .pvo-messages, .pv-foryou, .pvf-coming, .pvx-lead, .pvo-people), .pv-post.pv-post)
  {background-image:linear-gradient(var(--s-tint) 0 var(--strip-h, 100%), transparent var(--strip-h, 100%))}
:root .pv.pv-paper.pv-paper.pv-paper :is(.pv-home :is(.pvh-today, .pv-fromus, .pv-compose, .pvo-messages, .pv-foryou, .pvf-coming, .pvx-lead, .pvo-people), .pv-post) :is(.pv-panel-h, .pvx-oh-q, .pvh-today-q, .pv-fromus-tx > em)
  {color:var(--s-ink)}   /* (over the home's own label colours, up to 0-8-0) */
:root .pv.pv-paper .pv-post.pv-post{--strip-h:72px; padding-top:12px}
:root .pv.pv-paper .pv-post.pv-post > .pv-post-head{margin-bottom:32px}
:root .pv.pv-paper .pv-post.pv-post > .pv-pinrow{margin-bottom:4px}
:root .pv.pv-paper .pv-post.pvx-roomscard.pvx-roomscard{padding-top:16px}   /* (its head is 40, not 44: 16 above and below it) */
:root .pv.pv-paper .pv-post.pvx-roomscard.pvx-roomscard > .pv-post-head{margin-bottom:32px}
:root .pv.pv-paper .pv-home :is(.pv-foryou, .pvo-people, .pvo-messages, .pvf-coming, .pvx-lead, .pv-compose){--strip-h:48px}
:root .pv.pv-paper .pv-home .pv-sect.pv-foryou.pv-foryou{padding-top:8px}
:root .pv.pv-paper .pv-home .pv-sect.pv-foryou.pv-foryou > .pv-panel-top{margin-bottom:24px}
:root .pv.pv-paper .pv-home.pvo :is(.pvo-people, .pvo-messages).pv-sect.pv-sect.pv-sect > .pv-panel-top.pv-panel-top{padding-top:12px; margin-bottom:16px}   /* (over the side's own head, .pv .pvo :is(.pv-sidecol > …) > .pv-panel-top, 0-8-0) */
:root .pv.pv-paper .pv-home :is(.pvf-coming, .pvx-lead).pv-sect.pv-sect, :root .pv.pv-paper .pv-home .pvx-lead.pvx-lead{padding-top:12px}
:root .pv.pv-paper .pv-home :is(.pvf-coming, .pvx-lead) > :is(.pv-panel-top, .pvx-lead-top){margin-bottom:24px}
:root .pv.pv-paper .pv-home .pv-compose.pv-compose.pv-compose{padding-top:12px}   /* (over .pv .pv-home.pvn .pv-feedcol > .pv-compose:not(.is-open), 0-6-0) */
:root .pv.pv-paper .pv-home .pv-compose > .pvx-oh-q{margin-bottom:32px}

/* 14. You in the rail (his: "I would also like the your page, and … maybe settings on the left navbar as well. I know it's there on
   the right hand side, but maybe something on the left hand side too"): views/preview/kit.js nav, a hairline under Rooms and The
   log, then Your page, your face its mark (22, where a room's mark is), and Settings (Your details for whoever does not run the
   house); the folded rail shows the face and the gear */
.pv .pv-nav .pv-you-face{display:inline-grid; place-items:center; flex:none; width:22px; height:22px}
.pv .pv-nav .pv-you-face > *{width:22px; height:22px; min-width:0; font-size:12px; line-height:22px}

/* 15. The rail's fold button off the sheet's corner (v204; his close-up of 21 Oct 2026: "this icon is not right … the collapsible
   icon … has an issue"). The button sat 17 down the sheet's edge, inside the corner's 20 radius, and item 10's pinned edge (the
   ground outside the corner and the ring round it, z-index 17) was drawn over it: the arc cut through its circle and its arrow. It
   sits on the straight edge now, its middle 38 down (level with a wing's pinned bar's words), and over the pinned edge, so the edge's
   line runs behind it as a bead on a thread. */
@media (min-width:1024px){
  .pv.pv-flow.pv-bar-js .pv-bar-k{z-index:18}
  .pv.pv-flow .pv-bar-t.pv-bar-t{top:36px}
  /* the pinned ring's sides 2 past the corner's end, over the sheet's own: the join the button hid is one line now */
  .pv.pv-frame .pv-shell::after{height:22px}
}

/* 16. Documents, simply (v204; his word of 21 Oct 2026 after uploading his honeymoon's flights and hotel: "it's just a safe place to
   upload all the documents … the UI … spacing everywhere, buttons are not aligning … not following the design language of the new
   version"). views/preview/papers.js. The house's own parts only: the cards' one shadow, the rows' 15/500 and 13.5 grey, the
   buttons' 40, the wing's tint and ink (Planning's) on the kind badges. */
/* a kind badge: a document's first file's kind (PDF, JPG …) on Planning's tint, in a row's 34 box; a blank page where none is yet */
.pv .pvx-dbadge{display:grid; place-items:center; flex:none; width:34px; height:40px; border-radius:var(--r-sm); background:var(--hover);
  color:var(--ink-2); font-size:12px; font-weight:600; letter-spacing:.04em; line-height:1}
.pv .pvx-dbadge.is-none{background:none; border:1px solid var(--line); color:var(--ink-3)}
.pv .pvx-docs .pv-row-main{padding:12px 0}
.pv .pvx-docs :is(.pvx-oh-folder, .pvx-oh-empty).pv-card{padding-bottom:4px}   /* (the last row's own 12 under its words is the card's foot; it was 24 more) */
/* the drop place: the form's first thing, the whole of it a picker a file can be dropped on */
.pv .pvx-dz.pv-file{display:grid; justify-items:center; gap:4px; width:100%; padding:24px 16px 24px; border:1px solid var(--line-2);   /* (the fix round, his E.12) the one true drop place: a solid --line-2 edge on --paper */
  border-radius:var(--r-post); background:var(--paper); text-align:center; transition:border-color var(--dur-fast), background-color var(--dur-fast)}
.pv .pvx-dz .pvx-dz-ic{display:grid; place-items:center; width:44px; height:44px; margin-bottom:4px; border-radius:50%; background:var(--surface); color:var(--ink-2); box-shadow:var(--shadow-1)}
.pv .pvx-dz .pvx-dz-t{max-width:100%; font-size:16px; font-weight:500; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pv .pvx-dz .pvx-dz-s{font-size:14px; color:var(--ink-2)}
@media (hover:hover){ .pv .pvx-dz.pv-file:hover{border-color:var(--ink-2)} }
.pv .pvx-dz.pv-file:focus-within{ outline-offset:2px}
.pv .pvx-dform{display:grid; gap:16px}
.pv .pvx-dform > .pv-grid2{margin:0}
.pv .pvx-dform .pv-actions{margin-top:4px}
/* a document's page: its acts in one row, all at the buttons' 40 (Add files, Edit, who sees it, ···) */
.pv .pvx-docs .pv-head-acts{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.pv .pvx-addfiles{display:contents}
.pv .pvx-addfiles-pick{position:relative; cursor:pointer}
.pv .pvx-addfiles-pick input{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer}
.pv .pvx-addfiles-pick:focus-within{ outline-offset:2px}
.pv .pvx-addfiles-go{display:none}
.pv .pvx-addfiles:has(input:valid) .pvx-addfiles-go{display:inline-flex}

.pv .pvx-seen > summary svg{width:18px; height:18px}
.pv .pvx-seen-says{display:inline-flex; align-items:center; gap:8px; min-height:40px; font-size:14px; color:var(--ink-2)}
/* its files: tiles of the cards' one shadow, the picture (or the page's kind) above, the name and its size under it */
.pv .pvx-dfiles{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:16px; margin:8px 0 0; padding:0; list-style:none}
.pv .pvx-dfile{position:relative; display:flex; flex-direction:column; padding:0; overflow:hidden; border-radius:var(--r-post)}
@media (hover:hover){ .pv.pv-paper .pvx-dfile:hover{box-shadow:var(--shadow-2)} .pv .pvx-dfile:hover .pvx-dfile-tx b{color:var(--wine)} }
.pv .pvx-dfile-a{display:flex; flex-direction:column; color:inherit; text-decoration:none}
.pv .pvx-dfile-a:focus-visible{ outline-offset:-2px; border-radius:var(--r-post)}
.pv .pvx-dfile-pic{display:grid; place-items:center; aspect-ratio:4 / 3; background:var(--hover); overflow:hidden}
.pv .pvx-dfile-pic img{width:100%; height:100%; object-fit:cover}
/* a page drawn plainly: a sheet with three lines and its kind */
.pv .pvx-dfile-sheet{position:relative; display:grid; align-content:start; gap:8px; width:46%; aspect-ratio:3 / 4; padding:16% 12% 0; border-radius:6px;
  background:var(--surface); box-shadow:var(--shadow-1)}
.pv .pvx-dfile-sheet > i{display:block; height:4px; border-radius:6px; background:var(--hover)}
.pv .pvx-dfile-sheet > i:nth-child(2){width:80%} .pv .pvx-dfile-sheet > i:nth-child(3){width:60%}
.pv .pvx-dfile-sheet > .pvx-dbadge{position:absolute; left:12%; bottom:12%; width:auto; height:22px; padding:0 8px}
.pv .pvx-dfile-tx{display:flex; flex-direction:column; gap:0px; padding:12px 48px 12px 16px; min-width:0}
.pv .pvx-dfile-tx b{font-size:16px; font-weight:500; line-height:1.4; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pv .pvx-dfile-tx em{font-style:normal; font-size:14px; line-height:1.45; color:var(--ink-2)}
.pv .pvx-dfile > .pv-menu{position:absolute; right:8px; bottom:12px}
.pv .pvx-dnone{margin-top:8px; padding:8px 0}
.pv .pvx-dnotes{margin-top:32px}
/* the viewer: the file the room's width, the window's height less the head's; a step to the file before and after */
.pv .pvx-dsteps{display:inline-flex; align-items:center; gap:4px; margin-left:4px}
.pv .pvx-dsteps-n{min-width:52px; font-size:14px; color:var(--ink-2); text-align:center}
.pv .pvx-dstep.is-off{opacity:.35}
.pv .pvx-dview{margin-top:8px; border-radius:var(--r-post); overflow:hidden; background:var(--hover); box-shadow:var(--shadow-1)}
.pv .pvx-dview-slot.has-frame{height:max(520px, calc(100vh - 300px))}
.pv .pvx-dview-frame{display:block; width:100%; height:100%; border:0; background:var(--hover)}
.pv .pvx-dview-open{display:grid; justify-items:center; gap:12px; padding:32px 16px; text-align:center}
.pv .pvx-dview-open > .pvx-dbadge{width:48px; height:58px; font-size:12px}
.pv .pvx-dview-open > p{max-width:100%; font-size:16px; font-weight:500; color:var(--ink); overflow-wrap:anywhere}
.pv .pvx-dview[data-view="image"], .pv .pvx-dview[data-view="video"]{display:grid; place-items:center; padding:16px}
.pv .pvx-dview-img{display:block; max-width:100%; max-height:calc(100vh - 300px); border-radius:var(--r-media)}
.pv .pvx-dview[data-view="audio"], .pv .pvx-dview[data-view="other"]{padding:24px}
@media (max-width:1023px){
  .pv .pvx-docs [data-newtab]{display:none}   /* (a phone opens it in its own reader, "Open the PDF" below) */
  .pv .pvx-dfiles{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px}
  .pv .pvx-dfile-tx{padding:8px 48px 12px 12px}
  .pv .pvx-dfile > .pv-menu{right:4px; bottom:8px}
}

/* 17. A vendor's three stages (v204; his word of 21 Oct 2026: "it's either discussion, booked, or rejected. That's it"): views/preview/
   people.js. The stage's chip is its menu's button for whoever keeps Vendors, a small arrow on it, pressed to the three stages (the
   one it is at ticked); 44 to press on a phone by an ::after, as the house's small controls; the rejected folded under each job. */
.pv .pvl-stage > summary.pvl-stage-btn{display:inline-flex; position:relative; cursor:pointer; border-radius:var(--r-sm)}
.pv .pvl-stage > summary.pvl-stage-btn::after{content:""; position:absolute; inset:-11px -6px}
.pv .pvl-stage > summary.pvl-stage-btn .pv-chip{gap:4px; padding-right:4px}
.pv .pvl-stage > summary.pvl-stage-btn .pv-chip svg{opacity:.7}
@media (hover:hover){ .pv .pvl-stage > summary.pvl-stage-btn:hover .pv-chip{box-shadow:inset 0 0 0 1px var(--line)} }
.pv .pvl-stage > summary.pvl-stage-btn:focus-visible{ outline-offset:2px}
.pv .pvl-stage[open] > summary.pvl-stage-btn .pv-chip{box-shadow:inset 0 0 0 1px var(--ink-2)}
/* a menu whose choices are ticked where they stand: the unticked keep the tick's room, so the words start level */
.pv :is(.pvl-stage, .pvx-seen) .pv-menu-pop :is(button, a):not(:has(svg))::before{content:""; flex:none; width:18px}
/* on a vendor's page, beside Edit: the chip at the buttons' 40 */
.pv .pv-head-acts > .pvl-stage > summary.pvl-stage-btn{min-height:40px; align-items:center}
.pv .pv-head-acts > .pvl-stage > summary.pvl-stage-btn .pv-chip{min-height:40px; padding:0 12px 0 12px; border-radius:var(--r-ctl); font-size:16px; font-weight:500}
/* the rejected options, folded at the foot of their job */
.pv .pvl-group > .pvl-rej{margin:0; border-top:1px solid var(--line)}
.pv .pvl-group > .pvl-rej > summary{padding:12px 24px; font-size:14px; color:var(--ink-2)}   /* (its words on the names' line, the rows' 24 in) */
.pv .pvl-group > .pvl-rej > .pv-fold-in{padding-top:0}   /* (the first row's own 10 above its name, as under the job's line) */
.pv .pvl-group > .pvl-rej .pv-vrow-main b{color:var(--ink-2)}

/* 18. A post's head on one line, and its strip as tall as its head (v205; his word of 21 Oct 2026, night, of a post on his home whose
   circles ran to a third line under a strip that stopped at 72: "the highlight is not covering the entire thing … after 4 days ago,
   we can maybe put a dot and then we can show who is it for … just show one of them and the others can be in a drop down menu so
   that it fits in one line and then the highlight is not cutting"). The line under the name is one line: the time, a dot, who it is
   for, and where that is more than one circle, the first and "+N", the house's own menu (views/preview/feed.js audMeta); what is
   still too long for a phone ends in an ellipsis before the "+N". And a post's strip is no longer the card's ground down to a fixed
   72 (13): it is the head's own ground, and the pinned line's over it, the card's 14 above the head now the head's own, so whatever
   the head holds, the strip holds. The home's other cards keep 13's. */
.pv .pv-post-head .pv-meta{flex-wrap:nowrap; min-width:0; white-space:nowrap}
.pv .pv-post-head .pv-meta > *{flex:none}
.pv .pv-post-head .pv-meta > .pv-aud-meta{flex:0 1 auto; min-width:0}
.pv .pv-post-head .pv-aud-meta > span{min-width:0; overflow:hidden; text-overflow:ellipsis}
.pv .pv-aud-more{margin-left:0px}
.pv .pv-aud-more > .pv-aud-n{position:relative; display:inline-flex; align-items:center; height:20px; margin-block:-2px; padding:0 8px; border-radius:12px; background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line); font-size:13px; font-weight:500; line-height:1; color:var(--ink-2); cursor:pointer}
.pv .pv-aud-more > .pv-aud-n::after{content:""; position:absolute; inset:-12px -8px}   /* (44 to press on a phone, as the house's small controls) */
@media (hover:hover){ .pv .pv-aud-more > .pv-aud-n:hover{color:var(--ink); box-shadow:inset 0 0 0 1px var(--line)} }
.pv .pv-aud-more[open] > .pv-aud-n{color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink-2)}
.pv .pv-aud-more > .pv-aud-n:focus-visible{ outline-offset:2px}
.pv .pv-forwho-pop{min-width:240px; white-space:normal; cursor:default}
.pv .pv-forwho-pop ul{margin:0; padding:0 0 0px; list-style:none}
.pv .pv-forwho-pop li{display:flex; align-items:center; gap:8px; min-height:36px; padding:4px 8px; font-size:14px; line-height:1.35; color:var(--ink)}
:root .pv.pv-paper.pv-paper.pv-paper .pv-post.pv-post.pv-post{background-image:none; padding-top:0}
/* (v209, A10b: his word of 23 Oct, "bring back the colour … a great distinguisher about what the post is about": v205's head keeps its
   page's tint; Facebook was the guide for neatness, not a copy) */
:root .pv.pv-paper .pv-post.pv-post > :is(.pv-pinrow, .pv-post-head){background:var(--s-tint)}
:root .pv.pv-paper .pv-post.pv-post > :is(.pv-pinrow, .pv-post-head):first-child{padding-top:12px; border-radius:var(--r-post) var(--r-post) 0 0}
:root .pv.pv-paper .pv-post.pv-post > .pv-pinrow{margin-bottom:0; padding-bottom:4px}
:root .pv.pv-paper .pv-post.pv-post > .pv-post-head{margin-bottom:16px; padding-bottom:12px}
:root .pv.pv-paper .pv-post.pvx-roomscard.pvx-roomscard > .pv-post-head{margin-bottom:16px; padding-block:16px}   /* (its head is 40: 16 above and below it, as 13 had it) */
/* (v210, item 3: his word of 23 Oct, "a white strip which should not be there") a post whose pictures follow its head (a photographs
   post, views/preview/feed.js photoPost) has them start at the strip's bottom edge, full width: no white between */
:root .pv.pv-paper .pv-post.pv-post > .pv-post-head:has(+ .pv-media){margin-bottom:0}
:root .pv.pv-paper .pv-post.pv-post > .pv-post-head + .pv-media{margin-top:0}   /* (over preview-home.css's 12) */
/* (v210, item 4: his word of 23 Oct, "a lot of space between the colored strip and the text in a post") a post's first line of words
   stands about its side inset under the strip (24 from 768: the head's 16, then 2, the line's top 20 under it, its letters 24), every kind alike:
   the words (pv-post-tx, 12 or 14 above them before), and the house's news's rows (pvx-roomrows, their words 30 under it before) */
:root .pv.pv-paper .pv-post.pv-post > .pv-post-head + .pv-post-tx{padding-top:0px}
:root .pv.pv-paper .pv-post.pvx-roomscard.pvx-roomscard > .pv-post-head:has(+ .pvx-roomrows){margin-bottom:4px}
:root .pv.pv-paper .pv-post.pvx-roomscard.pvx-roomscard > .pv-post-head + .pvx-roomrows{margin-top:0}
@media (max-width:1023px){   /* a phone's inset is 18: the line's top 14 under the strip, its letters 18 */
  :root .pv.pv-paper .pv-post.pv-post > .pv-post-head:has(+ .pv-post-tx){margin-bottom:8px}
  :root .pv.pv-paper .pv-post.pvx-roomscard.pvx-roomscard > .pv-post-head:has(+ .pvx-roomrows){margin-bottom:0px}
}

/* 19. Every list's head in its page's colour (v205; his word of 21 Oct 2026, night, on To do: "can't we give the table headers the
   colors of that particular page? For example, there are 9 late tasks which are due, so that has to go in red or something … the
   top column, row header, or table header is just not looking nice. Try and fix that on every page"). On Paper a list's head was
   white over a hairline (preview-finesse.css, v200: bands). Each takes its page's wing now, as a home card's strip does (13): the
   wing's tint, its words in the wing's ink, no hairline under it; a page in no wing (the log, your page, Settings) the home's, as
   the home's cards in no wing; the late band the house's alarm (--danger on its tint). Every kind of head the dress lists, on every
   page: To do's groups and folds, Questions & decisions', Guests' and its register's, Vendors' jobs, Lists' groups, Money's panels
   and lines, Documents' folders, Family's two families, the head row of a table that is its card's list. The home keeps its strips
   (13). */
.pv.pv-paper{}
.pv.pv-paper:is([data-wing="cel"], [data-wing="fam"], [data-wing="plan"], [data-wing="mem"]){}
.pv.pv-paper :is(.pv-card.pv-panel > .pv-panel-top, .pv-card.pvp-group > .pvp-group-h, .pv-card.pvp-ask > .pvp-ask-h, .pv-card.pv-listcard > .pv-moneygroup-h,
  .pv-card.pv-listcard > .pv-vhead, .pv-card.pv-fold > summary, .pv-card.pv-pad > h2.pv-panel-h:not(:not(input[type=hidden]) ~ *), .pvr-fam .pvm-head, .pv-hhs-head,
  .pv-card.pvq-attn > .pvq-attn-top, .pv-card.pv-listcard > .pv-tablewrap > .pv-table thead th):not(.pv-home *){background:transparent; border-bottom-color:transparent; color:var(--ink-2)}
/* (a table set inside a card's body, Vendors' side by side, Money's two families, Settings' who sees what: its head row is not the
   card's head, and a tint there would be a box inside the card, his rule 43: left as it is) */
.pv.pv-paper :is(.pv-card.pv-panel > .pv-panel-top, .pv-card.pv-listcard > :is(.pv-vhead, .pv-moneygroup-h), .pvr-fam .pvm-head, .pv-hhs-head, .pv-card.pvq-attn > .pvq-attn-top):not(.pv-home *)
  :is(h2, h3, h4, .pvl-g, .pv-moneygroup-h > span:first-child){color:var(--ink-2)}   /* (the band's own name over each room's colour for it; its quieter words, an em, a count, keep theirs) */
.pv.pv-paper.pv-paper .pvr-plan :is(.pv-card.pvp-group.is-late > .pvp-group-h, .pv-card.pvp-group.is-late > .pvp-group-h > span, .pv-card.pvp-fold[id="late"] > summary):not(.pv-home *)
  {background:var(--danger-tint); color:var(--danger)}   /* (over the band's own rule above, 0-7-2) */

/* 20. The Tools panel's foot (v205; his: "in the dropdown of Tools, there's a spacing issue at the end, or after View"): the quiet
   sheet gave a panel that ends with its chips as much room under them as over them, and the finesse sheet's card inset (24 over, 0
   under) took it back, so View's chips sat on the panel's edge. The foot is the top's again, the card's inset; a panel that ends with
   its list of acts keeps the list's own rows. */
.pv.pvx-quiet .pv-tools-in:not(:has(> .pv-tools-acts)){padding-bottom:var(--card-in)}

/* 21. A cover's words on one soft gradient (v205; his word of 21 Oct 2026 on Memories' door: "why is this in chunks? It should be a
   one uniform gradient, which is dissolved towards the top … that particular gradient is not too strong … dissolving as it's going
   up. So it can be finished by halfway"). The foot drew two straight ramps, --scrim-62 over --scrim-42: 78 % dark at the foot, a knee
   at 62 % of its height and a hard top edge 132 up the cover's 240, which the eye reads as a box. One ramp now on a cosine (no knee,
   no edge: it leaves the foot and arrives at nothing level), 60 % at the very foot, gone by half the cover's height (the foot is at
   least that tall); the words keep a soft shadow of the same ink, so they still read on a light photograph. Every cover with words
   (Memories', Celebrations', a day's) is the one component (kit.js cover): one fix. */
.pv .pv-cover-foot{min-height:50%; padding-top:24px; background:var(--scrim-ease)}   /* (the ramp and the shade are the theme's tokens) */
.pv .pv-cover .pv-cover-foot > *{text-shadow:var(--scrim-words)}

/* 22. Family's door and its two sides (v205; his word of 21 Oct 2026: "there are two families: the word 'Family' I can see at the top
   navbar and then at the header … If you click the bride, nothing happens. It just scrolls down to the bride’s side … if you click only
   the bride, we either only show her and hide the groom, and vice versa"): Family opens on its door, everyone, with no rooms' row (wings.js
   DOOR_OF, kit.js pageHead), as Planning's; on its cover each side's faces and name lead to that side's own room, as a tile does on
   Planning's door; a side's room is that family alone (people.js familyRoom `only`), the page's width, its people in rows on its
   middle (the two families' shared rows, Room 4's R4.4, are for the two standing side by side) */
.pv .pv-cover.is-faces a.pv-cover-side{display:block; margin:-12px; padding:12px; border-radius:var(--r-ctl); color:inherit; text-decoration:none}
@media (hover:hover){ .pv .pv-cover.is-faces a.pv-cover-side:hover{background:var(--hover)} .pv .pv-cover.is-faces a.pv-cover-side:hover .pv-cover-side-n{color:var(--wine)} }
.pv .pv-cover.is-faces a.pv-cover-side:focus-visible{ outline-offset:2px}
.pv .pv-cover.is-faces .pv-cover-side-n > svg{margin-left:4px; vertical-align:-2px; color:var(--ink-2)}   /* (a way on, as a From here row's chevron: rule 37) */
.pv .pvr-fam .pvm-sides.is-one{grid-template-columns:minmax(0, 1fr)}
.pv .pvr-fam .pvm-sides.is-one > .pvm-side, .pv .pvr-fam .pvm-sides.is-one .pvm-group{display:block}
.pv .pvr-fam .pvm-sides.is-one .pvm-group > .pvm-people{display:flex}
.pv .pvr-fam .pvm-sides.is-one .pvm-gap{display:none}

/* 23. Memories' cover as the two of them choose it, and Family's door's other two rooms (v205; his yes of 22 Oct 2026 to sheet 10, "Yes,
   build the cover"; and his question the same night, "the top navbar is gone. But how do we go to maps and let's meet where are
   those?", his pick "two tiles under the sides"). "Change the picture" under the cover at its right edge, as on a day's page
   (views/preview/photos.js memCoverActs), its choices their photographs by album in the house's dialog, a square each, the one chosen
   ringed in wine. Family's door keeps its rooms' bar (his, of two tiles under the sides: "let's keep it at the top only at the navbar.
   Because the current position is not working out"), the wing's name left out, as its heading says it (kit.js localNav `door`): the
   rooms at the right on a laptop, where every room of the wing has them; on a phone the same links in the bar's row, at its left,
   rather than its menu, which would be named Family over Family. */
.pv .pvx-memcov-f > .pv-hint{margin:0 0 16px}
.pv .pvx-memcov-al + .pvx-memcov-al{margin-top:16px}
.pv .pvx-memcov-al > h3{margin:0 0 8px; font-size:14px; font-weight:500; line-height:20px; color:var(--ink-2)}
.pv .pvx-memcov-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:8px}
.pv .pvx-memcov-ph{display:block; aspect-ratio:1; padding:0; border:0; border-radius:var(--r-ctl); overflow:hidden; background:var(--hover); cursor:pointer}
.pv .pvx-memcov-ph > img{display:block; width:100%; height:100%; object-fit:cover}
@media (hover:hover){ .pv .pvx-memcov-ph:hover{box-shadow:0 0 0 2px var(--line)} }
.pv .pvx-memcov-ph[aria-pressed="true"]{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--wine)}
.pv .pvx-memcov-ph:focus-visible{ outline-offset:2px}
@media (min-width:1024px){ .pv .pv-local.is-door{justify-content:flex-end} }
@media (max-width:1023px){
  .pv .pv-local.is-door > .pv-chips.pv-wingrow{display:flex; flex-wrap:nowrap; gap:0 24px; min-width:0; margin:0; overflow-x:auto; scrollbar-width:none; -webkit-mask-image:none; mask-image:none}
  .pv .pv-local.is-door > .pv-chips.pv-wingrow > a{flex:none; min-height:44px; padding:0; border:0; border-radius:0; background:none; font-size:14px; font-weight:400; color:var(--ink-2)}
}

/* 24. The hierarchy round, round 1 (22 Oct 2026; docs/hierarchy-2026-10-22/START-HERE.md items 1.2 and 2.1–2.3, his calls of that day).
   A day's one status, the house's status pill, at the end of its when-and-where line, on a line of its own when the line is full (a
   phone): "Time and place not confirmed yet" in the waiting pill's grey, "… confirmed" in the done pill's green. What to wear's
   colours, each its dot and its name ("without relying on colour alone"): on the day's page, its card and Today. The Colours ticks
   in the day's details, chips of the house's filter kind (34; 36 on touch, 44 to press); the picture's part as the details' first
   field. How far along as the home's side's first card, its figures each a row (judge 1). */
.pv .pvx-2d-peak .pv-daycard-when{column-gap:12px; row-gap:8px; align-items:center}
.pv .pvx-2d-peak .pvd-status{display:inline-flex}
.pv .pvd-sws{display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; margin-top:8px}
.pv .pvd-swn{display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:500; font-style:normal; line-height:18px; color:var(--ink-2); white-space:nowrap}
.pv .pvd-sw{display:inline-block; flex:none; width:14px; height:14px; border-radius:50%; background:var(--sw); box-shadow:inset 0 0 0 1px var(--line)}   /* a white or ivory dot has its edge on white */
.pv .pv-daycard-line .pvd-sws{margin-top:4px}
.pv .pvx-ra-dayfacts .pvd-sws{margin:4px 0 0px}
.pv .pvd-colours{border:0; padding:0; margin:0; min-width:0}
.pv .pvd-colours > legend{float:left; width:100%; padding:0; margin:0 0 8px; font-size:14px; font-weight:500; color:var(--ink-2)}
.pv .pvd-colour-pick{clear:both; display:flex; flex-wrap:wrap; gap:8px}
.pv .pvd-colour{position:relative; display:inline-flex; align-items:center; gap:8px; min-height:34px; padding:0 12px 0 8px; border:1px solid var(--line); border-radius:999px;
  background:transparent; font-size:14px; font-weight:500; line-height:20px; color:var(--ink); cursor:pointer}
.pv .pvd-colour:has(input:checked){background:var(--wine-tint); border-color:var(--wine); color:var(--wine)}
.pv .pvd-colour:has(input:focus-visible){outline:2px solid var(--wine); outline-offset:2px}
.pv .pvd-colour:has(input:disabled){opacity:.45; cursor:not-allowed}
@media (pointer:coarse){ .pv .pvd-colour{min-height:36px} .pv .pvd-colour::after{content:''; position:absolute; inset:-4px 0} }
.pv .pvd-pic.pvx-ownpic{display:block; padding:0; margin:0 0 16px}
.pv .pvd-pic .pvd-pic-k{margin:0; font-size:14px; font-weight:500; color:var(--ink-2)}
.pv .pvd-pic .pv-hint{margin:4px 0 0}
.pv .pvd-pic-acts{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-top:8px}
.pv .pvd-pic .pvx-ownpic-f{justify-content:flex-start}
/* the space after the way makes the other 4 */
/* Judge 1 of the round (22 Oct 2026, docs/hierarchy-2026-10-22/round-1/judge-1.md, three revisions). 1. The Celebrations cards say a
   day's status with the same pill as its page, under the place, where the sentence was (rule 7). 2. Under 640 a day's ways in two
   columns of two with no dots, each column as wide as its widest way ("Add the days to my calendar" takes 190 of a phone's 326),
   so no line ends in a hanging dot (rules 46, 50); at 640 and up the dots as they are. 3. How far along's figures each a row, the
   figure (20/600) then its words (14) on one line, on one baseline, 8 between rows (rule 46). */
.pv .pv-daycard .pvd-status{display:flex; margin-top:4px}   /* 8 under the place (the card's 4 and these 4), as the hero's pill under its line */
@media (max-width:639px){
  .pv .pvx-2d-peak .pvx-2d-ways{display:grid; grid-template-columns:repeat(2, minmax(0, max-content)); gap:8px 16px}
  /* no dot to keep with its way here; a way wraps only on a phone narrower than its column */
}
.pv .pv-sidecol .pvx-lead .pvx-ready{grid-template-columns:minmax(0, 1fr); gap:8px}
.pv .pv-sidecol .pvx-lead .pvx-ready > div{flex-direction:row-reverse; justify-content:flex-end; align-items:baseline; gap:4px}   /* the figure (dd) before its words (dt), packed left */
.pv .pv-sidecol .pvx-lead .pvx-ready dd{font-size:20px; line-height:24px}
.pv .pv-sidecol .pvx-lead .pvx-ready dt{font-size:14px; line-height:20px; color:var(--ink-2)}

/* 25. The hierarchy round, round 2 (22 Oct 2026; docs/hierarchy-2026-10-22/START-HERE.md, "The brief for round 2").
   1.6 A first visit's welcome, by who has come (views/preview/next.js welcomeCard): one card under the greeting (on her desk, under
   its title), its heading the sentence of who they are here, one line of what the house is for them, then the actions on one row that
   wraps: the one filled action by role, the walk a quiet link, and Got it a quiet button at the row's end. (v209, item 11: the line
   names the rooms they may open; the walk left the card.) */
.pv .pvx-welcome{display:grid; gap:4px}
.pv .pvx-welcome-h{margin:0; font-size:16px; line-height:24px; font-weight:600; color:var(--ink); text-wrap:balance}
.pv .pvx-welcome-p{margin:0; max-width:62ch; font-size:16px; line-height:1.5; color:var(--ink-2); text-wrap:pretty}
.pv .pvx-welcome-acts{display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; margin-top:4px}
.pv .pvx-welcome-acts > .pvx-welcome-done{margin:0 0 0 auto}
/* (v209, item 11: the first visit, by role) the rooms they may open, each an inline link (underlined, rule 37); Got it a quiet button,
   44 tall to press, so the one filled action leads (the walk left the card); on a phone's browser, one line under the actions: this
   phone's first step and How, drawn hidden and shown by public/preview-quiet.js */
.pv .pvx-welcome-rooms a, .pv .pvx-welcome-phone a{color:var(--ink); font-weight:500; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
.pv .pvx-welcome-rooms a:hover, .pv .pvx-welcome-phone a:hover{color:var(--wine)}
.pv .pvx-welcome-acts .pvx-welcome-got{min-height:44px; padding:0 16px; font-size:14px}
.pv .pvx-welcome-phone:not([hidden]){display:flex; align-items:center; gap:8px; margin:0; font-size:14px; line-height:20px; color:var(--ink-2)}
.pv .pvx-welcome-phone > svg{flex:none; color:var(--wine)}
.pv .pvx-welcome-phone-h{font-weight:500; color:var(--ink)}
.pv .pvx-welcome-phone > a{flex:none; display:inline-flex; align-items:center; min-height:44px; margin:-12px 0}
/* 3.1 and 3.2 Planning's door (views/preview/plan.js planningDoor, his call of 22 Oct: "the compact illustration option, with
   actionable 'Next' content above it"): the head, Next (a card of rows, the house's list head), then the rooms (the desk piece over
   them went with the old paintings: the cleanup, 27 Oct 2026). */
.pv .pvr-plandoor .pvx-next{margin:0 0 16px}
/* 1.7 How is today? kept, compact; the next action stronger (his direction of 22 Oct: "keep it. It is an intentional part of the
   couple's experience. Keep it compact and give the next action stronger emphasis"). On a phone from 375 the other's answer stands
   under the question, beside the three answers, so the card is one row (68 tall at 390; it was 96, the answer on a row of its own);
   narrower, as it was. And the one thing asked of you (views/preview/feed.js forYou, open) puts its action straight under its words
   on a phone, who asked and when it is due under the action, so its one filled button is on the first screen. */
@media (min-width:375px) and (max-width:1023px){
  .pv .pv-home.pvn .pvn-door > .pvh-today.pvh-today.pv-card{display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"q f" "s f"; column-gap:12px; row-gap:0px; align-items:center}
  .pv .pv-home.pvn .pvn-door > .pvh-today.pv-card > .pvh-today-q{grid-area:q; align-self:end}
  .pv .pv-home.pvn .pvn-door > .pvh-today.pv-card > .pvh-today-f{grid-area:f}
  .pv .pv-home.pvn .pvn-door > .pvh-today.pv-card > .pvh-today-said{grid-area:s; align-self:start; margin:0}
}
@media (max-width:1023px){
  .pv .pv-home .pvh-ask .pv-todo{display:flex; flex-direction:column}
  .pv .pv-home .pvh-ask .pv-todo > .pv-actions{order:1; margin-top:12px}
  .pv .pv-home .pvh-ask .pv-todo > .pvo-todo-meta{order:2; margin-top:12px}
}
/* Judge 1's revisions (docs/hierarchy-2026-10-22/round-2/judge-1.md).
   2, 5: (v209, item 7) retired with the band: a room's head draws its line drawing again. */
/* 3, 5: a list's bar on a phone is one line, 44 tall, as v206 had it: its sort words ("by when they are due", "where they stand")
   are Tools' View's, so a phone leaves them there; with To do's Everyone | Mine the count leaves too (the sentence over it says it,
   and each band says its own): the switch at the left, Tools at the right, nothing under them at 320. */
@media (max-width:1023px){
  .pv .pv-listbar-by{display:none}
  .pv .pvr-plan .pv-listbar:has(> .pvp-switch) > .pv-listbar-n{display:none}
  .pv .pvr-plan .pv-listbar:has(> .pvp-switch) > .pv-tools-on{grid-row:2}
}
/* 9: a day's status pill on a phone of 480 and under is a line of its own at every text size, its words wrapping inside it, so
   "Time and place not confirmed yet" never runs past the edge (at 120 % it ran 17 past at 360) */
@media (max-width:480px){
  .pv .pvx-2d-peak .pvd-status{flex-basis:100%; min-width:0}
  .pv .pvx-2d-peak .pvd-status > *{max-width:100%; height:auto; white-space:normal; text-align:left}
}
/* 10: a row's title on a phone is two lines at most at every text size: 56 characters hold two lines at 390 (views/preview/kit.js
   rowTitle); where a 320 screen or larger text would take a third, the second line ends in "…" (the whole is on the thing's own
   page). To do's rows, a day's page's and Next's rows, the home's one thing. */
@media (max-width:1023px){
  .pv .pvr-plan :is(.pvp-row, .pvp-arow) a.pvp-t:not(.pvp-go), .pv .pvr-plan a.pvp-t.pvp-go > span, .pv .pv-row-t, .pv .pv-home .pvh-ask .pv-todo-tx{
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden}
}
/* 4: on a phone under 375 a room's head stands 24 over its list's bar (32 at 375 and over), so To do's first row is on a 320 screen's
   first screen (it was 3 under it) */
@media (max-width:374px){
  .pv .pv-head:has(+ .pv-listbar), .pv .pv-head:has(+ .pv-findbar + .pv-listbar), .pv .pv-head:has(+ .pv-housebar.is-room){margin-bottom:24px}
}
/* Item 1 of judge 1 (his yes of 22 Oct 2026): How is today? under the one thing asked of you when something waits
   (views/preview/next.js): the same card and rhythm as under the greeting (preview-finesse.css 1090–1096 and the compact row above),
   16 under the one thing, 16 over what follows. */
.pv .pv-home.pvn .pvh-ask + .pvh-today.pv-card{margin:0 0 var(--card-gap); padding:12px 12px 12px 16px; gap:8px 16px}   /* (v209, item 6: the gap) */
.pv .pv-home.pvn .pvh-ask + .pvh-today.pv-card .pvh-today-said{margin-left:auto}
@media (max-width:1023px){ .pv .pv-home.pvn .pvh-ask + .pvh-today.pv-card .pvh-today-said{flex:1 1 100%; margin-left:0} }
@media (min-width:375px) and (max-width:1023px){
  .pv .pv-home.pvn .pvh-ask + .pvh-today.pvh-today.pv-card{display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"q f" "s f"; column-gap:12px; row-gap:0px; align-items:center}
  .pv .pv-home.pvn .pvh-ask + .pvh-today.pv-card > .pvh-today-q{grid-area:q; align-self:end}
  .pv .pv-home.pvn .pvh-ask + .pvh-today.pv-card > .pvh-today-f{grid-area:f}
  .pv .pv-home.pvn .pvh-ask + .pvh-today.pv-card > .pvh-today-said{grid-area:s; align-self:start; margin:0}
}

/* The hierarchy round's round 3 (docs/hierarchy-2026-10-22/START-HERE.md, "The brief for round 3", 22 Oct 2026).
   6.1, 6.5, 6.4 Memories' door (views/preview/photos.js memoriesDoor): under the cover, the newest photographs square, three a row on a
   phone and six in a wide window, 4 apart as the home's grid on a phone; then a few albums, Photographs' own tiles (.pvr-pic, their gaps),
   two on a phone, three on a tablet, four from 1000; the rooms 32 under them; the cover's picture part in a fold under the rooms */
.pv .pvr-memdoor .pvx-memnew{margin:0}
.pv .pvr-memdoor .pvx-memnew-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:4px}
.pv .pvr-memdoor .pvx-memnew-grid > .pv-tile{flex:none; max-width:none; aspect-ratio:1}
@container (min-width:720px){ .pv .pvr-memdoor .pvx-memnew-grid{grid-template-columns:repeat(6, minmax(0, 1fr)); gap:4px} }
.pv .pvr-memdoor .pvx-memalb > .pvq-sec{margin-top:32px}
.pv .pvr-memdoor .pvx-memalb-row > .pv-album:nth-child(n+3){display:none}
@container (min-width:720px){ .pv .pvr-memdoor .pvx-memalb-row > .pv-album:nth-child(3){display:block} }
@container (min-width:940px){ .pv .pvr-memdoor .pvx-memalb-row{grid-template-columns:repeat(4, minmax(0, 1fr)); gap:32px 16px}   /* (judge 1's 6) from 940: the door's column at 1294 is 970 */
  .pv .pvr-memdoor .pvx-memalb-row > .pv-album:nth-child(4){display:block} }
.pv .pvr-memdoor :is(.pvx-memnew, .pvx-memalb) + .pv-roomtiles{margin-top:32px}
.pv .pvr-memdoor .pvx-memcov-fold{margin-top:24px}
.pv .pvr-memdoor .pvx-memcov-fold .pvd-pic.pvx-ownpic{margin:0}
/* 7.1 Family's "this week" row (views/preview/people.js weekRow): under the cover, the faces (32) and one line in the house's detail
   type, its way on at the end; on a phone the faces over the line, the line and its link wrapping under them */
.pv .pvr-fam .pvm-week{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0 0 24px}
.pv .pvr-fam .pvm-week-t{flex:1 1 220px; min-width:0; margin:0; font-size:14px; line-height:20px; color:var(--ink-2)}
.pv .pvr-fam .pvm-week-more{flex:none; font-size:14px; line-height:20px}
/* (judge 1's 3) the way on is the line's last words, inside it: on a phone it runs on after the sentence, 44 to press (two lines at most:
   two long names are the count there, people.js weekRow); on a wider screen the line is one and its way on stands at the right, as before */
.pv .pvr-fam .pvm-week-t > .pvm-week-more{display:inline-block; position:relative; padding:0; line-height:20px}   /* (judge 2's 1) its box the line's 20, so the 12 each way below make 44 */
.pv .pvr-fam .pvm-week-t > .pvm-week-more::after{content:''; position:absolute; inset:-19px -8px -5px}   /* 44 to press, most of it above: the chips' own press begins 5 under the line (12 each way met them by 7) */
.pv .pvr-fam .pvm-week-short{display:none}
@media (min-width:1024px){
  .pv .pvr-fam .pvm-week-t{display:flex; align-items:baseline; gap:12px}
  .pv .pvr-fam .pvm-week-s{flex:1 1 auto; min-width:0}
  .pv .pvr-fam .pvm-week-t > .pv-dot{display:none}
}
@media (max-width:1023px){ .pv .pvr-fam .pvm-week-long{display:none} .pv .pvr-fam .pvm-week-short{display:inline} }
/* 8.6 the phone's navigation, option A (his yes of 22 Oct 2026 to round 2's 4.6 sheet; views/preview/kit.js localNav, titleMenu): under 1024
   a wing's row goes (a door's bar stays, Family's), and its rooms' menu is the arrow after the room's title, the title and the arrow
   one press (public/preview-home.js); at 1024 and over the row is Apple's local nav as it was, and the title's menu is hidden */
.pv .pvx-titlemenu{display:none}
@media (max-width:1023px){
  .pv .pv-local:not(.is-door){display:none}
  /* (judge 1's 2) the title keeps its width (a max-width took 40 from it, and From the two of us ran two lines at 390): it runs inline
     and the arrow follows its last word in the same line, taking no width of the line (so it never pushes a word down; where the
     title fills the line it stands in the gap before the mark) */
  .pv :is(.pv-head-tx, .pv-dayhero-tx) > h1:has(+ .pvx-titlemenu){display:inline; cursor:pointer}   /* (v209, item 3) a day's hero title too */
  .pv .pvx-titlemenu{display:inline-block; vertical-align:top; margin:0 -32px 0 4px}   /* at the top of the title's line, so the head grows nothing */
  .pv .pvx-titlemenu > summary.pv-icon-btn{position:relative}
  .pv .pvx-titlemenu > summary.pv-icon-btn::after{content:''; position:absolute; inset:-6px}   /* 44 to press, as every control on a phone */
  .pv .pvx-titlemenu > .pv-menu-pop{top:calc(100% + 8px)}
  .pv .pv-head-row:has(.pvx-titlemenu[open]){z-index:41}   /* the head's row keeps its own layer (the band's paper): lifted while the menu is open, so the page under it never shows through */
}
/* 8.2 the audience before posting (views/preview/feed.js composer): the box at rest says who will see a post, one line in the detail
   type under the prompt, its Change the house's link-button; gone while the box is open (the picker says it there) */
.pv .pv-compose-aud{margin:8px 0 0; font-size:14px; line-height:20px; color:var(--ink-2)}
.pv .pv-compose-aud-dot{margin:0 4px}
.pv .pv-compose-aud > .pv-link-btn{position:relative}
.pv .pv-compose-aud > .pv-link-btn::after{content:''; position:absolute; inset:-12px -8px}   /* 44 to press on a phone, the line kept at 20 */
.pv .pv-compose.is-open .pv-compose-aud{display:none}
.pv .pvo .pv-feedcol > .pv-compose .pv-compose-aud{margin:8px 12px 0}
@media (max-width:1023px){ .pv .pvo .pv-feedcol > .pv-compose .pv-compose-aud{margin:8px 8px 0} }
.pv .pvx-albaud{margin:0 0 16px}
/* Judge 1's 1 (round-3/judge-1.md): a link opened for the first time, with the welcome: on a phone the cover's photograph as on every
   later open (.is-back, preview-answer.css 1), so the welcome and its action stand where they do on the second open (the hero 343 at 390,
   not 434; the action on the first screen); a wider screen keeps a first open's cover whole (its action is on the first screen there) */
@media (max-width:1023px){
  .pv .pva:not(.is-back):has(.pvx-welcome) .pv-hero-ph{aspect-ratio:2.7/1}
  .pv .pva:not(.is-back):has(.pvx-welcome) .pv-hero-ph img{object-position:var(--focus-short, 50% 26%)}
}
/* His directions of 22 Oct 2026, night, on round 3's sheets: 320 × 568 and 120 % text are required checks, with no clipping, no overlap and
   every control whole. Each rule gives way only where the measure failed. The page's column (pv-main, the container these read, its
   content box) is 288 at 320, 235 at 320 at 120 %, 268 at 360 at 120 % and 293 at 390 at 120 %; where things fit, nothing moves. */
/* a letter's line under its writer (the date, a dot, who it is for) is bare text, so it cannot end in an ellipsis as a post's circles do
   (18): where it does not fit, its last part takes a second line (it pushed the letter's menu 7 past a 320 screen, 72 at 120 %) */
.pv .pv-update > .pv-post-head .pv-meta{flex-wrap:wrap; white-space:normal}   /* (the date itself wraps where even it does not fit: 320 at 120 %) */
/* a day's faces and its count: the count under the faces where both do not fit ("114 of 204 coming" ran to 338 on a 320 screen) */
.pv .pvx-2d-peak .pvx-2d-who{flex-wrap:wrap; row-gap:8px}
/* a post's acts: a second line where they do not fit (a Plan card's Love lost its heart under the card's edge at 320 at 120 %) */
.pv .pv-acts{flex-wrap:wrap}
@container (max-width:250px){ .pv .pv-acts > *, .pv .pvo .pv-feed .pv-acts > *{flex-basis:auto} }   /* (its acts share the row by a zero basis, which never wraps: by their words there; the home's feed sets its own, preview-open.css) */
/* a panel's heading and its link: the link on a line of its own where both do not fit (the desk's "The schedule" and Notifications'
   "Waiting on you 11" shrank to nothing under their links at 320 at 120 %) */
.pv .pv-panel-top{flex-wrap:wrap; row-gap:0px}
.pv .pv-panel-top > .pv-panel-h{flex-basis:auto; min-width:min-content}
/* a button's words: a second line where they do not fit (Your details' "What buzzes your phone, and when" ran 35 past 360 at 120 %) */
.pv:where(:not(.pv-k-door)) .pv-actions > .pv-btn{max-width:100%; white-space:normal}
/* the composer's ways two to a row where four do not fit (Photos and To do over each other at 320 at 120 %; the ways are their own
   container, 178 there) */
.pv .pv-feedcol > .pv-compose > .pvx-oh-ways{flex-wrap:wrap}
@container (max-width:200px){ .pv .pv-feedcol > .pv-compose > .pvx-oh-ways > .pv-way{flex:1 1 calc(50% - 3px)} }
/* where the column is under 250 (320 at 120 %): a household's reply under its name (its circle ran under the reply's face), and an empty
   album's tile a row of its own (its date and its month ran into the next, and the page 11 sideways) */
@container (max-width:250px){
  .pv .pv-hh{grid-template-columns:minmax(0, 1fr)}
  .pv .pv-hh .pv-hh-state{grid-column:1; grid-row:auto}
  .pv .pvr-pic .pvq-albums > .pvq-album.is-empty{grid-column:1 / -1}
  /* and a thing's own page: its run ("1 of 10 waiting on you" and its two presses) shrinks, its words on two lines (it ran 31 past the
     screen, its Next cut) */
  .pv.pv-flow .pv-run, .pv .pv-flow .pv-run{flex:0 1 auto; min-width:0}   /* (the house's flow class is on the body with .pv) */
  .pv.pv-flow .pv-run-at, .pv .pv-flow .pv-run-at{white-space:normal; text-align:right}
}
/* where the column is under 280 (360 and 320 at 120 %): someone whose name holds a word of ten letters or more takes the row, so the word
   is never broken inside ("Venkatarama / n"; his direction: sensible wrapping, the person kept whole; preview-answer.css Room 4: nothing
   cut, no type made smaller; views/preview/people.js marks the cell) */
@container (max-width:280px){ .pv .pvr-fam .pvm-cell.is-long{flex-basis:100%} }


/* (v209, item 5) one "Clear filters" a filtered page: the Showing line's, a quiet small button after what is chosen (kit.js toolsFold) */
.pv .pv-tools-on > .pv-btn{margin-left:8px; vertical-align:middle}


/* (v209, A10: his word of 23 Oct 2026, the posts read as Facebook's do, "of course, we shouldn't exactly replicate") one recipe for
   every post: a post, a planning update, a decision, a letter, the house's told cards and its hearts (views/preview/feed.js post,
   next.js told). No colour fills: the head on the card's white (v205's tinted band retired, above), no tinted box anywhere in it. */
/* 1. One column: on a laptop a post is 500 to 680 wide, centred where its column is wider (the home's feed column and the planner's
   desk's, .pv-feedcol, all it holds at the one width; every feed's cards); a phone keeps the screen less its gutters */
:root .pv .pv-home.pv-home .pv-feedcol > *, :root .pv .pv-feed.pv-feed > .pv-card{max-width:680px; margin-inline:auto}
@media (min-width:1024px){ :root .pv .pv-home.pv-home .pv-feedcol > *{min-width:500px} }
/* 3. The head is one sentence: people and things in ink 600, the words between them ink-2 400, 15 at every width, the face (40) beside
   it; a name stays a link to its person with no underline. 4. The second line as it was: when · the celebration · who sees it, 13 ink-3 */
:root .pv .pv-card .pv-post-head .pv-post-l1.pv-post-l1{font-size:16px; line-height:1.4; font-weight:400; color:var(--ink-2)}
:root .pv .pv-card .pv-post-head .pv-post-l1 .pv-name.pv-name{font-weight:600; color:var(--ink); text-decoration:none}
:root .pv .pv-card .pv-post-head .pv-post-l1 .pv-verb.pv-verb{font-weight:400; color:var(--ink-2)}
:root .pv .pv-card .pv-post-head .pv-meta.pv-meta{font-size:13px; color:var(--ink-2)}
/* 5. The words: a long post five lines, then "See more", the house's one "more" link (a link to the post's own page; with script it
   opens them in place, public/preview-home.js 45); the words all on the page, never snipped, the rest behind the fifth line */
:root .pv .pv-post .pv-post-tx.is-clamped > .pv-clamp{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5; line-clamp:5; overflow:hidden}
:root .pv .pv-post .pv-post-tx > a.pv-seemore{position:relative; display:inline-block; margin-top:4px; font-size:14px; font-weight:500; color:var(--ink-2);
  text-decoration:underline; text-decoration-color:var(--line); text-decoration-thickness:1px; text-underline-offset:3px}
:root .pv .pv-post .pv-post-tx > a.pv-seemore::after{content:''; position:absolute; inset:-12px -8px}   /* (44 to press) */
/* 6. Photographs keep their own shape, from 4:5 (a tall one, cropped from its focus or near its centre) to 1.91:1, the post's full
   width, and never taller than the screen */
:root .pv .pv-media.pv-n1 .pv-ph{aspect-ratio:auto; height:min(calc(100cqw / clamp(0.8, var(--r, 1), 1.91)), 85svh)}
/* 7. A post about a post (a heart, an answer, a reply): the post as a quiet preview, a hairline box with its first line and its first
   photograph small, the whole box one link, nothing in it underlined (next.js peek; where an underlined quote stood) */
:root .pv a.pvn-peek{display:flex; align-items:center; gap:12px; min-height:44px; margin:12px var(--o-pad, 0px) 0; padding:8px 12px; border:1px solid var(--line);
  border-radius:var(--r-media); background:none; color:var(--ink-2); text-decoration:none}
:root .pv a.pvn-peek:hover{border-color:var(--line); text-decoration:none}
:root .pv a.pvn-peek:focus-visible{ outline-offset:2px}
:root .pv a.pvn-peek > .pvn-peek-ph{flex:none; display:block; width:48px; height:48px; border-radius:6px; object-fit:cover; background:var(--hover)}
:root .pv a.pvn-peek > .pvn-peek-tx{min-width:0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:14px;
  line-height:1.45; color:var(--ink-2); overflow-wrap:break-word}
/* 10. Replies, folded (his word, Facebook's comments the picture): under the post one line, the hearts at its left with the names at
   600, "12 replies" at its right; then the newest reply alone, "View 11 more replies" above it. A reply has no bubble and no fill: the
   face 32, the name ink 600 and "· when" ink-3 13 on one line, the words 15 on 1.45, "Love · ⋯" small under them, each 44 to press */
:root .pv .pv-sum .pv-rx b.pv-rx-n{font-weight:600; color:var(--ink-2)}
:root .pv .pv-sum > a.pv-sum-c{position:relative; color:var(--ink-2); text-decoration:none}
:root .pv .pv-sum > a.pv-sum-c:hover, :root .pv .pv-comments > a.pv-earlier:hover{text-decoration:underline; text-underline-offset:3px}
:root .pv .pv-comments > a.pv-earlier{position:relative; display:inline-block; padding:12px 0 0; font-size:14px; font-weight:500; color:var(--ink-2); text-decoration:none}
:root .pv :is(.pv-sum > a.pv-sum-c, .pv-comments > a.pv-earlier)::after{content:''; position:absolute; inset:-12px -6px}
:root .pv .pv-c .pv-bub.pv-bub{display:block; max-width:none; padding:0; border-radius:0; background:none; box-shadow:none}
:root .pv .pv-c{gap:8px}
:root .pv .pv-c > .pv-c-av .avatar{width:32px; height:32px; font-size:13px}
:root .pv .pv-c .pv-c-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:0 4px; margin:0; line-height:1.4}
:root .pv .pv-c .pv-c-head a.pv-c-name.pv-c-name{margin:0; font-size:14px; font-weight:600; color:var(--ink); text-decoration:none}
:root .pv .pv-c .pv-c-when{display:inline-flex; gap:4px; font-size:13px; color:var(--ink-2)}
:root .pv .pv-c .pv-c-tx.pv-c-tx{margin-top:0px; font-size:16px; line-height:1.45}
:root .pv .pv-c .pv-c-meta.pv-c-meta{gap:0px; padding:0px 0 0; font-size:13px; color:var(--ink-2)}
:root .pv .pv-c .pv-c-meta :is(.pv-c-love, .pv-menu > summary){position:relative}
:root .pv .pv-c .pv-c-meta .pv-c-love::after{content:''; position:absolute; inset:-12px -6px}
:root .pv .pv-c .pv-c-meta .pv-menu > summary::after{content:''; position:absolute; inset:-8px}
:root .pv .pv-c:target{outline:2px solid var(--line); outline-offset:4px; border-radius:6px}

/* (v209, judge 1, items 1-3: the room heads keep v208's height) a room's drawing stands in the title's row only, so the line under
   the title has the whole width again. On a phone the drawing hangs at the row's right, the row's own height (50 × 40), and a float
   as tall as the title keeps the name and its menu clear of it; the line under the title starts below both. On a laptop it keeps its
   corner and its 112 × 90 but its foot is let go, so the words and the buttons alone set the head's height (as harmony.css lets a
   head without buttons). */
@container (max-width:759.98px){
  .pv .pv-head.is-room .pv-head-row:has(> .pv-head-mark){position:relative; grid-template-columns:minmax(0, 1fr); grid-template-areas:"tx" "acts"}
  .pv .pv-head.is-room .pv-head-row:has(> .pv-head-mark):not(:has(> .pv-head-acts)){grid-template-areas:"tx"}
  .pv .pv-head.is-room .pv-head-row > .pv-head-mark{position:absolute; top:-4px; right:0; width:50px; height:40px; margin:0}
  .pv .pv-head.is-room .pv-head-row:has(> .pv-head-mark) > .pv-head-tx::before{content:""; float:right; width:62px; height:34px}
}
@container (min-width:760px){
  :root .pv .pv-head.is-room.pv-head-3 .pv-head-row > .pv-head-mark,
  :root .pv .pv-head.is-room .pv-head-row:has(> .pv-head-acts > .pv-tools) > .pv-head-mark{margin-bottom:-88px}
}
/* (v209, judge 1, item 5) the countdown's one line stays one line on a phone, as a clamped title does: "Next step" (item 12's word)
   kept, the rest cut short with "…" and said whole when the fold opens */
.pv .pvr-plan .pvp-count-m > summary > .pvp-count-one{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* (v209, judge 1, item 7) a post's head is two lines at most where the column is narrow (320 with larger text): the names come first,
   so only a verb's tail is cut, with "…"; wider columns never reach it */
@container (max-width:299.98px){
  :root .pv .pv-card .pv-post-head .pv-post-l1.pv-post-l1{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden}
}
/* (v209, judge 1, item 9) Position it: Save stays at the dialog's foot while the frames and the fields scroll above it */
.pv .pv-dialog .pvx-pos-f > .pv-actions{position:sticky; bottom:0; z-index:2; margin:16px -16px -16px; padding:12px 16px 16px; background:var(--surface); border-top:1px solid var(--line)}
/* (v209, judge 1, item 10) the Showing line's "Clear filters" sits after the last word, 24 tall and small, so the line wraps only
   when its words do; its press area stays 44 tall by a margin it draws around itself */
.pv .pv-tools-on > .pv-btn.pv-sm{position:relative; display:inline-flex; vertical-align:baseline}
.pv .pv-tools-on > .pv-btn.pv-sm::after{content:""; position:absolute; inset:-10px -4px}
/* (v209, judge 1, item 11) Celebrations' days to go: on a phone the head's one small line (where the head shrank, 206 to 179); at
   1024 and wider it follows the sentence on its row, in the small line's size and colour, and its own line is not drawn */
:root .pv .pv-head.is-room .pv-head-tx > p.pv-head-sub:first-of-type .pv-togo{display:none}
@media (min-width:1024px){
  :root .pv .pv-head.is-room .pv-head-tx > p.pv-head-sub:first-of-type .pv-togo{display:inline; font-size:14px; color:var(--ink-2); white-space:nowrap}
  :root .pv .pv-head.is-room .pv-head-tx:has(> p.pv-head-sub .pv-togo) > p.pv-lede{display:none}
}
/* (v209, judge 1, Vercel's checklist) the sticky Save never covers the field in focus: the dialog scrolls a field clear of it */
.pv .pv-dialog:has(.pvx-pos-f), .pv .pv-dialog:has(.pvx-pos-f) .pv-dialog-body{scroll-padding-bottom:84px}

/* 26. The home, social and lighter (v209, item 1: his call A). What waits on you was one quiet row under How is today?; (v210, item 2:
   his word, "bring back the old planning one") it is v208's Waiting on you card again, on Planning's strip (§ the strips, above). On a
   phone (the column under 640) Coming up and In the house are not drawn: the tab bar and Rooms are the ways in; at 1294 the side keeps
   Coming up and In the house stays at the foot. */
:root .pv .pv-home.pvn .pv-feedcol > .pvn-door + .pvh-ask, :root .pv .pv-home.pvn .pv-feedcol > .pvn-door + .pvx-pair > .pvh-ask{margin-top:0}   /* (v210, item 1: his "spacing", 23 Oct) what waits
   stands one card gap under How is today? and one over the next card, as the home's cards stand apart (20 from 768, 16 on a phone) */
:root .pv .pv-home.pvn .pv-feedcol > .pvn-door:has(+ .pvh-ask), :root .pv .pv-home.pvn .pv-feedcol > .pvn-door:has(+ .pvx-pair > .pvh-ask){margin-bottom:var(--card-gap)}
@container (max-width:639px){
  :root .pv .pv-home.pvo .pv-sidecol > .pvf-coming, :root .pv .pv-home.pvo > .pvo-around{display:none}
}
/* 27. (v209, B2) the room overviews (item 2): under a room's head, what is new there since you looked, one of the house's rows on the
   page's paper between two hairlines (kit.js sinceRow; Celebrations, Guests, Vendors, Documents): its title the day, one line of news,
   a chevron; absent on a quiet day. On Planning's door no row: a tile's "2 new" after what waits on you, in the tile's quiet ink */
.pv .pv-since{list-style:none; margin:0 0 24px; padding:0; border-block:1px solid var(--line)}
.pv .pv-since > .pv-row > a.pv-row-main{min-height:44px; box-sizing:border-box; padding:8px 0; color:inherit; text-decoration:none}
.pv .pv-since > .pv-row > a.pv-row-main > svg{flex:none; color:var(--ink-3)}
/* (v209, round B, judge 1's 2) what is new is said on the room's name line, never a line of its own, so a tile is the same height on a
   news day: "To do · 28 new" in the quiet small style; where the words have no room beside the name (the tile's text under 130: a
   phone under 390) a small dot in the words' own ink (judge 2's 1: wine is the wait line's colour, so a wine dot read as waiting), the words kept for a screen reader. Measured: the names 37-90 wide, "· 101 new" about 68 */
.pv .pv-roomtile-tx{container-type:inline-size}
.pv .pv-roomtile-new{display:inline-block; margin-left:4px; font-size:14px; font-weight:400; letter-spacing:0; color:var(--ink-2); white-space:nowrap; text-decoration:none}
.pv .pv-roomtile-new > .pv-dot{margin-right:4px}
@container (max-width:129px){
  .pv .pv-roomtile-new > *{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
  .pv .pv-roomtile-new::after{content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--ink-2); vertical-align:2px}
}
/* (v209, B4) Ideas (item 5, his call: at home in Memories, with a door; views/preview/photos.js ideasRoom, ideasRow)
   1. The row into Ideas, the links sheet's "A row": the whole line the way in, 44 tall, a hairline over it, its name in ink 500, what is in
      it ink-2 on the same line (cut short, never wrapped), the chevron at its end, nothing underlined. On Memories' door after the albums
      (the tiles 32 under it, as under the albums), on Photographs where the ideas' shelf stood, on Planning's door after its tiles, on a
      vendor's page above who to reach.
   2. Ideas' room: a collection a section, its first six square, three a row on a phone and six in a wide window, as Memories' door draws
      its newest; 32 between collections */
.pv a.pvx-ideasrow{display:flex; align-items:center; gap:4px; min-height:44px; margin:24px 0 0; padding:8px 0; border-top:1px solid var(--line); color:var(--ink-2); font-size:16px; line-height:22px; text-decoration:none}
.pv a.pvx-ideasrow:hover{color:var(--ink)}
.pv .pvx-ideasrow-t{flex:0 1 auto; color:var(--ink); font-weight:500}   /* (judge 2's 4) a long label wraps (Planning's door at 320, 120 %), never pushes the chevron out; one word never breaks */
/* (judge 2's 2) Ideas' head sentence under 640 stops at the counts ("Two collections, fourteen pictures."): it ran 3 lines at 360 and 320 */
.pv .pvx-ideas-what{display:none}
@media (min-width:640px){ .pv .pvx-ideas-what{display:inline} }
.pv .pvx-ideasrow-dot{flex:none; color:var(--ink-2)}
.pv .pvx-ideasrow-m{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pv a.pvx-ideasrow > svg{flex:none; margin-left:auto; color:var(--ink-2)}
.pv .pvr-memdoor .pvx-ideasrow + .pv-roomtiles{margin-top:32px}
.pv a.pvx-ideasrow-job{margin:0 0 16px; border-top:0}
.pv .pvr-ideas .pvx-ideas-sec{margin:0}
.pv .pvr-ideas .pvx-ideas-sec + .pvx-ideas-sec{margin-top:32px}
.pv .pvr-ideas .pvx-memnew-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:4px}
.pv .pvr-ideas .pvx-memnew-grid > .pv-tile{flex:none; max-width:none; aspect-ratio:1}
@container (min-width:720px){ .pv .pvr-ideas .pvx-memnew-grid{grid-template-columns:repeat(6, minmax(0, 1fr)); gap:4px} }
/* 28. (v209, B3) navigation, one rule set (item 3; views/preview/kit.js backLink, wingNav; flow.js withPager): a day's page is a room of
   Celebrations, so its back goes; its pager keeps the line alone, at its right end as before, and under 1024 the title menu follows the
   hero's h1 (8.6 above). The hero's text is a grid (the date's tile, then the words): the title and its arrow share the tile's first row,
   the arrow 4 after the title's last line-box, as on a room's head. The hero clips its picture (overflow hidden), so while the menu is
   open it lets the menu out, on a layer of its own; its picture keeps its own rounded top */
.pv .pvx-runline{justify-content:flex-end}
@media (max-width:1023px){
  .pv .pv-dayhero-tx:has(> .pv-dtile):has(> h1 + .pvx-titlemenu){grid-template-columns:44px auto minmax(32px, 1fr)}
  .pv .pv-dayhero-tx:where(:has(> .pv-dtile):has(> h1 + .pvx-titlemenu)) > :not(.pv-dtile){grid-column:2 / -1}   /* (as finesse's > *, later; a phone's full-width rows keep theirs) */
  .pv .pv-dayhero-tx:has(> .pv-dtile) > h1 + .pvx-titlemenu{grid-column:3; grid-row:1; justify-self:start; margin:0 0 0 -10px}
}

/* 29. (v209, B5) the links by purpose (item 9b; his call of 23 Oct night: the Mehendi's head as way A of the links sheet, /look/links).
   What goes somewhere is a link (in words, on its own, a row, a figure's row) or a name; a status and an action are never drawn as a
   link (web-design-guidelines §6). The sheet's proposal (its part 2) for the house, out of the sheet's own scope; the sheet keeps its
   copy for its record (no page but the sheet loads it). Views: views/preview/days.js dayRoom's head, kit.js linkAct, people.js ghActs */
/* a link in a hint is a link in words, as in every sentence (finesse 2): ink, 500, the firm line 3 under its words (it was wine) */
.pv:where(:not(.pv-k-door)) .pv-hint a:not(.pv-btn, .pv-link-btn, .pv-more-link){color:var(--ink); font-weight:500; text-decoration:underline; text-decoration-color:var(--line); text-decoration-thickness:1px; text-underline-offset:3px}
/* where a fact came from, on its small line, in the "more" look: ink-2, 500, underlined; ink under a pointer (the Plan's was wine) */
.pv .pvx-2d-peak .pvx-2d-wear .pvd-from a:not(.pv-link-btn), .pv .pvr-plan :is(a.pvp-src, a.pvp-tag){
  color:var(--ink-2); font-weight:500; text-decoration:underline; text-decoration-color:var(--line); text-decoration-thickness:1px; text-underline-offset:3px}
@media (hover:hover){ .pv .pvx-2d-peak .pvx-2d-wear .pvd-from a:not(.pv-link-btn):hover, .pv .pvr-plan :is(a.pvp-src, a.pvp-tag):hover{color:var(--ink); text-decoration-color:currentColor} }
/* an action in words (a link-button): ink, 500, its icon before it, never underlined; 44 to press round its 20 of words */
.pv :is(a, button).pv-link-btn:not(.pv-btn){position:relative; display:inline-flex; align-items:center; gap:4px; border:0; border-radius:var(--r-sm); background:none;
  font-weight:500; line-height:20px; color:var(--ink); text-decoration:none; cursor:pointer}
.pv a.pv-link-btn:not(.pv-btn){padding:0; vertical-align:baseline}
.pv :is(a, button).pv-link-btn:not(.pv-btn)::before{content:""; position:absolute; inset:-12px -4px}
.pv :is(a, button).pv-link-btn:not(.pv-btn) > svg{flex:none; color:var(--ink-2)}
@media (hover:hover){ .pv :is(a, button).pv-link-btn:not(.pv-btn):hover{background:var(--hover); box-shadow:0 0 0 4px var(--hover); text-decoration:none} }
.pv :is(a, button).pv-link-btn[hidden]{display:none}   /* a poll's "Another choice" once it has six (preview-home.js) */
/* a status in words: its colour (waiting amber, late red), 500, never underlined; whoever can change it has the action beside it */
.pv .pv-st{font-weight:500; text-decoration:none}
.pv .pv-st.is-wait{color:var(--warn)}
.pv .pv-st.is-late{color:var(--danger)}
.pv .pvx-2d-peak .pvd-status{flex-wrap:wrap; align-items:center; gap:8px 16px}
.pv .pvx-2d-peak .pvd-from .pv-dot{margin:0 4px}
.pv .pvx-2d-peak .pvd-from .pv-link-btn{margin-left:12px}
/* who is coming, a figure that opens: one row, the whole of it the way in; its faces, the figure (15/500, ink), a chevron at its end; 44 */
.pv .pvx-2d-peak .pvd-who{--run-ring:var(--surface); margin:16px 0 0; padding:0; list-style:none; border-block:1px solid var(--line)}
.pv .pvx-2d-peak .pvd-who a.pv-row-main{position:relative; gap:12px; min-height:44px; padding-block:0; padding-right:24px; color:inherit; text-decoration:none}
.pv .pvx-2d-peak .pvd-who a.pv-row-main::after{content:""; position:absolute; top:50%; right:4px; width:16px; height:16px; margin-top:-8px; background:var(--ink-2);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 6.5 5.5 5.5-5.5 5.5'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 6.5 5.5 5.5-5.5 5.5'/%3E%3C/svg%3E") center / 16px 16px no-repeat}
@media (hover:hover){ .pv .pvx-2d-peak .pvd-who a.pv-row-main:hover::after{background:var(--ink)} }
.pv .pvx-2d-peak .pvd-who .pv-row-t{font-size:16px; font-weight:500; line-height:20px; color:var(--ink); font-variant-numeric:tabular-nums}
/* (v209, B5, measured) under 360 three faces, not five: at 320 with larger text "114 of 204 coming" had a 48 column beside them */
@media (max-width:359px){ .pv .pvx-2d-peak .pvd-who .pv-facerun > :nth-child(n+4){display:none} }
/* the day's ways, way A: quiet buttons (34, their icons; 44 to press) in one row that scrolls sideways where the page is narrower than
   they are; its far end fades while there is more (judge 1's Vercel note: the sheet's row hid every sign of it), and 24 after the last
   way, so scrolled to the end it shows whole; a pointer has a thin scrollbar too, a phone none (its finger drags the row) */
.pv .pvx-2d-peak .pvd-ways{display:flex; flex-wrap:nowrap; gap:8px; min-width:0; margin:12px 0 -4px; padding-block:4px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:var(--line) transparent;
  -webkit-mask-image:linear-gradient(to right, var(--ink) calc(100% - 32px), transparent); mask-image:linear-gradient(to right, var(--ink) calc(100% - 32px), transparent)}   /* (a mask reads only the alpha) */
.pv .pvx-2d-peak .pvd-ways::after{content:""; flex:none; width:24px}
/* (v209, round B, judge 1's 5) on a phone the ways sit 4 closer to the who row, so the couple's end on the first screen (733-787 at 390) */
@media (max-width:639px){ .pv .pvx-2d-peak .pvd-ways{margin-top:8px} }
/* (v209, round B, Vercel's check 2) a way reached by Tab scrolls clear of the end's fade */
.pv .pvx-2d-peak .pvd-ways{scroll-padding-inline-end:32px}
.pv .pvx-2d-peak .pvd-ways > .pv-btn{position:relative; flex:none}
.pv .pvx-2d-peak .pvd-ways > .pv-btn::before{content:""; position:absolute; inset:-5px 0}
@media (pointer:coarse){ .pv .pvx-2d-peak .pvd-ways{scrollbar-width:none} .pv .pvx-2d-peak .pvd-ways::-webkit-scrollbar{display:none} }
@media (max-width:1023px){ .pv .pvx-2d-peak .pv-dayhero-tx:has(> .pv-dtile) > :is(.pvd-who, .pvd-ways){grid-column:1 / -1} }
/* Vendors' "Add an option", a quiet button at its band's end: 44 to press on a phone */
.pv .pvl .pvl-ghead > .pvl-gacts > .pv-btn{position:relative}
@media (pointer:coarse){ .pv .pvl .pvl-ghead > .pvl-gacts > .pv-btn.pv-sm::before{content:""; position:absolute; inset:-5px 0} }

/* (v209, round B, judge 1's 3) Documents' clause "; five that most weddings need are not here yet" in the head's sentence at 1024
   and over; under it the needs fold's summary says it, and the head is the height it was (papers.js) */
.pv .pvx-pp-pending{display:none}
@media (min-width:1024px){ .pv .pvx-pp-pending{display:inline} }

/* (v209, round C) Looks (views/preview/looks.js): a try's pictures two a row at 2:3, four across in a wide window; a picture painting
   on the sunk ground with its word, nothing moving; one set aside dimmed; what stays the same as 72 px thumbnails, each with its
   22 px pill; the laptop's two columns, the left 320 and sticky; a picture's own page; the comparison slider. Existing tokens only. In the lift's sheet, loaded last: preview-home.css ends with blocks its tests read to the end (homedesign, v199). */
.pv .pvl-help{width:44px; height:44px; border:1px solid var(--line); border-radius:var(--r-ctl)}
.pv .pvl-grid{list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px}
.pv .pvl-grid.is-one{grid-template-columns:minmax(0, 1fr); max-width:240px}
.pv .pvl-pic{position:relative; min-width:0}
.pv .pvl-frame{display:block; position:relative; aspect-ratio:2/3; border-radius:var(--r-media); overflow:hidden; background:var(--hover)}
.pv .pvl-frame img{width:100%; height:100%; object-fit:cover; display:block}
.pv .pvl-pic.is-painting .pvl-frame{display:grid; place-items:center}
.pv .pvl-wait{font-size:14px; color:var(--ink-2)}
.pv .pvl-pic.is-failed .pvl-frame{display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; padding:12px; text-align:center}
.pv .pvl-why{font-size:14px; line-height:1.4; color:var(--ink-2)}
.pv .pvl-pic.is-not .pvl-frame{opacity:.45}
.pv .pvl-label{display:block; margin-top:4px; font-size:14px; font-weight:500; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pv .pvl-kept{position:absolute; right:8px; top:8px; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--wine); color:var(--on-wine)}
.pv .pvl-tick{position:absolute; left:8px; top:8px}
.pv .pvl-plan{margin:4px 0 0; font-size:16px; color:var(--ink-2)}
.pv .pvl-said{margin:8px 0 0; color:var(--ink-2)}
.pv .pvl-line{margin:8px 0 0}
.pv .pvl-line:empty{display:none}
.pv .pvl-line form, .pv .pvl-again{display:inline; margin:0}
.pv .pvl-try + .pvl-try{margin-top:12px}
.pv .pvl-h{font-size:16px; margin:0 0 8px}
.pv .pvl-refs{list-style:none; margin:0 0 8px; padding:0; display:flex; flex-wrap:wrap; gap:12px}
.pv .pvl-ref{width:72px; display:flex; flex-direction:column; align-items:center; gap:4px}
.pv .pvl-ref-b{width:72px; height:72px; padding:0; border:1px solid var(--line); border-radius:var(--r-ctl); overflow:hidden; background:var(--hover); cursor:pointer}
.pv .pvl-ref-b img{width:100%; height:100%; object-fit:cover; display:block}
.pv .pvl-mark{display:inline-flex; align-items:center; min-height:22px; padding:0 8px; border-radius:999px; font-size:12px; font-weight:500; white-space:nowrap; background:var(--hover); color:var(--ink-2)}
.pv .pvl-mark.is-fixed{background:var(--wine-tint); color:var(--wine)}
.pv .pvl-dec{list-style:none; margin:0; padding:0}
.pv .pvl-dec li{display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; border-top:1px solid var(--line)}
.pv .pvl-dec li:first-child{border-top:0}
.pv .pvl-x{margin:0}
.pv .pvl-starts{margin:8px 0 0}
.pv .pvl-starts a{min-height:34px}
.pv .pvl-go{padding:0 12px 0 8px}
/* (round-C judge 1, item 3, measured: at 320 at 120 % the field kept 12 px of the row) a narrow bar, under 350 (360, 320, and 390 at
   120 %), is two rows: the field across the top, the microphone, the "?" and the go beneath, so "Say what to try" is whole */
.pv .pvl-bar{container-type:inline-size}
@container (max-width:349px){
  .pv .pvl-bar .pv-housebar-f > #pvl-q{flex:1 0 100%}
  .pv .pvl-bar .pv-housebar-f > .pvl-go{margin-left:auto}
}
.pv .pvl-go > span{position:static !important; width:auto; height:auto; margin:0; overflow:visible; clip:auto; clip-path:none}
.pv .pvl-changing, .pv .pvl-out{margin:8px 0 0}
.pv .pvl-off, .pv .pvl-first{color:var(--ink-2)}
.pv .pv-head-acts > form.pvl-headf{margin:0}
.pv .pvl-new > .pvl-warn{margin:0}   /* (round-C judge 2, item 4) the privacy word once, above the first picker; Looks' forms are the house's pv-form, its 16 between parts */   /* (round-C judge 1, items 1–2) a picture's Keep it and Not this in the head's row; Compare there too on a look */
.pv .pvl-two{display:flex; flex-direction:column; gap:12px}
.pv .pvl-side > .pv-card + .pv-card{margin-top:12px}
.pv .pvl-main > .pvl-try:first-of-type, .pv .pvl-main > form > .pvl-try:first-of-type{margin-top:12px}
.pv .pvl-radios{border:0; padding:0; margin:0 0 12px; display:flex; gap:16px; flex-wrap:wrap}
.pv .pvl-radios label{min-height:44px; display:inline-flex; align-items:center; gap:8px}
.pv .pvl-compare-h{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:12px 0 0}
/* a picture's own page */
.pv .pvl-big{margin:0; max-width:520px}
.pv .pvl-big img{width:100%; height:auto; display:block; border-radius:var(--r-media)}
.pv .pvl-big.is-not img{opacity:.45}
.pv .pvl-acts{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0; align-items:center}
.pv .pvl-acts > form{margin:0}
.pv .pvl-keptline{display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex:0 1 auto; color:var(--ink)}   /* (round-C judge 2, item 1, measured: at 1294 the kept words took a row alone, the head 347) its own width, so Change this one and Show the family sit beside it where they fit; at 390 it still fills its row */
.pv .pvl-keptline p{margin:0; flex:1 1 12em; min-width:0}   /* (round-C judge 1, item 1) the words wrap beside the tick, never under it alone */
/* compare: one over the other at a handle the keys move too; three or four side by side, two a row on a phone */
.pv .pvl-slider{position:relative; max-width:520px; aspect-ratio:2/3; border-radius:var(--r-media); overflow:hidden; background:var(--hover); touch-action:pan-y}
.pv .pvl-slider img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.pv .pvl-slider-top{clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.pv .pvl-slider-h{position:absolute; top:0; bottom:0; left:var(--x); width:2px; margin-left:-1px; background:var(--surface); box-shadow:0 0 0 1px var(--line); pointer-events:none}
.pv .pvl-slider input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize}
.pv .pvl-slider:has(input:focus-visible){outline:2px solid var(--wine); outline-offset:2px}
.pv .pvl-slider-cap{display:flex; justify-content:space-between; gap:12px; max-width:520px; margin:8px 0 0; font-size:14px; color:var(--ink-2)}
.pv .pvl-cgrid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px}
.pv .pvl-cfig{margin:0}
.pv .pvl-cfig img{width:100%; aspect-ratio:2/3; object-fit:cover; display:block; border-radius:var(--r-media)}
.pv .pvl-cfig figcaption{margin-top:4px; font-size:14px}
/* the new look */
.pv .pvl-fromset{border:0; padding:0; margin:0}
.pv .pvl-fromset legend{font-weight:500; padding:0}
.pv .pvl-from summary{min-height:44px; display:flex; align-items:center; gap:8px; cursor:pointer}
.pv .pvl-picks{grid-template-columns:repeat(3, minmax(0, 1fr))}
.pv .pvl-pick{position:relative}
@media (min-width:1024px){
  .pv .pvl-two{display:grid; grid-template-columns:320px minmax(0, 1fr); gap:24px; align-items:start}
  .pv .pvl-side{position:sticky; top:16px}
  .pv .pvl-grid{grid-template-columns:repeat(4, minmax(0, 1fr))}
  .pv .pvl-cgrid{grid-template-columns:repeat(4, minmax(0, 1fr))}
}
/* (v209, round C, C4) Looks' ways in: the Saathi page's row under the bar (the house's quiet row, its hanger and the one sparkle) and
   the sparkle on Rooms' door; Show the family's dialog, the picture small over the words */
.pv a.pvl-door{margin:16px 0 0}
.pv .pvl-door-i{display:inline-flex; flex:none; margin-right:4px; color:var(--ink-2)}
.pv .pvl-spark{display:inline-flex; flex:none; vertical-align:-2px; margin-left:4px; color:var(--gold)}
.pv .pvl-sharepic{margin:0 0 16px}
.pv .pvl-sharepic img{display:block; width:96px; aspect-ratio:2 / 3; object-fit:cover; border-radius:var(--r-sm); background:var(--hover)}

/* (round-C judge 2, item 5: his direction of 23 Oct 2026, night) a page head's title ends with a round full stop in its wing's colour
   ("Planning." in Planning's, "Celebrations." in Celebrations' yellow): Inter's own period, the title's size and weight, glued to the
   last word, so it is never alone on a line and no head grows; decoration, its alternative text empty, the title's words as they were.
   The colour is the wing's own, whole (v203's strips, preview-theme.css 387); a page in no wing (Looks, the Saathi page, Rooms, The
   log, Settings) in ink. A day's hero title is the same part (the title menu's rule above treats them as one). */
.pv :is(.pv-head-tx, .pv-dayhero-tx) > h1:not(.pv-nostop)::after{content:"."; content:"." / ""; color:var(--w-stop, currentColor); position:absolute}   /* (measured: "Buzz and calendar" at 390 at 120 % filled its line, and the stop took "calendar" to a second) out of the line, at its place after the last word: it adds no width, so no title wraps for it */
.pv.pv-paper[data-wing="home"]{--w-stop:var(--w-home-hue)}
.pv.pv-paper[data-wing="cel"]{--w-stop:var(--w-cel-hue)}
.pv.pv-paper[data-wing="fam"]{--w-stop:var(--w-fam-hue)}
.pv.pv-paper[data-wing="plan"]{--w-stop:var(--w-plan-hue)}
.pv.pv-paper[data-wing="mem"]{--w-stop:var(--w-mem-hue)}

/* 28. One composer (v210, item 6: his word of 23 Oct, "give the bar a multicolor so that … people can post about anything"). The home's
   box and a celebration's page's are one part, the same at every width: on white, a 4 px bar of the five wings' colours along the card's
   top edge (the dress: each colour shown small; the home's tinted strip behind the head taken out), the suggestion on its line in ink
   (the home's, next.js houseQuestion; a day's own, dayQuestion), the field 16 under the head's 48 as on the home, and the ways in the
   same words at every width, the short ones (Post, Ask, Poll, Photos, To do): the home's column never had room for the longer, and a
   day's wider one said them, so the two read differently at one width */
/* (the fix round, his ruling of 26 Oct, evening: the stripe says "post anything") v213's five colours back, at rest and open; 4px, as v213
   drew it (the closing touches, 26 Oct, night: the fix round had 3) */
:root .pv.pv-paper.pv-paper.pv-paper .pv-feedcol > .pv-compose.pv-compose{background-image:linear-gradient(90deg, var(--w-cel-hue) 0 20%, var(--w-fam-hue) 20% 40%,
  var(--w-plan-hue) 40% 60%, var(--w-mem-hue) 60% 80%, var(--w-home-hue) 80% 100%); background-size:100% 4px; background-repeat:no-repeat; background-position:0 0}
:root .pv.pv-paper .pv-feedcol > .pv-compose.pv-compose.pv-compose:not(.is-open){padding-top:12px}
:root .pv.pv-paper.pv-paper.pv-paper .pv-feedcol > .pv-compose.pv-compose > .pvx-oh-q.pvx-oh-q{margin-bottom:32px; color:var(--ink)}
.pv .pvx-oh-ways .pvx-oh-wl.pvx-oh-wl{display:none} .pv .pvx-oh-ways .pvx-oh-ws.pvx-oh-ws{display:inline}

/* 29. Every file picker's ring whole (v210, item 7: his word of 23 Oct, "all the upload buttons … a very bad highlighting"): the house's
   focus style (2 wine, 2 out) on the label that is the button, once the picker inside it has the keyboard's focus. The drawn button of
   .pv-file (.pv-file-l) was ringed inside .pv-file's overflow:hidden (kept: it holds the invisible picker), so only a bracket showed */
.pv:where(:not(.pv-k-door)) .pv-file:focus-within .pv-file-l.pv-file-l{outline:none}
.pv:where(:not(.pv-k-door)) label:has(> input[type=file]:focus-visible){outline:2px solid var(--wine); outline-offset:2px}
.pv:where(:not(.pv-k-door)) label.pv-file:not(.pvx-dz):has(> input[type=file]:focus-visible){border-radius:var(--r-ctl)}
/* (and the label hugs its drawn button, as wide as it: a field's column stretched it, so the ring ran the field's width and a press
   right of the button opened the picker) */
.pv:where(:not(.pv-k-door)) label.pv-file:not(.pvx-dz){width:fit-content; max-width:100%}

/* 30. Looks: a slot's pictures from the house's albums (v210, item 8: his word of 23 Oct, "I should get the option of choosing an image
   from the existing one"; views/preview/looks.js albumPick). Under each slot's "Add from your phone", "Choose from Photographs" opens
   the albums, each a row that opens its pictures; a picture's tick shows at rest (the house's photo tick, hidden elsewhere until a
   page selects), a chosen one ringed in wine with its tick filled; once a slot has its most, the others wait, faded */
.pv .pvl-slot{display:grid; justify-items:start; gap:8px}
.pv .pvl-slot > .pvl-fromall{justify-self:stretch}
.pv .pvl-fromall > summary{width:fit-content; list-style:none}
.pv .pvl-fromall > summary::-webkit-details-marker{display:none}
.pv .pvl-fromall[open] > summary{margin-bottom:8px}
.pv .pvl-fromall > .pvl-fromset{display:grid; gap:0; border-block:1px solid var(--line)}   /* (rows on lines, no box inside the card: rule 43) */
.pv .pvl-fromset > .pvl-from + .pvl-from{border-top:1px solid var(--line)}
.pv .pvl-from > .pvl-picks{margin:4px 0 12px}
.pv .pvl-picks .pv-tick{display:block}
.pv .pvl-pick{border-radius:var(--r-media); cursor:pointer}
.pv .pvl-pick:has(input:checked){outline:3px solid var(--wine); outline-offset:-3px}
.pv:where(:not(.pv-k-door)) .pvl-pick:has(input:disabled:not(:checked)){cursor:default}
.pv:where(:not(.pv-k-door)) .pvl-pick:has(input:disabled:not(:checked)) img{opacity:.45}

/* 31. Start a look at the Looks pages' width (v210, item 9: his word of 23 Oct, "this page still needs a lot of refinement"): the form
   the column's width, as a look's own page (kind work), not a 700 card on half the page; from 1024 the two slots side by side, the
   title as wide as the first, the albums' pictures four across; an empty title answered under it in the house's refusal note
   (preview-home.js data-empty), the button its own width */
.pv .pvl-new .pv-field > .pv-note[data-empty-say]{margin:8px 0 0}
.pv .pvl-new > .pv-btn.pv-btn-primary{justify-self:start; width:auto}
@media (min-width:1024px){
  .pv .pvl-new > .pvl-slots{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px; align-items:start}
  .pv .pvl-new > .pv-field:has(input[name="title"]){max-width:calc(50% - 12px)}
}
/* (v211 item 11: his review of 23 Oct 2026 at 320 by 568, calls c and d) under 400 wide. The home: the first visit's whole hero
   takes its photograph at 2/1 (16/10 on a phone), the names' face and size untouched; a returning reader's is 2.7/1 already
   (preview-answer.css). A celebration: the head's sentence (the date, the time and the place) carries Directions as its one link, its
   button in the ways below stepping aside; what to wear comes next. (His change of 24 Oct: the day's picture stays, as before.) */
.pv .pvd-when-dir{display:none}
@media (max-width:399.98px){
  .pv .pva:not(.is-back):not(:has(.pvx-welcome)) .pv-hero-ph{aspect-ratio:2/1}
  /* (his change of 24 Oct: "keep the photograph and tighten only the gaps around the greeting") the hero to the greeting 16 (its
     own 12 and 4) and the greeting to the first card 16, the home's card gap (v210), where a phone had 32 and 24 */
  .pv .pv-home.pvn .pvn-door{margin-top:4px; margin-bottom:16px}
  .pv .pvd-when-dir{display:inline; margin-left:4px; font-weight:500; color:var(--ink); text-decoration:underline; text-underline-offset:3px}
  .pv .pvd-ways [data-way="dir"]{display:none}
  /* the dress code next, under the sentence, so the time, the place, Directions and what to wear are the first screen's */
  .pv .pvr-day .pv-dayhero-tx > .pvx-2d-wear{order:1}
  .pv .pvr-day .pv-dayhero-tx > :is(.pv-dayhero-line, .pvd-maybe, .pvd-who, .pvd-ways){order:2}
}
/* (v212 item 1) v211 item 12's rules for Family's bar under its head are gone: a door draws its wing's local nav as its rooms do */
/* (v212 item 4, his word of 24 Oct 2026: invites you can find) a side's page: "Send their link" under someone who has never come in,
   small and quiet, centred under their name as the cell is; the invite's links, one box a side */
.pv .pvr-fam .pvm-send{display:block; width:max-content; max-width:100%; margin:-4px auto 8px; font-size:13px; font-weight:500; line-height:1.35; color:var(--ink-2); text-decoration:underline; text-underline-offset:3px}
.pv .pvr-fam .pvm-send:hover{color:var(--ink)}
.pv .pvx-invite + .pvx-invite{margin-top:12px}
/* (v212 item 7, his word of 24 Oct 2026: "under 400 wide, At the door becomes a link in the line under the title") on Family's door and a
   side's page, for the two of them while someone waits (people.js atDoorSub): under 400 the head's line ends "· 1 at the door", a link in
   words to At the door, and the At the door button leaves the head's buttons, so Add someone and Invite someone keep one row, and the
   head its height. Where even the two would not share a row (the buttons' own width, read by the row's container): first their icons go
   (360 and 320), then, with larger text on a small phone, Invite someone says "Invite". From 400 nothing changes: the button, and the
   line's full stop */
.pv .pv-head-sub .pvm-atdoor{display:none}
@media (max-width:399.98px){
  .pv .pv-head-acts > [data-atdoor]{display:none}
  .pv .pv-head-sub .pvm-atdoor{display:inline}
  .pv .pv-head-sub .pvm-atdoor-stop{display:none}
  .pv .pv-head-sub .pvm-atdoor a{white-space:nowrap; color:var(--ink); font-weight:500; text-decoration:underline; text-decoration-color:var(--line); text-decoration-thickness:1px; text-underline-offset:3px}
  .pv .pvr-fam .pv-head-acts{container-type:inline-size}
  @container (max-width:333.98px){ .pv .pvr-fam .pv-head-acts > .pv-btn > svg{display:none} }
  @container (max-width:281.98px){ .pv .pvr-fam .pv-head-acts .pvm-inv-more{display:none} }
}
/* (v212 item 7, his change of 24 Oct 2026: "put '1 at the door' at the end of the title's own line where it fits, so no head grows; under
   the title only where it doesn't fit") the same link at the end of the title's line, right-aligned, after the title's menu, where the
   script beside it measured it fits (people.js atDoorTitle: the header's is-atdoor-t); there it is a link in words, 44 to press, and the
   line under the title is as it was, its full stop back. Out of the flow, so it never moves or wraps the title */
.pv .pv-head-tx > .pvm-atdoor-t{display:none}
@media (max-width:399.98px){
  .pv .pv-head.is-atdoor-t .pv-head-tx{position:relative}
  .pv .pv-head.is-atdoor-t .pv-head-tx > .pvm-atdoor-t{display:inline-flex; align-items:center; position:absolute; top:-5px; right:0; min-height:44px; padding:0 0px;
    white-space:nowrap; color:var(--ink); font-size:16px; font-weight:500; text-decoration:underline; text-decoration-color:var(--line); text-decoration-thickness:1px; text-underline-offset:3px}
  .pv .pv-head.is-atdoor-t .pv-head-sub .pvm-atdoor{display:none}
  .pv .pv-head.is-atdoor-t .pv-head-sub .pvm-atdoor-stop{display:inline}
}

/* (v213, the review of 25 Oct 2026, items 6 and 7) the shortest phones. The home, to someone coming back: under 400 wide the cover's
   photograph a thinner band (its ratio, the one thing of it call c lets change), its foot's spacing tighter; under 380, How is today?
   says the other's answer beside the question and its three answers under them, one row less. A celebration's page on a short screen
   (a phone under 700 tall, or anything under 360 wide): the day's picture stays (his word of 24 Oct) and is shorter, its sentence's
   rows closer, so the time, the place, Directions and what to wear come sooner. Nothing else of either moves. */
@media (max-width:399.98px){
  .pv .pv-home .pva.is-back .pvn-cover .pv-hero-ph, .pv .pv-home.pva.is-back .pvn-cover .pv-hero-ph{aspect-ratio:3.4/1}
  .pv .pv-home .pvn-cover > .pv-hero-foot, .pv .pv-home.pvn .pvn-cover > .pv-hero-foot{padding-top:12px; padding-bottom:14px; row-gap:10px}
  .pv .pv-home .pvn-cover .pv-hero-facts, .pv .pv-home.pvn .pvn-cover .pv-hero-facts{padding-top:10px}
}
@media (max-width:379.98px){
  .pv .pv-home.pvn .pvn-door > .pvh-today.pv-card > .pvh-today-said{order:1; flex:0 1 auto; width:auto}
  .pv .pv-home.pvn .pvn-door > .pvh-today.pv-card > .pvh-today-f{order:2}
}
@media (max-width:767.98px) and (max-height:700px), (max-width:359.98px){
  .pv.pvr-day .pvx-runline, .pv .pvr-day .pvx-runline{margin-bottom:8px}
  .pv.pvr-day .pvx-2d-peak .pv-daycard-when, .pv .pvr-day .pvx-2d-peak .pv-daycard-when{row-gap:4px}
  /* the date's tile beside the title only, so the sentence under it takes the card's whole width (it was a column 198 wide at 320) */
  .pv.pvr-day .pvx-2d-peak .pv-dayhero-tx:has(> .pv-dtile) > .pv-dtile, .pv .pvr-day .pvx-2d-peak .pv-dayhero-tx:has(> .pv-dtile) > .pv-dtile{grid-row:1}
  .pv.pvr-day .pvx-2d-peak .pv-dayhero-tx:has(> .pv-dtile) > .pv-daycard-when, .pv .pvr-day .pvx-2d-peak .pv-dayhero-tx:has(> .pv-dtile) > .pv-daycard-when{grid-column:1 / -1}
  /* the sentence as one run of words, Directions at its end rather than on a line of its own; the status under it */
  .pv.pvr-day .pvx-2d-peak .pv-dayhero-tx > .pv-daycard-when, .pv .pvr-day .pvx-2d-peak .pv-dayhero-tx > .pv-daycard-when{display:block}
  .pv.pvr-day .pvx-2d-peak .pv-daycard-when > .pvd-status, .pv .pvr-day .pvx-2d-peak .pv-daycard-when > .pvd-status{display:block; margin-top:4px}
  /* a space, not a margin, before Directions: at a line's start it is no indent, the one left edge kept */
  .pv.pvr-day .pvx-2d-peak .pv-daycard-when > .pv-dateline::after, .pv .pvr-day .pvx-2d-peak .pv-daycard-when > .pv-dateline::after{content:" "}
  .pv.pvr-day .pvx-2d-peak .pv-daycard-when > .pvd-when-dir, .pv .pvr-day .pvx-2d-peak .pv-daycard-when > .pvd-when-dir{margin-left:0}
}
/* (v213, his call 2 of 25 Oct 2026: "on a phone put the newest photographs before Waiting on you") the home's pair, Waiting on you and the
   newest photographs (views/preview/next.js): on a phone the photographs first, then Waiting on you, 16 between them and after them as
   before; at 768 and over his order (v209 call A, v210 item 2) as it was, the pair no box of its own */
.pv .pvx-pair{display:contents}
@media (max-width:767.98px){
  .pv .pvx-pair{display:flex; flex-direction:column; gap:var(--card-gap, 16px); margin-bottom:16px}
  .pv .pv-home.pvn .pvx-pair > :is(.pvh-ask, .pvx-lead){margin-top:0; margin-bottom:0}   /* (over the cards' own, so the pair's gap is the one) */
  .pv .pvx-pair > .pvx-lead{order:-1}
}

/* (design polish, phase 1, 25 Oct 2026; docs/polish-2026-10-25/phase-1/packet.md) a card's head has no fill: a 1px line under it, and the
   weight of its words does the rest. (fix round) Not where the head sits on its wing's strip, as v213 drew it: Home's cards, Planning's
   Next for the wedding (wings.css), with no hairline under the strip. One focus ring from the keyboard on every control: 3px of --wine, 2px off (the interface review #1, 1 Nov 2026: --wine-ring's 22 % was 1.5:1, under the 3:1 a ring needs) (the old rings
   are gone). The primary button is wine, pressed darker; the secondary is white with a line, washed on hover. */
:root .pv :is(.pv-panel-top, .pvx-lead-top):not(:where(.pv-home :is(.pvh-today, .pv-fromus, .pv-compose, .pvo-messages, .pv-foryou, .pvf-coming, .pvx-lead, .pvo-people) > *, .pvx-next > *)){background:transparent;border-bottom:1px solid var(--line)}
.pv:where(:not(.pv-k-door)) :is(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), [contenteditable="true"]):focus-visible{outline:3px solid color-mix(in srgb, var(--wine) 72%, transparent) !important;outline-offset:2px !important}
.pv .pv-banner :is(a[href], button):focus-visible{outline-color:currentColor !important}   /* (the interface review #1, 1 Nov 2026) the dark band's ring in its own light ink: the house's wine is 1.5:1 on it */
.pv:where(:not(.pv-k-door)) .pv-btn:not(.pv-btn-secondary, .pv-btn-quiet, .pv-btn-danger, .pv-sm):active{background:var(--wine-press)}
.pv:where(:not(.pv-k-door)) .pv-btn-secondary{background:var(--surface);border:1px solid var(--line-2);color:var(--ink)}
.pv:where(:not(.pv-k-door)) .pv-btn-secondary:hover{background:var(--hover)}

/* ===== preview-design.css ===== */
/* public/preview-design.css — the house's design sheet (the apply pass, 26 October 2026; DESIGN.md at the repo's root says what it holds
   and why). It began as the Home pass's sheet (preview-home-pass.css, the look he approved on Home) and is now read last on every
   page but the sign-in page (views/preview/kit.js shell), so all nine pages and their rooms are one product: no frame, the sidebar
   240, one box of 1072 (Home's column 720 and its rail 320; The log's column 720; every other page the whole box: the fix round), one card, one page chrome, one sub-tab look, three button roles, quiet motion. The
   values are tokens.css's. What the pass keeps untouched (the hero's own words, the names and the ampersand, the date tiles, the
   avatars' tones, the strips, the lights, the petals) is left as design-p1 draws it. Sections 1–9 are the Home pass's, now for every
   page; 10 onwards are the apply pass's own. */

body.pv:where(:not(.pv-k-door)){
  /* the house's own corner and shadow names, on the pass's three radii and one shadow; (the closing touches, 26 Oct, night) a
     photograph's corner and a tile's on --r-img (12), as the cards, the panels and the controls go to 16 */
  --r-post:var(--r-md); --r-ctl:var(--r-sm); --r-pop:var(--r-md); --r-dialog:var(--r-md); --r-media:var(--r-img); --r-tile:var(--r-img);
  --r-chip:var(--r-full); --card-in:var(--sp-6);
  background-color:var(--canvas)
}

/* 1. The frame off: the cards sit on the canvas. The sidebar 240 (its fold inside it, at its top: the fix round, section 9), Home's
   column at most 720, its rail 320, 32 between; under 1280 the rail comes into the one column. */
@media (min-width:1024px){
  body.pv .pv-shell:has(> #pv-page){grid-template-columns:var(--sidebar) minmax(0, 1fr); column-gap:0; padding-left:0; padding-right:0}
  body.pv.pv-rail .pv-shell:has(> #pv-page), body.pv .pv-shell:has(> #pv-page):has(> .pv-nav.is-narrow){grid-template-columns:84px minmax(0, 1fr)}
  body.pv .pv-shell:has(> #pv-page)::before, body.pv .pv-shell:has(> #pv-page)::after{content:none}
  body.pv .pv-shell:has(> #pv-page) > .pv-lights{margin-left:0; margin-right:0}
  /* the page centred in what the sidebar leaves, by its margins: 32 in at its sides, its box Home's (1072: the column 720, 32, the
     rail 320) or what the window leaves, the same box on every page at every width (the fix round, his A.1), so the left edge and
     the header bar never move from page to page; .pv-main is the container the pages' own layouts answer to */
  body.pv #pv-page.pv-main{width:100%; max-width:calc(var(--col-main) + var(--col-gap) + var(--col-rail) + 2 * var(--sp-8)); margin:0 auto; padding:var(--sp-8) var(--sp-8) var(--sp-16);
    background:none; border:0; border-radius:0; box-shadow:none}
}
@media (min-width:1280px){
  body.pv #pv-page .pv-home.pvn{display:grid; width:auto; max-width:none; margin:0; padding:0;
    grid-template-columns:minmax(0, var(--col-main)) var(--col-rail); column-gap:var(--col-gap); row-gap:var(--sp-6);
    grid-template-rows:auto auto auto auto 1fr; grid-template-areas:"hero hero" "feed side" "feed days" "feed around" "feed ."; align-items:start}
  body.pv #pv-page .pv-home.pvn > .pv-hero{grid-area:hero; margin:0 0 var(--sp-2)}
  body.pv #pv-page .pv-home.pvn > .pvx-q-col{grid-area:feed; display:block; margin:0}
  body.pv #pv-page .pv-home.pvn > .pvx-q-col > .pv-feedcol{display:block}
  body.pv #pv-page .pv-home.pvn > .pvx-q-col > .pvx-q-tail{margin-top:var(--sp-8)}
  body.pv #pv-page .pv-home.pvn > .pv-sidecol{grid-area:side}
  body.pv #pv-page .pv-home.pvn > .pv-days-nav{grid-area:days}
  body.pv #pv-page .pv-home.pvn > .pvo-around{grid-area:around}
  body.pv #pv-page .pv-home.pvn > :is(.pv-sidecol, .pv-days-nav, .pvo-around){margin:0; padding-top:0; border-top:0}
}
@media (max-width:1279px){
  body.pv #pv-page .pv-home.pvn{display:flex; flex-direction:column; gap:var(--sp-8); width:auto; max-width:var(--col-main); margin:0; padding:0}
  body.pv #pv-page .pv-home.pvn > .pvx-q-col{display:contents}
  body.pv #pv-page .pv-home.pvn > *{order:9; margin:0}
  body.pv #pv-page .pv-home.pvn > .pv-hero{order:1}
  body.pv #pv-page .pv-home.pvn > .pvx-q-col > .pv-feedcol:not(.pvx-q-tail){order:3; display:block; margin:0}
  body.pv #pv-page .pv-home.pvn > .pv-days-nav{order:4}
  body.pv #pv-page .pv-home.pvn:not(.is-back) > .pv-days-nav{order:2}
  body.pv #pv-page .pv-home.pvn > .pv-sidecol{order:5}
  body.pv #pv-page .pv-home.pvn > .pvo-around{order:6}
  body.pv #pv-page .pv-home.pvn > .pvx-q-col > .pvx-q-tail{order:7; margin:0}
}
@media (max-width:1023px){
  body.pv #pv-page.pv-main{padding-left:var(--sp-4); padding-right:var(--sp-4)}
  /* (21, the illustrations, on a phone) the haveli's detail under the title at 200, at the left; no washes behind empty places
     (html:root: the weight the switch's attribute on <html> gave, so these still win over section 21's) */
  html:root body.pv #pv-page :is(.pv-head, .pvn-door).has-art{min-height:0; padding-right:0}
  html:root body.pv #pv-page :is(.pv-head, .pvn-door).has-art .pv-art-side{position:static; transform:none; grid-column:1 / -1; justify-self:start}
  html:root body.pv #pv-page .art-side{width:200px; height:auto}   /* (take three, his item 8) its full height, the painting whole */
  /* (the cleanup, his 1d) a head with no row (Planning's overview; Memories' has its row again since the rooms pass) keeps its Primary under the painting, as the others */
  html:root body.pv #pv-page .pv-head.has-art .pv-head-row > .pv-head-acts{grid-column:1; grid-row:3; justify-self:start}
  html:root body.pv #pv-page .art-wash{display:none}
  /* (take three) Rooms' doors in a phone's 60 square: the detail whole inside it; the day's picker under the head, the page's width */
  html:root body.pv #pv-page .pv-plan .pv-wing-cover.has-door, html:root body.pv #pv-page .pv-plan > li.pv-wing[data-wing="home"] > .pv-wing-cover.has-door{display:grid; place-items:center; width:60px; height:60px; padding:0}
  html:root body.pv #pv-page .pv-wing-cover > img:is(.art-tile, .art-door){width:100%; height:100%; object-fit:contain}
  html:root body.pv #pv-page .pv-plan > li.pv-wing[data-wing="home"]{flex-direction:row}
  body.pv #pv-page .pv-head .pv-head-row > .pv-segrow.pv-daypick{width:100%}
  body.pv #pv-page .pv-head .pv-head-row > .pv-segrow.pv-daypick > a{flex:1 1 0; justify-content:center}
}
/* every element of the main column is the column's width */
body.pv #pv-page .pv-home.pvn .pv-feedcol > *, body.pv #pv-page .pv-home.pvn .pv-feed > *{width:auto; max-width:none; margin-left:0; margin-right:0}
body.pv #pv-page .pv-home.pvn .pv-feedcol > * + *{margin-top:var(--sp-8)}
body.pv #pv-page .pv-home.pvn .pv-feedcol > .pvx-pair{display:flex; flex-direction:column; gap:var(--sp-8)}
body.pv #pv-page .pv-home.pvn .pv-feedcol > .pvx-pair > *{margin:0; width:auto}
body.pv #pv-page .pv-home.pvn .pv-feed{display:flex; flex-direction:column; gap:var(--sp-8); margin:0; padding:0}
body.pv #pv-page .pv-home.pvn .pv-feed > *{margin:0}
body.pv #pv-page .pv-home.pvn .pv-sidecol{display:flex; flex-direction:column; gap:var(--sp-6); margin:0; padding:0; border:0}
body.pv #pv-page .pv-home.pvn .pv-sidecol > *{margin:0}
@media (max-width:1279px){ body.pv #pv-page .pv-home.pvn .pv-sidecol{gap:var(--sp-8)} }

/* 2. One card: the surface, one line, 12 round, one soft shadow, 24 in (the rail's 16), 16 between its parts. A head: the title at
   its left, at most one quiet link at its right; strip A where the wing has it, a line under it where it does not. */
body.pv #pv-page .pv-home.pvn :is(.pv-card, .pv-feedcol .pv-sect, .pv-sidecol > .pv-sect, .pv-days-nav.pv-sect, .pvo-around > .pv-sect){
  background-color:var(--surface); border:1px solid var(--line); border-radius:var(--r-md)}
body.pv #pv-page .pv-home.pvn :is(.pv-card, .pv-feedcol .pv-sect, .pv-sidecol > .pv-sect, .pv-days-nav.pv-sect, .pvo-around > .pv-sect):not(.pv-compose){box-shadow:var(--shadow-1)}
/* cards made of rows and words: 24 in; the rail's 16 */
body.pv #pv-page .pv-home.pvn :is(.pvh-today, .pv-fromus, .pv-compose, .pv-feedcol .pv-sect, .pvx-lead){padding:var(--sp-6)}
body.pv #pv-page .pv-home.pvn :is(.pv-sidecol > .pv-sect, .pv-days-nav.pv-sect, .pvo-around > .pv-sect){padding:var(--sp-4)}
/* a head: 48 tall in the main column (its title's 25 in its middle), 44 in the rail; strip A is the card's own ground down to
   --strip-h (preview-lift.css), so the head lays nothing over it and the strip is the head's height */
body.pv #pv-page .pv-home.pvn :is(.pv-feedcol .pv-sect, .pvx-lead){--strip-h:48px}
body.pv #pv-page .pv-home.pvn :is(.pv-sidecol > .pv-sect, .pv-days-nav.pv-sect, .pvo-around > .pv-sect){--strip-h:44px}
body.pv #pv-page .pv-home.pvn :is(.pv-feedcol .pv-sect, .pvx-lead) > :is(.pv-panel-top, .pvx-lead-top){display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); height:48px; min-height:0; margin:calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6)) var(--sp-4); padding:0 var(--sp-6); border:0; border-radius:0; background:none}
body.pv #pv-page .pv-home.pvn :is(.pv-sidecol > .pv-sect, .pv-days-nav.pv-sect, .pvo-around > .pv-sect) > .pv-panel-top{display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-3); height:44px; min-height:0; margin:calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-4); padding:0 var(--sp-4); border:0; border-radius:0; background:none}
/* the two rail blocks that were no cards: The celebrations in its wing's strip (Celebrations' tint and ink, drawn as the others'),
   In the house (in no wing) a line under its head */
body.pv #pv-page .pv-home.pvn .pv-days-nav.pv-sect{--s-tint:var(--w-cel-tint); --s-ink:var(--w-cel-ink); background-image:linear-gradient(var(--s-tint) 0 var(--strip-h), transparent var(--strip-h))}
body.pv #pv-page .pv-home.pvn .pv-days-nav.pv-sect > .pv-panel-top :is(h2, h3){color:var(--s-ink)}
body.pv #pv-page .pv-home.pvn .pvo-around > .pv-sect > .pv-panel-top{border-bottom:1px solid var(--line); margin-bottom:var(--sp-2)}
body.pv #pv-page .pv-home.pvn .pvo-around > .pv-sect > .pv-panel-top :is(h2, h3){color:var(--ink)}

/* the mood chips: the Home pass kept design-p1's 11 corner; on the one radius scale they are pills (the apply pass) */
body.pv #pv-page .pv-seg3{--r-ctl:var(--r-full)}

/* 3. Air: the parts inside a card on the 4 grid */
body.pv #pv-page .pv-home.pvn .pvn-door > * + *{margin-top:var(--sp-4)}
body.pv #pv-page .pv-home.pvn .pvn-door{margin:0; padding:0}

/* 4. Titles in Inter 600, his ruling of 26 Oct (the Newsreader test ran here and he chose Inter): the greeting 24 (20 under 640); the
   cards' titles at design-p1's 16, the rail's a step under at 14; the count 32 in tabular figures; section labels at design-p1's 14 */
body.pv #pv-page .pv-home.pvn .pvn-hello{font:600 var(--fs-xl)/var(--lh-heading) var(--ui); letter-spacing:-.01em; color:var(--ink); margin:0}
body.pv #pv-page .pv-home.pvn :is(.pv-panel-h, .pvx-lead-top h2, .pv-fromus-tx > b){font:600 var(--fs-md)/var(--lh-heading) var(--ui); letter-spacing:0; text-transform:none}
body.pv #pv-page .pv-home.pvn :is(.pv-sidecol, .pv-days-nav, .pvo-around) .pv-panel-h{font-size:var(--fs-base)}
body.pv #pv-page .pv-home.pvn .pvo-status, body.pv #pv-page .pv-fromhere > h2{font-size:var(--fs-base); letter-spacing:0; text-transform:none}
body.pv #pv-page .pv-hero .pv-togo > b{font:600 var(--fs-2xl)/1 var(--ui); letter-spacing:-.01em; font-variant-numeric:tabular-nums}
@media (max-width:639px){
  body.pv #pv-page .pv-home.pvn .pvn-hello{font-size:var(--fs-lg)}
}

/* 5. Type discipline: Home's sizes on the scale, figures that are data in tabular figures */
body.pv #pv-bar .pv-list a .pv-l{font-size:var(--fs-base)}
body.pv #pv-page .pv-home.pvn .pv-post-tx{font-size:var(--fs-post)}   /* (alignment, his R1', reversing the rooms pass's R1 14) a post's body is --fs-post 15 on every page */
body.pv #pv-page .pv-home.pvn .pv-post.is-short .pv-post-tx, body.pv #pv-page .pv-home.pvn .pv-post-tx.is-big{font-size:var(--fs-post)}   /* (alignment, R1') */
body.pv #pv-page .pv-home.pvn :is(.pv-name, .pv-c-tx, .pvo-msg-top > b, .pvh-today-q, .pv-fh-tx > b){font-size:var(--fs-base)}
body.pv #pv-page .pv-home.pvn .pvx-oh-ql, body.pv #pv-page .pv-home.pvn .pvx-oh-q{font-size:var(--fs-md)}
body.pv #pv-page .pv-home.pvn :is(.pv-rx-n, .pv-rx > span, .pv-sum-c, .pv-compose-aud, .pv-compose-aud *, .pv-way, .pv-way *){font-size:var(--fs-sm)}
body.pv #pv-page .pv-home.pvn .pvo-memory-cap{font-size:var(--fs-lg)}
body.pv #pv-page .pv-home.pvn .pv-fromus-mark{font-size:var(--fs-md)}
body.pv #pv-page .pv-home.pvn .pv-act-ic .pv-mk{font-size:var(--fs-md)}
body.pv #pv-page .pv-home.pvn .pv-post .pv-av .avatar{font-size:var(--fs-md)}
body.pv #pv-page .pv-home.pvn :is(.pv-c-av .avatar, .pv-aud-n){font-size:var(--fs-xs)}
body.pv #pv-bar .pv-you-face .avatar{font-size:var(--fs-xs)}
body.pv #pv-page .pv-home.pvn :is(time, .pv-meta, .pvo-msg-top time, .pv-rx-n, .pv-sum-c, .pvh-n, .pv-mini small){font-variant-numeric:tabular-nums}

/* 6. Hierarchy and buttons: three roles, two sizes. Primary (wine) is Post alone; secondary on the surface; quiet with no edge */
body.pv:where(:not(.pv-k-door)) #pv-page .pv-btn:not(.pv-seg3 > .pv-btn){display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  height:36px; min-height:36px; padding:0 var(--sp-4); border-radius:var(--r-sm); font:500 var(--fs-base)/20px var(--ui)}
body.pv:where(:not(.pv-k-door)) #pv-page :is(.pv-card, .pv-sect) .pv-btn:not(.pv-seg3 > .pv-btn){height:32px; min-height:32px; padding:0 var(--sp-3); font-size:var(--fs-sm)}
body.pv:where(:not(.pv-k-door)) #pv-page .pv-btn:is(.pv-btn-primary, .pv-btn-secondary):not(.pv-seg3 > .pv-btn){background:var(--surface); border:1px solid var(--line-2); color:var(--ink)}
body.pv:where(:not(.pv-k-door)) #pv-page .pv-btn:is(.pv-btn-primary, .pv-btn-secondary):not(.pv-seg3 > .pv-btn):hover{background:var(--hover)}

body.pv #pv-page .pv-btn.pv-btn-quiet:hover{background:var(--hover); color:var(--ink)}
/* "Let in" is wine (his ruling of 26 Oct): on the request card, while a request is showing, it is a primary beside the quiet "Not now";
   the one allowed second primary, since the card is a notice that comes and goes */
body.pv #pv-page .pv-todo-door .pv-actions > .pv-btn.pv-btn-primary.pv-btn{background:var(--wine); border-color:transparent; color:var(--on-wine)}
body.pv #pv-page .pv-todo-door .pv-actions > .pv-btn.pv-btn-primary.pv-btn:hover{background:var(--wine-press)}
/* the open composer's own Post stays the one primary: the way it opens from is hidden while it is open */
body.pv #pv-page .pv-compose .pv-btn.pv-btn-primary:not(.pv-seg3 > .pv-btn){background:var(--wine); border-color:transparent; color:var(--on-wine)}   /* (the fix round) as strong as the secondary rule above, which won before */
body.pv #pv-page .pv-compose .pv-btn.pv-btn-primary:not(.pv-seg3 > .pv-btn):hover{background:var(--wine-press)}
/* a head's one link, the posts' own actions, a line's quiet words: quiet */
body.pv #pv-page .pv-home.pvn .pv-more-link{display:inline-flex; align-items:center; flex:none; margin:calc(-1 * var(--sp-1)) calc(-1 * var(--sp-2)); padding:var(--sp-1) var(--sp-2);
  border-radius:var(--r-sm); font:500 var(--fs-sm)/20px var(--ui); color:var(--ink-2); text-decoration:none}
body.pv #pv-page .pv-home.pvn .pv-more-link:hover{background:var(--hover); color:var(--ink)}
body.pv #pv-page .pv-home.pvn .pv-sect > .pv-more-link{margin:var(--sp-3) 0 0 calc(-1 * var(--sp-2))}
body.pv #pv-page .pv-home.pvn :is(.pv-act, a.pv-act){display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); height:32px; min-height:32px;
  padding:0 var(--sp-3); border:0; border-radius:var(--r-sm); background:transparent; font:500 var(--fs-sm)/20px var(--ui); color:var(--ink-2)}
body.pv #pv-page .pv-home.pvn :is(.pv-act, a.pv-act):hover{background:var(--hover); color:var(--ink)}


body.pv #pv-page .pv-home.pvn .pv-icon-btn:hover{background:var(--hover)}
/* meta lines in --ink-3 */
body.pv #pv-page .pv-home.pvn :is(.pv-meta, .pv-c-when, .pvo-msg-top time, .pv-mini small, .pv-aud-meta){color:var(--ink-3)}

/* 7. The composer: the field the hero of the card (44, round, 12 in); the five ways one row of compact quiet buttons under it, the
   audience line at its left in --ink-3; Post the one wine button, at the row's end. The five-colour stripe across its top is v213's,
   back by his ruling of 26 Oct, evening (preview-lift.css 28); the one-colour strip is gone. */
body.pv #pv-page .pv-home.pvn .pv-compose:not(.is-open){display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; column-gap:var(--sp-4); row-gap:var(--sp-4)}
body.pv #pv-page .pv-home.pvn .pv-compose:not(.is-open) > :is(.pvx-oh-q, .pv-compose-rest, .pv-compose-forms){grid-column:1 / -1; margin:0}
body.pv #pv-page .pv-home.pvn .pv-compose .pvx-oh-q{justify-self:start; padding:0; font:500 var(--fs-md)/var(--lh-heading) var(--ui); color:var(--ink); text-align:left}
body.pv #pv-page .pv-home.pvn .pv-compose .pv-compose-rest{position:relative; display:block; margin:0}
body.pv #pv-page .pv-home.pvn .pv-compose .pv-compose-rest > .avatar{position:absolute; left:var(--sp-2); top:var(--sp-2); z-index:1; width:28px; height:28px; margin:0; font-size:var(--fs-xs); pointer-events:none}
body.pv #pv-page .pv-home.pvn .pv-compose .pv-prompt{display:flex; align-items:center; width:100%; height:44px; min-height:44px; margin:0;
  padding:0 var(--sp-3) 0 var(--sp-12); border:1px solid var(--line-2); border-radius:var(--r-full); background:var(--surface); font:400 var(--fs-md)/24px var(--ui); color:var(--ink-3); text-align:left}
body.pv #pv-page .pv-home.pvn .pv-compose .pv-prompt:hover{border-color:var(--ink-3)}
body.pv #pv-page .pv-home.pvn .pv-compose:not(.is-open) > .pv-compose-aud{grid-column:1; margin:0; padding:0; color:var(--ink-3); font-size:var(--fs-sm); line-height:20px; white-space:nowrap}
body.pv #pv-page .pv-home.pvn .pv-compose .pv-compose-aud .pv-link-btn{text-underline-offset:2px}
body.pv #pv-page .pv-home.pvn .pv-compose .pv-compose-aud .pv-link-btn:hover{color:var(--ink)}
body.pv #pv-page .pv-home.pvn .pv-compose:not(.is-open) > .pv-compose-ways{grid-column:2; display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-end; gap:var(--sp-1);
  margin:0; padding:0; border:0; container-type:normal}
body.pv #pv-page .pv-home.pvn .pv-compose .pv-way{display:inline-flex; flex-direction:row; align-items:center; justify-content:center; gap:var(--sp-2); flex:none; width:auto; height:32px; min-height:32px;
  margin:0; padding:0 var(--sp-2); border:1px solid transparent; border-radius:var(--r-sm); background:transparent; font:500 var(--fs-sm)/20px var(--ui); color:var(--ink-2); box-shadow:none}
body.pv #pv-page .pv-home.pvn .pv-compose .pv-way:hover{background:var(--hover); color:var(--ink)}
body.pv #pv-page .pv-home.pvn .pv-compose .pv-way > svg{width:16px; height:16px; flex:none; color:inherit}   /* quiet: the icon the words' grey, so Post is the one wine */
body.pv #pv-page .pv-home.pvn .pv-compose .pv-way .pvx-oh-wl{display:none}
body.pv #pv-page .pv-home.pvn .pv-compose .pv-way .pvx-oh-ws{display:inline}
body.pv #pv-page .pv-home.pvn .pv-compose .pv-way[data-way="post"]{order:9; margin-left:var(--sp-2); padding:0 var(--sp-4); background:var(--wine); color:var(--on-wine)}
body.pv #pv-page .pv-home.pvn .pv-compose .pv-way[data-way="post"]:hover{background:var(--wine-press); color:var(--on-wine)}
body.pv #pv-page .pv-home.pvn .pv-compose .pv-way[data-way="post"] > svg{display:none}
@media (max-width:1023px){
  body.pv #pv-page .pv-home.pvn .pv-compose:not(.is-open){grid-template-columns:minmax(0, 1fr)}
  body.pv #pv-page .pv-home.pvn .pv-compose:not(.is-open) > :is(.pv-compose-aud, .pv-compose-ways){grid-column:1}
  body.pv #pv-page .pv-home.pvn .pv-compose:not(.is-open) > .pv-compose-ways{justify-content:space-between; gap:0}
  body.pv #pv-page .pv-home.pvn .pv-compose .pv-way{gap:var(--sp-1); padding:0 var(--sp-2)}
  body.pv #pv-page .pv-home.pvn .pv-compose .pv-way[data-way="post"]{margin-left:0; padding:0 var(--sp-3)}
  /* (the fix round) open on a phone, the five ways share the row (each its words, no icon), so none is cut */
  body.pv #pv-page .pv-compose.pv-compose.is-open .pv-intents{display:flex; width:100%}
  body.pv #pv-page .pv-compose.pv-compose.is-open .pv-intents > button[data-intent]{flex:1 1 0; padding:0 var(--sp-2)}   /* (the closing touches) equal shares where the words allow: a way whose words need more keeps them on their line */
}
@media (max-width:374px){ body.pv #pv-page .pv-home.pvn .pv-compose .pv-way:not([data-way="post"]) > svg{display:none} .pv .pv-rpanel button{width:36px} }   /* (the interface review #7, 1 Nov 2026) under 375 the closed composer's four ways keep their words and drop the icon, as the open one does (the fix round), and the reactions' buttons are 36 wide: the row needed 330 of 254 and the open panel ran to x 333, so the page was 363 wide at 320, 340 and 360, the tab bar's Memories and Every emoji past the edge */
/* (the fix round, his E.11) open, one field: the pill gives way to the box, the avatar and the name on a row above it; the five ways one
   compact segmented row, the chosen on --wine-tint behind --ink words; who sees it a secondary select and the file a secondary button with
   its icon (section 14); the helper lines --ink-3; File it instead quiet at the foot's left, Post the primary at its right */
body.pv #pv-page .pv-compose.pv-compose.pv-compose.is-open > .pv-compose-rest{display:none}   /* over section 7's .pv-home.pvn rule, which draws it at rest */
/* (the closing touches, his 3) the five ways the composer's whole width, in equal shares, 40 tall with the edge (38 inside it) */
body.pv #pv-page .pv-compose.is-open .pv-intents{position:static; display:flex; flex-wrap:nowrap; align-self:stretch; gap:0; width:100%; max-width:100%;
  margin:0; padding:0; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface); overflow:hidden}
body.pv #pv-page .pv-compose.is-open .pv-intents > button[data-intent]{display:inline-flex; flex-direction:row; align-items:center; justify-content:center; gap:var(--sp-2); flex:1 1 0;
  width:auto; min-width:max-content; height:38px; min-height:38px; margin:0; padding:0 var(--sp-3); border:0; border-radius:0; background:transparent; box-shadow:none;
  font:500 var(--fs-sm)/20px var(--ui); color:var(--ink-2); white-space:nowrap}
body.pv #pv-page .pv-compose.is-open .pv-intents > button[data-intent]:hover{background:var(--hover); color:var(--ink)}
body.pv #pv-page .pv-compose.is-open .pv-intents > button[data-intent][aria-selected="true"]{background:var(--wine-tint); color:var(--ink)}
body.pv #pv-page .pv-compose.is-open .pv-intents > button[data-intent] > svg{width:16px; height:16px; flex:none}
body.pv #pv-page .pv-compose.is-open .pv-aud > summary{display:inline-flex; align-items:center; gap:var(--sp-2); height:32px; min-height:32px; padding:0 var(--sp-3);
  border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface); box-shadow:none; font:500 var(--fs-sm)/20px var(--ui); color:var(--ink); white-space:nowrap}
body.pv #pv-page .pv-compose.is-open .pv-aud > summary:hover{background:var(--hover)}
body.pv #pv-page .pv-compose.is-open :is(.pv-need, .pv-taghint){color:var(--ink-3)}
body.pv #pv-page .pv-compose.is-open .pv-actions{display:flex; flex-wrap:nowrap; justify-content:flex-start; align-items:center; gap:var(--sp-2)}
body.pv #pv-page .pv-compose.is-open .pv-actions > .pv-btn-primary{margin-left:auto}

/* 8. Response: a press, a lift, an entrance; only transform and opacity move; nothing longer than --dur-slow but the petals */
body.pv:where(:not(.pv-k-door)) #pv-page :is(.pv-btn, .pv-act, .pv-way, .pv-more-link, .pv-icon-btn, .pv-react-more, .pv-c-love, .pv-link-btn),
body.pv #pv-bar .pv-bar-t, body.pv .pv-top .pv-icon-btn{
  transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out)}
body.pv:where(:not(.pv-k-door)) #pv-page :is(.pv-btn, .pv-act, .pv-way, .pv-icon-btn, .pv-react-more):active, body.pv #pv-bar .pv-bar-t:active{transform:scale(.98)}
/* the cards that open something answer a hover with a second shadow (drawn on its own layer, so only its opacity moves) */
body.pv #pv-page .pv-home.pvn :is(a.pv-card, .pv-grid > .pv-tile, .pv-days .pv-day > a, .pvo-around .pv-around-row > a.pv-around-go, .pv-digest){position:relative;
  transition:transform var(--dur-fast) var(--ease-in), box-shadow var(--dur-fast) var(--ease-in)}
body.pv #pv-page .pv-home.pvn :is(a.pv-card, .pv-days .pv-day > a, .pv-digest):not(.pvo-memory)::after{content:""; position:absolute; inset:-1px; z-index:0;
  border-radius:inherit; box-shadow:var(--shadow-2); opacity:0; pointer-events:none; transition:opacity var(--dur-fast) var(--ease-in)}
body.pv #pv-page .pv-home.pvn :is(a.pv-card, .pv-days .pv-day > a, .pv-digest):not(.pvo-memory):hover::after{opacity:1; transition:opacity var(--dur) var(--ease-out)}
/* (the closing touches, his 2) only an image tile rises: a photograph's tile, an album's cover, the memory's card (and the day cards and
   the room tiles, preview-finesse.css); a text-led card (the digest, the rail's rows, a request's, a list's) keeps its place and answers
   with the shadow alone. A tile clips what is drawn inside it, so its shadow is its own, as the day cards' and the room tiles' are */
body.pv #pv-page :is(.pv-grid, .pvx-memnew-grid) > a.pv-tile, body.pv #pv-page a.pv-album > .pv-album-cover{transition:transform var(--dur-fast) var(--ease-in), box-shadow var(--dur-fast) var(--ease-in)}
body.pv #pv-page .pv-home.pvn :is(.pv-grid > .pv-tile, a.pvo-memory):hover, body.pv #pv-page :is(.pv-grid, .pvx-memnew-grid) > a.pv-tile:hover,
body.pv #pv-page a.pv-album:hover > .pv-album-cover{transform:translateY(-1px); box-shadow:var(--shadow-2); transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out)}
/* the parts that kept their own times move on the pass's */
body.pv:where(:not(.pv-k-door)) #pv-page :is(.pvh-tile, .pvh-today, .pv-card, .pv-around-row, .pv-tile, input, .avatar){transition-duration:var(--dur)}
body.pv #pv-page .pv-home.pvn .pv-compose.pv-compose{transition:box-shadow var(--dur-fast) var(--ease-out)}
/* the page comes in: the main column's first five, up 6 and from nothing, 30 apart */
@keyframes pvh-in{from{opacity:0; transform:translateY(6px)}}
@media (prefers-reduced-motion:no-preference){
  body.pv #pv-page .pv-home.pvn > .pvx-q-col > .pv-feedcol:not(.pvx-q-tail) > :nth-child(-n+5){animation:pvh-in var(--dur) var(--ease-out) backwards}
  body.pv #pv-page .pv-home.pvn > .pvx-q-col > .pv-feedcol:not(.pvx-q-tail) > :nth-child(2){animation-delay:30ms}
  body.pv #pv-page .pv-home.pvn > .pvx-q-col > .pv-feedcol:not(.pvx-q-tail) > :nth-child(3){animation-delay:60ms}
  body.pv #pv-page .pv-home.pvn > .pvx-q-col > .pv-feedcol:not(.pvx-q-tail) > :nth-child(4){animation-delay:90ms}
  body.pv #pv-page .pv-home.pvn > .pvx-q-col > .pv-feedcol:not(.pvx-q-tail) > :nth-child(5){animation-delay:120ms}
}
/* the fold's view transition on the pass's slow time */
:root:where(:not(:has(> .pv-k-door)))::view-transition-group(*), :root:where(:not(:has(> .pv-k-door)))::view-transition-old(*), :root:where(:not(:has(> .pv-k-door)))::view-transition-new(*){animation-duration:var(--dur-slow); animation-timing-function:var(--ease-out)}

/* 9. The nav: one treatment for all nine; 20 icons, a 1.75 line, their colour the words'; the current one on --paper with --ink
   words and a --wine icon; hover --hover; the background changes, nothing moves */
body.pv #pv-bar [aria-current="page"], body.pv #pv-bar [aria-current="page"] *{animation:none}
body.pv #pv-bar .pv-list a{transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); border-radius:var(--r-sm)}
body.pv #pv-bar .pv-list a > svg{width:20px; height:20px; flex:none; stroke-width:1.75; color:inherit}
body.pv #pv-bar .pv-list a:hover{background:var(--hover); color:var(--ink)}
body.pv #pv-bar .pv-list a[aria-current="page"]{background:var(--paper); color:var(--ink)}
body.pv #pv-bar .pv-list a[aria-current="page"] > svg{color:var(--wine)}
body.pv #pv-bar .pv-you-face, body.pv #pv-bar .pv-you-face .avatar{width:20px; height:20px; flex:none}
body.pv #pv-bar .pv-you-face .avatar{border-radius:var(--r-full)}
@media (min-width:1024px){
  body.pv #pv-bar .pv-nav-in{padding:var(--sp-2) var(--sp-4) var(--sp-16)}
  body.pv:not(.pv-rail) #pv-bar .pv-list a{display:flex; flex-direction:row; align-items:center; gap:var(--sp-3); min-height:40px; padding:var(--sp-2) var(--sp-3); font:500 var(--fs-base)/20px var(--ui)}
  body.pv #pv-bar .pv-nav-rule{margin:var(--sp-2) var(--sp-3)}
  body.pv #pv-page .pv-home.pvn .pvh-today-f > .pv-btn[data-mood]{height:32px; min-height:32px; padding:0 var(--sp-3)}   /* (take two, item 9) the moods 32 tall */
  /* the fold (the closing touches, his 1; the hall round): a 24 round quiet button on the sidebar's boundary (the bar's --bar-cur, its
     --bar-line ring, the chevron inside), centred on it at the height of the first item's row ("Collapse"); folded, the same button in
     the same place, pointing the other way ("Expand"); drawn from 1024, where the hall's colour is the edge (section 11) */
  body.pv #pv-bar .pv-bar-k{position:sticky; top:var(--hall-fold-top, calc(74px + var(--sp-4))); height:0; z-index:3}
  body.pv #pv-bar .pv-bar-k::before{content:none}
  body.pv #pv-bar .pv-bar-t{position:absolute; left:calc(100% - 12px); top:0; right:auto; bottom:auto; width:24px; height:24px; margin:0; padding:0; display:grid; place-items:center;
    border:1px solid var(--bar-line); border-radius:var(--r-full); background:var(--bar-cur); color:var(--bar-ink-2); box-shadow:none; transform:none}
  body.pv #pv-bar .pv-bar-t:hover{background:var(--bar-hover); color:var(--bar-ink)}
  body.pv #pv-bar .pv-bar-t > svg{width:14px; height:14px}
  body.pv:not(.pv-rail) #pv-bar .pv-bar-t > svg{transform:scaleX(-1)}
  /* folded: the icons with their names under them, under the fold */
  body.pv.pv-rail #pv-bar .pv-nav-in{padding:var(--sp-2) var(--sp-1) var(--sp-16)}   /* (the closing touches) the icons back where they were before the fold sat over them */
  body.pv.pv-rail #pv-bar .pv-list a{display:flex; flex-direction:column; justify-content:center; align-items:center; gap:var(--sp-1); min-height:56px; padding:var(--sp-2) 0; font:500 var(--fs-xs)/16px var(--ui)}
  body.pv.pv-rail #pv-bar .pv-list a .pv-l{max-width:100%; font-size:var(--fs-xs); line-height:16px; letter-spacing:-.01em; white-space:nowrap; overflow:visible; text-overflow:clip}
}

/* the phone: cards 16 in, every head 44 with its title at 16 (as the rail's), so a title stays on its one line in its strip */
@media (max-width:1023px){
  body.pv #pv-page .pv-home.pvn :is(.pvh-today, .pv-fromus, .pv-compose, .pv-feedcol .pv-sect, .pvx-lead){padding:var(--sp-4)}
  body.pv #pv-page .pv-home.pvn .pvh-today.pv-card.pv-card.pv-card > .pvh-today-said{flex-basis:100%; margin-left:0}   /* (take two, item 9) on a phone the line wraps: the answer under it */
  body.pv #pv-page .pv-home.pvn :is(.pv-feedcol .pv-sect, .pvx-lead){--strip-h:44px}
  html:has(> body.pv):where(:not(:has(> .pv-k-door))){scroll-padding-top:calc(56px + var(--sp-6))}   /* (the fix round, C.7) a part a link opens stops 24 under the top bar, not 9 */
  /* (the fix round, C.7) a phone's floor plan is one card, its wings its rows (v198): the card rule gave each row its own edge and round,
     two lines touching between rows; the rows lose them and keep the one hairline between */
  body.pv #pv-page .pv-plan > li.pv-card.pv-wing{border:0; border-radius:0; box-shadow:none}
  body.pv #pv-page .pv-plan > li.pv-card.pv-wing + li.pv-card.pv-wing{border-top:1px solid var(--line)}
  body.pv #pv-page .pv-home.pvn :is(.pv-feedcol .pv-sect, .pvx-lead) > :is(.pv-panel-top, .pvx-lead-top){height:44px; margin:calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-4); padding:0 var(--sp-4)}
}

/* 3, continued: a post's parts on the grid, its words, its actions and its replies on one edge, 24 in */
body.pv #pv-page .pv-home.pvn .pv-post > .pv-post-head{padding:var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-6)}
body.pv #pv-page .pv-home.pvn .pv-post .pv-post-who{padding:0}
body.pv #pv-page .pv-home.pvn .pv-post > .pv-post-tx{padding:0 var(--sp-6) var(--sp-4)}
body.pv #pv-page .pv-home.pvn .pv-post > .pv-sum{padding:var(--sp-3) 0}
body.pv #pv-page .pv-home.pvn .pv-post > .pv-acts{padding:var(--sp-1) 0; margin:0 var(--sp-3)}
body.pv #pv-page .pv-home.pvn .pv-post > .pv-comments{padding:0 var(--sp-3) var(--sp-4); margin:0 var(--sp-3)}
body.pv #pv-page .pv-home.pvn .pv-post .pv-c-meta{padding:var(--sp-1) 0 0}
body.pv #pv-page .pv-home.pvn .pv-post .pv-c-love{padding:0}
body.pv #pv-page .pv-home.pvn .pv-post .pv-cbox > input{border-radius:var(--r-full)}
body.pv #pv-page .pv-home.pvn .pv-post .pv-cbox > .pv-send{padding:0}
body.pv #pv-page .pv-home.pvn .pv-pills .pv-chip{padding:0 var(--sp-2)}
body.pv #pv-page .pv-home.pvn .pvo-memory-tx{padding:var(--sp-6)}
/* the feed's own head: its title, 16 to the first card */
body.pv #pv-page .pv-home.pvn .pvn-bar{padding:0; margin-bottom:0}
body.pv #pv-page .pv-home.pvn .pv-feedcol > .pvn-bar + *{margin-top:var(--sp-4)}
/* rows in a list: 16 between them */
body.pv #pv-page .pv-home.pvn :is(.pv-mini > li, .pv-around-row){padding:var(--sp-2) 0}
body.pv #pv-page .pv-fromhere .pv-fh-row{padding:var(--sp-2) 0}
body.pv #pv-page .pv-home.pvn :is(.pvh-n, .pv-aud-n){padding:0 var(--sp-2); border-radius:var(--r-full)}
/* 5, continued: the rows' words on the scale */
body.pv #pv-page .pv-home.pvn :is(.pv-around b, .pv-mini li > a, .pv-verb, .pv-fromus-tx > span),
body.pv #pv-page .pv-fromhere :is(.pv-fh-tx > b, .pv-fh-tx > em){font-size:var(--fs-base)}
body.pv #pv-page .pv-home.pvn .pv-days b{font-size:var(--fs-md)}
body.pv #pv-page :is(.pvo-msg > .avatar, .pv-fh-lead > .avatar){font-size:var(--fs-base)}
/* round things on the one round radius */
body.pv #pv-page :is(.avatar, .pv-rx-marks > i, .pv-fromus-mark, .pv-fh-lead.is-face, .pvo-msg-group){border-radius:var(--r-full)}

/* ============================== the apply pass (26 October 2026): Home's look on every page ============================== */

/* 10. Every page in Home's box (section 1: 1072 from 1280, what the window leaves below it), at the same left edge on every page.
   (the fix round, his A.1, 26 Oct 2026) The 720 column is Home's (beside its rail) and The log's (its posts are Home's feed); every
   other page lays out in the whole box as design-p1 did (its grids, its two families side by side, its side column 300 beside the
   main from 880), with the pass's cards, spacing, type, buttons and motion inside it. The header bar spans the box. */
body.pv #pv-page.pv-main > *{box-sizing:border-box}
body.pv #pv-page.pv-main:has(> .pv-head.pvx-q-loghead) > :not(.pv-local, script, style, span, [hidden], dialog, .pv-toast, .pv-vh){width:100%; max-width:var(--col-main); margin-left:0; margin-right:0}
/* the side column's hairline in the middle of its gap (the scale made the gap 32) */
@container (min-width:880px){ body.pv #pv-page .pv-cols:has(> .pv-col-side > *){background-position:right calc(var(--side) + var(--sp-4)) top 0} }

/* 11. The hall and the page beside it, from 1024 (below it the strip, the title's menu and the phone's tabs are the way round, as before).
   (the hall round, 26 Oct 2026, night: his call) The strip is not drawn from 1024; the sidebar runs the window's height on the theme's
   --bar, every colour in it from the --bar family but the search row's ground, and the lights lie over it, transparent (preview-wings.css:
   sticky at 2, z 21). (take two, 26 Oct 2026, night: his rework of the hall) Nothing sticks over the page: no row over it, its first part
   24 under the lights' band. The row's tabs are a segmented row inside the page (kit.js segRow), the strip's bells the hall's own rows, the
   portrait's menu your page's quiet links (kit.js houseLinks). The hall: 240 open, 84 folded (take three, his item 1: --sidebar-folded),
   each row its icon with its name under it at 12, no tooltip; under the lights' band, 24 in, the mark and the names (Newsreader 20) with the fold at the line's end, the days
   4 under the names, 20, the search as a row (--surface, a 1px --bar-line edge, the magnifier on the icons' line, the words at the nav's
   size), 16, the nav; Saathi (take three, his item 5), Messages and Notifications after The log, then you. Folded: the mark, the fold
   12 under it, the magnifier with "Search" under it, the icons with their names, the current one a --bar-cur pill round both. No control on the colour boundary. Where the bar is the canvas's colour (Wine,
   Midnight) a 1px --bar-line edge; where the colour changes (White, Linen) the change is the edge. */
body.pv .pv-hall, body.pv #pv-bar :is(.pv-bells, .pv-bells-rule, .pv-hall-find, .pv-hall-findic), body.pv #pv-page .pv-segrow, body.pv #pv-page .pv-profile-house{display:none}
body.pv #pv-bar :is(.pv-nav-mid, .pv-nav-end){display:contents}   /* (the rooms pass, his item 23) the hall's middle and last group: boxes from 1024 only */
@media (min-width:1024px){
  /* the page: no row over it, its first part 24 under the lights' band (a link to a part stops there too) */
  body.pv #pv-page > .pv-local{display:none}
  body.pv #pv-page.pv-main{margin-top:var(--sp-6); padding-top:var(--sp-8)}   /* the lights' band (32) and 24: two steps of the scale */
  html:has(> body.pv):where(:not(:has(> .pv-k-door))){scroll-padding-top:calc(var(--sp-8) + var(--sp-6))}
  /* Settings' tabs: the segmented row in its head from 1024; its own tabs for the narrower widths */
  body.pv #pv-page:has(> .pv-local.is-tabs) > .pv-head > .pv-tabs{display:none}

  /* the hall: the strip not drawn; 240 open, 64 folded; the window's height on --bar */
  body.pv > .pv-top{display:none}
  body.pv.pv-rail .pv-shell:has(> #pv-page){grid-template-columns:var(--sidebar-folded) minmax(0, 1fr)}
  body.pv #pv-bar{background:var(--bar)}
  body.pv:is(.theme-wine, .theme-midnight) #pv-bar{box-shadow:inset -1px 0 0 var(--bar-line)}
  body.pv #pv-bar .pv-nav-in, body.pv.pv-rail #pv-bar .pv-nav-in{top:0; height:100vh; box-sizing:border-box; display:flex; flex-direction:column; overflow:hidden; padding:var(--sp-8) var(--sp-3) var(--sp-3)}
  /* (the rooms pass, his item 23) it fits the window: open and folded at 1440 by 900 and 1280 by 800 nothing scrolls; on a shorter window
     the last group (Your page, Settings) stays at the hall's foot and only the middle (the search to Notifications) scrolls, its bar
     unseen at rest; the middle's 4 of room round it keeps a field's ring whole */
  body.pv #pv-bar .pv-nav-mid{display:block; flex:0 1 auto; min-height:0; margin:calc(-1 * var(--sp-1)); padding:var(--sp-1); overflow:hidden auto; overscroll-behavior:contain; scrollbar-width:none}
  body.pv #pv-bar .pv-nav-mid::-webkit-scrollbar{display:none}
  body.pv #pv-bar .pv-nav-end{display:block; flex:none}
  /* (the deploy round, 27 Oct 2026, his item 2: the folded hall breathes again; it was the alignment round's rows 44 none apart and the
     search row 44 with 16 under it) folded, the rows 46 (5, the icon 20, 4, the name 12, 5) and 2 apart, the search row 48 and 12 under
     it, the dividers 8, 1, 8, 12 at the foot: the first of his order that fits in 736 (his 48, 4 apart and 10, 1, 10 come to 787) */
  :root body.pv.pv-rail #pv-bar :is(.pv-list, .pv-bells){gap:2px}
  :root body.pv.pv-rail #pv-bar .pv-list a{gap:var(--sp-1); height:46px; min-height:46px; padding:0}
  :root body.pv.pv-rail #pv-bar .pv-hall-findic{gap:var(--sp-1); height:48px; min-height:48px; margin-bottom:var(--sp-3); padding:0}
  :root body.pv.pv-rail #pv-bar :is(.pv-hall-findic, .pv-list a) .pv-l{line-height:12px}
  :root body.pv.pv-rail #pv-bar :is(.pv-nav-rule, .pv-bells-rule){margin-top:var(--sp-2); margin-bottom:var(--sp-2)}
  :root body.pv.pv-rail #pv-bar .pv-list a .pv-badge{top:2px}
  body.pv.pv-rail #pv-bar .pv-nav-in{padding-left:var(--sp-1); padding-right:var(--sp-1)}   /* (take three) folded, each row 76 wide: room for "Notifications" at 12 */
  /* (take three) folded, the page's gutters 28, not 32: the hall's 20 more would leave a 1024 window's page 876, under the 880 its side
     columns and Home's grid stand beside the main from (the container queries in the older sheets); 884 keeps every one as at 64 */
  body.pv.pv-rail #pv-page.pv-main{padding-left:calc(var(--sp-6) + var(--sp-1)); padding-right:calc(var(--sp-6) + var(--sp-1))}
  /* (the cleanup, his 1c) Memories' door tiles, two across in that page, are 6 narrower each than at 64: folded, 8 between a tile's key
     and its words, not 16 (its padding as it was), so After the wedding's line keeps one line at 1024 as it did at 64 */
  body.pv.pv-rail #pv-page.pvr-memdoor .pv-roomtiles a.pv-card.pv-roomtile{gap:var(--sp-2)}
  /* the head: the mark and the names on one line (28), the days 4 under the names; (the rooms pass, his item 22) 72 tall, the brand in its
     middle (56 folded, the mark on the open names' line) */
  body.pv #pv-bar .pv-hall{display:block; padding:0}
  body.pv #pv-bar .pv-hall-id{display:flex; align-items:flex-start; gap:var(--sp-2); box-sizing:border-box; height:72px; padding:11px var(--sp-8) 11px var(--sp-3); color:var(--bar-ink); text-decoration:none}
  body.pv #pv-bar .pv-hall-mark{display:flex; align-items:center; flex:none; height:28px; color:var(--bar-ink)}
  body.pv #pv-bar .pv-hall-mark .mark.letters{font-size:var(--fs-md)}
  body.pv #pv-bar .pv-hall-tx{display:flex; flex-direction:column; min-width:0}
  body.pv #pv-bar .pv-hall-names{font-size:20px; line-height:28px; white-space:normal; color:var(--bar-ink)}
  body.pv #pv-bar .pv-hall-togo{display:block; margin-top:var(--sp-1); font:400 var(--fs-sm)/18px var(--ui); font-style:normal; color:var(--bar-ink-2); white-space:nowrap}
  body.pv #pv-bar .pv-hall-togo.is-unseen{visibility:hidden}
  /* the fold (the rooms pass, his item 21; it reverses the 26 Oct "never on the colour boundary" for this control alone): a handle on the
     edge, a 28 circle on --surface with a 1px --line-2 edge and --shadow-1, the chevron 16 in --ink-2, centred on the hall's right edge
     (14 each side of it) at the middle of the names' line; folded the same circle on the folded edge at the same height, pointing
     right. Over the page, so the whole circle takes a press on both sides of the edge; the fold row under the mark is gone */
  body.pv #pv-bar .pv-bar-k, body.pv.pv-flow.pv-bar-js #pv-bar .pv-bar-k, body.pv.pv-rail #pv-bar .pv-bar-k, body.pv.pv-flow.pv-bar-js.pv-rail #pv-bar .pv-bar-k{display:block; position:sticky; top:calc(var(--sp-8) + 11px); height:0; z-index:40}
  body.pv #pv-bar .pv-bar-t.pv-bar-t, body.pv.pv-rail #pv-bar .pv-bar-t.pv-bar-t{position:absolute; top:0; left:calc(100% - 14px); right:auto; bottom:auto; box-sizing:border-box; width:28px; height:28px; margin:0; padding:0; display:grid; place-items:center;
    border:1px solid var(--line-2); border-radius:var(--r-full); background:var(--surface); color:var(--ink-2); box-shadow:var(--shadow-1); transform:none; cursor:pointer}
  body.pv #pv-bar .pv-bar-t.pv-bar-t:hover{background:linear-gradient(var(--hover), var(--hover)) var(--surface); color:var(--ink)}
  body.pv #pv-bar .pv-bar-t.pv-bar-t:focus-visible{outline:none !important; box-shadow:var(--shadow-1), 0 0 0 2px color-mix(in srgb, var(--wine) 72%, transparent)}
  body.pv #pv-bar .pv-bar-t.pv-bar-t > svg{width:16px; height:16px}
  body.pv #pv-bar .pv-bar-t.pv-bar-t::after{content:none}
  /* the search: a row, the first above the nav: 40, --r-sm, --surface (the bar's own on Wine and Midnight, so its words read), a 1px
     --bar-line edge; the magnifier where the icons stand, the words at the nav's size in --bar-ink-2; the same form to the same page */
  body.pv #pv-bar .pv-hall-find{display:flex; align-items:center; gap:var(--sp-3); box-sizing:border-box; width:100%; max-width:none; height:40px; margin:0 0 var(--sp-4); padding:0 var(--sp-3);
    border:0; border-radius:var(--r-sm); background:var(--surface); box-shadow:inset 0 0 0 1px var(--bar-line); color:var(--bar-ink); cursor:text;   /* its edge drawn inside, so the magnifier stands 12 in, on the icons' line */
    transition:background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out)}
  body.pv #pv-bar .pv-hall-find:hover{background:var(--bar-hover)}
  body.pv #pv-bar .pv-office{margin:0 0 var(--sp-3)}   /* (planners, 11 Nov 2026) her Weddings, first in the rail where her firm has an office (kit.js nav): 12 over the search */
  body.pv #pv-bar .pv-hall-find:focus-within{box-shadow:inset 0 0 0 1px var(--bar-ink); background:var(--surface)}
  /* (take three, his item 7) the ring is the row's, at its own corners; the field inside it draws none (preview-lift.css gives every
     focused control the house's ring, !important, so this one says so too) */
  body.pv #pv-bar .pv-hall-find:focus-within{outline:2px solid color-mix(in srgb, var(--wine) 72%, transparent); outline-offset:0}   /* (the rooms pass, his R8) the field's ring */
  body.pv #pv-bar .pv-hall-find input:is(:focus, :focus-visible){outline:none !important}
  body.pv:is(.theme-wine, .theme-midnight) #pv-bar .pv-hall-find, body.pv:is(.theme-wine, .theme-midnight) #pv-bar .pv-hall-find:focus-within{background:var(--bar)}
  body.pv:is(.theme-wine, .theme-midnight) #pv-bar .pv-hall-find:hover{background:var(--bar-hover)}
  body.pv #pv-bar .pv-hall-find .pv-find-ic{display:grid; place-items:center; flex:none; width:20px; height:20px; color:var(--bar-icon)}
  body.pv #pv-bar .pv-hall-find .pv-find-ic > svg{width:20px; height:20px; stroke-width:1.75}
  body.pv #pv-bar .pv-hall-find input{flex:1 1 auto; min-width:0; height:100%; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; outline:0;
    font:400 var(--fs-base)/20px var(--ui); color:var(--bar-ink)}
  body.pv #pv-bar .pv-hall-find input::placeholder{color:var(--bar-ink-2); opacity:1}
  body.pv #pv-bar .pv-hall-findic{display:none}
  /* folded (84): the mark centred in the 56 head on the open names' line (the fold on the edge beside it), the magnifier with "Search" under
     it, 16, the rows */
  body.pv.pv-rail #pv-bar .pv-hall{display:flex; flex-direction:column; align-items:center; padding:0}
  body.pv.pv-rail #pv-bar .pv-hall-id{justify-content:center; height:56px; padding:11px 0 17px; margin:0}
  body.pv.pv-rail #pv-bar :is(.pv-hall-tx, .pv-hall-find){display:none}
  body.pv.pv-rail #pv-bar .pv-hall-findic{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-1); box-sizing:border-box; width:100%; min-height:52px;
    margin:0 0 var(--sp-4); padding:6px 0; border-radius:var(--r-sm); color:var(--bar-ink); font:500 var(--fs-xs)/16px var(--ui); text-decoration:none}
  body.pv.pv-rail #pv-bar .pv-hall-findic > svg{width:20px; height:20px; stroke-width:1.75; color:var(--bar-icon)}
  body.pv.pv-rail #pv-bar .pv-hall-findic:hover{background:var(--bar-hover); color:var(--bar-ink)}
  /* the nav on the bar: --bar-ink words, --bar-icon icons, hover --bar-hover; the current item a --bar-cur pill, --bar-cur-ink words and a
     --wine icon; the dividers --bar-line; then the bells (Messages, Notifications), then you */
  body.pv #pv-bar .pv-bells-rule{display:block}
  /* (the rooms pass, his item 22) the rows: 36 tall open, 52 folded (the icon 20, 4, the name 12), 4 apart; the groups 12, a 1px hairline, 12 */
  body.pv #pv-bar :is(.pv-list, .pv-bells){display:flex; flex-direction:column; gap:var(--sp-1)}
  body.pv:not(.pv-rail) #pv-bar .pv-list a{min-height:36px}
  body.pv #pv-bar .pv-nav-rule{margin:var(--sp-3) var(--sp-3)}
  body.pv #pv-bar .pv-list a{color:var(--bar-ink)}
  body.pv #pv-bar .pv-list a > svg{color:var(--bar-icon)}
  body.pv #pv-bar .pv-list a:hover{background:var(--bar-hover); color:var(--bar-ink)}
  body.pv #pv-bar .pv-list a[aria-current="page"], body.pv #pv-bar .pv-list a[aria-current="page"]:hover{background:var(--bar-cur); color:var(--bar-cur-ink)}
  body.pv #pv-bar .pv-list a[aria-current="page"] > svg{color:var(--wine)}
  body.pv #pv-bar .pv-list .pv-nav-ai a > svg, body.pv #pv-bar .pv-list .pv-nav-ai a[aria-current="page"] > svg{color:var(--gold)}   /* (take three) Saathi's mark stays gold (rule 19) */
  body.pv #pv-bar .pv-nav-rule{background:var(--bar-line)}
  /* folded (take three, his item 1: "icons alone are unreadable for the family"): each row its icon with its name under it, at 12, on one
     line, centred, as take one drew it at 1024; the current one a --bar-cur pill round both; no tooltip */
  body.pv.pv-rail #pv-bar .pv-list a{position:relative; flex-direction:column; justify-content:center; align-items:center; gap:var(--sp-1); box-sizing:border-box; width:100%; height:auto; min-height:52px;
    margin:0; padding:6px 0; font:500 var(--fs-xs)/16px var(--ui)}
  body.pv.pv-rail #pv-bar :is(.pv-list a, .pv-hall-findic) .pv-l{position:static; width:auto; height:auto; max-width:100%; margin:0; padding:0; overflow:visible; clip-path:none;
    font:500 var(--fs-xs)/16px var(--ui); letter-spacing:0; white-space:nowrap}
  body.pv.pv-rail #pv-bar .pv-nav-rule{margin:var(--sp-3) var(--sp-2)}
  /* the badge (section 20, one component with the phone's strip): at a row's end in the hall, on the icon's top-right corner folded */
  body.pv #pv-bar .pv-list a .pv-badge{position:static; flex:none; margin:0 0 0 auto}
  body.pv.pv-rail #pv-bar .pv-list a .pv-badge{position:absolute; top:var(--sp-1); left:calc(50% + 2px); right:auto; margin:0}   /* (take three) on the icon's top-right corner, the icon 20 centred, 8 down */

  /* the segmented row (kit.js segRow), drawn from 1024; its look (after this block) is every width's, for the day's picker */
  body.pv #pv-page .pv-segrow{display:flex}
  /* (take three, his item 2) the row is the first thing after the page's head, at its left, never above it: on the home under the hero,
     the first thing in the column, the greeting 24 under it (and on a day's page under its hero); on a page with a head, under its title
     and deck on the action row's line: the tabs at the left, the page's buttons (or the day's picker) at the right */
  body.pv #pv-page > .pv-segrow, body.pv #pv-page .pv-feedcol > .pv-segrow{display:flex; margin:0 0 var(--sp-6)}
  body.pv #pv-page .pv-head .pv-head-row > .pv-segrow{display:flex; grid-column:1; grid-row:2; align-self:center; justify-self:start}
  body.pv #pv-page .pv-head .pv-head-row:has(> .pv-segrow):not(:has(> .pv-head-mark)) > .pv-head-tx{grid-column:1 / -1}
  body.pv #pv-page .pv-head .pv-head-row:has(> .pv-segrow) > .pv-head-acts{grid-column:2; grid-row:2; align-self:center; justify-self:end; flex-wrap:nowrap}
  body.pv #pv-page .pv-head .pv-head-row:has(> .pv-segrow):has(> .pv-head-mark):has(> .pv-head-acts){grid-template-columns:minmax(0, 1fr) auto auto}
  body.pv #pv-page .pv-head .pv-head-row:has(> .pv-segrow):has(> .pv-head-mark):has(> .pv-head-acts) > .pv-head-mark{grid-column:3}
  /* (take three, his item 2) the day's picker at the row's right end, on its line (the day page has no primary there) */
  body.pv #pv-page .pv-head .pv-head-row > .pv-segrow.pv-daypick{grid-column:1 / -1; grid-row:2; justify-self:end; align-self:center}

  /* your own page's head: what the portrait's menu held, as quiet links, the house's note at the line's end */
}
/* (take three) the segmented row's look, at every width: from 1024 the row (section 11 draws it), and the day's picker everywhere (22) */
/* the segmented row (kit.js segRow): the composer's type row, each segment its words wide, the current one on --paper; when the
   segments do not fit it scrolls sideways, its trailing 24 faded while more is to come (public/preview-home.js marks it); nothing wraps */
body.pv #pv-page .pv-segrow{flex-wrap:nowrap; align-items:stretch; box-sizing:border-box; width:max-content; max-width:100%; min-width:0; height:40px; margin:0; padding:0;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:none}
body.pv #pv-page .pv-segrow::-webkit-scrollbar{display:none}
body.pv #pv-page .pv-segrow[data-more]{-webkit-mask-image:linear-gradient(to right, var(--ink) calc(100% - var(--sp-6)), transparent); mask-image:linear-gradient(to right, var(--ink) calc(100% - var(--sp-6)), transparent)}
body.pv #pv-page .pv-segrow > a{display:inline-flex; align-items:center; gap:var(--sp-2); flex:none; height:38px; margin:0; padding:0 var(--sp-3); border:0; border-radius:0; background:transparent;
  font:500 var(--fs-sm)/20px var(--ui); letter-spacing:0; color:var(--ink-2); text-decoration:none; white-space:nowrap;
  transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out)}
body.pv #pv-page .pv-segrow > a:hover{background:var(--hover); color:var(--ink)}
body.pv #pv-page .pv-segrow > a[aria-current="page"], body.pv #pv-page .pv-segrow > a[aria-current="page"]:hover{background:var(--paper); color:var(--ink)}
:is(.theme-wine, .theme-midnight).pv #pv-page .pv-segrow{--ink:var(--page-ink); --ink-2:var(--page-ink-2); --ink-3:var(--page-ink-3); color:var(--ink)}
/* the one sub-tab look, everywhere: Settings' underline. Words --ink-2 at 14, the chosen one --ink on a 2px wine line; the bar's rooms, a
   room's own views (To do's, Money's, the photographs'), Settings' tabs, all the same */
body.pv #pv-page :is(.pv-local > .pv-chips.pv-wingrow, .pv-tabs) > a{display:inline-flex; align-items:center; gap:var(--sp-2); flex:none; height:auto; min-height:40px;
  margin:0; padding:0; border:0; border-bottom:2px solid transparent; border-radius:0; background:none; box-shadow:none;
  font:500 var(--fs-base)/20px var(--ui); letter-spacing:0; color:var(--ink-2); text-decoration:none; white-space:nowrap;
  transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out)}
body.pv #pv-page :is(.pv-local > .pv-chips.pv-wingrow, .pv-tabs) > a:hover{color:var(--ink); background:none}
body.pv #pv-page :is(.pv-local > .pv-chips.pv-wingrow, .pv-tabs) > a:is([aria-current="page"], [aria-current="true"]){color:var(--ink); border-bottom-color:var(--wine); background:none; font-weight:500}
body.pv #pv-page .pv-local > .pv-chips.pv-wingrow > a{min-height:0; margin-bottom:-1px}   /* (the fix round, C.7) the chosen one's wine line lies on the bar's rule, not 1 over it */
body.pv #pv-page .pv-local > .pv-chips.pv-wingrow > a > :is(svg, i, .pv-dot){display:none}
body.pv #pv-page .pv-tabs{display:flex; flex-wrap:nowrap; gap:0 var(--sp-6); margin:var(--sp-6) 0 0; padding:0; border:0; box-shadow:inset 0 -1px 0 var(--line); overflow-x:auto; scrollbar-width:none}   /* the row's rule drawn inside it, so the chosen one's wine line covers it (a scrolling row clips what hangs below) */
body.pv #pv-page .pv-tabs > a > .pv-tabs-n{font-size:var(--fs-sm); font-weight:500; color:var(--ink-3); font-variant-numeric:tabular-nums}

/* 12. One page chrome: under the bar, the title with its full stop (Inter 600 at 32, 1.1, -0.01em), one line of deck in --ink-2, then
   the action row; 32 to what follows */
body.pv #pv-page .pv-head{margin:0 0 var(--sp-8); padding:0}
body.pv #pv-page .pv-head h1{font:600 var(--fs-2xl)/var(--lh-display) var(--ui); letter-spacing:-.01em; color:var(--ink); margin:0}
body.pv #pv-page .pv-head .pv-head-row{display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:var(--sp-6); row-gap:var(--sp-4); align-items:start}
body.pv #pv-page .pv-head .pv-head-tx{grid-column:1; min-width:0}
body.pv #pv-page .pv-head .pv-head-mark{grid-column:2; grid-row:1 / span 2}
body.pv #pv-page .pv-head .pv-head-acts{grid-column:1; display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin:0; padding:0}
body.pv #pv-page .pv-head .pv-head-sub{margin:var(--sp-2) 0 0; font:400 var(--fs-md)/var(--lh-body) var(--ui); color:var(--ink-2)}
body.pv #pv-page .pv-head .pv-head-sub + .pv-head-sub{margin-top:var(--sp-1); font-size:var(--fs-base); color:var(--ink-3)}
body.pv #pv-page .pv-head > .pv-back{margin:0 0 var(--sp-4)}
body.pv #pv-page .pv-head .pv-head-row + .pv-tabs{margin-top:var(--sp-6)}

/* 13. One card on every page: the surface, 1px --line, 12 round, --shadow-1, 24 in (16 in the rail); a head is its title at the left
   (Inter 600, 16; the rail's 14) and at most one quiet link at the right; strip A stays where the wing has it (Home, the posts), and a
   head on no strip has a line under it. A card is never inside a card: a card's own parts lose their edge, ground and shadow. */
body.pv:where(:not(.pv-k-door)) #pv-page .pv-card{background-color:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-1)}
body.pv #pv-page :is(.pv-col-side, .pv-sidecol, .pvo-around){--card-in:var(--sp-4)}
body.pv #pv-page .pv-card.pv-pad{padding:var(--card-in)}
body.pv #pv-page :is(.pv-col-side, .pv-sidecol) .pv-card.pv-pad{padding:var(--sp-4)}
body.pv #pv-page .pv-card :is(.pv-panel-h, .pvp-group-h h2, .pvp-group-h h3, .pv-moneygroup-h h2, .pv-moneygroup-h h3){font:600 var(--fs-md)/var(--lh-heading) var(--ui); letter-spacing:0; text-transform:none}
body.pv #pv-page :is(.pv-col-side, .pv-sidecol, .pvo-around, .pv-days-nav) .pv-card .pv-panel-h{font-size:var(--fs-base)}
body.pv #pv-page .pv-card > .pv-panel-top{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); min-height:48px; padding-inline:var(--card-in)}
body.pv #pv-page :is(.pv-col-side, .pv-sidecol) .pv-card > .pv-panel-top{min-height:44px}
body.pv #pv-page .pv-card:not(.pv-post, .pv-home *) > .pv-panel-top{border-bottom:1px solid var(--line); margin-bottom:var(--sp-4)}
/* no card inside a card: what sits in a card is its part */
body.pv #pv-page :is(.pv-card, .pvm-side) :is(.pv-card, .pvm-side, .pv-fold.pv-card){border:0; border-radius:0; box-shadow:none; background-color:transparent}
/* quiet links: one look (no underline), the head's one link and every See all, Your line, All four */
body.pv:where(:not(.pv-k-door)) #pv-page .pv-more-link{display:inline-flex; align-items:center; flex:none; margin:calc(-1 * var(--sp-1)) calc(-1 * var(--sp-2)); padding:var(--sp-1) var(--sp-2);
  border-radius:var(--r-sm); font:500 var(--fs-sm)/20px var(--ui); color:var(--ink-2); text-decoration:none}
body.pv:where(:not(.pv-k-door)) #pv-page .pv-more-link:hover{background:var(--hover); color:var(--ink)}
body.pv #pv-page button.pv-more-link{border:0; background:none; cursor:pointer}   /* (the fix round) a quiet link that opens in place, "Show everyone" */
body.pv #pv-page button.pv-more-link:hover{background:var(--hover)}

/* (the fix round, his E.12) every upload control a secondary button with its icon (36; 32 inside a card or a dialog); the one true drop
   place (Documents' add form, preview-lift.css .pvx-dz) a 1px --line-2 edge on --paper */
body.pv:where(:not(.pv-k-door)) #pv-page .pv-file-l{gap:var(--sp-2); height:36px; min-height:36px; padding:0 var(--sp-4); border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--surface); font:500 var(--fs-base)/20px var(--ui); color:var(--ink)}
body.pv:where(:not(.pv-k-door)) #pv-page :is(.pv-card, .pv-sect, .pv-dialog) .pv-file-l{height:32px; min-height:32px; padding:0 var(--sp-3); font-size:var(--fs-sm)}
body.pv:where(:not(.pv-k-door)) #pv-page .pv-file:hover .pv-file-l{background:var(--hover); border-color:var(--line-2); color:var(--ink)}
body.pv:where(:not(.pv-k-door)) #pv-page .pv-file-l > svg{width:16px; height:16px; flex:none; color:var(--ink-2)}

/* 14. Buttons on every page: three roles, two sizes (section 6 draws them); one primary a page, the page's main Add: the head's first
   primary, Memories' Add photographs, Your page's details, the composer's Post, and Let in while a request shows. (the cleanup, his
   1b) The head's first primary, not its first button: in an Upgraded house a room's Ask Saathi, a Secondary, comes before it */
body.pv #pv-page .pv-head .pv-head-acts > .pv-btn.pv-btn-primary:nth-child(1 of .pv-btn-primary),
body.pv #pv-page .pv-head .pv-head-acts > :first-child > summary.pv-btn.pv-btn-primary,
body.pv #pv-page .pv-profile-acts > .pv-btn.pv-btn-primary:first-child{background:var(--wine); border-color:transparent; color:var(--on-wine)}
body.pv #pv-page .pv-head .pv-head-acts > .pv-btn.pv-btn-primary:nth-child(1 of .pv-btn-primary):hover,
body.pv #pv-page .pv-head .pv-head-acts > :first-child > summary.pv-btn.pv-btn-primary:hover,
body.pv #pv-page .pv-profile-acts > .pv-btn.pv-btn-primary:first-child:hover{background:var(--wine-press)}
body.pv #pv-page :is(.pv-meta, .pv-c-when, .pv-row-m){color:var(--ink-3)}

/* 15. Motion, Home's rules on every page: the page's first five parts come in (up 6, from nothing, 30 apart); menus and pop-overs up 4
   over --dur-fast; dialogs: the backdrop's opacity and the panel's opacity and scale(.96) over --dur, out over --dur-fast; toasts up 8
   over --dur. Only transform and opacity move; with reduced motion nothing does, the petals and the bulbs included. */
/* (audit fix, 11 Nov 2026) Every entrance in the house lets go when it ends (fill backwards, never both): an end held for ever kept each
   row, card or block a layer of its own, so a menu opening over the next one landed under it (App audit (11 Nov), findings 1 to 5).
   backwards holds the start through the delay, as both did, so every rise looks the same. Held still, each for its reason: the
   menus themselves (pvd-pop), the bar's glow (a ::before), the tab bar's icon (inside the bar's own layer), the hero's drift (rests at 1.04). */
@media (prefers-reduced-motion:no-preference){
  body.pv #pv-page.pv-main > :nth-child(-n+5 of :not(.pv-local, .pv-home, script, style, span, [hidden])){animation:pvh-in var(--dur) var(--ease-out) backwards}
  body.pv #pv-page.pv-main > :nth-child(2 of :not(.pv-local, .pv-home, script, style, span, [hidden])){animation-delay:30ms}
  body.pv #pv-page.pv-main > :nth-child(3 of :not(.pv-local, .pv-home, script, style, span, [hidden])){animation-delay:60ms}
  body.pv #pv-page.pv-main > :nth-child(4 of :not(.pv-local, .pv-home, script, style, span, [hidden])){animation-delay:90ms}
  body.pv #pv-page.pv-main > :nth-child(5 of :not(.pv-local, .pv-home, script, style, span, [hidden])){animation-delay:120ms}
  @keyframes pvd-pop{from{opacity:0; transform:translateY(4px)}}
  body.pv details[open] > .pv-menu-pop{animation:pvd-pop var(--dur-fast) var(--ease-out) both}
  /* a dialog (native, so focus goes in and comes back, and Esc closes) and a toast come in over --dur and leave over --dur-fast; their
     leaving waits for the motion (display, allow-discrete) */
  body.pv .pv-dialog, body.pv .pv-dialog::backdrop{transition:opacity var(--dur-fast) var(--ease-in), scale var(--dur-fast) var(--ease-in),
    overlay var(--dur-fast) var(--ease-in) allow-discrete, display var(--dur-fast) var(--ease-in) allow-discrete}
  body.pv .pv-dialog:not([open]){opacity:0; scale:.96}
  body.pv .pv-dialog:not([open])::backdrop{opacity:0}
  body.pv .pv-dialog[open], body.pv .pv-dialog[open]::backdrop{opacity:1; transition-duration:var(--dur); transition-timing-function:var(--ease-out)}
  body.pv .pv-dialog[open]{scale:1}
  @starting-style{ body.pv .pv-dialog[open]{opacity:0; scale:.96} body.pv .pv-dialog[open]::backdrop{opacity:0} }
  body.pv:where(:not(.pv-k-door)) .pv-toast{transition:opacity var(--dur-fast) var(--ease-in), translate var(--dur-fast) var(--ease-in), display var(--dur-fast) var(--ease-in) allow-discrete}
  body.pv:where(:not(.pv-k-door)) .pv-toast[hidden]{opacity:0; translate:0 8px}
  body.pv .pv-toast:not([hidden]){opacity:1; translate:0 0; transition-duration:var(--dur); transition-timing-function:var(--ease-out)}
  @starting-style{ body.pv .pv-toast:not([hidden]){opacity:0; translate:0 8px} }
}
@media (prefers-reduced-motion:reduce){
  body.pv:where(:not(.pv-k-door)) *, body.pv:where(:not(.pv-k-door)) *::before, body.pv:where(:not(.pv-k-door)) *::after, body.pv .pv-dialog::backdrop{animation:none !important; transition:none !important}
}

/* 16. The parts the sign-in page draws too (buttons, fields, the skip link, a date line, an error), on the scales here: the sign-in page
   keeps its own values, since it never reads this sheet (docs/polish-2026-10-26-apply/tools/scale.mjs skips their rules) */
body.pv:where(:not(.pv-k-door)){--hb:var(--fs-md); --r-sheet:var(--r-md)}
body.pv:where(:not(.pv-k-door)) .pv-btn{font-size:var(--fs-base)}
body.pv:where(:not(.pv-k-door)) .pv-field{gap:var(--sp-1)}
body.pv:where(:not(.pv-k-door)) .pv-field > label:not(.pv-choice):not(.pv-file), body.pv .pv-fs > .pv-field > label:not(.pv-choice){font-size:var(--fs-base)}
body.pv:where(:not(.pv-k-door)) :is(input[type=text], input[type=search], input[type=url], input[type=tel], input[type=email], input[type=number], input[type=date], input[type=time], input[type=datetime-local], input:not([type]), select, textarea){padding:var(--sp-2) var(--sp-3)}
body.pv:where(:not(.pv-k-door)) .pv-hint{margin-top:var(--sp-1)}
body.pv:where(:not(.pv-k-door)) .pv-error{margin:0 0 var(--sp-3); padding:var(--sp-3); font-size:var(--fs-base)}
body.pv:where(:not(.pv-k-door)) .pv-skip{padding:var(--sp-2) var(--sp-3)}
body.pv:where(:not(.pv-k-door)) .pv-dateline{gap:0; font-size:var(--fs-sm)}
body.pv .pv-voice{padding:0}
:where(body:not(.pv-k-door)) :where(body.pv :focus-visible){border-radius:var(--r-sm)}
/* a button with no padding of its own has none (not the browser's 1px 6px), so a post's "more" and the like sit on the grid */
:where(body.pv):where(:not(.pv-k-door)) button{padding:0}

/* a feed's posts (The log, a day's, a person's): the column's width, 32 apart, as Home's */
body.pv #pv-page :is(.pvo, .pvn, .pva) > .pv-feed{display:flex; flex-direction:column; gap:var(--sp-8); margin:0; padding:0}
body.pv #pv-page .pv-feed > *{width:auto; max-width:none; margin:0}
/* a done tick is gold (the brief's palette: gold for ticks), never a wine fill; a done list's own grey stays */
body.pv .pv-taskbox.is-on{border-color:var(--gold); background:var(--gold); color:var(--on-wine)}
body.pv .pvr-plan .pvp-done .pv-taskbox.is-on{border-color:var(--ink-2); background:var(--ink-2)}
body.pv:where(:not(.pv-k-door)) .pv-toast{box-shadow:var(--shadow-2)}
/* the phone's tab bar, the nav's treatment: 20 icons on a 1.75 line, the current one on --paper with a --wine icon (its words keep the
   theme's own colour), its ground changing over --dur-fast and nothing moving */
body.pv .pv-tabbar a .pv-tabbar-ic{width:48px; height:28px; border-radius:var(--r-full); transition:background-color var(--dur-fast) var(--ease-out); animation:none}
body.pv .pv-tabbar a .pv-tabbar-ic > svg{width:20px; height:20px; stroke-width:1.75}
body.pv .pv-tabbar a[aria-current="page"] .pv-tabbar-ic{background:var(--paper); color:var(--wine); animation:none}
body.pv .pv-tabbar a:active .pv-tabbar-ic{background:var(--hover)}

/* 17. The dark themes (wine and midnight; emerald went in the fix round), with the frame gone: what stands on the canvas (the header bar, a page's title and its
   line, the greeting, the end lines) takes the theme's own bar inks, as its rail's words do; what has a ground of its own (a card, the
   hero, a button, a field, a menu, a dialog) keeps the theme's ink; the chosen tab's line is the bar's ink, not wine on wine */
:is(.theme-wine, .theme-midnight).pv{--page-ink:var(--ink); --page-ink-2:var(--ink-2); --page-ink-3:var(--ink-3); --page-wine:var(--wine); --page-yes:var(--yes); --page-warn:var(--warn); --page-danger:var(--danger)}
:is(.theme-wine, .theme-midnight).pv #pv-page{--ink:var(--bar-ink); --ink-2:var(--bar-ink-2); --ink-3:var(--bar-ink-2); --wine:var(--bar-link); --yes:var(--bar-ink); --warn:var(--bar-ink); --danger:var(--bar-ink); color:var(--ink)}   /* (the fix round, F.15) and the words that take their colour from the page, not only those that name --ink: a heading, a name */
:is(.theme-wine, .theme-midnight).pv #pv-page :is(.pv-card, .pv-home .pv-sect, .pv-hero, .pvm-side, .pv-cover, .pv-dayhero, .pv-btn:not(.pv-btn-quiet, .pv-btn-danger), .pv-dialog, .pv-menu-pop, input, select, textarea, .pv-chip, .pv-seg3, .pv-dtile, .pv-paperband, .pv-linkline, .pvp-switch > a, .pv-tabs-n, .pv-meal){--ink:var(--page-ink); --ink-2:var(--page-ink-2); --ink-3:var(--page-ink-3); --wine:var(--page-wine); --yes:var(--page-yes); --warn:var(--page-warn); --danger:var(--page-danger)}
:is(.theme-wine, .theme-midnight).pv #pv-page :is(.pv-card, .pv-home .pv-sect, .pv-hero, .pvm-side, .pv-cover, .pv-dayhero, .pv-dialog, .pv-menu-pop, .pv-paperband, .pv-linkline, .pvp-switch > a, .pv-tabs-n, .pv-chip, .pv-meal){color:var(--ink)}   /* what has a ground of its own keeps the page's words */
/* (the fix round, F.15) on the canvas a link takes the bar's link colour and a word in a meaning's colour the bar's ink; what has a ground
   (above) keeps the page's, a filled button its wine. (the fix round, F.15) a section is a ground only on Home (its rail's and its feed's); a room's sits on the canvas, its words the bar's.
   Three words drawn in a meaning's colour stand on the canvas too: "Earlier" (gold) in the bar's gold, "here now" and "nine late" in its ink */
:is(.theme-wine, .theme-midnight).pv #pv-page .pvn-thread > span{color:var(--bar-amp)}
:is(.theme-wine, .theme-midnight).pv #pv-page :is(.pv-profile .is-now, .pvp-late){color:var(--bar-ink)}
:is(.theme-wine, .theme-midnight).pv #pv-page :is(.pv-local > .pv-chips.pv-wingrow, .pv-tabs) > a:is([aria-current="page"], [aria-current="true"]){border-bottom-color:var(--bar-ink)}
:is(.theme-wine, .theme-midnight).pv #pv-bar .pv-list a[aria-current="page"]{background:var(--bar-cur); color:var(--bar-cur-ink)}
:is(.theme-wine, .theme-midnight).pv #pv-bar .pv-list a[aria-current="page"] > svg{color:var(--bar-cur-ink)}   /* (the fix round, F.15) the nav's --wine is the bar's pale link: on the pale pill the icon went with it */
:is(.theme-wine, .theme-midnight).pv #pv-bar .pv-bar-t{color:var(--bar-ink-2)}
:is(.theme-wine, .theme-midnight).pv #pv-bar .pv-bar-t:hover{background:var(--bar-hover); color:var(--bar-ink)}
/* the header bar stands on the canvas, as everything else now does (on Paper white the canvas is the surface it had) */
body.pv #pv-page > .pv-local{background:var(--canvas)}

/* 18. The real house's Home (the apply pass, item 13): How far along, People in the house, Coming up and Messages go through the cards'
   rules above (the rail's sections and How far along's .pv-card, strip A on each); one rule was missing: How far along in the rail
   takes the rail's 16 in and 44 head, as the rail's other cards do, not the main column's 24 and 48 */
body.pv #pv-page .pv-home.pvn .pv-sidecol > .pvx-lead{padding:var(--sp-4); --strip-h:44px}
body.pv #pv-page .pv-home.pvn .pv-sidecol > .pvx-lead > .pvx-lead-top{height:44px; margin:calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) var(--sp-4); padding:0 var(--sp-4)}
body.pv #pv-page .pv-home.pvn .pv-sidecol > .pvx-lead .pv-panel-h{font-size:var(--fs-base)}
/* a dialog's own submit is its one primary (the page behind it is under the scrim while it is open) */
:is(body.pv, body.pv #pv-page) .pv-dialog .pv-btn.pv-btn-primary.pv-btn:not(.pv-seg3 > .pv-btn){background:var(--wine); border-color:transparent; color:var(--on-wine)}
:is(body.pv, body.pv #pv-page) .pv-dialog .pv-btn.pv-btn-primary.pv-btn:not(.pv-seg3 > .pv-btn):hover{background:var(--wine-press)}

/* 19. The closing touches (26 Oct 2026, night: his last calls on the fix round; DESIGN.md). The photographs keep 12 (--r-img) as the
   cards, the panels, the dialogs and the controls go to 16 (tokens.css): a photograph's tile, an album's cover, a room's tile, a day's
   card, the memory's card, a feed head's picture, and the hero's photograph at its top corners (its panel's foot keeps the card's 16).
   The head's cream panels (the hero's panel, How is today?, From the two of us: Phase 1's one cream) on --panel, a quieter cream than the
   strips' --paper, which stays on the nav's current item, the Messages strip and every strip; the themes give --panel their own surface.
   On the dark themes the fold wears the bar it stands on, the bar's own ring and chevron (the nav's --line and --ink-2 are the bar's) */
body.pv #pv-page :is(a.pv-tile, .pv-album-cover, a.pv-roomtile, a.pv-daycard, a.pvo-memory, .pv-fh-lead.is-pic), body.pv #pv-page .pv-home.pvn a.pvo-memory.pv-card.pv-card{border-radius:var(--r-img)}   /* (the memory's card over section 2's home card) */
body.pv #pv-page .pv-hero{border-radius:var(--r-img) var(--r-img) var(--r-md) var(--r-md)}
body.pv #pv-page .pv-hero-foot, body.pv #pv-page .pv-home :is(.pvh-today, .pv-fromus).pv-card.pv-card.pv-card{--s-tint:var(--panel); background-color:var(--panel); background-image:none}   /* (over section 2's card on the home) */
body.pv:is(.theme-wine, .theme-midnight) #pv-bar .pv-bar-t{background:var(--bar)}
body.pv:is(.theme-wine, .theme-midnight) #pv-bar .pv-bar-t:hover{background:var(--bar-hover)}

/* 20. Take two (26 Oct 2026, night: his rework of the hall; DESIGN.md). The greeting and How is today? are one block with no box: the
   greeting, 8 under it one line (the question in --ink-2, the three moods as pills in their tints with a 1px edge in their meaning's
   colour, then the other's answer in --ink-3 at the line's end), 32 above and below as before; on a phone the line may wrap. On Wine and
   Midnight the line stands on the canvas, so it takes the bar's inks (section 17); the moods keep their own ground. */
body.pv #pv-page .pv-home.pvn .pvh-today.pv-card.pv-card.pv-card{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-3); margin:var(--sp-2) 0 0; padding:0;
  border:0; border-radius:0; outline:0; background:none; box-shadow:none}
body.pv #pv-page .pv-home.pvn .pvn-door > .pvh-today.pv-card.pv-card.pv-card{margin:0}   /* (the door is a column 8 apart: the line 8 under the greeting) */
body.pv #pv-page .pv-home.pvn .pvh-today.pv-card.pv-card > .pvh-today-q{order:0; align-self:center; margin:0; font:400 var(--fs-base)/20px var(--ui); letter-spacing:0; color:var(--ink-2)}
body.pv #pv-page .pv-home.pvn .pvh-today.pv-card.pv-card > .pvh-today-f{order:0; align-self:center; margin:0}
body.pv #pv-page .pv-home.pvn .pvh-today.pv-card.pv-card > .pvh-today-said{order:0; align-self:center; flex:0 1 auto; width:auto; margin:0 0 0 auto; font:400 var(--fs-base)/20px var(--ui); color:var(--ink-3)}
body.pv #pv-page .pv-home.pvn .pvh-today-f > .pv-btn[data-mood]:not([aria-pressed="true"]){border-color:var(--m)}
body.pv #pv-page .pv-home.pvn .pvh-today-f > .pv-btn[data-mood]{border-radius:var(--r-full)}
:is(.theme-wine, .theme-midnight).pv #pv-page .pv-home.pvn .pvh-today.pv-card{--ink:var(--bar-ink); --ink-2:var(--bar-ink-2); --ink-3:var(--bar-ink-2); color:var(--ink)}
/* the theme swatches (Settings › The house › The colours) paint their own themes whatever the house wears: each swatch wears its theme's
   class, and White's has its own whole block (tokens.css), so its canvas, bar, surface, wine and ink are its own; the bar is the bar's
   colour, with the bar's 1px edge where the bar is the canvas's colour (Wine, Midnight); the chosen ring stays wine */
body.pv #pv-page .pvx-colours .pvx-sw-bar{background:var(--bar)}
body.pv #pv-page .pvx-colours .pvx-sw.is-dark .pvx-sw-bar{box-shadow:inset -1px 0 0 var(--bar-line)}
/* the badge, one component in the hall and the phone's strip (his item 5, and his answer A: the same badge on the phone): 18 tall, at
   least 18 wide, 0 5 in, round; the bar's badge pair at 11, Inter 600, tabular figures: --wine with --on-wine on White and Linen; on Wine and
   Midnight, where the hall's --wine is the bar's pale link, the bar's pale pill with its dark ink (the strip's own pair there already); one
   digit a circle, two a short pill, "99+" over 99 (kit.js badge). In the hall at a row's end (section 11); in the strip over its icon's
   top-right corner, offset 40%. The tab bar's own is not this one */
body.pv :is(#pv-bar, .pv-top-acts) .pv-badge{display:inline-grid; place-items:center; box-sizing:border-box; min-width:18px; height:18px; padding:0 5px; border-radius:var(--r-full);
  background:var(--bar-badge); color:var(--bar-badge-ink); font:600 11px/18px var(--ui); font-variant-numeric:tabular-nums; letter-spacing:0; box-shadow:none}
body.pv .pv-top-acts .pv-icon-btn > .pv-badge{position:absolute; top:calc(50% - 11px); right:calc(50% - 11px); bottom:auto; left:auto; transform:translate(40%, -40%)}
/* (take three, his item 1) the hall's tooltips are gone: folded, each row says its name under its icon */

/* 21. Illustrations (26 Oct 2026, night; DESIGN.md 11 "Illustration"; views/preview/art.js places them, tools/illustrations.mjs cuts
   them): the haveli, his choice of 27 Oct 2026, the one set (the cleanup, that day: the switch, the other set and the old
   paintings gone; what was the switch's attribute on <html> is :root, the same weight, so the cascade is take three's). A painting
   is on white paper: on White and Linen it lies on the page by multiply, so the paper is gone and the paint bleeds into the canvas;
   on Wine and Midnight it is not blended but sits on a --surface panel, 16 in, --r-md round (a wing's card on Rooms is that panel
   already). Planning's and Celebrations' wide banners are put away. The phone's rules are in section 1's block. */
.art{display:block; max-width:100%; mix-blend-mode:multiply}
:is(.theme-wine, .theme-midnight) .art{mix-blend-mode:normal; box-sizing:content-box; padding:16px; border-radius:var(--r-md); background:var(--surface)}
:root body.pv:is([data-wing="plan"], [data-wing="cel"]) #pv-page:has(> .pv-head.is-art-door) > .pv-cover{display:none}
/* multiply meets the canvas, not a part's own layer: a page's first parts rise in (section 15) and keep the motion's end, a layer of
   their own, so a part holding a painting lets it go once it is in; and the painting's own frame is the canvas's colour, so even while
   it rises its paper is the page's */
:root body.pv #pv-page.pv-main > :has(.art){animation-fill-mode:backwards}
:root body.pv #pv-page :is(.pv-art-side, .pv-art-house){background:var(--canvas)}
/* the haveli: a wing's door has its detail at the right of the title block, the whole painting in its own shape (take three, his item 8:
   fitted in 320 by 220 on the four wings' pages, 240 by 160 on Home's greeting; art.js gives the block the detail's size as --art-w and
   --art-h), right on the content's edge, the block's left column (the title, the deck, the row and the actions) at its top (the cleanup,
   his 1a: the column's top on the painting's top, so every wing's title stands at one y; the painting's foot is still the head's);
   Rooms has the whole house over the wings, the column's width and 320 high, no card; an empty place has the wing's detail behind its
   line at 8%, at most 240 wide and the place's height, at the right */
:root body.pv #pv-page :is(.pv-head, .pvn-door).has-art{--art-pad:0px; position:relative; display:flex; flex-direction:column; justify-content:flex-start;
  min-height:calc(var(--art-h) + 2 * var(--art-pad)); padding-right:calc(var(--art-w) + 2 * var(--art-pad) + var(--sp-8))}
:root body.pv:is(.theme-wine, .theme-midnight) #pv-page :is(.pv-head, .pvn-door).has-art{--art-pad:16px}
:root body.pv #pv-page :is(.pv-head, .pvn-door).has-art .pv-art-side{position:absolute; top:0; right:0; margin:0}
:root body.pv #pv-page .pv-head.has-art .pv-head-row:has(> .pv-segrow) > .pv-head-acts{grid-column:1; grid-row:3; justify-self:start}
:root body.pv #pv-page .pv-art-house{margin:0 0 var(--sp-8)}
:root body.pv #pv-page .art-house{width:100%; height:auto; max-height:320px; object-fit:contain}
:root body.pv:is(.theme-wine, .theme-midnight) #pv-page .art-house{box-sizing:border-box}
/* (take three, his item 9) each wing's door on Rooms its detail: Home's courtyard at the right of its name and its three rooms, in 240 by
   160, the block at its top (the cleanup, his 1a: the name on the painting's top; on a phone the square at the row's top, as the four
   others'); the four others' at the top of the tile, the whole painting at the tile's width, on the tile's surface (multiply on White
   and Linen; on Wine and Midnight the card is the panel) */
:root body.pv #pv-page .pv-plan .pv-wing-cover.has-door{display:block; flex:none; height:auto; overflow:visible; background:var(--canvas)}
:root body.pv #pv-page .pv-wing-cover > img:is(.art-tile, .art-door){position:static; inset:auto; display:block; object-fit:fill}
:root body.pv #pv-page .pv-wing-cover > img.art-tile{width:100%; height:auto}
:root body.pv:is(.theme-wine, .theme-midnight) #pv-page .pv-wing-cover > img:is(.art-tile, .art-door){padding:0; border-radius:0; background:none}
:root body.pv #pv-page .pv-empty.has-art{position:relative}
:root body.pv #pv-page .pv-empty.has-art > :not(.art){position:relative}
:root body.pv #pv-page .art-wash{position:absolute; top:50%; right:0; width:auto; height:auto; max-width:240px; max-height:100%; margin:0; opacity:.08; transform:translateY(-50%); pointer-events:none}

/* 22. Take three (27 Oct 2026: his review of take two, FIX THESE FIRST, and his choice of the haveli; DESIGN.md). The hall's folded
   labels, Saathi's row, the row's place and the search row's ring are in section 11; the haveli's slots in 21. */
/* the day's picker (his item 2): the same segmented control as the row, at every width: at the row's right end from 1024 (section 11),
   on its own line under the head below it, the page's width on a phone (section 1); the underlined days' row is gone */
body.pv #pv-page .pv-segrow.pv-daypick{display:flex}
body.pv #pv-page :where(.pv-head .pv-head-row > .pv-segrow.pv-daypick){grid-column:1 / -1; justify-self:start; margin:0}
/* a rail's blocks are rail cards, as Home's rail draws them (his item 6): the card, 16 in, its title row at the top with its line under
   it; the rail's headings 16 at 600, never larger (his item 4); a row's hairline is the only one between two rows */
body.pv #pv-page :is(.pv-col-side, .pv-sidecol, .pvo-around, .pv-days-nav) .pv-card .pv-panel-h{font-size:var(--fs-md); font-weight:600; line-height:24px}
body.pv #pv-page .pv-col-side .pv-card.pvx-standsect > .pv-fold > summary{font:600 var(--fs-md)/24px var(--ui); color:var(--ink)}
/* links in rails and in rows (Directions, a phone number, Change them in Settings, Nobody else has been in this week and their kind) have no
   underline at rest, only under the pointer; a link in prose (a deck, a post's body, a letter) keeps its own (his item 6) */
body.pv #pv-page :is(.pv-col-side, .pv-sidecol, .pv-rows, .pv-slots, .pv-stand) :is(a, summary):not(.pv-btn, .pv-link-btn, .pv-row-main, .pv-more-link, .pv-wing-key, .tag){text-decoration-line:none}
body.pv #pv-page :is(.pv-col-side, .pv-sidecol, .pv-rows, .pv-slots, .pv-stand) a:not(.pv-btn, .pv-link-btn, .pv-row-main, .pv-more-link, .pv-wing-key, .tag):hover{text-decoration-line:underline}
body.pv #pv-page :is(.pv-col-side, .pv-sidecol, .pv-rows, .pv-slots) .pv-prose a{text-decoration-line:underline}
/* two reading sizes (his item 4): --fs-md 16 for what is read top to bottom (a post's body, a deck, the letter, the greeting's question
   line); --fs-base 14 for what is scanned (rows, the timeline, the rail's items, card lines, schedules, contacts, rows of links); meta
   13. Titles, the greeting, the hero's figures and card titles keep their sizes */
body.pv #pv-page :is(.pv-row-t, .pv-todo-tx, .pvx-oh-q > span, .pv-prompt-long, .pvx-roomrows a > b, .pv-end, .pv-daycard-line,
  .pv-week ol > li > span > b, .pvm-name, .pvm-you, a.pv-card.pv-strip, .pv-sect > p.pv-quiet, .pv-linkbox > p > b, .pv-post-l1 > b.pv-name,
  .pv-ackline > p > b, .pvx-ackwho > summary > span, .pv-hashline > b, .pv-slot-tx > b, .pvx-ideasrow-t){font-size:var(--fs-base); line-height:20px}
body.pv #pv-page .pv-home.pvn .pv-days .pvh-day > span:not(.pvh-tile) > b{font-size:var(--fs-base); line-height:20px}   /* (the days' names in the home's rail; their date tiles as they are) */
body.pv #pv-page .pv-home.pvn .pvh-today.pv-card.pv-card > .pvh-today-q{font-size:var(--fs-md); line-height:24px}
/* the Search page (his items 5 and 7): its field's ring is the row's, at the row's own corners, the field inside drawing none; Saathi's
   ask says "Ask Saathi" in words beside its arrow */
body.pv #pv-page .pv-housebar-row:focus-within{outline:2px solid color-mix(in srgb, var(--wine) 72%, transparent); outline-offset:0}   /* (the rooms pass, his R8) */
body.pv #pv-page .pv-housebar-row input:is(:focus, :focus-visible){outline:none !important}
body.pv #pv-page .pv-housebar.is-saathi .pv-housebar-go{padding:0 var(--sp-3) 0 var(--sp-2)}
body.pv #pv-page .pv-housebar.is-saathi .pv-housebar-go > span{position:static !important; width:auto; height:auto; margin:0; overflow:visible; clip:auto; clip-path:none; white-space:nowrap}

/* 23. The rooms pass (27 Oct 2026: his review of take three live, his R1–R9 and items 1–24; DESIGN.md). The hall's four touches are
   in section 11; the spots and the days' covers (sets C and D) are placed here and cut by tools/illustrations.mjs. */
/* R3, his item 20b: a room opens with its back link to its wing: a quiet link, 13 in --ink-2, a 16 chevron, the wing's name, 8 over the
   title on its left edge (phone too); hover --hover behind it */
body.pv #pv-page .pv-head > .pv-back.pv-wingback{display:inline-flex; align-items:center; gap:var(--sp-1); width:max-content; max-width:100%; height:20px; min-height:0;
  margin:0 0 var(--sp-2); padding:0; border:0; border-radius:var(--r-sm); background:none; font:500 var(--fs-sm)/20px var(--ui); color:var(--ink-2); text-decoration:none}
body.pv #pv-page .pv-head > .pv-back.pv-wingback > svg{width:16px; height:16px; flex:none; stroke-width:1.75}
body.pv #pv-page .pv-head > .pv-back.pv-wingback:hover{background:var(--hover); color:var(--ink)}
/* R3: a celebration's title wears its own colour's full stop (its dot in the row) */
body.pv #pv-page .pv-head[data-event]{--w-stop:var(--e)}
/* his item 2: the day's cover card, under the head: its picture at the overview's lead card's ratio (524 by 180), the column's width, the
   card's corners; a painting fitted whole on the slot's white (R9); then one strip of facts, then the ways as quiet buttons */
body.pv #pv-page .pv-daycover{display:block; margin:0 0 var(--sp-8); padding:0; overflow:hidden}
body.pv #pv-page .pv-daycover > .pv-daycover-pic{display:block; margin:0; aspect-ratio:131 / 45; background:var(--surface); overflow:hidden}
body.pv #pv-page .pv-daycover > .pv-daycover-pic > img{display:block; width:100%; height:100%; max-width:none; object-fit:cover; object-position:var(--focus, 50% 30%)}
body.pv #pv-page .pv-daycover > .pv-daycover-pic.is-art > img{object-fit:contain; object-position:50% 50%}
body.pv:is(.theme-wine, .theme-midnight) #pv-page .pv-daycover > .pv-daycover-pic.is-art > img{box-sizing:border-box; padding:0; border-radius:0; background:none}
body.pv #pv-page .pv-daycover-facts{display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--sp-4) var(--sp-8); padding:var(--sp-6) var(--sp-6) var(--sp-4)}
body.pv #pv-page .pv-daycover-facts > *{margin:0}
body.pv #pv-page .pv-daycover-facts > :is(.pv-daycover-line, .pvd-maybe){flex:1 1 100%; font:400 var(--fs-md)/24px var(--ui); color:var(--ink)}
body.pv #pv-page .pv-daycover-facts > .pvx-2d-wear{flex:1 1 240px; display:flex; flex-direction:column; gap:0; min-width:0; font:400 var(--fs-base)/20px var(--ui); color:var(--ink)}
body.pv #pv-page .pv-daycover-facts > .pvx-2d-wear > .pvx-2d-k{font:600 var(--fs-sm)/20px var(--ui); color:var(--ink-2)}
body.pv #pv-page .pv-daycover-facts > .pvx-2d-wear .pvd-from{display:block; margin:var(--sp-1) 0 0; font:400 var(--fs-sm)/20px var(--ui); color:var(--ink-3)}
body.pv #pv-page .pv-daycover-facts > .pvd-who{display:flex; align-items:center; gap:var(--sp-2); flex:none; min-height:32px}
body.pv #pv-page .pv-daycover-facts > .pvd-status{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); flex:none; min-height:32px}
body.pv #pv-page .pv-daycover > .pvd-ways{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin:0; padding:0 var(--sp-6) var(--sp-6) var(--sp-3); overflow:visible}
/* R5: a count that names a thing is the link to it, --wine, no underline at rest */
body.pv #pv-page a.pv-count{font:500 var(--fs-base)/20px var(--ui); color:var(--wine); text-decoration:none}
body.pv #pv-page a.pv-count:hover{text-decoration:underline; text-underline-offset:3px}
/* his items 3 and 4: the main column's sections are cards with a plain title row; what was said is its title over the composer and the
   posts (cards are never inside a card); the rail is two rail cards */
body.pv #pv-page .pvr-day .pv-col-main > * + *, body.pv #pv-page.pvr-day .pv-col-main > * + *{margin-top:var(--sp-8)}
body.pv #pv-page .pvd-said > .pvd-said-h{margin:0 0 var(--sp-4); font:600 var(--fs-md)/24px var(--ui); color:var(--ink); border:0; padding:0}
body.pv #pv-page .pvd-said > * + *{margin-top:var(--sp-4)}
body.pv #pv-page .pv-col-side > .pv-card + .pv-card{margin-top:var(--sp-6)}
body.pv #pv-page .pvd-more-rows > *{margin:0; padding:0; border:0; list-style:none}
body.pv #pv-page .pvd-more-rows > * + *{border-top:1px solid var(--line)}
body.pv #pv-page .pvd-more-rows :is(.pvx-q-go > li > a, .pvx-q-go > li > p, .pvd-part > summary){display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); min-height:0; margin:0; padding:var(--sp-3) 0; color:var(--ink); text-decoration:none; background:none; list-style:none}
body.pv #pv-page .pvd-more-rows :is(.pvx-q-go > li > a, .pvx-q-go > li > p, .pvd-part > summary) > span{display:flex; flex-direction:column; min-width:0; font:600 var(--fs-base)/20px var(--ui); color:var(--ink)}
body.pv #pv-page .pvd-more-rows .pvd-sum{display:block; margin:0; font:400 var(--fs-sm)/20px var(--ui); font-style:normal; color:var(--ink-3)}
body.pv #pv-page .pvd-more-rows :is(.pvx-q-go > li > a, .pvd-part > summary) > svg{width:16px; height:16px; flex:none; color:var(--ink-3); transition:transform var(--dur-fast) var(--ease-out)}
body.pv #pv-page .pvd-more-rows .pvd-part > summary > svg{transform:rotate(-90deg)}
body.pv #pv-page .pvd-more-rows .pvd-part[open] > summary > svg{transform:none}
body.pv #pv-page .pvd-more-rows .pvd-part > summary::-webkit-details-marker{display:none}
body.pv #pv-page .pvd-more-rows :is(.pvx-q-go > li > a, .pvd-part > summary):hover{background:none}
body.pv #pv-page .pvd-more-rows :is(.pvx-q-go > li > a, .pvd-part > summary):hover > span{color:var(--ink)}
body.pv #pv-page .pvd-more-rows .pvd-part > .pv-fold-in{padding:0 0 var(--sp-3)}
body.pv #pv-page .pvd-acts{display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-1)}
body.pv #pv-page .pvd-acts > .pv-fold{width:100%}
body.pv #pv-page .pvd-acts > :is(.pv-fold > summary, .pvx-celout .pv-btn){display:inline-flex; align-items:center; gap:var(--sp-2); width:auto; height:32px; min-height:32px; margin:0; padding:0 var(--sp-3);
  border:0; border-radius:var(--r-sm); background:none; box-shadow:none; font:500 var(--fs-sm)/20px var(--ui); color:var(--ink-2)}
body.pv #pv-page .pvd-acts > .pv-fold > summary{display:flex; width:max-content}
body.pv #pv-page .pvd-acts > .pv-fold > summary > svg:last-child{display:none}

body.pv #pv-page .pvd-acts :is(.pv-fold > summary, .pvx-celout .pv-btn):hover{background:var(--hover)}
body.pv #pv-page .pvd-acts > :is(.pv-fold, .pvx-celout){margin:0 0 0 calc(-1 * var(--sp-3))}
/* his item 3: the day, hour by hour: the time at the left in --ink-3, the title 14 at 600, its line 13 */
body.pv #pv-page .pv-hours.pvd-seq > li > .pv-time{font:400 var(--fs-base)/20px var(--ui); color:var(--ink-3)}
body.pv #pv-page .pv-hours.pvd-seq > li > span > b{font:600 var(--fs-base)/20px var(--ui); color:var(--ink)}
body.pv #pv-page .pv-hours.pvd-seq > li > span > em{font:400 var(--fs-sm)/20px var(--ui); font-style:normal; color:var(--ink-2)}
/* R6: buttons in a row share one height (36) and one baseline; an icon-only button ("…", the mic) is a circle, 36 by 36; a text button
   keeps --r-sm */
body.pv #pv-page :is(.pv-icon-btn, summary.pv-icon-btn){box-sizing:border-box; width:36px; height:36px; min-width:36px; min-height:36px; padding:0; border-radius:var(--r-full)}
body.pv #pv-page .pv-head-acts{align-items:center}
body.pv #pv-page .pv-head-acts > :is(.pv-btn, .pv-menu, .pv-tools){flex:none}
body.pv #pv-page .pv-head-acts :is(.pv-btn, .pv-tools > summary.pv-btn){height:36px; min-height:36px}
/* R1 (as R1' has it, alignment 27 Oct 2026): a post's body is --fs-post 15 on --lh-body on every page (the feed on Home, The log, a
   celebration's posts, From the two of us, Your page; a reply's too, section 24); its own heading 16 at 600; the author's name 14 at 600;
   its meta 13 (R1' reverses R1's 14 and take three's 16) */
body.pv #pv-page .pv-post .pv-post-tx, body.pv #pv-page .pv-post .pv-post-tx.is-big, body.pv #pv-page .pv-update :is(.pv-prose, .pv-update-tx){font-size:var(--fs-post); line-height:var(--lh-body)}
body.pv #pv-page .pv-post .pv-post-who :is(b.pv-name, .pv-name){font:600 var(--fs-base)/20px var(--ui)}
body.pv #pv-page .pv-post .pv-post-who :is(.pv-post-m, time, .pv-meta){font-size:var(--fs-sm)}
/* R8: a text field has one focus ring: on :focus-within a 2px ring of --wine at 16%, no offset, at its own corners; the input inside a
   field draws none. Every input and textarea; the hall's search, the log's search, the Search and Saathi fields. A button keeps its 3px
   ring for the keyboard (preview-lift.css) */
:root body.pv:where(:not(.pv-k-door)) :is(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=submit], [type=button], [type=reset], [type=image], [type=hidden], [type=color]), textarea):focus-visible{outline:2px solid color-mix(in srgb, var(--wine) 72%, transparent) !important; outline-offset:0 !important}
:root body.pv :is(.pv-hall-find, .pv-housebar-row, .pv-search, .pv-find, .pv-msgfind) :is(input, textarea):is(:focus, :focus-visible){outline:none !important}
body.pv #pv-page :is(.pv-search, .pv-find, .pv-msgfind):focus-within{outline:2px solid color-mix(in srgb, var(--wine) 72%, transparent); outline-offset:0}
/* his item 5 (and its siblings, rule 7): a room's count line ("6 documents, by folder") on one line, Tools at its right end */
body.pv #pv-page .pv-listbar > .pv-tools > summary.pv-btn{display:flex; width:max-content; margin-left:auto}
body.pv #pv-page .pv-listbar > .pv-listbar-n{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* his item 16: The log's Tools stays where it was beside the search when it opens; its panel opens under both, the column's width */
body.pv #pv-page .pvx-q-loghead .pv-head-acts{display:flex; flex-wrap:wrap; align-items:flex-start; column-gap:var(--sp-4); row-gap:var(--sp-2); grid-column:1 / -1; width:100%}
body.pv #pv-page .pvx-q-loghead .pv-head-acts > details.pv-tools{display:contents}
body.pv #pv-page .pvx-q-loghead .pv-head-acts > details.pv-tools > .pv-tools-in{flex:1 0 100%; box-sizing:border-box; width:100%; max-width:none; margin:0}
/* R4: in a room (its head has the back to its wing) a section that holds no card is a card, its heading the card's title row with its
   line under it; a heading over a group of cards has no line under it */
body.pv #pv-page:has(> .pv-head .pv-wingback) :is(section.pv-sec, section.pvx-storysite):not(.pv-card, .pv-card *):not(:has(.pv-card)){box-sizing:border-box; padding:0 var(--sp-6) var(--sp-6);
  border:1px solid var(--line); border-radius:var(--r-md); background-color:var(--surface); box-shadow:var(--shadow-1)}
body.pv #pv-page:has(> .pv-head .pv-wingback) :is(section.pv-sec, section.pvx-storysite):not(.pv-card, .pv-card *):not(:has(.pv-card)) > :is(.pv-sec-h, .pv-panel-top, h2:first-child){display:flex; align-items:center;
  justify-content:space-between; gap:var(--sp-4); min-height:48px; margin:0 calc(-1 * var(--sp-6)) var(--sp-4); padding:0 var(--sp-6); border-bottom:1px solid var(--line); font:600 var(--fs-md)/24px var(--ui)}
body.pv #pv-page:has(> .pv-head .pv-wingback) :is(section.pv-sec, section.pvx-storysite):not(.pv-card, .pv-card *):not(:has(.pv-card)) > :is(.pv-sec-h, .pv-panel-top) :is(h2, h3){margin:0; padding:0; border:0; font:600 var(--fs-md)/24px var(--ui)}
body.pv #pv-page:has(> .pv-head .pv-wingback) :is(section.pv-sec, .pv-sect):has(.pv-card) > :is(.pv-sec-h, .pv-panel-top, h2){border-bottom:0; box-shadow:none}
/* his item 9: "Rooms." wears the default full stop, gold (Rooms is not a wing) */
body.pv #pv-page.pvr-rooms .pv-head{--w-stop:var(--gold)}
/* his item 10, layout A (shipped; B was rendered beside it, rooms-doors-options.png): the five doors in one row, Home first, each built as
   a wing's door (its painting whole at its top, its name, its rooms as chips one under the other, its counts); under 1280 three columns,
   Home's door two wide, so no cell is ever empty. A phone keeps its rows (preview-wings-rows.css) */
@media (min-width:1024px){
  body.pv #pv-page.pvr-rooms .pv-plan{grid-template-columns:repeat(5, minmax(0, 1fr)); align-items:stretch}
  body.pv #pv-page.pvr-rooms .pv-plan > li:first-child{grid-column:auto}
  body.pv #pv-page.pvr-rooms .pv-plan > li.pv-card.pv-wing{flex-direction:column; align-items:stretch}
  body.pv #pv-page.pvr-rooms .pv-plan .pv-wing-cover.has-door{height:auto; padding:0; background:var(--canvas)}
  body.pv #pv-page.pvr-rooms .pv-wing-tx{padding:var(--sp-4) var(--sp-4) var(--sp-6)}
  body.pv #pv-page.pvr-rooms .pv-wing-tx h2{font:600 var(--fs-lg)/28px var(--ui)}
  body.pv #pv-page.pvr-rooms .pv-wing-tx ul.pv-wing-rooms{flex-direction:column; flex-wrap:nowrap; align-items:flex-start; gap:var(--sp-1)}
}
@media (min-width:1024px) and (max-width:1279px){
  body.pv #pv-page.pvr-rooms .pv-plan{grid-template-columns:repeat(3, minmax(0, 1fr))}
  body.pv #pv-page.pvr-rooms .pv-plan > li:first-child{grid-column:span 2}
}
/* his item 11 and R7: one chip on every door, a 16 icon then its name, no box behind the icon; a day keeps its colour's dot */
body.pv #pv-page.pvr-rooms .pv-wing-tx a.pv-wing-key{gap:var(--sp-2); min-height:32px; padding:0 var(--sp-3) 0 var(--sp-2); font:500 var(--fs-sm)/20px var(--ui)}
body.pv #pv-page.pvr-rooms .pv-wing-km{width:16px; height:16px; border-radius:0; background:none; color:var(--ink-2)}
body.pv #pv-page.pvr-rooms .pv-wing-km > svg{width:16px; height:16px}
body.pv #pv-page.pvr-rooms .pv-wing-tx p.pv-wing-now a.pv-count{font:500 var(--fs-sm)/20px var(--ui)}
/* his item 12 and R9: a day's painted cover in a "From here" tile is fitted whole on the tile's white */
body.pv #pv-page .pv-fromhere .pv-fh-lead.is-art{background:var(--surface)}
body.pv #pv-page .pv-fromhere .pv-fh-lead.is-art > img{object-fit:contain}
body.pv #pv-page .pv-fromhere .pv-fh-lead > svg{width:20px; height:20px; stroke-width:1.75}
/* his item 24 and R9: a day's painted cover where its photograph would go, fitted whole on the slot's white, never cut; the card's words
   under it (Celebrations' cards, the invitation's strip, the website's days) */
body.pv #pv-page .pv-daycard > img.pv-daypic.is-art{object-fit:contain; object-position:50% 50%; background:var(--surface); mix-blend-mode:multiply}
body.pv:is(.theme-wine, .theme-midnight) #pv-page .pv-daycard > img.pv-daypic.is-art{box-sizing:border-box; padding:0; border-radius:0; mix-blend-mode:normal}
/* (v216's fix round, his item 2d) Home's hero with no photograph: the haveli's whole house (set A, art.js heroArt) in the picture slot,
   fitted whole (never cut) 16 inside it on the hero's own panel, the foot's colour, so the slot and the foot are one panel; blended as
   .art, multiply on White and Linen, unblended on Wine and Midnight, where the panel is the --surface such a picture sits on (DESIGN.md
   11, placement 9) */
body.pv #pv-page .pv-hero-ph.is-art{background:var(--surface)}
body.pv.pv-paper #pv-page .pv-hero-ph.is-art{background:var(--panel)}
body.pv #pv-page .pv-hero-ph.is-art > img.art-hero{box-sizing:border-box; max-width:none; padding:var(--sp-4); border-radius:0; background:none; object-fit:contain; object-position:50% 50%}
body.pv #pv-page :is(.pv-daymini, .pv-lens-id) > img.is-art{object-fit:contain; object-position:50% 50%; background:var(--surface)}
/* his items 6 to 8: Planning's overview, eight cards two across in four rows, no cell empty; a room's card is strip A on the wing's tint
   (its name in the wing's ink, its headline count at the right in --wine, a link), up to three rows (14 over 13, one hairline between),
   "Open <the room>" quiet at its foot's right; the two cards of a row share a height */
body.pv #pv-page .pv-plancards{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); align-items:stretch; gap:var(--sp-6); margin:0 0 var(--sp-8); padding:0; list-style:none}
body.pv #pv-page .pv-plancards > li{min-width:0; margin:0}
body.pv #pv-page .pv-plancard{display:flex; flex-direction:column; box-sizing:border-box; padding:0 var(--sp-6) var(--sp-4); overflow:hidden}
body.pv #pv-page .pv-plancard > .pv-panel-top{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); min-height:48px; margin:0 calc(-1 * var(--sp-6)) var(--sp-2); padding:0 var(--sp-6);
  border:0; background:var(--w-plan-tint, var(--paper))}
body.pv #pv-page .pv-plancard > .pv-panel-top .pv-panel-h{margin:0; font:600 var(--fs-md)/24px var(--ui); color:var(--w-plan-ink, var(--ink))}
body.pv #pv-page .pv-plancard > .pv-panel-top .pv-panel-h > a{color:inherit; text-decoration:none}
body.pv #pv-page .pv-plancard > .pv-panel-top .pv-panel-h > a:hover{text-decoration:underline; text-underline-offset:3px}
body.pv #pv-page .pv-plancard > .pv-panel-top > a.pv-count{white-space:nowrap}
body.pv #pv-page .pv-plancard > .pv-rows{margin:0}
body.pv #pv-page .pv-plancard :is(.pv-row, .pv-row-main){padding-left:0; padding-right:0}
body.pv #pv-page .pv-plancard :is(.pv-row-t){font:500 var(--fs-base)/20px var(--ui)}
body.pv #pv-page .pv-plancard :is(.pv-row-m){font:400 var(--fs-sm)/20px var(--ui); color:var(--ink-3)}
body.pv #pv-page .pv-plancard-foot{display:flex; justify-content:flex-end; margin:auto 0 0; padding:var(--sp-3) 0 0}
@media (max-width:1023px){ body.pv #pv-page .pv-plancards{grid-template-columns:minmax(0, 1fr); gap:var(--sp-4)} }
/* his item 13: Home's row hugs its three tabs, as the rooms' rows do, never the column's width; 24 under the hero, 24 over the greeting */
body.pv #pv-page .pv-home.pvn .pv-feedcol > .pv-segrow{width:max-content; min-width:0; max-width:100%}
body.pv #pv-page .pv-home.pvn > .pv-hero.pvn-cover{margin-bottom:0}
/* his item 15: your own page's From here holds what the portrait's menu held, a row each on one line with its icon; the house's note is
   the page's last line, 13 in --ink-3, centred; the stats line keeps 8 either side of each dot */
body.pv #pv-page .pv-fh-note{margin:var(--sp-6) 0 0; text-align:center; font:400 var(--fs-sm)/20px var(--ui); color:var(--ink-3)}
body.pv #pv-page .pv-profile-stats{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) 0}
body.pv #pv-page .pv-profile-stats > .pv-dot{display:inline-block; width:auto; margin:0 var(--sp-2); padding:0}
body.pv #pv-page .pv-profile-stats > wbr{display:none}
/* his item 19: a spot of set C at 120 in the top right of the head, where its line drawing sat (the clock on On the day, the key on Settings,
   the glass on Search, the diya on Saathi, the bell on Notifications and its tabs), the letters in Messages' empty thread; blended as every
   painting (.art); with no file, the corner is empty. On a phone, 72 */
body.pv #pv-page .pv-head .pv-head-mark:has(> .pv-art-spot){align-self:start; width:120px; height:120px; margin:0}
body.pv #pv-page .pv-art-spot{display:block; width:120px; height:120px; background:var(--canvas)}
body.pv #pv-page .pv-art-spot > img.art-spot{display:block; width:100%; height:100%; object-fit:contain}
body.pv #pv-page .pv-thread-none > .pv-art-spot{margin:0 auto var(--sp-4)}
@media (max-width:1023px){
  body.pv #pv-page .pv-head.is-room .pv-head-row > .pv-head-mark:has(> .pv-art-spot){width:72px; height:72px; top:0}
  body.pv #pv-page .pv-head .pv-art-spot{width:72px; height:72px}
}
/* R5: a post's "2 replies" is the link to them, --wine, no underline at rest */
body.pv #pv-page a.pv-sum-c{color:var(--wine); text-decoration:none}
body.pv #pv-page a.pv-sum-c:hover{text-decoration:underline; text-underline-offset:3px}
/* R7: one set of icons (the hall's), 20 in a row, 16 in a chip, the colour of their words */
body.pv #pv-page .pv-row-ic > svg{width:20px; height:20px; stroke-width:1.75}
body.pv #pv-page :is(.pv-chip, .pv-chips > a, .pv-wing-key) > svg{width:16px; height:16px}
/* R8 (found on the way): Messages' search field drew its words under its magnifier; the field's words start after its icon */
body.pv #pv-page .pv-msgfind input{padding-left:36px}
/* R3: a celebration's deck is one line (its date, its time, its place), the head's whole width, not prose's 576 */
body.pv #pv-page .pv-head[data-event] .pv-head-sub{max-width:none}
/* his item 10, layout A: every door's painting at the one height (the doors of a row share it), Home's too where it is two wide; from
   1280 to 1439 the doors' words 12 in, so a room's chip keeps its name on one line */
@media (min-width:1024px){ body.pv #pv-page.pvr-rooms .pv-plan .pv-wing-cover.has-door > img.art-tile{width:100%; height:180px; object-fit:contain} }
@media (min-width:1280px) and (max-width:1439px){ body.pv #pv-page.pvr-rooms .pv-wing-tx{padding:var(--sp-4) var(--sp-3) var(--sp-6)} body.pv #pv-page.pvr-rooms .pv-wing-tx a.pv-wing-key{padding:0 var(--sp-2) 0 var(--sp-1)} }
/* a count keeps its number and its word together ("6 new" never breaks after the 6) */
body.pv #pv-page a.pv-count{white-space:nowrap}

/* 24. Alignment and the rooms fixes (27 Oct 2026: his review of the rooms pass, his A1, R1', R2', R4', R10 to R12 and items 1 to 9;
   DESIGN.md), as its fix round has it (27 Oct 2026, his A1 final: a heading stands where the thing it labels stands). A column has one
   edge outside its cards, the content edge: cards, tiles, pictures, the hero panel, controls and list rows start there, and so do the
   back link, the title with its full stop, the deck, every heading outside a card, the closing line, From here and a tile's caption;
   nothing outside a card is indented to meet the words inside one, and a control keeps its own padding. Inside a card, its text edge, 24
   inside its 1px line (--card-in; a rail card's 16): its words, its rows' icons (their words 32 further in), and any button, field or
   control that starts a line, with its own padding; under the composer's heading line its field puts its face there (his sentence) */
/* (A1 final) the head (the back link, the title and its full stop, the deck, Home's greeting), a heading over a group of cards, From here
   and its rows stand on the content edge with the row, the buttons and the painting: the fix round took A1's 25 off them */
/* A1, inside a card: the composer's words on its text edge; a fold's icon 20 on the text edge and its words 32 in (Settings' parts, a
   rail's folds); rows inside Settings' folds on the card's text edge, not 24 further in; To do's rows; the days' cards and the week (Rooms' doors keep
   theirs, 16 and 12 from 1280 to 1439, so a room's chip keeps one line: the rooms pass's item 10) */
:root body.pv #pv-page .pvd-said .pv-compose{padding-left:var(--card-in); padding-right:var(--card-in)}
:root body.pv #pv-page .pvd-said .pv-compose-aud{margin-left:0}
:root body.pv #pv-page .pv-card details.pv-fold > summary{gap:var(--sp-3)}
:root body.pv #pv-page .pv-card details.pv-fold > summary > svg:first-child{width:20px; height:20px}
:root body.pv #pv-page :is(.pvd-acts, .pvd-more-rows) > details.pv-fold, :root body.pv #pv-page :is(.pvd-acts, .pvd-more-rows) > details.pv-fold > summary{margin-left:0; margin-right:0}
:root body.pv #pv-page :is(.pvd-acts, .pvd-more-rows) > details.pv-fold > summary{padding-left:var(--card-in); padding-right:var(--card-in)}
:root body.pv #pv-page .pvd-acts > form.pvx-celout{margin:0; padding:0 var(--card-in) var(--card-in)}
:root body.pv #pv-page .pvd-acts > form.pvx-celout > .pv-btn{margin-left:0}
/* A1, a post on every page: its words, its acts and its replies on the card's text edge (Your page drew them 16 in); an answer's quote
   keeps its 3px rule in the margin, its words on the text edge */
:root body.pv #pv-page .pv-post > .pv-post-tx{padding-left:var(--sp-6); padding-right:var(--sp-6)}
:root body.pv #pv-page .pv-post > .pv-acts{margin-left:var(--sp-3); margin-right:var(--sp-3)}
:root body.pv #pv-page .pv-post > .pv-sum{margin-left:var(--sp-6); margin-right:var(--sp-6)}
:root body.pv #pv-page .pv-post > .pv-comments{margin-left:var(--sp-3); margin-right:var(--sp-3); padding-left:var(--sp-3); padding-right:var(--sp-3)}

:root body.pv #pv-page .pv-post .pv-answer{margin-left:calc(var(--sp-6) - var(--sp-3) - 3px)}
/* (A1 final) words outside any card (Settings' notes, Your page's stats line, Memories' headings, the feed's heading) stand on the
   content edge: the fix round took A1's 25 off them. A post's chips, a matrix's first column and Settings' fold rows on the text edge */
:root body.pv #pv-page .pv-post > .pv-pills{margin-left:0; padding-left:var(--sp-6); padding-right:var(--sp-6)}
:root body.pv #pv-page .pv-matrix tr > :is(th, td):first-child{padding-left:0}
:root body.pv #pv-page .pvx-sets .pv-fold-in > .pv-rows{margin-left:calc(-1 * var(--card-in)); margin-right:calc(-1 * var(--card-in))}
:root body.pv #pv-page .pvp-row{padding-left:var(--card-in); grid-template-columns:20px minmax(0, 1fr) auto}
:root body.pv #pv-page :is(.pv-daycard-tx, .pv-week){padding-left:var(--card-in); padding-right:var(--card-in)}

/* A1, rows: the icon 20 on the text edge, its words 12 after it, 32 in */
:root body.pv #pv-page .pv-row-ic{width:20px; min-width:20px; flex:0 0 20px}
/* A1, the rail's rows: More about's links on the rail card's text edge, as its folds */
:root body.pv #pv-page .pvd-more-rows > .pvx-q-go > li > a{padding-left:var(--card-in); padding-right:var(--card-in)}

/* R1': a reply's body is --fs-post 15 as a post's (section 1 and the rooms pass's R1 rule carry the posts' own) */
:root body.pv #pv-page :is(.pv-c .pv-c-tx, .pv-post.is-short .pv-post-tx){font-size:var(--fs-post); line-height:var(--lh-body)}
/* R10: the post head 60 tall on its strip, the avatar 36 on the card's text edge, the name 14/600 over the meta 13, both centred in the
   60, the "…" centred at the right; the words 16 under the strip (the two of them's letters on From the two of us the same, with no strip) */
:root body.pv.pv-paper #pv-page .pv-post.pv-post{--strip-h:60px; padding-top:0}
:root body.pv #pv-page :is(.pv-post, .pv-update) > .pv-post-head{box-sizing:border-box; height:60px; min-height:60px; margin-top:0; margin-bottom:var(--sp-4); padding-top:0; padding-bottom:0; align-items:center}
:root body.pv #pv-page :is(.pv-post, .pv-update) > .pv-post-head .avatar{width:36px; height:36px; min-width:36px}
:root body.pv #pv-page :is(.pv-post, .pv-update) > .pv-post-head > .pv-post-who{display:flex; flex-direction:column; justify-content:center; align-self:center; min-width:0}
:root body.pv #pv-page :is(.pv-post, .pv-update) > .pv-post-head .pv-post-l1{margin:0; font:400 var(--fs-base)/20px var(--ui)}
:root body.pv #pv-page :is(.pv-post, .pv-update) > .pv-post-head .pv-post-l1 .pv-name{font:600 var(--fs-base)/20px var(--ui)}
:root body.pv #pv-page :is(.pv-post, .pv-update) > .pv-post-head .pv-meta{margin:0; font-size:var(--fs-sm); line-height:18px}
:root body.pv #pv-page :is(.pv-post, .pv-update) > .pv-post-head > :is(.pv-menu, details){align-self:center; margin-top:0; margin-bottom:0}
@media (max-width:1023px){ :root body.pv #pv-page :is(.pv-post, .pv-update) > .pv-post-head:has(> .pv-post-who){display:grid; grid-template-columns:auto minmax(0, 1fr) auto; column-gap:12px; align-items:center; align-content:center; row-gap:0} :root body.pv #pv-page :is(.pv-post, .pv-update) > .pv-post-head:has(> .pv-post-who) > .pv-av{grid-row:1 / span 2} :root body.pv #pv-page :is(.pv-post, .pv-update) > .pv-post-head > .pv-post-who{display:contents} :root body.pv #pv-page :is(.pv-post, .pv-update) > .pv-post-head > .pv-post-who > .pv-post-l1{grid-column:2; grid-row:1; min-width:0} :root body.pv #pv-page :is(.pv-post, .pv-update) > .pv-post-head > .pv-post-who > .pv-meta{grid-column:2 / 4; grid-row:2; min-width:0; position:relative; z-index:1} :root body.pv #pv-page :is(.pv-post, .pv-update) > .pv-post-head:has(> .pv-post-who) > .pv-menu{grid-column:3; grid-row:1; margin-block:-8px} }   /* (the interface review #5, his word of 1 Nov 2026: "move it next to the date", the tile no taller) on a phone the date's line runs under the "…", which sits beside the name: one line beside the "…" cut "Everyone" to "Everyo…" on every post at 320 */
/* R10, a reply: its head 32 tall, the avatar 24 centred on it, the name 14/600 and its time 13 on one line in its middle; the words under
   it 32 in, as a row's */
:root body.pv #pv-page .pv-c > .pv-c-av{display:flex; align-items:center; flex:none; height:32px}
:root body.pv #pv-page .pv-c > .pv-c-av .avatar{width:24px; height:24px; min-width:24px; font-size:var(--fs-xs)}
:root body.pv #pv-page .pv-c .pv-c-head{display:flex; align-items:center; flex-wrap:wrap; min-height:32px; margin:0; font:400 var(--fs-sm)/18px var(--ui)}
:root body.pv #pv-page .pv-c .pv-c-head .pv-c-name{font:600 var(--fs-base)/20px var(--ui)}

/* R12: the segmented row, one component (kit.js segRow): every wing's row, a day's picker, Settings' parts, Search / Ask Saathi. A --panel
   track 36 tall, round, 4 in; segments 28 tall, 12 a side, 14 at 500 in --ink-2; the chosen one a raised white pill (--surface,
   --shadow-1, --ink); --hover under the pointer; a day's dot kept; it scrolls with its fade where it does not fit, as before */
:root body.pv #pv-page .pv-segrow{align-items:center; gap:0; height:36px; padding:var(--sp-1); border:0; border-radius:var(--r-full); background:var(--panel); box-shadow:none}
:root body.pv #pv-page .pv-segrow > a{box-sizing:border-box; height:28px; min-height:0; padding:0 var(--sp-3); border:0; border-radius:var(--r-full); background:transparent; box-shadow:none;
  font:500 var(--fs-base)/20px var(--ui); color:var(--ink-2)}
:root body.pv #pv-page .pv-segrow > a:hover{background:var(--hover); color:var(--ink)}
:root body.pv #pv-page .pv-segrow > a[aria-current="page"], :root body.pv #pv-page .pv-segrow > a[aria-current="page"]:hover{background:var(--surface); box-shadow:var(--shadow-1); color:var(--ink)}
:root body.pv #pv-page .pv-segrow > a > svg{width:16px; height:16px; flex:none}
:root body.pv #pv-page .pv-segrow.pv-askway{display:flex; margin:0 0 var(--sp-4)}
:root body.pv #pv-page .pv-segrow.pv-askway > a > svg{color:var(--gold)}   /* Saathi's sparkle stays gold (rule 19) */

/* item 3: the folded hall fits. Rows 44 (the icon 20, 2, the name 12), none apart; the search row 44; the head 56; the dividers 8, 1, 8;
   12 at its foot. Open, the rows stay 36 and 4 apart. Under 768 tall the last group keeps the foot and the middle scrolls, as before */
/* (their rules stand in section 11's own block from 1024, beside the hall's: no media query is added) */

/* R4': a room's card heads wear strip A in the room's colour: a celebration's own tint (its colour at 13% on the surface, as its date
   tiles) and ink on its sections and rail cards; every other room its wing's. Settings, The log and Your page have no back to a wing,
   so they stay plain; posts, the two of them's letters and a thing's own card (a talk, a meeting) keep their own */
:root body.pv #pv-page:has(> .pv-head .pv-wingback[href$="/"]){--room-tint:var(--w-home-tint); --room-ink:var(--w-home-ink)}
:root body.pv #pv-page:has(> .pv-head .pv-wingback[href$="/events"]){--room-tint:var(--w-cel-tint); --room-ink:var(--w-cel-ink)}
:root body.pv #pv-page:has(> .pv-head .pv-wingback[href$="/family"]){--room-tint:var(--w-fam-tint); --room-ink:var(--w-fam-ink)}
:root body.pv #pv-page:has(> .pv-head .pv-wingback[href$="/planning"]){--room-tint:var(--w-plan-tint); --room-ink:var(--w-plan-ink)}
:root body.pv #pv-page:has(> .pv-head .pv-wingback[href$="/memories"]){--room-tint:var(--w-mem-tint); --room-ink:var(--w-mem-ink)}
:root body.pv #pv-page .pv-cols[data-event]{--room-tint:color-mix(in srgb, var(--e) 13%, var(--surface)); --room-ink:var(--e-ink)}
:root body.pv #pv-page:has(> .pv-head .pv-wingback) :is(.pv-card:not(.pv-post, .pv-daycover), section.pv-sec:not(:has(.pv-card))):not(.pv-card *) > :is(.pv-panel-top, .pv-sec-h, .pvp-group-h, .pvp-ask-h, .pv-vhead, .pvq-attn-top){
  background-color:var(--room-tint, transparent); border-bottom:0; border-radius:calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0}
:root body.pv #pv-page:has(> .pv-head .pv-wingback) :is(.pv-card:not(.pv-post, .pv-daycover), section.pv-sec:not(:has(.pv-card))):not(.pv-card *) > :is(.pv-panel-top, .pv-sec-h, .pvp-group-h, .pvp-ask-h, .pv-vhead, .pvq-attn-top) :is(.pv-panel-h, h2, h3, .pv-panel-h > a),
:root body.pv #pv-page:has(> .pv-head .pv-wingback) .pv-card:not(.pv-card *) > :is(h2.pvp-group-h, h2.pvp-ask-h, .pv-vhead){color:var(--room-ink, var(--ink))}

/* item 7: the cover card's facts in two columns 24 apart, both on the card's text edge: the line and what to wear at the left; the faces
   with the count, the status chip and its Quiet button under it at the right (one column on a phone) */
:root body.pv #pv-page .pv-daycover-facts{display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--sp-4) var(--sp-6); align-items:start}
:root body.pv #pv-page .pv-daycover-facts.is-two{grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr))}
:root body.pv #pv-page .pv-daycover-col{display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-4); min-width:0}
:root body.pv #pv-page .pv-daycover-col > *{margin:0}
:root body.pv #pv-page .pv-daycover-col > :is(.pv-daycover-line, .pvd-maybe){font:400 var(--fs-md)/24px var(--ui); color:var(--ink)}
:root body.pv #pv-page .pv-daycover-col > .pvx-2d-wear{display:flex; flex-direction:column; gap:0; min-width:0; font:400 var(--fs-base)/20px var(--ui); color:var(--ink)}
:root body.pv #pv-page .pv-daycover-col > .pvx-2d-wear > .pvx-2d-k{font:600 var(--fs-sm)/20px var(--ui); color:var(--ink-2)}
:root body.pv #pv-page .pv-daycover-col > .pvx-2d-wear .pvd-from{display:block; margin:var(--sp-1) 0 0; font:400 var(--fs-sm)/20px var(--ui); color:var(--ink-3)}
:root body.pv #pv-page .pv-daycover-col > .pvd-who{display:flex; align-items:center; gap:var(--sp-2); min-height:32px}
:root body.pv #pv-page .pv-daycover-col > .pvd-status{display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-2)}
/* A1, found in the review: the news since you looked (kit.js sinceRow), a row of the page outside any card, has its words on the text
   edge and its chevron on the right one, its link and its rules the column's width (it sat on the content edge on Vendors and Guests) */
:root body.pv #pv-page .pv-since:not(.pv-card .pv-since) > .pv-row > a.pv-row-main{padding-inline:calc(var(--card-in) + 1px)}
:root body.pv #pv-page .pv-listbar:not(.pv-card .pv-listbar):not(:has(> .pvp-switch)) > .pv-listbar-n{padding-left:0}   /* (A1 final) a room's count line ("13 jobs, by what they are for"), words outside a card that start a line, on the content edge (it had 24 of its own at 8cf0bc0, 25 at 58ef523); after To do's and Questions' Everyone | Mine it keeps its 16 apart, and under it on a phone it starts on the content edge (preview-answer.css) */
:root body.pv #pv-page .pvd-acts > .pvx-celkept{margin:0; padding:0 var(--card-in) var(--card-in)}   /* the Sangeet's and the Shaadi's "… stays" note where the Mehendi has Take it out (decision 9), on the rail card's text edge */
/* A1 in the eight rooms the round did not measure (his word after the review, 27 Oct 2026: "fix the eight rooms' alignment in this
   round"): a card's words 24 inside its 1px line, a room's words outside its cards on the text edge, an icon's words 32 after its start */
:root body.pv #pv-page :is(article.pv-meal, article.pv-note-kept){padding-left:var(--card-in); padding-right:var(--card-in)}   /* the Menus' meals and Talks' own cards, 16 in before */
:root body.pv #pv-page .pvp-ask .pvp-rows > li{padding-left:var(--card-in); padding-right:var(--card-in)}   /* Questions & decisions: its rows, 16 in before */
:root body.pv #pv-page :is(.pv-food > details.pv-fold, article.pv-meal details.pv-fold) > summary{gap:var(--sp-3)}
:root body.pv #pv-page :is(.pv-food > details.pv-fold, article.pv-meal details.pv-fold) > summary > svg:first-child{width:20px; height:20px}   /* R7's 20 in a row */
/* (A1 final) outside the cards, back on the content edge with their titles (the fix round took A1's 25 off): the Menus' Add a meal, Let's
   meet's "Nothing set yet." and its Earlier fold, Our story's prose and The brief's rows (the icon on the edge, its words 32 in) */
:root body.pv #pv-page:has(> .pv-head .pv-wingback) section.pv-sec:has(> .pv-paperband):not(.pv-card) > .pv-sec-h{align-items:flex-start}   /* Invitations: The cards' title and line on the strip's text edge, as every strip's (they stood centred) */
/* (A1 final, the fix round) his mid-round correction is undone: the segmented track, the head's buttons, the log's search, the rooms'
   underline tabs and To do's Everyone | Mine stand on the content edge with their own padding, and inside a card a button, a field, a
   chip or a link box that starts a line stands on the card's text edge with its own padding (the 13 and 8 left moves are gone). The
   composer: its heading line on the text edge (.pvx-oh-q), and, his sentence in A1 final, "a field under it puts its icon on that
   edge": the field's box stands its own inset left of the text edge so its face is on it (Home's face 8 in, a day's 6 in,
   preview-design.css 7 and preview-answer.css), its right end on the right text edge; a day's five ways' box on the text edge, as Home's
   (they stood 12 in at both ends). The component is not changed. To do's tick at its column's start; the cover card's ways on the text edge */
:root body.pv #pv-page .pv-compose .pvx-oh-q{margin-left:0}
:root body.pv #pv-page .pv-home.pvn .pv-feedcol > .pv-compose > .pv-compose-rest{margin-left:calc(-1 * var(--sp-2))}
:root body.pv #pv-page .pvd-said .pv-feedcol > .pv-compose > .pv-compose-rest{margin-left:-6px; margin-right:0}
:root body.pv #pv-page .pvd-said .pv-feedcol > .pv-compose > .pv-compose-ways{margin-left:0; margin-right:0}
:root body.pv #pv-page .pvp-row .pvp-lead{justify-content:flex-start}
:root body.pv #pv-page .pv-daycover > .pvd-ways{padding-left:var(--card-in)}
/* Money's lines (found in the lead's check): a line bleeds to its card's edges with its own 16 in, so its words sit on the card's text
   edge; its row of actions stands there too, the first button's box on the text edge (A1 final: the 13 left move is gone) */
:root body.pv #pv-page :is(li.pvm-look, .pvm-settle){margin-left:calc(-1 * var(--sp-4)); margin-right:calc(-1 * var(--sp-4))}
/* (A1 final, found by the fix round's probe: the round's probe had left Money out) To pay's groups: the heading, its note and its fold on
   the card's text edge, and every row's day, "No date yet" and title there too, still where the heading starts (his word of 15 Oct);
   they stood 16 and 18 in. The sums and the amounts end on the card's right text edge */
:root body.pv #pv-page .pv-card.pvm-pay .pvm-group > :is(.pvm-group-h, .pvm-group-note){padding-left:0; padding-right:0}
:root body.pv #pv-page .pv-card.pvm-pay .pvm-group > .pv-fold{padding-left:0; padding-right:0}
:root body.pv #pv-page .pv-card.pvm-pay .pvm-group > .pv-rows > .pv-row{padding-inline:var(--card-in)}
:root body.pv #pv-page .pv-card.pvm-pay .pvm-group > .pv-fold .pv-rows > .pv-row{margin-inline:calc(-1 * var(--card-in)); padding-inline:var(--card-in)}

/* 25. The deploy round (27 Oct 2026: the last round before design-p3 goes live; DESIGN.md 5), the bar rewritten whole in v216 (28 Oct,
   his two asks after v215 from his iPhone, DESIGN.md 4, 5 and 10). The phone's tab bar a floating pill, as WhatsApp's and Apple TV's
   (his item 1): 16 off the sides (the safe area's inset added) and max(16, the inset less 12) off the bottom, --tabbar-foot: 22 on an
   iPhone with the 34 inset, clear of the home indicator (5 tall, its foot 8 from the edge) by 9; 16 on a Mac and on a phone without one
   (v215 stood it at the inset, 34; v214 at their sum, 50); --safe-bottom is the inset, so a test can set it. Round, 64 tall; it is the
   hall on the phone, so it wears the hall's colour family: its ground the theme's --bar at 90% under a 20 blur so the hero and the
   paintings tint it as they pass (White: the linen --panel; Linen: its --surface on the warm canvas; Wine and Midnight: their dark
   bars), --shadow-2, no edge (ruling). The five wings, each its icon 22 over its name 11, centred; the current one on a pill 44 tall
   inside the bar (10 from its ends as from its top and foot) in --bar-cur, its icon and name in --wine as v215 drew them (the ruling:
   "the selected one on a paper pill, in wine"; v216's fix round, his item 1: on Wine and Midnight the theme's own --wine inside the
   bar, section 3's --tab-cur, which holds 4.5:1 on the pill); the
   rest their names in --bar-ink-2 and their icons in --bar-icon, as the sidebar's rows; pressed, --bar-hover. Every other colour of the
   bar is the --bar family's; it reads no --surface or --canvas of its own. A name never squeezed, so a long one takes its width and the
   rest share what is left; nothing moves (section 8: the nav, its ground only). No badge here: the strip's two bells keep theirs. The
   page keeps the bar's room at its foot, 96 (16 under the bar, its 64, 16 over it), the inset added and its own 28 kept; the toast and
   the phone's card stand 16 over the bar's real top, its foot and its 64 (32 over it in v215 on an indicator phone); a dialog is a
   sheet in the top layer, over it. While a field has the keyboard (body.is-typing, preview-home.js, below 1024) the bar slides down out
   of view, --dur on --ease-in, and back on --ease-out when the field lets go; with reduced motion it goes and comes without sliding
   (section 15's rule: no transition under prefers-reduced-motion) */
@media (max-width:1023px){
  body.pv:where(:not(.pv-k-door)){--tabbar-h:64px; --tabbar-room:calc(var(--tabbar-h) + 2 * var(--sp-4)); --safe-bottom:env(safe-area-inset-bottom, 0px); --tabbar-foot:max(var(--sp-4), calc(var(--safe-bottom) - 12px))}
  :root body.pv .pv-tabbar{left:calc(var(--sp-4) + env(safe-area-inset-left)); right:calc(var(--sp-4) + env(safe-area-inset-right)); bottom:var(--tabbar-foot);
    box-sizing:border-box; height:var(--tabbar-h); padding:0 10px; align-items:center; border:0; border-radius:var(--r-full);
    background:color-mix(in srgb, var(--bar) 90%, transparent); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); box-shadow:var(--shadow-2);
    transition:transform var(--dur) var(--ease-out), visibility 0s}
  :root body.pv.is-typing .pv-tabbar{display:flex; visibility:hidden; transform:translateY(calc(100% + var(--tabbar-foot) + var(--sp-6)));
    transition:transform var(--dur) var(--ease-in), visibility 0s var(--dur)}
  :root body.pv .pv-tabbar a{flex:1 1 0; min-width:max-content; box-sizing:border-box; height:44px; gap:2px; padding:0 var(--sp-1); border-radius:var(--r-full);
    font:500 11px/13px var(--ui); color:var(--bar-ink-2); transition:background-color var(--dur-fast) var(--ease-out)}
  :root body.pv .pv-tabbar a .pv-tabbar-ic, :root body.pv .pv-tabbar a[aria-current="page"] .pv-tabbar-ic{width:auto; height:auto; border-radius:0; background:none; color:var(--bar-icon); animation:none}
  :root body.pv .pv-tabbar a[aria-current="page"] .pv-tabbar-ic{color:inherit}
  :root body.pv .pv-tabbar a .pv-tabbar-ic > svg{width:22px; height:22px; stroke-width:1.75}
  :root body.pv .pv-tabbar a[aria-current="page"]{background:var(--bar-cur); color:var(--wine); font-weight:600; box-shadow:var(--shadow-1)}   /* (the interface review #3, 1 Nov 2026) the page you are on told by more than its colour: its name at 600 and R12's raised pill (on White the pill was 1.07:1 on the bar, the wine 1.49:1 to the other tabs' ink) */
  :root body.pv .pv-tabbar a:not([aria-current="page"]):active{background:var(--bar-hover)}
  :root body.pv .pv-main{padding-bottom:calc(var(--tabbar-room) + env(safe-area-inset-bottom) + 28px)}
  :root body.pv:where(:not(.pv-k-door)) .pv-toast{bottom:calc(var(--tabbar-foot) + var(--tabbar-h) + var(--sp-4))}
}
/* What the audit found that is one rule (the deploy round, his item 3; tools/audit.mjs, the gate for every later round; the rest it
   finds is listed in docs/polish-2026-10-27-deploy/packet.md, unfixed): h, a rail's headings 16 at 600 on Home too (DESIGN.md 3 and 6,
   take three's rule, which section 4's 14 outweighed where the rail card is the rail's own box: The celebrations, People in the house,
   Messages); b, a post head's meta in --ink-2 on its strip, as preview-lift.css meant (--ink-3 read 4.43:1 on the slate), and the two
   words drawn in gold in --ink-3 (Home's "Earlier", a dish's "no onion-garlic" read 3.59:1; gold is for marks: DESIGN.md 4); c, a
   reply's field 16 (it was 12) and a feed head's picture 12 (it was 6: DESIGN.md 3, --r-img); f, the website's count of replies on Home is
   the link to them in Guests (R5; views/preview/feed.js), in its line's own type; h, From the two of us's posts' paragraphs 15 as R1'
   says (section 24 set their box to --fs-post; the older sheets' 16 on each paragraph outweighed it); and, found walking the real house,
   How far along's figures the links to the Plan, Vendors and Guests (R5; routes/home.js, views/preview/next.js), in the figure's own type */
:root body.pv #pv-page .pv-home.pvn :is(.pv-sidecol, .pv-days-nav, .pvo-around) .pv-panel-h{font-size:var(--fs-md)}
:root body.pv #pv-page .pv-card .pv-post-head .pv-meta{color:var(--ink-2)}
:root body.pv #pv-page .pv-dish-k, :root body.pv:not(.theme-wine):not(.theme-midnight) #pv-page .pvn-thread > span{color:var(--ink-3)}
:root body.pv #pv-page .pv-cbox input{border-radius:var(--r-sm)}
:root body.pv #pv-page :is(.pvn-peek, .pvn-peek-ph){border-radius:var(--r-img)}
:root body.pv #pv-page .pv-around-row em > a.pv-count{font:inherit}
:root body.pv #pv-page .pv-update .pv-update-b p{font-size:var(--fs-post)}
:root body.pv #pv-page .pvx-ready dd > a.pv-count{font:inherit; letter-spacing:inherit}

/* 26. The audit clean (28 Oct 2026: his round after the deploy round's SHIP IT; tools/audit.mjs is the gate; DESIGN.md 4's R13 to
   R15 and 10's named exceptions). Plumbing first: c, the buttons in a post or a reply take the button rule (DESIGN.md 7, R6): a text
   button --r-sm 16 (Love, Reply, Open, a poll's option), an icon-only one --r-full (the reaction picker); the day cards' date tile a
   square chip, 16; the invitation cards' picture a photograph's --r-img 12; the dish's love button round at every size, as it is at 30
   tall (it was 16 on the phone's 44) */
:root body.pv #pv-page :is(.pv-act, .pv-opt){border-radius:var(--r-sm)}
:root body.pv #pv-page :is(.pv-react-more, .pv-dish-love button){border-radius:var(--r-full)}
:root body.pv #pv-page .pv-daycard .pv-dtile{border-radius:var(--r-sm)}
:root body.pv #pv-page .pv-invcards .pv-invcard-art{border-radius:var(--r-img)}
/* c, DONE WHEN c ("radius 6 anywhere: 0", on the audited pages): a menu's items are buttons, 16 (their hover's ground); an answer in a
   post is a panel, its open corners 16; a bar, its fill and a key's dot are pills, round (at 4 to 12 tall the 6 drew round already);
   the theme swatches in Settings keep theirs: a drawing of a page, a component */
:root body.pv #pv-page :is(.pv-menu-pop > a, .pv-menu-pop button, .pv-menu-form button){border-radius:var(--r-sm)}
:root body.pv #pv-page .pv-answer{border-radius:0 var(--r-sm) var(--r-sm) 0}
:root body.pv #pv-page :is(.pvm-bar, .pvm-pos-sw, .pvp-step-bar, .pvp-step-bar > i){border-radius:var(--r-full)}
:root body.pv #pv-page .pv-meeting-h .pv-datebox{border-radius:var(--r-sm)}   /* a meeting's date box: a square chip, as the day card's tile */
:root body.pv #pv-page .pv-mplace iframe{border-radius:var(--r-img)}   /* a meeting place's map: a picture */
/* h, item 5 (R13, list rows): a list row's name 16 at 600 and its line 13 in --ink-3 (Vendors, Lists, To do and Ask, Guests, the
   dishes, Money's parts, look and settle rows, Settings' house rows and choices, Your page's lines, the theme names); the line's own
   colours stay (a late date's --warn, a near one's --ink, a day's tag), its faces and chips keep their own type */
:root body.pv #pv-page :is(.pv-vrow-main > b, .pvl-name-tx > b, .pvp-t, .pv-hh-name, .pv-dish-n, .pv-line-t, .pvx-theme-name > b:not(.pvx-theme-is), .pv-choice-tx > b, .pvm-look-t, .pvm-settle-t){font-size:var(--fs-md); font-weight:600}
:root body.pv #pv-page .is-done :is(.pvp-t, .pv-line-t){font-weight:400}
:root body.pv #pv-page :is(.pvp-t, .pvm-look-t) > :is(span, a){font:inherit}
:root body.pv #pv-page :is(.pv-vrow-main > em, .pvl-name-tx > em, .pvp-rest, .pvp-meta, .pv-hh-meta, .pv-dish-note, .pvm-parts3 dt, .pv-line-tx > em, .pv-choice-tx > em, .pvm-look-m, .pvm-settle-m){font-size:var(--fs-sm); color:var(--ink-3)}
:root body.pv #pv-page :is(.pvp-meta, .pv-hh-meta, .pv-line-tx > em, .pvm-parts3 dt, .pv-vrow-main > em) :is(span, a, b, i):not(.avatar, .avatar *, .pv-chip, .pv-chip *, .pv-vh){font-size:inherit}
:root body.pv #pv-page :is(.pvp-meta, .pv-hh-meta, .pv-line-tx > em, .pvm-parts3 dt) :is(.pvp-tag, .pv-daytag, .pvp-who span:not(.avatar, .avatar *), .pv-due:not(.is-late, .is-soon), .pv-nw, .pvp-qby, .pvp-qdue, .pvp-src, a:not(.pv-count)){color:var(--ink-3)}
/* h, item 5 (R13, one line): a fold's title and its line 14; a card's note, a code in its line, an empty state, a count in a head,
   the Ideas row, a closed poll's option, the access table's heads and the day's line in its cover card 14; a chip in a deck its 13 */
:root body.pv #pv-page :is(.pvx-set, .pvx-q-daysaid, .pvd-acts > .pv-fold, .pv-food > .pv-fold, .pv-meal-edit, .pvx-memcov-fold, .pv-earlierfold, .pvm-expfold, .pvx-standfold, .pvx-q-everyone, .pvx-addplace) > summary{font-size:var(--fs-base)}
:root body.pv #pv-page :is(.pvx-set, .pvx-q-daysaid, .pvd-acts > .pv-fold, .pv-food > .pv-fold, .pv-meal-edit, .pvx-memcov-fold, .pv-earlierfold, .pvm-expfold, .pvx-standfold, .pvx-q-everyone, .pvx-addplace) > summary :is(span, b):not(.pv-chip, .pv-chip *, .pv-btn, .pv-btn *, .avatar, .avatar *, .pv-vh){font-size:var(--fs-base)}
:root body.pv #pv-page :is(.pv-row-tx > .pv-small > .pv-code, .pv-col-main > .pv-panel > .pv-quiet, .pvx-set > .pv-fold-in > .pv-quiet, .pv-main > .pv-quiet.pv-mb, .pv-hashnote, .pv-hashnote b, .pv-empty-sm > :is(.pv-empty-t, .pv-empty-h), .pv-profile-tx > .pv-quiet, .pv-profile-tx > .pv-quiet *, .pvm-atdoor-t, .pvx-ideasrow > :is(.pvx-ideasrow-m, .pvx-ideasrow-dot), .pvm-group-note, .pvm-missing, .pvm-missing > :is(a, b), .pv-poll .pv-opt-l, .pv-matrix th, .pv-daycover-line){font-size:var(--fs-base)}
:root body.pv #pv-page .pv-head-sub > .pv-chip{font-size:var(--fs-sm)}
/* h, item 5: a card's title 16 at 600 (To do's groups, Ask's; their counts keep 13 or 14); an answer's words a post's 15 (R1') */
:root body.pv #pv-page :is(.pvp-group-h, .pvp-ask-h){font-size:var(--fs-md); font-weight:600}
:root body.pv #pv-page :is(.pvp-group-h, .pvp-ask-h) > span:not(.pv-n), :root body.pv #pv-page .pvp-ask-hl > span{font:inherit}
:root body.pv #pv-page .pv-answer > div{font-size:var(--fs-post)}
/* i, item 3 (A1 final): a thing's page's back link puts its chevron's box on the content edge, as the wing's back link does (its 4 of
   padding had held it 4 in, on the three other days' menus); a table's scroll cue says its words on the card's text edge, its arrow
   after them (the arrow first had put the words 15 in: the access card's third edge) */
:root body.pv #pv-page .pv-head > .pv-back:not(.pv-wingback){padding-left:0}
:root body.pv #pv-page .pv-scrollcue{flex-direction:row-reverse; justify-content:flex-end}
@media (max-width:1023px){
  /* i, item 3, on a phone: the four days' "Directions" and a room's title menu wrap onto the content edge (a space before each, not 4
     of margin); Your page's
     days hang their colour dot in the line's gutter, so their names start where every row's does (the panel's two text edges);
     Our story's row keeps its icon level with its first line, as every icon row */
  :root body.pv #pv-page .pv-head-sub > .pvd-when-dir{margin-left:0}
  :root body.pv #pv-page .pv-head-tx > .pvx-titlemenu{margin-left:0}   /* the title's "…" (the rooms of Home) after the word space, never 4 in */
  :root body.pv #pv-page .pv-head-sub > .pv-dateline:has(+ .pvd-when-dir)::after{content:" "}
  :root body.pv #pv-page .pv-line-row .pv-line-t > .pv-tone{margin:0 4px 0 -12px}
  :root body.pv #pv-page .pvx-storybrief .pv-row-main{align-items:flex-start}
  :root body.pv #pv-page .pvx-storybrief .pv-row-ic{margin-top:2px}
  /* R11, his fix 1, on a phone (below 1024): the 72 spot beside the title and deck only, at least 56, its bottom 8 over what follows */
  :root body.pv #pv-page .pv-head .pv-head-row:has(> .pv-head-mark > .pv-art-spot) > .pv-head-mark{grid-row:1; align-self:stretch; position:relative; height:auto; min-height:48px}
  :root body.pv #pv-page .pv-head .pv-head-row > .pv-head-mark > .pv-art-spot{position:absolute; top:0; right:0; width:auto; height:clamp(56px, 100%, 72px); aspect-ratio:1}
  /* item 13: the viewer the whole screen, its two buttons under the name */
  :root body.pv .pv-docview[open]{width:100vw; max-width:100vw; height:100dvh; max-height:none; margin:0; border-radius:0}
  :root body.pv .pv-docview .pv-dialog-head{flex-wrap:wrap; row-gap:var(--sp-2); padding:var(--sp-3) var(--sp-2) var(--sp-3) var(--sp-4)}
  :root body.pv .pv-docview-acts{order:3; flex-basis:100%}
}
/* n, item 10 (R15, pictures in posts fit, never cut; Home's feed, The log, the days' posts, Your page, and every post and reply that
   draws its pictures with views/preview/feed.js media): one picture at the post's width, its box the picture's own height up to a
   square (--r is at least 1); two, a row of squares; each drawn whole (contain) and centred on a blurred copy of itself (24 of blur,
   1.2 times, the box clipping its soft edge), so a tall picture's sides are its own colour; three or more keep the grid; a tap opens
   the picture whole, as before. The 560 cap and the 4:5 pair are gone. His fix 6 (28 Oct): the box runs edge to edge across the card,
   square-cornered (no radius of its own: the card's head is above it and its reactions under it), two or more tiles 2 apart */
:root body.pv #pv-page .pv-media{border-radius:0; overflow:hidden}
:root body.pv #pv-page .pv-media :is(.pv-ph, .pv-ph > img){border-radius:0}
:root body.pv #pv-page .pv-media:is(.pv-n2, .pv-n3){gap:2px}
:root body.pv #pv-page .pv-media.pv-n1 .pv-ph{aspect-ratio:auto; height:calc(100cqw / var(--r, 1))}
:root body.pv #pv-page .pv-media.pv-n2 .pv-ph{aspect-ratio:1; height:auto}
:root body.pv #pv-page .pv-media:is(.pv-n1, .pv-n2) .pv-ph > img:not(.pv-ph-blur){position:relative; object-fit:contain; object-position:50% 50%}
:root body.pv #pv-page .pv-media:is(.pv-n1, .pv-n2) .pv-ph > .pv-ph-blur{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(24px); transform:scale(1.2); pointer-events:none}
/* l, item 2: a picture's width and height written on its tag by the page (lib/sizes.js, data-wh) hold only its shape until it comes;
   the page's own rules size it as before (the numbers' own sizes never apply) */
:where(img[data-wh]){width:auto; height:auto}
/* h, his call on R13 (28 Oct): a section heading outside a card is 16 at 600 in the main column as on a rail, as built; Family's side
   names (preview-answer.css, 24 at 500) and Our story's chapter headings (24) come to it */
:root body.pv #pv-page :is(.pvm-head > h2, .pv-page-prose > h3){font-size:var(--fs-md); font-weight:600}
/* R11, his fix 1 (28 Oct): a page head's spot sits in the head's top-right, beside the title and the deck only, and the head's row
   never runs under it: the spot is the title and deck's height, at most 120 and at least 88, its bottom at least 8 over the row's top
   (where they are shorter than 80 the head's first row takes 80, so the 88 clears the row by 8 rather than sitting on it) */
@media (min-width:1024px){
  :root body.pv #pv-page .pv-head .pv-head-row:has(> .pv-head-mark > .pv-art-spot) > .pv-head-mark{grid-row:1; align-self:stretch; position:relative; height:auto; min-height:80px}
  :root body.pv #pv-page .pv-head .pv-head-row > .pv-head-mark > .pv-art-spot{position:absolute; top:0; right:0; width:auto; height:clamp(88px, 100%, 120px); aspect-ratio:1}
  /* his item 8a (28 Oct): a wing's head is as tall as its left column (title, deck, row, buttons), the content 24 under it; the painting
     stays where it is (absolute in the head) and may hang past the head into that 24 and the first row's top margin (16), over no words */
  /* his item 9 (28 Oct): the folded hall 96 wide (--sidebar-folded), its rows 88 (4 in each side), the selected pill the row itself, 16
     round; the icon 6 under the pill's top and the name 6 over its foot (2 between them: the row keeps its 46, so the hall still fits
     736); the names at 12 ("Notifications" sets at 73 of 76); the search row a row like the others, 46, 12 over the first group */
  :root body.pv.pv-rail #pv-bar .pv-list a{gap:2px; border-radius:var(--r-md)}
  :root body.pv.pv-rail #pv-bar .pv-hall-findic{gap:2px; height:46px; min-height:46px; border-radius:var(--r-md)}
  /* beside the 96 hall the page's gutters give back its 12 at the narrowest windows (22 at 1024, 28 again by 1036), so a 1024 window's page
     keeps its 884 and nothing wraps that did not (docs/polish-2026-10-28-audit/tools/wrap.sh) */
  :root body.pv.pv-rail #pv-page.pv-main{padding-left:clamp(22px, calc((100vw - var(--sidebar-folded) - 884px) / 2), 28px); padding-right:clamp(22px, calc((100vw - var(--sidebar-folded) - 884px) / 2), 28px)}
  :root body.pv #pv-page .pv-head.has-art{min-height:calc(var(--art-h) + 2 * var(--art-pad) - var(--sp-6) - var(--sp-4) + 2px); margin-bottom:var(--sp-6)}   /* the painting hangs 24 + 16 at most (2 of air kept): past the head into the gap and the first row's top margin, never over its words */
  /* item 13: the viewer the window less 24 a side, its row 12 high a side */
  :root body.pv .pv-docview[open]{width:calc(100vw - 48px); max-width:1280px; height:calc(100dvh - 48px); max-height:none}
  :root body.pv .pv-docview .pv-dialog-head{padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-6)}
  /* item 14: Family's two sides, each a card that is a link: the cover the two columns of the sides' cards under it (24 apart, no inset),
     each side its column's whole box on the content edge and the cover's height, 24 inside so its faces, name, line and time stand on
     the cards' text edge, centred as before; no ground at rest, --hover over the whole box under a pointer (preview-lift.css), 16 round */
  :root body.pv #pv-page .pv-cover.is-faces{padding:0; column-gap:var(--sp-6); align-content:stretch}
  :root body.pv #pv-page .pv-cover.is-faces a.pv-cover-side{display:flex; flex-direction:column; justify-content:center; align-items:flex-start; margin:0; padding:var(--sp-6); border-radius:var(--r-md)}
}
/* the shell, his fix 2 (28 Oct): no divider between the main column and the rail; the rail's cards carry their own edges and the gap
   stays --col-gap 32 (the 1px line drawn in the gap, preview-home.css; with the rail under the column, its top hairline) */
:root body.pv #pv-page .pv-cols:has(> .pv-col-side > *){background:none}
:root body.pv #pv-page .pv-col-side{border-top:0}
/* the shell, his fix 3 (28 Oct): two layouts only. From 1024 the hall; below it the phone layout at every width (every 767 and 768 edge
   in the sheets is 1023 and 1024 now, and the narrow rail's blocks are gone). From 640 the page keeps 24 gutters, Home's and The
   log's column at most 720 on the content edge, every other page the full width; the rail goes under the column */
@media (min-width:640px) and (max-width:1023px){
  :root body.pv #pv-page.pv-main{padding-left:var(--sp-6); padding-right:var(--sp-6)}
  :root body.pv #pv-page.pv-main > .pv-home{max-width:var(--col-main); margin-left:0; margin-right:0}
  :root body.pv #pv-page .pv-cols{grid-template-columns:minmax(0, 1fr)}   /* the rail under the column, however wide the page */
  :root body.pv #pv-page .pv-cols > .pv-col-side{position:static; margin-top:var(--sp-3); padding-top:var(--sp-4)}
}
/* his item 7 (28 Oct): a button over a photograph keeps its ground (Move the picture, and any control on a cover's corner: Memories',
   a celebration's, an album's): --surface at 92% under an 8 blur with 1px of --line-2 at rest, --surface whole on hover, never --hover
   (5% ink over a picture is no ground at all) */
:root body.pv #pv-page .pv-cover > .pv-cover-act :is(.pv-btn, button, summary, a):not(.pv-seg3 > *){background:color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid var(--line-2)}
:root body.pv #pv-page .pv-cover > .pv-cover-act :is(.pv-btn, button, summary, a):not(.pv-seg3 > *):hover{background:var(--surface)}
/* his item 8b (28 Oct): each side's time is a quiet line in its card, under its count (13, --ink-3); the lone sentence over the faces
   is gone, so a side's hover has nothing hanging over it */
:root body.pv #pv-page .pv-cover.is-faces .pv-cover-side-t{margin:var(--sp-1) 0 0; font-size:var(--fs-sm); line-height:18px; color:var(--ink-3)}
/* his item 10 (28 Oct): Invitations' cards are a card with the standard head (strip A, the title row only, the room's tint and ink, as
   every room's card): its deck under the strip, 14 in --ink-2 with 16 over and under it, the cards' band 24 clear of it (the rest of his
   sentence was cut off in the message: read as clear of the deck line) */
:root body.pv #pv-page .pvx-invcards-card > .pvx-invcards-deck{margin:var(--sp-4) 0; font-size:var(--fs-base); line-height:20px; color:var(--ink-2)}
:root body.pv #pv-page .pvx-invcards-card > .pvx-invcards-deck + .pv-paperband{margin-top:var(--sp-6)}
/* his item 11 (28 Oct): inside a card (and a link box), a paragraph is followed by 16 before a button row, a button row by 12 before a
   note, and a note is 13 in --ink-3 (the calendar card had 0 and 4, its note 14 in --ink-2; the link boxes 8). The sign-in page's card
   is left as it is: the round keeps that page at 0 changed pixels */
:root body.pv #pv-page :is(.pv-card, .pv-linkbox) > p + .pv-actions{margin-top:var(--sp-4)}
:root body.pv #pv-page :is(.pv-card, .pv-linkbox) > .pv-actions + p{margin-top:var(--sp-3)}
:root body.pv #pv-page :is(.pv-card, .pv-linkbox) > .pv-actions + p:is(.pv-hint, .pv-small, .pv-quiet, .pv-note){font-size:var(--fs-sm); line-height:18px; color:var(--ink-3)}

/* item 13: the house's viewer (views/preview/kit.js docView, public/preview-home.js): a file a link opens shows here, in the dialog's
   scrim and motion, its name, Open in a new tab, Download and x in one row, the file in the room left under it on the canvas: a PDF
   in the browser's own reader, a picture or a film whole; a kind no browser shows says it opens outside the house. Its size: the
   window less 24 a side on a laptop, the whole screen on a phone (the two blocks above) */
:root body.pv .pv-docview[open]{display:flex; flex-direction:column}
:root body.pv .pv-docview .pv-dialog-head{align-items:center}
:root body.pv .pv-docview .pv-dialog-head h2{flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
:root body.pv .pv-docview-acts{display:flex; flex-shrink:0; gap:var(--sp-2)}
:root body.pv .pv-docview .pv-docview-body{position:relative; flex:1; min-height:0; padding:0; display:grid; place-items:center; background:var(--canvas)}
:root body.pv .pv-docview-frame{position:absolute; inset:0; width:100%; height:100%; border:0}
:root body.pv .pv-docview-pic{position:absolute; inset:0; margin:auto; max-width:100%; max-height:100%}
:root body.pv .pv-docview-out{padding:var(--sp-6); color:var(--ink-2); text-align:center}

/* the door's line on Home ("Nine of the family have looked in since yesterday."): its bulb on the column's edge (A1), where the home
   audit hung it 5 into the gutter; the words 6 after it as before (the gate's rule i, read once nine had looked in) */
:root body.pv .pvn-say .pvn-bulb{margin-left:0}

/* item 14: a face run's "+44" is the more chip, not a face: --paper under --ink-2, as no one's tone (item 4's eight are people's) */
:root body.pv .pv-facerun-more{background:var(--paper); color:var(--ink-2)}

/* 27. Planning as the planning room (28 Oct 2026: his round after the audit clean's SHIP IT; DESIGN.md 12, P1 to P8). The overview
   answers first and lists second: its head as it was; the state of things (P2 to P4: four figures, each a card that is all one link,
   the number 32 at 600 in tabular figures, its denominator and noun 14 in --ink-2 on its baseline, a 4 gold line under it where it has
   a denominator, then one sentence 16 in --ink-2); what needs you (P5: Next for the wedding, one card the box's width); the rooms (P6:
   a card for each room with something in it, two across, its status line 13 in --ink-3 under the strip, an odd last one across both
   with its rows in two columns); then the rooms with nothing in them yet, a quiet line of links. A room's head gains its figure line
   under the deck (P7: the figure 16 at 600, its status 13 in --ink-3) and its rail the cards of what crosses rooms (views/preview/plan.js
   planningDoor, figLine and crossRail; lib/planning.js computes every figure once, P8) */
:root body.pv #pv-page .pv-plstate{margin:0 0 var(--sp-8)}
:root body.pv #pv-page .pv-pltiles{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); align-items:stretch; gap:var(--sp-4); margin:0; padding:0; list-style:none}   /* (v216's fix round, his item 2b) the tiles drawn share the row: four, three or two across its whole width, never an empty cell */
:root body.pv #pv-page .pv-pltiles > li{display:flex; min-width:0; margin:0}
:root body.pv #pv-page a.pv-pltile{display:flex; flex-direction:column; flex:1 1 auto; box-sizing:border-box; min-width:0; margin:0; padding:var(--sp-4); color:var(--ink); text-decoration:none}
:root body.pv #pv-page a.pv-pltile:hover{background:var(--hover); text-decoration:none}
:root body.pv #pv-page .pv-pltile-fig{display:flex; flex-wrap:wrap; align-items:baseline; gap:0 var(--sp-2); margin:0}
:root body.pv #pv-page .pv-pltile-n{font:600 var(--fs-2xl)/40px var(--ui); letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap}   /* (the design review, item 4, 1 Nov 2026) tracked as the title beside it, -.01em at 32 */
:root body.pv #pv-page .pv-pltile-of{font:400 var(--fs-base)/20px var(--ui); color:var(--ink-2); font-variant-numeric:tabular-nums}
:root body.pv #pv-page :is(.pv-pltile-of, .pv-head-fig, .pv-plancard-fig) .pv-pl-late{color:var(--warn)}
:root body.pv #pv-page .pv-plancard-fig{display:inline-flex; align-items:baseline; gap:0 var(--sp-1); white-space:nowrap; font:500 var(--fs-base)/20px var(--ui)}
:root body.pv #pv-page .pv-pltile-bar{display:block; flex:none; height:4px; margin:auto 0 0; border-radius:var(--r-full); background:var(--gold-tint); overflow:hidden}
:root body.pv #pv-page .pv-pltile-fig:has(+ .pv-pltile-bar){margin-bottom:var(--sp-3)}
:root body.pv #pv-page .pv-pltile-bar > i{display:block; height:100%; border-radius:inherit; background:var(--gold)}
/* (his fix round, item 1) over the budget, seen without reading: the number in --warn (on the tile, the Money card's head and Money's
   own figure line), the words after it as they were; the tile's line drawn full in --warn-tint */
:root body.pv #pv-page :is(.pv-pltile-n.is-over, .pv-pl-over){color:var(--warn)}
:root body.pv #pv-page .pv-pltile-bar.is-over > i{background:var(--warn-tint)}
:root body.pv #pv-page .pv-plsay{margin:var(--sp-4) 0 0; font:400 var(--fs-md)/var(--lh-body) var(--ui); color:var(--ink-2)}
:root body.pv #pv-page.pvr-plandoor .pvx-next, :root body.pv #pv-page .pvr-plandoor .pvx-next{margin:0 0 var(--sp-8)}
:root body.pv #pv-page .pv-plancards{margin:0 0 var(--sp-6)}
:root body.pv #pv-page .pv-plancard-foot{text-align:right}   /* a card's foot link is right-aligned words (A1: its left is no text edge), "See all N" and "Open <room>" */
:root body.pv #pv-page .pv-plancard-st{margin:0 0 var(--sp-1); font:400 var(--fs-sm)/20px var(--ui); color:var(--ink-3)}
:root body.pv #pv-page .pv-plancards > li.pv-plancard:last-child:nth-child(odd){grid-column:1 / -1}
:root body.pv #pv-page .pv-plancards > li.pv-plancard:last-child:nth-child(odd) > .pv-rows{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:var(--sp-6)}
:root body.pv #pv-page .pv-plancards > li.pv-plancard:last-child:nth-child(odd) > .pv-rows > li:nth-child(2){border-top-color:transparent}   /* its first row's partner, beside it: no hairline over it */
:root body.pv #pv-page .pv-plempty{margin:0 0 var(--sp-8)}
:root body.pv #pv-page .pv-plempty-h{margin:0 0 var(--sp-2); font:600 var(--fs-base)/20px var(--ui); color:var(--ink-2)}
:root body.pv #pv-page .pv-plempty > ul{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-6); margin:0; padding:0; list-style:none}
:root body.pv #pv-page .pv-plempty a{display:inline-flex; align-items:center; gap:var(--sp-1); min-height:32px; font:500 var(--fs-base)/20px var(--ui); color:var(--ink-2); text-decoration:none}
:root body.pv #pv-page .pv-plempty a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
:root body.pv #pv-page .pv-plempty a > svg{width:16px; height:16px}
:root body.pv #pv-page .pv-head .pv-head-fig{margin:var(--sp-3) 0 0; font:600 var(--fs-md)/24px var(--ui); color:var(--ink); font-variant-numeric:tabular-nums}
:root body.pv #pv-page .pv-head .pv-head-st{margin:0; font:400 var(--fs-sm)/20px var(--ui); color:var(--ink-3)}
@media (max-width:1023px){
  :root body.pv #pv-page .pv-pltiles{grid-auto-flow:row; grid-template-columns:repeat(2, minmax(0, 1fr))}
  :root body.pv #pv-page .pv-pltiles > li:last-child:nth-child(odd){grid-column:1 / -1}   /* (his item 2b) three: the third across both, as an odd last room card */
  :root body.pv #pv-page .pv-plancards > li.pv-plancard:last-child:nth-child(odd) > .pv-rows{display:block}
  :root body.pv #pv-page .pv-plancards > li.pv-plancard:last-child:nth-child(odd) > .pv-rows > li:nth-child(2){border-top-color:var(--line)}   /* one column again: its hairline back */
}

/* 28. Every error the house can show (v216 Part C, 28 Oct 2026: his C1 and C2; views/preview/errors.js, server.js errorFor). A
   whole-page error is one short title with a gold full stop, one line saying what to do, and one wine way back. Signed in, the page
   head of the hall (its title's stop gold, not its wing's: the page is in no wing) and "Back to Home" under it, on the content edge;
   signed out, the sign-in page's own frame (its painting, the names, the mark), the door's card on the paper, its title's stop gold
   and "Go to the door". The page that needs nothing (the database gone) carries its own few rules, written into it. */
:root body.pv #pv-page .pv-head.pv-err{--w-stop:var(--gold)}
:root body.pv #pv-page .pv-err-way{margin:0}
:root body.pv #pv-page.pv-errpage .pv-err-way > .pv-btn.pv-btn-primary{background:var(--wine); border-color:transparent; color:var(--on-wine)}   /* (the page's one Primary, wine: this sheet draws a primary outside a head's acts white) */
:root body.pv #pv-page.pv-errpage .pv-err-way > .pv-btn.pv-btn-primary:hover{background:var(--wine-press)}
.pv-doorcard.pv-err h2::after{content:"."; content:"." / ""; color:var(--gold)}

/* The settings part (the buttons round, part C, 31 Oct 2026; his picks; views/preview/kit.js setPart): one part for every settings place,
   Settings' tabs, an album's settings, a list's settings and Settings → Guests. One spacing rule inside a part (SETTINGS-REVIEW
   "Spacing"): 8 from a label to its field, 16 from one field to the next, 12 from a note to what it explains, 24 above Save. Fields
   are 44 tall. Save is the kit's Secondary at rest and its Primary once a field of its form changes (public/preview-quiet.js): no
   look of its own here. Who sees what keeps its tick tables, circles as rows and rooms as columns (his word, 31 Oct 2026: "that way it's
   easier to map who we are giving access to … don't change this"): nothing here touches the tables or their ticks. */
:root body.pv #pv-page .pvx-set > .pv-fold-in, :root body.pv #pv-page .pvx-set > .pv-fold-in > form:not(.pv-menu-form, .pv-search){display:grid; gap:16px; align-content:start}
:root body.pv #pv-page .pvx-sets :is(.pv-field, .pv-fs > .pv-field){gap:8px}
:root body.pv #pv-page .pvx-sets .pv-grid2{gap:16px}
:root body.pv #pv-page .pvx-sets .pv-field > .pv-hint{margin-top:4px}   /* + the field's 8: 12 under what it explains */
:root body.pv #pv-page .pvx-sets :is(.pv-fold-in, .pv-fold-in > form) > :is(p.pv-small, p.pv-quiet):not(:last-child):has(~ :not(script, template, input[type=hidden], [hidden])){margin:0 0 -4px}   /* (part M) never under the last thing drawn */   /* + the part's 16: 12 to what it explains */
:root body.pv #pv-page .pvx-sets :is(.pv-fold-in, .pv-fold-in > form) > .pv-actions:has(> [data-save]):not(:first-child){margin-top:8px}   /* + 16: 24 above Save */
:root body.pv #pv-page .pvx-sets :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=file], [type=range]), select){min-height:44px; box-sizing:border-box}
:root body.pv #pv-page .pvx-sets .pv-search :is(input[type=search]){min-height:44px}
/* Save changed (a state: public/preview-quiet.js sets data-dirty once a field of its own form changes): the kit's Primary, wine, which the
   page's one rule for buttons (body.pv … .pv-btn:is(.pv-btn-primary, .pv-btn-secondary) {--surface}) would otherwise draw white */
:root body.pv #pv-page .pvx-sets .pv-btn[data-save][data-dirty]{background:var(--wine); border-color:transparent; color:var(--on-wine)}
:root body.pv #pv-page .pvx-sets .pv-btn[data-save][data-dirty]:hover{background:var(--wine-press)}
/* The headings (his fix of 31 Oct 2026: "these section headers need to be written or at least highlighted in a different way so that
   they are distinguishable from the main body"): a part's title and a heading inside a part are headings in a card (R13, the gate's
   rule h): 16 at 600 in ink, the house's heading weight; what is set stays beside the title in the summary's 14 at 400; a heading inside
   a part has 24 above it, 8 under it. No new size, no capitals, never 700. */
:root body.pv #pv-page .pvx-set > summary .pvx-set-t{display:inline; margin:0; font-size:var(--fs-md); font-weight:600; line-height:1.4; color:var(--ink)}
:root body.pv #pv-page .pvx-set > summary .pvx-set-is{font-size:var(--fs-base); font-weight:400; color:var(--ink-2)}
:root body.pv #pv-page .pvx-set > summary:hover .pvx-set-t{color:var(--wine)}
:root body.pv #pv-page .pvx-set-h{margin:24px 0 -8px; font-size:var(--fs-md); font-weight:600; line-height:1.4; color:var(--ink)}   /* in a part's grid: 24 above, 8 under */
:root body.pv #pv-page .pv-fold-in > .pvx-set-h:first-child, :root body.pv #pv-page .pvx-set-h:first-child{margin-top:0}
:root body.pv #pv-page .pvx-themes-h > .pvx-set-h{margin:0}
:root body.pv #pv-page .pvx-set-del > summary .pvx-set-t{color:var(--danger)}
/* The heading rows on their colours (his pick of 31 Oct 2026, "A, coloured rows", 22-settings-colour-mock.png): within one settings
   place the parts take the house's five wing hues in turn (kit.js setHues puts --h on each part's summary as the place is drawn). The
   row on its hue at 13% over the card, 12 past the words each side so they stay on the page's one line (rule 13), --r-md round; the
   icon in the hue; the title stays ink 16/600; what is set a deeper shade of the hue: 45% of it on --ink (on --ink-2 it fell to 3.5:1
   for home and cel on Linen; on --ink the least is 5.2:1, on all four themes' cards). Keyed on pv-paper, as the wings' colours are
   (art.css): Wine and Midnight carry no wing hues, so their rows stay plain. Only the row: the fields, rows and Save under it are as
   they were. */
:root body.pv.pv-paper #pv-page .pvx-set > summary.pvx-set-hue{margin-inline:calc(-1 * var(--card-in)); padding-inline:var(--card-in); border-radius:calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0; background:color-mix(in srgb, var(--h) 13%, var(--surface))}
:root body.pv.pv-paper #pv-page .pvx-set > summary.pvx-set-hue > svg:first-child{color:var(--h)}
:root body.pv.pv-paper #pv-page .pvx-set > summary.pvx-set-hue .pvx-set-is{color:color-mix(in srgb, var(--h) 45%, var(--ink))}
/* (his word of 31 Oct, after v220: "weird incomplete lines above each section", "the color fill at the bottom is square but the table
   border is not", and the content too close under its row) the coloured rows divide the parts, so no line above them; a part's
   content stands 16 under its row, as its last line stands over the next; a row at the card's top or closed at its foot takes the card's corners */
/* (part O, his call of 6 Nov 2026) each part is its own card (below): its band takes the card's corners inside its line, the top two
   when open and all four when closed, so no colour runs past a rounded border; no card clips (a menu opening inside it stays whole) */
:root body.pv.pv-paper #pv-page .pvx-set:not([open]) > summary.pvx-set-hue{border-radius:calc(var(--r-md) - 1px)}
/* (part O) each part its own card, Settings' tabs, a list's settings and an album's alike: the parts' place is no card any more, the
   house's card gap between two; a part is a card (its line, its ground, its shadow, --r-md, the house's 24 in, 18 under 1024), its
   band across its top, its content --card-in under the band and --card-in over its foot (part M: the same top and bottom, whatever its
   last child), so an open card plainly ends where its content ends and closed ones read as a column of coloured bands */
/* (part P, his zoom of sheet 24: "is this correct?") the parts' place was still drawing a card's edge, the outline every .pv-card wears
   (v209 item 6, its line inside the edge), square since its corners went to 0: a thin square frame around the cards, and the page's white
   between it and each card's rounded corner. It is no card: no outline */
:root body.pv #pv-page .pv-card.pvx-sets{padding:0; border:0; border-radius:0; background:none; box-shadow:none; outline:0; display:grid; gap:var(--card-gap, 16px); align-content:start; overflow:visible}
:root body.pv #pv-page .pvx-sets > form:has(> .pvx-set){display:grid; gap:var(--card-gap, 16px); align-content:start}
:root body.pv #pv-page .pvx-sets .pvx-set{margin:0; padding:0 var(--card-in); border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); box-shadow:var(--shadow-1); min-width:0}
:root body.pv #pv-page .pvx-sets .pvx-set > summary{border-radius:calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0}
:root body.pv #pv-page .pvx-sets .pvx-set:not([open]) > summary{border-radius:calc(var(--r-md) - 1px)}
:root body.pv #pv-page .pvx-sets .pvx-set[open] > summary{margin-bottom:var(--card-in)}
:root body.pv #pv-page .pvx-sets .pvx-set > .pv-fold-in{padding:0 0 var(--card-in)}
/* The card heads on their colours (his word of 2 Nov 2026, of Notifications: "give … the header rows colors like we did in the settings so
   that it's similar"): a card's head as the settings' band above, on its hue at 13% over the card, across the card's width (the head already
   meets its edges), its corners the card's, no rule under it (the colour is its edge, as there); the title in ink, a count 45% of the hue on
   --ink. Each card keeps its own hue (kit.js panel's `hue`). On White and Linen, as above; the head's size is as it was. */
:root body.pv.pv-paper #pv-page .pv-card.pv-panel > .pv-panel-top.pvx-head-hue{background:color-mix(in srgb, var(--h) 13%, var(--surface)); border-bottom-color:transparent; border-radius:calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0}
:root body.pv.pv-paper #pv-page .pv-card.pv-panel > .pv-panel-top.pvx-head-hue .pv-panel-h{color:var(--ink)}
:root body.pv.pv-paper #pv-page .pv-card.pv-panel > .pv-panel-top.pvx-head-hue .pv-panel-h em{color:color-mix(in srgb, var(--h) 45%, var(--ink))}
/* A side's family link and "Add someone"'s send step (his fix of 31 Oct 2026): the side's name a heading, its counts under it, then
   "Share in …'s family group" and Copy the link; once someone is added, their name, the words, then their link to send */
:root body.pv #pv-page .pv-linkbox > .pvx-set-h{margin:0}
:root body.pv #pv-page .pv-linkbox > .pvx-sidecount{margin:4px 0 0}
:root body.pv #pv-page .pv-linkbox > .pvx-set-h + .pv-actions{margin-top:12px}
/* (day links, 6 Nov 2026) a side's links for some days, under its family link: a label in the part's own small heading role, each link a
   row on the box's line (no box inside the box), its days in words at 500 and its count after it; then the days to tick for another */
/* (part K, his word of 6 Nov 2026 on live v229: "A new link for in Akshita's side is not really clear that it belongs to Akshita's side
   because there's a line above it and then a line below it is starting a new Mohit side") each side one group: its name, its counts,
   its buttons, then its day links in a light inset panel of its own (the head's cream --panel, 16 in, --r-md: the house's panel), which
   holds its small heading and that heading's line, the links as a list with a light line between two, and A new link for after them.
   The one full-width rule is the one between the two sides, 24 from each (the fold's own 16 between its parts, and 8) */
:root body.pv #pv-page .pvx-linkside:first-of-type{margin-top:8px; padding-top:0; border-top:0}
:root body.pv #pv-page .pvx-linkside + .pvx-linkside{margin-top:8px; padding-top:24px}
:root body.pv #pv-page .pvx-linkside{padding-bottom:0}
:root body.pv #pv-page .pvx-daylinks{margin-top:16px; padding:16px; border-radius:var(--r-md); background:var(--panel); min-width:0}
:root body.pv #pv-page .pvx-daylinks-k{margin:0; padding-bottom:8px; border-bottom:1px solid var(--line); font-size:var(--fs-base); font-weight:600; line-height:20px; color:var(--ink-2)}
/* the days to tick, on Settings and on the member's form: 12 between two chips' edges, as DESIGN.md's hairlines ask */
:root body.pv #pv-page .pv-dayticks.pvx-ticks12{gap:12px}
/* (part I) the one day picker: a fieldset in a field's place, its legend as a field's label (house.css .pv-field label), the same pills
   everywhere (checkbox or radio alike take the filled pill once chosen) */
:root body.pv #pv-page .pvx-daypick{margin:0; padding:0; border:0; min-width:0; display:grid; gap:8px}
/* (part K) a legend is no grid item of its fieldset: its 6 before the pills is its own margin, the field's 6 between a label and its control */
:root body.pv #pv-page .pvx-daypick-k{padding:0; margin:0 0 6px; font-size:var(--fs-base); font-weight:500; line-height:20px; color:var(--ink-2)}
:root body.pv #pv-page .pvx-daypick .pv-hint{margin:0}
:root body.pv #pv-page .pvx-daypick .pv-dayt:has(input[type=radio]:checked){border-color:var(--line); background:var(--wine-tint); color:var(--wine)}
:root body.pv #pv-page .pvx-daypick .pv-dayt input[type=radio]{appearance:none; outline:0}
:root body.pv #pv-page .pvx-daylist{list-style:none; margin:0; padding:0}
:root body.pv #pv-page .pvx-dayl{padding:12px 0; display:grid; gap:8px; min-width:0}
:root body.pv #pv-page .pvx-dayl + .pvx-dayl{border-top:1px solid var(--line)}
:root body.pv #pv-page .pvx-dayl-t{margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; min-width:0}
:root body.pv #pv-page .pvx-dayl-n{margin:0; font-size:var(--fs-md); font-weight:500; line-height:20px; color:var(--ink)}
:root body.pv #pv-page .pvx-dayl .pv-actions{margin:0}
:root body.pv #pv-page .pvx-daylinks > .pv-small{margin:12px 0}
:root body.pv #pv-page .pvx-daymake{display:block; margin:0; padding-top:12px; border-top:1px solid var(--line)}
:root body.pv #pv-page .pvx-daymake .pv-dayticks{align-items:center}
:root body.pv #pv-page .pvx-daymake-f{margin:0; padding:0; border:0; min-width:0; display:grid; gap:8px}
:root body.pv #pv-page .pvx-daymake-f > legend{padding:0; margin:0 0 8px; color:var(--ink-3)}
/* (part L, his word of 6 Nov 2026 on live v230: "everything is just one line apart and cramped. Nothing is segregated properly") a
   member's way in is a card as the line's above it (its padding, its head band), as wide; inside, three parts in Settings' rhythm (the
   family links' sides): a part's small heading, 4 to its hint, 12 to its row (8 straight under the heading), and 24 either side of the
   light line between two parts. The link's row: the field and its two buttons, the field taking what is left and the buttons wrapping
   under it where it is narrow. The code is a figure, 24 at 600, its address 13 under it */
:root body.pv #pv-page .pvx-keyp .pvx-keypart{padding:24px 0; min-width:0}
:root body.pv #pv-page .pvx-keyp .pv-panel-top + .pvx-keypart{padding-top:0}
:root body.pv #pv-page .pvx-keyp .pvx-keypart:last-child{padding-bottom:0}
:root body.pv #pv-page .pvx-keyp .pvx-keypart + .pvx-keypart{border-top:1px solid var(--line)}
:root body.pv #pv-page .pvx-keyp .pvx-keypart > .pvx-set-h{margin:0}
:root body.pv #pv-page .pvx-keyp .pvx-keypart > .pv-hint{margin:4px 0 0}
:root body.pv #pv-page .pvx-keyp .pvx-keyrow{margin:12px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:12px; min-width:0}
:root body.pv #pv-page .pvx-keyp .pvx-set-h + .pvx-keyrow{margin-top:8px}
:root body.pv #pv-page .pvx-keyp .pvx-keyrow > .pv-linkline{flex:1 1 280px; min-width:0; margin:0}
:root body.pv #pv-page .pvx-keyp .pvx-keyrow > .pv-actions{margin:0; flex:none}
:root body.pv #pv-page .pvx-keyp .pvx-keydays{flex:0 1 auto; min-width:0; margin:0; font-size:var(--fs-base); line-height:20px; color:var(--ink)}
:root body.pv #pv-page .pvx-keyp .pvx-keycode{margin:8px 0 0; line-height:32px}
:root body.pv #pv-page .pvx-keyp .pvx-keycode > .pv-code{font-size:var(--fs-xl); font-weight:600}
:root body.pv #pv-page .pvx-keyp .pvx-keyat{margin:0; color:var(--ink-3)}
:root body.pv #pv-page .pvx-added{display:grid; gap:12px; min-width:0}
:root body.pv #pv-page .pvx-added > p{margin:0}
:root body.pv #pv-page .pvx-added > .pv-actions{margin:4px 0 0}
/* Delete stands apart: the last part, alone, its summary and its one button red */
:root body.pv #pv-page .pvx-set.pvx-set-del > summary, :root body.pv #pv-page .pvx-set.pvx-set-del > summary > svg:first-child{color:var(--danger)}
/* People (S1): the family links, then Find someone; nobody listed until something is typed */
:root body.pv #pv-page .pvx-pfind{max-width:none; margin:0}
:root body.pv #pv-page .pvx-pfound{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; min-width:0}
:root body.pv #pv-page .pvx-pfound > .pv-chips{margin:0}
:root body.pv #pv-page .pvx-psaid{margin:0}
:root body.pv #pv-page .pvx-psaid:empty{display:none}
:root body.pv #pv-page .pv-keys:not(:has(> li:not([hidden]))){display:none}
:root body.pv #pv-page .pv-keys > .pv-keyrow{flex-wrap:wrap}
:root body.pv #pv-page .pv-keys > .pv-keyrow > .pvx-pedit{flex:1 0 100%; padding:8px 0 16px}
:root body.pv #pv-page .pvx-pnote{margin:0}
/* Who sees Money, one line in Who sees what (S3) */
:root body.pv #pv-page .pvx-moneyline{display:flex; align-items:flex-start; gap:8px}
:root body.pv #pv-page .pvx-moneyline > svg{flex:none; margin-top:2px; color:var(--ink-3)}
:root body.pv #pv-page .pvx-moneyline b{font-weight:500; color:var(--ink)}
/* The house's rooms as ONE list in the order everyone sees them (his fix of 31 Oct 2026): no line between rows; each row the handle, the
   room's name as a single-line row (R13: 14, its line gone), ↑ ↓ (without script). The order alone (his pick of 31 Oct 2026, "In Who sees
   what"): which rooms the house has is Who sees what's first part, so the switches and "always open" left this list */
:root body.pv #pv-page .pvx-house .pvx-rooms{margin:0; padding:0; list-style:none}
:root body.pv #pv-page .pvx-house .pvx-rooms > li, :root body.pv #pv-page .pvx-house .pvx-rooms .pv-vrow{border:0; background:none}
:root body.pv #pv-page .pvx-house .pvx-house-row{display:grid; grid-template-columns:36px minmax(0, 1fr) auto; align-items:center; column-gap:12px; min-height:44px; padding:0}
:root body.pv #pv-page .pvx-house .pvx-room-n{min-width:0; font-size:var(--fs-base); font-weight:500; line-height:1.4; color:var(--ink)}
:root body.pv #pv-page .pvx-house .pvx-house-move{display:flex; justify-content:flex-start}
:root body.pv #pv-page .pvx-house .pvx-house-acts{display:flex; align-items:center; justify-content:flex-end; gap:8px}
:root body.pv #pv-page .pvx-house .pvx-house-acts > .pv-icon-btn[hidden]{display:none}
/* Who sees what: a room off for the whole house (Rooms in this house, its first part) has its column in the circles' tables not
   available: its name in --ink-3 and its ticks, kept as they were, faded and not to be pressed. Rooms in this house is a tick table as
   theirs are (pv-matrix); its always-open rooms ticked and disabled, as a ticked disabled tick is everywhere */
:root body.pv #pv-page .pv-matrix th.pvx-offcol{color:var(--ink-3)}
:root body.pv #pv-page .pv-matrix td.pvx-offcol > input[type=checkbox]:disabled{opacity:.4}
/* an album's settings and a list's: the settings card's own padding, as Settings' tabs */
:root body.pv #pv-page .pvx-albsets{display:block; padding-block:0}
:root body.pv #pv-page .pvx-albsets > .pv-actions{margin:8px 0 0; padding:16px 0 20px; border-top:1px solid var(--line)}
:root body.pv #pv-page #pvl-settings{margin-top:16px}
:root body.pv #pv-page .pvx-set > .pv-fold-in > form > :is(.pv-btn, button){justify-self:start}   /* a lone button in a part keeps its own width */
/* Tools the same in every room (the buttons round, part B, his picks): a room's single action is a compact Secondary in the list's
   toolbar, at its right, before Tools where the room has one; Tools' panel, opened, still runs the toolbar's whole width under it */
:root body.pv #pv-page .pv-listbar:has(> .pvx-lb-acts){display:flex; flex-wrap:wrap; align-items:center; gap:8px}
:root body.pv #pv-page .pv-listbar:has(> .pvx-lb-acts) > .pv-listbar-n{flex:1 1 auto; min-width:0; padding-right:0}
:root body.pv #pv-page .pv-listbar > .pvx-lb-acts{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-left:auto}
:root body.pv #pv-page .pv-listbar:has(> .pvx-lb-acts) > details.pv-tools{display:contents}
:root body.pv #pv-page .pv-listbar:has(> .pvx-lb-acts) > details.pv-tools::details-content{display:contents}
:root body.pv #pv-page .pv-listbar:has(> .pvx-lb-acts) > details.pv-tools > summary{margin-left:0}
:root body.pv #pv-page .pv-listbar:has(> .pvx-lb-acts) > details.pv-tools > .pv-tools-in, :root body.pv #pv-page .pv-listbar:has(> .pvx-lb-acts) > .pv-tools-on{flex:1 0 100%; margin-top:0}

/* ---- (wow 2, 31 Oct 2026) Home's entrance, once a visit (docs/wow-2026-10-31/home-build.md, item 2). Home's head carries a short
   script (kit.js ARRIVE): on the first full load of Home in a browser session (sessionStorage pv-arrived unset, motion not reduced)
   it puts pv-arrive on <html>. Every start state below lives only under html.pv-arrive, from the keyframes' from (fill backwards since 11 Nov: held through the delay, let go at the end), so
   without the class Home is exactly as before, with its quick pvh-in. In order, on (.23, 1, .32, 1): the photograph fades in over
   500 and settles from 1.05 over 900, clipped by its own box; the names rise 12 over 400 at 200; the date and place at 290; the
   count and the clock at 380; the greeting at 470; what follows the greeting keeps pvh-in from 560, 30 apart; what had no
   entrance (the rail, the days, the rest of the column) fades in, opacity only, from 590. All settled by 900. Reduced motion: the
   script adds nothing, and the house's reduce rule turns every animation off. */
@keyframes pvw-fade{from{opacity:0}}
@keyframes pvw-settle{from{transform:scale(1.05)}}
@keyframes pvw-rise{from{opacity:0; transform:translateY(12px)}}
html.pv-arrive body.pv #pv-page .pv-home.pvn > .pvn-cover > .pv-hero-ph{overflow:hidden}
html.pv-arrive body.pv #pv-page .pv-home.pvn > .pvn-cover > .pv-hero-ph > img{animation:pvw-fade 500ms cubic-bezier(.23, 1, .32, 1) both, pvw-settle 900ms cubic-bezier(.23, 1, .32, 1) both}
html.pv-arrive body.pv #pv-page .pv-home.pvn > .pvn-cover .pv-hero-tx > h1{animation:pvw-rise 400ms cubic-bezier(.23, 1, .32, 1) 200ms backwards}
html.pv-arrive body.pv #pv-page .pv-home.pvn > .pvn-cover .pv-hero-tx > .pv-dateline{animation:pvw-rise 400ms cubic-bezier(.23, 1, .32, 1) 290ms backwards}
html.pv-arrive body.pv #pv-page .pv-home.pvn > .pvn-cover .pv-hero-facts{animation:pvw-rise 400ms cubic-bezier(.23, 1, .32, 1) 380ms backwards}
html.pv-arrive body.pv #pv-page .pv-home.pvn > .pvx-q-col > .pv-feedcol:not(.pvx-q-tail) > :nth-child(1){animation-delay:560ms}
html.pv-arrive body.pv #pv-page .pv-home.pvn > .pvx-q-col > .pv-feedcol:not(.pvx-q-tail) > :nth-child(2){animation-delay:590ms}
html.pv-arrive body.pv #pv-page .pv-home.pvn > .pvx-q-col > .pv-feedcol:not(.pvx-q-tail) > :nth-child(3){animation-delay:620ms}
html.pv-arrive body.pv #pv-page .pv-home.pvn > .pvx-q-col > .pv-feedcol:not(.pvx-q-tail) > :nth-child(4){animation-delay:650ms}
html.pv-arrive body.pv #pv-page .pv-home.pvn > .pvx-q-col > .pv-feedcol:not(.pvx-q-tail) > :nth-child(5){animation-delay:680ms}
html.pv-arrive body.pv #pv-page .pv-home.pvn > .pvx-q-col > .pv-feedcol:not(.pvx-q-tail) > :nth-child(n+6), html.pv-arrive body.pv #pv-page .pv-home.pvn > .pvx-q-col > .pvx-q-tail{animation:pvw-fade var(--dur) var(--ease-out) 710ms backwards}
html.pv-arrive body.pv #pv-page .pv-home.pvn > .pv-sidecol{animation:pvw-fade var(--dur) var(--ease-out) 590ms backwards}
html.pv-arrive body.pv #pv-page .pv-home.pvn > .pv-days-nav{animation:pvw-fade var(--dur) var(--ease-out) 620ms backwards}
html.pv-arrive body.pv #pv-page .pv-home.pvn > .pvo-around{animation:pvw-fade var(--dur) var(--ease-out) 650ms backwards}
html.pv-arrive body.pv #pv-page .pv-home.pvn > .pvx-q-col > .pv-feedcol:not(.pvx-q-tail) > header.pvn-door{animation:pvw-rise 400ms cubic-bezier(.23, 1, .32, 1) 470ms backwards}

/* ---- (wow 3, 31 Oct 2026) The hero lives, slowly (docs/wow-2026-10-31/home-build.md, item 3 and its revision).
   A, the drift: on Home the photograph drifts from 1 to 1.04 over 20 s, ease-in-out, once a load (no loop; it rests at 1.04),
   clipped by its own box, on every load of Home. On a first visit it is the third animation on the same img, after wow 2's
   settle (900, the same element), so the settle hands over at 1 and the drift goes on from there; on every other load it starts
   at 0. Reduced motion: off, by the house's reduce rule, as wow 2's.
   B, the tiles' hover, one motion a hover (revised the same night, his word on an album's cover: "its cover slightly drifts up
   ... a little delayed"): a tile whose picture scales keeps its frame still on every input (no 1px lift; the 26 Oct lift stays on
   a tile with no picture to scale: a room's icon tile, a painted day cover, an album with no cover) and answers with --shadow-2
   alone, while its picture scales to 1.03 inside it (each tile clips: overflow hidden, measured). In 320, out 200, both on
   --ease-out, the shadow on the same two times, so the two move together. No will-change: a picture kept on its own layer
   drew softer at rest (measured: the packet), so the browser lifts it onto a layer only while it moves. The tiles: a photograph's tile (Home's and the photo grids'), an
   album's cover, a day's card (a photograph; a painted cover is drawn whole, so it does not grow), the memory's card on Home.
   Where words sit under (or beside) the picture it grows from that edge, so nothing spills over them. The picture moves only
   with a fine pointer that hovers and motion not reduced (one media query). The doubled classes meet the older rules' weight.
   §8's ceiling (--dur-slow) gains the drift and the 320: his call. */
@keyframes pvw-drift{from{transform:scale(1)} to{transform:scale(1.04)}}
body.pv #pv-page .pv-home.pvn > .pvn-cover > .pv-hero-ph{overflow:hidden}
body.pv #pv-page .pv-home.pvn > .pvn-cover > .pv-hero-ph > img{animation:pvw-drift 20s ease-in-out forwards}
html.pv-arrive body.pv #pv-page .pv-home.pvn > .pvn-cover > .pv-hero-ph > img{animation:pvw-fade 500ms cubic-bezier(.23, 1, .32, 1) both, pvw-settle 900ms cubic-bezier(.23, 1, .32, 1) both, pvw-drift 20s ease-in-out 900ms forwards}
body.pv #pv-page :is(.pv-grid, .pvx-memnew-grid) > a.pv-tile, body.pv #pv-page .pv-home.pvn .pv-grid > a.pv-tile.pv-tile, body.pv #pv-page .pv-home.pvn a.pvo-memory.pv-card.pv-card,
body.pv #pv-page a.pv-album > .pv-album-cover:has(> img), .pv.pv-paper #pv-page .pv-daycard:has(> img.pv-daypic:not(.is-art)){transition:box-shadow 200ms var(--ease-out)}
body.pv #pv-page :is(.pv-grid, .pvx-memnew-grid) > a.pv-tile:hover, body.pv #pv-page .pv-home.pvn .pv-grid > a.pv-tile.pv-tile:hover, body.pv #pv-page .pv-home.pvn a.pvo-memory.pv-card.pv-card:hover,
body.pv #pv-page a.pv-album:hover > .pv-album-cover:has(> img), .pv.pv-paper #pv-page .pv-daycard:has(> img.pv-daypic:not(.is-art)):hover{transform:none; box-shadow:var(--shadow-2); transition:box-shadow 320ms var(--ease-out)}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  body.pv #pv-page :is(.pv-grid, .pvx-memnew-grid) > a.pv-tile > img, body.pv #pv-page .pv-home.pvn a.pvo-memory > img.pvo-memory-ph,
  body.pv #pv-page a.pv-album > .pv-album-cover > img, .pv.pv-paper .pv-daycard > img.pv-daypic:not(.is-art){transition:transform 200ms var(--ease-out)}
  body.pv #pv-page .pv-home.pvn a.pvo-memory > img.pvo-memory-ph, .pv.pv-paper .pv-daycard > img.pv-daypic{transform-origin:50% 100%}
  @container (min-width:640px){ body.pv #pv-page .pv-home.pvn a.pvo-memory.is-tall > img.pvo-memory-ph{transform-origin:100% 50%} }
  body.pv #pv-page :is(.pv-grid, .pvx-memnew-grid) > a.pv-tile:hover > img, body.pv #pv-page .pv-home.pvn a.pvo-memory:hover > img.pvo-memory-ph,
  body.pv #pv-page a.pv-album:hover > .pv-album-cover > img, .pv.pv-paper .pv-daycard:hover > img.pv-daypic:not(.is-art){transform:scale(1.03); transition:transform 320ms var(--ease-out)}
}

/* ---- (wow 8, 31 Oct 2026) The hall, 13 rows to 8 (docs/wow-2026-10-31/home-build.md, item 8). From 1024 (under it the hall is not
   drawn; the phone's tab bar and top bar are as they were): the brand, the search, the five wings, a rule, Saathi, Messages and
   Notifications; Rooms and The log (with their rule) and Your page and Settings (with theirs) leave the rows for the person's row,
   pinned to the hall's foot with 12 under it (kit.js nav, .pv-me): the portrait and the given name, a 16 chevron in the bar's
   --ink-2 at its right; folded, the portrait with "You" under it at 12, as a folded row. It opens a menu (the kit's pop-over look:
   --surface, a hairline, 16 round, --pop, rising 4 over --dur-fast) of Your page, Rooms, The log and Settings with their icons,
   fixed over everything so the hall's clip does not cut it: above the row when open, to its right when folded (public/preview-flow.js
   places it). The row wears the hall's --bar-cur pill when one of the four is the page. The groups keep their 12, 1, 12 open and
   8, 1, 8 folded. */
body.pv #pv-bar .pv-wings + .pv-nav-rule, body.pv #pv-bar .pv-wings + .pv-nav-rule + .pv-list, body.pv #pv-bar .pv-nav-end > .pv-nav-rule,
body.pv #pv-bar .pv-nav-end > .pv-you{display:none}
body.pv #pv-bar .pv-nav-end{margin-top:auto}
body.pv:has(> .pv-banner) #pv-bar .pv-nav-in{height:calc(100vh - 34px)}   /* a demonstration's or a preview's band (34 over the hall, one line from 1024) would push the foot out of sight at the page's top */
body.pv #pv-bar .pv-me-b{display:flex; flex-direction:row; align-items:center; gap:var(--sp-3); box-sizing:border-box; width:100%; min-height:36px; margin:0;
  padding:var(--sp-2) var(--sp-3); border:0; border-radius:var(--r-sm); background:none; color:var(--bar-ink); font:500 var(--fs-base)/20px var(--ui); text-align:left;
  cursor:pointer; transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out)}
body.pv #pv-bar .pv-me-b > .pv-l{position:static; width:auto; height:auto; min-width:0; margin:0; padding:0; overflow:hidden; clip-path:none; text-overflow:ellipsis; white-space:nowrap}
body.pv #pv-bar .pv-me-b > svg{flex:none; width:16px; height:16px; margin-left:auto; color:var(--bar-ink-2)}
body.pv #pv-bar .pv-me-b .pv-me-you{display:none}
body.pv #pv-bar .pv-me-b:hover{background:var(--bar-hover); color:var(--bar-ink)}
body.pv #pv-bar .pv-me-b.is-cur, body.pv #pv-bar .pv-me-b.is-cur:hover{background:var(--bar-cur); color:var(--bar-cur-ink)}
body.pv.pv-rail #pv-bar .pv-me-b{flex-direction:column; justify-content:center; gap:var(--sp-1); min-height:46px; padding:6px 0; border-radius:var(--r-md);
  font:500 var(--fs-xs)/16px var(--ui); text-align:center}
body.pv.pv-rail #pv-bar .pv-me-b > .pv-l{max-width:100%; font:500 var(--fs-xs)/16px var(--ui)}
body.pv.pv-rail #pv-bar .pv-me-b > svg, body.pv.pv-rail #pv-bar .pv-me-b .pv-me-n{display:none}
body.pv.pv-rail #pv-bar .pv-me-b .pv-me-you{display:inline}
body.pv #pv-bar .pv-me-menu{display:none; position:fixed; z-index:60; left:var(--me-x, 12px); bottom:var(--me-y, 64px); box-sizing:border-box; min-width:216px; margin:0;
  padding:var(--sp-1); list-style:none; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--pop)}
body.pv #pv-bar .pv-me[data-open] > .pv-me-menu{display:block; animation:pvd-pop var(--dur-fast) var(--ease-out) both}
/* (his find of 2 Nov 2026, the folded rail at 1024: "I think it should be in front, no?") the open You menu in front of the page: it lives
   in the rail's sticky .pv-nav-in, whose layer stood level with the page's, and a card with a transform (Buzz and calendar's Your calendar)
   painted over it. While it is open the rail stands at 20: over the page, under the lights (21) and the demo's band (22). Closed, as it was. */
body.pv .pv-nav-in:has(.pv-me[data-open]){z-index:20}
body.pv #pv-bar .pv-me-menu a{display:flex; align-items:center; gap:var(--sp-3); box-sizing:border-box; min-height:40px; padding:var(--sp-2) var(--sp-3); border-radius:var(--r-sm);
  color:var(--ink); font:500 var(--fs-base)/20px var(--ui); text-decoration:none}
body.pv #pv-bar .pv-me-menu a > svg{flex:none; width:20px; height:20px; color:var(--ink-2)}
body.pv #pv-bar .pv-me-menu a:hover, body.pv #pv-bar .pv-me-menu a:focus-visible, body.pv #pv-bar .pv-me-menu a[aria-current="page"]{background:var(--hover)}

/* ---- (wow 9, 31 Oct 2026) A count said once (docs/wow-2026-10-31/home-build.md, item 9; the brand guideline §8, "Figures"). A
   room's head says a figure once: its sentence, then at most one small line for what the sentence does not say (kit.js figLine:
   the figure line's parts the sentence, or Money's card, already says are dropped), 14 in --ink-2, a count that is a door in the
   house's wine (a.pv-count). It stands where the figure line stood, 12 under the deck. Nothing grows. */
:root body.pv #pv-page .pv-head .pv-head-small{margin:var(--sp-3) 0 0; font:400 var(--fs-base)/20px var(--ui); color:var(--ink-2); font-variant-numeric:tabular-nums}
:root body.pv #pv-page .pv-head .pv-head-small .pv-pl-late{color:var(--warn)}

/* ---- (wow 9b, 31 Oct 2026) The head's figures as one line of digits (docs/wow-2026-10-31/home-build.md, item 9, take two; his word,
   "shouldn't we show it the numbers way, like 8 out of 11 left, rather than writing it in a sentence?"). In the deck's place and at its
   size (16, --ink-2): each figure its digit at 600 in --ink, its words after it; a late one in --warn, an over amount's digit in
   --warn, a door a wine link (kit.js figsLine); joined by the house's dot, wrapping only at a dot; under 1024 each figure on its own
   line, the dots not drawn (rule 23); since wow 9c two a line, on his word. Nothing grows. */
:root body.pv #pv-page .pv-head .pv-head-sub > .pv-figs{font-variant-numeric:tabular-nums}
:root body.pv #pv-page .pv-head .pv-figs .pv-fig{white-space:nowrap}
:root body.pv #pv-page .pv-head .pv-figs .pv-fig b{font-weight:600; color:var(--ink)}
:root body.pv #pv-page .pv-head .pv-figs .pv-fig.is-late, :root body.pv #pv-page .pv-head .pv-figs .pv-fig.is-late b, :root body.pv #pv-page .pv-head .pv-figs b.pv-pl-over{color:var(--warn)}
:root body.pv #pv-page .pv-head .pv-figs a.pv-count{font:inherit; color:var(--wine)}
:root body.pv #pv-page .pv-head .pv-figs a.pv-count b{color:inherit}
@media (max-width:1023px){
  /* (wow 9c, his word: "on the mobile version can we put it on two lines instead of four?") two figures a line: the dot after every second
     figure becomes the line's end (a block of no height), the pair keeps its dot and may wrap only there */
  :root body.pv #pv-page .pv-head .pv-figs > .pv-fig:nth-child(2n of .pv-fig) + .pv-dot{display:block; height:0; margin:0; overflow:hidden}
}

/* ---- (wow 12, 31 Oct 2026) Reach: 44 to press, gold words that read, and the focus rings checked (docs/wow-2026-10-31/home-build.md,
   item 12). His rule 17, never grow a container he approved: nothing drawn changes size; the reach is an invisible layer of the
   control itself (a pseudo-element with nothing in it), so a press there is the control's. A. On a phone, and wherever the pointer
   is coarse: a control under 44 reaches 44 tall (its own width for words, 44 wide where it is narrower), centred on it, by
   top/bottom = min(0, (100% - 44px) / 2): a 36 button 4 above and below, a 28 link 8, a 20 back link 12; the house's buttons keep
   their own ::after and only its height is set so; the controls that had none get one. The fold handle's 28 circle reaches 44
   everywhere. The dense ones (a post's names, dates and tags, a To do row's tags and days, a count in a line of figures) keep their
   reach: theirs would take the press of the word next to them (the packet lists them). */
body.pv #pv-bar .pv-bar-t::after{content:""; position:absolute; inset:-8px}
/* B. Gold that reads: the brand guideline's two named inks (§ The colour), here where Paper uses them: gold words in --gold-ink (#7A5B1C,
   on white 6.4:1), the "·" separators in --ink-4 (#978D84, a separator's ink, never words). The marks stay gold: the monogram, the
   "&", the lotus, the lights, the sparkle, the bars, ticks and badges. The two inks are tokens (public/tokens.css, :root). */
.pv.pv-paper .pv-dateline .pv-dot{color:var(--ink-4)}
.pv.pv-paper :is(.pvn-thread, .pv-dish-k, .pvx-ra .pv-dish-k){color:var(--gold-ink)}
@media (max-width:1023px), (pointer:coarse){
  :root .pv #pv-page :is(.pv-btn, .pv-act, .pv-icon-btn, .pv-react-more)::after{top:min(0px, calc((100% - 44px) / 2)); bottom:min(0px, calc((100% - 44px) / 2))}
  :root .pv :is(#pv-page :is(a.pv-back, a.pv-more-link, a.pv-togo, a.pvd-when-dir, a.pvh-here, a.pv-todo-tx, button.pv-way, .pv-tabs > a, .pv-segrow > a), .pv-top a.pv-top-id){position:relative}
  :root .pv :is(#pv-page :is(a.pv-back, a.pv-more-link, a.pv-togo, a.pvd-when-dir, a.pvh-here, a.pv-todo-tx, button.pv-way, .pv-tabs > a, .pv-segrow > a), .pv-top a.pv-top-id)::after{content:""; position:absolute;
    top:min(0px, calc((100% - 44px) / 2)); bottom:min(0px, calc((100% - 44px) / 2)); left:min(0px, calc((100% - 44px) / 2)); right:min(0px, calc((100% - 44px) / 2))}
  /* (the design review, item 3, 1 Nov 2026) the dense ones keep out of the 44 (above), but none stays under WCAG 2.2's 24: a post's
     name and meta link, a count, a To do row's title, tags and day, a small line's link reach 24 tall by the same kind of layer, top
     and bottom only; :where keeps it under the 44 rules wherever both apply. Narrowed the same day: a row's title, a count and a
     reply's name left out, their layers took the edge of the word beside them; the rest take nothing (19 edges, as before). */
  :root .pv #pv-page :where(.pv-meta > a, a.pv-sum-c, a.pvp-tag, a.pvp-day, .pv-post-l1 > a.pv-name, .pv-small > a:not(.pv-btn, .pv-count)){position:relative}
  :root .pv #pv-page :where(.pv-meta > a, a.pv-sum-c, a.pvp-tag, a.pvp-day, .pv-post-l1 > a.pv-name, .pv-small > a:not(.pv-btn, .pv-count))::after{content:""; position:absolute;
    left:0; right:0; top:min(0px, calc((100% - 24px) / 2)); bottom:min(0px, calc((100% - 24px) / 2))}
}

/* (part M, his finds of 6 Nov 2026 on Settings › People) every in-page search or ask field is a pill (his rule of 21 Oct: "every
   search/ask field a pill with a microphone") the house's field height, --field-h (44), as every form field: Find someone was 54, the
   Search page's bar 46, Guests' 37, the log's 34; the pill 1 + 4 + 34 + 4 + 1, the microphone inside it */
:root body.pv #pv-page :is(.pv-search, .pv-housebar-row){min-height:var(--field-h); box-sizing:border-box; padding-block:4px}
:root body.pv #pv-page :is(.pv-search, .pv-housebar-row) :is(input[type=search], input[type=text], input:not([type])){min-height:calc(var(--field-h) - 10px); height:calc(var(--field-h) - 10px); padding-block:0}
:root body.pv #pv-page .pvx-sets .pv-search :is(input[type=search]){min-height:calc(var(--field-h) - 10px)}
:root body.pv #pv-page :is(.pv-search, .pv-housebar-row) .pv-voice{width:30px; height:30px; margin-block:-2px}
/* (part M, his question: "Is there a rule?") yes: search and ask fields are pills; every form field is --r-sm (16, DESIGN.md) and
   --field-h tall (--r-field, 16: the doors' own --r-sm is 6). The doors had kept their own 11 and 54 (the polish pass kept them as
   they were): now in the house's rule too, a name's search a pill, the code a field; their buttons keep the doors' 11 */
.pv-doorwrap.is-paper .pv-door .pv-iconfield > input{min-height:var(--field-h); padding-block:8px; border-radius:var(--r-field)}
.pv-doorwrap.is-paper .pv-door .pv-iconfield > input[type=search]{border-radius:var(--r-full)}
.pv-doorwrap.is-paper .pv-door .pv-iconfield > svg{top:22px}
.pv-doorwrap.is-paper .pv-door .pv-pindots{top:22px}
.pv-k-door .pv-door :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=file], [type=range], [type=search]), select, textarea){border-radius:var(--r-field)}
.pv-k-door .pv-door input[type=search]{border-radius:var(--r-full)}
/* (part N, his question of 6 Nov 2026 on Who sees what: "I don't get it. Why is this happening?") each table sized its own first
   column from its names (at least 140): a side's "Close extended family" widened it and squeezed the rooms, so "From the two of us" and
   "Our story" wrapped there and not in the planner's table, where a short name left them room. Now the first column is 140 in every
   table (a long circle name wraps in it), so tables of the same rooms lay their rooms out alike: every circle and every room at the same
   place, a room's name wrapping the same way in each; narrower than that, a table scrolls sideways under its sticky names, as before */
:root body.pv #pv-page .pv-matrix tr > :first-child{width:140px; min-width:140px; max-width:140px; box-sizing:border-box}
:root body.pv #pv-page .pv-matrix tbody th{white-space:normal; overflow-wrap:break-word}
/* (v232, dark mode, 6 Nov 2026; docs/dark-mode-2026-11-06/v232.md) THE DARK LOOK'S OWN RULES.
   His word of 6 Nov: "one color for light, one color for dark"; his pick, the study's A, tinted headers (part Q, sheets 25a to 25c).
   The page wears :root.pv-dark (lib/themes.js: Dark, or Automatic on a phone set dark); its palette is tokens.css's Dark block,
   so almost everything is drawn by the same rules as Light. Here only what a token cannot say: every band and card head its hue's
   dark tint a step above the card, with its icon and title in the hue's light step (Radix's steps 3 to 4 and 11; an amber for the
   gold band, never an olive); the wings', the days' and the faces' colours toned for dark (their values in art.css); an unticked box's ring at 3:1; the
   paintings as prints on their own paper; no lift under a card. Each rule carries :root.pv-dark, so Light is drawn as it was. */
:root.pv-dark :is(.pv-compose, [data-tone="rose"], [data-tone="peach"], [data-tone="marigold"], [data-tone="leaf"], [data-tone="teal"], [data-tone="slate"], [data-tone="plum"], [data-tone="red"], [data-tone="wine"], [data-tone="gold"], .avatar[data-tone], .day .cap > .dtile, .thread .dot, .datebox em, .meeting.on .datebox, .meeting.on .datebox em, .pv .pv-home.pvn .pvh-tile, .pv .pv-dtile, .pv span.avatar[data-tone], .pv span.avatar[data-tone="teal"], .pv span.avatar[data-tone="marigold"], .pv span.avatar[data-tone="rose"], .pv span.avatar[data-tone="slate"], .pv span.avatar[data-tone="leaf"], .pv span.avatar[data-tone="peach"], .pv span.avatar[data-tone="plum"], .pv span.avatar[data-tone="red"], .pv span.avatar[data-tone="sky"], .pv span.avatar[data-tone="terracotta"], .pv span.avatar[data-tone="marigold"],.pv span.avatar[data-tone="peach"]){--c-rose:var(--d-rose);--c-rose-ink:var(--d-rose-ink);--c-peach:var(--d-peach);--c-peach-ink:var(--d-peach-ink);--c-marigold:var(--d-marigold);--c-marigold-ink:var(--d-marigold-ink);--c-leaf:var(--d-leaf);--c-leaf-ink:var(--d-leaf-ink);--c-teal:var(--d-teal);--c-teal-ink:var(--d-teal-ink);--c-slate:var(--d-slate);--c-slate-ink:var(--d-slate-ink);--c-plum:var(--d-plum);--c-plum-ink:var(--d-plum-ink);--c-red:var(--d-red);--c-red-ink:var(--d-red-ink);--c-wine:var(--d-wine);--c-wine-ink:var(--d-wine-ink);--c-gold:var(--d-gold);--c-gold-ink:var(--d-gold-ink);--c-sky:var(--d-sky);--c-sky-ink:var(--d-sky-ink);--c-terracotta:var(--d-terracotta);--c-terracotta-ink:var(--d-terracotta-ink)}
/* each band's and card head's hue (its --h, one of the five wings', written on it: views/preview/kit.js setHues and panel) with its two dark
   steps beside it, read from its own style, so the page's markup is Light's */
:root.pv-dark .pv [style*="--h:var(--w-home-hue)"]{--h-band:var(--w-home-tint); --h-on:var(--w-home-ink)}
:root.pv-dark .pv [style*="--h:var(--w-cel-hue)"]{--h-band:var(--w-cel-tint); --h-on:var(--w-cel-ink)}
:root.pv-dark .pv [style*="--h:var(--w-fam-hue)"]{--h-band:var(--w-fam-tint); --h-on:var(--w-fam-ink)}
:root.pv-dark .pv [style*="--h:var(--w-plan-hue)"]{--h-band:var(--w-plan-tint); --h-on:var(--w-plan-ink)}
:root.pv-dark .pv [style*="--h:var(--w-mem-hue)"]{--h-band:var(--w-mem-tint); --h-on:var(--w-mem-ink)}
/* a celebration's own tone (the dress's --e on its [data-event]): its words in the tone's light step, its dot and its title's full stop a
   step lighter, each mixed from the day's own tone with the Dark look's words (in sRGB, which the gate reads), so no day needs a value of
   its own */
:root.pv-dark .pv [data-event]{--e-ink:color-mix(in srgb, var(--e) 40%, var(--ink))}
:root.pv-dark .pv .pv-tone{background:color-mix(in srgb, var(--e, var(--gold)) 70%, var(--ink))}
:root.pv-dark .pv .pv-wing-km > i{background:color-mix(in srgb, var(--e, var(--ink-3)) 70%, var(--ink))}
:root.pv-dark body.pv #pv-page .pv-head[data-event]{--w-stop:color-mix(in srgb, var(--e) 70%, var(--ink))}
/* the bands (Settings' parts, Who sees what's sides) and the cards' tinted heads: the hue's dark tint, its title and icon in the light step;
   the corners as Light's: the head's own, one pixel inside the card's */
:root.pv-dark body.pv.pv-paper #pv-page .pvx-set > summary.pvx-set-hue, :root.pv-dark body.pv.pv-paper #pv-page .pv-card.pv-panel > .pv-panel-top.pvx-head-hue{background:var(--h-band, var(--panel)); color:var(--h-on, var(--ink))}
:root.pv-dark body.pv.pv-paper #pv-page .pvx-set > summary.pvx-set-hue > svg:first-child, :root.pv-dark body.pv.pv-paper #pv-page .pvx-set > summary.pvx-set-hue .pvx-set-is, :root.pv-dark body.pv.pv-paper #pv-page .pv-panel-top.pvx-head-hue :is(svg, .pv-panel-h, .pv-panel-h em){color:var(--h-on, var(--ink))}
/* an unticked box and a radio: their ring 3:1 and more on every surface (--tick-edge; the study's --line-2 was 1.4:1) */
:root.pv-dark .pv input[type=checkbox]:not(:checked):not(:is(.pv-dayt, .pv-facename, .pv-tick, .pv-optick, .pvx-theme) input), :root.pv-dark .pv .pv-optick:not(.is-on) > input:not(:checked) + i, :root.pv-dark .pv .pv-optick.is-still:not(.is-on) > i{border-color:var(--tick-edge)}
/* a chosen chip's count: the chip's own light wine, whole (Light's .8 of it read 4.35:1 on the dark tint) */
:root.pv-dark .pv .pv-chips a[aria-current="true"] .pv-chips-n{opacity:1}
/* a select's arrow in the light grey (its Light one is drawn in #71675F) */
:root.pv-dark .pv select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='%23ABA096' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E")}
/* the paintings in the house: prints on their own paper, as the study drew them (never multiplied into a dark page, which would turn
   their paper black). The doors never wear the Dark look: their painting, paper and words are Light's (views/preview/kit.js doorShell) */
:root.pv-dark body.pv img.art{mix-blend-mode:normal; filter:brightness(.94)}
/* a card lies on the page by its own step of light, without a lift */
:root.pv-dark body.pv :is(.pv-card, .pvx-sets .pvx-set){box-shadow:none}
/* ---- the Planning tidy (10 Nov 2026), just before the button kit (the kit and the links sheet draw by class alone; these rules carry #pv-page) ---- */
/* (the Planning tidy, 10 Nov 2026) His word, opening Planning on his house: the highlight not uniform (only the words go wine on some
   cards, a fill on others that stops short of the card's edges), the space under a card's head too much at some places, the rail
   cards' words on the card's edge, Money's groups with no head row, a vendor's and a household's page a stack of headings and rules.
   The one fact under all of it: Planning's cards were drawn five ways (.pv-panel, .pv-plancard, .pv-listcard, .pvp-group, a page's
   .pv-sect), with heads 36 to 48 tall, 8 to 99 between a head and its first words, rows 0 to 24 in, and one rule (surfaces, "the
   colours round's fixes") took the fill off .pv-panel's rows. From here, on every page of the Planning wing, one card for a list:
   1. its head 48 tall (44 in the side column), the title in its middle, strip A in the room's tint;
   2. its rows straight under the head, each the card's whole width, the words on the card's text edge (--card-in), one hairline
      between rows from edge to edge;
   3. under the pointer the whole row on --hover and its title in --wine, the same on every card;
   4. a section of a vendor's, a household's or a to-do's page is such a card (it was a heading with a rule under it).
   The Planning wing is the page whose hall marks Planning as the current room. */
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page:has(> .pv-head .pv-back:not(.pv-wingback)){--room-tint:var(--w-plan-tint); --room-ink:var(--w-plan-ink)}

/* 1. heads: one height, the title in the middle */
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page :is(.pv-card.pv-panel, .pv-card.pv-plancard) > .pv-panel-top,
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card.pvp-group > .pvp-group-h,
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card.pv-listcard > :is(.pv-vhead, .pv-moneygroup-h),
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card.pvq-attn > .pvq-attn-top{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); box-sizing:border-box; height:auto; min-height:48px;
  padding-block:var(--sp-1); padding-inline:var(--card-in); border-bottom:0}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page :is(.pv-col-side, .pv-sidecol) .pv-card > .pv-panel-top{height:auto; min-height:44px}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card > :is(.pv-panel-top, .pvp-group-h, .pv-vhead, .pv-moneygroup-h, .pvq-attn-top) :is(h2, h3, .pv-panel-h){margin:0; padding:0; border:0}
/* Money's every line: each kind of spending a card with its head row (it had none), its name at the left, "paid · of" together at the right */
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card.pv-listcard > .pv-moneygroup-h{margin:0; background-color:var(--room-tint, var(--hover));
  border-radius:calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0; column-gap:.35em; font:600 var(--fs-md)/var(--lh-heading) var(--ui)}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card.pv-listcard > .pv-moneygroup-h > span:first-child{margin-right:auto; color:var(--room-ink, var(--ink))}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card.pv-listcard > .pv-moneygroup-h > :is(.pv-small, .pv-amt){font-size:var(--fs-sm); font-weight:500; color:var(--ink-2); white-space:nowrap; font-variant-numeric:tabular-nums}

/* 2. the cards' insets: a padded card keeps --card-in (the rail's 16), its head pulled to its edges; a list card has none, its head at its top */
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page :is(.pv-card.pv-panel, .pv-card.pv-plancard){padding:var(--card-in)}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page :is(.pv-card.pv-panel, .pv-card.pv-plancard) > .pv-panel-top{margin:calc(-1 * var(--card-in)) calc(-1 * var(--card-in)) var(--sp-4)}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page :is(.pv-card.pv-panel, .pv-card.pv-plancard) > .pv-panel-top:has(+ :is(.pv-rows, .pvm-looks, .pvm-group)){margin-bottom:0}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page :is(.pv-card.pv-panel, .pv-card.pv-plancard) > :is(.pv-rows, .pvm-looks){margin-top:0; margin-bottom:0}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page :is(.pv-card.pv-panel, .pv-card.pv-plancard):has(> :is(.pv-rows, .pvm-looks):last-child){padding-bottom:var(--sp-2)}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card:is(.pv-listcard, .pvp-group){padding-top:0; padding-bottom:var(--sp-2)}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card:is(.pv-listcard, .pvp-group) > :is(.pv-vhead, .pv-moneygroup-h, .pvp-group-h, .pvq-attn-top){margin-top:0; margin-bottom:0}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card:is(.pv-listcard, .pvp-group) > :is(.pv-rows, .pv-vlist, .pvp-rows){margin-top:0; padding-top:0}

/* 3. rows: the card's whole width, the words on its text edge, one hairline between rows from edge to edge */
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page :is(.pv-card.pv-panel, .pv-card.pv-plancard) :is(.pv-rows, .pvm-looks) > li{margin-inline:calc(-1 * var(--card-in)); padding-inline:var(--card-in)}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card:is(.pv-listcard, .pvp-group) :is(.pv-rows > .pv-row, .pvp-rows > .pvp-row){padding-inline:var(--card-in)}

/* 4. under the pointer: one rule (round 2, 10 Nov 2026, his "highlighting is also not uniform. At some places it's red, some places it's
   black": Needs a look's titles stayed black on a filled row, as the rows whose title is not one of four named classes did). Every row
   of a Planning card, and of a section card of 6, that holds a link fills the card's whole width and its title turns wine, whatever
   element the title is; a row with no link fills nothing and turns nothing wine (one block; a tap on a phone leaves nothing behind) */
@media (hover:hover){
  :root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card :is(.pv-rows > li, .pvm-looks > li, .pv-vlist > li, .pvp-rows > .pvp-row, .pv-hhs > li):has(a[href]):hover,
  :root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page:has(> .pv-head .pv-back:not(.pv-wingback)) .pv-sect .pv-rows > li:has(a[href]):hover{background:var(--hover)}
  :root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card :is(.pv-rows > li, .pvm-looks > li, .pv-vlist > li, .pvp-rows > .pvp-row, .pv-hhs > li):has(a[href]):hover :is(.pv-vrow, .pv-vrow-main, .pv-hh, a.pv-row-main, .pvm-look-hit, .pvp-tx){background:none}   /* one --hover (a 5 % ink) on the row alone: his find of 10 Nov, the register's row darker, its link filling over its row */
  :root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card :is(.pv-rows > li, .pvm-looks > li, .pv-vlist > li, .pvp-rows > .pvp-row, .pv-hhs > li):has(a[href]):hover :is(.pv-row-t, .pv-vrow-main > b, .pvl-name-tx > b, .pvp-t, .pvm-look-t, .pvm-look-t > a, .pv-hh-name),
  :root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page:has(> .pv-head .pv-back:not(.pv-wingback)) .pv-sect .pv-rows > li:has(a[href]):hover :is(.pv-row-t, .pv-vrow-main > b, .pvl-name-tx > b, .pvp-t, .pvm-look-t, .pvm-look-t > a, .pv-hh-name){color:var(--wine)}
}

/* 5. Money's To pay and Before it is counted (round 2, 10 Nov 2026, his "I don't even know if those are different sections. Maybe they
   need other table"): round 1's header rows inside one card still read as rows. To pay is now a heading over a group of cards, on the
   content edge with no line under it (DESIGN.md §6, as Guests' sides: 16 at 600, 12 to its first card, the cards 16 apart); Due on a
   date, Owed with no date yet and Expected are each a card, its head row on strip A with the group's sum at the right; Before it is
   counted is its own card after Needs a look. A group's note is its card's first line in one style: 13, --ink-2, on the text edge */
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pvm-paygroup{display:flex; flex-direction:column; gap:var(--card-gap, 16px); margin-bottom:calc(2 * var(--card-gap, 16px))}   /* 32 to the next card: it was the card before Needs a look, whose 16 came from .pv-card + .pv-card */
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pvm-paygroup > .pvm-payhead{margin:0 0 calc(var(--sp-3) - var(--card-gap, 16px)); padding:0; border:0; font:600 var(--fs-md)/24px var(--ui); letter-spacing:-.01em; color:var(--ink)}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card.pvm-groupcard > .pv-panel-top{background-color:var(--room-tint, var(--hover)); border-radius:calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card.pvm-groupcard > .pv-panel-top > .pvm-group-h{display:flex; flex:1 1 auto; flex-wrap:wrap; align-items:baseline; justify-content:space-between; column-gap:var(--sp-4); row-gap:0;
  font:600 var(--fs-md)/var(--lh-heading) var(--ui); color:var(--room-ink, var(--ink))}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card.pvm-groupcard > .pv-panel-top > .pvm-group-h > .pvm-sum{font:inherit; color:var(--ink-2); white-space:nowrap; font-variant-numeric:tabular-nums}   /* the sum is in the card's title, so at its 16 and 600 (R13's card titles; the gate's rule h) */
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card.pvm-groupcard > .pv-panel-top > .pvm-group-h:not(:has(> .pvm-sum)){justify-content:flex-start; column-gap:var(--sp-2)}   /* a count sits by its title, as Needs a look's does */
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card.pv-panel > :is(.pvm-group-note, .pvm-none){box-sizing:border-box; max-width:none; margin:0; padding:var(--sp-4) 0 var(--sp-3); border:0; background:none;
  font:400 var(--fs-sm)/var(--lh-body) var(--ui); color:var(--ink-2); text-align:start; text-indent:0}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card.pv-panel > :is(.pvm-group-note, .pvm-none):last-child{padding-bottom:0}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card.pv-panel > .pv-panel-top:has(+ :is(.pvm-group-note, .pvm-none)){margin-bottom:0}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card.pv-panel > :is(.pvm-group-note, .pvm-none) + :is(.pv-rows, .pvm-looks){margin-top:0}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card.pv-panel > :is(.pvm-group-note, .pvm-none) + :is(.pv-rows, .pvm-looks) > li:first-child{border-top:1px solid var(--line)}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card.pvm-lookcard > .pvm-group{margin:0; border-top:0; padding-top:0}

/* 6. a vendor's, a household's and a to-do's page (a page with a back to its room, not to the wing): each section a card, its heading the
   card's head on strip A, its rows the card's whole width; the rail's 16 in */
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page:has(> .pv-head .pv-back:not(.pv-wingback)) .pv-sect:not(.pv-card *):not(:has(.pv-card)){box-sizing:border-box;
  margin:0 0 var(--card-gap, 20px); padding:0 var(--card-in) var(--card-in); border:1px solid var(--line); border-radius:var(--r-md); background-color:var(--surface); box-shadow:var(--shadow-1)}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page:has(> .pv-head .pv-back:not(.pv-wingback)) .pv-sect:not(.pv-card *):not(:has(.pv-card)) > .pv-panel-top{display:flex; align-items:center;
  justify-content:space-between; gap:var(--sp-4); box-sizing:border-box; height:auto; min-height:48px; margin:0 calc(-1 * var(--card-in)) var(--sp-4); padding:var(--sp-1) var(--card-in);
  background-color:var(--room-tint); border:0; border-radius:calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page:has(> .pv-head .pv-back:not(.pv-wingback)) :is(.pv-col-side, .pv-sidecol) .pv-sect:not(.pv-card *):not(:has(.pv-card)) > .pv-panel-top{height:auto; min-height:44px}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page:has(> .pv-head .pv-back:not(.pv-wingback)) .pv-sect:not(.pv-card *):not(:has(.pv-card)) > .pv-panel-top :is(h2, h3, .pv-panel-h){margin:0; padding:0; border:0; color:var(--room-ink, var(--ink))}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page:has(> .pv-head .pv-back:not(.pv-wingback)) .pv-sect:not(.pv-card *):not(:has(.pv-card)) > .pv-panel-top:has(+ .pv-rows){margin-bottom:0}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page:has(> .pv-head .pv-back:not(.pv-wingback)) .pv-sect:not(.pv-card *):not(:has(.pv-card)):has(> .pv-rows:last-child){padding-bottom:var(--sp-2)}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page:has(> .pv-head .pv-back:not(.pv-wingback)) .pv-sect:not(.pv-card *):not(:has(.pv-card)) .pv-rows > .pv-row{margin-inline:calc(-1 * var(--card-in)); padding-inline:var(--card-in)}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page:has(> .pv-head .pv-back:not(.pv-wingback)) .pv-sect:not(.pv-card *):not(:has(.pv-card)) .pv-rows > .pv-row + .pv-row{border-top:1px solid var(--line)}
/* a vendor's Money with them: a line, its amount under it, and Tie it at the row's right, on one row (the button sat under each line) */
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-rows > .pv-row.pvx-tie{display:flex; align-items:center; gap:var(--sp-4); padding-block:var(--sp-3)}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-rows > .pv-row.pvx-tie > .pv-row-tx{flex:1 1 auto; min-width:0}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-rows > .pv-row.pvx-tie > form{flex:none; margin:0}

/* 7. a post with no words of its own (a to-do's "Ira asked Meera"): its acts straight under its head, no empty band and no second line */
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-post.is-bare > .pv-post-head{margin-bottom:0}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-post.is-bare > .pv-acts{border-top:0}

/* 9. column-head rows (round 2, 10 Nov 2026, his "why doesn't the family table? That particular row is not colored like everything else"):
   the Guests register's head row (Family · 44, Who they are, Invited to, Invited, Reply) was white, and so were the head rows of the
   tables in Planning's cards (Guests' Headcounts, Vendors' Compare). Each sits on strip A in the room's tint, 48 tall, its words as
   the list cards' head rows have them (.pv-vhead: 14 at 500 in --ink-2), its columns where they were */
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card > .pv-hhs-head{min-height:48px; box-sizing:border-box; align-items:center; margin:0; padding-block:var(--sp-1);
  background-color:var(--room-tint, var(--hover)); border-bottom:0}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card > .pv-hhs-head:first-child{border-radius:calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card > .pv-hhs-head > :is(h3, h4){margin:0}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card table > thead > tr > th{box-sizing:border-box; height:48px; padding-block:0; vertical-align:middle; background-color:var(--room-tint, var(--hover)); border-bottom:0}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card > .pv-tablewrap:first-child > table > thead > tr > th:first-child{border-top-left-radius:calc(var(--r-md) - 1px)}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card > .pv-tablewrap:first-child > table > thead > tr > th:last-child{border-top-right-radius:calc(var(--r-md) - 1px)}
/* every column-head row's words the same (round 2, 10 Nov 2026, his "why does the font sizes, the font weight, and the colors of the header
   row in these three tables look different?"): every label, the first one too, 14 at 500 (a label, his rule 13) in the room's ink, the
   card heads' colour, centred on the 48 band; the first on the card's text edge; a number column keeps its alignment */
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card > .pv-hhs-head, :root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card > .pv-hhs-head :is(h3, h4, span, a, b, em),
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card table > thead > tr > th, :root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card table > thead > tr > th :is(span, a, b, em){font-size:var(--fs-base); font-weight:500; line-height:20px;
  font-style:normal; letter-spacing:normal; text-transform:none; color:var(--room-ink, var(--w-plan-ink))}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card.pv-listcard > .pv-tablewrap > table :is(th, td):first-child{padding-left:var(--card-in)}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card.pv-listcard > .pv-tablewrap > table :is(th, td):last-child{padding-right:var(--card-in)}
/* words between a card's head and its table or rows (round 2, 10 Nov 2026, his "a spacing issue between the next colored row and the header
   row with the text"): Between the families' first words sat 30 under the head (the settle block's own 12 and 4 on top of the head's
   16) and its last words 12 over the table's band. Both are the card's 16 now: the head's 16 alone above, 16 above the band. The same
   for Travel's "Help getting around", whose first group name sat 34 under its head */
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card > .pv-panel-top + .pvm-in{padding-top:0}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card > .pvm-settle > :first-child{margin-top:0}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card .pvm-settle > .pvm-tblwrap{margin-top:var(--sp-4)}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card > .pv-panel-top + .pvg-sub{padding-top:0}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card.pv-panel > .pvg-sub{padding-inline:0}   /* its group name on the text edge, over its rows (it stood 16 further in) */
/* Money's two families' table (Every line's "The two families"): its head row edge to edge too, its words on the text edge */
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card .pvm-tblwrap:has(> table > thead){width:auto; max-width:none; margin-inline:calc(-1 * var(--card-in))}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card .pvm-tblwrap > table :is(th, td):first-child{padding-left:var(--card-in)}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card .pvm-tblwrap > table :is(th, td):last-child{padding-right:var(--card-in)}
/* a table in a padded card (Vendors' Compare): its head row runs edge to edge of the card, as every other head, its words on the text
   edge; at its top, flush with the card's corners, unless the phone's "scrolls sideways" cue stands over it */
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card.pv-pad > .pv-tablewrap:has(> table > thead){width:auto; max-width:none; margin-inline:calc(-1 * var(--card-in))}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card.pv-pad > .pv-tablewrap:first-child:has(> table > thead),
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card.pv-pad:not(.is-scrolls) > .pv-scrollcue:first-child + .pv-tablewrap:has(> table > thead){margin-top:calc(-1 * var(--card-in))}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card.pv-pad > .pv-tablewrap > table:has(> thead) :is(th, td):first-child{padding-left:var(--card-in)}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card.pv-pad > .pv-tablewrap > table:has(> thead) :is(th, td):last-child{padding-right:var(--card-in)}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card.pv-pad:not(.is-scrolls) > :is(.pv-tablewrap:first-child, .pv-scrollcue:first-child + .pv-tablewrap) > table > thead > tr > th:first-child{border-top-left-radius:calc(var(--r-md) - 1px)}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page .pv-card.pv-pad:not(.is-scrolls) > :is(.pv-tablewrap:first-child, .pv-scrollcue:first-child + .pv-tablewrap) > table > thead > tr > th:last-child{border-top-right-radius:calc(var(--r-md) - 1px)}

/* 8. one row type, the house's own (round 2, 10 Nov 2026; his answer on the sizes: "whatever standard across the app, use that"). Measured
   on live v234: 111 of 186 rows' titles were 14 at 500 (the house row, .pv-row-t, main column and rail alike) and 75 were 16 at 600 (R13's
   list rows), their lines 13 or 14. The house's standard, as DESIGN.md writes it and the gate's rule h reads it (tools/audit.js):
   - a list row (R13: To do, Guests, Vendors, Lists, Needs a look, Before it is counted): its name 16 at 600, its line 13 in --ink-3, as
     the house draws them already (nothing set here, so a done row keeps its quiet 400);
   - the house row (.pv-row: Money's lines and payments, Documents, the overview's and a vendor's or household's sections, every rail
     card): its title 14 at 600 and its line 13 in --ink-3, as DESIGN.md 6 writes a rail card's and a day's rows (rule h reads it as
     words, at most 14, so not R13's 16); a single-line row stays 14 (R13);
   - a card's head stays 16 at 600 */
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page :is(.pv-card, .pv-sect) .pv-row:not(.is-done) .pv-row-t{font-size:var(--fs-base); font-weight:600}
:root body.pv:has(a[aria-current="page"][href$="/planning"]) #pv-page :is(.pv-card, .pv-sect) :is(.pv-row-m, .pv-vrow-main > em, .pvl-name-tx > em, .pvp-rest, .pvm-look-m, .pv-hh-meta){font-size:var(--fs-sm); color:var(--ink-3)}

/* The button kit (the buttons round, part A, 31 Oct 2026; DESIGN.md §7, the kit): five kinds and two sizes, drawn here by class
   alone and nowhere else: the last block before the links sheet (which holds only its own rules, v209 A9; the sheets
   stay v215's 27). The layers above keep layout, states, themes and the variants tools/kit-rules.mjs names with their
   reasons; test/kit.test.mjs fails a page rule that draws a kit class again, and the gate's rule o a control that is none of
   these looks. 36 tall in heads, forms and dialogs; 32 compact (.pv-sm) inside cards, rows and toolbars; 44 to press on a phone
   by the hit areas. :is(a, button, summary, label) lets a link-button's words win over a card's link colour, and leaves the
   states (:hover, [aria-pressed]) above it. Buttons are form controls: they take the house's type by font-family:var(--ui). */
:is(a, button, summary, label).pv-btn{gap:8px; min-height:36px; padding:0 16px; border:1px solid transparent; border-radius:var(--r-ctl); font-family:var(--ui); font-size:14px; font-weight:500; line-height:1.2; letter-spacing:normal; text-decoration:none}
.pv-btn.pv-sm{gap:4px; min-height:32px; padding:0 12px; font-size:13px}
:is(a, button, summary, label).pv-btn-primary{background:var(--wine); border-color:transparent; color:var(--on-wine)}
:is(a, button, summary, label).pv-btn-secondary{background:var(--surface); border-color:var(--line-2); color:var(--ink)}
:is(a, button, summary, label).pv-btn-quiet{background:none; border-color:transparent; color:var(--ink-2)}
:is(a, button, summary, label).pv-btn-danger{background:none; border-color:var(--line); color:var(--danger)}
/* Quiet has no edge (§7): this line outweighs the finesse round's one edge for every outlined control (.pv :is(…), 0,2,0), kept as
   the colours test reads it; the states above (:hover) change its fill, never its edge */
:is(a, button, summary, label).pv-btn.pv-btn-quiet{border-color:transparent}
/* Icon: a circle 36, bare on a card; in a head it keeps its ring (rule 50, preview-heads.css) */
:is(a, button, summary, label).pv-icon-btn{width:36px; height:36px; padding:0; border:0; border-radius:var(--r-full); background:none; color:var(--ink-2); font-family:var(--ui)}
/* A link that acts: ink, 500, its icon first. A later rule underlines it faintly in --line (.pv:where(…) :is(… .pv-link-btn …)):
   his call, 31 Oct 2026, kept over v209 B5's "never underlined" */
:is(a, button).pv-link-btn{padding:4px 0; border:0; background:none; font-family:var(--ui); font-size:14px; font-weight:500; line-height:1.2; color:var(--ink); text-decoration:none}
/* A reaction: 36 on every page (it was 32 on Home, 40 on Your page and Our story, 42 in The log) */
:is(a, button).pv-act{position:relative; gap:6px; min-height:36px; padding:0 12px; border:0; border-radius:var(--r-sm); background:none; font-family:var(--ui); font-size:14px; font-weight:500; color:var(--ink-2)}
button.pv-react-more{position:relative; width:36px; height:36px; padding:0; border:0; border-radius:var(--r-full); background:none; color:var(--ink-2)}

/* ---- (motion 1, 1 Nov 2026) The tick (docs/motion-2026-11-01/opportunities.md, row 1; Emil Kowalski's find-animation-opportunities:
   feedback, tens a day in the planning months). A round tick box answers a press in place (preview-home.js INPLACE.done): its fill,
   its ring and its mark's colour ease over --dur-fast, and the mark grows to its size from .6 over --dur, so it lands just after the
   fill. Transitions, not keyframes (a tick can be pressed twice in a second, and a transition turns back from where it is), so a page
   as it loads never moves and every rest state is as it was: unticked the mark is transparent (now at .6 too), hovered it shows at
   its size in --line, ticked at its size. A question's round mark (is-q) keeps its icon at its size. A done row's words fade to
   --ink-2 over --dur; the line through them comes at once. :root outweighs Planning's lead box (.pvr-plan .pvp-lead .pv-taskbox),
   whose opacity while busy keeps its ease. Reduced motion: the house's reduce rule turns all of it off. */
:root body.pv .pv-taskbox{transition:background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
  color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out)}
:root body.pv .pv-taskbox > svg{transition:transform var(--dur) var(--ease-out)}
:root body.pv .pv-taskbox:not(.is-on, .is-q) > svg{transform:scale(.6)}
:root body.pv button.pv-taskbox:hover > svg{transform:none}
:root body.pv :is(.pvp-t, .pv-task-t, .pv-row-t, .pv-line-t, .pv-todo-tx, .pv-ask-t a){transition:color var(--dur) var(--ease-out)}

/* ---- (motion 2, 1 Nov 2026, one example for his look) A fold opens with a bridge (docs/motion-2026-11-01/opportunities.md, row 2).
   To do's Late fold (.pvp-fold) as it opens. Take one (its inside rising 4 over --dur-fast, the menus' pvd-pop) he could not see
   ("i can't see the animation"), so take two: its line and then its rows rose 12 and faded in over --dur-slow on Home's entrance
   curve, 40 apart ("noticeable now, it's nice but a little abrupt, can we slightly smoothen it?"), so take three: they rise 8 over
   400 (Home's entrance rise's length; past §8's --dur-slow, his call) on a softer ease-out, cubic-bezier(.33, 1, .68, 1), that does
   not leap at its start, still 40 apart (the eighth row on at 280, all settled by about 680). No height moves (§8); closing stays
   instant. Approved on the Late fold, then rolled out (1 Nov 2026, his "finish up"): every .pv-fold. */
@media (prefers-reduced-motion:no-preference){
  @keyframes pvm-fold{from{opacity:0; transform:translateY(8px)}}
  body.pv .pv-fold[open] > .pv-fold-in > :not(ul), body.pv .pv-fold[open] > .pv-fold-in > ul > li{animation:pvm-fold 400ms cubic-bezier(.33, 1, .68, 1) backwards}
  body.pv .pv-fold[open] > .pv-fold-in > ul > li:nth-child(1){animation-delay:40ms}
  body.pv .pv-fold[open] > .pv-fold-in > ul > li:nth-child(2){animation-delay:80ms}
  body.pv .pv-fold[open] > .pv-fold-in > ul > li:nth-child(3){animation-delay:120ms}
  body.pv .pv-fold[open] > .pv-fold-in > ul > li:nth-child(4){animation-delay:160ms}
  body.pv .pv-fold[open] > .pv-fold-in > ul > li:nth-child(5){animation-delay:200ms}
  body.pv .pv-fold[open] > .pv-fold-in > ul > li:nth-child(6){animation-delay:240ms}
  body.pv .pv-fold[open] > .pv-fold-in > ul > li:nth-child(n+7){animation-delay:280ms}
}

/* ---- (motion 3, 1 Nov 2026, one example for his look) A message arrives with a bridge (docs/motion-2026-11-01/opportunities.md,
   row 3). An open thread asks for new messages every 10 s (preview-home.js); what it brings is marked is-arriving and rises 8 and
   fades in over 400 on the fold's approved curve, so it no longer appears in one frame. The thread as it is drawn, and a message
   you send (its page is drawn again), do not move. Reduced motion: nothing moves. */
@media (prefers-reduced-motion:no-preference){
  body.pv .pv-msg.is-arriving{animation:pvm-fold 400ms cubic-bezier(.33, 1, .68, 1) backwards}
}

/* ---- (motion 4, 1 Nov 2026, one example for his look) Find your photographs: the found page comes in (docs/motion-2026-11-01/
   opportunities.md, row 4; the rare tier, a guest's one moment). As the page loads: the cover of their own photographs rises 8 and
   fades in over 400 on the fold's approved curve, then the photographs below follow it, 40 apart from 160 (the twelfth on at 600;
   any past it at 600 too), so the page fills one picture after another. Nothing waits on it: every picture can be pressed at once.
   Reduced motion: nothing moves. */
/* Take two ("can't see the animation": the pictures loaded after it had run): the page's script holds them back (is-waiting) until
   its first fifteen have loaded, then is-in plays: each rises 16 from .97 and fades in over 600, the cover first, the photographs
   80 apart from 200 (the twelfth on at 1080). Without the script nothing is held back and nothing moves. */
/* Take three (still not seen: the cover moved as one block, and the photographs under it before anyone scrolled to them): the
   cover's pictures come in one after another, 120 apart; each photograph below rises in as it comes into view (is-seen, the
   script's --d for those that arrive together); each rises 24 from .95 and fades in over 700. */
@media (prefers-reduced-motion:no-preference){
  @keyframes pvm-found{from{opacity:0; transform:translateY(24px) scale(.95)}}
  [data-found].is-waiting .pv-found-cover > *, [data-found]:is(.is-waiting, .is-in) .pv-ftile:not(.is-seen){opacity:0}
  [data-found].is-in .pv-found-cover > *{animation:pvm-found 700ms cubic-bezier(.33, 1, .68, 1) backwards}
  [data-found].is-in .pv-found-cover > :nth-child(2){animation-delay:120ms}
  [data-found].is-in .pv-found-cover > :nth-child(3){animation-delay:240ms}
  [data-found] .pv-ftile.is-seen{animation:pvm-found 700ms cubic-bezier(.33, 1, .68, 1) var(--d, 0ms) backwards}
}
/* ---- (1 Nov 2026, the thread, his words with an iMessage screenshot: "can we slightly curve the text box a bit more?", "let's not
   put time in the same message as the texting box … just how apple does it in imessage", "can we give a nice subtle background?")
   A bubble's corners 12 → 18, so a one-line message is a pill, as iMessage's; its padding even now that no time sits under its words.
   The time leaves the bubble for the lines between messages (talk.js, preview-home.js): the bubble keeps its <time> for a screen
   reader only; a pinned one keeps its pin, small, after its words. A time line of its own (is-time) reads as the day's lines.
   The conversation's ground (take two; the blend of wine and gold was "not nice", his pick "a subtle image of the sign in page"):
   the house's own door painting (lib/wedding.js doorArt, its tall one, set on the box by talk.js as --chat-art) at the foot of the
   conversation, where its newest words are, its width the box's, under a veil of --surface at 55 %, rising into the painting's own
   paper (--chat-paper) above it; a house with no painting keeps --surface. The other side's bubbles turn --surface with
   --shadow-1 so their words read over it. */
body.pv .pv-msg-b{border-radius:18px; padding:8px 14px}
body.pv .pv-msg-time time, body.pv .pv-msg:not(.is-pinned) .pv-msg-time{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
body.pv .pv-msg.is-pinned .pv-msg-time{display:inline-flex; margin-left:6px; vertical-align:middle}
/* (his look: "a little too strong … it has to be subtle") the veil 55 → 75 %; ("seen by 1/51 … is not looking too visible") its
   line in --ink at 500, so it reads over the painting */
:root body.pv .pv-bubbles > .pv-seenby{color:var(--ink); font-weight:500}
body.pv .pv-bubbles{background:linear-gradient(color-mix(in srgb, var(--surface) 75%, transparent), color-mix(in srgb, var(--surface) 75%, transparent)),
  var(--chat-art, none) center bottom / 100% auto no-repeat, var(--chat-paper, var(--surface))}
body.pv .pv-msg:not(.is-mine) .pv-msg-b{background:var(--surface); box-shadow:var(--shadow-1)}

/* ===== preview-links.css ===== */
/* (v209, item 9a of docs/v209-2026-10-23/START-HERE.md, A9) The links sheet (views/preview/sheet-links.js, at /look/links), inlined
   on that page only, after every other sheet (views/preview/kit.js shell). Two parts: 1, the sheet itself, under .pvx-ls; 2, the
   proposal, every rule under .pvx-ls .is-new, so it reaches only what the sheet marks Proposed. Round B moves part 2 into the
   house's own sheets on his word, with .pvx-ls .is-new taken off. */

/* 1. The sheet: each kind's name and its line, then Today and Proposed side by side from 768 (one under the other on a phone) */
.pvx-ls .pvls-intro{max-width:40em; margin:0; font-size:16px; line-height:1.5; color:var(--ink-2)}
.pvx-ls .pvls-kind{margin-top:48px}
.pvx-ls .pvls-kind > .pv-h2{margin:0}
.pvx-ls .pvls-for{max-width:40em; margin:4px 0 0; font-size:16px; line-height:1.5; color:var(--ink-2)}
.pvx-ls .pvls-pair{display:grid; grid-template-columns:minmax(0, 1fr); gap:24px; margin-top:16px}
.pvx-ls .pvls-tag{margin:0 0 8px; font-size:14px; font-weight:600; line-height:20px; color:var(--ink)}
.pvx-ls .pvls-spec{padding:16px; border:1px solid var(--line); border-radius:var(--r-post); background:var(--surface)}
.pvx-ls .pvls-spec + .pvls-spec{margin-top:12px}
.pvx-ls .pvls-where{margin:0 0 8px; font-size:13px; line-height:18px; color:var(--ink-2)}
.pvx-ls .pvls-in{min-width:0; font-size:16px; line-height:1.5; color:var(--ink)}
/* a room's own classes on an example's frame, without that room's page layout round it */
.pv .pvx-ls .pvls-in.pv-home{display:block; max-width:none; margin:0}
.pv .pvx-ls .pvls-in .pv-head{margin:0}
.pv .pvx-ls .pvls-in > .pv-sect{margin:0}
@media (min-width:1024px){ .pvx-ls .pvls-pair{grid-template-columns:repeat(2, minmax(0, 1fr))} }
/* the Mehendi: today, then the two ways, each the column wide, as on the day's page */
.pvx-ls .pvls-way{margin-top:24px}
.pvx-ls .pvls-way-h{margin:0; font-size:16px; font-weight:600; line-height:24px; color:var(--ink)}
.pvx-ls .pvls-way > .pvls-for{margin-bottom:12px}
.pvx-ls .pvls-under{margin-top:12px; padding:12px 16px; border:1px solid var(--line); border-radius:var(--r-post); background:var(--surface)}
.pvx-ls .pvls-under .pvls-where{margin-bottom:4px}
.pvx-ls .pvls-under .pvd-open{margin:0}

/* 2. The proposal (web-design-guidelines §6: an <a> goes somewhere, a <button> does something). What goes somewhere is drawn one of
   four ways (in words, on its own, a row, a figure's row) and a name one; a status and an action are never drawn as a link. */

/* a link in words: ink, 500, underlined in the firm line 3 under its words, wherever the sentence is (a post, a hint, a day's line,
   a room's sentence under its name) */
.pv .pvx-ls .is-new :is(.pv-post-tx, .pv-small, .pv-hint, .pv-quiet, .pvd-maybe, .pv-head-sub) a:not(.pv-btn, .pv-link-btn, .pv-more-link),
.pv .pvx-ls .is-new .pv-head.is-room .pv-head-tx > p.pv-head-sub:first-of-type a:not(.pv-btn, .pv-link-btn){
  color:var(--ink); font-weight:500; text-decoration:underline; text-decoration-color:var(--line); text-decoration-thickness:1px; text-underline-offset:3px}
/* on its own ("more"), and where a fact came from, on its small line: ink-2, 500, underlined (after the rule above, which it meets) */
.pv .pvx-ls .is-new :is(.pv-more-link, .pvd-from a, a.pvp-src):not(.pv-link-btn){
  color:var(--ink-2); font-weight:500; text-decoration:underline; text-decoration-color:var(--line); text-decoration-thickness:1px; text-underline-offset:3px}
@media (hover:hover){
  .pv .pvx-ls .is-new :is(.pv-post-tx, .pv-small, .pv-hint, .pv-quiet, .pvd-maybe, .pv-head-sub) a:not(.pv-btn, .pv-link-btn):hover,
  .pv .pvx-ls .is-new :is(.pv-more-link, a.pvp-src):hover{color:var(--ink); text-decoration-color:currentColor}
}

/* a row: the whole row is the way in, a chevron at its end (ink-3; ink under a pointer), 44 tall at least, nothing in it underlined */
.pv .pvx-ls .is-new a.pv-row-main{position:relative; min-height:44px; padding-right:24px; color:inherit; text-decoration:none}
.pv .pvx-ls .is-new a.pv-row-main::after{content:""; position:absolute; top:50%; right:4px; width:16px; height:16px; margin-top:-8px; background:var(--ink-2);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 6.5 5.5 5.5-5.5 5.5'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 6.5 5.5 5.5-5.5 5.5'/%3E%3C/svg%3E") center / 16px 16px no-repeat}
@media (hover:hover){ .pv .pvx-ls .is-new a.pv-row-main:hover::after{background:var(--ink)} }

/* a figure that opens: a row of its own, its faces (or its icon) and its name, the figure at the end before the chevron; one line */
.pv .pvx-ls .is-new .pvls-who{margin:0}
.pv .pvx-ls .is-new .pvx-2d-peak .pvls-who{margin:16px 0 0; border-block:1px solid var(--line)}
.pv .pvx-ls .is-new .pvls-who a.pv-row-main{gap:12px; padding-block:0}
.pv .pvx-ls .is-new .pvls-who .pv-row-t{display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:16px; font-weight:500; color:var(--ink)}
.pv .pvx-ls .is-new .pvls-who .pvls-n{font-weight:400; color:var(--ink-2); white-space:nowrap; font-variant-numeric:tabular-nums}

/* an action in words (a link-button): ink, 500, its icon before it, never underlined; a 44 target round its 20 of words */
.pv .pvx-ls .is-new :is(a, button).pv-link-btn:not(.pv-btn){position:relative; display:inline-flex; align-items:center; gap:4px; margin:0; padding:0; border:0;
  border-radius:var(--r-sm); background:none; font:inherit; font-weight:500; line-height:20px; color:var(--ink); text-decoration:none; vertical-align:baseline; cursor:pointer}
.pv .pvx-ls .is-new :is(a, button).pv-link-btn:not(.pv-btn)::before{content:""; position:absolute; inset:-12px -4px}
.pv .pvx-ls .is-new :is(a, button).pv-link-btn:not(.pv-btn) > svg{flex:none; color:var(--ink-2)}
@media (hover:hover){ .pv .pvx-ls .is-new :is(a, button).pv-link-btn:not(.pv-btn):hover{background:var(--hover); box-shadow:0 0 0 4px var(--hover)} }

/* a status: the pill as it is, or plain words in its colour (waiting amber, late red), never underlined; the action beside it */
.pv .pvx-ls .is-new .pv-st{font-weight:500; text-decoration:none}
.pv .pvx-ls .is-new .pv-st.is-wait{color:var(--warn)}
.pv .pvx-ls .is-new .pv-st.is-late{color:var(--danger)}
.pv .pvx-ls .is-new .pvd-status{flex-wrap:wrap; align-items:center; gap:8px 16px}
.pv .pvx-ls .is-new .pvd-from .pv-dot{margin:0 4px}
.pv .pvx-ls .is-new .pvd-from .pv-link-btn{margin-left:12px}

/* a name: ink, 600, never underlined */
.pv .pvx-ls .is-new .pv-name, .pv .pvx-ls .is-new a.pv-name:hover{font-weight:600; color:var(--ink); text-decoration:none}

/* the day's ways as quiet buttons (34, their icons; a 44 target): way A one row that scrolls sideways, way B two a row on a phone */
.pv .pvx-ls .is-new .pvls-ways{display:flex; gap:8px; margin:16px 0 0}
.pv .pvx-ls .is-new .pvls-ways > .pv-btn{position:relative; flex:none}
.pv .pvx-ls .is-new .pvls-ways > .pv-btn::before{content:""; position:absolute; inset:-5px 0}
@media (max-width:1023px){
  .pv .pvx-ls .is-new .pvx-2d-peak .pv-dayhero-tx > :is(.pvls-who, .pvls-ways){grid-column:1 / -1}
}