/* Truvi product theme: the component layer that makes the app read like vitruvias.ai (design/STYLE.md on the site).
   Loaded last, after every page sheet, so these rules win. Tokens live in truvi-system.css section 16 (light) and its
   dark block; this file only applies them to the product's real class names: type, buttons, cards, inputs, chips, menus,
   dialogs, focus. Fonts: Poppins + Inter, declared once in airbnb-home.css. Dark mode is parked (theme-init.js forces
   light); the rules below are token-driven so they hold when it returns. */

/* ---- 1. Type ---- */
body.preview-ui{font-family:var(--sans-app);font-size:14px;line-height:1.5;color:var(--pv-ink);background:var(--pv-bg);-webkit-font-smoothing:antialiased}
body.preview-ui :is(button,input,select,textarea){font-family:var(--sans-app)}
body.preview-ui :is(h1,h2,h3,h4){font-family:var(--sans-brand);font-weight:600;letter-spacing:-.02em;color:var(--pv-ink);text-wrap:balance}
body.preview-ui h1{font-size:28px;line-height:1.15}
body.preview-ui h2{font-size:20px;line-height:1.2}
body.preview-ui :is(h3,h4){font-size:16px;line-height:1.3;letter-spacing:-.01em}
body.preview-ui table{font-size:13px}
body.preview-ui :is(.eyebrow,.j-kicker){font:600 12px/1.4 var(--sans-app);letter-spacing:.06em;text-transform:uppercase;color:var(--pv-muted)}
/* big numbers: DM Sans 500, tight */
body.preview-ui :is(.inv-stat-copy strong,.dg-stat strong,.ov-phase-btn b,.lab-stat strong,.feed-figure--number strong,.feed-figure-value,.cc-tile-count strong){font-family:var(--sans-brand);font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* ---- 2. Header rail: the lit tab is ink with an ink underline; the wordmark is ink, like the site ---- */
body.preview-ui .cosmo-header.product-header{background:var(--pv-surface);border-bottom:1px solid var(--pv-line-2)}
body.preview-ui .cosmo-header.product-header .preview-word{display:block;height:22px;width:auto;color:var(--pv-ink);padding:0;margin:0}/* the site's svg wordmark (wordmark.js): 22px, 19px below 860px, ink via currentColor in both themes */
@media(max-width:860px){body.preview-ui .cosmo-header.product-header .preview-word{height:19px}}
body.preview-ui .cosmo-header.product-header .product-nav-icon{color:var(--pv-ink-2)}
body.preview-ui .cosmo-header.product-header .product-nav-icon:hover{color:var(--pv-ink);background:var(--pv-side)}
body.preview-ui .cosmo-header.product-header .product-nav-icon[aria-current=page]{color:var(--pv-ink);background:transparent}
body.preview-ui .cosmo-header.product-header .product-nav-icon[aria-current=page]::after{background:var(--pv-ink)}
body.preview-ui .cosmo-header.product-header .preview-avatar-initials{background:var(--pv-side);color:var(--pv-ink)}
body.preview-ui .cosmo-header.product-header .preview-global-search>input{border-radius:var(--ui-radius);background:var(--pv-surface);border-color:var(--pv-line)}
/* Day / night is parked: the header toggle and the Settings control stay hidden. */
body.preview-ui .cosmo-header.product-header #product-theme,.profile-settings-field:has([data-profile-theme]),.profile-settings-field:has([data-profile-theme])+.profile-settings-note{display:none!important}

/* ---- 3. Buttons: one primary per view (ink fill, white text, 600, 38px, 10px); everything else is white with a hairline ---- */
body.preview-ui :is(.button,.feed-button,.lab-cta,.pv-tc-button,.dg-start,.product-create-trigger){border-radius:var(--ui-radius);font-family:var(--sans-app);font-weight:600;box-shadow:none}
body.preview-ui :is(.button.gold,.j-primary,.j-main-action,.product-create-trigger,.lab-cta,.feed-button--primary,.dg-start){background:var(--pv-accent);color:var(--pv-on-accent);border:1px solid var(--pv-accent)}
body.preview-ui :is(.button.gold,.j-primary,.j-main-action,.product-create-trigger,.lab-cta,.feed-button--primary,.dg-start):hover:not(:disabled){background:var(--pv-accent-hover);border-color:var(--pv-accent-hover);color:var(--pv-on-accent);filter:none}
body.preview-ui .cosmo-header.product-header .product-create-trigger{min-height:38px;height:38px}
body.preview-ui :is(.ws-link-button,.hub-link,.ov-link,.lab-link,.ds-link,.pv-tc-text-link,.pc-link){color:var(--pv-ink);font-weight:500;text-decoration:none}
body.preview-ui :is(.ws-link-button,.hub-link,.ov-link,.lab-link,.ds-link,.pv-tc-text-link,.pc-link):hover{text-decoration:underline;text-underline-offset:3px}

/* ---- 4. Cards and panels: white, 1px line, 16px, no shadow at rest; product fragments 10px with the soft shadow ---- */
body.preview-ui :is(.pc-card,.hub-card,.ds-card,.lab-stat,.lab-results-card,.lab-team-card,.lab-calendar-slot,.cc-tile,.inv-panel,.inv-stat,.inv-health,.rw-block,.rw-area,.rw-map,.rw-saved-row,.dg-hero,.dg-stat,.dg-check,.dg-empty,.plg-card,.plg-placeholder,.ov-area,.ov-connector,.ov-status-card,.ws-section,.ws-empty,.dc-card,.hub-empty,.rw-empty,.inv-empty,.lab-attention){background:var(--pv-surface);border-color:var(--pv-line);border-radius:var(--t-radius-lg);box-shadow:none}
body.preview-ui :is(.hub-empty,.rw-empty,.inv-empty,.dg-empty,.plg-placeholder){border-style:dashed;background:var(--pv-surface)}
body.preview-ui :is(.pc-card,.hub-card,.cc-tile,.rw-area,.ov-area,.inv-stat,.rw-saved-row,.ov-connector):is(:hover,:focus-within){box-shadow:none}
body.preview-ui :is(.ov-area,.rw-area,.inv-stat,.rw-saved-row,.ov-connector,.cc-tile):hover{border-color:var(--pv-ink-2)}
body.preview-ui .ov-area[aria-current]{border-color:var(--pv-ink);box-shadow:inset 0 0 0 1px var(--pv-ink)}
body.preview-ui :is(.cc-mod,.rw-fc-card,.ws-table-scroll){border-radius:var(--ui-radius)}
body.preview-ui :is(.ov-area-icon,.rw-area-icon,.inv-panel-icon,.inv-stat-icon,.rw-page-mark,.cc-tile-icon,.preview-project-icon){background:var(--pv-side);color:var(--pv-ink)}
/* selected rows and pressed states take the selected surface */
body.preview-ui :is(.project-switch-row:hover,.project-switch-row[aria-current],.product-create-item:is(:hover,:focus-visible):not(:disabled),#product-search-results button:is(:hover,[aria-selected=true]),.hub-nav button[aria-current],.lab-project-option[aria-current=true]){background:var(--pv-side);color:var(--pv-ink)}

/* ---- 5. Inputs: white, hairline, 10px, 38px tall; focus is the sky ring ---- */
body.preview-ui :is(.ws-field,.ws-exp-field,.field-label,.hub-form,.ws-form,.profile-settings-field,.rp-row--date) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),select,textarea),body.preview-ui :is(.input,.ws-search,.hub-search input,.rw-search,.rw-saved-tools select,.rw-map-tools select){background:var(--pv-surface);color:var(--pv-ink);border:1px solid var(--pv-line);border-radius:var(--ui-radius);font:400 14px/1.4 var(--sans-app)}
body.preview-ui :is(.ws-field,.ws-exp-field,.field-label,.hub-form,.ws-form,.profile-settings-field) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),select){min-height:var(--t-control-h)}
body.preview-ui :is(input,textarea,select):focus{border-color:var(--pv-line)}
body.preview-ui :is(input,textarea,select):focus-visible{outline:2px solid var(--pv-live);outline-offset:2px}
body.preview-ui input[type=checkbox],body.preview-ui input[type=radio]{accent-color:var(--pv-ink)}
body.preview-ui ::selection{background:var(--pv-live-tint);color:var(--pv-ink)}

/* ---- 6. Status chips: pill, tinted ground, 11.5px 600, always next to a word. Semantic colours only. ---- */
body.preview-ui :is(.ws-status,.ws-exp-status,.ov-status,.lab-status,.ds-pill,.hub-status,.plg-status,.rw-fc-status,.ov-connector-state,.feed-badge,.chat-quick-tag,.dg-type,.cc-status){display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;padding:2px 8px;background:var(--pv-side);color:var(--pv-ink-2);font:600 11.5px/1.5 var(--sans-app);letter-spacing:0;text-transform:none;white-space:nowrap}
body.preview-ui :is(.ws-status,.ws-exp-status,.ov-status,.lab-status,.ds-pill,.hub-status,.rw-fc-status,.cc-status):is([data-status=running i],[data-status=active i],[data-status="in progress" i],[data-status="in use" i],[data-status=ready i],[data-status=review i]){background:var(--pv-info-tint);color:var(--pv-info)}
body.preview-ui :is(.ws-status,.ws-exp-status,.ov-status,.lab-status,.ds-pill,.hub-status,.rw-fc-status,.cc-status):is([data-status=analysis i],[data-status=blocked i],[data-status=reserved i],[data-status=waiting i],[data-status=planning i],[data-status=failed i],[data-status=disposed i],[data-status=stale i]){background:var(--pv-warn-tint);color:var(--pv-warn)}
body.preview-ui :is(.ws-status,.ws-exp-status,.ov-status,.lab-status,.ds-pill,.hub-status,.rw-fc-status,.cc-status):is([data-status=completed i],[data-status=done i],[data-status=available i],[data-status=signed i],[data-status=reviewed i],[data-status=connected i],[data-status=installed i]){background:var(--pv-ok-tint);color:var(--pv-ok)}
body.preview-ui :is(.ws-status,.ws-exp-status,.ov-status,.lab-status,.ds-pill,.hub-status,.rw-fc-status,.cc-status):is([data-status=planned i],[data-status=draft i],[data-status=pending i],[data-status=skipped i],[data-status=archived i],[data-status=consumed i]){background:var(--pv-side);color:var(--pv-ink-2)}
body.preview-ui .plg-status[data-status=installed]{background:var(--pv-ok-tint);color:var(--pv-ok)}
body.preview-ui .ws-doc-tabs button{font-size:12px;letter-spacing:.06em}
body.preview-ui .ws-doc-tabs button[aria-current]{color:var(--pv-ink);border-bottom-color:var(--pv-ink)}
body.preview-ui .ws-doc-tabs button[aria-current] small{background:var(--pv-side);color:var(--pv-ink)}
/* the one highlighted thing: live presence, a running timer */
body.preview-ui .ov-live-card:not(.plain):not(.ready){border-color:var(--pv-live);background:var(--pv-live-tint)}
/* the live card reads as a notification bar: one line, small timer pill, a 2px progress line that follows the state */
body.preview-ui .ov-live-card{padding:9px 14px;gap:12px;min-height:0;border-radius:12px}
body.preview-ui .ov-live-card>span:first-child{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;row-gap:2px}
body.preview-ui .ov-live-card strong{font:600 13.5px/1.3 var(--sans-app)}body.preview-ui .ov-live-card small{margin:0;font-size:12px}
body.preview-ui .ov-live-card .ov-timer{flex:none;padding:3px 10px;border-radius:999px;background:var(--pv-surface);color:var(--pv-ink);font:600 14px/1.3 ui-monospace,SFMono-Regular,monospace;font-variant-numeric:tabular-nums}
body.preview-ui .ov-live-card.ready .ov-timer{color:var(--pv-ok);font-size:13px}
body.preview-ui .ov-live-card .ov-timer-progress{height:2px}
body.preview-ui .ov-live-card:not(.plain):not(.ready) .ov-timer-progress{background:var(--pv-live)}body.preview-ui .ov-live-card.ready .ov-timer-progress{background:var(--pv-ok)}
/* ---- 6b. New since you last looked: a gold ring that travels round the item and one small sparkle. Static under reduced motion. ---- */
@property --fresh-a{syntax:'<angle>';inherits:false;initial-value:0turn}
body.preview-ui .is-fresh{position:relative;isolation:isolate;box-shadow:0 0 0 1px var(--pv-gold-soft),0 0 14px rgba(201,162,39,.22)}
body.preview-ui .is-fresh::after{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;pointer-events:none;z-index:1;background:conic-gradient(from var(--fresh-a),transparent 0 58%,var(--pv-gold-soft) 70%,var(--pv-gold) 77%,#FFF7DC 80%,var(--pv-gold) 83%,var(--pv-gold-soft) 90%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:fresh-ring 2.8s linear infinite}
body.preview-ui .is-fresh::before{content:"";position:absolute;right:10px;top:-5px;width:11px;height:11px;pointer-events:none;z-index:2;background:radial-gradient(circle,#FFF7DC 0 22%,var(--pv-gold) 30% 48%,transparent 52%);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:fresh-twinkle 1.7s ease-in-out infinite}
@keyframes fresh-ring{to{--fresh-a:1turn}}
@keyframes fresh-twinkle{0%,100%{opacity:.25;transform:scale(.7) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(20deg)}}
@media(prefers-reduced-motion:reduce){body.preview-ui .is-fresh::after{animation:none;background:conic-gradient(var(--pv-gold-soft) 0 100%)}body.preview-ui .is-fresh::before{animation:none;opacity:.9}}
body.preview-ui li.is-fresh,body.preview-ui button.is-fresh{border-radius:10px}
body.preview-ui :is(.lab-cal-tevent.experiment,.lab-cal-tevent.deadline){border-left-color:var(--pv-ok);background:var(--pv-ok-tint)}body.preview-ui :is(.lab-cal-tevent.experiment b,.lab-cal-tevent.deadline b){color:var(--pv-ok)}body.preview-ui .lab-cal-dot.experiment{background:var(--pv-ok)}
body.preview-ui #ws-presence:not(:empty)::before,body.preview-ui .rw-map-people .chat-avatar[data-online=true]{box-shadow:0 0 0 2px var(--pv-surface),0 0 0 4px var(--pv-live)}
body.preview-ui #lab-home .lab-note.ready :is(.lab-timer,.lab-timer-progress){color:var(--pv-ok);background:var(--pv-ok-tint)}

/* ---- 7. Menus and dialogs: 12px, hairline, the fragment shadow ---- */
body.preview-ui :is(dialog,.t-menu-list,.ds-more-menu,.product-create-menu,#product-search-results,.ov-phase-pop,.ws-record-popover,.lab-project-menu .t-menu-list,.rp-dialog){border:1px solid var(--pv-line);border-radius:12px;background:var(--pv-surface);color:var(--pv-ink);box-shadow:var(--pv-shadow)}
body.preview-ui dialog::backdrop,.rp-dialog::backdrop{background:rgba(28,32,36,.42)}
body.preview-ui dialog.pm-editor{border:0;border-radius:0;box-shadow:none}
body.preview-ui :is(.t-menu-list,.ds-more-menu,.product-create-menu) button:hover:not(:disabled){background:var(--pv-side)}

/* ---- 8. Focus: one ring everywhere, sky, 2px with 2px offset ---- */
body.preview-ui :is(button,a,input,textarea,select,summary,[role=button],[role=tab],[role=menuitem],[tabindex]:not([tabindex="-1"])):focus-visible{outline:2px solid var(--pv-live);outline-offset:2px;box-shadow:none}

/* ---- 9. Motion: 150ms for hover and press; reduced motion keeps content, drops travel ---- */
body.preview-ui :is(.button,.ov-area,.rw-area,.inv-stat,.cc-tile,.lab-stat,.product-nav-icon){transition-duration:.15s}
@media(prefers-reduced-motion:reduce){body.preview-ui :is(.button,.ov-area,.rw-area,.inv-stat,.cc-tile,.lab-stat,.product-nav-icon){transition:none}}

/* Beta tag: a surface that works but is still settling (Diligence, Chat). Plain text, no claim beyond the word. */
body.preview-ui .t-beta{display:inline-block;vertical-align:middle;margin-left:6px;padding:1px 6px;border:1px solid var(--pv-line);border-radius:999px;background:var(--pv-surface-2);color:var(--pv-ink-2);font:600 10px/1.5 var(--sans-app);letter-spacing:.06em;text-transform:uppercase;font-style:normal}
@media(max-width:400px){body.preview-ui .lab-tab-chat .t-beta{display:none}}/* the Work tab row must fit 320px */
/* One back control everywhere: an arrow and the word Back, a quiet 14 px pill (the command center's .pf-back shares it). */
body.preview-ui :is(.t-back,.pf-back){appearance:none;display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 10px;margin:0 0 2px -10px;border:1px solid transparent;border-radius:999px;background:transparent;font:600 14px/1.3 var(--sans-app,var(--sans));color:var(--pv-ink-2);cursor:pointer;text-decoration:none}body.preview-ui :is(.t-back,.pf-back):hover{color:var(--pv-ink);background:var(--pv-surface-2)}body.preview-ui :is(.t-back,.pf-back):focus-visible{outline:2px solid var(--pv-live);outline-offset:2px}
/* Work hero: the Overview · Team · Chat tabs read as controls in the product's sky blue; the selected one wears the gold. */
body.preview-ui #lab-home .lab-hero-side .lab-tabs button:not([aria-selected=true]){background:var(--pv-live-tint);color:var(--pv-info);border:1px solid color-mix(in srgb,var(--pv-info) 18%,transparent)}
body.preview-ui #lab-home .lab-hero-side .lab-tabs button:not([aria-selected=true]):hover{background:color-mix(in srgb,var(--pv-live) 26%,#fff);color:var(--pv-info);border-color:color-mix(in srgb,var(--pv-info) 40%,transparent)}
body.preview-ui #lab-home .lab-hero-side .lab-tabs button:not([aria-selected=true]) .t-beta{color:var(--pv-info);border-color:color-mix(in srgb,var(--pv-info) 30%,transparent)}
body.preview-ui .lab-cta-ring.is-fresh{border-radius:15px}
/* Sync Your Data: a gold fill with ink text, so it sits with the gold ring and reads as the one warm call on the page. */
body.preview-ui .lab-cta-ring .lab-cta{background:linear-gradient(135deg,#E9C65A 0%,#D4AD35 55%,#C9A227 100%);color:var(--pv-ink);border-color:#C9A227;box-shadow:0 8px 22px rgba(201,162,39,.28),inset 0 1px 0 rgba(255,255,255,.35)}
body.preview-ui .lab-cta-ring .lab-cta:hover:not(:disabled){color:var(--pv-ink);border-color:#CDA62C;background:linear-gradient(135deg,#EDCD68 0%,#D9B33E 55%,#CDA62C 100%);box-shadow:0 12px 28px rgba(201,162,39,.34),inset 0 1px 0 rgba(255,255,255,.35)}
body.preview-ui .lab-cta-ring .lab-cta:active{box-shadow:0 4px 12px rgba(201,162,39,.28)}
body.preview-ui .lab-cta-ring .lab-cta>svg{color:var(--pv-ink);opacity:1}
body.preview-ui .lab-cta-ring .lab-cta.is-shimmer::after{background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%)}
/* People: six soft hues keyed to the name (sky, mint, lilac, peach, sand, rose), ink-dark initials. */
body.preview-ui #lab-home .lab-avatar[data-hue="0"]{background:#E3F1FD;color:#1F5FA8}body.preview-ui #lab-home .lab-avatar[data-hue="1"]{background:#E2F5EA;color:#1F7A4D}body.preview-ui #lab-home .lab-avatar[data-hue="2"]{background:#EEE8FB;color:#5B3FA8}
body.preview-ui #lab-home .lab-avatar[data-hue="3"]{background:#FDEBDD;color:#A8541F}body.preview-ui #lab-home .lab-avatar[data-hue="4"]{background:#FBF1D4;color:#8A6512}body.preview-ui #lab-home .lab-avatar[data-hue="5"]{background:#FCE6EC;color:#A82A52}
body.preview-ui #lab-home .lab-team-add{border-color:color-mix(in srgb,var(--pv-info) 30%,transparent);color:var(--pv-info);background:var(--pv-live-tint)}body.preview-ui #lab-home .lab-team-add:hover{border-color:var(--pv-info);background:color-mix(in srgb,var(--pv-live) 26%,#fff)}
/* Action Bar tiles: the icon discs cycle through the same soft hues (sky, mint, lilac, peach) instead of one grey. */
body.preview-ui #lab-home .lab-stats>.lab-stat:nth-child(4n+1) .lab-disc{background:#E3F1FD;color:#1F5FA8}
body.preview-ui #lab-home .lab-stats>.lab-stat:nth-child(4n+2) .lab-disc{background:#E2F5EA;color:#1F7A4D}
body.preview-ui #lab-home .lab-stats>.lab-stat:nth-child(4n+3) .lab-disc{background:#EEE8FB;color:#5B3FA8}
body.preview-ui #lab-home .lab-stats>.lab-stat:nth-child(4n+4) .lab-disc{background:#FDEBDD;color:#A8541F}
body.preview-ui #lab-home .lab-project-pill-name .lab-disc{background:#E3F1FD;color:#1F5FA8}
/* Selected = gold (kept from the 2026-10-20 colour trial; the cobalt action colour and blue pills were reverted the same day). */
body.preview-ui .cc-range button[aria-pressed=true]{background:var(--pv-selected-fill);color:var(--pv-selected-ink)}
body.preview-ui .cc-pane-menu[open] .cc-pane-burger{background:var(--pv-selected-fill);border-color:#C9A227;color:var(--pv-selected-ink)}
body.preview-ui :is(h1,h2,h3,h4){letter-spacing:-.015em}
body.preview-ui :is(.lab-tabs button[aria-selected=true],.ov-view-tabs [aria-selected=true],.ws-doc-tabs [aria-current=page],.pf-tab.is-active,[data-pf-canvas][aria-pressed=true],.cc-pane-list [aria-current=true]){background:var(--pv-selected-fill);color:var(--pv-selected-ink);border-color:#C9A227;box-shadow:0 0 0 1px rgba(201,162,39,.25)}
body.preview-ui .pf-tab.is-active{border-bottom-color:transparent;border-radius:999px;height:34px;padding:0 14px;margin-bottom:4px}
body.preview-ui #lab-home .lab-hero-side .lab-tabs button[aria-selected=true]{background:var(--pv-selected-fill);color:var(--pv-selected-ink);border:1px solid #C9A227}
/* The Work greeting: Poppins has tall ascenders, so the clipped heading gets room above and below. */
body.preview-ui #lab-home .lab-hero h1{line-height:1.2;padding:.06em 0 .04em;overflow:hidden}