/* ==========================================================================
   team-app.css: small additions for the live app on top of team.css (which is
   the design package's file, copied as is). Token-based only, prefix r1-.
   ========================================================================== */

/* The shell around pages still built on Bootstrap (base.html). */
.ps{font-family:var(--font)}
.ps-sidebar a,.ps-tabbar a,.ps-sidebar summary{color:inherit;text-decoration:none}
.ps-sidebar .ps-nav-item{color:var(--text-2)}
.ps-sidebar .ps-nav-item.is-active{color:var(--accent-text)}
.ps-tabbar .ps-tab{color:var(--text-3)}
.ps-tabbar .ps-tab.is-active{color:var(--accent-text)}
body.r1-legacy .ps-main>.container{max-width:1240px}
body.r1-legacy .ps-app{min-height:100vh}
@media (min-width:768px){ body.r1-legacy .ps-main>.container{padding-left:32px;padding-right:32px;margin-left:0} }
@media (max-width:767px){ body.r1-legacy .ps-main{padding-bottom:calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom))} }
.ps-sidebar .ps-search-btn,.ps-sidebar .ps-profile{cursor:pointer}

/* A popover menu on a <details> (the + New menu and the account menu). */
.r1-pop{position:relative}
.r1-pop>summary{list-style:none;cursor:pointer}
.r1-pop>summary::-webkit-details-marker{display:none}
.r1-pop-menu{position:absolute;left:0;top:calc(100% + 6px);z-index:60;min-width:260px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);overflow:hidden;color:var(--text)}
.r1-pop.up .r1-pop-menu{top:auto;bottom:calc(100% + 6px)}
.r1-pop.right .r1-pop-menu{left:auto;right:0}
.r1-pop-menu .ps-menu-row{min-height:48px;font-size:14px}
.r1-pop-menu .ps-menu-row small{display:block;font-size:12px;line-height:16px;color:var(--text-3);font-weight:500}
.r1-pop-menu .ps-menu-row:hover{background:var(--hover)}
/* The sidebar's own popovers stand clear of it rather than being squeezed into
   its width: every "+ New" row has a description under it and each one used to
   lose its end. 300px fits the longest of them on one line. */
.ps-sidebar .r1-pop-menu{min-width:340px}
.r1-pop-menu .ps-menu-row small{overflow-wrap:anywhere}
@media (min-width:768px) and (max-width:1023px){ .ps-sidebar .r1-pop-menu{left:0} .ps-sidebar .ps-new-btn .ps-btn{padding:0} }
.ps-sidebar .ps-new-btn summary.ps-btn{display:flex}

/* Flash messages as banners */
.r1-flashes{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s4)}

/* Phone-only and laptop-only blocks inside one template */
@media (min-width:1024px){ .r1-phone-only{display:none!important} }
@media (max-width:1023px){ .r1-laptop-only{display:none!important} }

/* Home */
.r1-anchor{scroll-margin-top:72px}
.ps-q .ps-q-title a,.ps-q .ps-q-why a{color:inherit}
.ps-q form{display:inline-flex;margin:0}
.ps-q-action form .ps-btn{font:inherit}
.ps-q .ps-q-link{color:inherit;text-decoration:none}
.ps-q .ps-q-link:hover .ps-q-title{text-decoration:underline}
button.ps-btn{font-family:var(--font)}
.r1-crew+.r1-crew{margin-top:6px}
.ps-tonight a.ps-btn{text-decoration:none}
.r1-seg-wrap{margin-top:12px}
.ps-row .ps-row-main{min-width:0}
.ps-wd{text-decoration:none}
a.ps-wd:hover{background:var(--hover)}
a.ps-wd.is-today:hover{background:var(--accent-hover)}

/* Staff pages: the theme switch in the header */
.r1-theme{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);color:var(--text-2);cursor:pointer;font-size:16px}
.r1-theme:hover{background:var(--hover)}
.ps-staff-head .ps-staff-right{display:flex;align-items:center;gap:var(--s2)}
.r1-lightbox{position:fixed;inset:0;z-index:90;background:rgba(12,10,9,.92);display:none;align-items:center;justify-content:center;padding:16px}
.r1-lightbox.is-open{display:flex}
.r1-lightbox img{max-width:100%;max-height:90vh;border-radius:var(--r-md)}
.r1-lightbox button{position:absolute;top:12px;right:12px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(250,250,249,.14);color:#fff;font-size:20px;cursor:pointer}
.r1-thumb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.r1-thumb{position:relative;aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;background:var(--n-bg);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;color:var(--text-2);font-size:12px;font-weight:600;text-align:center;padding:4px}
.r1-thumb img,.r1-thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.r1-thumb .bi{font-size:24px}
.r1-thumb .r1-thumb-act{position:absolute;width:32px;height:32px;border-radius:50%;background:rgba(12,10,9,.7);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;border:0;cursor:pointer;z-index:1;text-decoration:none}
.r1-thumb .r1-thumb-act.dl{right:4px;bottom:4px}
.r1-thumb .r1-thumb-act.rm{right:4px;top:4px}
.r1-thumb form{margin:0}
.r1-filepick{display:block;width:100%;min-height:52px;padding:12px;border:1.5px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--sunken);color:var(--text);font:500 15px/1.3 var(--font)}
details.r1-details>summary{list-style:none;cursor:pointer}
details.r1-details>summary::-webkit-details-marker{display:none}
details.r1-details[open]>summary .bi-chevron-down{transform:rotate(180deg)}
.r1-uppy .uppy-Dashboard-inner{border-radius:var(--r-lg)!important;border-color:var(--line-strong)!important;background:var(--sunken)!important}
.r1-uppy .uppy-Dashboard-AddFiles-title{font-family:var(--font)!important;color:var(--text)!important}
.r1-uppy .uppy-u-reset,.r1-uppy .uppy-c-btn{font-family:var(--font)!important}
.r1-uppy .uppy-StatusBar-actionBtn--upload,.r1-uppy .uppy-Dashboard-browse{color:var(--accent-text)!important}
.r1-uppy .uppy-StatusBar-actionBtn--upload{background:var(--accent)!important;color:var(--on-accent)!important}
/* The picker ships one light palette of its own (its dark one needs an attribute
   we don't set), and we put it on our own surface — so every piece of its text
   takes our tokens, which flip with the theme (5.1 "Uppy themed with these
   tokens", 11 "All text tokens meet WCAG AA"). Without this, the note under the
   drop zone is #757575 on our near-black, and a picked file's name is #333. */
.r1-uppy .uppy-Dashboard-note{color:var(--text-2)!important}
.r1-uppy .uppy-Dashboard-Item-name{color:var(--text)!important}
.r1-uppy .uppy-Dashboard-Item-status,.r1-uppy .uppy-Dashboard-Item-statusSize{color:var(--text-2)!important}
.r1-uppy .uppy-Dashboard-Item-action,.r1-uppy .uppy-Dashboard-Item-action--remove{color:var(--text-2)!important}
.r1-uppy .uppy-Dashboard-Item-action:hover,.r1-uppy .uppy-Dashboard-Item-action--remove:hover{color:var(--text)!important}
.r1-uppy .uppy-StatusBar,.r1-uppy .uppy-StatusBar.is-waiting .uppy-StatusBar-actions{background-color:var(--surface)!important}
.r1-uppy .uppy-StatusBar:before{background-color:var(--line)!important}
.r1-uppy .uppy-StatusBar-content,.r1-uppy .uppy-StatusBar-statusPrimary{color:var(--text)!important}
.r1-uppy .uppy-StatusBar-statusSecondary{color:var(--text-2)!important}
/* Same as the client uploader (client-app.css): without these the picker falls
   back to Uppy blue and Uppy green the moment a file finishes. */
.r1-uppy .uppy-StatusBar-progress,.r1-uppy .uppy-StatusBar-spinner{background-color:var(--accent)!important;fill:var(--accent)!important}
.r1-uppy .uppy-StatusBar.is-complete .uppy-StatusBar-progress{background-color:var(--s-fg)!important}
.r1-uppy .uppy-StatusBar.is-complete .uppy-StatusBar-statusIndicator{color:var(--s-fg)!important}
.r1-uppy .uppy-StatusBar.is-error .uppy-StatusBar-progress{background-color:var(--d-fg)!important}
.r1-uppy .uppy-Dashboard-Item-progressIcon--circle circle{fill:var(--s-fg)}
.r1-uppy .uppy-StatusBar-actionBtn,.r1-uppy .uppy-DashboardContent-addMore,.r1-uppy .uppy-DashboardContent-back,.r1-uppy .uppy-Dashboard-Item-reSelect{color:var(--accent-text)!important}
/* --d-solid, not --d-fg: in dark mode --d-fg is a pale pink, and Uppy writes
   this button's label in white. */
.r1-uppy .uppy-StatusBar-actionBtn--retry{background-color:var(--d-solid)!important}
.r1-hide{display:none!important}
.ps-staff-foot .ps-link{color:var(--accent-text)}
.ps-field-page .ps-page{max-width:560px}
.r1-inline-form{display:contents}
@media (max-width:767px){ .r1-tablet-up{display:none!important} }
@media (max-width:1023px){ .ps-cols{grid-template-columns:minmax(0,1fr)} }
/* Manager board: an event's details show only once its schedule row is tapped */
.r1-event-details>details:not([open]){display:none}

/* Chips inside a narrow row wrap instead of running under the avatars or off the
   screen (a staffing chip like "Jordan is available · 1 of 2 staffed"). */
.ps-row .ps-row-main .ps-chip{white-space:normal;max-width:100%}
.ps-row .ps-avatars{flex:none}
.r1-chip-list{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0;max-width:100%}
.r1-chip-list .ps-chip{white-space:normal;max-width:100%}

/* Home's laptop Staffing card when Staffing is what was opened */
[data-anchor-for]{scroll-margin-top:72px}
.r1-focus{box-shadow:0 0 0 2px var(--accent)}

/* Phone queue rows: a title may take two lines rather than hide the fact at its end */
@media (max-width:767px){
  .ps-q-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}

/* Tablet rail: only the heart mark of the logo fits */
@media (min-width:768px) and (max-width:1023px){
  .ps-sidebar .ps-brand{padding:0;justify-content:center}
  .ps-sidebar .ps-brand img{width:28px;height:26px;object-fit:cover;object-position:left center}
}

/* ==========================================================================
   Redesign Stage 3: the Booking page, sheets and the Bookings list (prefix r3-)
   ========================================================================== */
.r3-sheet[hidden],[data-sheet-scrim][hidden]{display:none!important}
.r3-sheet{outline:none}
.r3-sheet form{display:flex;flex-direction:column;min-height:0;flex:1}
@media (min-width:768px){ .r3-sheet form{height:100%} .r3-sheet .ps-sheet-body{flex:1} }
body.r3-sheet-open{overflow:hidden}
.r3-sheet .ps-sheet-foot .ps-effect{margin-top:0}
.r3-switch{position:relative;cursor:pointer}
.r3-switch input{position:absolute;opacity:0;width:1px;height:1px}
.r3-switch input:checked+.ps-switch{background:var(--accent)}
.r3-switch input:checked+.ps-switch::after{transform:translateX(18px)}
.r3-switch input:focus-visible+.ps-switch{box-shadow:var(--focus-ring)}
.r3-choice>label{cursor:pointer;position:relative}
.r3-choice>label input{position:absolute;opacity:0;width:1px;height:1px}
.r3-choice>label:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--accent-text);font-weight:600;box-shadow:inset 0 0 0 1px var(--accent)}
.r3-choice>label:has(input:focus-visible){box-shadow:var(--focus-ring)}
.ps-btn.is-loading{opacity:.7;pointer-events:none}
button.ps-menu-row{width:100%;border:0;background:transparent;text-align:left;font:inherit;cursor:pointer}
.ps-menu form{margin:0}
.ps-menu form+form .ps-menu-row,.ps-menu form+.ps-menu-row,.ps-menu .ps-menu-row+form .ps-menu-row{border-top:1px solid var(--line)}
a.ps-menu-row{text-decoration:none}
.ps-menu-row:hover{background:var(--hover)}
@media (min-width:768px){ .r3-phone{display:none!important} }
@media (max-width:767px){ .r3-tablet-up{display:none!important} }
.ps-bhead a{text-decoration:none}
.ps-bhead-facts a{color:var(--accent-text)}
.ps-rail a{color:inherit;text-decoration:none;display:block}
.ps-rail a:hover b{text-decoration:underline}
.ps-tabs a{text-decoration:none}
.r3-inline{display:inline}
.r3-inline form,.r3-actions form{display:inline-flex;margin:0}
.r3-actions{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.ps-day{scroll-margin-top:72px}
[id^="day-"],[id^="design-"],#payments,#proposal,#contract,#gallery,#design{scroll-margin-top:72px}
.ps-dtable .ps-person b{display:inline}
.ps-slot-foot form{display:inline}
.ps-slot-foot .ps-link,.ps-slot-foot button.ps-link{background:none;border:0;padding:0;font:inherit;cursor:pointer;color:var(--accent-text);font-weight:600}
button.ps-link{background:none;border:0;padding:0;font:inherit;cursor:pointer;color:var(--accent-text);font-weight:600}
.r3-section-actions{display:flex;gap:var(--s2);flex-wrap:wrap;padding:var(--s3) var(--s4);border-top:1px solid var(--line)}
.r3-ledger-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.ps-line .ps-chip.nodot{margin-left:6px;vertical-align:middle}
.ps-line .amt.paid{color:var(--text)}
.ps-line .amt.paid::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--s-dot);margin-right:6px;vertical-align:middle}
.ps-line .amt.refund,.ps-line .amt.kept{color:var(--text)}
.r3-invoice{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3);display:flex;flex-direction:column;gap:6px}
.r3-invoice+.r3-invoice{margin-top:var(--s2)}
.r3-kv-row{display:flex;justify-content:space-between;gap:var(--s3);align-items:flex-start}
.r3-candidate{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding:10px var(--s3)}
.r3-candidate+.r3-candidate{border-top:1px solid var(--line)}
.r3-candidate form{margin:0}
.ps-table tr[data-href]{cursor:pointer}
.ps-table td .ps-chip{white-space:normal}
.ps-table a.r3-title{color:var(--text);font-weight:600;text-decoration:none}
.ps-table a.r3-title:hover{text-decoration:underline}
.r3-seg-row{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;align-items:center;margin-bottom:var(--s3)}
.r3-seg-row .ps-seg a{text-decoration:none;color:var(--text-2)}
.r3-seg-row .ps-seg a.is-active{color:var(--text)}
.ps-filters a{text-decoration:none;color:var(--text)}
.ps-filters a.is-active{color:var(--surface)}
.ps-bcard{text-decoration:none;color:inherit}
.ps-bcard:hover{border-color:var(--line-strong)}
.r3-search{display:flex;gap:var(--s2);align-items:center;flex:1;min-width:220px;max-width:360px}
.r3-search .ps-input-wrap{flex:1}
.r3-group{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.r3-group+.r3-group{margin-top:var(--s3)}
.r3-group-head{display:flex;gap:var(--s3);align-items:center;padding:var(--s3) var(--s4);background:var(--sunken);border-bottom:1px solid var(--line)}
.r3-group-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding:10px var(--s4)}
.r3-group-row+.r3-group-row{border-top:1px solid var(--line)}
.r3-group-row form{margin:0}
.ps-timeline .ps-tl-body{min-width:0;overflow-wrap:anywhere}
.ps-timeline .ps-tl-body .ps-meta{display:block}
.ps-timeline form{display:inline}
.r3-design-card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.r3-design-card+.r3-design-card{margin-top:var(--s3)}
.r3-design-card .ps-design-row{border-bottom:1px solid var(--line)}
.r3-design-body{padding:var(--s3) var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.r3-thumbs{display:flex;flex-wrap:wrap;gap:8px}
.r3-thumbs .r1-thumb{width:72px;height:72px;aspect-ratio:auto}
.ps-kv dd{overflow-wrap:anywhere;min-width:0}
@media (max-width:767px){
  .ps-bhead.phone .ps-rail{margin-right:calc(var(--gutter) * -1)}
  .ps-dtable td[data-label] .ps-btn.block{margin-top:8px}
  .r3-group-row{grid-template-columns:minmax(0,1fr)}
}
.ps-next-actions.stack>form{grid-column:1/-1;display:flex}
.ps-next-actions.stack>form .ps-btn{width:100%}
.ps-next-actions.stack>.ps-btn:not(.primary):last-child:nth-child(2){grid-column:1/-1}
.ps-day-head{flex-wrap:wrap}
.ps-day-head>.ps-grow{flex:1 1 200px;min-width:0}
.ps-day-head>.ps-chip{white-space:normal;max-width:100%}
@media (max-width:767px){
  .ps-dtable,.ps-dtable tbody{display:block;width:100%}
  .ps-dtable colgroup{display:none}
  .ps-dtable tr{width:100%}
}
@media (max-width:767px){ .ps-dtable td.r3-empty-design{display:none} }
.ps-filters{flex-wrap:wrap}
.ps-filters .ps-filter,.ps-filters .ps-scope{flex:none;white-space:nowrap}
.ps-table td .ps-chip{white-space:normal;max-width:100%}
.r3-table-wrap{overflow-x:auto}
.r3-table-wrap .ps-table th:nth-child(3),.r3-table-wrap .ps-table th:nth-child(4){min-width:130px}
.r3-table-wrap .ps-table th:nth-child(5),.r3-table-wrap .ps-table th:nth-child(6){min-width:110px}
.ps-table td.r3-next{white-space:normal;min-width:160px}
.ps-table th,.ps-table td{vertical-align:middle}
/* `hidden` is only the browser's own `display:none`, so any component that sets
   its own `display` beats it. Buttons hidden until they apply (the push setup
   card's "Turn on notifications" and "Send me a test") need it back. */
.ps-banner[hidden],.ps-answer-line[hidden],.ps-input[hidden],.ps-btn[hidden]{display:none!important}
@media (max-width:767px){ .r3-seg-row .ps-filters{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none} .r3-seg-row{gap:8px} }
/* The venue lookup (team/_venue.html) */
.r3-venue{position:relative}
.r3-venue [hidden]{display:none!important}
.r3-venue-list{position:absolute;left:0;right:0;top:100%;z-index:30;margin-top:4px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-md);box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:260px;overflow-y:auto}
.r3-venue-item{display:flex;flex-direction:column;gap:2px;padding:10px 12px;cursor:pointer;min-height:44px}
.r3-venue-item+.r3-venue-item{border-top:1px solid var(--line)}
.r3-venue-item small{color:var(--text-3);font-size:12px}
.r3-venue-item:hover,.r3-venue-item.is-active{background:var(--sunken)}
.r3-venue-picked{display:flex;gap:6px;align-items:flex-start;margin-top:6px;overflow-wrap:anywhere}
.r3-venue-picked .bi{color:var(--s-dot)}
/* The grouping review: the event someone opened stands out */
.r3-group-row.is-opened,.r3-group-row:target{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.r3-group-row .r3-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
/* The Bookings table fits a 1280px laptop: each chip column is wide enough for its
   usual chip on one line, and below 1360px the design chip moves under staffing and
   Source shows its icon only. */
.r3-table-wrap .ps-table th:nth-child(3),.r3-table-wrap .ps-table th:nth-child(5){min-width:130px}
.r3-table-wrap .ps-table th:nth-child(4){min-width:150px}
.r3-table-wrap .ps-table th:nth-child(6){min-width:110px}
.r3-table-wrap .ps-table td.r3-next{min-width:140px;max-width:180px}
.r3-design-inline{display:none}
td .r3-design-inline{margin-top:4px}
.r3-table-wrap .ps-source{position:relative}
@media (max-width:1359px){
  .r3-table-wrap .r3-col-design{display:none}
  .r3-table-wrap .r3-design-inline{display:block}
  .r3-table-wrap th .r3-design-inline{display:inline}
  .r3-table-wrap .r3-source-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
.r3-table-wrap .ps-table td:nth-child(4) .ps-chip{white-space:nowrap;max-width:none}

/* ---------- Stage 4: queues (Inbox, Undo and Later, Staffing, Designs, Calendar) ---------- */
/* Undo toast: bottom centre, above the phone tab bar (spec 5.1 Toast) */
.r4-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom));z-index:60;width:min(440px,calc(100vw - 32px))}
.r4-toast .bi{flex:none}
.r4-toast form{margin:0}
.r4-toast .ps-undo{font-weight:600;min-height:36px}
.r4-toast-count{opacity:.7;font-variant-numeric:tabular-nums;font-size:13px}
@media (min-width:768px){ .r4-toast{bottom:24px} }
/* Later on a collapsed row (spec 0.2, from Pocket: "A visible Later (snooze)
   button, never swipe-only"). It used to be display:none until a mouse hovered
   the row on a window at least 1024px wide, so on a phone — which has no hover —
   a collapsed Needs-you row could not be put off at all, and on a laptop you had
   to find it by accident. It is now on every row that can be put off, on every
   device; on the collapsed row it is the quiet one beside the action. */
.r4-hover-later{display:inline-flex}
.ps-q:not(.is-open) .r4-hover-later{padding:0 8px;color:var(--text-3)}
.ps-q:not(.is-open) .r4-hover-later:hover{color:var(--text)}
.r5c-later-icon{display:none}
/* On a phone the collapsed row has one line for the title, the action and this,
   and "Connect Gmail · Later" left three words of the title. The clock takes the
   word's place; the word is still read out, and the tap target stays 40x40. */
@media (max-width:767px){
  .r4-hover-later .r5c-later-icon{display:inline-block;font-size:15px}
  .r4-hover-later .r5c-later-word{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ps-q:not(.is-open) .r4-hover-later{min-width:40px;justify-content:center;padding:0 6px}
}
.r4-later-choices{display:grid;gap:8px}
.r4-later{justify-content:space-between}
.r4-later small{font-weight:500}
/* Inbox */
.r4-inbox .r4-inbox-seg{margin-top:4px}
.r4-queue{overflow:hidden}
.r4-queue .ps-inbox-group a{color:inherit}
.r4-queue .ps-inbox-group .bi{color:var(--text-3)}
.r4-group-link{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r4-fyi{grid-template-columns:32px minmax(0,1fr) auto}
.r4-fyi .ps-q-icon{background:var(--sunken);color:var(--text-2)}
.r4-fyi .ps-q-icon.p{background:var(--p-bg);color:var(--p-fg)}
.r4-fyi .ps-q-title{font-weight:500}
.r4-fyi.is-unread .ps-q-title{font-weight:600}
.r4-fyi-body{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line}
.r4-q-time{font-size:12px;line-height:16px;color:var(--text-3);white-space:nowrap;align-self:start;margin-top:3px}
.r4-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:1px}
.ps-q .ps-q-action form{margin:0}
.ps-q.is-open .ps-q-action{flex-wrap:wrap}
@media (max-width:767px){
  .ps-q.is-open{grid-template-columns:32px minmax(0,1fr)}
  .ps-q.is-open .ps-q-action{grid-column:2;margin-top:8px;display:flex;gap:8px}
}
/* Versions (booking Designs tab, design workspace, designer home) */
.r4-version-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.r4-version-list li{border:1px solid var(--line);border-radius:var(--r-md);padding:8px 10px;background:var(--surface)}
.r4-version-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:14px}
.r4-version-note{margin-top:6px;font-size:13px;line-height:18px}
.r4-versions{margin-top:4px;font-size:13px}
.r4-versions summary{cursor:pointer;min-height:32px;display:inline-flex;align-items:center}
/* Staffing */
.r4-staff-card .ps-day{margin:0}
.r4-staff-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;align-items:center;padding:0 4px 6px}
.r4-staff-booking{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;min-height:32px}
.r4-dispatch{display:inline-flex;align-items:center;gap:6px;font-size:13px}
.r4-answer{align-items:center}
/* Designs */
.r4-design-row .ps-row-title a{color:inherit}
.r4-design-list{overflow:hidden}
/* Calendar */
.ps-pill.n{border-left-color:var(--text-3)}
a.ps-pill,a.ps-pill-more,.ps-mdate{text-decoration:none;color:inherit}
a.ps-pill:hover{background:var(--hover)}
.ps-mdate:hover{background:var(--hover)}
.r4-cal-phone .ps-agenda-day{z-index:3}
.r4-dots-month{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding:8px;gap:2px}
.r4-dow{font-size:12px;font-weight:600;color:var(--text-3);text-align:center;padding:4px 0}
.r4-dcell{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:48px;padding:6px 0;border-radius:var(--r-md);color:var(--text);text-decoration:none}
.r4-dcell b{font-size:15px;line-height:20px;font-weight:600;font-variant-numeric:tabular-nums}
.r4-dcell.out b{color:var(--text-3)}
.r4-dcell.today b{color:var(--accent-text)}
.r4-dcell.is-selected{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent)}
.r4-no-panel{grid-template-columns:minmax(0,1fr)}
/* Weekday columns keep room for a readable name (Fri–Sun still a little wider),
   and the selected day's panel is narrower on a small laptop. */
.r4-cal-laptop .ps-month.weekend{grid-template-columns:minmax(0,1.1fr) repeat(4,minmax(0,1fr)) minmax(0,1.1fr) minmax(0,1.3fr)}
.r4-cal-laptop .ps-month.compact .ps-mcell{padding:5px 4px}
.r4-cal-laptop .ps-pill.two{padding:3px 5px}
@media (max-width:1439px){ .r4-cal-laptop .ps-cal-grid:not(.r4-no-panel){grid-template-columns:minmax(0,1fr) 280px} }
.r4-legend-cap .ps-capbar{display:inline-flex;gap:2px}
.r4-legend-cap .ps-capbar i{width:6px;height:10px;flex:none;border:0;border-radius:2px;background:var(--line)}
.r4-legend-cap .ps-capbar i.on{background:var(--chart-1)}
.r4-cal-laptop .ps-rowlist .ps-row{padding:10px 16px}
.r4-lost{opacity:.65}
.r4-check-answer:empty{display:none}
.r4-designs section+section,.r4-staffing section+section{margin-top:24px}

/* Stage 5A: People, Setup, Records, Footage (prefix r5-) */
@media (min-width:1024px){ .ps-sidebar .r5-rail-only{display:none} }
/* The Setup card and the account menu stay pinned at the bottom of the sidebar when
   its items are taller than the window (the list scrolls under them). */
@media (min-width:768px){
  .ps-sidebar-foot{position:sticky;z-index:2;bottom:calc(-1 * var(--s3));margin-bottom:calc(-1 * var(--s3));padding-bottom:var(--s3);background:var(--surface)}
}
@media (min-width:1024px){
  .ps-sidebar-foot{bottom:calc(-1 * var(--s4));margin-bottom:calc(-1 * var(--s4));padding-bottom:var(--s4)}
}
.r5-muted{opacity:.62}
.r5-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.r5-saved{margin-left:auto}
.ps-card-head [data-saved]{margin-left:auto}
.r5-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s4)}
@media (max-width:767px){ .r5-grid-2{grid-template-columns:minmax(0,1fr)} }
.r5-section-foot{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.r5-details>summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--accent-text);list-style:none;min-height:32px;display:flex;align-items:center;gap:6px}
.r5-details>summary::-webkit-details-marker{display:none}
.r5-details>summary::before{content:"\F285";font-family:bootstrap-icons;font-size:12px;transition:transform var(--t-fast)}
.r5-details[open]>summary::before{transform:rotate(90deg)}
.r5-kv{grid-template-columns:120px minmax(0,1fr)}
@media (max-width:767px){ .r5-kv{grid-template-columns:96px minmax(0,1fr)} }
.r5-switch-form{display:flex;flex-direction:column;gap:6px}
.r5-switch-form .r3-switch,.r5-group-switch .r3-switch{padding:0}
.r5-textbutton{background:none;border:0;padding:0;cursor:pointer;font:inherit;text-decoration:underline;text-underline-offset:2px}
.r5-confirm{display:flex;align-items:flex-start;gap:10px;padding:2px 0;font-size:14px;font-weight:500;cursor:pointer}
.r5-confirm input{margin-top:3px;width:18px;height:18px;accent-color:var(--accent)}
.r5-inline-select{max-width:260px}

/* People */
.r5-filter-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-bottom:12px}
.r5-filter-row .ps-filters{flex:1 1 auto;min-width:0}
/* Phone: the role pills get their own line and scroll sideways; Active/Inactive/All goes under them. */
@media (max-width:767px){
  .r5-filter-row{flex-direction:column;align-items:stretch;gap:var(--s2)}
  .r5-filter-row .ps-filters{flex:none;width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .r5-filter-row .ps-filters::-webkit-scrollbar{display:none}
  .r5-filter-row .ps-seg{align-self:flex-start}
}
.r5-person-row{text-decoration:none;color:inherit}
.r5-person-row:hover{background:var(--hover)}
.r5-person-row.is-off .ps-avatar,.r5-person-row.is-off .ps-row-title{opacity:.6}
.r5-row-chips{margin-top:4px}
.r5-row-phone{white-space:nowrap}
.r5-person-head{margin-bottom:var(--s6)}
.r5-contact-line{font-size:14px;margin-top:6px;overflow-wrap:anywhere}
.r5-head-actions{flex-wrap:wrap;justify-content:flex-end}
.r5-profile-layout{grid-template-columns:176px minmax(0,1fr)}
.r5-card-actions{margin-top:var(--s3);display:flex;gap:var(--s2);flex-wrap:wrap}
.r5-later .ps-card-body{padding-top:var(--s3);padding-bottom:var(--s3)}
@media (max-width:1023px){
  .r5-profile-layout{grid-template-columns:minmax(0,1fr)}
  .r5-anchor-nav{display:none}
}
@media (max-width:767px){
  .r5-person-head{grid-template-columns:56px minmax(0,1fr);gap:var(--s3);margin-bottom:var(--s4)}
  .r5-person-head .ps-avatar{width:56px;height:56px;font-size:20px}
  .r5-head-actions{grid-column:1/-1;justify-content:flex-start}
  .r5-head-actions .ps-btn{flex:1}
}

/* Setup */
.r5-setup-tabs{margin-bottom:var(--s5)}
.r5-save-note{display:inline-flex;align-items:center;gap:6px;font-size:13px}
.r5-setup-page{max-width:880px}
.r5-preview{border:1px dashed var(--line-strong);border-radius:var(--r-md);padding:var(--s3) var(--s4);background:var(--sunken)}
.r5-preview p{margin-top:4px;font-size:14px;line-height:20px;color:var(--text-2)}
@media (max-width:1180px){ .r5-setup-layout{grid-template-columns:minmax(0,1fr)} }
.r5-setup-layout .ps-check-actions .ps-btn{white-space:nowrap}
/* Phone: a step is one tappable row with a chevron; only Up next (and Fix) keep a button, under it. */
.r5-check-link{display:none}
@media (max-width:767px){
  .r5-setup-layout .ps-check{grid-template-columns:28px minmax(0,1fr) auto;row-gap:8px;position:relative}
  .r5-setup-layout .ps-check-actions{display:none}
  .r5-setup-layout .ps-check.is-next .ps-check-actions,.r5-setup-layout .ps-check.has-fix .ps-check-actions{display:block;grid-column:2/-1;position:relative;z-index:1}
  .r5-check-link,.r5-check-owner{display:flex;align-items:center;color:var(--text-3);text-decoration:none;grid-column:3;grid-row:1}
  .r5-check-link::after{content:"";position:absolute;inset:0}
}
.r5-table-wrap{overflow-x:auto}
.r5-price-table{min-width:560px}
.r5-price-table td,.r5-price-table th{vertical-align:middle}
.r5-price-table .r5-pos{width:84px}
.r5-phone-prices{display:block;margin-top:2px;overflow-wrap:anywhere}
/* Phone: each package lists its prices under its name, so no column hides off-screen. */
@media (max-width:767px){
  .r5-price-table{min-width:0;width:100%}
  .r5-price-table .r5-price-col{display:none}
  .r5-price-table .r5-pos{width:60px}
  .r5-price-table .r5-order{width:44px;padding:6px 4px!important}
  .r5-price-table td,.r5-price-table th{padding-left:8px;padding-right:8px}
  .r5-package{min-width:0}
  .r5-package img,.r5-package .r5-noimg{display:none}
}
.r5-order{min-height:36px!important;padding:6px 8px!important;width:64px}
.r5-group-row th{background:var(--sunken);font-size:12px;color:var(--text-3);text-transform:none}
.r5-package{display:flex;align-items:center;gap:var(--s3);min-width:220px}
.r5-package img,.r5-noimg{width:56px;height:42px;border-radius:var(--r-sm);object-fit:cover;flex:none;background:var(--sunken);display:flex;align-items:center;justify-content:center;color:var(--text-3)}
.r5-playbook{text-decoration:none;color:inherit;align-items:flex-start}
.r5-playbook:hover{background:var(--hover)}
.r5-timeline{display:block;font-size:13px;line-height:18px;color:var(--text-2);margin-top:4px}
.r5-timeline .bi{font-size:11px;color:var(--text-3);margin:0 2px}
.r5-booths{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:flex-end}
.r5-booths .ps-field{width:140px}
.r5-checklist-pb{border-top:1px solid var(--line)}
.r5-checklist-pb:first-of-type{border-top:0}
.r5-checklist-pb>summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);cursor:pointer;list-style:none;min-height:48px}
.r5-checklist-pb>summary::-webkit-details-marker{display:none}
.r5-flat-checklist{border:0;border-radius:0;border-top:1px solid var(--line)}
.r5-flat-checklist .ps-check{min-height:56px}
.r5-message{padding:var(--s3) var(--s4)}
.r5-message-head{margin-bottom:var(--s2)}
.r5-scope-row{display:grid;grid-template-columns:minmax(90px,160px) minmax(0,1fr) auto;gap:var(--s3);align-items:center;min-height:40px;font-size:14px}
.r5-scope-row+.r5-scope-row{border-top:1px dashed var(--line)}
.r5-scope-name{font-weight:500}
@media (max-width:767px){ .r5-scope-row{grid-template-columns:minmax(0,1fr) auto} .r5-scope-state{grid-column:1;grid-row:2;padding-bottom:6px} .r5-scope-row .ps-btn{grid-row:1/3;grid-column:2} }
.r5-form-row{align-items:center}
@media (max-width:767px){ .r5-form-row{grid-template-columns:minmax(0,1fr)} }

/* Account */
.r5-alert-group{padding:var(--s3) var(--s4);border-top:1px solid var(--line)}
.r5-group-switch .ps-grow{font-weight:600;color:var(--text)}
.r5-group-switch .ps-grow small{font-weight:500}
.r5-advanced{margin-top:6px}
.r5-advanced form{padding:8px 0 0 12px;border-left:2px solid var(--line);margin-left:4px}

/* Records */
.r5-log-filters{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr)) auto;gap:var(--s3);align-items:end}
.r5-log-filters .r5-f-actions{display:flex;gap:var(--s2)}
.r5-log-filters .r5-f-day{min-width:0}
.r5-log-filters.r5-msg-filters{grid-template-columns:minmax(0,2fr) repeat(var(--fields,3),minmax(0,1fr)) auto}
@media (max-width:1023px){ .r5-log-filters{grid-template-columns:repeat(2,minmax(0,1fr))} .r5-log-filters .r5-f-q{grid-column:1/-1} }
@media (max-width:767px){ .r5-log-filters{grid-template-columns:minmax(0,1fr)} }
.r5-log-row>summary{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding:var(--s3) var(--s4);cursor:pointer;list-style:none}
.r5-log-row>summary::-webkit-details-marker{display:none}
.r5-log-row>summary:hover{background:var(--hover)}
.r5-log-row .ps-q-icon{width:32px;height:32px;font-size:15px}
.r5-log-end{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.r5-when{font-size:12px;white-space:nowrap}
.r5-log-body{padding:0 var(--s4) var(--s4) calc(var(--s4) + 44px);display:flex;flex-direction:column;gap:var(--s3)}
.r5-body-text{white-space:pre-wrap;font:400 13px/19px var(--font);color:var(--text-2);background:var(--sunken);border-radius:var(--r-md);padding:var(--s3);margin:0;overflow-wrap:anywhere}
@media (max-width:767px){
  .r5-log-row>summary{grid-template-columns:32px minmax(0,1fr)}
  .r5-log-end{grid-column:2;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px}
  .r5-log-body{padding-left:var(--s4)}
}
.r5-cols{grid-template-columns:minmax(0,1fr) 340px}
.r5-action{align-items:flex-start}
.r5-action-summary{display:block;font-size:14px;line-height:20px;overflow-wrap:anywhere;margin-top:2px}
.r5-connection form{margin:0}

/* Footage */
.r5-footage-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s3)}
@media (max-width:1279px){ .r5-footage-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:1023px){ .r5-footage-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:767px){ .r5-footage-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)} }
.r5-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;min-width:0}
.r5-tile-media{position:relative;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;border:0;padding:0;background:var(--sunken);cursor:pointer;overflow:hidden}
.r5-tile-media img{width:100%;height:100%;object-fit:cover;display:block;position:relative}
/* The file-type tile sits under the thumbnail, so losing the thumbnail uncovers it. */
.r5-tile-file{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--text-3);font:600 11px/1 var(--font);letter-spacing:.05em}
.r5-tile-gone{font:500 11px/1.3 var(--font);letter-spacing:0;color:var(--text-3)}
.r5-tile-file .bi{font-size:28px}
.r5-tile-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:34px;background:rgba(12,10,9,.18);pointer-events:none}
.r5-tile-badge{position:absolute;left:6px;top:6px}
.r5-tile-meta{padding:8px 10px;min-width:0}
.r5-tile-name{display:block;font-size:13px;line-height:18px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r5-tile-sub{display:block;font-size:12px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r5-lightbox{position:fixed;inset:0;z-index:95;background:rgba(12,10,9,.985);display:flex;align-items:center;justify-content:center}
.r5-lightbox[hidden]{display:none}
/* The bar sits over whatever the page had at the top. Without its own
   backdrop the breadcrumb read through it. */
.r5-lb-bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:calc(env(safe-area-inset-top) + 10px) 12px 10px;background:rgba(12,10,9,.96);
  box-shadow:0 12px 24px rgba(12,10,9,.96)}
.r5-lb-caption{flex:1;min-width:0;color:#fff;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r5-lb-more .r1-pop-menu{right:0;left:auto;min-width:240px}
.r5-lb-stage{max-width:92vw;max-height:80vh;display:flex;align-items:center;justify-content:center}
.r5-lb-stage img,.r5-lb-stage video{max-width:92vw;max-height:80vh;border-radius:var(--r-md);background:#000}
.r5-lb-wait{color:#fff;max-width:360px;text-align:center}
.r5-lb-step{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(250,250,249,.14);color:#fff;font-size:20px;cursor:pointer}
.r5-lb-step.prev{left:12px} .r5-lb-step.next{right:12px}
[data-save-button][hidden],[data-saved][hidden]{display:none!important}

/* ---------------------------------------------------------------------------
   Stage 5B: gear (Equipment, Supplies, the after-event report and the issue
   form). The components themselves are team.css §21; these are the small
   additions the live pages need.
   --------------------------------------------------------------------------- */
.r5b-note{padding:10px var(--s4);border-top:1px solid var(--line);font-size:13px;line-height:18px;color:var(--text-2)}
.r5b-plain{display:block;color:var(--text)}
.r5b-plain:hover{text-decoration:underline}
.r5b-issue-cols{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:var(--s5);align-items:start}
@media (max-width:1279px){ .r5b-issue-cols{grid-template-columns:minmax(0,1fr)} }
.r5b-detail .ps-thumbs{grid-template-columns:repeat(3,1fr)}
.r5b-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px var(--s4);align-items:baseline;padding:var(--s3) var(--s4);font-size:14px;line-height:20px}
.r5b-kv dt{color:var(--text-2)} .r5b-kv dd{margin:0;font-weight:600}
.r5b-quote{margin:0;padding:var(--s3) var(--s4);border-left:3px solid var(--line-strong);font-size:14px;line-height:20px;color:var(--text-2)}
.r5b-affect{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding:10px var(--s4);font-size:14px;line-height:20px}
.r5b-affect+.r5b-affect{border-top:1px solid var(--line)}
.r5b-affect.a{background:var(--a-bg)}
.r5b-note-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:var(--s3);align-items:start;padding:10px var(--s4);font-size:14px;line-height:20px}
.r5b-note-row+.r5b-note-row{border-top:1px solid var(--line)}
/* Supplies */
.r5b-supply-cols{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:var(--s5);align-items:start}
@media (max-width:1279px){ .r5b-supply-cols{grid-template-columns:minmax(0,1fr)} }
.r5b-big{font-size:32px;line-height:38px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.r5b-bars{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--s3);align-items:end;height:110px;padding:var(--s4)}
.r5b-bars li{list-style:none;display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:4px;text-align:center;font-size:12px;color:var(--text-2)}
.r5b-bars i{display:block;background:var(--text);border-radius:3px 3px 0 0;min-height:2px}
/* The report and issue forms (staff) */
.r5b-form-card{display:flex;flex-direction:column;gap:var(--s4);padding:var(--s4)}
.r5b-chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.r5b-chip-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1.5px solid var(--line-strong);border-radius:var(--r-pill);background:var(--surface);color:var(--text);font:600 15px/1 var(--font);cursor:pointer}
.r5b-chip-btn.is-selected{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.r5b-chip-btn small{font-weight:500;color:var(--text-3)}
.r5b-sticky{padding:var(--s4) 0 calc(env(safe-area-inset-bottom) + var(--s4));border-top:1px solid var(--line)}
.r5b-effect{display:flex;gap:8px;align-items:flex-start;padding:10px var(--s4);border-radius:var(--r-md);background:var(--a-bg);color:var(--a-fg);font-size:14px;line-height:20px;margin-bottom:var(--s3)}
.r5b-effect.n{background:var(--n-bg);color:var(--n-fg)}
.r5b-todo{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.r5b-todo li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding:10px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line)}
.r5b-todo .n{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line-strong);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--text-2)}
.r5b-todo li.done .n{background:var(--s-bg);color:var(--s-fg);border-color:var(--s-bg)}
.ps-runsheet.night .r5b-todo li{background:#181513;border-color:#332d27}
/* The radio behind a paper preset, a severity card, a kit chip or All good /
   Something's wrong. It is taken out of the layout but NOT out of the tab order
   or the screen reader: display:none would do both, leaving a radiogroup whose
   answers nobody on a keyboard, a switch or VoiceOver could reach. Same pattern
   as .r3-choice above; the label it sits in takes the focus ring. */
.r5b-hide{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.ps-levels label,.ps-sev,.r5b-chip-btn,.ps-answer label.r5b-answer{position:relative}
.ps-levels label:has(input:focus-visible),.ps-sev:has(input:focus-visible),
.r5b-chip-btn:has(input:focus-visible),.ps-answer label.r5b-answer:has(input:focus-visible){box-shadow:var(--focus-ring)}
/* [hidden] must win over the display rules above (the quick-fill chips and the
   "where is it now" question are hidden until they apply). */
.r5b-chip-btn[hidden],.ps-field[hidden],.ps-card[hidden]{display:none!important}
/* The report's "Something's wrong" step folds away while the answer is All good.
   The checked radio decides it, not JavaScript, so the step is there either way
   (the script still hides and shows it as the answer changes). */
[data-report]:has(input[name="all_good"][value="yes"]:checked) [data-issue-form]{display:none}
.r5b-photo-add{display:inline-flex;align-items:center;gap:8px;min-height:64px;padding:0 18px;border:1.5px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--sunken);color:var(--text-2);font:600 15px/1 var(--font);cursor:pointer}
.r5b-photo-add .bi{font-size:20px}
.r5b-photo-add input{display:none}
.r5b-photo-names{font-size:13px;line-height:18px;color:var(--text-2)}
/* "All good / Something's wrong" uses the answer buttons as radio cards. */
.ps-answer label.r5b-answer{min-height:56px;border-radius:var(--r-lg);border:1.5px solid var(--line-strong);background:var(--surface);font:600 16px/1 var(--font);color:var(--text);display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.ps-answer label.r5b-answer.yes.is-selected{background:var(--s-solid);border-color:var(--s-solid);color:#fff}
.ps-answer label.r5b-answer.no.is-selected{background:var(--text);border-color:var(--text);color:var(--surface)}
/* The Equipment badge goes red once a blocking issue is inside 7 days (2.2). */
.ps-count.danger{background:var(--d-bg);color:var(--d-fg)}
/* The report's number rows: the label takes the room, the stepper stays 172px. */
.r5b-form-card .ps-stepper{width:172px;flex:none}
.r5b-form-card .ps-between{align-items:center}
.r5b-form-card .ps-between .ps-field{flex:1;min-width:0}

/* ---------------------------------------------------------------------------
   Redesign Stage 6 (r6-): Money & Insights and Pay the team (design spec 7.6,
   7.12, 10). The components themselves (.ps-kpi, .ps-bars, .ps-pay-person,
   .ps-bulkbar, .ps-profit-strip, .ps-defs) already live in team.css.
   --------------------------------------------------------------------------- */
.r6-tabbar{background:var(--surface);border-bottom:1px solid var(--line);padding:0 16px}
@media (min-width:768px){ .r6-tabbar{padding:20px 32px 0} }
.r6-tabbar .ps-tabs{border-bottom:0;margin-top:8px}
/* "After crew pay" tiles carry two or three lines of explanation each, so they
   stack full width on a phone (design spec 10.3) instead of clipping. */
.r6-money .ps-kpis.r6-kpis-3{grid-template-columns:1fr}
@media (min-width:768px){ .r6-money .ps-kpis.r6-kpis-3{grid-template-columns:repeat(3,minmax(0,1fr))} }
.r6-defs{grid-template-columns:1fr;gap:2px;padding:12px 16px;background:var(--sunken);border-radius:var(--r-md)}
.r6-defs dd{margin:0 0 8px}
.r6-defs dd:last-child{margin-bottom:0}
/* The custom-range form sits under the period buttons and only shows on laptop
   (on phone the buttons are enough, and a date pair would wrap badly). */
/* The period buttons don't fit a 390px phone, so they scroll sideways like the
   tabs above them (the active one is scrolled into view on load). */
.r6-filterbar .ps-seg{max-width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;justify-content:flex-start}
.r6-filterbar .ps-seg::-webkit-scrollbar{display:none}
.r6-filterbar .ps-seg > *{flex:0 0 auto}
/* The phone title block already carries the tracking label, so the filter bar's
   copy only shows from tablet up (it read twice on a phone). */
@media (max-width:767px){ .r6-filterbar .ps-since-label{display:none} }
/* Receivables: Remind / Record payment / Copy link sit on the row itself. */
.r6-inv-actions{white-space:nowrap}
.r6-inv-actions > *{margin-left:10px}
.r6-inv-actions > :first-child{margin-left:0}
.r6-crew-filters .ps-seg{max-width:100%;min-width:0;overflow-x:auto;scrollbar-width:none;justify-content:flex-start}
.r6-crew-filters .ps-seg::-webkit-scrollbar{display:none}
.r6-crew-filters .ps-seg > *{flex:0 0 auto}
.r6-custom{font-size:13px;color:var(--text-2)}
.r6-custom > summary{display:inline-flex;align-items:center;gap:6px;min-height:36px;cursor:pointer;
  color:var(--link);font-weight:600;list-style:none}
.r6-custom > summary::-webkit-details-marker{display:none}
.r6-custom form{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.r6-custom .ps-input{width:150px;min-height:36px;font-size:14px}
/* Pay the team: the list, then the summary column on laptop. */
.r6-crew-cols{display:grid;gap:16px}
@media (min-width:1024px){ .r6-crew-cols{grid-template-columns:minmax(0,1fr) 340px;align-items:start} }
.r6-crew .ps-pay-line{align-items:flex-start}
.r6-line-open{display:block;width:100%;text-align:left;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.r6-line-open:hover .ps-row-title{text-decoration:underline}
.r6-plain{color:inherit;text-decoration:none}
.r6-plain:hover{text-decoration:underline}
.r6-amount{font-weight:600;white-space:nowrap}
.r6-report-missing{color:var(--a-fg);font-weight:600}
.r6-undo{align-items:center}
.r6-undo form{margin:0}
/* The bulk bar is sticky above the phone tab bar and the laptop's bottom edge,
   and its "how and when" line wraps instead of being cut off on a phone. */
.r6-crew .ps-bulkbar{position:sticky;bottom:12px;z-index:25}
@media (max-width:767px){
  .r6-crew .ps-bulkbar{bottom:calc(var(--tabbar-h, 64px) + 12px);flex-wrap:wrap;row-gap:8px}
  .r6-crew .ps-bulkbar .ps-grow{flex:1 0 100%}
  .r6-crew .ps-bulkbar .ps-grow .ps-row-sub{white-space:normal;color:var(--night-text-2);font-size:12px;
    line-height:16px}
  .r6-crew .ps-bulkbar .ps-btn{flex:1 1 auto}
}
.r6-crew .ps-bulkbar .ps-row-sub{color:var(--night-text-2)}
/* The Person / Month / Export toolbar sits on one line beside the segments. */
.r6-crew-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.r6-crew-tools .ps-select{width:auto;min-width:130px;max-width:190px}
/* The Person box sits beside the Month select and is the same size. */
.r6-crew-tools .ps-input-wrap{flex:0 0 auto;width:190px}
.r6-crew-tools .ps-input-wrap .ps-input{min-height:36px;font-size:14px}
/* Recent payouts: avatar · who and when · amount, on one line. */
.r6-recent{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:10px var(--s4);border-top:1px solid var(--line);font-size:14px}
.r6-recent:first-child{border-top:0}
/* Export: icon · name and what's in it · Download, on one line. */
.r6-export-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:var(--s3);align-items:center;
  padding:var(--s3) var(--s4);border-top:1px solid var(--line)}
.r6-export-row:first-child{border-top:0}
@media (max-width:520px){
  .r6-export-row{grid-template-columns:40px minmax(0,1fr);row-gap:8px}
  .r6-export-row .ps-btn{grid-column:2}
}
/* A table with more than three columns scrolls inside its own card rather than
   pushing the whole page sideways on a phone. */
/* A 1fr grid column is min-width:auto by default, so a wide table inside it
   stretches the whole page; every Money column is allowed to shrink instead. */
.r6-money .ps-grid-2-1 > *,.r6-money .ps-grid-3 > *,.r6-crew-cols > *{min-width:0}
.r6-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.r6-table-wrap > .ps-table{width:100%;min-width:520px}
@media (min-width:768px){ .r6-table-wrap > .ps-table{min-width:0} }
.r6-phone-only{display:block}
@media (min-width:768px){ .r6-phone-only{display:none} }
/* Insights: a label, a bar and the number, so a funnel reads without colour. */
.r6-funnel{display:flex;flex-direction:column;gap:6px}
.r6-funnel-row{display:grid;grid-template-columns:minmax(96px,1.1fr) minmax(0,2fr) 76px 64px;gap:10px;align-items:center;font-size:13px;line-height:18px}
.r6-funnel-row:has(.r6-funnel-num:only-of-type){grid-template-columns:minmax(96px,1.1fr) minmax(0,2fr) 48px}
.r6-funnel-label{color:var(--text-2);font-weight:500}
.r6-funnel-bar{display:block;height:10px;border-radius:var(--r-pill);background:var(--n-bg);overflow:hidden}
.r6-funnel-bar i{display:block;height:100%;background:var(--chart-1);border-radius:var(--r-pill)}
.r6-funnel-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.r6-funnel-num small{color:var(--text-3)}
.r6-funnel-days{white-space:nowrap;text-align:right}
@media (max-width:767px){
  .r6-funnel-row{grid-template-columns:minmax(80px,1fr) minmax(0,1.4fr) 62px;row-gap:2px}
  .r6-funnel-days{grid-column:1 / -1;text-align:left}
}
/* Crew pay by month reuses the chart series; Owed sits between paid and scheduled. */
.ps-bar i.pay-owed{background:var(--chart-pay);opacity:.55;border-radius:0}
.ps-legend i.pay-owed{background:var(--chart-pay);opacity:.55}
/* Held pay is parked, so it is stone rather than any of the pay colours. */
.ps-bar i.pay-held{background:var(--chart-2);opacity:.6;border-radius:0}
.ps-legend i.pay-held{background:var(--chart-2);opacity:.6}

/* ---- Round 5 proof fixes: the bulk ticks on Crew pay ---- */
/* The tick boxes were bare 18x18 inputs in a 24px grid column: aiming at the
   middle and allowing for a thumb, 25 of 49 landings reached one and the other
   24 hit the inert row behind it. At 770 people these are the owner's bulk
   "Mark paid" path (owner decision 4), so the box gets the label the People
   page's switches already have: the whole cell is the target, the layout does
   not move, and the row keeps its own tap (which opens the payout sheet). */
.ps-tick{display:flex;align-items:center;justify-content:center;align-self:stretch;cursor:pointer;border-radius:var(--r-sm)}
.ps-tick input{margin:0}
.ps-pay-head>.ps-tick{margin:calc(-1*var(--s3)) 0;min-height:44px}
.ps-pay-line>.ps-tick{margin:-10px 0;min-height:40px}
@media (max-width:767px){
  /* A real 44px column and a 44px row, so the target is 44x44 and nothing of the
     neighbouring row is inside it. The title beside it truncates already. */
  .ps-pay-head{grid-template-columns:44px 36px minmax(0,1fr) auto}
  .ps-pay-line{grid-template-columns:44px minmax(0,1fr) auto;padding:12px var(--s3)}
  .ps-pay-line>.ps-tick{margin:-12px 0;min-height:44px}
}

/* ---- Round 6: a long chip in a card head no longer pushes the page sideways ---- */
/* .ps-chip is white-space:nowrap on purpose — a status should never break in
   two — and .ps-card-head is a nowrap flex row, so a chip that cannot shrink
   below its own min-content pushes the page sideways.
   Measured in chrome-headless-shell at 390x844 (Round 7, and corrected there):
   Setup › Connections scrolls by exactly 6px, on the DAY-ONE backup chip —
   "No backup yet. It runs every night at 3:20 AM.", min-content 291.7px —
   inside a card head with 324px of content. The "Last backup Sat, Sep 19,
   11.4 MB · 14 kept" sentence (265.5px) does NOT overflow: the heading shrinks
   to its own min-content, 59.5px, and the pair fits. What that costs is the
   heading, crushed into a three-line column 59.5px wide.
   The two halves do different jobs, and only one of them removes the 6px:
   white-space:normal on the chip is what stops the overflow; flex-wrap:wrap is
   what keeps the heading on one line and drops the chip underneath it. Keeping
   both is deliberate. flex-wrap does NOT "change nothing until the items do not
   fit": measured over 56 card heads on 28 pages it moves six, five of which fit
   before (Setup › Connections ×2, Money › Payments, Money › Insights, Setup ›
   Sales, which grows 69→99px) — and each of those five reads better, because
   the heading stops being squeezed into a narrow column. */
@media (max-width:767px){
  .ps-card-head{flex-wrap:wrap}
  .ps-card-head>.ps-chip{max-width:100%;white-space:normal}
}

/* The changeover page (Setup › The changeover). Two small layouts and nothing
   else: a grid of "what came across" counts, and the two-column "carries on /
   does not happen" pair. Both collapse to one column on a phone, so neither can
   push the page sideways. */
.r6-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.r6-facts>div{background:var(--sunken);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.r6-facts b{display:block;font-size:20px;line-height:26px;font-variant-numeric:tabular-nums}
.r6-facts small{display:block;color:var(--text-2);font-size:13px;line-height:18px}
.r6-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:767px){.r6-two{grid-template-columns:1fr}}

/* ==========================================================================
   The one page workspace: the booking page (prefix r6-).

   A fixed desk on the left and a work pane on the right. The page itself never
   scrolls; each column scrolls on its own, so the top bar, the booking header
   and the tab row never leave the screen. On a phone the desk becomes the first
   segment and everything is one column.
   ========================================================================== */

/* Phone first: one column, the segment row under the header. */
.r6-desk,.r6-pane{min-width:0}
.r6-shell{display:block;padding:0 var(--gutter) var(--s6)}
.r6-block{border-top:1px solid var(--line);padding:var(--s4) 0}
.r6-shell .r6-block:first-child{border-top:0;padding-top:var(--s3)}
.r6-block-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  font:600 12px/16px var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);
  margin-bottom:var(--s3);background:none;border:0;padding:0;width:100%;text-align:left}
button.r6-block-head{cursor:pointer}
button.r6-block-head:hover{color:var(--text-2)}

/* NEXT: the one thing to do. The page's only gold primary. */
.r6-next{border:1px solid var(--accent);border-radius:var(--r-lg);background:var(--accent-soft);padding:var(--s4)}
.r6-next .r6-block-head{color:var(--accent-text);margin-bottom:6px}
.r6-next p{margin:0 0 var(--s3);font-size:15px;line-height:21px;color:var(--text);font-weight:500}
.r6-next .ps-btn{width:100%}
.r6-next.is-clear{border-color:var(--line);background:var(--sunken)}
.r6-next.is-clear .r6-block-head{color:var(--text-3)}
.r6-next.is-clear p{margin-bottom:0;color:var(--text-2);font-weight:500}

/* MONEY, CLIENT, DAYS, LINK rows. */
.r6-line{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  font-size:14px;line-height:20px;padding:3px 0}
.r6-line b{font-weight:600;font-variant-numeric:tabular-nums}
.r6-line span{color:var(--text-2)}
.r6-line.late b,.r6-line.late span{color:var(--d-fg)}
.r6-row{display:flex;align-items:center;gap:var(--s2);width:100%;min-height:36px;padding:0 var(--s2) 0 0;
  border:0;background:none;color:var(--text);font:500 14px/20px var(--font);text-align:left;cursor:pointer;
  border-radius:var(--r-sm);text-decoration:none}
.r6-row:hover{background:var(--hover)}
.r6-row .bi{color:var(--text-3);flex:none;font-size:15px}
.r6-row .ps-grow{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r6-row .r6-chev{margin-left:auto;color:var(--text-3);font-size:12px;flex:none}
.r6-day{padding:var(--s2) 0}
.r6-day+.r6-day{border-top:1px solid var(--line)}
.r6-day-sub{display:flex;align-items:baseline;gap:6px;font-size:13px;line-height:19px;color:var(--text-2);
  padding-left:2px}
.r6-day-sub em{font-style:normal;color:var(--text-3)}
.r6-warn{display:flex;gap:6px;align-items:flex-start;font-size:13px;line-height:18px;color:var(--a-fg);
  background:none;border:0;padding:2px;text-align:left;cursor:pointer;width:100%}
.r6-warn.d{color:var(--d-fg)}
.r6-warn:hover{text-decoration:underline}
.r6-link-box{display:flex;align-items:center;gap:var(--s2)}
.r6-link-box code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:500 13px/18px var(--font);color:var(--text-2)}

/* The segment row on a phone: the desk is the first of six. It wraps instead of
   scrolling, because Files began 401px into a 358px box and a person who has
   never seen this app cannot swipe a tab they cannot see. */
.r6-segs{display:flex;flex-wrap:wrap;gap:0 var(--s4);
  border-bottom:1px solid var(--line);background:var(--surface);z-index:12}
.r6-segs a{display:inline-flex;align-items:center;gap:6px;min-height:40px;font-size:14px;font-weight:500;
  color:var(--text-2);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;
  text-decoration:none}
.r6-segs a.is-active{color:var(--text);font-weight:600;border-color:var(--accent)}
.r6-segs-wrap{position:sticky;top:0;z-index:12;background:var(--surface);padding:0 var(--gutter);margin:0}
/* Whose page this is, in the strip that never scrolls away. Tapping a tab used
   to put the pane at the top of the screen with the name 723px above it. */
.r6-segs-who{display:flex;align-items:center;gap:var(--s2);min-width:0;padding:var(--s2) 0 2px;
  font-size:14px;line-height:18px;color:var(--text)}
.r6-segs-who b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* The header: three lines and two controls, and it never scrolls away. */
.r6-head{background:var(--surface);border-bottom:1px solid var(--line);padding:var(--s3) var(--gutter)}
.r6-head h1{font-size:20px;line-height:26px;font-weight:600;letter-spacing:-.015em;margin:0}
.r6-head-facts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;
  color:var(--text-2);font-size:13px;line-height:18px}
.r6-head-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4)}
.r6-head-actions{display:flex;gap:var(--s2);flex:none}

/* The work pane. */
.r6-tabs{display:flex;gap:var(--s5);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;
  background:var(--canvas);position:sticky;top:0;z-index:10}
.r6-tabs::-webkit-scrollbar{display:none}
.r6-tabs a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:500;
  color:var(--text-2);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;text-decoration:none}
.r6-tabs a.is-active{color:var(--text);font-weight:600;border-color:var(--accent)}
.r6-tabs .r6-wide-btn{margin-left:auto;align-self:center}
.r6-pane{padding:var(--s4) 0 var(--s6)}

/* Messages: one thread, bubbles both ways, the composer docked at the foot. */
.r6-thread{display:flex;flex-direction:column;gap:var(--s3);padding-bottom:var(--s4)}
.r6-bubble{max-width:min(560px,86%);border-radius:16px 16px 16px 6px;border:1px solid var(--line);
  background:var(--surface);padding:10px 14px;align-self:flex-start}
.r6-bubble.out{align-self:flex-end;border-radius:16px 16px 6px 16px;background:var(--sunken)}
.r6-bubble-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  font-size:13px;line-height:18px;margin-bottom:2px}
.r6-bubble-head b{font-weight:600}
.r6-bubble-head small{color:var(--text-3);white-space:nowrap}
.r6-bubble p{margin:0;font-size:14px;line-height:20px;white-space:pre-line;overflow-wrap:anywhere}
.r6-bubble-subject{font-size:14px;line-height:20px;font-weight:600;margin-bottom:2px;overflow-wrap:anywhere}
.r6-bubble p.clamp{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.r6-bubble.failed{border-color:var(--d-dot)}
.r6-more{background:none;border:0;padding:2px 0 0;font:600 13px/18px var(--font);color:var(--accent-text);cursor:pointer}
.r6-act{display:flex;align-items:baseline;gap:var(--s3);font-size:13px;line-height:18px;color:var(--text-2);
  padding:2px 0;background:none;border:0;width:100%;text-align:left;font-family:var(--font)}
.r6-act time{flex:none;width:64px;color:var(--text-3);font-variant-numeric:tabular-nums}
button.r6-act{cursor:pointer}
button.r6-act:hover .r6-act-text{text-decoration:underline}
/* The day divider a messaging app draws, and the chapter divider the booking
   earns when it becomes a booking. */
.r6-day,.r6-milestone{display:flex;align-items:center;gap:var(--s3);margin:var(--s3) 0 0;
  font-size:11px;letter-spacing:.09em;color:var(--text-3)}
.r6-day::before,.r6-day::after,.r6-milestone::before,.r6-milestone::after{content:"";flex:1;border-top:1px solid var(--line)}
.r6-day span{text-transform:uppercase}
.r6-milestone{margin:var(--s4) 0;color:var(--text-2)}
.r6-milestone span{font-weight:600;letter-spacing:.34em}
.r6-milestone::before,.r6-milestone::after{border-top-color:var(--text-3);opacity:.5}
/* An email the app wrote and sent: one slim line on our side, about a third the
   height of a bubble, no fill. */
/* An email we sent sits on our side, like any outgoing message. Only the
   things that HAPPENED are centred (.r6-quiet). */
.r6-pillwrap{display:flex;justify-content:flex-end}
.r6-pill{max-width:min(560px,86%);border:1px solid var(--line);border-radius:12px;padding:6px 12px;
  font-size:13px;line-height:18px;color:var(--text-2);background:none}
.r6-pill.failed{border-color:var(--d-dot)}
.r6-pill-line{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap}
.r6-pill-what{flex:1;min-width:0;overflow-wrap:anywhere}
.r6-pill-line time{flex:none;color:var(--text-3);font-variant-numeric:tabular-nums}
.r6-pill-tail{flex:1 0 100%;color:var(--text-3);font-size:12px;line-height:17px}
.r6-pill .r6-unfold{border-top:1px solid var(--line);margin-top:6px;padding-top:6px;text-align:left}
.r6-pill p{margin:0;font-size:14px;line-height:20px;color:var(--text-1);white-space:pre-line;overflow-wrap:anywhere}
.r6-pill p.clamp{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
/* Something that happened: one sentence, centred, with the clock at the right
   edge of the row the way a chat app writes it. Centred is what says at a
   glance that this row is not somebody talking. */
.r6-quiet{padding:2px 0}
/* Dead centre, and it stays centred whatever the clock is: the two ends are
   `flex:1 1 0`, so the middle lands in the middle of the thread and not in the
   middle of what the clock left over. */
.r6-quiet-row{display:flex;align-items:baseline;gap:var(--s2)}
.r6-quiet-row::before{content:"";flex:1 1 0;min-width:0}
.r6-quiet-mid{flex:0 1 auto;min-width:0;display:inline-flex;align-items:baseline;gap:var(--s2);
  flex-wrap:wrap;justify-content:center;text-align:center}
.r6-quiet-at{flex:1 1 0;text-align:right;white-space:nowrap;font-size:12px;line-height:18px;
  color:var(--text-3);font-variant-numeric:tabular-nums}
/* Two classes, because team.css resets `.ps p{margin:0}` and one class loses to
   it. The row was 560px wide in a 780px thread with both margins killed, so it
   sat flush left: centred text inside a block pinned to the left edge, which
   reads as left aligned and is what he saw. */
.r6-quiet .r6-quiet-words{margin:0;font-size:13px;line-height:18px;color:var(--text-2);
  overflow-wrap:anywhere}
.r6-quiet.is-step .r6-quiet-words{color:var(--text-3)}
.r6-quiet .r6-quiet-sub{margin:2px auto 0;max-width:min(560px,92%);text-align:center;
  font-size:12px;line-height:17px;color:var(--text-3);overflow-wrap:anywhere}
/* A fold opens in place and pushes the thread down. Never a sheet: a sheet
   would cover the conversation he is reading it against. */
.r6-quiet .r6-unfold{max-width:min(560px,92%);margin:6px auto 0;border:1px solid var(--line);border-radius:12px;
  padding:10px 14px;text-align:left;background:var(--surface)}
/* View details: labelled rows, a column of labels he can read down. Not prose,
   which is what the sentence above it stopped being. */
.r6-details{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px var(--s3);margin:0;
  font-size:13px;line-height:18px}
.r6-details dt{color:var(--text-3);white-space:nowrap}
.r6-details dd{margin:0;color:var(--text-1);overflow-wrap:anywhere}
.r6-details+.ps-btn,.r6-details+.r6-bubble-subject{margin-top:var(--s3)}
.r6-open{font-size:13px;white-space:nowrap}
.r6-showsteps{font-size:13px;white-space:nowrap}
.r6-composer{border-top:1px solid var(--line);background:var(--canvas);padding:var(--s3) 0 0}
/* Phone: the box clears the app's own tab bar, so Send is never under it. */
@media (max-width:1023px){ .r6-composer{padding-bottom:calc(var(--tabbar-h) + 16px)} }
/* Phone: 44 characters is all there is, so a control drops to its own line and
   becomes a full-width tap target instead of being cut. */
@media (max-width:640px){
  .r6-pill{max-width:92%;padding:8px 12px}
  .r6-pill-line{flex-wrap:wrap}
  .r6-pill-what{flex:1;order:0}
  .r6-pill-line time{order:1}
  .r6-pill-tail{order:2}
  .r6-pill .r6-open{order:3;flex:1 0 100%;justify-content:flex-end;min-height:44px}
  .r6-quiet .r6-open,.r6-quiet .r6-unfold{max-width:100%}
  .r6-quiet .r6-open{display:inline-flex;align-items:center;min-height:44px}
  /* Still dead centre on a phone: he asked for these in the middle twice, and
     a phone is where he reads them. The two ends stay equal, so the sentence
     keeps the middle of the thread while the clock keeps the right edge, and a
     sentence too long for 44 characters just takes the width and wraps. */
  .r6-quiet .r6-quiet-sub{max-width:100%}
  .r6-details{grid-template-columns:1fr;gap:0}
  .r6-details dt{margin-top:6px}
  .r6-details dt:first-child{margin-top:0}
  .r6-filters{align-items:flex-start;flex-direction:column}
}
.r6-composer-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  font-size:13px;line-height:18px;color:var(--text-2);margin-bottom:6px}
.r6-composer textarea{width:100%;min-height:96px;resize:vertical}
.r6-composer-foot{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s2)}
.r6-composer-foot .r6-when{margin-left:auto;font-size:12px;color:var(--text-3)}
.r6-ai{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:var(--accent-text)}
/* Which way a message went, what came attached, and the reply she quoted. */
.r6-tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;line-height:16px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--text-3)}
/* Attachment chips inside a bubble. Named apart from the Files pane below:
   one stylesheet cannot hold two meanings of .r6-file. */
.r6-clips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.r6-clip{display:inline-flex;align-items:center;gap:5px;max-width:100%;border:1px solid var(--line);
  border-radius:8px;padding:3px 8px;font-size:13px;line-height:18px;color:var(--text-1);background:var(--canvas);
  text-decoration:none;overflow-wrap:anywhere}
.r6-clip:hover{border-color:var(--accent);color:var(--accent-text)}
.r6-quoted{margin-top:6px;font-size:13px}
.r6-quoted summary{cursor:pointer;color:var(--text-3);font-weight:600;list-style:none}
.r6-quoted summary::-webkit-details-marker{display:none}
.r6-quoted pre{margin:6px 0 0;padding:8px;border-left:2px solid var(--line);background:var(--sunken);
  border-radius:0 8px 8px 0;font:13px/18px var(--font);white-space:pre-wrap;overflow-wrap:anywhere;
  max-height:280px;overflow:auto;color:var(--text-2)}
.r6-note{font-size:13px;line-height:18px;color:var(--text-2);margin:0 0 6px}
.r6-elsewhere{font-size:12px;line-height:16px;color:var(--text-3);margin-top:4px}

/* Design pane: the rounds, the canvas, and the actions under it. The canvas
   takes every pixel the pane has left over, because he is judging artwork. */
.r6-design{display:flex;flex-direction:column;min-height:0;position:relative}
.r6-versions{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s3);flex:none}
.r6-versions .r6-v{display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:0 12px;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);background:var(--surface);color:var(--text-2);font:500 13px/1 var(--font);
  text-decoration:none;cursor:pointer}
.r6-versions .r6-v.is-active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-text);font-weight:600}
.r6-versions .r6-v-dot{width:6px;height:6px;border-radius:50%;background:var(--a-fg)}
.r6-versions .r6-back{font-size:13px;margin-right:var(--s2)}
.r6-versions .r6-spec{margin-left:auto;font-size:13px;color:var(--text-3)}
.r6-ask{display:flex;gap:6px;align-items:flex-start;font-size:14px;line-height:20px;color:var(--a-fg);
  margin:0 0 var(--s3);flex:none}
.r6-ask.quiet{color:var(--text-2)}
.r6-canvas{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--sunken);
  display:flex;align-items:center;justify-content:center;gap:var(--s3);padding:var(--s3);min-height:240px;
  position:relative;overflow:auto;max-height:72vh}
.r6-canvas img,.r6-canvas video{max-width:100%;max-height:100%;width:auto;height:auto;min-width:0;flex:0 1 auto;
  border-radius:var(--r-sm);cursor:zoom-in;object-fit:contain}
.r6-canvas-file{display:flex;flex-direction:column;align-items:center;gap:6px;padding:var(--s4);
  color:var(--text-2);text-decoration:none;font-size:13px;text-align:center;overflow-wrap:anywhere}
.r6-canvas-file i{font-size:28px}
.r6-canvas.is-full{align-items:flex-start;justify-content:flex-start}
.r6-canvas.is-full img{max-width:none;max-height:none;flex:none;cursor:zoom-out}
.r6-canvas.is-drop{border-color:var(--accent);background:var(--accent-soft)}
.r6-canvas-empty{color:var(--text-3);font-size:14px;text-align:center}
.r6-under{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s2);flex:none;min-height:30px}
.r6-under .r6-state{margin:0;min-width:0;overflow-wrap:anywhere}
.r6-zoom{display:flex;align-items:center;gap:var(--s2);margin-left:auto;flex:none}
.r6-zoom .ps-btn.is-active{color:var(--text);background:var(--hover)}
.r6-shelf{display:flex;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none}
.r6-shelf::-webkit-scrollbar{display:none}
.r6-shelf.wrap{flex-wrap:wrap;overflow:visible}
.r6-shelf.big .r6-chip-file{width:72px;height:72px}
.r6-chip-file{width:44px;height:44px;flex:none;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--sunken);padding:0;overflow:hidden;cursor:pointer;display:flex;align-items:center;
  justify-content:center;color:var(--text-3);font:600 11px/1 var(--font);text-decoration:none}
.r6-chip-file img{width:100%;height:100%;object-fit:cover}
.r6-chip-file:hover{border-color:var(--accent)}
.r6-state{margin:var(--s3) 0;font-size:13px;line-height:19px;color:var(--text-2);flex:none}
.r6-design-actions{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;flex:none;position:relative}
/* Brief, what the client sent and the earlier files open over the canvas, so
   the artwork keeps its size and nothing opens a page. */
.r6-over>summary{list-style:none;cursor:pointer}
.r6-over>summary::-webkit-details-marker{display:none}
.r6-over[open]>summary{background:var(--hover)}
.r6-over-body{position:absolute;left:0;right:0;bottom:calc(100% + 8px);z-index:40;max-height:60vh;overflow:auto;
  padding:var(--s4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-pop);font-size:14px;line-height:20px}
.r6-over-body.narrow{left:auto;width:320px;padding:0}
.r6-over-body .ps-card{border:0;box-shadow:none;margin:0}
.r6-more{margin-left:auto}
/* The artwork over everything: the biggest this screen can make it. */
#design-lightbox .r5-lb-stage,#design-lightbox .r5-lb-stage img{max-height:82vh}
#design-lightbox .r5-lb-judge{display:flex;align-items:center;gap:8px}

/* Files pane. A stack of labelled groups, never a wrapping row. */
.r6-files{display:block}
.r6-files h3{font:600 12px/16px var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);
  margin:var(--s5) 0 var(--s2)}
.r6-files h3:first-child{margin-top:0}
.r6-file{display:flex;align-items:center;gap:var(--s3);min-height:48px;padding:var(--s2) var(--s3);
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.r6-file:last-child{border-bottom:0}
a.r6-file:hover,button.r6-file:hover{background:var(--hover)}
button.r6-file{width:100%;border:0;border-bottom:1px solid var(--line);background:none;font:inherit;
  text-align:left;cursor:pointer}
.r6-file .ps-grow{min-width:0}
.r6-file b{display:block;font-size:14px;line-height:20px;font-weight:600}
.r6-file small{display:block;font-size:13px;line-height:18px;color:var(--text-2)}
.r6-file .r6-chev{color:var(--text-3);font-size:12px;flex:none}

@media (min-width:768px){
  .r6-head{padding:0 var(--gutter);height:64px;display:flex;align-items:center}
  .r6-head-top{width:100%}
  .r6-head h1{font-size:18px;line-height:24px}
}

/* Laptop: one column and one scroll. The glance sits on top, the tab row sticks
   under the top bar, the Messages box sticks to the foot of the screen, and the
   Design canvas takes most of the screen's height. */
@media (min-width:1024px){
  body.r6-page{--gutter:24px}
  .r6-shell{padding:0 var(--gutter) var(--s6);max-width:1280px}
  .r6-segs-wrap{display:none}
  .r6-work.is-design .r6-canvas{min-height:62vh;max-height:80vh}
}

/* Wide: one button takes the sidebar to a rail and the desk to a strip, so the
   canvas gets the whole MacBook. Narrow, or Escape, puts it all back. */
@media (min-width:1024px){
  body.r6-wide{--sidebar-w:64px}
  body.r6-wide .ps-sidebar .ps-nav-text,
  body.r6-wide .ps-sidebar .ps-nav-group-label,
  body.r6-wide .ps-sidebar .ps-search-btn span,
  body.r6-wide .ps-sidebar .ps-setup-card,
  body.r6-wide .ps-sidebar .ps-profile span{display:none}
  body.r6-wide .ps-sidebar{padding:var(--s4) var(--s2)}
  /* The rail shows the heart mark only, as the tablet rail already does. */
  body.r6-wide .ps-sidebar .ps-brand{padding:0;justify-content:center}
  body.r6-wide .ps-sidebar .ps-brand img{width:28px;height:26px;object-fit:cover;object-position:left center}
  body.r6-wide .ps-sidebar .ps-new-btn .ps-btn{padding:0}
  body.r6-wide .ps-sidebar .ps-nav-item .ps-count{position:absolute;top:2px;right:2px;margin:0}
  body.r6-wide .ps-sidebar .ps-nav-item{justify-content:center}
  body.r6-wide .r6-shell{max-width:none}
}

/* A panel over the right edge of the work pane; a bottom sheet on a phone. The
   sheet system it rides on is templates/team/_sheet_script.html. */
@media (min-width:768px){
  .r3-sheet.r6-panel .ps-sheet{max-width:420px}
}

/* ---------------------------------------------------------------------------
   The crew's own board on a laptop.

   Every token page was built as a phone page and capped at 560px, so on a
   1440px MacBook the designer's board used 39% of the screen and judged
   artwork inside 496 of it. The forms (report a problem, the after-event
   report) stay narrow: they are filled in one thumb at a time. A board does
   not. It widens to 1120 and sets its sections in two columns, so the design
   proof, the unstaffed slots and the week are on screen together.
   --------------------------------------------------------------------------- */
@media (min-width:1024px) {
  /* One long list (an attendant's own jobs) reads better in one column: it just
     stops being 560px wide. */
  .ps-field-page.is-wide{max-width:860px}
  .ps-field-page.is-wide>main.ps-page{max-width:none}
  .ps-field-page.is-board{max-width:1120px}
  .ps-field-page.is-board>main.ps-page{max-width:none;display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));align-items:start;column-gap:var(--s6)}
  .ps-field-page.is-board>main.ps-page>*{min-width:0}
  /* A full-width first child: the switch, tonight's card and the page heading
     belong across the top, not in one half of it. */
  .ps-field-page.is-board>main.ps-page>nav.ps-seg,
  .ps-field-page.is-board>main.ps-page>.ps-wide{grid-column:1 / -1}
  .ps-field-page.is-board .ps-drow img{max-height:none}
}
.r6-chip-file.is-active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}

/* A part row with a Remove on it: the row is a 3 column grid, so a fourth child
   wrapped onto its own line. Removing a part had no control at all before. */
.ps-unit-row.has-remove{grid-template-columns:28px minmax(0,1fr) auto auto}

/* ---------------------------------------------------------------------------
   What you own, counted (Sep 21). Every row on Equipment is an editable line:
   name, how many, and a way to take it off. `.ps-unit-row` is a 3 column grid,
   so a row with a count, a state and two buttons needs its own columns or the
   buttons wrap onto a line of their own.
   --------------------------------------------------------------------------- */
.r6-own-row{grid-template-columns:28px minmax(0,1fr) 5rem auto auto auto}
.r6-own-name{width:100%;max-width:22rem}
.r6-own-count{width:4.5rem;text-align:center}
.r6-own-state{white-space:nowrap;font-size:13px}
.r6-kit{border-top:1px solid var(--line)}
.r6-kit .ps-unit-row{grid-template-columns:28px minmax(0,1fr) auto auto auto}
.r6-part{padding-left:28px}
.r6-add{border-top:1px solid var(--line)}
@media (max-width:640px) {
  /* On a phone the count stays beside the name and the two buttons drop onto a
     line of their own, right aligned, instead of scattering across the grid. */
  .r6-own-row,.r6-kit .ps-unit-row{grid-template-columns:28px minmax(0,1fr) 4.5rem;row-gap:6px}
  .r6-own-state{grid-column:2 / -1;font-size:12px}
  .r6-own-row>button:nth-of-type(1),.r6-kit .ps-unit-row>button:nth-of-type(1){grid-column:2;justify-self:end}
  .r6-own-row>button:nth-of-type(2),.r6-kit .ps-unit-row>button:nth-of-type(2){grid-column:3;justify-self:end}
  .r6-own-name,.r6-own-kind{max-width:none}
}
.r6-own-kind{width:11rem}

/* ---------------------------------------------------------------------------
   The Inbox is a mail app (Sep 21). Its rows are message rows, not the queue
   rows Home uses: who on one line, what was said under it, the time on the
   right. Home and the Inbox used to draw the same component, so there was no
   telling them apart across the room.
   --------------------------------------------------------------------------- */
.r9-msgs{overflow:hidden}
.r9-msg{display:block;border-top:1px solid var(--line)}
.r9-msg:first-child{border-top:none}
/* A row opens where it is: the message unfolds under it, nothing navigates. */
.r9-msg-open>summary{display:flex;align-items:flex-start;gap:12px;padding:10px 16px;cursor:pointer;
  list-style:none}
.r9-msg-open>summary::-webkit-details-marker{display:none}
.r9-msg-open>summary:hover{background:var(--hover)}
.r9-msg-open>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.r9-msg-open[open]>summary{background:var(--hover)}
.r9-msg-body{padding:0 16px 12px 56px}
.r9-msg-body p{margin:0 0 6px;font-size:13px;line-height:19px;color:var(--text-2);
  white-space:pre-wrap;overflow-wrap:anywhere}
.r9-msg-icon{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:13px;background:var(--hover);color:var(--text-2)}
.r9-msg-icon.a{background:var(--a-bg);color:var(--a-fg)}
.r9-msg-icon.d{background:var(--d-bg);color:var(--d-fg)}
.r9-msg-main{flex:1 1 auto;min-width:0;text-decoration:none;color:inherit;display:block}
.r9-msg-who{display:block;font-weight:600;font-size:14px;line-height:20px;color:var(--text)}
.r9-msg-dir{font-weight:400;color:var(--text-3);font-size:12px}
.r9-msg-line{display:block;font-size:13px;line-height:19px;color:var(--text-2);overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* The snippet on the closed row. One line, so the list stays a list. */
.r9-msg-peek{display:block;font-size:13px;line-height:19px;color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r9-msg-open[open] .r9-msg-peek{display:none}
.r9-msg-side{flex:0 0 auto;display:flex;align-items:center;gap:8px;white-space:nowrap}
.r9-msg-time{font-size:12px;color:var(--text-3)}
.r9-msg.is-in{background:var(--surface)}
.r9-head-count{margin-left:-6px;transform:translateY(-8px)}
@media (max-width:640px){
  .r9-msg-side{flex-direction:column;align-items:flex-end;gap:2px}
}

/* ---------------------------------------------------------------------------
   Edit day, Add design and Edit payout, as panels on the customer page
   (the no-exits batch). The forms were three pages on the old shell.
--------------------------------------------------------------------------- */
.r6-booths{display:flex;flex-direction:column;gap:8px}
.r6-booth-row{display:flex;align-items:center;gap:8px}
.r6-booth-row .ps-select{flex:1 1 auto;min-width:0}
.r6-floor{position:relative;max-width:260px;margin-bottom:8px}
.r6-floor img{width:100%;display:block;border:1px solid var(--line);border-radius:var(--r-md)}
.r6-floor .ps-btn{position:absolute;top:6px;right:6px;background:var(--surface)}
.r6-brief-files{display:flex;flex-wrap:wrap;gap:8px}
.r6-brief-file{position:relative;display:inline-block;cursor:pointer;width:88px}
.r6-brief-file img,.r6-brief-file video,.r6-brief-doc{width:88px;height:88px;object-fit:cover;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--hover);display:block}
.r6-brief-doc{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;color:var(--text-2);font-size:11px}
.r6-brief-x{position:absolute;left:4px;bottom:4px;background:rgba(0,0,0,.66);color:#fff;
  border-radius:999px;padding:2px 8px;font-size:11px;line-height:16px}
.r6-brief-x input{vertical-align:middle;margin-right:4px}
/* The way back, on a page a booking genuinely handed off to. */
.r6-wayback{align-items:center}

/* A chip row that scrolls says so: a fade on the edge that is cut off, and the
   selected chip scrolled into view. Bookings opened on Past with the chips for
   every list he was not on, and nothing naming the one he was. */
.r6-fade{position:relative}
.r6-fade::after{content:"";position:absolute;right:0;top:0;bottom:0;width:32px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),var(--bg))}
.r6-fade.is-end::after{display:none}

/* ---------------------------------------------------------------------------
   Equipment you can read (Sep 23). The page he opens is three answers and a
   date; every box on it moved to /equipment/edit. A row is a shelf: pressing
   it opens what goes in one booth, read only, with no script.
   --------------------------------------------------------------------------- */
.r7-shelf>summary{list-style:none;cursor:pointer}
.r7-shelf>summary::-webkit-details-marker{display:none}
.r7-shelf>summary::before{content:"\F285";font-family:bootstrap-icons;font-size:11px;
  color:var(--text-3);transition:transform var(--t-fast);position:absolute;left:6px}
.r7-shelf>summary{position:relative;padding-left:28px}
.r7-shelf[open]>summary::before{transform:rotate(90deg)}
.r7-shelf+.r7-shelf>summary,.r7-shelf+.ps-unit-row,.ps-unit-row+.r7-shelf>summary{border-top:1px solid var(--line)}
.r7-parts{display:grid;grid-template-columns:repeat(2,minmax(0,260px));justify-content:start;
  gap:2px 24px;padding:4px 16px 12px 44px;font-size:13px;color:var(--text-2)}
.r7-parts>span{display:flex;align-items:center;gap:8px;min-height:24px}
.r7-parts b{font-weight:600;color:var(--text)}
.r7-unknown{grid-template-columns:28px minmax(0,1fr) auto auto}
.r7-unknown .ps-meta{color:var(--text-3)}
.r7-offer{grid-template-columns:28px minmax(0,1fr) auto auto}
/* Paper: name, state, how much is left and a Restock. Five things across one
   row, so it needs five columns. On the 3 column base the words fell into the
   28px icon column and were cut up mid word, and Restock stretched the width
   of the card. */
.r7-supply{grid-template-columns:28px minmax(0,1fr) auto auto auto}
.r7-supply>.ps-meta{white-space:nowrap}
.r7-drop{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;min-height:44px}
@media (max-width:640px) {
  /* At 390 the name and the state are the line; how much is left and the
     Restock drop under them. */
  .r7-supply{grid-template-columns:28px minmax(0,1fr) auto;row-gap:6px}
  .r7-supply>.ps-meta{grid-column:2;justify-self:start}
  .r7-supply>.ps-btn{grid-column:3;justify-self:end}
  .r7-parts{grid-template-columns:1fr;padding-left:44px}
  .r7-parts>span{max-width:none}
  .r7-parts>span{min-height:36px}
}

/* Edit equipment: one form, one Save, pinned where his thumb is. */
.r7-edit{padding-bottom:88px}
.r7-booth{grid-template-columns:28px minmax(0,1fr) auto auto auto}
.r7-list{padding:0 0 8px 44px}
.r7-list .ps-unit-row{grid-template-columns:28px minmax(0,1fr) 4.5rem auto}
.r7-addrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 16px;
  border-top:1px solid var(--line)}
.r7-addrow .ps-grow{flex:1 1 12rem;min-width:0}
.r7-addrow .r6-own-count{flex:0 0 auto}
.r7-list>summary{padding:6px 0}
.r7-step{display:inline-flex;align-items:center;gap:4px}
.r7-step .r6-own-count{width:3.5rem}
.r7-foot{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;gap:8px;align-items:center;
  padding:12px 16px;background:var(--surface);border-top:1px solid var(--line)}
@media (max-width:767px) { .r7-foot{bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))} }
@media (min-width:768px) { .r7-foot{left:var(--rail-w)} }
@media (min-width:1024px) { .r7-foot{left:var(--sidebar-w)} }
@media (max-width:640px) {
  /* Edit, at 390: a booth type is its name, then Parts and the one control
     under it; a count row is its name, then the stepper, then Remove. Five
     things across a phone row put the name under the dropdown. */
  .r7-booth{grid-template-columns:28px auto minmax(0,1fr);row-gap:6px}
  .r7-booth>.ps-grow{grid-column:2 / -1}
  .r7-booth>.ps-meta{grid-column:2;justify-self:start;align-self:center}
  .r7-booth>select{grid-column:3;justify-self:stretch;width:100%}
  .r7-booth>.r7-apply{grid-column:3;justify-self:end}
  .r7-edit .r6-own-row{grid-template-columns:28px minmax(0,1fr) auto;row-gap:6px}
  .r7-edit .r6-own-row>.r7-step{grid-column:3;justify-self:end}
  .r7-edit .r6-own-row>.r6-own-state{grid-column:2 / -1;justify-self:start}
  .r7-edit .r6-own-row>button{grid-column:2 / -1;justify-self:end}
  .r7-step .r6-own-count{width:3rem}
  .r7-list{padding-left:16px}
  .r7-list .ps-unit-row{grid-template-columns:28px minmax(0,1fr) 3.5rem auto}
}

/* ==========================================================================
   The booking glance (r8-): the progress bar, Next and four tiles.
   ========================================================================== */
.r8-glance{padding-top:var(--s4)}
.r8-track{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:14px 8px 12px;overflow-x:auto;scrollbar-width:none}
.r8-track::-webkit-scrollbar{display:none}
.r8-step{flex:1 0 76px;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;
  text-align:center;text-decoration:none;color:var(--text-3);font-size:12px;line-height:16px;padding:0 2px}
.r8-step::before{content:"";position:absolute;top:12px;left:calc(-50% + 14px);right:calc(50% + 14px);height:2px;
  background:var(--line)}
.r8-step:first-child::before{display:none}
.r8-step.is-done::before,.r8-step.is-skip::before,.r8-step.is-now::before{background:var(--s-dot)}
.r8-dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--line-strong);
  background:var(--surface);font-size:13px;margin-bottom:4px;flex:none}
.r8-label{font-weight:500;color:var(--text-2)}
.r8-step small{font-size:11px;line-height:14px;color:var(--text-3)}
.r8-step.is-done .r8-dot{background:var(--s-dot);border-color:var(--s-dot);color:#fff}
.r8-step.is-skip .r8-dot{border-style:dashed;color:var(--text-3)}
.r8-step.is-skip .r8-label{color:var(--text-3)}
.r8-step.is-now .r8-dot{border:3px solid var(--text)}
.r8-step.is-now .r8-dot::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--text)}
.r8-step.is-now .r8-label{color:var(--text);font-weight:700}
.r8-step.t-a .r8-dot{border-color:var(--a-dot)}.r8-step.t-a small{color:var(--a-fg);font-weight:600}
.r8-step.t-a.is-now .r8-dot::after{background:var(--a-dot)}
.r8-step.t-d .r8-dot{border-color:var(--d-dot)}.r8-step.t-d small{color:var(--d-fg);font-weight:600}
.r8-step.t-d.is-now .r8-dot::after{background:var(--d-dot)}
.r8-step.t-p small{color:var(--p-fg);font-weight:600}
.r8-step.t-p.is-now .r8-dot{border-color:var(--p-dot)}.r8-step.t-p.is-now .r8-dot::after{background:var(--p-dot)}
.r8-step:hover .r8-label{text-decoration:underline}
.r8-step:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--r-sm)}

.r8-next{display:flex;align-items:center;gap:var(--s4);margin:var(--s3) 0;padding:12px 12px 12px 16px;
  border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:var(--r-lg)}
.r8-next p{flex:1;margin:0;font-size:15px;line-height:21px;font-weight:600;color:var(--text)}
.r8-next form{margin:0}
.r8-next.is-clear{border-color:var(--line);background:var(--sunken)}
.r8-next.is-clear p{font-weight:500;color:var(--text-2)}

.r8-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin-bottom:var(--s4)}
@media (min-width:900px){ .r8-tiles{grid-template-columns:repeat(4,minmax(0,1fr))} }
.r8-tile{display:flex;flex-direction:column;gap:5px;min-width:0;min-height:112px;padding:12px 14px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);color:inherit;text-decoration:none}
a.r8-tile:hover{border-color:var(--line-strong)}
a.r8-tile:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.r8-lab{display:flex;align-items:center;gap:6px;font:600 11px/16px var(--font);letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:2px}
.r8-lab .bi{font-size:13px}
.r8-lab-btn{background:none;border:0;padding:0;cursor:pointer;width:100%;text-align:left}
.r8-lab-btn .r8-edit{margin-left:auto;opacity:.7}
.r8-lab-btn:hover{color:var(--text-2)}
.r8-big{font-size:18px;line-height:24px;font-weight:700;font-variant-numeric:tabular-nums}
.r8-big.d{color:var(--d-fg)}
.r8-big.r8-none{font-size:15px;font-weight:600;color:var(--text-3)}
.r8-name{font-size:15px;line-height:21px;font-weight:600}
.r8-sub{font-size:13px;line-height:18px;color:var(--text-2)}
.r8-sub.a{color:var(--a-fg);font-weight:600}.r8-sub.d{color:var(--d-fg);font-weight:600}
.r8-sub.s{color:var(--s-fg);font-weight:600}
.r8-clip{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r8-tile .ps-progress{margin:2px 0}
.r8-who{display:flex;align-items:center;gap:8px;font-size:14px;line-height:20px;min-width:0}
.r8-open{color:var(--a-fg);font-weight:600}
.r8-icons{display:flex;gap:6px;margin-top:auto;padding-top:4px}
.r8-icons a,.r8-icons button{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--surface);color:var(--text-2);cursor:pointer;font-size:14px}
.r8-icons a:hover,.r8-icons button:hover{background:var(--hover);color:var(--text)}
@media (max-width:767px){
  .r8-step{flex:0 0 72px}
  .r8-next{flex-direction:column;align-items:stretch}
  .r8-next .ps-btn{width:100%}
}

/* ==========================================================================
   The Bookings list (r9-): a header, one tab row with a Filter button, then
   one quiet row per booking with where it is on the nine steps.
   ========================================================================== */
.r9-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.r9-head h1{margin:0;flex:1;display:flex;align-items:baseline;gap:10px}
.r9-total{font-size:15px;font-weight:500;color:var(--text-3)}
.r9-search{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:1px solid var(--line);
  border-radius:var(--r-md);background:var(--surface);width:240px;color:var(--text-3)}
.r9-search:focus-within{border-color:var(--line-strong);box-shadow:var(--focus-ring)}
.r9-search input{border:0;outline:0;background:none;font:400 14px/20px var(--font);color:var(--text);flex:1;min-width:0}
.r9-search-phone{width:auto;margin-bottom:8px}
.r9-views{display:flex;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.r9-views a{width:36px;height:34px;display:grid;place-items:center;color:var(--text-3)}
.r9-views a.is-active{background:var(--hover);color:var(--text)}
.r9-bar{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.r9-tabs{display:flex;gap:20px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.r9-tabs::-webkit-scrollbar{display:none}
.r9-tabs a{display:inline-flex;align-items:center;gap:6px;min-height:42px;white-space:nowrap;text-decoration:none;
  font-size:14px;font-weight:500;color:var(--text-2);border-bottom:2px solid transparent;margin-bottom:-1px}
.r9-tabs a.is-active{color:var(--text);font-weight:600;border-color:var(--accent)}
.r9-n{font-size:12px;color:var(--text-3);font-weight:500}
.r9-filter{position:relative;flex:none}
.r9-filter summary{list-style:none;cursor:pointer}
.r9-filter summary::-webkit-details-marker{display:none}
.r9-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:200px;padding:6px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-pop);display:flex;flex-direction:column}
.r9-menu a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r-sm);font-size:14px;
  color:var(--text);text-decoration:none}
.r9-menu a:hover{background:var(--hover)}
.r9-menu a.is-active{font-weight:600;color:var(--accent-text)}
.r9-menu hr{border:0;border-top:1px solid var(--line);margin:4px 0}

.r9-list{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.r9-row{display:grid;grid-template-columns:44px minmax(0,1.3fr) minmax(0,1fr) 120px 16px;gap:16px;align-items:center;
  padding:12px 16px;border-top:1px solid var(--line);color:inherit;text-decoration:none}
.r9-row:first-child{border-top:0}
.r9-row:hover{background:var(--hover)}
.r9-row.needs{box-shadow:inset 3px 0 0 var(--a-dot)}
.r9-row.late{box-shadow:inset 3px 0 0 var(--d-dot)}
.r9-nodate b{font-size:12px}
.r9-main{display:flex;flex-direction:column;min-width:0}
.r9-name{font-size:15px;line-height:21px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r9-sub{font-size:13px;line-height:18px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r9-progress{display:flex;flex-direction:column;gap:6px;min-width:0}
.r9-mini{display:flex;gap:3px;max-width:180px}
.r9-mini i{flex:1;height:5px;border-radius:3px;background:var(--line)}
.r9-mini i.is-done{background:var(--s-dot)}
.r9-mini i.is-skip{background:repeating-linear-gradient(90deg,var(--s-dot) 0 3px,transparent 3px 5px)}
.r9-mini i.is-now{background:var(--text)}
.r9-mini i.is-now.t-a{background:var(--a-dot)}.r9-mini i.is-now.t-d{background:var(--d-dot)}.r9-mini i.is-now.t-p{background:var(--p-dot)}
.r9-at{font-size:13px;line-height:18px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r9-at b{font-weight:600;color:var(--text)}
.r9-at.a,.r9-at.a b{color:var(--a-fg)}.r9-at.d,.r9-at.d b{color:var(--d-fg)}.r9-at.p,.r9-at.p b{color:var(--p-fg)}
.r9-at.s b{color:var(--s-fg)}.r9-at.n{color:var(--text-3)}
.r9-money{text-align:right;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text-2)}
.r9-money b{font-weight:600;color:var(--text)}
.r9-chev{color:var(--text-3);font-size:12px}
.r9-step-phone{display:none}
.r9-more{margin:12px 0 0;font-size:13px;color:var(--text-3)}
.r9-card-step{margin:8px 0 6px}
.r9-card .ps-bcard-foot{align-items:center}
@media (max-width:767px){
  .r9-row{grid-template-columns:44px minmax(0,1fr) auto;gap:12px;padding:12px}
  .r9-progress,.r9-chev{display:none}
  .r9-step-phone{display:block;margin-top:2px}
  .r9-bar{gap:8px}
}
.r9-mini i.is-todo.t-a{background:var(--a-dot);opacity:.55}.r9-mini i.is-todo.t-d{background:var(--d-dot);opacity:.7}

/* ==========================================================================
   Messages (r10-): one chat window. The thread scrolls inside it and opens on
   the newest message; the reply box is its foot, so nothing covers the thread.
   ========================================================================== */
.r10-chat{display:flex;flex-direction:column;height:calc(100vh - 96px);min-height:480px;max-height:900px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.r10-chat-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;
  border-bottom:1px solid var(--line);flex:none}
.r10-seg{display:flex;gap:2px;background:var(--sunken);border-radius:var(--r-md);padding:2px}
.r10-seg a{padding:5px 10px;border-radius:var(--r-sm);font-size:13px;font-weight:500;color:var(--text-2);text-decoration:none;white-space:nowrap}
.r10-seg a span{color:var(--text-3);font-weight:400}
.r10-seg a.is-active{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(28,25,23,.08)}
.r10-steps{font-size:12px;color:var(--text-3);text-decoration:none;white-space:nowrap}
.r10-steps:hover{color:var(--text-2);text-decoration:underline}
.r10-chat-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 16px 8px;background:var(--canvas)}
.r10-chat .r6-thread{padding-bottom:0}
.r10-empty{margin:40px 0;text-align:center;color:var(--text-3);font-size:14px}
/* Theirs on the left in white, ours on the right, tinted. */
.r10-chat .r6-bubble{background:var(--surface)}
.r10-chat .r6-bubble.out{background:var(--accent-soft);border-color:transparent}
/* Things that happened stay small and grey; their details are a quiet link. */
.r10-chat .r6-open{font-size:12px;font-weight:500;color:var(--text-3)}
.r10-chat .r6-open:hover{color:var(--text-2)}
.r10-chat .r6-pill{background:var(--surface);font-size:12px}
.r10-chat .r6-quiet .r6-quiet-words{font-size:12px;color:var(--text-3)}
/* The reply box. */
.r10-chat .r6-composer{flex:none;border-top:1px solid var(--line);background:var(--surface);padding:10px 12px 12px}
.r10-chat .r6-composer-head{justify-content:flex-start;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.r10-to{font-size:13px;color:var(--text-2)}
.r10-to b{color:var(--text);font-weight:600}
.r10-ai{margin-left:auto;font-size:12px;color:var(--text-3)}
.r10-ai .ps-meta{font-size:12px}
.r10-chat .r6-composer input[name="subject"]{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:4px 2px;
  min-height:32px;font-weight:600;box-shadow:none}
.r10-chat .r6-composer textarea{min-height:48px;border:0;padding:8px 2px;resize:none;box-shadow:none;background:transparent}
.r10-chat .r6-composer textarea:focus,.r10-chat .r6-composer input[name="subject"]:focus{outline:none;box-shadow:none}
.r10-chat .r6-composer-foot{justify-content:flex-end;margin-top:4px}
.r10-chat .r6-composer-foot .r6-when{order:-1;margin:0 auto 0 0}
.r10-chat .r6-composer-foot .ps-btn.primary{order:5;min-width:84px}
@media (max-width:1023px){
  .r10-chat{height:calc(100vh - var(--tabbar-h) - 24px);min-height:420px}
  .r10-chat .r6-composer{padding-bottom:12px}
}

/* Laptop: the tab row sticks under the pinned top bar, and the chat window
   fills what is left under both. */
@media (min-width:1024px){
  .r6-tabs{top:56px}
  .r10-chat{height:calc(100vh - 56px - 45px - 32px)}
}
@media (max-width:1023px){
  .r10-chat{height:calc(100vh - var(--tabbar-h) - 140px);min-height:380px}
  .r10-ai{display:none}
  .r10-chat .r6-composer-foot .r6-when{font-size:11px}
}

/* Days (r11-): one Edit day button, everything else behind the three dots. */
.r11-day-foot{display:flex;align-items:center;gap:8px;padding:10px var(--s4);border-top:1px solid var(--line)}
.r11-hint{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;font:500 13px/18px var(--font);
  color:var(--a-fg);cursor:pointer}
.r11-hint:hover{text-decoration:underline}
.r11-more{position:relative;margin-left:auto}
.r11-more summary{list-style:none;cursor:pointer}
.r11-more summary::-webkit-details-marker{display:none}
.r11-more .r9-menu{bottom:calc(100% + 6px);top:auto}
.r9-menu button,.r9-menu span{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r-sm);
  font:400 14px/20px var(--font);color:var(--text);background:none;border:0;cursor:pointer;text-align:left;width:100%}
.r9-menu button:hover{background:var(--hover)}
.r9-menu .r11-danger{color:var(--d-fg)}
.r11-notes{padding:0 var(--s4) var(--s3);font-size:13px;color:var(--text-2)}
.r11-notes summary{cursor:pointer;color:var(--text-3);font-weight:500;padding:4px 0}
.r11-notes div{white-space:pre-line;padding-top:4px}
.r11-add{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:12px;min-height:44px;
  border:1px dashed var(--line-strong);border-radius:var(--r-lg);background:none;color:var(--text-2);
  font:500 14px/20px var(--font);cursor:pointer}
.r11-add:hover{background:var(--hover);color:var(--text)}
.r11-same{margin-top:16px;padding:12px 16px;border-radius:var(--r-lg);background:var(--sunken);display:flex;
  flex-direction:column;gap:4px}
.r11-same-head{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;color:var(--text-3)}
.r11-offer-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:13px;color:var(--text-2)}
.r11-offer{padding:0}
@media (max-width:767px){ .r10-steps{display:none} .r10-seg{overflow-x:auto;scrollbar-width:none} }

/* ==========================================================================
   Booking (r12-): one header with the tabs; each tab gets the screen.
   ========================================================================== */
body.r6-page .r6-head,body.r6-page .r6-segs-wrap{display:none}
.r12-head{position:sticky;top:0;z-index:15;background:var(--surface);border-bottom:1px solid var(--line);
  padding:10px var(--gutter) 0}
@media (min-width:1024px){ .r12-head{top:56px} }
.r12-top{display:flex;align-items:center;gap:14px;min-width:0}
.r12-back{display:grid;place-items:center;width:32px;height:32px;margin-left:-6px;color:var(--text-2);font-size:18px;flex:none}
.r12-who{flex:1;min-width:0}
.r12-who h1{margin:0;font-size:18px;line-height:24px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r12-facts{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;line-height:18px;color:var(--text-2)}
.r12-facts b{color:var(--text);font-weight:600}
.r12-at{display:flex;flex-direction:column;align-items:flex-end;gap:5px;text-decoration:none;flex:none;max-width:220px}
.r12-at .r9-mini{width:140px}
.r12-actions{display:flex;gap:8px;flex:none}
.r12-tabs{display:flex;gap:22px;margin-top:6px;overflow-x:auto;scrollbar-width:none}
.r12-tabs::-webkit-scrollbar{display:none}
.r12-tabs a{display:inline-flex;align-items:center;gap:6px;min-height:40px;white-space:nowrap;text-decoration:none;
  font-size:14px;font-weight:500;color:var(--text-2);border-bottom:2px solid transparent}
.r12-tabs a.is-active{color:var(--text);font-weight:600;border-color:var(--accent)}
.r12-shell{padding-top:16px}
.r12-shell .r6-pane{padding:0 0 var(--s6)}
.r12-shell .r8-glance{padding-top:0}
@media (max-width:767px){ .r12-at{display:none} .r12-tabs{gap:18px} }

/* Recent activity on Overview. */
.r12-recent{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-bottom:24px}
.r12-recent-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;
  font:600 11px/16px var(--font);letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);border-bottom:1px solid var(--line)}
.r12-recent-head a{text-transform:none;letter-spacing:0;font-size:13px}
.r12-act{display:flex;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--line);color:inherit;text-decoration:none;font-size:14px}
.r12-act:first-of-type{border-top:0}
.r12-act:hover{background:var(--hover)}
.r12-act-ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--sunken);color:var(--text-2);flex:none;font-size:13px}
.r12-act-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r12-act-tab{font-size:12px;color:var(--text-3);padding:2px 8px;border:1px solid var(--line);border-radius:99px;flex:none}
.r12-act time{font-size:12px;color:var(--text-3);white-space:nowrap;flex:none;width:112px;text-align:right}
.r12-act.failed .r12-act-text{color:var(--d-fg)}
@media (max-width:767px){ .r12-act-tab{display:none} .r12-act time{width:auto} }

/* Messages: a full-height chat. The bubbles are the conversation; everything
   else is a small grey line in the middle. */
.r12-shell .r10-chat{max-height:none;min-height:360px;border-radius:var(--r-lg)}
.r10-chat-head{display:none}
.r10-chat-body{padding:20px max(16px,6%) 8px}
.r10-chat .r6-bubble{border-radius:18px;padding:10px 14px;max-width:min(560px,72%)}
.r10-chat .r6-bubble:not(.out){border-bottom-left-radius:6px}
.r10-chat .r6-bubble.out{border-bottom-right-radius:6px}
.r10-meta{margin-top:4px;font-size:11px;line-height:16px;color:var(--text-3)}
.r10-chat .r6-bubble-subject{font-size:13px;color:var(--text-2)}
.r10-chat .r6-pillwrap{justify-content:center}
.r10-chat .r6-pill{border:0;background:none;padding:0;max-width:92%;text-align:center}
.r10-chat .r6-pill-line,.r10-chat .r6-quiet-row{cursor:pointer;justify-content:center}
.r10-chat .r6-pill-line{gap:6px}
.r10-chat .r6-pill-what,.r10-chat .r6-quiet .r6-quiet-words{flex:0 1 auto;font-size:12px;line-height:18px;color:var(--text-3)}
.r10-chat .r6-pill-line time,.r10-chat .r6-quiet-at{font-size:11px;color:var(--text-3);opacity:.8;flex:none;width:auto;text-align:left}
.r10-chat .r6-quiet-row::before{display:none}
.r10-chat .r6-quiet-mid{flex:0 1 auto}
.r10-chat .r6-open{display:none}
.r10-chat .r6-pill-line:hover .r6-pill-what,.r10-chat .r6-quiet-row:hover .r6-quiet-words{color:var(--text-2)}
.r10-chat .r6-unfold{max-width:min(520px,92%);margin:6px auto 0;font-size:13px;text-align:left}
.r10-chat .r6-pill-tail{flex:1 0 100%;text-align:center}
.r10-chat .r6-milestone{margin:10px 0}
.r10-chat .r6-day{margin:10px 0 2px}

/* The reply bar. */
.r10-bar{border-top:1px solid var(--line);background:var(--surface);padding:10px 12px 8px}
.r10-note{display:flex;gap:12px;align-items:center;font-size:12px;margin-bottom:6px}
.r10-to-other{color:var(--a-fg);font-weight:600}
.r10-subject{display:flex;align-items:center;gap:8px;margin:0 0 6px 4px;font-size:12px;color:var(--text-3)}
.r10-subject input{flex:1;border:0;background:none;font:500 13px/18px var(--font);color:var(--text-2);padding:2px 0;outline:none}
.r10-row{display:flex;align-items:flex-end;gap:8px;border:1px solid var(--line-strong);border-radius:22px;padding:5px 5px 5px 6px;background:var(--surface)}
.r10-row:focus-within{border-color:var(--text-3)}
.r10-via{display:flex;background:var(--sunken);border-radius:16px;padding:2px;flex:none;align-self:center}
.r10-via button{border:0;background:none;padding:6px 10px;border-radius:14px;font:600 12px/1 var(--font);color:var(--text-3);cursor:pointer}
.r10-via button.is-active{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(28,25,23,.1)}
.r10-field{flex:1;min-width:0;align-self:center}
.r10-field textarea{display:block;width:100%;border:0;resize:none;background:none;font:400 14px/20px var(--font);color:var(--text);
  padding:6px 4px;max-height:200px;outline:none}
.r10-cant{margin:0;padding:6px 4px;font-size:13px;color:var(--text-2)}
.r10-send{width:36px;height:36px;border-radius:50%;border:0;background:var(--accent);color:#fff;display:grid;place-items:center;
  font-size:16px;cursor:pointer;flex:none}
.r10-send:hover{background:var(--accent-hover)}
.r10-foot{display:flex;gap:12px;justify-content:flex-end;padding:4px 8px 0;font-size:11px;color:var(--text-3)}
.r10-chat .r10-bar textarea{min-height:0;padding:6px 4px}

/* Days (r13-): when, where, who. */
.r13-day{display:grid;grid-template-columns:120px minmax(0,1fr);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:visible;margin-bottom:14px}
.r13-day.is-over{opacity:.75}
.r13-date{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--sunken);
  border-right:1px solid var(--line);border-radius:var(--r-lg) 0 0 var(--r-lg);padding:20px 8px}
.r13-date small{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.r13-date b{font-size:40px;line-height:44px;font-weight:700}
.r13-date span{font-size:13px;color:var(--text-2)}
.r13-date em{font-style:normal;font-size:12px;color:var(--text-3);margin-top:4px}
.r13-info{padding:16px 20px;min-width:0}
.r13-facts{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 28px;margin-bottom:14px}
.r13-facts small{display:block;font:600 11px/16px var(--font);letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)}
.r13-facts span,.r13-facts a{font-size:15px;line-height:22px;font-weight:500;color:var(--text)}
.r13-venue a{color:var(--accent-text);text-decoration:none}
.r13-venue a .bi{font-size:12px}
.r13-tools{margin-left:auto;display:flex;align-items:center;gap:4px}
.r13-tools .r11-more .r9-menu{top:calc(100% + 6px);bottom:auto}
.r13-lab{font:600 11px/16px var(--font);letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);margin:4px 0 8px}
.r13-slot{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px}
.r13-slot img{width:40px;height:40px;border-radius:10px;object-fit:cover;flex:none}
.r13-slot form{margin:0}
.r13-slot.is-open{border-style:dashed;border-color:var(--a-dot);background:var(--a-bg)}
.r13-slot.is-open .r13-who span{color:var(--a-fg)}
.r13-slot.is-yes{border-color:var(--s-dot);background:var(--s-bg)}
.r13-who{flex:1;min-width:0;display:flex;flex-direction:column}
.r13-who b{font-size:14px;line-height:20px;font-weight:600}
.r13-who span{font-size:13px;line-height:18px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r13-answers{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:4px 2px;font:500 13px/18px var(--font);
  color:var(--text-2);cursor:pointer}
.r13-answers:hover{color:var(--text)}
.r13-warn{display:flex;align-items:center;gap:6px;margin:0 0 10px;font-size:13px}
.r13-warn.d{color:var(--d-fg)}.r13-warn.a{color:var(--a-fg)}
.r13-add{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:6px 2px;font:500 14px/20px var(--font);
  color:var(--text-2);cursor:pointer}
.r13-add:hover{color:var(--text)}
.r13-same{margin:18px 0 0;font-size:13px;color:var(--text-3)}
@media (max-width:767px){
  .r13-day{grid-template-columns:1fr}
  .r13-date{flex-direction:row;gap:8px;justify-content:flex-start;border-right:0;border-bottom:1px solid var(--line);
    border-radius:var(--r-lg) var(--r-lg) 0 0;padding:10px 16px}
  .r13-date b{font-size:22px;line-height:26px}
  .r13-info{padding:14px 16px}
  .r13-slot{flex-wrap:wrap}
  .r13-who{flex:1 1 60%}
}

/* Design (r14-): cards first; one opens in a dark viewer. */
.r14-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.r14-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column}
.r14-thumb{display:block;aspect-ratio:4/3;background:var(--sunken)}
.r14-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.r14-thumb span{display:grid;place-items:center;height:100%;font-size:28px;color:var(--text-3)}
.r14-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px}
.r14-row{display:flex;align-items:center;gap:8px}
.r14-name{flex:1;min-width:0;font-weight:600;font-size:15px;color:var(--text);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r14-sub{font-size:13px;color:var(--text-3)}
.r14-acts{margin-top:4px}
.r14-new{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:260px;border:1.5px dashed var(--line-strong);
  border-radius:var(--r-lg);background:none;color:var(--text-2);font:500 14px/20px var(--font);cursor:pointer}
.r14-new .bi{font-size:22px}
.r14-new:hover{background:var(--hover);color:var(--text)}
.r14-details{margin-top:18px}
.r14-details summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;font-weight:500;color:var(--text-2);list-style:none}
.r14-details summary::-webkit-details-marker{display:none}
.r14-details[open] summary{margin-bottom:10px}
.r14-viewer{background:#1c1917;color:#fafaf9;border-radius:var(--r-lg);padding:14px 16px 16px;min-height:calc(100vh - 220px)}
.r14-viewer .r6-versions{align-items:center;gap:8px}
.r14-back{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:#fafaf9;background:#292524;text-decoration:none}
.r14-title{font-size:15px;margin-right:8px}
.r14-viewer .r6-v{color:#d6d3d1;border-color:#44403c;background:none}
.r14-viewer .r6-v.is-active{background:#fafaf9;color:#1c1917;border-color:#fafaf9}
.r14-viewer .r6-spec,.r14-viewer .r6-state,.r14-viewer .ps-meta{color:#a8a29e}
.r14-viewer .r6-canvas{background:#0f0e0d;border-color:#292524;min-height:58vh}
.r14-viewer .r6-canvas-empty{color:#a8a29e}
.r14-viewer .r6-ask{color:#f0c95c}
.r14-viewer .ps-btn{background:#292524;border-color:#44403c;color:#fafaf9}
.r14-viewer .ps-btn:hover{background:#3a3532}
.r14-viewer .ps-btn.primary{background:var(--gold-bright);border-color:var(--gold-bright);color:#1c1917}
.r14-viewer .ps-btn.ghost.is-active{background:#44403c}
.r14-viewer .r6-over-body{color:var(--text)}
.r14-viewer .r6-over-body .ps-btn{background:var(--surface);border-color:var(--line-strong);color:var(--text)}
.r14-viewer .r6-design-actions{justify-content:center;margin-top:12px}
.r14-viewer .r6-chip-file{border-color:#44403c}

/* Money (r15-): three numbers, the buttons, the payments. Details fold. */
.r15-sum{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.r15-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.r15-nums div{padding:18px 20px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.r15-nums div:first-child{border-left:0}
.r15-nums small{font-size:13px;color:var(--text-3)}
.r15-nums b{font-size:28px;line-height:36px;font-weight:700;font-variant-numeric:tabular-nums}
.r15-nums b.s{color:var(--s-fg)}.r15-nums b.d,.r15-nums span.d{color:var(--d-fg)}
.r15-nums span{font-size:13px;color:var(--text-2)}
.r15-bar{height:8px;margin:0 20px 18px;border-radius:99px;background:var(--line);overflow:hidden}
.r15-bar i{display:block;height:100%;background:var(--s-dot)}
.r15-acts{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.r15-list{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.r15-ln{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line)}
.r15-ln:first-child{border-top:0}
.r15-ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--sunken);color:var(--text-2);flex:none}
.r15-ic.s{background:var(--s-bg);color:var(--s-fg)}.r15-ic.d{background:var(--d-bg);color:var(--d-fg)}.r15-ic.p{background:var(--p-bg);color:var(--p-fg)}
.r15-what{flex:1;min-width:0;display:flex;flex-direction:column}
.r15-what b{font-size:14px;font-weight:600}
.r15-what small{font-size:12px;color:var(--text-3)}
.r15-amt{font-variant-numeric:tabular-nums;font-size:15px}
.r15-go{display:flex;gap:2px;min-width:40px;justify-content:flex-end}
.r15-fold{margin-top:14px}
.r15-fold > summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;padding:12px 16px;border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--surface);font-size:14px;font-weight:600}
.r15-fold > summary::-webkit-details-marker{display:none}
.r15-fold > summary::before{content:"\F285";font-family:"bootstrap-icons";font-size:12px;color:var(--text-3);transition:transform .15s}
.r15-fold[open] > summary::before{transform:rotate(90deg)}
.r15-fold > summary span{font-weight:400;font-size:13px;color:var(--text-3)}
.r15-fold[open] > summary{margin-bottom:10px}
@media (max-width:767px){
  .r15-nums b{font-size:20px;line-height:26px}
  .r15-nums div{padding:14px 12px}
  .r15-ln{flex-wrap:wrap}
  .r15-go{flex:1 0 100%;justify-content:flex-start;padding-left:44px}
}

/* Files (r16-): every file a tile. */
.r16-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-bottom:6px}
.r16-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;
  gap:4px;min-height:150px}
.r16-tile.is-missing{background:none;border-style:dashed}
.r16-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:19px;background:var(--sunken);color:var(--text-2);margin-bottom:6px}
.r16-ic.s{background:var(--s-bg);color:var(--s-fg)}.r16-ic.p{background:var(--p-bg);color:var(--p-fg)}
.r16-ic.a{background:var(--a-bg);color:var(--a-fg)}.r16-ic.d{background:var(--d-bg);color:var(--d-fg)}
.r16-tile b{font-size:14px}
.r16-state{font-size:12px;color:var(--text-3)}
.r16-act{margin-top:auto;padding-top:8px;display:flex;gap:14px}
.r16-act a,.r16-act button{background:none;border:0;padding:0;font:600 13px/18px var(--font);color:var(--accent-text);text-decoration:none;cursor:pointer}
.r16-act a:hover,.r16-act button:hover{text-decoration:underline}
.r16-act form{margin:0}
.r6-files h3{margin:24px 0 10px}
@media (max-width:767px){ .r10-foot span:not(.r6-when){display:none} }

/* Staffing (r17-): one open booth, one row. */
.r17-head{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
.r17-head h1{margin:0}
.r17-total{font-size:15px;color:var(--text-2)}
.r17-tabs{margin-bottom:16px;border-bottom:1px solid var(--line)}
.r17-clash{display:flex;flex-direction:column;gap:6px;padding:12px 16px;margin-bottom:16px;border:1px solid var(--d-dot);
  background:var(--d-bg);border-radius:var(--r-lg);font-size:14px;color:var(--d-fg)}
.r17-clash a{color:var(--text);text-decoration:none}
.r17-clash a:hover{text-decoration:underline}
.r17-cols{display:grid;gap:24px}
@media (min-width:1100px){ .r17-cols{grid-template-columns:minmax(0,1fr) 300px;align-items:start} }
.r17-group{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:600 12px/16px var(--font);letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-3)}
.r17-group span{font-weight:500}
section + section .r17-group{margin-top:22px}
.r17-list{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.r17-row{display:grid;grid-template-columns:44px minmax(0,1.3fr) minmax(0,1fr) auto;gap:16px;align-items:center;
  padding:12px 16px;border-top:1px solid var(--line)}
.r17-row:first-child{border-top:0}
.r17-row.is-late{box-shadow:inset 3px 0 0 var(--d-dot)}
.r17-row .ps-date-block{text-decoration:none;color:inherit}
.r17-main{display:flex;flex-direction:column;min-width:0;text-decoration:none;color:inherit}
.r17-main b{font-size:15px;line-height:21px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r17-main span{font-size:13px;line-height:18px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r17-main:hover b{text-decoration:underline}
.r17-state{display:flex;flex-direction:column;gap:2px;min-width:0}
.r17-s{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600}
.r17-s .bi{font-size:13px}
.r17-s.s{color:var(--s-fg)}.r17-s.a{color:var(--a-fg)}.r17-s.d{color:var(--d-fg)}.r17-s.p{color:var(--p-fg)}.r17-s.n{color:var(--text-2)}
.r17-asked{align-self:flex-start;background:none;border:0;padding:0;font:400 12px/16px var(--font);color:var(--text-3);cursor:pointer}
.r17-asked:hover{color:var(--text);text-decoration:underline}
.r17-act form{margin:0}
.r17-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:48px 16px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);color:var(--text-2)}
.r17-empty .bi{font-size:28px;color:var(--s-fg)}
.r17-more{margin:12px 0 0;font-size:13px;color:var(--text-3)}
.r17-answers{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.r17-answers h2{margin:0;padding:12px 16px;border-bottom:1px solid var(--line);font:600 12px/16px var(--font);
  letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)}
.r17-ans{display:flex;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid var(--line);color:inherit;text-decoration:none}
.r17-ans:first-of-type{border-top:0}
.r17-ans:hover{background:var(--hover)}
.r17-ans-main{flex:1;min-width:0;display:flex;flex-direction:column}
.r17-ans-main b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r17-ans-main small{font-size:12px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r17-yes{font-size:12px;font-weight:600;padding:2px 8px;border-radius:99px}
.r17-yes.s{background:var(--s-bg);color:var(--s-fg)}.r17-yes.n{background:var(--n-bg);color:var(--n-fg)}
.r17-none{margin:0;padding:14px 16px;font-size:13px;color:var(--text-3)}
.r17-note{margin:10px 2px 0;font-size:12px;color:var(--text-3)}
@media (max-width:767px){
  .r17-row{grid-template-columns:44px minmax(0,1fr);gap:8px 12px}
  .r17-state{grid-column:2}
  .r17-act{grid-column:2}
  .r17-act .ps-btn{width:100%}
}
.r17-warn{font-size:12px;color:var(--a-fg)}

/* Crew (r18-): Open booths and People, one section. */
.r18-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.r18-title{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.r18-title h1{margin:0}
.r18-line{font-size:15px;color:var(--text-2)}
.r18-actions{display:flex;gap:8px}
.r18-tabs{border-bottom:1px solid var(--line);margin-bottom:14px}
.r18-tabs a{font-size:15px}
.r18-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.r18-facts{display:flex;flex-direction:column;align-items:flex-end;min-width:96px;font-size:13px}
.r18-facts b{font-weight:600}
.r18-facts small{font-size:12px;color:var(--text-3)}
@media (max-width:767px){ .r18-head .r18-actions .ps-btn{padding:0 10px} }
/* Open booths is read only: the row is one link to the booking's Days tab. */
a.r17-row{grid-template-columns:44px minmax(0,1.3fr) minmax(0,1fr) 16px;color:inherit;text-decoration:none}
a.r17-row:hover{background:var(--hover)}
a.r17-row:hover .r17-main b{text-decoration:underline}
.r17-chev{color:var(--text-3);font-size:12px}
@media (max-width:767px){ a.r17-row{grid-template-columns:44px minmax(0,1fr) 16px} a.r17-row .r17-state{grid-column:2} a.r17-row .r17-chev{grid-row:1;grid-column:3} }

/* Designs (r19-): five groups in the order the work happens, one card each. */
.r19-group + .r19-group{margin-top:26px}
.r19-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.r19-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;color:inherit;text-decoration:none}
.r19-card.is-late{border-color:var(--d-dot)}
.r19-thumb{position:relative;display:grid;place-items:center;aspect-ratio:3/2;background:var(--sunken);color:var(--text-3);
  font-size:26px;text-decoration:none}
.r19-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.r19-body{display:flex;flex-direction:column;gap:3px;padding:12px 14px 14px}
.r19-name{font-size:15px;font-weight:600;color:var(--text);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.r19-name:hover{text-decoration:underline}
.r19-title{font-size:13px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r19-when{font-size:12px;color:var(--text-3)}
.r19-state{margin-top:4px;font-size:13px;font-weight:600;color:var(--text-2)}
.r19-state.s{color:var(--s-fg)}.r19-state.a{color:var(--a-fg)}.r19-state.d{color:var(--d-fg)}.r19-state.p{color:var(--p-fg)}
.r19-note{margin:4px 0 0;font-size:12px;color:var(--text-2);font-style:italic}
.r19-acts{display:flex;gap:8px;margin-top:10px}
.r19-acts .ps-btn{flex:1}
.r19-wait:hover{border-color:var(--line-strong)}
@media (max-width:767px){ .r19-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} }
.r19-body{gap:2px;padding:10px 12px 12px}
.r19-state{margin-top:0}
.r19 .r17-empty .bi{color:var(--s-fg)}

/* Booking Design tab (r20-): the artwork on the left, everything about it on the right. */
.r20-switch{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-bottom:14px}
.r20-pick{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);color:inherit;text-decoration:none;flex:none}
.r20-pick.is-active{border-color:var(--accent-line);box-shadow:0 0 0 1px var(--accent-line)}
.r20-pick-thumb{position:relative;width:40px;height:40px;border-radius:8px;background:var(--sunken);display:grid;place-items:center;
  color:var(--text-3);overflow:hidden}
.r20-pick-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.r20-pick b{display:block;font-size:13px;font-weight:600}
.r20-pick small{display:block;font-size:12px;color:var(--text-3)}
.r20-pick small.a{color:var(--a-fg)}.r20-pick small.d{color:var(--d-fg)}.r20-pick small.s{color:var(--s-fg)}.r20-pick small.p{color:var(--p-fg)}
.r20-add{display:flex;align-items:center;gap:6px;padding:0 14px;border:1px dashed var(--line-strong);border-radius:12px;background:none;
  color:var(--text-2);font:500 13px var(--font);cursor:pointer;flex:none}
.r20{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.r20 .r6-canvas{min-height:58vh;max-height:72vh;background:var(--surface)}
.r20-drop{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;color:var(--text-2);cursor:pointer;font:inherit}
.r20-drop .bi{font-size:30px;color:var(--text-3)}
.r20-drop span{font-size:13px;color:var(--text-3)}
.r20-under{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.r20-versions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.r20-size{font-size:12px;color:var(--text-3)}
.r20-side{display:flex;flex-direction:column;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px}
.r20-state{display:flex;align-items:center;gap:8px}
.r20-state .ps-chip{font-size:13px}
.r20-ask{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:var(--a-bg);font-size:13px;color:var(--text)}
.r20-acts{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.r20-acts .ps-btn{width:100%}
.r20-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;padding-top:14px;border-top:1px solid var(--line);font-size:14px}
.r20-facts dt{color:var(--text-3)}.r20-facts dd{margin:0;font-weight:500}
.r20-sec{padding-top:14px;border-top:1px solid var(--line)}
.r20-sec h3{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px;font:600 12px/16px var(--font);
  letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)}
.r20-sec h3 .ps-chip{text-transform:none;letter-spacing:0}
.r20-text{margin:0;font-size:14px;line-height:20px;white-space:pre-line}
.r20-files{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.r20-answers{display:flex;flex-direction:column;gap:2px;margin:0;font-size:13px}
.r20-answers dt{color:var(--text-3);margin-top:6px}.r20-answers dt:first-child{margin-top:0}
.r20-answers dd{margin:0;white-space:pre-line}
.r20-sec .ps-card{border:0;box-shadow:none;background:none}
.r20-sec .ps-card-head{display:none}
.r20-sec .ps-card-body,.r20-sec .ps-card-foot{padding:0;border:0;font-size:13px}
.r20-sec .ps-card-foot{margin-top:8px}
.r20-more{display:flex;flex-wrap:wrap;gap:4px 14px;padding-top:12px;border-top:1px solid var(--line);font-size:13px}
.r20-none{display:flex;flex-direction:column;align-items:center;gap:10px;padding:56px 16px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);color:var(--text-2)}
.r20-none .bi{font-size:30px;color:var(--text-3)}
.r20-none-details{margin-top:14px}
@media (max-width:1023px){ .r20{grid-template-columns:1fr} .r20 .r6-canvas{min-height:40vh} }
.r20-lock{margin:8px 0 0;font-size:13px;color:var(--text-2)}

/* Money (r21-). */
.r21-bar .r21-top{display:flex;align-items:center;gap:12px}
.r21-bar .r21-top h1{margin:0;flex:1}
.r21-since{font-size:12px;color:var(--text-3);background:none;padding:0}
.r21-periods{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.r21-custom{position:relative}
.r21-custom summary{list-style:none;cursor:pointer}
.r21-custom summary::-webkit-details-marker{display:none}
.r21-custom .r9-menu{left:0;right:auto;gap:8px;padding:12px}
.r21-custom label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--text-3)}
.r21-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.r21-kpi{display:flex;flex-direction:column;gap:4px;padding:16px 18px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);color:inherit;text-decoration:none}
a.r21-kpi:hover{border-color:var(--line-strong)}
.r21-kpi small{font-size:13px;color:var(--text-3)}
.r21-kpi b{font-size:28px;line-height:34px;font-weight:700;font-variant-numeric:tabular-nums}
.r21-kpi span{font-size:13px;color:var(--text-2)}
.r21-kpi span.d{color:var(--d-fg);font-weight:600}.r21-kpi span.a{color:var(--a-fg);font-weight:600}
.r21-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px}
.r21-h{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:600 12px/16px var(--font);letter-spacing:.05em;
  text-transform:uppercase;color:var(--text-3)}
.r21-att{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.r21-att:first-of-type{border-top:0}
.r21-att-main{flex:1;min-width:0;display:flex;flex-direction:column}
.r21-att-main b{font-size:14px}.r21-att-main small{font-size:13px;color:var(--text-2)}.r21-att-main small.d{color:var(--d-fg)}
.r21-strip{display:flex;flex-wrap:wrap;gap:8px 28px;margin:0;padding:12px 16px;background:var(--sunken);border-radius:var(--r-lg)}
.r21-strip div{display:flex;flex-direction:column}
.r21-strip dt{font-size:12px;color:var(--text-3)}
.r21-strip dd{margin:0;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.r21-defs{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:13px}
.r21-defs dt{font-weight:600}.r21-defs dd{margin:0;color:var(--text-2)}
.r21-warn{margin:10px 0 0;font-size:13px;color:var(--a-fg)}
.r21-foot{margin:10px 0 0;font-size:12px;color:var(--text-3)}
@media (max-width:900px){ .r21-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} .r21-kpi b{font-size:22px;line-height:28px} }
.r21-total{display:flex;flex-direction:column;gap:6px;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.r21-total small{font-size:13px;color:var(--text-3)}
.r21-total b{font-size:30px;line-height:36px;font-weight:700;font-variant-numeric:tabular-nums}
.r21-total .ps-aging{margin-top:6px}
.r21-aging{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12px;color:var(--text-2)}
.r21-aging i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px}
a.r15-ln{color:inherit;text-decoration:none}
a.r15-ln:hover{background:var(--hover)}
a.r15-what{color:inherit;text-decoration:none}
.r21-when{display:flex;flex-direction:column;min-width:130px;font-size:13px;color:var(--text-2);text-align:right}
.r21-when.d{color:var(--d-fg);font-weight:600}
.r21-when small{font-size:12px;color:var(--text-3);font-weight:400}
.r21-more{margin:0;padding:8px 16px;font-size:12px;color:var(--text-3);border-top:1px solid var(--line)}
.r15-ic.a{background:var(--a-bg);color:var(--a-fg)}
.r21-aging .c0{background:var(--aging-0)} .r21-aging .c1{background:var(--aging-1)} .r21-aging .c2{background:var(--aging-2)} .r21-aging .c3{background:var(--aging-3)}
.r21-quiet{display:flex;align-items:center;gap:6px;margin:0 0 12px;font-size:13px;color:var(--text-3)}
.r21-links{margin:0;font-size:13px;color:var(--text-3)}
.r21-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.r21-filters{display:flex;gap:8px}
.r21-filters .ps-select{width:auto;min-width:130px}
/* Insights: an empty card is one quiet line, not a big empty state. */
.r6-money .ps-card .ps-empty{padding:14px 16px;flex-direction:row;gap:10px;justify-content:flex-start;text-align:left}
.r6-money .ps-card .ps-empty .ps-empty-icon{width:28px;height:28px;font-size:14px;margin:0}
.r6-money .ps-card .ps-empty h2,.r6-money .ps-card .ps-empty p{font-size:13px;font-weight:500;color:var(--text-3);margin:0}
.r6-money .ps-card-foot:empty{display:none}
.r21-kpi em{font-style:normal;font-size:12px;color:var(--text-3)}
.r21-kpi em.a{color:var(--a-fg)}
.r21-kpi em a{color:inherit;text-decoration:underline}
.r21-when .ps-chip{align-self:flex-end}

/* Booking Money (r22-): the money on the left, what to do on the right. */
.r22{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px;align-items:start}
.r22-main{display:flex;flex-direction:column;gap:10px;min-width:0}
.r22-h{margin:10px 0 0;font:600 12px/16px var(--font);letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)}
.r22-side{display:flex;flex-direction:column;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;position:sticky;top:120px}
.r22-acts{flex-direction:column;margin:0}
.r22-acts .ps-btn{width:100%;justify-content:center}
.r22-mini{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;padding-top:14px;border-top:1px solid var(--line)}
.r22-mini dt{font-size:12px;color:var(--text-3)}.r22-mini dd{margin:0;font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.r22-prop{display:flex;align-items:center;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.r22-prop span{flex:1;display:flex;flex-direction:column}.r22-prop b{font-size:14px}.r22-prop small{font-size:12px;color:var(--text-3)}
.r22-line{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--line);font-size:14px}
.r22-line:first-child{border-top:0}
.r22-line small{font-size:12px;color:var(--text-3)}
.r22-line b{font-weight:600;font-variant-numeric:tabular-nums}
.r22-total{background:var(--sunken);font-weight:600}
@media (max-width:1023px){ .r22{grid-template-columns:1fr} .r22-side{position:static;order:-1} }
/* Warnings on this tab are one quiet line, not a colored block. */
#payments .ps-banner{padding:8px 12px;font-size:13px;background:none;border:1px solid var(--line)}
#payments .ps-banner.a{color:var(--text-2)}
#payments .ps-banner.a .bi{color:var(--a-fg)}

/* Calendar (r23-). */
.r23-menu .r9-menu,.r23-key .r9-menu{top:calc(100% + 6px);bottom:auto}
.r23-key .r9-menu{right:0;left:auto;min-width:230px;gap:6px;padding:12px 14px}
.r23-legend span{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2)}
.ps-legend-dot{width:14px;height:10px;border-radius:2px;background:var(--n-bg);border-left:3px solid var(--s-dot);flex:none}
.ps-legend-dot.p{border-left-color:var(--p-dot)}.ps-legend-dot.a{border-left-color:var(--a-dot)}.ps-legend-dot.d{border-left-color:var(--d-dot)}
.ps-legend-dot.hold{border:1.5px dashed var(--p-dot);background:transparent}
.r23-agenda{max-width:760px}
.r4-cal-laptop .ps-capbar{height:3px;opacity:.8}

/* More actions (r24-): a short menu. A dropdown on a laptop, a sheet on a phone. */
.r24{display:flex;flex-direction:column;gap:6px;padding-top:4px}
.r24-group{display:flex;flex-direction:column;padding:4px 0;border-top:1px solid var(--line)}
.r24-group:first-child{border-top:0}
.r24-lab{padding:6px 10px 2px;font:600 11px/16px var(--font);letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)}
.r24-group form{margin:0}
.r24-row{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 10px;border:0;border-radius:var(--r-sm);
  background:none;font:500 14px/20px var(--font);color:var(--text);text-align:left;text-decoration:none;cursor:pointer}
.r24-row:hover{background:var(--hover)}
.r24-row .bi{font-size:15px;color:var(--text-3);width:18px;text-align:center}
.r24-row.danger,.r24-row.danger .bi{color:var(--d-fg)}
@media (min-width:768px){
  #sheet-more{top:118px;right:24px;left:auto;bottom:auto;width:260px;max-height:calc(100vh - 140px);
    border-radius:var(--r-lg);box-shadow:var(--shadow-pop);border:1px solid var(--line);transform:none;animation:none}
  #sheet-more .ps-sheet-handle,#sheet-more .ps-sheet-head{display:none}
  #sheet-more .ps-sheet-body{padding:6px}
  [data-sheet-scrim="sheet-more"]{background:transparent!important}
}

/* Every panel (r25-): a small centred dialog on a laptop, a sheet from the
   bottom on a phone. Never a full-height panel down the right edge. */
.r25-p{margin:0;font-size:14px;color:var(--text-2)}
.r25-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--text-2)}
@media (min-width:768px){
  .r3-sheet:not(#sheet-more){top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);
    width:440px;max-height:min(640px,calc(100vh - 80px));height:auto;border-radius:var(--r-lg);box-shadow:var(--shadow-pop);animation:none;overflow:hidden}
  .r3-sheet:not(#sheet-more) .ps-sheet-handle{display:none}
  .r3-sheet:not(#sheet-more) .ps-sheet-foot{flex-direction:row-reverse;gap:8px}
  .r3-sheet:not(#sheet-more) .ps-sheet-foot .ps-btn.lg{width:auto;flex:1;min-height:40px;font-size:14px}
  .r3-sheet:not(#sheet-more) .ps-sheet-foot .ps-effect{flex:1 0 100%;order:3}
  .r3-sheet:not(#sheet-more) .ps-sheet-foot{flex-wrap:wrap}
}

/* r26: crew pages. One card for tonight, short rows for everything else, and the
   rarely needed bits folded into one line each. */
.r26-h1{margin:0;font-size:26px;line-height:32px;font-weight:700;letter-spacing:-.01em}
.r26-sec{display:flex;flex-direction:column;gap:10px}
.r26-h2{margin:0;display:flex;align-items:center;gap:8px;font-size:17px;line-height:24px;font-weight:600}
.r26-h2 .ps-link{margin-left:auto;font-size:14px;font-weight:500}
.r26-none{margin:0;font-size:14px;color:var(--text-2)}
.r26-list{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.r26-row{display:flex;align-items:center;gap:12px;padding:12px 14px;color:inherit;text-decoration:none;min-height:64px}
.r26-row+.r26-row,.r26-folds>*+*{border-top:1px solid var(--line)}
.r26-row b,.r26-line b{display:block;font-size:15px;line-height:20px;font-weight:600}
.r26-row small,.r26-line small{display:block;font-size:13px;line-height:18px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r26-row .ps-grow,.r26-line .ps-grow{min-width:0}
.r26-row.r26-sub{min-height:44px;padding:8px 14px 12px 70px;border-top:0;color:var(--accent-text);font-weight:600;font-size:14px;gap:8px}
.r26-empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:28px 16px;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);color:var(--text-2);font-size:14px}
.r26-empty i{font-size:26px;color:var(--text-3)}
.r26-empty b{color:var(--text);font-size:16px}

.r26-tonight{display:flex;flex-direction:column;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px}
.r26-t-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.r26-eyebrow{font-size:12px;line-height:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.r26-t-name{margin:-8px 0 0;font-size:22px;line-height:28px;font-weight:700}
.r26-arrive{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.r26-arrive small{width:100%;font-size:13px;color:var(--text-2)}
.r26-arrive b{font-size:40px;line-height:44px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.r26-arrive span{font-size:14px;color:var(--text-2)}
.r26-place{display:flex;gap:10px;align-items:flex-start}
.r26-place>i{font-size:18px;color:var(--text-3);margin-top:1px}
.r26-place b{display:block;font-size:16px;line-height:22px}
.r26-place small{display:block;font-size:14px;line-height:20px;color:var(--text-2)}
.r26-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.r26-btns .ps-btn{min-height:48px;justify-content:center}
.r26-btns .ps-btn:only-child{grid-column:1/-1}
.r26-kit{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.r26-kit li{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--canvas);border:1px solid var(--line);font-size:13px;line-height:18px;font-weight:500}
.r26-kit li:has(.ps-chip){padding:0;border:0;background:none}
.r26-t-more{display:flex;align-items:center;justify-content:space-between;margin:0 -16px -16px;padding:12px 16px;border-top:1px solid var(--line);color:var(--accent-text);font-weight:600;font-size:14px;text-decoration:none}
.r26-tonight .ps-wrapup{margin:0}

.r26-offer{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px 14px}
.r26-offer-head{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.r26-offer-head b{display:block;font-size:16px;line-height:22px}
.r26-offer-head small{display:block;font-size:13px;line-height:18px;color:var(--text-2)}
.r26-offer-facts{display:flex;flex-wrap:wrap;gap:4px 18px}
.r26-offer-facts small,.r26-pay-top small{display:block;font-size:12px;line-height:16px;color:var(--text-3)}
.r26-offer-facts b{font-size:15px;line-height:20px;font-variant-numeric:tabular-nums}
.r26-offer-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.r26-offer-btns .ps-btn{min-height:48px;justify-content:center}
.r26-offer-said{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}

.r26-folds{margin-top:4px}
.r26-fold>summary,.r26-fold-link{display:flex;align-items:center;gap:12px;padding:14px;min-height:56px;cursor:pointer;list-style:none;color:inherit;text-decoration:none}
.r26-fold>summary::-webkit-details-marker{display:none}
.r26-fold h2,.r26-fold-link h2{margin:0;font-size:15px;line-height:20px;font-weight:600}
.r26-fold>summary>i:first-child,.r26-fold-link>i:first-child{font-size:18px;color:var(--text-3);width:20px;text-align:center}
.r26-val{margin-left:auto;font-size:14px;color:var(--text-2);text-align:right}
.r26-caret{color:var(--text-3);transition:transform var(--t-fast)}
.r26-fold[open] .r26-caret{transform:rotate(180deg)}
.r26-fold-body{display:flex;flex-direction:column;gap:12px;padding:0 14px 14px}
.r26-fold-body .ps-card{box-shadow:none}
.r26-pay-top{display:flex;gap:20px;flex-wrap:wrap}
.r26-pay-top b{font-size:18px;font-variant-numeric:tabular-nums}
.r26-line{display:flex;align-items:center;gap:10px}
.r26-line .ps-num{font-weight:600}
.r26-back{display:inline-flex;align-items:center;gap:4px;margin:-4px 0 -12px;min-height:44px;color:var(--accent-text);font-weight:600;font-size:14px;text-decoration:none}
.r26-ic{font-size:18px;color:var(--text-3);width:24px;text-align:center;flex:none}
.r26-row .ps-link{font-weight:600;font-size:14px}
.r26-label{margin:0;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.r26-row .ps-btn.icon.sm{flex:none}
.r26-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:-8px}
.r26-stats span{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px}
.r26-stats b{display:block;font-size:26px;line-height:30px;font-weight:700;font-variant-numeric:tabular-nums}
.r26-stats small{font-size:13px;color:var(--text-2)}
.r26-stats .is-attn b{color:var(--d-fg)}
.r26-ev>summary{list-style:none;cursor:pointer}
.r26-ev>summary::-webkit-details-marker{display:none}
.r26-ev+.r26-ev{border-top:1px solid var(--line)}
.r26-ev[open]>summary{background:var(--sunken)}
.r26-ev-body{display:flex;flex-direction:column;gap:10px;padding:4px 14px 14px 70px;background:var(--sunken)}
.r26-kv{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:20px;color:var(--text);text-decoration:none}
.r26-kv>i{color:var(--text-3);margin-top:2px}
a.r26-kv span{color:var(--accent-text)}
.r26-who{margin-left:auto;font:500 14px/1 var(--font);color:var(--text);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:8px 28px 8px 10px;min-height:36px}
.r26-others{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--text-2)}
.r26-others span{display:inline-flex;align-items:center;gap:6px}
.r26-offer-head .ps-chip{flex:none}
.ps-field-page .ps-chip{max-width:100%;white-space:normal}
.r22-staff{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.r22-staff-h{padding:10px 12px 6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.r22-staff-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:0;border-top:1px solid var(--line);background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%}
.r22-staff-row:hover{background:var(--hover)}
.r22-staff-row b{display:block;font-size:14px;line-height:18px}
.r22-staff-row small{display:block;font-size:12px;line-height:16px;color:var(--text-2)}
.r22-staff-amt{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;font-size:14px}
.r22-staff-row>.bi{color:var(--text-3);font-size:13px}
.ps-staff-foot:empty{display:none}
/* One equal column per tab, however many there are (it was six fixed columns,
   so five tabs left an empty sixth on the right). */
.ps-tabbar{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}

/* r27: equipment. Two booths, their parts, three levels of problem, paper in rolls. */
.r27-card{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px}
.r27-q{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600}
.r27-q .bi{color:var(--text-3)}
.r27-stepper{display:grid;grid-template-columns:56px 1fr 56px;border:1px solid var(--line-strong);border-radius:var(--r-md);overflow:hidden}
.r27-stepper button{border:0;background:var(--sunken);font:600 22px/1 var(--font);color:var(--text);min-height:56px;cursor:pointer}
.r27-stepper input{border:0;text-align:center;font:700 24px/1 var(--font);color:var(--text);background:var(--surface);min-width:0}
.r27-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px}
.r27-seg label,.r27-chips label{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;min-height:48px;padding:8px 12px;border:1.5px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);font-weight:600;font-size:15px;cursor:pointer}
.r27-seg input,.r27-chips input,.r27-levels input{position:absolute;opacity:0;pointer-events:none}
.r27-seg label.is-on,.r27-chips label.is-on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-text)}
.r27-seg label:has(input:focus-visible),.r27-chips label:has(input:focus-visible),.r27-levels label:has(input:focus-visible){box-shadow:var(--focus-ring)}
.r27-chips{display:flex;flex-wrap:wrap;gap:8px}
.r27-chips label{min-height:44px;font-weight:500;font-size:14px}
.r27-levels{display:flex;flex-direction:column;gap:8px}
.r27-levels label{position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px;border:1.5px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);cursor:pointer}
.r27-levels label .bi{font-size:20px}
.r27-levels label b{display:block;font-size:15px}
.r27-levels label small{display:block;font-size:13px;color:var(--text-2)}
.r27-levels label.t-n .bi{color:var(--text-3)}
.r27-levels label.t-a .bi{color:var(--a-fg)}
.r27-levels label.t-d .bi{color:var(--d-fg)}
.r27-levels label.is-on{border-color:var(--accent);background:var(--accent-soft)}
.r27-levels label.t-d.is-on{border-color:var(--d-fg);background:var(--d-bg)}
.r27-page{display:flex;flex-direction:column;gap:24px;max-width:960px}
.r27-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.r27-head .ps-page-title{margin:0}
@media (max-width:767px){ .r27-head{justify-content:flex-end} }
.r27-sec{display:flex;flex-direction:column;gap:10px}
.r27-h2{margin:0;display:flex;align-items:center;gap:8px;font-size:17px;font-weight:600}
.r27-h2 .ps-link{margin-left:auto;font-size:14px;font-weight:500}
.r27-booths{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.r27-booth{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px}
.r27-booth.is-down{border-color:var(--d-fg)}
.r27-booth-top{display:flex;align-items:center;gap:12px}
.r27-booth-top b{display:block;font-size:16px}
.r27-booth-top small{display:block;font-size:13px;color:var(--text-2)}
.r27-icon{width:40px;height:40px;border-radius:var(--r-md);background:var(--sunken);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--text-2);flex:none}
.r27-count{display:flex;align-items:baseline;gap:8px}
.r27-count b{font-size:36px;line-height:40px;font-weight:700;font-variant-numeric:tabular-nums}
.r27-count span{font-size:14px;color:var(--text-2)}
.r27-down{margin:0;display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--d-fg)}
.r27-parts{margin:0;font-size:13px;color:var(--text-2)}
.r27-lvl{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;background:var(--n-bg);color:var(--n-fg)}
.r27-lvl.t-a{background:var(--a-bg);color:var(--a-fg)}
.r27-lvl.t-d{background:var(--d-bg);color:var(--d-fg)}
.r27-paper{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px}
.r27-paper-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.r27-btns{display:flex;flex-wrap:wrap;gap:8px}
.r27-linkbtn{background:none;border:0;padding:0;font:inherit;cursor:pointer}
.r27-log{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:8px}
.r27-log div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:14px}
.r27-log small{color:var(--text-3)}
.r27-risk{display:flex;flex-direction:column;gap:8px;border:1px solid var(--d-fg);background:var(--d-bg);border-radius:var(--r-lg);padding:14px 16px}
.r27-risk h2{margin:0;display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--d-fg)}
.r27-risk-row{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:var(--r-md);padding:8px 10px}
.r27-risk-row b{display:block;font-size:14px}
.r27-risk-row small{display:block;font-size:13px;color:var(--text-2)}
.r27-reports{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.r27-chips[hidden],.r27-page [hidden],[data-broken][hidden]{display:none!important}
@media (min-width:768px){ .r27-levels-row{flex-direction:row} .r27-levels-row label{flex:1} }

/* Send proposal › They already chose */
.r22-pick{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 0;border-bottom:1px solid var(--line)}
.r22-pick>span:first-child{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.r22-pick>span:first-child b{font-weight:600}
.r22-step{display:inline-flex;align-items:center;gap:8px}
.r22-step output{min-width:20px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.r22-pick.is-on>span:first-child b{color:var(--accent)}
[data-chosen-only][hidden],[data-proposal-only][hidden],[data-chosen][hidden],.r22-pick[hidden]{display:none!important}
#proposal-form .r3-switch{display:inline-flex;align-items:center;gap:10px;font-weight:600}