/* © 2026 Lumira Studio (lumirastudio.com). All rights reserved. */
/* One round's conversation (js/approval-chat.js, 3 Oct 2026): the client's
   page and the producer's views draw it the same way. Calmer and denser than
   before: messages at the v2 small size (14px), names and times at 13px.
   Each person's name in its own --who colour; the producer in ink. Each
   person's messages in a soft fill of their colour (--who-N-fill, 4 Oct 2026),
   the producer's in lilac, on every page alike; names and times in ink-2,
   which keeps 6:1 or better on every fill.
   Design system v2 tokens only. */
.ac-thread{display:flex;flex-direction:column;gap:6px}
.ac-b{position:relative;max-width:min(85%,calc(100% - 40px));align-self:flex-start;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--r) var(--r) var(--r) 4px;padding:5px 10px 6px;font-size:var(--fs-small);line-height:1.45;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;transition:box-shadow .3s ease-in-out,background-color .3s ease-in-out}
.ac-b.me{align-self:flex-end;background:var(--calm-1);box-shadow:none;border-radius:var(--r) var(--r) 4px var(--r)}
/* Whose message it is, by its fill: the producer lilac, each person their own (the
   class is ac-bh + the comment's hue). Before the ring rules, so a lit message keeps its ring. */
.ac-b.ac-bh0{background:var(--calm-1);box-shadow:none}
.ac-b.ac-bh1{background:var(--who-1-fill);box-shadow:none}.ac-b.ac-bh2{background:var(--who-2-fill);box-shadow:none}
.ac-b.ac-bh3{background:var(--who-3-fill);box-shadow:none}.ac-b.ac-bh4{background:var(--who-4-fill);box-shadow:none}
.ac-b.ac-bh5{background:var(--who-5-fill);box-shadow:none}.ac-b.ac-bh6{background:var(--who-6-fill);box-shadow:none}
.ac-b .ac-q:not(.ac-q-box){background:var(--white-a60)}
.ac-b.is-sending{opacity:.65}
.ac-b.is-failed .ac-meta{color:var(--danger-on-fill)}
.ac-b.is-flash{box-shadow:0 0 0 3px var(--accent),inset 0 0 0 1px var(--ink)}
.ac-meta{display:block;font-size:var(--fs-label);line-height:1.35;font-weight:500;color:var(--ink-2);margin-bottom:1px;white-space:normal}
.ac-who{font-weight:700}
.ac-h0{color:var(--ink)}
.ac-h1{color:var(--who-1)}.ac-h2{color:var(--who-2)}.ac-h3{color:var(--who-3)}
.ac-h4{color:var(--who-4)}.ac-h5{color:var(--who-5)}.ac-h6{color:var(--who-6)}
.ac-text{display:block}
.ac-empty{margin:auto;font-size:var(--fs-small);color:var(--ink-3);text-align:center;padding:8px}
/* About one shot or picture: its frame small, beside its name */
.ac-tag{display:flex;width:fit-content;align-items:center;gap:6px;font-size:var(--fs-label);font-weight:700;line-height:1;background:var(--ink);color:var(--on-ink);border-radius:var(--r-s);padding:3px 7px;margin:3px 0 4px;white-space:nowrap}
.ac-tag .ac-th{width:22px;height:22px;border-radius:var(--r-s);margin-left:-4px}
.ac-th{flex:none;width:36px;height:36px;border-radius:var(--r-s);overflow:hidden;background:var(--calm-2);display:inline-flex;align-items:center;justify-content:center}
.ac-th img{width:100%;height:100%;object-fit:cover;display:block}
.ac-th-n{font-size:var(--fs-label);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1px var(--field-edge);background:var(--white)}
/* The quote: in a reply, and in the box while one is being written */
.ac-q{display:flex;align-items:center;gap:8px;width:100%;min-width:0;margin:3px 0 4px;padding:4px 8px 4px 6px;border:0;border-left:3px solid var(--ink);border-radius:var(--r-s);background:var(--ink-a08);font:inherit;font-size:var(--fs-label);line-height:1.35;color:var(--ink);text-align:left;cursor:pointer;white-space:normal}
.ac-q:focus-visible,.ac-reply:focus-visible,.ac-qx:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ac-qt{flex:1;min-width:0;display:flex;flex-direction:column}
.ac-ql{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-q .ac-th{width:32px;height:32px}
.ac-qh0{border-left-color:var(--ink)}
.ac-qh1{border-left-color:var(--who-1)}.ac-qh2{border-left-color:var(--who-2)}.ac-qh3{border-left-color:var(--who-3)}
.ac-qh4{border-left-color:var(--who-4)}.ac-qh5{border-left-color:var(--who-5)}.ac-qh6{border-left-color:var(--who-6)}
.ac-q-box{cursor:default;margin:0;background:var(--white);box-shadow:inset 0 0 0 1px var(--line);padding:6px 4px 6px 8px}
.ac-q-box[hidden]{display:none}
.ac-qx{flex:none;width:36px;height:36px;border:0;border-radius:var(--r-s);background:none;color:var(--ink-2);display:flex;align-items:center;justify-content:center;cursor:pointer}
.ac-qx svg,.ac-reply svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Reply: beside the message on hover, after a long press on a phone */
.ac-reply{position:absolute;top:50%;margin-top:-16px;right:-38px;width:32px;height:32px;border:0;border-radius:50%;background:var(--calm-2);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s ease-in-out}
.ac-b.me .ac-reply{right:auto;left:-38px}
/* A clear bridge over the 6px gap to the message, so moving the mouse across to Reply keeps it showing */
.ac-reply::before{content:"";position:absolute;top:-6px;bottom:-6px;left:-12px;right:-12px}
.ac-b:focus-within .ac-reply,.ac-b.is-act .ac-reply{opacity:1;pointer-events:auto}
@media (hover:hover){.ac-b:hover .ac-reply{opacity:1;pointer-events:auto}}
.ac-b.is-act{box-shadow:0 0 0 2px var(--ink)}

/* ---------- the producer's side (js/approval-feed.js) ---------- */
/* One line per round: "Storyboard · 3 comments · not approved yet · 2h ago" */
.afeed-row{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:8px 10px;border:0;border-radius:var(--r-s);background:none;font:inherit;font-size:var(--fs-small);color:var(--ink);text-align:left;cursor:pointer}
.afeed-row:hover{background:var(--calm-2)}
.afeed-row:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.afeed-row.is-on{background:var(--calm-1)}
.afeed-row .afeed-kind{flex:none}
.afeed-row .afeed-name{flex:1 1 auto;min-width:0;font-size:var(--fs-small);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.afeed-st{flex:none;display:flex;align-items:center;gap:6px;font-size:var(--fs-label);color:var(--ink-2);white-space:nowrap}
.afeed-st .afeed-pill{font-size:var(--fs-label);font-weight:600;padding:1px 8px}
.afeed-pill.waiting{background:var(--calm-1);color:var(--ink)}
.afeed-pill.approved,.appr-pill.approved{background:var(--success-soft);color:var(--success)}
.afeed-pill.changes,.appr-pill.changes{background:var(--danger-soft);color:var(--danger)}
.afeed-go{flex:none;width:16px;height:16px;fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:640px){.afeed-row{flex-wrap:wrap;row-gap:2px}.afeed-row .afeed-name{flex-basis:calc(100% - 120px)}.afeed-st{flex-basis:100%;padding-left:2px;white-space:normal;flex-wrap:wrap}.afeed-go{display:none}}
.afeed-sum{flex:none;font-size:var(--fs-label);color:var(--ink-2)}
.afeed-rows{display:flex;flex-direction:column;gap:2px;padding:4px 0 6px}
/* the project page */
.appr-rows{display:flex;flex-direction:column;gap:2px;margin:4px 0 6px}
/* The round's conversation, docked (the moodboard's Review tab) or in the side panel */
.afc{display:flex;flex-direction:column;gap:8px;min-height:0}
.afc-notes{display:flex;flex-direction:column;gap:4px}
.afc-notes p{margin:0;font-size:var(--fs-label);color:var(--ink-2)}
.afc-notes .afeed-warn{color:var(--danger);font-weight:600}
.afc .ac-thread{background:var(--tint);border-radius:var(--r);padding:10px;overflow-y:auto;min-height:72px}
/* Docked (the moodboard's Review tab), full height (Luke, 4 Oct 2026: "why the chat is not
   taking the full height"): the round's conversation fills the tab, the thread running down
   to the reply box at its foot. Two or more rounds share the height, and the tab scrolls
   only when each would get less than 280px. */
.afeed-docked .afeed-b{display:flex;flex-direction:column}
.afeed-docked .afeed-rows{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.afeed-docked .afeed-item{flex:1 1 0;min-height:280px;display:flex;flex-direction:column}
.afeed-docked .afc{flex:1 1 0;min-height:0}
.afeed-docked .afc .ac-thread{flex:1 1 0;min-height:96px}
.afc-compose{display:flex;flex-direction:column;gap:6px}
.ac-composer{display:flex;align-items:flex-end;gap:8px;background:var(--white);border:1px solid var(--field-edge);border-radius:var(--pill);padding:4px 4px 4px 12px}
.ac-composer:focus-within{outline:2px solid var(--ink);outline-offset:1px}
.ac-composer textarea{flex:1;min-width:0;border:0;outline:0;background:none;resize:none;margin:0;padding:7px 0;min-height:34px;max-height:140px;font:inherit;font-size:var(--fs-small);line-height:1.4;color:var(--ink)}
.ac-send{flex:none;width:36px;height:36px;border:0;border-radius:50%;background:var(--ink);color:var(--accent);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.ac-send svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ac-send:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* The side panel: the right-hand side on a computer, a full-height sheet on a phone */
.afp{position:fixed;top:0;right:0;bottom:0;z-index:75;width:min(var(--afp-w,440px),100vw);box-sizing:border-box;display:flex;flex-direction:column;background:var(--white);box-shadow:var(--float);font-family:var(--sans);color:var(--ink);transform:translateX(0);transition:transform .3s ease-in-out}
.afp[hidden]{display:none}
.afp *{box-sizing:border-box}
.afp-h{flex:none;display:flex;align-items:flex-start;gap:10px;padding:14px 12px 12px 18px;border-bottom:1px solid var(--line)}
.afp-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.afp-t small{font-size:var(--fs-label);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.afp-t b{font-size:var(--fs-body);line-height:1.3;font-weight:700}
.afp-t span{font-size:var(--fs-label);color:var(--ink-2)}
.afp-x{flex:none;width:44px;height:44px;border:0;border-radius:var(--r-s);background:none;color:var(--ink-2);display:flex;align-items:center;justify-content:center;cursor:pointer}
.afp-x:hover{background:var(--calm-2);color:var(--ink)}
.afp-x:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.afp-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.afp-b{flex:1;min-height:0;display:flex;flex-direction:column;padding:12px 14px 14px}
.afp-b .afc{flex:1 1 0;min-height:0}
.afp-b .ac-thread{flex:1 1 0;min-height:96px}
@media (max-width:640px){.afp{width:100vw;top:max(0px,env(safe-area-inset-top));border-radius:0}.afp-b{padding-bottom:max(14px,env(safe-area-inset-bottom))}}
/* The inner edge of a side panel, to make it wider or narrower (js/panel-resize.js, 4 Oct
   2026): the moodboard's side bar and this panel. A grip shows on hover and focus. */
.pr-handle{position:absolute;top:0;bottom:0;left:0;z-index:5;width:10px;cursor:col-resize;touch-action:none;outline:0;-webkit-tap-highlight-color:transparent}
.pr-handle::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--ink);opacity:0;transition:opacity .2s ease-in-out}
.pr-handle::after{content:"";position:absolute;top:50%;left:3px;width:4px;height:40px;margin-top:-20px;border-radius:var(--pill);background:var(--ink-3);opacity:0;transition:opacity .2s ease-in-out}
.pr-handle:hover::before,.pr-handle:focus::before,.pr-handle.is-drag::before{opacity:.35}
.pr-handle:hover::after,.pr-handle:focus::after,.pr-handle.is-drag::after{opacity:1;background:var(--ink)}
.pr-handle:focus-visible::before{opacity:1;width:3px}
html.pr-dragging{cursor:col-resize;-webkit-user-select:none;user-select:none}
@media (max-width:640px){.afp .pr-handle{display:none}}
@media print{.pr-handle{display:none}}
@media print{.afp{display:none}}
/* a frame or picture with comments: the count, on the frame */
.afeed-badge{display:inline-flex;align-items:center;justify-content:center;gap:4px}
.mb-cmk{position:absolute;right:6px;bottom:6px;transform-origin:right bottom;min-width:30px;height:26px;padding:0 9px;border:0;border-radius:var(--pill);background:var(--ink);color:var(--on-ink);display:flex;align-items:center;justify-content:center;gap:4px;font:700 var(--fs-label)/1 var(--sans);cursor:pointer;pointer-events:auto}
.mb-cmk svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.mb-cmk:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:640px){.ac-composer textarea{font-size:var(--fs-ui)}}
/* The board's card fits its content: a page's own section padding (the shot list's
   section{padding:58px 0}) made it a tall, mostly empty box on a phone. */
.afeed{padding:0}
.afeed .afeed-row{flex-wrap:wrap;row-gap:2px;padding:8px 6px}
.afeed .afeed-row .afeed-name{flex:1 1 0}
.afeed .afeed-st{flex-basis:100%;white-space:normal;flex-wrap:wrap}
.afeed .afeed-go{display:none}
.afeed-row,.afp button,.ac-b button{-webkit-tap-highlight-color:transparent}
.afeed-h b{white-space:nowrap}
.afeed-h .afeed-pill{white-space:nowrap}
.afeed-h .afeed-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.afp,.afp .ac-thread,.afc .ac-thread,.thread{overscroll-behavior:contain}
.afc-off{margin:0;padding:10px 12px;border-radius:var(--r-s);background:var(--calm-2);font-size:var(--fs-small);color:var(--ink-2)}
.ac-role{display:inline-block;margin-left:6px;padding:0 6px;border-radius:var(--r-s);background:var(--ink);color:var(--on-ink);font-size:var(--fs-micro);font-weight:700;letter-spacing:.04em;line-height:17px;vertical-align:1px}
.afc-err{margin:0;font-size:var(--fs-small);color:var(--danger)}
.afc-err[hidden]{display:none}
.ac-mark{align-self:center;margin:2px 0;padding:2px 10px;border-radius:var(--pill);background:var(--calm-2);font-size:var(--fs-label);color:var(--ink-2)}
.afeed-wait.is-waiting{font-weight:700;color:var(--danger)}
/* A notice's landing (4 Oct 2026): the message that waits stays lit until it is
   answered; the shot or picture it is about is lit on the page; from the project
   page, the panel links to the place itself. */
.ac-b.is-target{box-shadow:0 0 0 3px var(--accent),inset 0 0 0 1px var(--ink)}
.afp-go{align-self:flex-start;margin-top:2px;font-size:var(--fs-small);font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;border-radius:var(--r-s)}
.afp-go[hidden]{display:none}
.afp-go:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.is-notice[data-sbcard],.sl-row.is-notice,.mb-item.mb-notice{outline:3px solid var(--accent);outline-offset:3px;box-shadow:0 0 0 4px var(--ink)}
.afeed-badge.is-on,.mb-cmk.is-on{box-shadow:0 0 0 3px var(--accent)}
/* Seen (4 Oct 2026). For the client: "Seen by Luke" under their newest message the producer
   has seen, quiet, on the same side as the message. For the producer: "New" on a client's
   message they had not seen when the conversation opened. */
.ac-seen{align-self:flex-start;margin:-2px 4px 2px;font-size:var(--fs-micro);line-height:1.3;color:var(--ink-2)}
.ac-seen.me{align-self:flex-end}
.ac-new{display:inline-block;margin-left:6px;padding:0 6px;border-radius:var(--r-s);background:var(--accent);color:var(--ink);font-size:var(--fs-micro);font-weight:700;letter-spacing:.04em;line-height:17px;vertical-align:1px}
/* The project page (4 Oct 2026): a round's line goes straight to the place, at the comment
   that waits; the Conversation button beside it opens the conversation here. */
.afeed-line{display:flex;align-items:center;gap:4px;border-radius:var(--r-s)}
.afeed-line .afeed-row{flex:1 1 auto;min-width:0;text-decoration:none}
.afeed-line.is-on{background:var(--calm-1)}
.afeed-line.is-on .afeed-row{background:none}
.afeed-talk{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:0;border-radius:var(--pill);background:var(--calm-2);font:inherit;font-size:var(--fs-label);font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.afeed-talk:hover{background:var(--calm-1)}
.afeed-talk:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.afeed-talk svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.afeed-line.is-on .afeed-talk{background:var(--ink);color:var(--on-ink)}
@media (max-width:640px){.afeed-line{align-items:flex-start}.afeed-talk{min-height:40px;margin-top:2px;padding:0 12px}.afeed-talk span{display:none}}
/* The project page's client column (direction B, 4 Oct 2026; ApprovalFeed.project). The
   Desk's blocks from library-pro.css (Waiting on you, the timeline) with the project's
   own parts: inside its project a line carries no project name, its type above its name. */
.pv-client-box{display:flex;flex-direction:column;gap:20px;min-width:0}
.pv-wait{padding:18px}
.pv-wait .lp-wait-box{grid-template-columns:minmax(0,1fr)}
.pv-wait .pv-k{font-size:var(--fs-micro);font-weight:700;color:var(--ink-2)}
.pv-wait .pv-quote{font-size:var(--fs-small);line-height:1.45;color:var(--ink)}
.pv-wait-foot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:6px;position:relative;z-index:1}
.pv-who{flex:1;min-width:0;font-size:var(--fs-label);font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-wait .afeed-talk{background:var(--white)}
.pv-wait .lp-wait[data-wait="changed"] .afeed-talk,.pv-wait .lp-wait[data-wait="opened"] .afeed-talk{background:var(--calm-2)}
.pv-panel{background:var(--white);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);padding:16px 16px 10px}
.pv-link .pv-sec-title{margin-bottom:10px}
.pv-link-top{display:flex;flex-direction:column;gap:12px;padding:12px 14px;border-radius:var(--r);background:var(--pc,var(--calm-1))}
.pv-link-top + .pv-rows + .pv-link-top{margin-top:12px}
.pv-link-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.pv-link-t b{font-size:var(--fs-ui);overflow-wrap:anywhere}
.pv-link-t span{font-size:var(--fs-label);color:var(--ink-2)}
.pv-link-btns{display:flex;gap:8px}
.pv-link-btns .pv-btn{flex:1;justify-content:center}
.pv-link-btns .pv-btn-quiet{background:var(--white)}
.pv-rows{display:flex;flex-direction:column;gap:0;margin:6px 0 2px}
.pv-line{gap:8px;border-bottom:1px solid var(--line);border-radius:0}
.pv-line:last-child{border-bottom:0}
.pv-line .pv-row{flex-wrap:wrap;align-items:center;gap:6px 10px;min-height:0;padding:10px 4px;font-size:var(--fs-small)}
.pv-row-t{flex:1 1 100%;min-width:0;display:flex;flex-direction:column;gap:2px}
.pv-row-t .afeed-kind{font-size:var(--fs-micro);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.pv-row-t .afeed-name{flex-basis:auto;font-size:var(--fs-ui);line-height:1.3;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-row-t.solo .afeed-kind{font-size:var(--fs-ui);line-height:1.3;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink)}
.pv-row-m{flex:1 1 100%;display:flex;align-items:center;gap:4px 8px;flex-wrap:wrap;white-space:normal}
.pv-row-m .afeed-pill{font-size:var(--fs-label);font-weight:700;padding:3px 10px;border-radius:var(--pill)}
.pv-row-m .afeed-warn{font-size:var(--fs-label);font-weight:600;color:var(--danger)}
.pv-fig{flex-basis:100%;font-size:var(--fs-label);color:var(--ink-2)}
.pv-line .afeed-go{display:none}
.pv-line div.pv-row{cursor:default}
.pv-line div.pv-row:hover{background:none}
.pv-line .afeed-talk{padding:0 10px}
.pv-line .afeed-talk span{display:none}
.pv-earl{display:flex;flex-direction:column;gap:6px}
.pv-earl .pv-sec-head{min-height:0}
.pv-earl .pv-sec-title{font-size:var(--fs-ui)}
.pv-tl{background:var(--white);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);padding:14px 14px 0}
.pv-tl .lp-done[data-done="off"] .lp-done-ic{background:var(--calm-2);color:var(--ink-2)}
.pv-tl .lp-done-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pv-tl .lp-done-txt b{font-weight:600}
.pv-tl .lp-done-meta .pv-fig{flex-basis:auto;font-size:var(--fs-label)}
/* a switched-off send's conversations, behind one fold */
.pv-fold{grid-column:2;min-width:0}
.pv-fold summary{list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 8px;margin-left:-8px;border-radius:var(--r-s);font-size:var(--fs-label);font-weight:600;color:var(--ink-2);cursor:pointer}
.pv-fold summary::-webkit-details-marker{display:none}
.pv-fold summary:hover{background:var(--tint);color:var(--ink)}
.pv-fold summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.pv-caret{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease-in-out}
.pv-fold[open] .pv-caret{transform:rotate(90deg)}
.pv-fold .pv-rows{margin:2px 0 4px}
.pv-fold .pv-row{padding:6px 0}
@media (prefers-reduced-motion:reduce){.pv-caret{transition:none}}