/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-divide-x-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-content:""}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-500:oklch(63.7% .237 25.331);--color-red-700:oklch(50.5% .213 27.518);--color-amber-50:oklch(98.7% .022 95.277);--color-amber-200:oklch(92.4% .12 95.746);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-gray-200:oklch(92.8% .006 264.531);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-2xl:42rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wide:.025em;--tracking-widest:.1em;--leading-tight:1.25;--leading-snug:1.375;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--ease-in:cubic-bezier(.4, 0, 1, 1);--ease-out:cubic-bezier(0, 0, .2, 1);--ease-in-out:cubic-bezier(.4, 0, .2, 1);--animate-spin:spin 1s linear infinite;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-fg-default:var(--pegbo-fg-default);--color-fg-subtle:var(--pegbo-fg-subtle);--color-fg-subtlest:var(--pegbo-fg-subtlest);--color-fg-disabled:var(--pegbo-fg-disabled);--color-fg-inverse:var(--pegbo-fg-inverse);--color-fg-brand:var(--pegbo-fg-brand);--color-fg-brand-bold:var(--pegbo-fg-brand-bold);--color-fg-link:var(--pegbo-fg-link);--color-fg-link-hovered:var(--pegbo-fg-link-hovered);--color-fg-status-danger:var(--pegbo-fg-status-danger);--color-fg-status-danger-bold:var(--pegbo-fg-status-danger-bold);--color-fg-status-success:var(--pegbo-fg-status-success);--color-fg-status-warning:var(--pegbo-fg-status-warning);--color-fg-status-info:var(--pegbo-fg-status-info);--color-fg-accent-red:var(--pegbo-fg-accent-red);--color-fg-accent-red-bold:var(--pegbo-fg-accent-red-bold);--color-fg-accent-amber:var(--pegbo-fg-accent-amber);--color-fg-accent-green:var(--pegbo-fg-accent-green);--color-fg-accent-teal:var(--pegbo-fg-accent-teal);--color-fg-accent-grey:var(--pegbo-fg-accent-grey);--color-surface-page:var(--pegbo-surface-page);--color-surface-default:var(--pegbo-surface-default);--color-surface-raised:var(--pegbo-surface-raised);--color-surface-overlay:var(--pegbo-surface-overlay);--color-surface-inverse:var(--pegbo-surface-inverse);--color-surface-neutral-subtlest:var(--pegbo-surface-neutral-subtlest);--color-surface-neutral-subtle:var(--pegbo-surface-neutral-subtle);--color-surface-neutral-subtle-hovered:var(--pegbo-surface-neutral-subtle-hovered);--color-surface-neutral-subtle-pressed:var(--pegbo-surface-neutral-subtle-pressed);--color-surface-neutral-bold:var(--pegbo-surface-neutral-bold);--color-surface-neutral-boldest:var(--pegbo-surface-neutral-boldest);--color-surface-neutral-boldest-hovered:var(--pegbo-surface-neutral-boldest-hovered);--color-surface-neutral-boldest-pressed:var(--pegbo-surface-neutral-boldest-pressed);--color-surface-brand-subtlest:var(--pegbo-surface-brand-subtlest);--color-surface-brand-subtle:var(--pegbo-surface-brand-subtle);--color-surface-brand-bold:var(--pegbo-surface-brand-bold);--color-surface-brand-bold-hovered:var(--pegbo-surface-brand-bold-hovered);--color-surface-selected:var(--pegbo-surface-selected);--color-surface-selected-hovered:var(--pegbo-surface-selected-hovered);--color-surface-selected-bold:var(--pegbo-surface-selected-bold);--color-surface-input:var(--pegbo-surface-input);--color-surface-input-hovered:var(--pegbo-surface-input-hovered);--color-surface-input-disabled:var(--pegbo-surface-input-disabled);--color-surface-status-danger:var(--pegbo-surface-status-danger);--color-surface-status-danger-bold:var(--pegbo-surface-status-danger-bold);--color-surface-status-danger-bold-hovered:var(--pegbo-surface-status-danger-bold-hovered);--color-surface-status-success:var(--pegbo-surface-status-success);--color-surface-status-success-bold:var(--pegbo-surface-status-success-bold);--color-surface-status-warning:var(--pegbo-surface-status-warning);--color-surface-status-warning-bold:var(--pegbo-surface-status-warning-bold);--color-surface-status-info-bold:var(--pegbo-surface-status-info-bold);--color-surface-accent-red:var(--pegbo-surface-accent-red);--color-surface-accent-amber:var(--pegbo-surface-accent-amber);--color-surface-accent-green:var(--pegbo-surface-accent-green);--color-surface-accent-teal:var(--pegbo-surface-accent-teal);--color-surface-accent-grey:var(--pegbo-surface-accent-grey);--color-outline-subtle:var(--pegbo-outline-subtle);--color-outline-default:var(--pegbo-outline-default);--color-outline-strong:var(--pegbo-outline-strong);--color-outline-disabled:var(--pegbo-outline-disabled);--color-outline-brand:var(--pegbo-outline-brand);--color-outline-focus:var(--pegbo-outline-focus);--color-outline-input:var(--pegbo-outline-input);--color-outline-input-focused:var(--pegbo-outline-input-focused);--color-outline-input-error:var(--pegbo-outline-input-error);--color-outline-status-danger:var(--pegbo-outline-status-danger);--color-outline-status-success:var(--pegbo-outline-status-success);--color-outline-status-warning:var(--pegbo-outline-status-warning);--color-outline-accent-grey:var(--pegbo-outline-accent-grey);--color-outline-accent-red:var(--pegbo-outline-accent-red);--color-outline-accent-amber:var(--pegbo-outline-accent-amber);--color-outline-accent-green:var(--pegbo-outline-accent-green);--color-outline-accent-teal:var(--pegbo-outline-accent-teal)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.\!visible{visibility:visible!important}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.\!static{position:static!important}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{inset-inline:0}.inset-y-0{inset-block:0}.top-0{top:0}.top-1{top:var(--spacing)}.top-1\/2{top:50%}.top-3{top:calc(var(--spacing) * 3)}.top-\[42px\]{top:42px}.top-\[50\%\]{top:50%}.right-0{right:0}.right-3{right:calc(var(--spacing) * 3)}.bottom-0{bottom:0}.bottom-1{bottom:var(--spacing)}.left-0{left:0}.left-1\/2{left:50%}.left-2{left:calc(var(--spacing) * 2)}.left-\[50\%\]{left:50%}.left-\[var\(--pegbo-spacing-lg\)\]{left:var(--pegbo-spacing-lg)}.left-\[var\(--pegbo-spacing-md\)\]{left:var(--pegbo-spacing-md)}.left-\[var\(--pegbo-spacing-sm\)\]{left:var(--pegbo-spacing-sm)}.left-\[var\(--pegbo-spacing-xs\)\]{left:var(--pegbo-spacing-xs)}.isolate{isolation:isolate}.z-0{z-index:0}.z-2{z-index:2}.z-10{z-index:10}.z-50{z-index:50}.z-\[1\]{z-index:1}.z-\[2\]{z-index:2}.order-first{order:-9999}.float-none{float:none}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.-m-\[6px\]{margin:-6px}.m-0{margin:0}.-mx-1{margin-inline:calc(var(--spacing) * -1)}.mx-3{margin-inline:calc(var(--spacing) * 3)}.mx-4{margin-inline:calc(var(--spacing) * 4)}.mx-auto{margin-inline:auto}.-my-4{margin-block:calc(var(--spacing) * -4)}.my-0{margin-block:0}.my-1{margin-block:var(--spacing)}.-mt-1{margin-top:calc(var(--spacing) * -1)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-1\.5{margin-top:calc(var(--spacing) * 1.5)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-8{margin-top:calc(var(--spacing) * 8)}.-mr-1{margin-right:calc(var(--spacing) * -1)}.-mr-4{margin-right:calc(var(--spacing) * -4)}.mr-0{margin-right:0}.mr-1{margin-right:var(--spacing)}.mr-2{margin-right:calc(var(--spacing) * 2)}.mr-auto{margin-right:auto}.mb-0{margin-bottom:0}.mb-1{margin-bottom:var(--spacing)}.mb-1\.5{margin-bottom:calc(var(--spacing) * 1.5)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.ml-0{margin-left:0}.ml-1{margin-left:var(--spacing)}.ml-2{margin-left:calc(var(--spacing) * 2)}.ml-auto{margin-left:auto}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.aspect-square{aspect-ratio:1}.size-2{width:calc(var(--spacing) * 2);height:calc(var(--spacing) * 2)}.size-3{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.size-3\.5{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-5{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.size-10{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10)}.size-12{width:calc(var(--spacing) * 12);height:calc(var(--spacing) * 12)}.size-14{width:calc(var(--spacing) * 14);height:calc(var(--spacing) * 14)}.size-\[--cell-size\]{width:--cell-size;height:--cell-size}.size-\[8px\]{width:8px;height:8px}.size-\[12px\]{width:12px;height:12px}.size-\[14px\]{width:14px;height:14px}.size-\[16px\]{width:16px;height:16px}.size-\[18px\]{width:18px;height:18px}.size-\[20px\]{width:20px;height:20px}.size-\[30px\]{width:30px;height:30px}.size-\[32px\]{width:32px;height:32px}.size-\[34px\]{width:34px;height:34px}.size-\[40px\]{width:40px;height:40px}.size-\[48px\]{width:48px;height:48px}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-2\.5{height:calc(var(--spacing) * 2.5)}.h-3{height:calc(var(--spacing) * 3)}.h-3\.5{height:calc(var(--spacing) * 3.5)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.h-11{height:calc(var(--spacing) * 11)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-24{height:calc(var(--spacing) * 24)}.h-40{height:calc(var(--spacing) * 40)}.h-48{height:calc(var(--spacing) * 48)}.h-64{height:calc(var(--spacing) * 64)}.h-\[--cell-size\]{height:--cell-size}.h-\[\.\.\.\]{height:...}.h-\[3px\]{height:3px}.h-\[4px\]{height:4px}.h-\[6px\]{height:6px}.h-\[8px\]{height:8px}.h-\[12px\]{height:12px}.h-\[16px\]{height:16px}.h-\[20px\]{height:20px}.h-\[22px\]{height:22px}.h-\[24px\]{height:24px}.h-\[26px\]{height:26px}.h-\[30px\]{height:30px}.h-\[32px\]{height:32px}.h-\[34px\]{height:34px}.h-\[38px\]{height:38px}.h-\[40px\]{height:40px}.h-\[44px\]{height:44px}.h-\[48px\]{height:48px}.h-\[300px\]{height:300px}.h-\[320px\]{height:320px}.h-\[360px\]{height:360px}.h-\[var\(--pegbo-shared-height-lg\,48px\)\]{height:var(--pegbo-shared-height-lg,48px)}.h-\[var\(--pegbo-shared-height-md\,40px\)\]{height:var(--pegbo-shared-height-md,40px)}.h-\[var\(--pegbo-shared-height-sm\,34px\)\]{height:var(--pegbo-shared-height-sm,34px)}.h-\[var\(--pegbo-shared-height-xs\,30px\)\]{height:var(--pegbo-shared-height-xs,30px)}.h-\[…\]{height:…}.h-auto{height:auto}.h-dvh{height:100dvh}.h-full{height:100%}.h-px{height:1px}.h-screen{height:100vh}.max-h-96{max-height:calc(var(--spacing) * 96)}.max-h-\[50vh\]{max-height:50vh}.max-h-\[75vh\]{max-height:75vh}.max-h-\[90vh\]{max-height:90vh}.max-h-\[var\(--radix-dropdown-menu-content-available-height\)\]{max-height:var(--radix-dropdown-menu-content-available-height)}.min-h-0{min-height:0}.min-h-6{min-height:calc(var(--spacing) * 6)}.min-h-14{min-height:calc(var(--spacing) * 14)}.min-h-\[\.\.\.\]{min-height:...}.min-h-\[24px\]{min-height:24px}.min-h-\[44px\]{min-height:44px}.min-h-\[64px\]{min-height:64px}.min-h-\[70px\]{min-height:70px}.min-h-\[84px\]{min-height:84px}.min-h-\[90px\]{min-height:90px}.min-h-\[112px\]{min-height:112px}.min-h-\[var\(--pegbo-shared-height-lg\,48px\)\]{min-height:var(--pegbo-shared-height-lg,48px)}.min-h-\[var\(--pegbo-shared-height-md\,40px\)\]{min-height:var(--pegbo-shared-height-md,40px)}.min-h-\[var\(--pegbo-shared-height-sm\,34px\)\]{min-height:var(--pegbo-shared-height-sm,34px)}.min-h-\[var\(--pegbo-shared-height-xs\,30px\)\]{min-height:var(--pegbo-shared-height-xs,30px)}.min-h-screen{min-height:100vh}.w-1\/2{width:50%}.w-1\/3{width:33.3333%}.w-2\.5{width:calc(var(--spacing) * 2.5)}.w-2\/3{width:66.6667%}.w-3{width:calc(var(--spacing) * 3)}.w-3\.5{width:calc(var(--spacing) * 3.5)}.w-3\/4{width:75%}.w-4{width:calc(var(--spacing) * 4)}.w-4\/6{width:66.6667%}.w-5{width:calc(var(--spacing) * 5)}.w-5\/6{width:83.3333%}.w-8{width:calc(var(--spacing) * 8)}.w-10{width:calc(var(--spacing) * 10)}.w-11{width:calc(var(--spacing) * 11)}.w-12{width:calc(var(--spacing) * 12)}.w-16{width:calc(var(--spacing) * 16)}.w-20{width:calc(var(--spacing) * 20)}.w-24{width:calc(var(--spacing) * 24)}.w-28{width:calc(var(--spacing) * 28)}.w-32{width:calc(var(--spacing) * 32)}.w-40{width:calc(var(--spacing) * 40)}.w-48{width:calc(var(--spacing) * 48)}.w-64{width:calc(var(--spacing) * 64)}.w-\[--cell-size\]{width:--cell-size}.w-\[38px\]{width:38px}.w-\[60px\]{width:60px}.w-\[80px\]{width:80px}.w-\[100px\]{width:100px}.w-\[240px\]{width:240px}.w-\[280px\]{width:280px}.w-\[300px\]{width:300px}.w-\[360px\]{width:360px}.w-\[560px\]{width:560px}.w-\[600px\]{width:600px}.w-\[calc\(100vw-32px\)\]{width:calc(100vw - 32px)}.w-fit{width:fit-content}.w-full{width:100%}.w-max{width:max-content}.w-px{width:1px}.max-w-2xl{max-width:var(--container-2xl)}.max-w-\[200px\]{max-width:200px}.max-w-\[280px\]{max-width:280px}.max-w-\[min\(540px\,calc\(100vw-1rem\)\)\]{max-width:min(540px,100vw - 1rem)}.max-w-full{max-width:100%}.max-w-lg{max-width:var(--container-lg)}.max-w-md{max-width:var(--container-md)}.max-w-xl{max-width:var(--container-xl)}.min-w-0{min-width:0}.min-w-6{min-width:calc(var(--spacing) * 6)}.min-w-\[--cell-size\]{min-width:--cell-size}.min-w-\[2px\]{min-width:2px}.min-w-\[8rem\]{min-width:8rem}.min-w-\[24px\]{min-width:24px}.min-w-\[44px\]{min-width:44px}.min-w-\[140px\]{min-width:140px}.min-w-\[160px\]{min-width:160px}.min-w-\[200px\]{min-width:200px}.min-w-\[280px\]{min-width:280px}.min-w-\[720px\]{min-width:720px}.min-w-full{min-width:100%}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.shrink-1{flex-shrink:1}.flex-grow{flex-grow:1}.caption-bottom{caption-side:bottom}.border-collapse{border-collapse:collapse}.origin-\[--radix-dropdown-menu-content-transform-origin\]{transform-origin:--radix-dropdown-menu-content-transform-origin}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-\[-50\%\]{--tw-translate-x:-50%;translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-\[-50\%\]{--tw-translate-y:-50%;translate:var(--tw-translate-x) var(--tw-translate-y)}.rotate-90{rotate:90deg}.rotate-180{rotate:180deg}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-pulse{animation:var(--animate-pulse)}.animate-spin{animation:var(--animate-spin)}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.touch-none{touch-action:none}.resize{resize:both}.resize-y{resize:vertical}.scroll-pt-10{scroll-padding-top:calc(var(--spacing) * 10)}.list-disc{list-style-type:disc}.list-none{list-style-type:none}.appearance-none{appearance:none}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-nowrap{flex-wrap:nowrap}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-0{gap:0}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-\[3px\]{gap:3px}.gap-\[5px\]{gap:5px}.gap-\[6px\]{gap:6px}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-1{column-gap:var(--spacing)}.gap-x-3{column-gap:calc(var(--spacing) * 3)}.gap-y-1{row-gap:var(--spacing)}:where(.divide-x>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(1px * var(--tw-divide-x-reverse));border-inline-end-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)))}:where(.divide-outline-subtle>:not(:last-child)){border-color:var(--color-outline-subtle)}.self-start{align-self:flex-start}.self-stretch{align-self:stretch}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-clip{overflow:clip}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-\[2px\]{border-radius:2px}.rounded-\[4px\]{border-radius:4px}.rounded-\[6px\]{border-radius:6px}.rounded-\[8px\]{border-radius:8px}.rounded-\[10px\]{border-radius:10px}.rounded-\[12px\]{border-radius:12px}.rounded-\[inherit\]{border-radius:inherit}.rounded-\[var\(--pegbo-radius-md\)\]{border-radius:var(--pegbo-radius-md)}.rounded-\[var\(--pegbo-radius-sm\)\]{border-radius:var(--pegbo-radius-sm)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-none{border-radius:0}.rounded-sm{border-radius:var(--radius-sm)}.rounded-t-\[12px\]{border-top-left-radius:12px;border-top-right-radius:12px}.rounded-l-full{border-top-left-radius:3.40282e38px;border-bottom-left-radius:3.40282e38px}.rounded-l-md{border-top-left-radius:var(--radius-md);border-bottom-left-radius:var(--radius-md)}.rounded-r-full{border-top-right-radius:3.40282e38px;border-bottom-right-radius:3.40282e38px}.rounded-r-md{border-top-right-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-0{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-\[var\(--pegbo-outline-accent-grey-strong\)\]{border-color:var(--pegbo-outline-accent-grey-strong)}.border-\[var\(--pegbo-outline-default\)\]{border-color:var(--pegbo-outline-default)}.border-\[var\(--pegbo-outline-input\)\]{border-color:var(--pegbo-outline-input)}.border-\[var\(--pegbo-outline-input-error\)\]{border-color:var(--pegbo-outline-input-error)}.border-\[var\(--pegbo-outline-status-danger\)\]{border-color:var(--pegbo-outline-status-danger)}.border-\[var\(--pegbo-outline-status-info\)\]{border-color:var(--pegbo-outline-status-info)}.border-\[var\(--pegbo-outline-status-success\)\]{border-color:var(--pegbo-outline-status-success)}.border-\[var\(--pegbo-outline-status-warning\)\]{border-color:var(--pegbo-outline-status-warning)}.border-amber-200{border-color:var(--color-amber-200)}.border-fg-default{border-color:var(--color-fg-default)}.border-outline-accent-amber,.border-outline-accent-amber\/30{border-color:var(--color-outline-accent-amber)}@supports (color:color-mix(in lab, red, red)){.border-outline-accent-amber\/30{border-color:color-mix(in oklab, var(--color-outline-accent-amber) 30%, transparent)}}.border-outline-accent-green,.border-outline-accent-green\/30{border-color:var(--color-outline-accent-green)}@supports (color:color-mix(in lab, red, red)){.border-outline-accent-green\/30{border-color:color-mix(in oklab, var(--color-outline-accent-green) 30%, transparent)}}.border-outline-accent-grey,.border-outline-accent-grey\/30{border-color:var(--color-outline-accent-grey)}@supports (color:color-mix(in lab, red, red)){.border-outline-accent-grey\/30{border-color:color-mix(in oklab, var(--color-outline-accent-grey) 30%, transparent)}}.border-outline-accent-red,.border-outline-accent-red\/30{border-color:var(--color-outline-accent-red)}@supports (color:color-mix(in lab, red, red)){.border-outline-accent-red\/30{border-color:color-mix(in oklab, var(--color-outline-accent-red) 30%, transparent)}}.border-outline-accent-teal,.border-outline-accent-teal\/30{border-color:var(--color-outline-accent-teal)}@supports (color:color-mix(in lab, red, red)){.border-outline-accent-teal\/30{border-color:color-mix(in oklab, var(--color-outline-accent-teal) 30%, transparent)}}.border-outline-brand{border-color:var(--color-outline-brand)}.border-outline-default{border-color:var(--color-outline-default)}.border-outline-disabled{border-color:var(--color-outline-disabled)}.border-outline-input{border-color:var(--color-outline-input)}.border-outline-input-error{border-color:var(--color-outline-input-error)}.border-outline-status-danger{border-color:var(--color-outline-status-danger)}.border-outline-status-success{border-color:var(--color-outline-status-success)}.border-outline-status-warning{border-color:var(--color-outline-status-warning)}.border-outline-strong{border-color:var(--color-outline-strong)}.border-outline-subtle{border-color:var(--color-outline-subtle)}.border-transparent{border-color:#0000}.border-t-transparent{border-top-color:#0000}.border-l-transparent{border-left-color:#0000}.\!bg-transparent{background-color:#0000!important}.bg-\[\#2D3342\]{background-color:#2d3342}.bg-\[var\(--pegbo-oslo-500\)\]{background-color:var(--pegbo-oslo-500)}.bg-\[var\(--pegbo-surface-accent-grey\)\]{background-color:var(--pegbo-surface-accent-grey)}.bg-\[var\(--pegbo-surface-brand-bold\)\]{background-color:var(--pegbo-surface-brand-bold)}.bg-\[var\(--pegbo-surface-default\)\]{background-color:var(--pegbo-surface-default)}.bg-\[var\(--pegbo-surface-input\)\]{background-color:var(--pegbo-surface-input)}.bg-\[var\(--pegbo-surface-inverse\)\]{background-color:var(--pegbo-surface-inverse)}.bg-\[var\(--pegbo-surface-neutral-subtle\)\]{background-color:var(--pegbo-surface-neutral-subtle)}.bg-\[var\(--pegbo-surface-status-danger\)\]{background-color:var(--pegbo-surface-status-danger)}.bg-\[var\(--pegbo-surface-status-danger-bold\)\]{background-color:var(--pegbo-surface-status-danger-bold)}.bg-\[var\(--pegbo-surface-status-info\)\]{background-color:var(--pegbo-surface-status-info)}.bg-\[var\(--pegbo-surface-status-info-bold\)\]{background-color:var(--pegbo-surface-status-info-bold)}.bg-\[var\(--pegbo-surface-status-success\)\]{background-color:var(--pegbo-surface-status-success)}.bg-\[var\(--pegbo-surface-status-success-bold\)\]{background-color:var(--pegbo-surface-status-success-bold)}.bg-\[var\(--pegbo-surface-status-warning\)\]{background-color:var(--pegbo-surface-status-warning)}.bg-\[var\(--pegbo-surface-status-warning-bold\)\]{background-color:var(--pegbo-surface-status-warning-bold)}.bg-amber-50{background-color:var(--color-amber-50)}.bg-black\/\[0\.28\]{background-color:#00000047}@supports (color:color-mix(in lab, red, red)){.bg-black\/\[0\.28\]{background-color:color-mix(in oklab, var(--color-black) 28.0%, transparent)}}.bg-current{background-color:currentColor}.bg-fg-default{background-color:var(--color-fg-default)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-outline-brand{background-color:var(--color-outline-brand)}.bg-outline-default{background-color:var(--color-outline-default)}.bg-red-500{background-color:var(--color-red-500)}.bg-surface-accent-amber{background-color:var(--color-surface-accent-amber)}.bg-surface-accent-green{background-color:var(--color-surface-accent-green)}.bg-surface-accent-grey{background-color:var(--color-surface-accent-grey)}.bg-surface-accent-red{background-color:var(--color-surface-accent-red)}.bg-surface-accent-teal{background-color:var(--color-surface-accent-teal)}.bg-surface-brand-bold{background-color:var(--color-surface-brand-bold)}.bg-surface-brand-subtle{background-color:var(--color-surface-brand-subtle)}.bg-surface-brand-subtlest{background-color:var(--color-surface-brand-subtlest)}.bg-surface-default{background-color:var(--color-surface-default)}.bg-surface-input{background-color:var(--color-surface-input)}.bg-surface-input-disabled{background-color:var(--color-surface-input-disabled)}.bg-surface-inverse{background-color:var(--color-surface-inverse)}.bg-surface-neutral-bold{background-color:var(--color-surface-neutral-bold)}.bg-surface-neutral-boldest{background-color:var(--color-surface-neutral-boldest)}.bg-surface-neutral-subtle{background-color:var(--color-surface-neutral-subtle)}.bg-surface-neutral-subtlest{background-color:var(--color-surface-neutral-subtlest)}.bg-surface-overlay\/28{background-color:var(--color-surface-overlay)}@supports (color:color-mix(in lab, red, red)){.bg-surface-overlay\/28{background-color:color-mix(in oklab, var(--color-surface-overlay) 28%, transparent)}}.bg-surface-overlay\/60{background-color:var(--color-surface-overlay)}@supports (color:color-mix(in lab, red, red)){.bg-surface-overlay\/60{background-color:color-mix(in oklab, var(--color-surface-overlay) 60%, transparent)}}.bg-surface-page{background-color:var(--color-surface-page)}.bg-surface-raised{background-color:var(--color-surface-raised)}.bg-surface-selected{background-color:var(--color-surface-selected)}.bg-surface-selected-bold{background-color:var(--color-surface-selected-bold)}.bg-surface-status-danger{background-color:var(--color-surface-status-danger)}.bg-surface-status-danger-bold{background-color:var(--color-surface-status-danger-bold)}.bg-surface-status-info-bold{background-color:var(--color-surface-status-info-bold)}.bg-surface-status-success{background-color:var(--color-surface-status-success)}.bg-surface-status-success-bold{background-color:var(--color-surface-status-success-bold)}.bg-surface-status-warning{background-color:var(--color-surface-status-warning)}.bg-surface-status-warning-bold{background-color:var(--color-surface-status-warning-bold)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.fill-\[\#2D3342\]{fill:#2d3342}.fill-\[var\(--pegbo-surface-inverse\)\]{fill:var(--pegbo-surface-inverse)}.fill-current{fill:currentColor}.fill-surface-inverse{fill:var(--color-surface-inverse)}.stroke-fg-brand-bold{stroke:var(--color-fg-brand-bold)}.stroke-outline-default{stroke:var(--color-outline-default)}.object-cover{object-fit:cover}.p-0{padding:0}.p-0\.5{padding:calc(var(--spacing) * .5)}.p-1{padding:var(--spacing)}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.p-9{padding:calc(var(--spacing) * 9)}.p-\[1px\]{padding:1px}.p-\[6px\]{padding:6px}.px-1{padding-inline:var(--spacing)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-3\.5{padding-inline:calc(var(--spacing) * 3.5)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-\[--cell-size\]{padding-inline:--cell-size}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-5{padding-block:calc(var(--spacing) * 5)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-12{padding-block:calc(var(--spacing) * 12)}.py-16{padding-block:calc(var(--spacing) * 16)}.py-px{padding-block:1px}.pt-0{padding-top:0}.pt-0\.5{padding-top:calc(var(--spacing) * .5)}.pt-1{padding-top:var(--spacing)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pt-6{padding-top:calc(var(--spacing) * 6)}.pr-1{padding-right:var(--spacing)}.pr-1\.5{padding-right:calc(var(--spacing) * 1.5)}.pr-2{padding-right:calc(var(--spacing) * 2)}.pr-2\.5{padding-right:calc(var(--spacing) * 2.5)}.pr-3{padding-right:calc(var(--spacing) * 3)}.pr-4{padding-right:calc(var(--spacing) * 4)}.pr-5{padding-right:calc(var(--spacing) * 5)}.pr-6{padding-right:calc(var(--spacing) * 6)}.pr-7{padding-right:calc(var(--spacing) * 7)}.pr-8{padding-right:calc(var(--spacing) * 8)}.pr-9{padding-right:calc(var(--spacing) * 9)}.pb-1{padding-bottom:var(--spacing)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pb-6{padding-bottom:calc(var(--spacing) * 6)}.pl-1{padding-left:var(--spacing)}.pl-2{padding-left:calc(var(--spacing) * 2)}.pl-2\.5{padding-left:calc(var(--spacing) * 2.5)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-3\.5{padding-left:calc(var(--spacing) * 3.5)}.pl-4{padding-left:calc(var(--spacing) * 4)}.pl-7{padding-left:calc(var(--spacing) * 7)}.pl-8{padding-left:calc(var(--spacing) * 8)}.pl-9{padding-left:calc(var(--spacing) * 9)}.pl-10{padding-left:calc(var(--spacing) * 10)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.font-overline-sm-default{font-family:var(--pegbo-font-family-base);font-size:var(--pegbo-font-size-sm);font-weight:var(--pegbo-font-weight-medium);line-height:var(--pegbo-line-height-sm);letter-spacing:var(--pegbo-letter-spacing-wide);text-transform:uppercase}.font-overline-xs-default{font-family:var(--pegbo-font-family-base);font-size:var(--pegbo-font-size-xs);font-weight:var(--pegbo-font-weight-medium);line-height:var(--pegbo-line-height-xs);letter-spacing:var(--pegbo-letter-spacing-wide);text-transform:uppercase}.font-overline-xs-emphasis{font-family:var(--pegbo-font-family-base);font-size:var(--pegbo-font-size-xs);font-weight:var(--pegbo-font-weight-semibold);line-height:var(--pegbo-line-height-xs);letter-spacing:var(--pegbo-letter-spacing-wide);text-transform:uppercase}.font-body-lg-default{font-family:var(--pegbo-font-family-base);font-size:var(--pegbo-font-size-lg);font-weight:var(--pegbo-font-weight-light);line-height:var(--pegbo-line-height-lg)}.font-body-lg-emphasis{font-family:var(--pegbo-font-family-base);font-size:var(--pegbo-font-size-lg);font-weight:var(--pegbo-font-weight-medium);line-height:var(--pegbo-line-height-lg)}.font-body-md-default{font-family:var(--pegbo-font-family-base);font-size:var(--pegbo-font-size-md);font-weight:var(--pegbo-font-weight-light);line-height:var(--pegbo-line-height-md)}.font-body-md-emphasis{font-family:var(--pegbo-font-family-base);font-size:var(--pegbo-font-size-md);font-weight:var(--pegbo-font-weight-medium);line-height:var(--pegbo-line-height-md)}.font-body-sm-default{font-family:var(--pegbo-font-family-base);font-size:var(--pegbo-font-size-sm);font-weight:var(--pegbo-font-weight-light);line-height:var(--pegbo-line-height-sm)}.font-body-sm-emphasis{font-family:var(--pegbo-font-family-base);font-size:var(--pegbo-font-size-sm);font-weight:var(--pegbo-font-weight-medium);line-height:var(--pegbo-line-height-sm)}.font-body-sm-high{font-family:var(--pegbo-font-family-base);font-size:var(--pegbo-font-size-sm);font-weight:var(--pegbo-font-weight-semibold);line-height:var(--pegbo-line-height-sm)}.font-body-xl-emphasis{font-family:var(--pegbo-font-family-base);font-size:var(--pegbo-font-size-xl);font-weight:var(--pegbo-font-weight-medium);line-height:var(--pegbo-line-height-xl)}.font-body-xs-default{font-family:var(--pegbo-font-family-base);font-size:var(--pegbo-font-size-xs);font-weight:var(--pegbo-font-weight-light);line-height:var(--pegbo-line-height-xs)}.font-body-xs-emphasis{font-family:var(--pegbo-font-family-base);font-size:var(--pegbo-font-size-xs);font-weight:var(--pegbo-font-weight-medium);line-height:var(--pegbo-line-height-xs)}.font-display-lg-default{font-family:var(--pegbo-font-family-base);font-size:var(--pegbo-font-size-4xl);font-weight:var(--pegbo-font-weight-semibold);line-height:var(--pegbo-line-height-4xl)}.font-display-md-default{font-family:var(--pegbo-font-family-base);font-size:var(--pegbo-font-size-3xl);font-weight:var(--pegbo-font-weight-semibold);line-height:var(--pegbo-line-height-3xl)}.font-heading-2xl-default{font-family:var(--pegbo-font-family-base);font-size:var(--pegbo-font-size-2xl);font-weight:var(--pegbo-font-weight-medium);line-height:var(--pegbo-line-height-2xl)}.font-heading-2xl-emphasis{font-family:var(--pegbo-font-family-base);font-size:var(--pegbo-font-size-2xl);font-weight:var(--pegbo-font-weight-semibold);line-height:var(--pegbo-line-height-2xl)}.font-heading-lg-default{font-family:var(--pegbo-font-family-base);font-size:var(--pegbo-font-size-lg);font-weight:var(--pegbo-font-weight-medium);line-height:var(--pegbo-line-height-lg)}.font-heading-xl-emphasis{font-family:var(--pegbo-font-family-base);font-size:var(--pegbo-font-size-xl);font-weight:var(--pegbo-font-weight-semibold);line-height:var(--pegbo-line-height-xl)}.font-\[family-name\:var\(--pegbo-font-family-base\)\]{font-family:var(--pegbo-font-family-base)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[0\.8rem\]{font-size:.8rem}.text-\[13px\]{font-size:13px}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-light{--tw-font-weight:var(--font-weight-light);font-weight:var(--font-weight-light)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.text-ellipsis{text-overflow:ellipsis}.whitespace-normal{white-space:normal}.whitespace-nowrap{white-space:nowrap}.text-\[var\(--pegbo-fg-accent-grey\)\]{color:var(--pegbo-fg-accent-grey)}.text-\[var\(--pegbo-fg-default\)\]{color:var(--pegbo-fg-default)}.text-\[var\(--pegbo-fg-inverse\)\]{color:var(--pegbo-fg-inverse)}.text-\[var\(--pegbo-fg-status-danger\)\]{color:var(--pegbo-fg-status-danger)}.text-\[var\(--pegbo-fg-status-info\)\]{color:var(--pegbo-fg-status-info)}.text-\[var\(--pegbo-fg-status-success\)\]{color:var(--pegbo-fg-status-success)}.text-\[var\(--pegbo-fg-status-success-inverse\)\]{color:var(--pegbo-fg-status-success-inverse)}.text-\[var\(--pegbo-fg-status-warning\)\]{color:var(--pegbo-fg-status-warning)}.text-\[var\(--pegbo-fg-status-warning-inverse\)\]{color:var(--pegbo-fg-status-warning-inverse)}.text-\[var\(--pegbo-fg-subtle\)\]{color:var(--pegbo-fg-subtle)}.text-\[var\(--pegbo-fg-subtlest\)\]{color:var(--pegbo-fg-subtlest)}.text-blue-600{color:var(--color-blue-600)}.text-current{color:currentColor}.text-fg-accent-amber{color:var(--color-fg-accent-amber)}.text-fg-accent-green{color:var(--color-fg-accent-green)}.text-fg-accent-grey{color:var(--color-fg-accent-grey)}.text-fg-accent-red{color:var(--color-fg-accent-red)}.text-fg-accent-red-bold{color:var(--color-fg-accent-red-bold)}.text-fg-accent-teal{color:var(--color-fg-accent-teal)}.text-fg-brand{color:var(--color-fg-brand)}.text-fg-default{color:var(--color-fg-default)}.text-fg-disabled{color:var(--color-fg-disabled)}.text-fg-inverse{color:var(--color-fg-inverse)}.text-fg-link{color:var(--color-fg-link)}.text-fg-status-danger{color:var(--color-fg-status-danger)}.text-fg-status-danger-bold{color:var(--color-fg-status-danger-bold)}.text-fg-status-info{color:var(--color-fg-status-info)}.text-fg-status-success{color:var(--color-fg-status-success)}.text-fg-status-warning{color:var(--color-fg-status-warning)}.text-fg-subtle{color:var(--color-fg-subtle)}.text-fg-subtlest{color:var(--color-fg-subtlest)}.text-inherit{color:inherit}.text-surface-input{color:var(--color-surface-input)}.text-white{color:var(--color-white)}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.italic{font-style:italic}.ordinal{--tw-ordinal:ordinal;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.no-underline{text-decoration-line:none}.overline{text-decoration-line:overline}.underline{text-decoration-line:underline}.underline-offset-2{text-underline-offset:2px}.underline-offset-4{text-underline-offset:4px}.caret-transparent{caret-color:#0000}.opacity-0{opacity:0}.opacity-25{opacity:.25}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.opacity-100{opacity:1}.opacity-\[0\.38\]{opacity:.38}.\!shadow-none{--tw-shadow:0 0 #0000!important;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)!important}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[--pegbo-shadow-lg\]{--tw-shadow:--pegbo-shadow-lg;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[--pegbo-shadow-md\]{--tw-shadow:--pegbo-shadow-md;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_1px_4px_rgba\(0\,0\,0\,0\.06\)\]{--tw-shadow:0 1px 4px var(--tw-shadow-color,#0000000f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[inset_0_-1px_0_0_var\(--pegbo-outline-default\)\]{--tw-shadow:inset 0 -1px 0 0 var(--tw-shadow-color,var(--pegbo-outline-default));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[inset_0_0_0_1\.5px_var\(--pegbo-outline-input\)\]{--tw-shadow:inset 0 0 0 1.5px var(--tw-shadow-color,var(--pegbo-outline-input));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[inset_0_0_0_1\.5px_var\(--pegbo-outline-input-error\)\]{--tw-shadow:inset 0 0 0 1.5px var(--tw-shadow-color,var(--pegbo-outline-input-error));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[inset_0_0_0_1px_var\(--pegbo-outline-input\)\]{--tw-shadow:inset 0 0 0 1px var(--tw-shadow-color,var(--pegbo-outline-input));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[inset_0_0_0_1px_var\(--pegbo-outline-input-disabled\)\]{--tw-shadow:inset 0 0 0 1px var(--tw-shadow-color,var(--pegbo-outline-input-disabled));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[inset_0_0_0_1px_var\(--pegbo-outline-input-error\)\]{--tw-shadow:inset 0 0 0 1px var(--tw-shadow-color,var(--pegbo-outline-input-error));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[inset_0_0_0_1px_var\(--pegbo-outline-input-focused\)\]{--tw-shadow:inset 0 0 0 1px var(--tw-shadow-color,var(--pegbo-outline-input-focused));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[inset_0_0_0_1px_var\(--pegbo-outline-inverse\)\]{--tw-shadow:inset 0 0 0 1px var(--tw-shadow-color,var(--pegbo-outline-inverse));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[var\(--pegbo-shadow-default\)\]{--tw-shadow:var(--pegbo-shadow-default);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[var\(--pegbo-shadow-lg\)\]{--tw-shadow:var(--pegbo-shadow-lg);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[var\(--pegbo-shadow-md\)\]{--tw-shadow:var(--pegbo-shadow-md);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[var\(--pegbo-shadow-sm\)\]{--tw-shadow:var(--pegbo-shadow-sm);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring,.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-outline-brand,.ring-outline-brand\/50{--tw-ring-color:var(--color-outline-brand)}@supports (color:color-mix(in lab, red, red)){.ring-outline-brand\/50{--tw-ring-color:color-mix(in oklab, var(--color-outline-brand) 50%, transparent)}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.outline-2{outline-style:var(--tw-outline-style);outline-width:2px}.outline-offset-2{outline-offset:2px}.outline-current{outline-color:currentColor}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[box-shadow\,background-color\]{transition-property:box-shadow,background-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[grid-template-rows\]{transition-property:grid-template-rows;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[stroke-dashoffset\]{transition-property:stroke-dashoffset;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[transform\,width\]{transition-property:transform,width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[width\]{transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-\[120ms\]{--tw-duration:.12s;transition-duration:.12s}.duration-\[150ms\]{--tw-duration:.15s;transition-duration:.15s}.duration-\[var\(--pegbo-motion-duration-fast\)\]{--tw-duration:var(--pegbo-motion-duration-fast);transition-duration:var(--pegbo-motion-duration-fast)}.duration-\[var\(--pegbo-motion-duration-normal\)\]{--tw-duration:var(--pegbo-motion-duration-normal);transition-duration:var(--pegbo-motion-duration-normal)}.ease-\[ease\]{--tw-ease:ease;transition-timing-function:ease}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.outline-none{--tw-outline-style:none;outline-style:none}.select-all{-webkit-user-select:all;user-select:all}.select-none{-webkit-user-select:none;user-select:none}.\[--cell-size\:2rem\]{--cell-size:2rem}.ring-inset{--tw-ring-inset:inset}@media (hover:hover){.group-hover\:underline:is(:where(.group):hover *){text-decoration-line:underline}.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}.group-hover\/clear\:bg-surface-neutral-subtle:is(:where(.group\/clear):hover *){background-color:var(--color-surface-neutral-subtle)}.group-hover\/clear\:text-fg-default:is(:where(.group\/clear):hover *){color:var(--color-fg-default)}}.group-data-\[focused\=true\]\/day\:relative:is(:where(.group\/day)[data-focused=true] *){position:relative}.group-data-\[focused\=true\]\/day\:z-10:is(:where(.group\/day)[data-focused=true] *){z-index:10}.group-data-\[focused\=true\]\/day\:border-outline-focus:is(:where(.group\/day)[data-focused=true] *){border-color:var(--color-outline-focus)}.group-data-\[focused\=true\]\/day\:ring-\[3px\]:is(:where(.group\/day)[data-focused=true] *){--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.group-data-\[focused\=true\]\/day\:ring-outline-focus\/50:is(:where(.group\/day)[data-focused=true] *){--tw-ring-color:var(--color-outline-focus)}@supports (color:color-mix(in lab, red, red)){.group-data-\[focused\=true\]\/day\:ring-outline-focus\/50:is(:where(.group\/day)[data-focused=true] *){--tw-ring-color:color-mix(in oklab, var(--color-outline-focus) 50%, transparent)}}.group-data-\[state\=checked\]\:block:is(:where(.group)[data-state=checked] *),.group-data-\[state\=indeterminate\]\:block:is(:where(.group)[data-state=indeterminate] *){display:block}.peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled~*){cursor:not-allowed}.peer-disabled\:text-fg-disabled:is(:where(.peer):disabled~*){color:var(--color-fg-disabled)}.peer-\[\:empty\]\:hidden:is(:where(.peer):empty~*){display:none}.file\:border-0::file-selector-button{border-style:var(--tw-border-style);border-width:0}.file\:bg-transparent::file-selector-button{background-color:#0000}.file\:text-sm::file-selector-button{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.file\:font-medium::file-selector-button{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.file\:text-fg-default::file-selector-button{color:var(--color-fg-default)}.placeholder\:font-light::placeholder{--tw-font-weight:var(--font-weight-light);font-weight:var(--font-weight-light)}.placeholder\:text-fg-subtlest::placeholder{color:var(--color-fg-subtlest)}.before\:absolute:before{content:var(--tw-content);position:absolute}.before\:inset-\[-6px\]:before{content:var(--tw-content);inset:-6px}.before\:inset-x-0:before{content:var(--tw-content);inset-inline:0}.before\:inset-y-0:before{content:var(--tw-content);inset-block:0}.before\:right-0:before{content:var(--tw-content);right:0}.before\:bottom-0:before{content:var(--tw-content);bottom:0}.before\:h-6:before{content:var(--tw-content);height:calc(var(--spacing) * 6)}.before\:w-6:before{content:var(--tw-content);width:calc(var(--spacing) * 6)}.before\:content-\[\'\'\]:before{--tw-content:"";content:var(--tw-content)}.last\:border-0:last-child{border-style:var(--tw-border-style);border-width:0}.read-only\:resize-none:read-only{resize:none}.read-only\:bg-surface-page:read-only{background-color:var(--color-surface-page)}.read-only\:shadow-\[inset_0_0_0_1px_var\(--pegbo-outline-input-disabled\)\]:read-only{--tw-shadow:inset 0 0 0 1px var(--tw-shadow-color,var(--pegbo-outline-input-disabled));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.empty\:hidden:empty{display:none}@media (hover:hover){.hover\:border-outline-strong:hover{border-color:var(--color-outline-strong)}.hover\:bg-\[var\(--pegbo-surface-neutral-subtlest\)\]:hover{background-color:var(--pegbo-surface-neutral-subtlest)}.hover\:bg-red-700:hover{background-color:var(--color-red-700)}.hover\:bg-surface-brand-bold-hovered:hover{background-color:var(--color-surface-brand-bold-hovered)}.hover\:bg-surface-input-hovered:hover{background-color:var(--color-surface-input-hovered)}.hover\:bg-surface-neutral-boldest-hovered:hover{background-color:var(--color-surface-neutral-boldest-hovered)}.hover\:bg-surface-neutral-subtle:hover{background-color:var(--color-surface-neutral-subtle)}.hover\:bg-surface-neutral-subtle-hovered:hover{background-color:var(--color-surface-neutral-subtle-hovered)}.hover\:bg-surface-neutral-subtlest:hover{background-color:var(--color-surface-neutral-subtlest)}.hover\:bg-surface-page:hover{background-color:var(--color-surface-page)}.hover\:bg-surface-selected-hovered:hover{background-color:var(--color-surface-selected-hovered)}.hover\:bg-surface-status-danger:hover{background-color:var(--color-surface-status-danger)}.hover\:bg-surface-status-danger-bold-hovered:hover{background-color:var(--color-surface-status-danger-bold-hovered)}.hover\:bg-white\/10:hover{background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/10:hover{background-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.hover\:text-fg-default:hover{color:var(--color-fg-default)}.hover\:text-fg-link:hover{color:var(--color-fg-link)}.hover\:text-fg-link-hovered:hover{color:var(--color-fg-link-hovered)}.hover\:text-fg-status-danger-bold:hover{color:var(--color-fg-status-danger-bold)}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-80:hover{opacity:.8}.hover\:opacity-90:hover{opacity:.9}.hover\:opacity-100:hover{opacity:1}.hover\:shadow-\[inset_0_0_0_1\.5px_var\(--pegbo-outline-input-error\)\]:hover{--tw-shadow:inset 0 0 0 1.5px var(--tw-shadow-color,var(--pegbo-outline-input-error));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:shadow-\[inset_0_0_0_1\.5px_var\(--pegbo-outline-input-hovered\)\]:hover{--tw-shadow:inset 0 0 0 1.5px var(--tw-shadow-color,var(--pegbo-outline-input-hovered));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:shadow-\[inset_0_0_0_1px_var\(--pegbo-outline-input\)\]:hover{--tw-shadow:inset 0 0 0 1px var(--tw-shadow-color,var(--pegbo-outline-input));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:shadow-\[inset_0_0_0_1px_var\(--pegbo-outline-input-error\)\]:hover{--tw-shadow:inset 0 0 0 1px var(--tw-shadow-color,var(--pegbo-outline-input-error));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:shadow-\[inset_0_0_0_1px_var\(--pegbo-outline-input-hovered\)\]:hover{--tw-shadow:inset 0 0 0 1px var(--tw-shadow-color,var(--pegbo-outline-input-hovered));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:shadow-\[inset_0_0_0_1px_var\(--pegbo-outline-inverse\)\]:hover{--tw-shadow:inset 0 0 0 1px var(--tw-shadow-color,var(--pegbo-outline-inverse));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:brightness-90:hover{--tw-brightness:brightness(90%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}}.focus\:border-\[var\(--pegbo-outline-input-error\)\]:focus{border-color:var(--pegbo-outline-input-error)}.focus\:border-\[var\(--pegbo-outline-input-focused\)\]:focus{border-color:var(--pegbo-outline-input-focused)}.focus\:border-outline-input-focused:focus{border-color:var(--color-outline-input-focused)}.focus\:bg-surface-neutral-subtle:focus{background-color:var(--color-surface-neutral-subtle)}.focus\:text-\[var\(--pegbo-fg-status-danger\)\]:focus{color:var(--pegbo-fg-status-danger)}.focus\:text-fg-default:focus{color:var(--color-fg-default)}.focus\:text-fg-status-danger:focus{color:var(--color-fg-status-danger)}.focus\:shadow-\[inset_0_0_0_1px_var\(--pegbo-outline-input-error\)\]:focus{--tw-shadow:inset 0 0 0 1px var(--tw-shadow-color,var(--pegbo-outline-input-error));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:shadow-\[inset_0_0_0_1px_var\(--pegbo-outline-input-focused\)\]:focus{--tw-shadow:inset 0 0 0 1px var(--tw-shadow-color,var(--pegbo-outline-input-focused));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-outline-focus:focus{--tw-ring-color:var(--color-outline-focus)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:z-\[2\]:focus-visible{z-index:2}.focus-visible\:rounded-sm:focus-visible{border-radius:var(--radius-sm)}.focus-visible\:bg-surface-neutral-subtle:focus-visible{background-color:var(--color-surface-neutral-subtle)}.focus-visible\:shadow-\[inset_0_0_0_1px_var\(--pegbo-outline-input-focused\)\]:focus-visible{--tw-shadow:inset 0 0 0 1px var(--tw-shadow-color,var(--pegbo-outline-input-focused));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-1:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-\[--pegbo-outline-focus\,\#57b6ed\]:focus-visible{--tw-ring-color:--pegbo-outline-focus,#57b6ed}.focus-visible\:ring-\[var\(--pegbo-fg-inverse\)\]:focus-visible{--tw-ring-color:var(--pegbo-fg-inverse)}.focus-visible\:ring-\[var\(--pegbo-outline-focus\)\]:focus-visible{--tw-ring-color:var(--pegbo-outline-focus)}.focus-visible\:ring-blue-500:focus-visible{--tw-ring-color:var(--color-blue-500)}.focus-visible\:ring-outline-focus:focus-visible{--tw-ring-color:var(--color-outline-focus)}.focus-visible\:ring-outline-status-danger:focus-visible{--tw-ring-color:var(--color-outline-status-danger)}.focus-visible\:ring-offset-0:focus-visible{--tw-ring-offset-width:0px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\:ring-offset-1:focus-visible{--tw-ring-offset-width:1px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\:outline-2:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px}.focus-visible\:outline-\[var\(--pegbo-outline-focus\)\]:focus-visible{outline-color:var(--pegbo-outline-focus)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-inset:focus-visible{--tw-ring-inset:inset}.active\:bg-surface-brand-bold-hovered:active{background-color:var(--color-surface-brand-bold-hovered)}.active\:bg-surface-neutral-bold:active{background-color:var(--color-surface-neutral-bold)}.active\:bg-surface-neutral-boldest-pressed:active{background-color:var(--color-surface-neutral-boldest-pressed)}.active\:bg-surface-neutral-subtle-pressed:active{background-color:var(--color-surface-neutral-subtle-pressed)}.active\:bg-surface-status-danger:active{background-color:var(--color-surface-status-danger)}.active\:bg-surface-status-danger-bold-hovered:active{background-color:var(--color-surface-status-danger-bold-hovered)}.active\:bg-white\/15:active{background-color:#ffffff26}@supports (color:color-mix(in lab, red, red)){.active\:bg-white\/15:active{background-color:color-mix(in oklab, var(--color-white) 15%, transparent)}}.active\:text-fg-link-hovered:active{color:var(--color-fg-link-hovered)}.active\:text-fg-status-danger-bold:active{color:var(--color-fg-status-danger-bold)}.active\:underline:active{text-decoration-line:underline}.active\:brightness-75:active{--tw-brightness:brightness(75%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:resize-none:disabled{resize:none}.disabled\:bg-surface-input-disabled:disabled{background-color:var(--color-surface-input-disabled)}.disabled\:bg-surface-neutral-bold:disabled{background-color:var(--color-surface-neutral-bold)}.disabled\:bg-surface-neutral-subtle:disabled{background-color:var(--color-surface-neutral-subtle)}.disabled\:text-fg-disabled:disabled{color:var(--color-fg-disabled)}.disabled\:opacity-\[0\.38\]:disabled{opacity:.38}.disabled\:shadow-\[inset_0_0_0_1px_var\(--pegbo-outline-inverse\)\]\/40:disabled{--tw-shadow-alpha:40%;--tw-shadow:inset 0 0 0 1px var(--tw-shadow-color,var(--pegbo-outline-inverse))}@supports (color:lab(from red l a b)){.disabled\:shadow-\[inset_0_0_0_1px_var\(--pegbo-outline-inverse\)\]\/40:disabled{--tw-shadow:inset 0 0 0 1px var(--tw-shadow-color,oklab(from var(--pegbo-outline-inverse) l a b / 40%))}}.disabled\:shadow-\[inset_0_0_0_1px_var\(--pegbo-outline-inverse\)\]\/40:disabled{box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.disabled\:shadow-\[inset_0_0_0_1px_var\(--pegbo-outline-input-disabled\)\]:disabled{--tw-shadow:inset 0 0 0 1px var(--tw-shadow-color,var(--pegbo-outline-input-disabled));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.disabled\:placeholder\:text-fg-disabled:disabled::placeholder{color:var(--color-fg-disabled)}@media (hover:hover){.disabled\:hover\:bg-transparent:disabled:hover{background-color:#0000}}.disabled\:active\:bg-transparent:disabled:active{background-color:#0000}.has-focus\:border-outline-focus:has(:focus){border-color:var(--color-outline-focus)}.has-focus\:ring-\[3px\]:has(:focus){--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.has-focus\:ring-outline-focus\/50:has(:focus){--tw-ring-color:var(--color-outline-focus)}@supports (color:color-mix(in lab, red, red)){.has-focus\:ring-outline-focus\/50:has(:focus){--tw-ring-color:color-mix(in oklab, var(--color-outline-focus) 50%, transparent)}}.aria-disabled\:opacity-50[aria-disabled=true]{opacity:.5}.aria-selected\:text-fg-subtle[aria-selected=true]{color:var(--color-fg-subtle)}.data-\[disabled\]\:pointer-events-none[data-disabled]{pointer-events:none}.data-\[disabled\]\:cursor-not-allowed[data-disabled]{cursor:not-allowed}.data-\[disabled\]\:bg-surface-input-disabled[data-disabled]{background-color:var(--color-surface-input-disabled)}.data-\[disabled\]\:text-fg-disabled[data-disabled]{color:var(--color-fg-disabled)}.data-\[disabled\]\:shadow-\[inset_0_0_0_1\.5px_var\(--pegbo-outline-input-disabled\)\][data-disabled]{--tw-shadow:inset 0 0 0 1.5px var(--tw-shadow-color,var(--pegbo-outline-input-disabled));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}@media (hover:hover){.data-\[disabled\]\:hover\:bg-surface-input-disabled[data-disabled]:hover{background-color:var(--color-surface-input-disabled)}.data-\[disabled\]\:hover\:shadow-\[inset_0_0_0_1\.5px_var\(--pegbo-outline-input-disabled\)\][data-disabled]:hover{--tw-shadow:inset 0 0 0 1.5px var(--tw-shadow-color,var(--pegbo-outline-input-disabled));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.data-\[range-end\=true\]\:rounded-md[data-range-end=true]{border-radius:var(--radius-md)}.data-\[range-end\=true\]\:bg-surface-selected-bold[data-range-end=true]{background-color:var(--color-surface-selected-bold)}.data-\[range-end\=true\]\:text-fg-inverse[data-range-end=true]{color:var(--color-fg-inverse)}.data-\[range-end\=true\]\:group-data-\[focused\=true\]\/day\:ring-white[data-range-end=true]:is(:where(.group\/day)[data-focused=true] *){--tw-ring-color:var(--color-white)}@media (hover:hover){.data-\[range-end\=true\]\:hover\:bg-surface-brand-bold-hovered[data-range-end=true]:hover{background-color:var(--color-surface-brand-bold-hovered)}}.data-\[range-middle\=true\]\:rounded-none[data-range-middle=true]{border-radius:0}.data-\[range-middle\=true\]\:bg-surface-selected[data-range-middle=true]{background-color:var(--color-surface-selected)}.data-\[range-middle\=true\]\:text-fg-brand[data-range-middle=true]{color:var(--color-fg-brand)}.data-\[range-middle\=true\]\:text-fg-default[data-range-middle=true]{color:var(--color-fg-default)}.data-\[range-middle\=true\]\:group-data-\[focused\=true\]\/day\:ring-outline-focus[data-range-middle=true]:is(:where(.group\/day)[data-focused=true] *){--tw-ring-color:var(--color-outline-focus)}@media (hover:hover){.data-\[range-middle\=true\]\:hover\:bg-surface-selected-hovered[data-range-middle=true]:hover{background-color:var(--color-surface-selected-hovered)}}.data-\[range-start\=true\]\:rounded-md[data-range-start=true]{border-radius:var(--radius-md)}.data-\[range-start\=true\]\:bg-surface-selected-bold[data-range-start=true]{background-color:var(--color-surface-selected-bold)}.data-\[range-start\=true\]\:text-fg-inverse[data-range-start=true]{color:var(--color-fg-inverse)}.data-\[range-start\=true\]\:group-data-\[focused\=true\]\/day\:ring-white[data-range-start=true]:is(:where(.group\/day)[data-focused=true] *){--tw-ring-color:var(--color-white)}@media (hover:hover){.data-\[range-start\=true\]\:hover\:bg-surface-brand-bold-hovered[data-range-start=true]:hover{background-color:var(--color-surface-brand-bold-hovered)}}.data-\[selected-single\=true\]\:bg-surface-selected-bold[data-selected-single=true]{background-color:var(--color-surface-selected-bold)}.data-\[selected-single\=true\]\:text-fg-inverse[data-selected-single=true]{color:var(--color-fg-inverse)}.data-\[selected-single\=true\]\:group-data-\[focused\=true\]\/day\:ring-white[data-selected-single=true]:is(:where(.group\/day)[data-focused=true] *){--tw-ring-color:var(--color-white)}@media (hover:hover){.data-\[selected-single\=true\]\:hover\:bg-surface-brand-bold-hovered[data-selected-single=true]:hover{background-color:var(--color-surface-brand-bold-hovered)}}.data-\[selected\=true\]\:rounded-none[data-selected=true]{border-radius:0}.data-\[selected\=true\]\:ring-outline-brand\/50[data-selected=true]{--tw-ring-color:var(--color-outline-brand)}@supports (color:color-mix(in lab, red, red)){.data-\[selected\=true\]\:ring-outline-brand\/50[data-selected=true]{--tw-ring-color:color-mix(in oklab, var(--color-outline-brand) 50%, transparent)}}.data-\[state\=active\]\:font-medium[data-state=active]{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.data-\[state\=active\]\:text-fg-default[data-state=active]{color:var(--color-fg-default)}.data-\[state\=checked\]\:bg-surface-brand-bold[data-state=checked]{background-color:var(--color-surface-brand-bold)}.data-\[state\=checked\]\:shadow-\[inset_0_0_0_1\.5px_var\(--pegbo-surface-brand-bold\)\][data-state=checked]{--tw-shadow:inset 0 0 0 1.5px var(--tw-shadow-color,var(--pegbo-surface-brand-bold));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}@media (hover:hover){.data-\[state\=checked\]\:hover\:bg-surface-brand-bold-hovered[data-state=checked]:hover{background-color:var(--color-surface-brand-bold-hovered)}.data-\[state\=checked\]\:hover\:shadow-\[inset_0_0_0_1\.5px_var\(--pegbo-surface-brand-bold-hovered\)\][data-state=checked]:hover{--tw-shadow:inset 0 0 0 1.5px var(--tw-shadow-color,var(--pegbo-surface-brand-bold-hovered));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.data-\[state\=checked\]\:data-\[disabled\]\:bg-surface-neutral-bold[data-state=checked][data-disabled]{background-color:var(--color-surface-neutral-bold)}.data-\[state\=checked\]\:data-\[disabled\]\:shadow-\[inset_0_0_0_1\.5px_var\(--pegbo-surface-neutral-bold\)\][data-state=checked][data-disabled]{--tw-shadow:inset 0 0 0 1.5px var(--tw-shadow-color,var(--pegbo-surface-neutral-bold));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}@media (hover:hover){.data-\[state\=checked\]\:data-\[disabled\]\:hover\:bg-surface-neutral-bold[data-state=checked][data-disabled]:hover{background-color:var(--color-surface-neutral-bold)}.data-\[state\=checked\]\:data-\[disabled\]\:hover\:shadow-\[inset_0_0_0_1\.5px_var\(--pegbo-surface-neutral-bold\)\][data-state=checked][data-disabled]:hover{--tw-shadow:inset 0 0 0 1.5px var(--tw-shadow-color,var(--pegbo-surface-neutral-bold));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.data-\[state\=closed\]\:duration-200[data-state=closed]{--tw-duration:.2s;transition-duration:.2s}.data-\[state\=closed\]\:ease-in[data-state=closed]{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.data-\[state\=indeterminate\]\:bg-surface-brand-bold[data-state=indeterminate]{background-color:var(--color-surface-brand-bold)}.data-\[state\=indeterminate\]\:shadow-\[inset_0_0_0_1\.5px_var\(--pegbo-surface-brand-bold\)\][data-state=indeterminate]{--tw-shadow:inset 0 0 0 1.5px var(--tw-shadow-color,var(--pegbo-surface-brand-bold));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}@media (hover:hover){.data-\[state\=indeterminate\]\:hover\:bg-surface-brand-bold-hovered[data-state=indeterminate]:hover{background-color:var(--color-surface-brand-bold-hovered)}.data-\[state\=indeterminate\]\:hover\:shadow-\[inset_0_0_0_1\.5px_var\(--pegbo-surface-brand-bold-hovered\)\][data-state=indeterminate]:hover{--tw-shadow:inset 0 0 0 1.5px var(--tw-shadow-color,var(--pegbo-surface-brand-bold-hovered));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.data-\[state\=indeterminate\]\:data-\[disabled\]\:bg-surface-neutral-bold[data-state=indeterminate][data-disabled]{background-color:var(--color-surface-neutral-bold)}.data-\[state\=indeterminate\]\:data-\[disabled\]\:shadow-\[inset_0_0_0_1\.5px_var\(--pegbo-surface-neutral-bold\)\][data-state=indeterminate][data-disabled]{--tw-shadow:inset 0 0 0 1.5px var(--tw-shadow-color,var(--pegbo-surface-neutral-bold));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}@media (hover:hover){.data-\[state\=indeterminate\]\:data-\[disabled\]\:hover\:bg-surface-neutral-bold[data-state=indeterminate][data-disabled]:hover{background-color:var(--color-surface-neutral-bold)}.data-\[state\=indeterminate\]\:data-\[disabled\]\:hover\:shadow-\[inset_0_0_0_1\.5px_var\(--pegbo-surface-neutral-bold\)\][data-state=indeterminate][data-disabled]:hover{--tw-shadow:inset 0 0 0 1.5px var(--tw-shadow-color,var(--pegbo-surface-neutral-bold));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.data-\[state\=on\]\:font-medium[data-state=on]{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.data-\[state\=on\]\:text-fg-default[data-state=on]{color:var(--color-fg-default)}.data-\[state\=open\]\:bg-surface-neutral-subtle[data-state=open]{background-color:var(--color-surface-neutral-subtle)}.data-\[state\=open\]\:duration-\[220ms\][data-state=open]{--tw-duration:.22s;transition-duration:.22s}.data-\[state\=selected\]\:bg-\[var\(--pegbo-surface-selected\)\][data-state=selected]{background-color:var(--pegbo-surface-selected)}.data-\[state\=unchecked\]\:hidden[data-state=unchecked]{display:none}@supports (height:100dvh){.supports-\[height\:100dvh\]\:h-dvh{height:100dvh}}@media (prefers-reduced-motion:no-preference){.motion-safe\:animate-spin{animation:var(--animate-spin)}.motion-safe\:duration-200{--tw-duration:.2s;transition-duration:.2s}}@media (prefers-reduced-motion:reduce){.motion-reduce\:animate-none{animation:none}.motion-reduce\:transition-none{transition-property:none}}@media (min-width:40rem){.sm\:min-w-\[420px\]{min-width:420px}.sm\:flex-row{flex-direction:row}.sm\:justify-end{justify-content:flex-end}.sm\:text-left{text-align:left}}@media (min-width:48rem){.md\:flex-row{flex-direction:row}}@media (forced-colors:active){.forced-colors\:outline{outline-style:var(--tw-outline-style);outline-width:1px}.forced-colors\:outline-2{outline-style:var(--tw-outline-style);outline-width:2px}}.\[\&_a\]\:pointer-events-none a{pointer-events:none}.\[\&_a\]\:text-fg-disabled a{color:var(--color-fg-disabled)}.\[\&_a\]\:text-fg-link a{color:var(--color-fg-link)}.\[\&_a\]\:no-underline a{text-decoration-line:none}.\[\&_a\]\:underline a{text-decoration-line:underline}@media (hover:hover){.\[\&_a\]\:hover\:text-fg-link-hovered a:hover{color:var(--color-fg-link-hovered)}}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:size-4 svg{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&_svg\]\:size-\[14px\] svg{width:14px;height:14px}.\[\&_svg\]\:size-\[16px\] svg{width:16px;height:16px}.\[\&_svg\]\:size-\[18px\] svg{width:18px;height:18px}.\[\&_svg\]\:size-\[20px\] svg{width:20px;height:20px}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_tr\]\:bg-transparent tr,.\[\&_tr\:hover\]\:bg-transparent tr:hover{background-color:#0000}.\[\&_tr\:last-child\]\:border-0 tr:last-child{border-style:var(--tw-border-style);border-width:0}.\[\&_tr\:last-child\]\:border-b tr:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.\[\&_tr\:last-child\]\:border-\[var\(--pegbo-outline-default\)\] tr:last-child{border-color:var(--pegbo-outline-default)}.\[\&\:\:-webkit-search-cancel-button\]\:hidden::-webkit-search-cancel-button{display:none}.\[\&\:\:-webkit-search-decoration\]\:hidden::-webkit-search-decoration{display:none}.\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md:first-child[data-selected=true] button{border-top-left-radius:var(--radius-md);border-bottom-left-radius:var(--radius-md)}.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]){padding-right:0}:is(.rtl\:\*\*\:\[\.rdp-button\\_next\>svg\]\:rotate-180:where(:dir(rtl),[dir=rtl],[dir=rtl] *) *):is(.rdp-button_next>svg),:is(.rtl\:\*\*\:\[\.rdp-button\\_previous\>svg\]\:rotate-180:where(:dir(rtl),[dir=rtl],[dir=rtl] *) *):is(.rdp-button_previous>svg){rotate:180deg}.\[\&\:last-child\[data-selected\=true\]_button\]\:rounded-r-md:last-child[data-selected=true] button{border-top-right-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md)}.\[\&\>\*\+\*\]\:border-t>*+*{border-top-style:var(--tw-border-style);border-top-width:1px}.\[\&\>\*\+\*\]\:border-outline-default>*+*{border-color:var(--color-outline-default)}.\[\&\>div\]\:\!block>div{display:block!important}.\[\&\>div\]\:\!table>div{display:table!important}.\[\&\>span\]\:text-xs>span{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.\[\&\>span\]\:opacity-70>span{opacity:.7}.\[\&\>svg\]\:size-3\.5>svg{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.\[\&\>svg\]\:text-fg-subtle>svg{color:var(--color-fg-subtle)}@media (pointer:coarse){.\[\@media\(pointer\:coarse\)\]\:min-h-\[44px\]{min-height:44px}.\[\@media\(pointer\:coarse\)\]\:min-w-\[44px\]{min-width:44px}}[data-slot=card-content] .\[\[data-slot\=card-content\]_\&\]\:bg-transparent,[data-slot=popover-content] .\[\[data-slot\=popover-content\]_\&\]\:bg-transparent{background-color:#0000}}@font-face{font-family:Lexend Deca;font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/lexend-deca-300.ttf)format("truetype")}@font-face{font-family:Lexend Deca;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/lexend-deca-400.ttf)format("truetype")}@font-face{font-family:Lexend Deca;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/lexend-deca-500.ttf)format("truetype")}@font-face{font-family:Lexend Deca;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/lexend-deca-600.ttf)format("truetype")}body{font-family:var(--pegbo-font-family-base)}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}

/*
 * legacy.css — CW hand-written CSS, moved verbatim from the old runtime
 * installStyles() JS template literal in index.ts (PEG-520 Phase 1). This is
 * the pre-Tailwind CW stylesheet: hand-rolled classes (.bp-*, .cd-*, .is-*,
 * etc.), :root variables, and base element overrides (body scroll containment
 * per PEG-435, PageShell slot chrome per PEG-437, ...).
 *
 * The @font-face rules that used to live at the top of this same template
 * literal now live in global.css instead (see global.css header comment).
 *
 * Phase 2+ (out of scope for PEG-520 Phase 1): incrementally replace these
 * classes with Tailwind utilities and shrink/delete this file.
 */

    :root {
      color: var(--pegbo-fg-default);
      background: var(--pegbo-surface-page);
      font-family: var(--pegbo-font-family-base);
      line-height: 1.4;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body,
    #root {
      height: 100%;
    }

    body {
      margin: 0;
      min-width: 320px;
      background: var(--pegbo-surface-page);
      /* PageShell owns the viewport height (h-screen / 100dvh) and its own scroll
         zones (sidebar + body); kill the document scroll so the global header stays
         fixed and only those zones scroll (PEG-435). */
      overflow: hidden;
    }

    /* Navigation host inside the PageShell sidebar scroll zone — carries the chrome
       (padding + surface) the old imperative shell-sidebar used to provide. The DS
       PageShell sidebar column is shrink-0 and hugs its content, so a fixed width here
       pins the sidebar to 240px on every page regardless of nav content — the Projects
       list, its sub-nav, and the Bid Packages sub-nav all render the same width
       (PEG-473 parity). box-sizing keeps the 240px inclusive of the horizontal padding. */
    .workspace-nav-host {
      box-sizing: border-box;
      width: 240px;
      min-height: 100%;
      padding: 16px 8px;
      background: var(--pegbo-surface-default);
    }

    /* Paint the full-height sidebar scroll zone white. The .workspace-nav-host box
       lives inside the Radix ScrollArea's content-sized measure wrapper, so its own
       min-height:100% resolves against an auto-height box and can only cover the
       nav list — below it the page surface showed through. The DS viewport IS the
       full-height box; paint it directly. It carries no className handle (the shell
       passes only role + aria-label via sidebarViewportProps), so it is targeted by
       its aria-label — kept in sync with appShell.tsx sidebarViewportProps. */
    [aria-label='Workspace navigation'] {
      background: var(--pegbo-surface-default);
    }

    /* Pinned content-column regions (PEG-436) that flank the PageShell.Body scroll
       zone: pageHeader + toolbar above Body, footer below. Each collapses when its
       host is empty, so views that don't fill a region (every non-Projects view
       today) render identically to the single-Body layout. */
    .workspace-page-header-host,
    .workspace-toolbar-host,
    .workspace-footer-host {
      flex: 0 0 auto;
    }

    .workspace-page-header-host:empty,
    .workspace-toolbar-host:empty,
    .workspace-footer-host:empty {
      display: none;
    }

    /* Toolbar host inset (24px horizontal) matches the page header / Body / footer,
       so the pinned search/filter row lines up with the table columns. Zero bottom
       padding: the 16px toolbar→table gap is owned solely by the Body scroll zone's
       top padding (py-4), so the controls sit exactly 16px above the table (PEG-462). */
    .workspace-toolbar-host {
      padding: 16px 24px 0;
    }

    /* Footer host: pinned below the Body scroll zone. Mirrors the DS PageShell.Footer
       chrome (top border + surface + inset) so the pagination reads as a distinct
       pinned bar rather than floating under the last table row. */
    .workspace-footer-host {
      padding: 12px 24px;
      background: var(--pegbo-surface-default);
      border-top: 1px solid var(--pegbo-outline-default);
    }

    /* Body zone host (PEG-462): a BOUNDED, non-scrolling flex column (replaces the DS
       PageShell.Body vertical ScrollContainer). Each view owns its scroll — the
       Projects table fills this with a DS ScrollContainer(orientation="both"); other
       views scroll via this host's own overflow-auto. Padding (formerly the DS Body's
       py-4 px-6) lives here so the toolbar→content gap does NOT scroll away. */
    .workspace-view-host {
      flex: 1 1 auto;
      min-height: 0;
      overflow: auto;
      display: flex;
      flex-direction: column;
      padding: 16px 24px;
    }

    /* Projects list scroll body (PEG-436/462): fills the bounded Body host so the
       table's own ScrollContainer resolves against a bounded height. */
    .project-list-scroll {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    /* Imperative island mount node between .project-list-scroll and the DS
       ProjectsTable — kept in the flex chain so the table's ScrollContainer stays
       bounded (PEG-462). */
    .project-table-island {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    /* Center the "no projects yet" empty panel (mirrors the old .project-body-centered). */
    .project-list-scroll-centered {
      align-items: center;
    }

    /* Locked pagination footer layout (PEG-436): a single left-aligned group —
       DS Pagination (controls then page-size selector), then the range label. */
    .projects-footer-bar {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }

    .status {
      min-height: 100vh;
      display: grid;
      align-content: center;
      justify-items: center;
      gap: 16px;
      padding: 32px;
      text-align: center;
    }

    .status-title {
      margin: 0;
      font-size: 24px;
      font-weight: 650;
    }

    .status-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
    }

    .status-meta,
    .status-description {
      max-width: 680px;
      margin: 0;
      color: var(--pegbo-fg-subtle);
      font-size: 13px;
      word-break: break-word;
    }

    .token-input {
      width: min(680px, calc(100vw - 48px));
      min-height: 108px;
      resize: vertical;
      border: 1px solid var(--pegbo-outline-strong);
      border-radius: 6px;
      padding: 12px;
      color: var(--pegbo-fg-default);
      background: var(--pegbo-surface-default);
      font: inherit;
    }

    .button {
      min-height: 40px;
      border: 1px solid var(--pegbo-surface-brand-bold);
      border-radius: 6px;
      padding: 0 16px;
      color: var(--pegbo-fg-inverse);
      background: var(--pegbo-surface-brand-bold);
      font-family: var(--pegbo-font-family-base);
      font-size: var(--pegbo-font-size-md);
      line-height: var(--pegbo-line-height-md);
      font-weight: var(--pegbo-font-weight-medium);
      cursor: pointer;
    }

    .app-frame {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      background: var(--pegbo-surface-page);
    }

    .topbar {
      flex: 0 0 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      background: var(--pegbo-surface-default);
      border-bottom: 1px solid var(--pegbo-outline-default);
    }

    .topbar-brand {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      text-decoration: none;
    }

    .topbar-logo {
      width: 87px;
      height: 31px;
      display: block;
    }

    .topbar-avatar {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--pegbo-fg-link);
      color: var(--pegbo-fg-inverse);
      font-size: 14px;
      line-height: 20px;
      font-weight: 500;
    }

    .shell {
      flex: 1 1 auto;
      display: grid;
      grid-template-columns: 240px 1fr;
      min-height: 0;
    }

    .shell-sidebar {
      border-right: 1px solid var(--pegbo-outline-default);
      padding: 16px 8px;
      background: var(--pegbo-surface-default);
    }

    .nav {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .nav-link {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      min-width: 0;
      min-height: 44px;
      border-radius: 4px;
      padding: 0 12px;
      color: var(--pegbo-fg-default);
      text-decoration: none;
      font-size: 14px;
      line-height: 20px;
      font-weight: 300;
      transition: background var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .nav-link:hover {
      background: var(--pegbo-surface-neutral-subtle);
    }

    .nav-link.is-disabled,
    .nav-link.is-disabled:hover {
      background: transparent;
    }

    .nav-link-icon {
      flex: 0 0 auto;
      color: var(--pegbo-fg-subtle);
    }

    .nav-link-label {
      flex: 1 1 auto;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .nav-link.is-active {
      color: var(--pegbo-fg-default);
      background: var(--pegbo-surface-brand-subtle);
      font-weight: 500;
    }

    .nav-link.is-active .nav-link-icon {
      color: var(--pegbo-fg-default);
    }

    .nav-link.is-disabled {
      color: var(--pegbo-fg-subtlest);
      cursor: not-allowed;
    }

    .nav-link.is-disabled .nav-link-icon {
      color: var(--pegbo-fg-subtlest);
    }

    .nav-group-title {
      margin: 16px 12px 6px;
      font-size: 11px;
      line-height: 16px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--pegbo-fg-subtlest);
    }

    .proj-nav-back {
      display: inline-flex;
      align-self: flex-start;
      align-items: center;
      gap: 7px;
      margin-bottom: 8px;
      padding: 7px 12px;
      border-radius: var(--pegbo-radius-md);
      color: var(--pegbo-fg-default);
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      transition: background var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .proj-nav-back:hover {
      background: var(--pegbo-surface-neutral-subtle);
    }

    .proj-nav-back-icon {
      flex: 0 0 auto;
      color: var(--pegbo-fg-subtle);
    }

    .shell-content {
      display: flex;
      flex-direction: column;
      min-width: 0;
      background: var(--pegbo-surface-page);
    }

    .page {
      max-width: 1080px;
      padding: 24px 32px;
    }

    .page-title {
      margin: 0 0 20px;
      font-size: 28px;
      font-weight: 700;
    }

    .page-subtitle {
      margin: -12px 0 20px;
      color: var(--pegbo-fg-subtle);
      font-size: 14px;
      font-weight: 600;
    }

    .section-title {
      margin: 28px 0 10px;
      font-size: 16px;
      font-weight: 700;
    }

    .kv-list {
      display: grid;
      grid-template-columns: minmax(120px, 180px) 1fr;
      gap: 8px 16px;
      margin: 0;
    }

    .kv-list dt {
      color: var(--pegbo-fg-subtle);
      font-weight: 600;
    }

    .kv-list dd {
      margin: 0;
      overflow-wrap: anywhere;
    }

    .coverage-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
      gap: 10px;
      margin: 0 0 20px;
    }

    .metric {
      border: 1px solid var(--pegbo-outline-default);
      border-radius: 6px;
      padding: 12px;
      background: var(--pegbo-surface-default);
    }

    .metric-value {
      color: var(--pegbo-fg-default);
      font-size: 22px;
      font-weight: 750;
      line-height: 1.1;
    }

    .metric-label {
      margin-top: 4px;
      color: var(--pegbo-fg-subtle);
      font-size: 12px;
      font-weight: 650;
    }

    .project-controls {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px;
      /* No bottom margin: the pinned toolbar host owns the 16px gap to the table
         via the Body scroll zone's top padding (PEG-462). */
      margin: 0;
    }

    .project-search-shell {
      width: 300px;
      flex: 0 1 300px;
      min-height: 36px;
      display: flex;
      align-items: center;
      gap: 4px;
      border: 1px solid var(--pegbo-outline-strong);
      border-radius: 6px;
      padding: 0 12px;
      background: var(--pegbo-surface-default);
      color: var(--pegbo-fg-subtlest);
      transition:
        border-color var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out),
        box-shadow var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .project-search-shell:focus-within {
      border-color: var(--pegbo-surface-brand-bold);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--pegbo-surface-brand-bold) 30%, transparent);
    }

    .project-search-icon {
      flex: 0 0 auto;
      width: 18px;
      height: 18px;
      color: var(--pegbo-fg-subtlest);
    }

    .project-search {
      width: 100%;
      min-width: 0;
      min-height: 34px;
      border: 0;
      padding: 0;
      outline: none;
      background: transparent;
      color: var(--pegbo-fg-default);
      font: inherit;
      font-size: 14px;
      line-height: 20px;
      font-weight: 300;
    }

    .project-search::placeholder {
      color: var(--pegbo-fg-subtlest);
      opacity: 1;
    }

    .project-search::-webkit-search-cancel-button {
      -webkit-appearance: none;
      appearance: none;
    }

    .project-search-clear {
      width: 18px;
      height: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: var(--pegbo-radius-sm);
      padding: 0;
      background: transparent;
      color: var(--pegbo-fg-subtlest);
      cursor: pointer;
      transition:
        color var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out),
        box-shadow var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .project-search-clear:hover {
      color: var(--pegbo-fg-default);
    }

    .project-search-clear:focus-visible {
      outline: none;
      box-shadow: 0 0 0 var(--pegbo-radius-xs) var(--pegbo-outline-focus);
    }

    .project-filter {
      position: relative;
    }

    .project-filter-summary {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      min-height: 36px;
      padding: 0 16px;
      border: 1px solid var(--pegbo-outline-strong);
      border-radius: var(--pegbo-radius-sm);
      background: var(--pegbo-surface-default);
      color: var(--pegbo-fg-default);
      font-size: 14px;
      line-height: 22px;
      font-weight: 500;
      cursor: pointer;
      list-style: none;
      user-select: none;
    }

    .project-filter-summary::-webkit-details-marker {
      display: none;
    }

    .project-filter-summary.is-active {
      background: var(--pegbo-surface-brand-subtle);
      border-color: transparent;
      color: var(--pegbo-fg-default);
    }

    .project-filter-summary.is-active .project-filter-icon {
      color: var(--pegbo-fg-default);
    }

    .project-filter-icon {
      flex: 0 0 auto;
      width: 14px;
      height: 14px;
      color: var(--pegbo-fg-subtle);
    }

    .project-filter-menu {
      position: absolute;
      z-index: 10;
      top: calc(100% + 6px);
      left: 0;
      min-width: 200px;
      display: flex;
      flex-direction: column;
      padding: 6px;
      border: 1px solid var(--pegbo-outline-default);
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-default);
      box-shadow: var(--pegbo-shadow-md);
    }

    .project-filter-option {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px;
      border: 0;
      border-radius: 6px;
      background: transparent;
      color: var(--pegbo-fg-default);
      font: inherit;
      font-size: 14px;
      line-height: 20px;
      font-weight: 300;
      text-align: left;
      cursor: pointer;
    }

    .project-filter-option:hover {
      background: var(--pegbo-surface-neutral-subtlest);
    }

    .project-filter-option.is-selected {
      background: var(--pegbo-surface-brand-subtle);
      font-weight: 500;
    }

    .project-filter-check {
      width: 16px;
      height: 16px;
      flex: 0 0 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--pegbo-surface-brand-bold);
    }

    .project-favorites-button {
      flex: 0 0 auto;
      min-height: 36px;
      gap: 4px;
      padding: 0 16px;
      border: 1px solid transparent;
      color: var(--pegbo-fg-subtle);
      font-weight: 500;
      line-height: 22px;
    }

    .project-favorites-button.is-active {
      color: var(--pegbo-fg-default);
    }

    .project-name {
      /* Flexible column with a 200px floor (PEG-462 spec). max-width:0 stops the
         auto-layout column from expanding to the (nowrap) name's full width — the
         classic table-truncation trick: the column takes its min-width + a share of
         surplus, and the name/subline truncate with an ellipsis + tooltip (handled by
         .project-name-link / .project-source-text + their title attributes) instead
         of stretching the column. */
      min-width: 200px;
      max-width: 0;
      text-align: left;
    }

    .project-favorite-cell {
      width: 28px;
      min-width: 28px;
      max-width: 28px;
      padding-left: 0;
      padding-right: 0;
      text-align: center;
    }

    .project-coverage {
      /* Capped at 560px (PEG-462). A definite width (not width:100%) is required to
         cap the column: under table-layout:auto browsers ignore max-width on cells
         that also declare width:100%. It shrinks toward min-width:340px when space is
         tight; surplus width beyond the cap is absorbed by the flexible Project column. */
      width: 560px;
      min-width: 340px;
      max-width: 560px;
      text-align: left;
    }

    .project-bid-packages-cell {
      /* min = the header + sort-icon width (so the header never wraps), max 200px.
         Prefers the max so it grows with the viewport and only shrinks toward the
         header width when space is tight (PEG-462). */
      width: 200px;
      min-width: 160px;
      max-width: 200px;
      text-align: center;
    }

    .project-trade-partners-cell {
      /* min = the header + sort-icon width (so "Trade partners" never wraps), max
         200px; prefers the max so it grows with the viewport (PEG-462). */
      width: 200px;
      min-width: 180px;
      max-width: 200px;
      text-align: center;
    }

    .project-date-cell {
      width: 160px;
      min-width: 160px;
      white-space: nowrap;
      text-align: left;
    }

    .project-table-card {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Keyboard focus on an off-screen row must clear the sticky column header when
       scrolled into view rather than hide under it. scroll-margin-top offsets the
       scrollIntoView target by the sticky header height (~35px + buffer), on the row
       and its focusable cells. */
    .project-table-card tbody tr,
    .project-table-card tbody tr :is(a, button, [tabindex]) {
      scroll-margin-top: 40px;
    }

    .project-table-card table {
      table-layout: auto;
      width: 100%;
    }

    /* Header chrome for the state-table only (raw <table> in ProjectsStateTable —
       loading / empty / error). The real Projects table is a DS <Table>: its
       TableHeader/TableHead supply the header background and the 40px (h-10)
       overline chrome natively, so scoping the legacy compact override to the state
       card lets the data table read as a native DS table (PEG-462). */
    .project-table-state-card thead tr {
      background: var(--pegbo-surface-neutral-subtle);
    }

    .project-table-state-card th {
      height: 35px;
      padding: 0 10px;
      color: var(--pegbo-fg-subtle);
      font-size: 12px;
      line-height: 18px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }

    /* Keep the DS Table's native header cells on a single line — DS TableHead does
       not set nowrap; height / padding / overline type are all DS defaults. */
    .project-table-card th {
      white-space: nowrap;
    }

    .project-table-card td {
      padding: 16px 10px;
      vertical-align: middle;
      color: var(--pegbo-fg-default);
      /* body/sm/default — matches the DS TableCell default so Projects cells read
         identically to every other DS table (PEG-462). */
      font-size: var(--pegbo-font-size-sm);
      line-height: var(--pegbo-line-height-sm);
      font-weight: var(--pegbo-font-weight-light);
    }

    .project-table-card tbody tr {
      transition: background var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .project-table-card tbody tr:hover {
      background: var(--pegbo-surface-neutral-subtlest);
    }

    .project-table-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }

    .project-table-summary {
      margin: 0;
      text-align: left;
      color: var(--pegbo-fg-subtle);
      font-size: 13px;
      line-height: 18px;
      font-weight: 300;
    }

    .project-name-stack {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }

    .project-name-link {
      display: block;
      max-width: 100%;
      height: auto;
      min-height: 0;
      padding: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--pegbo-fg-link);
      /* body/md/emphasis + fg/link — the primary cell (project name), line 1 (PEG-462). */
      font-size: var(--pegbo-font-size-md);
      line-height: var(--pegbo-line-height-md);
      font-weight: var(--pegbo-font-weight-medium);
      text-decoration: none;
      cursor: pointer;
    }

    .project-name-link:hover {
      text-decoration: underline;
    }

    .project-name-stack .project-name-link {
      display: block;
      justify-content: flex-start;
      padding: 0;
      /* body/md/emphasis weight (overrides the DS Button link weight at this higher
         specificity, keeping line 1 in step with .project-name-link — PEG-462). */
      font-weight: var(--pegbo-font-weight-medium);
      text-align: left;
    }

    .project-source-line {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      color: var(--pegbo-fg-subtle);
      /* body/sm/default + fg/subtle — the primary cell subline (source • owner), line 2 (PEG-462). */
      font-size: var(--pegbo-font-size-sm);
      line-height: var(--pegbo-line-height-sm);
      font-weight: var(--pegbo-font-weight-light);
    }

    .project-source-glyph {
      flex: 0 0 auto;
      color: var(--pegbo-fg-subtlest);
    }

    .project-source-glyph-img {
      width: 14px;
      height: 14px;
      display: block;
      object-fit: contain;
    }

    .project-source-sep {
      flex: 0 0 auto;
      color: var(--pegbo-fg-subtlest);
    }

    .project-source-text {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* Empty-location placeholder ("No address available") is muted further than the
       normal subline (fg-subtle) to read as absent, not as data (PEG-462). */
    .project-source-text.is-empty {
      color: var(--pegbo-fg-subtlest);
    }

    .favorite-star {
      width: 24px;
      height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 0;
      border-radius: var(--pegbo-radius-sm);
      background: none;
      color: var(--pegbo-outline-strong);
      cursor: pointer;
      transition: color var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .favorite-star:hover {
      color: var(--pegbo-fg-subtlest);
    }

    .favorite-star.is-favorite,
    .favorite-star.is-favorite:hover {
      color: var(--pegbo-chart-amber-500);
    }

    .favorite-star:focus-visible {
      outline: none;
      box-shadow: 0 0 0 var(--pegbo-radius-xs) var(--pegbo-outline-focus);
    }

    .coverage-cell {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .coverage-summary-text {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 14px;
      padding-right: 28px;
      color: var(--pegbo-fg-default);
      font-size: 13px;
      line-height: 18px;
      font-weight: 400;
    }

    /* Whole-cell click target for the Bid coverage column (PEG-462): a transparent
       overlay button covering the cell, so a click anywhere in the cell opens the
       bid-packages drawer. The bars/labels sit behind it and stay purely visual. */
    .coverage-cell-open {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      padding: 0;
      border: 0;
      border-radius: var(--pegbo-radius-sm);
      background: transparent;
      cursor: pointer;
    }

    .coverage-cell-open:focus-visible {
      outline: none;
      box-shadow: 0 0 0 var(--pegbo-radius-xs) var(--pegbo-outline-focus);
    }

    /* Expand affordance (top-right), decorative — the overlay button owns the click;
       the hover feedback stays on the icon (as the former standalone button had). */
    .coverage-open-icon {
      position: absolute;
      top: 0;
      right: 0;
      width: 24px;
      height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--pegbo-radius-sm);
      color: var(--pegbo-fg-default);
      transition: background var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .coverage-cell-open:hover .coverage-open-icon {
      background: var(--pegbo-surface-neutral-subtle);
    }

    .coverage-open-icon svg {
      width: 16px;
      height: 16px;
      display: block;
    }

    .coverage-bar-track {
      width: 100%;
    }

    .coverage-single-bar {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .coverage-single-bar > div {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    .coverage-single-bar > span {
      display: block;
      width: 100%;
      height: 8px;
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-neutral-subtle);
    }

    .coverage-single-bar-success > span {
      background: var(--pegbo-surface-status-success-bold);
    }

    .coverage-single-bar-warning > span {
      background: var(--pegbo-chart-orange-500);
    }

    .coverage-single-bar-danger > span {
      background: var(--pegbo-chart-red-500);
    }

    /* The Bid coverage chart uses the CHART palette (not the status palette). The
       single-segment bar above already does (chart-orange / chart-red); the DS
       StatusDistributionBar (multi-segment path) maps warning/danger to
       surface-status-*-bold, so scope an override to the coverage cell so both bars
       read the same Low (chart-orange-500) and No (chart-red-500). Higher specificity
       than the DS utility (two classes vs one) → no !important. success/Good already
       matches (both surface-status-success-bold). (PEG-462) */
    .coverage-cell .bg-surface-status-warning-bold {
      background-color: var(--pegbo-chart-orange-500);
    }

    .coverage-cell .bg-surface-status-danger-bold {
      background-color: var(--pegbo-chart-red-500);
    }

    .coverage-label {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
    }

    .coverage-label span {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      display: inline-block;
    }

    .coverage-no-text span {
      background: var(--pegbo-chart-red-500);
    }

    .coverage-low-text span {
      background: var(--pegbo-chart-orange-500);
    }

    .coverage-good-text span {
      background: var(--pegbo-surface-status-success-bold);
    }

    .table-count-button {
      min-height: 24px;
      padding: 0;
      color: var(--pegbo-fg-default);
      /* body/sm/default — same as every other data cell (PEG-462). */
      font-size: var(--pegbo-font-size-sm);
      line-height: var(--pegbo-line-height-sm);
      font-weight: var(--pegbo-font-weight-light);
      text-decoration: none;
    }

    .project-table-state-card {
      border: 1px solid var(--pegbo-outline-default);
      border-radius: 4px;
      overflow: hidden;
      background: var(--pegbo-surface-default);
    }

    .project-table-state-card tbody tr:hover {
      background: transparent;
    }

    .project-state-cell {
      padding: 0;
    }

    .project-state-panel {
      min-height: 220px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 56px 24px;
      text-align: center;
    }

    .project-state-icon {
      width: 96px;
      height: 96px;
      border-radius: 50%;
      background: var(--pegbo-surface-sunken);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--pegbo-fg-subtlest);
      margin-bottom: 4px;
    }

    .project-state-icon.is-error {
      color: var(--pegbo-fg-status-danger);
    }

    .project-state-icon svg {
      display: block;
    }

    .project-state-copy {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .project-state-copy h2 {
      margin: 0;
      color: var(--pegbo-fg-default);
      font-size: 16px;
      line-height: 22px;
      font-weight: 600;
    }

    .project-state-copy p {
      max-width: 380px;
      margin: 0;
      color: var(--pegbo-fg-subtle);
      font-size: 14px;
      line-height: 20px;
      font-weight: 300;
    }

    .project-skeleton-row:hover {
      background: transparent;
    }

    .project-skeleton-dot,
    .project-skeleton-line,
    .project-skeleton-bar {
      display: block;
      border-radius: var(--pegbo-radius-sm);
      background:
        linear-gradient(
          90deg,
          var(--pegbo-surface-neutral-subtle) 25%,
          var(--pegbo-outline-default) 37%,
          var(--pegbo-surface-neutral-subtle) 63%
        );
      background-size: 400% 100%;
      animation: project-skeleton-shimmer var(--pegbo-motion-duration-row-highlight) var(--pegbo-motion-easing-ease-out) infinite;
    }

    .cw-spin {
      animation: cw-spin var(--pegbo-motion-duration-row-highlight) linear infinite;
      transform-origin: center;
    }

    @media (prefers-reduced-motion: reduce) {
      .cw-spin {
        animation: none;
      }
    }

    .project-skeleton-dot {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      margin: 0 auto;
    }

    .project-skeleton-line {
      height: 12px;
      margin-bottom: 8px;
    }

    .project-skeleton-line.is-wide {
      width: 75%;
    }

    .project-skeleton-line.is-short {
      width: 45%;
      margin-bottom: 0;
    }

    .project-skeleton-line.is-center {
      width: 44px;
      margin: 0 auto;
    }

    .project-skeleton-line.is-date {
      width: 86px;
      margin-bottom: 0;
    }

    .project-skeleton-bar {
      width: 200px;
      max-width: 100%;
      height: 8px;
      border-radius: 999px;
    }

    @keyframes cw-spin {
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes project-skeleton-shimmer {
      0% {
        background-position: 100% 0;
      }

      100% {
        background-position: 0 0;
      }
    }

    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }

    .project-hidden-actions {
      display: none;
    }

    .detail-panel {
      display: grid;
      gap: 14px;
      margin-top: 24px;
      border: 1px solid var(--pegbo-outline-default);
      border-radius: 6px;
      padding: 16px;
      background: var(--pegbo-surface-default);
    }

    .detail-panel .section-title {
      margin: 0;
    }

    .inline-actions {
      justify-content: flex-start;
      margin-top: 14px;
    }

    .empty-state {
      margin: 0;
      color: var(--pegbo-fg-subtle);
      font-weight: 600;
    }

    .project-view {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .page-head {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 24px;
      background: var(--pegbo-surface-default);
      border-bottom: 1px solid var(--pegbo-outline-default);
    }

    .page-head-titles {
      flex: 1 1 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .page-head .page-title {
      margin: 0;
      font-size: 20px;
      line-height: 26px;
      font-weight: 600;
    }

    .page-head .page-sub {
      margin: 0;
      font-size: 14px;
      line-height: 20px;
      font-weight: 300;
      color: var(--pegbo-fg-subtle);
    }

    .page-header-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .project-body {
      flex: 1 1 auto;
      padding: 24px;
      background: var(--pegbo-surface-page);
    }

    .project-body-centered {
      display: flex;
      justify-content: center;
      align-items: flex-start;
    }

    .empty-panel {
      width: min(660px, 100%);
      max-width: 100%;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
      padding-top: 24px;
      text-align: center;
    }

    .empty-panel-illustration {
      width: 180px;
      height: 180px;
      display: block;
      object-fit: contain;
    }

    .empty-panel-copy {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .empty-panel-title {
      margin: 0;
      font-size: 18px;
      line-height: 24px;
      font-weight: 600;
      color: var(--pegbo-fg-default);
    }

    .empty-panel-description {
      margin: 0;
      color: var(--pegbo-fg-subtle);
      font-size: 14px;
      line-height: 20px;
      font-weight: 300;
    }

    .empty-panel-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .empty-panel-separator {
      color: var(--pegbo-fg-subtle);
      font-size: 14px;
      line-height: 20px;
      font-weight: 300;
    }

    .drawer-shell {
      --project-drawer-width: 640px;
      position: fixed;
      inset: 0;
      z-index: 80;
      visibility: hidden;
      pointer-events: none;
      transition:
        visibility var(--pegbo-motion-duration-medium) var(--pegbo-motion-easing-ease-out);
    }

    .drawer-shell.is-open,
    .drawer-shell.is-entering,
    .drawer-shell.is-exiting {
      visibility: visible;
    }

    .drawer-shell.is-open {
      pointer-events: auto;
    }

    .drawer-shell.bp-notes-drawer {
      --project-drawer-width: min(640px, calc(100vw - 64px));
    }

    .drawer-shell.bp-call-drawer {
      --project-drawer-width: min(1000px, calc(100vw - 64px));
    }

    /* Add Trade Partners drawer widens to a split list+map view (PEG-465 L3c). */
    .drawer-shell.bp-add-drawer-wide {
      --project-drawer-width: min(1200px, calc(100vw - 64px));
    }

    .drawer-scrim {
      position: absolute;
      inset: 0;
      border: 0;
      padding: 0;
      background: color-mix(in srgb, var(--pegbo-fg-default) 40%, transparent);
      backdrop-filter: blur(var(--pegbo-radius-xs));
      cursor: pointer;
    }

    .drawer {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: min(var(--project-drawer-width), 100vw);
      max-width: 100%;
      display: flex;
      flex-direction: column;
      background: var(--pegbo-surface-default);
      border: 1px solid var(--pegbo-outline-default);
      border-left: 1px solid var(--pegbo-outline-default);
      box-shadow: var(--pegbo-shadow-lg);
      transform: translateX(100%);
      will-change: transform;
      transition:
        transform var(--pegbo-motion-duration-medium) var(--pegbo-motion-easing-ease-out);
    }

    .drawer-shell.is-open .drawer {
      transform: translateX(0);
    }

    .drawer-shell.is-exiting .drawer {
      transform: translateX(100%);
    }

    .drawer:focus {
      outline: none;
    }

    .drawer-header {
      flex: 0 0 auto;
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px 24px;
      border-bottom: 1px solid var(--pegbo-outline-default);
    }

    .drawer-heading {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .drawer-title {
      margin: 0;
      color: var(--pegbo-fg-default);
      font-size: 18px;
      line-height: 24px;
      font-weight: 500;
      overflow-wrap: anywhere;
    }

    .drawer-subtitle {
      margin: 0;
      color: var(--pegbo-fg-subtle);
      font-size: 14px;
      line-height: 20px;
      font-weight: 300;
    }

    .drawer-close {
      flex: 0 0 auto;
      width: 32px;
      height: 32px;
      min-height: 32px;
      padding: 0;
      border: 1px solid var(--pegbo-outline-default);
      border-radius: 999px;
      color: var(--pegbo-fg-subtle);
    }

    .drawer-body {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
      padding: 24px;
    }

    .drawer-shell.bp-call-drawer .drawer-body {
      padding-top: 0;
    }

    .drawer-body::-webkit-scrollbar {
      width: 12px;
    }

    .drawer-body::-webkit-scrollbar-thumb {
      background: var(--pegbo-fg-subtlest);
      border-radius: var(--pegbo-radius-md);
      border: 3px solid transparent;
      background-clip: padding-box;
    }

    .drawer-body::-webkit-scrollbar-thumb:hover {
      background: var(--pegbo-fg-subtle);
      background-clip: padding-box;
    }

    .drawer-body::-webkit-scrollbar-track {
      background: transparent;
    }

    .bid-packages-drawer-groups {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .bid-packages-drawer-group {
      display: flex;
      flex-direction: column;
    }

    .bid-packages-drawer-group-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 8px;
      color: var(--pegbo-fg-default);
      font-size: 13px;
      line-height: 18px;
      font-weight: 600;
    }

    .bid-packages-drawer-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex: 0 0 8px;
    }

    .bid-packages-drawer-dot.is-no {
      background: var(--pegbo-surface-status-danger-bold);
    }

    .bid-packages-drawer-dot.is-low {
      background: var(--pegbo-surface-status-warning-bold);
    }

    .bid-packages-drawer-dot.is-good {
      background: var(--pegbo-surface-status-success-bold);
    }

    .bid-packages-drawer-row {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 12px 12px 12px 14px;
      border-bottom: 1px solid var(--pegbo-outline-subtle);
    }

    .bid-packages-drawer-row.is-critical {
      border-left: 2px solid var(--pegbo-surface-status-danger-bold);
    }

    .bid-packages-drawer-name {
      align-self: flex-start;
      max-width: 100%;
      height: auto;
      min-height: 0;
      padding: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--pegbo-fg-link);
      font-size: 14px;
      line-height: 20px;
      font-weight: 600;
    }

    .bid-packages-drawer-name-static {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--pegbo-fg-default);
      font-size: 14px;
      line-height: 20px;
      font-weight: 600;
    }

    .bid-packages-drawer-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      color: var(--pegbo-fg-subtle);
      font-size: 13px;
      line-height: 18px;
      font-weight: 300;
    }

    .bid-packages-drawer-meta-item {
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .bid-packages-drawer-meta-item svg {
      flex: 0 0 auto;
      color: var(--pegbo-fg-subtlest);
    }

    .bid-packages-drawer-meta-sep {
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: var(--pegbo-fg-subtlest);
    }

    .bid-packages-drawer-critical {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: var(--pegbo-fg-status-danger);
      font-size: 13px;
      line-height: 18px;
      font-weight: 300;
    }

    .bid-packages-drawer-critical svg {
      flex: 0 0 auto;
    }

    .modal-shell {
      position: fixed;
      inset: 0;
      z-index: 90;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      visibility: hidden;
      pointer-events: none;
      transition: visibility var(--pegbo-motion-duration-medium) var(--pegbo-motion-easing-ease-out);
    }

    .modal-shell.is-open,
    .modal-shell.is-entering,
    .modal-shell.is-exiting {
      visibility: visible;
    }

    .modal-shell.is-open {
      pointer-events: auto;
    }

    .modal-scrim {
      position: absolute;
      inset: 0;
      border: 0;
      padding: 0;
      background: color-mix(in srgb, var(--pegbo-fg-default) 45%, transparent);
      opacity: 0;
      cursor: pointer;
      transition: opacity var(--pegbo-motion-duration-medium) var(--pegbo-motion-easing-ease-out);
    }

    .modal-shell.is-open .modal-scrim,
    .modal-shell.is-entering .modal-scrim {
      opacity: 1;
    }

    .modal {
      position: relative;
      z-index: 1;
      max-width: 100%;
      max-height: calc(100vh - 48px);
      display: flex;
      flex-direction: column;
      background: var(--pegbo-surface-default);
      border-radius: var(--pegbo-radius-md);
      box-shadow: var(--pegbo-shadow-lg);
      overflow: hidden;
      opacity: 0;
      transform: translateY(6px) scale(0.99);
      will-change: transform, opacity;
      transition:
        transform var(--pegbo-motion-duration-medium) var(--pegbo-motion-easing-ease-out),
        opacity var(--pegbo-motion-duration-medium) var(--pegbo-motion-easing-ease-out);
    }

    .modal-shell.is-open .modal,
    .modal-shell.is-entering .modal {
      opacity: 1;
      transform: none;
    }

    .modal:focus {
      outline: none;
    }

    .modal-head {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 18px 20px 12px;
    }

    .modal-title {
      flex: 1 1 0;
      margin: 0;
      color: var(--pegbo-fg-default);
      font-size: 16px;
      line-height: 22px;
      font-weight: 600;
    }

    .modal-x {
      flex: 0 0 auto;
      width: 30px;
      height: 30px;
      min-height: 30px;
      padding: 0;
      border-radius: var(--pegbo-radius-sm);
      color: var(--pegbo-fg-subtle);
    }

    .modal-body {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      padding: 4px 20px;
    }

    .modal-foot {
      flex: 0 0 auto;
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 16px;
      padding: 16px 20px;
      border-top: 1px solid var(--pegbo-outline-default);
    }

    .sync-step {
      display: flex;
      flex-direction: column;
    }

    .sync-brand {
      display: flex;
      align-items: flex-start;
      margin-top: 4px;
    }

    .sync-brand-logo {
      display: block;
      width: min(100%, 185px);
      height: auto;
    }

    .sync-subtitle {
      margin: 12px 0 16px;
      color: var(--pegbo-fg-default);
      font-size: 14px;
      line-height: 20px;
      font-weight: 600;
    }

    .sync-integrations-error {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 8px;
    }

    .sync-integrations-loading {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
      color: var(--pegbo-fg-subtle);
      font-size: 14px;
    }

    .sync-opt-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .sync-opt {
      position: relative;
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 14px 16px;
      border: 1px solid var(--pegbo-outline-default);
      border-radius: var(--pegbo-radius-md);
      cursor: pointer;
      transition:
        border-color var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out),
        background var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out),
        box-shadow var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .sync-opt:hover {
      background: var(--pegbo-surface-neutral-subtle);
    }

    .sync-opt > input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }

    .sync-radio {
      flex: 0 0 18px;
      width: 18px;
      height: 18px;
      margin-top: 1px;
      border: 1.5px solid var(--pegbo-outline-strong);
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: border-color var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .sync-radio::after {
      content: '';
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--pegbo-fg-default);
      transform: scale(0);
      transition: transform var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .sync-opt:has(input:checked) {
      border-color: var(--pegbo-fg-default);
      background: var(--pegbo-surface-neutral-subtle);
      box-shadow: inset 0 0 0 1px var(--pegbo-fg-default);
    }

    .sync-opt:has(input:checked) .sync-radio {
      border-color: var(--pegbo-fg-default);
    }

    .sync-opt:has(input:checked) .sync-radio::after {
      transform: scale(1);
    }

    .sync-opt:has(input:focus-visible) .sync-radio {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--pegbo-surface-brand-bold) 30%, transparent);
    }

    .sync-opt-main {
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .sync-opt-title {
      color: var(--pegbo-fg-default);
      font-size: 14px;
      line-height: 20px;
      font-weight: 500;
    }

    .sync-opt-desc {
      color: var(--pegbo-fg-subtle);
      font-size: 13px;
      line-height: 18px;
      font-weight: 300;
    }

    .sync-consent {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-top: 16px;
      color: var(--pegbo-fg-subtle);
      font-size: 13px;
      line-height: 18px;
      font-weight: 300;
      cursor: pointer;
    }

    .sync-consent input {
      flex: 0 0 16px;
      width: 16px;
      height: 16px;
      margin: 1px 0 0;
      accent-color: var(--pegbo-fg-default);
      cursor: pointer;
    }

    .sync-count {
      margin: 2px 0 14px;
      color: var(--pegbo-fg-default);
      font-size: 14px;
      line-height: 20px;
      font-weight: 500;
    }

    .sync-toolbar {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }

    .sync-search {
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 40px;
      padding: 0 12px;
      border: 1px solid var(--pegbo-outline-strong);
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-default);
      color: var(--pegbo-fg-subtlest);
      transition:
        border-color var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out),
        box-shadow var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .sync-search:focus-within {
      border-color: var(--pegbo-surface-brand-bold);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--pegbo-surface-brand-bold) 30%, transparent);
    }

    .sync-search-icon {
      flex: 0 0 18px;
      color: var(--pegbo-fg-subtlest);
    }

    .sync-search input {
      flex: 1 1 0;
      min-width: 0;
      border: 0;
      outline: none;
      background: transparent;
      color: var(--pegbo-fg-default);
      font: inherit;
      font-size: 14px;
      line-height: 20px;
      font-weight: 300;
    }

    .sync-search input::placeholder {
      color: var(--pegbo-fg-subtlest);
      opacity: 1;
    }

    .sync-seg {
      flex: 0 0 auto;
      display: inline-flex;
      gap: 2px;
      padding: 3px;
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-neutral-subtle);
    }

    .sync-seg-button {
      border: 0;
      padding: 6px 12px;
      border-radius: var(--pegbo-radius-sm);
      background: transparent;
      color: var(--pegbo-fg-subtle);
      font: inherit;
      font-size: 13px;
      line-height: 18px;
      font-weight: 500;
      white-space: nowrap;
      cursor: pointer;
    }

    .sync-seg-button.is-active {
      background: var(--pegbo-surface-default);
      color: var(--pegbo-fg-default);
      box-shadow: var(--pegbo-shadow-sm);
    }

    .sync-scroll {
      display: flex;
      flex-direction: column;
    }

    .sync-group {
      display: flex;
      flex-direction: column;
    }

    .sync-group-title {
      margin: 4px 0 8px;
      color: var(--pegbo-fg-subtle);
      font-size: 12px;
      line-height: 16px;
      font-weight: 500;
    }

    .sync-pcard {
      position: relative;
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px 14px;
      margin-bottom: 10px;
      border: 1px solid var(--pegbo-outline-default);
      border-radius: var(--pegbo-radius-md);
      cursor: pointer;
      transition:
        border-color var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out),
        background var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out),
        box-shadow var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .sync-pcard:hover {
      background: var(--pegbo-surface-neutral-subtle);
    }

    .sync-pcard input {
      flex: 0 0 16px;
      width: 16px;
      height: 16px;
      margin: 2px 0 0;
      accent-color: var(--pegbo-fg-default);
      cursor: pointer;
    }

    .sync-pcard:has(input:checked) {
      border-color: var(--pegbo-fg-default);
      background: var(--pegbo-surface-neutral-subtle);
      box-shadow: inset 0 0 0 1px var(--pegbo-fg-default);
    }

    .sync-pcard-main {
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .sync-pcard-name {
      color: var(--pegbo-fg-default);
      font-size: 14px;
      line-height: 20px;
      font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .sync-pcard-meta {
      color: var(--pegbo-fg-subtle);
      font-size: 13px;
      line-height: 18px;
      font-weight: 300;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .sync-select-empty {
      padding: 36px 16px;
      text-align: center;
      color: var(--pegbo-fg-subtle);
      font-size: 14px;
      line-height: 20px;
      font-weight: 300;
    }

    @media (max-width: 760px) {
      .drawer-shell {
        --project-drawer-width: 100vw;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .drawer-shell,
      .drawer,
      .modal-shell,
      .modal,
      .modal-scrim {
        transition: none;
      }
    }

    @media (max-width: 760px) {
      .shell {
        grid-template-columns: 1fr;
      }

      .shell-sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--pegbo-outline-default);
      }

      .shell-content {
        padding: 24px;
      }

      .page-head {
        flex-wrap: wrap;
        align-items: flex-start;
      }

      .page-head-titles,
      .page-header-actions {
        flex: 1 1 100%;
      }

      .page-header-actions {
        flex-wrap: wrap;
      }

      .project-controls {
        align-items: stretch;
      }

      .project-search-shell {
        flex: 1 1 100%;
        width: auto;
      }

      .empty-panel-actions {
        flex-direction: column;
      }

      .empty-panel-separator {
        display: none;
      }

      .pd-dl,
      .pd-certrow,
      .pd-linkrow {
        grid-template-columns: 1fr;
      }
    }

    .bp-page {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .bp-route {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      min-width: 0;
      gap: 24px;
    }

    .bp-back {
      align-self: flex-start;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin: 16px 24px 0;
      padding: 2px 4px;
      border: 0;
      border-radius: var(--pegbo-radius-sm);
      background: transparent;
      color: var(--pegbo-fg-default);
      font: inherit;
      font-size: 14px;
      line-height: 20px;
      font-weight: 500;
      cursor: pointer;
    }

    .bp-back:hover {
      color: var(--pegbo-fg-link);
    }

    .bp-back svg {
      flex: 0 0 auto;
    }

    .bp-crumbs {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      padding: 12px 24px 0;
      background: var(--pegbo-surface-default);
      color: var(--pegbo-fg-subtle);
      font-size: 13px;
      line-height: 18px;
      font-weight: 300;
    }

    .bp-crumb-icon {
      flex: 0 0 auto;
      color: var(--pegbo-fg-subtlest);
    }

    .bp-crumb-link {
      max-width: 280px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      border: 0;
      padding: 0;
      background: transparent;
      color: var(--pegbo-fg-subtle);
      font: inherit;
      font-size: 13px;
      line-height: 18px;
      font-weight: 300;
      cursor: pointer;
    }

    .bp-crumb-link:hover {
      color: var(--pegbo-fg-default);
    }

    .bp-crumb-sep {
      color: var(--pegbo-fg-subtlest);
    }

    .bp-crumb-current {
      color: var(--pegbo-fg-default);
      font-weight: 400;
    }

    .bp-head {
      align-items: flex-end;
      padding: 8px 24px 16px;
      background: var(--pegbo-surface-default);
      border-bottom: 1px solid var(--pegbo-outline-subtle);
    }

    .bp-head .page-title {
      font-size: 24px;
      line-height: 30px;
      font-weight: 600;
    }

    .bp-head .page-sub {
      margin-top: 4px;
    }

    .pd-page {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .pd-head {
      align-items: center;
      padding: 16px 24px;
      background: var(--pegbo-surface-default);
      border-bottom: 0;
    }

    .pd-head .page-title {
      font-size: 24px;
      line-height: 30px;
      font-weight: 600;
    }

    .pd-tabs {
      display: flex;
      gap: 6px;
      margin: 0 -24px;
      padding: 20px 24px 0;
      background: var(--pegbo-surface-default);
      border-bottom: 1px solid var(--pegbo-outline-default);
    }

    .pd-tab {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 0;
      background: none;
      cursor: pointer;
      font: inherit;
      font-size: 15px;
      font-weight: 500;
      color: var(--pegbo-fg-subtle);
      padding: 12px 6px;
      margin-bottom: -1px;
      transition: color var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .pd-tab svg {
      flex: 0 0 auto;
    }

    .pd-tab:hover {
      color: var(--pegbo-fg-default);
    }

    .pd-tab.is-active {
      color: var(--pegbo-fg-default);
    }

    .pd-tab.is-active::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2px;
      background: var(--pegbo-fg-link);
    }

    .pd-tab:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--pegbo-surface-brand-bold) 30%, transparent);
      border-radius: var(--pegbo-radius-sm);
    }

    .pd-content {
      flex: 1 1 auto;
      padding: 0 24px 32px;
      background: var(--pegbo-surface-page);
    }

    .pd-pane {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 16px;
      animation: pd-pane-in var(--pegbo-motion-duration-medium) var(--pegbo-motion-easing-ease-out);
    }

    .pd-pane .accordion + .accordion {
      margin-top: 0;
    }

    .pd-pane .accordion-head {
      padding-top: 16px;
      padding-bottom: 14px;
    }

    .pd-pane .accordion-body {
      padding: 14px 16px 18px;
    }

    @keyframes pd-pane-in {
      from {
        opacity: 0;
        transform: translateY(4px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .pd-state {
      padding: 16px 0;
    }

    .pd-pane .empty-panel {
      width: 100%;
      padding-top: 8px;
      gap: 8px;
    }

    .pd-editlink {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 0;
      background: none;
      cursor: pointer;
      font: inherit;
      font-size: 14px;
      font-weight: 500;
      color: var(--pegbo-fg-default);
      transition: color var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .pd-editlink:hover {
      color: var(--pegbo-fg-link);
    }

    .pd-editlink svg {
      flex: 0 0 auto;
    }

    .pd-dl {
      display: grid;
      grid-template-columns: 190px 1fr;
      gap: 14px 20px;
      margin: 2px 0 0;
    }

    .pd-dl-row {
      display: contents;
    }

    .pd-dl dt {
      font-size: 14px;
      font-weight: 600;
      color: var(--pegbo-fg-default);
    }

    .pd-dl dd {
      margin: 0;
      font-size: 14px;
      font-weight: 400;
      color: var(--pegbo-fg-default);
      line-height: 21px;
    }

    .pd-certrow {
      display: grid;
      grid-template-columns: 190px 1fr;
      gap: 14px 20px;
      align-items: start;
      margin-top: 2px;
    }

    .pd-certrow-label {
      font-size: 14px;
      font-weight: 600;
      color: var(--pegbo-fg-default);
    }

    .pd-certrow-value {
      font-size: 14px;
      color: var(--pegbo-fg-default);
    }

    .pd-certrow-value.is-empty {
      color: var(--pegbo-fg-subtlest);
    }

    .pd-section-empty {
      margin: 6px 0 0;
      font-size: 14px;
      font-weight: 300;
      color: var(--pegbo-fg-subtle);
    }

    .pd-goals-illustration {
      width: 100px;
      height: 100px;
    }

    .pd-linklist {
      display: flex;
      flex-direction: column;
      margin-top: 2px;
    }

    .pd-linkrow {
      display: grid;
      grid-template-columns: 170px 1fr;
      gap: 14px 20px;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid var(--pegbo-outline-default);
    }

    .pd-linkrow:last-child {
      border-bottom: 0;
    }

    .pd-linkrow-label {
      font-size: 14px;
      font-weight: 600;
      color: var(--pegbo-fg-default);
    }

    .pd-viewlink {
      justify-self: start;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--pegbo-fg-link);
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
    }

    .pd-viewlink:hover {
      text-decoration: underline;
    }

    .pd-viewlink.is-disabled {
      color: var(--pegbo-fg-subtlest);
      cursor: default;
    }

    .pd-viewlink svg {
      flex: 0 0 auto;
    }

    .pd-goal-ill {
      width: 96px;
      height: 96px;
      border-radius: 50%;
      background: linear-gradient(160deg, var(--pegbo-surface-brand-subtle), var(--pegbo-surface-sunken));
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--pegbo-surface-brand-bold);
    }

    .pa-page {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .pa-content {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 4px 24px 28px;
      background: var(--pegbo-surface-page);
    }

    .pa-card {
      border: 1px solid var(--pegbo-outline-default);
      border-radius: var(--pegbo-radius-md);
      overflow: hidden;
      background: var(--pegbo-surface-default);
    }

    .pa-scroll {
      overflow-x: auto;
    }

    .pa-table {
      width: 100%;
      min-width: 760px;
      display: grid;
      grid-template-columns: minmax(240px, 1.6fr) 150px 130px 130px 200px;
      align-items: stretch;
    }

    .pa-table thead,
    .pa-table tbody,
    .pa-table tr {
      display: contents;
    }

    .pa-table thead th {
      display: flex;
      align-items: stretch;
      background: var(--pegbo-surface-sunken);
      border-bottom: 1px solid var(--pegbo-outline-default);
    }

    .pa-th-button {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      width: 100%;
      padding: 11px 16px;
      border: 0;
      background: none;
      cursor: pointer;
      font: inherit;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--pegbo-fg-subtle);
      transition: color var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .pa-th-button:hover {
      color: var(--pegbo-fg-default);
    }

    .pa-th-button:focus-visible {
      outline: none;
      box-shadow: inset 0 0 0 2px var(--pegbo-surface-brand-bold);
    }

    .pa-sort {
      display: inline-flex;
      flex: 0 0 14px;
      color: var(--pegbo-fg-subtlest);
    }

    .pa-sort.is-ascending,
    .pa-sort.is-descending {
      color: var(--pegbo-surface-brand-bold);
    }

    .pa-sort.is-none .pa-sort-up,
    .pa-sort.is-none .pa-sort-down {
      opacity: 0.55;
    }

    .pa-sort.is-ascending .pa-sort-down {
      opacity: 0.2;
    }

    .pa-sort.is-descending .pa-sort-up {
      opacity: 0.2;
    }

    .pa-table tbody td {
      display: flex;
      align-items: center;
      min-width: 0;
      padding: 14px 16px;
      border-bottom: 1px solid var(--pegbo-outline-default);
      font-size: 14px;
      color: var(--pegbo-fg-default);
    }

    .pa-row:last-child td {
      border-bottom: 0;
    }

    .pa-row:hover td {
      background: var(--pegbo-surface-page);
    }

    .pa-name {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      border: 0;
      padding: 0;
      background: none;
      cursor: pointer;
      font: inherit;
      font-size: 14px;
      font-weight: 600;
      color: var(--pegbo-fg-link);
      text-align: left;
    }

    .pa-name:hover {
      text-decoration: underline;
    }

    .pa-muted {
      color: var(--pegbo-fg-subtle);
      font-weight: 300;
    }

    .pa-foot {
      margin: 0;
      align-self: flex-end;
      color: var(--pegbo-fg-subtle);
      font-size: 13px;
      font-weight: 300;
    }

    .pa-empty-badge {
      width: 104px;
      height: 104px;
      border-radius: 50%;
      background: linear-gradient(160deg, var(--pegbo-surface-brand-subtle), var(--pegbo-surface-sunken));
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--pegbo-surface-brand-bold);
    }

    .cd-overlay {
      position: fixed;
      top: 48px;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 70;
      background: var(--pegbo-surface-page);
      overflow-y: auto;
      overscroll-behavior: contain;
      opacity: 0;
      visibility: hidden;
    }

    .cd-overlay.is-open {
      opacity: 1;
      visibility: visible;
    }

    .cd-overlay.is-open .cd-wrap,
    .cd-overlay.is-open .cd-state-wrap {
      animation: cd-overlay-in var(--pegbo-motion-duration-medium) var(--pegbo-motion-easing-ease-out);
    }

    @keyframes cd-overlay-in {
      from {
        opacity: 0;
        transform: translateY(6px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .cd-wrap {
      display: flex;
      align-items: stretch;
      min-height: 100%;
    }

    .cd-aside {
      width: 340px;
      flex: 0 0 340px;
      background: var(--pegbo-surface-default);
      border-right: 1px solid var(--pegbo-outline-default);
    }

    .cd-back {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin: 16px 16px 12px;
      padding: 7px 12px;
      border: 1px solid var(--pegbo-outline-strong);
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-default);
      color: var(--pegbo-fg-default);
      font: inherit;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
    }

    .cd-back:hover {
      background: var(--pegbo-surface-page);
    }

    .cd-pcard {
      background: var(--pegbo-surface-default);
    }

    .cd-pco {
      display: flex;
      gap: 12px;
      padding: 18px;
      border-bottom: 1px solid var(--pegbo-outline-default);
    }

    .cd-pco-logo {
      width: 52px;
      height: 52px;
      flex: 0 0 52px;
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-inverse);
      color: var(--pegbo-fg-inverse);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .cd-pco-name {
      font-size: 16px;
      font-weight: 600;
      line-height: 20px;
    }

    .cd-pco-addr {
      margin-top: 3px;
      font-size: 12px;
      font-weight: 300;
      line-height: 16px;
      color: var(--pegbo-fg-subtle);
    }

    .cd-pco-proj {
      align-self: flex-start;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 8px;
      padding: 3px 8px;
      border-radius: var(--pegbo-radius-sm);
      background: var(--pegbo-surface-neutral-subtle);
      font-size: 12px;
      color: var(--pegbo-fg-subtle);
    }

    .cd-acc {
      border-bottom: 1px solid var(--pegbo-outline-default);
    }

    .cd-acc:last-child {
      border-bottom: 0;
    }

    .cd-acc-head {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 13px 16px;
      cursor: pointer;
    }

    .cd-acc-head:focus-visible {
      outline: 2px solid var(--pegbo-outline-focus);
      outline-offset: -2px;
    }

    .cd-acc-toggle {
      flex: 1 1 0;
      min-width: 0;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 0;
      background: none;
      cursor: pointer;
      font: inherit;
      text-align: left;
    }

    .cd-acc-chev {
      flex: 0 0 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--pegbo-fg-default);
    }

    .cd-acc-title {
      flex: 1 1 0;
      min-width: 0;
      font-size: 14px;
      font-weight: 600;
      color: var(--pegbo-fg-default);
    }

    .cd-acc-actions {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
    }

    .cd-acc-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      border: 0;
      background: none;
      cursor: pointer;
      font: inherit;
      font-size: 12px;
      font-weight: 500;
      color: var(--pegbo-fg-link);
    }

    .cd-acc-body {
      padding: 0 16px 16px;
    }

    .cd-acc-text {
      font-size: 13px;
      font-weight: 300;
      line-height: 19px;
      color: var(--pegbo-fg-subtle);
    }

    .cd-grp-label {
      margin: 10px 0 7px;
      font-size: 12px;
      font-weight: 500;
      color: var(--pegbo-fg-subtle);
    }

    .cd-grp-label:first-child {
      margin-top: 0;
    }

    .cd-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }

    .cd-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      height: 26px;
      padding: 0 9px;
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-sunken);
      border: 1px solid var(--pegbo-outline-default);
      font-size: 12px;
      font-weight: 500;
      color: var(--pegbo-fg-default);
    }

    .cd-chip.is-more {
      background: var(--pegbo-surface-default);
    }

    .cd-chip.is-bad {
      background: var(--pegbo-surface-status-danger);
      border-color: var(--pegbo-surface-status-danger);
      color: var(--pegbo-fg-status-danger);
    }

    .cd-mini-contact {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 8px 0;
      border-bottom: 1px solid var(--pegbo-outline-default);
    }

    .cd-mini-contact:last-child {
      border-bottom: 0;
    }

    .cd-mini-contact b {
      font-size: 13px;
      font-weight: 600;
    }

    .cd-mini-contact span {
      font-size: 12px;
      font-weight: 300;
      color: var(--pegbo-fg-subtle);
    }

    .cd-kv {
      margin: 0;
      font-size: 13px;
      color: var(--pegbo-fg-default);
    }

    .cd-maincol {
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
    }

    .cd-card {
      background: var(--pegbo-surface-default);
      border: 1px solid var(--pegbo-outline-default);
      border-radius: var(--pegbo-radius-lg);
    }

    .cd-headcard {
      border: 0;
      border-bottom: 1px solid var(--pegbo-outline-default);
      border-radius: 0;
    }

    .cd-hdr {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 18px 20px;
    }

    .cd-hdr-ico {
      width: 40px;
      height: 40px;
      flex: 0 0 40px;
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-fg-accent-indigo);
      color: var(--pegbo-fg-inverse);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .cd-hdr-main {
      flex: 1 1 0;
      min-width: 0;
    }

    .cd-hdr-title {
      font-size: 18px;
      font-weight: 600;
      line-height: 23px;
    }

    .cd-hdr-sub {
      margin-top: 2px;
      font-size: 13px;
      font-weight: 300;
      color: var(--pegbo-fg-subtle);
    }

    .cd-hdr-status {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
      font-size: 13px;
      font-weight: 300;
      color: var(--pegbo-fg-subtle);
      flex-wrap: wrap;
    }

    .cd-dot {
      width: 8px;
      height: 8px;
      flex: 0 0 8px;
      border-radius: 50%;
      background: var(--pegbo-fg-status-success);
    }

    .cd-hdr-dotsep {
      color: var(--pegbo-fg-subtlest);
    }

    .cd-hdr-acts {
      display: flex;
      gap: 12px;
      flex: 0 0 auto;
      align-self: center;
    }

    .cd-circ {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      border: 0;
      background: none;
      cursor: pointer;
      color: var(--pegbo-fg-subtle);
      font: inherit;
      font-size: 11px;
    }

    .cd-circ i {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1px solid var(--pegbo-outline-strong);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--pegbo-fg-default);
      transition:
        background var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out),
        border-color var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .cd-circ:hover i {
      background: var(--pegbo-surface-page);
    }

    .cd-circ.is-call i {
      background: var(--pegbo-surface-brand-bold);
      border-color: var(--pegbo-surface-brand-bold);
      color: var(--pegbo-fg-inverse);
    }

    .cd-circ.is-call:hover i {
      background: var(--pegbo-surface-brand-bold-hovered);
    }

    .cd-tabs {
      display: flex;
      gap: 8px;
      padding: 0 20px;
      border-top: 1px solid var(--pegbo-outline-default);
    }

    .cd-tab {
      position: relative;
      border: 0;
      background: none;
      cursor: pointer;
      font: inherit;
      font-size: 14px;
      font-weight: 500;
      color: var(--pegbo-fg-subtle);
      padding: 12px 6px;
      margin-bottom: -1px;
      transition: color var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .cd-tab:hover {
      color: var(--pegbo-fg-default);
    }

    .cd-tab.is-active {
      color: var(--pegbo-fg-default);
    }

    .cd-tab.is-active::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2px;
      background: var(--pegbo-fg-default);
    }

    .cd-pane {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 16px 24px 24px;
      animation: cd-overlay-in var(--pegbo-motion-duration-medium) var(--pegbo-motion-easing-ease-out);
    }

    .cd-row2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .cd-stat {
      padding: 18px 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .cd-stat-h {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
      font-size: 13px;
      font-weight: 300;
      color: var(--pegbo-fg-subtle);
    }

    .cd-stat-h b {
      font-size: 14px;
      font-weight: 600;
      color: var(--pegbo-fg-default);
    }

    .cd-stat-sub {
      font-size: 13px;
      font-weight: 300;
      color: var(--pegbo-fg-subtlest);
    }

    .cd-gauge {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .cd-ring {
      position: relative;
      width: 26px;
      height: 26px;
      flex: 0 0 26px;
      border-radius: 50%;
    }

    .cd-ring::after {
      content: '';
      position: absolute;
      inset: 3px;
      border-radius: 50%;
      background: var(--pegbo-surface-default);
    }

    .cd-conf-pct {
      font-size: 22px;
      font-weight: 700;
      color: var(--pegbo-fg-default);
    }

    .cd-conf-lbl {
      font-size: 15px;
      color: var(--pegbo-fg-subtle);
    }

    .cd-gauge-lbl {
      font-size: 13px;
      color: var(--pegbo-fg-status-success);
    }

    .cd-gauge-note {
      margin-top: 4px;
    }

    .cd-reco {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 16px 20px;
      background: var(--pegbo-surface-page);
    }

    .cd-reco-main {
      flex: 1 1 0;
    }

    .cd-reco-k {
      font-size: 12px;
      font-weight: 500;
      color: var(--pegbo-fg-subtle);
    }

    .cd-reco-t {
      margin-top: 4px;
      font-size: 14px;
      font-weight: 600;
      line-height: 20px;
      color: var(--pegbo-fg-default);
    }

    .cd-reco-meta {
      margin-top: 8px;
      font-size: 12px;
      font-weight: 300;
      color: var(--pegbo-fg-subtlest);
    }

    .cd-reco-acts {
      display: flex;
      gap: 10px;
      flex: 0 0 auto;
      align-self: flex-end;
    }

    .cd-tl-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px 0;
    }

    .cd-tl-head h3 {
      margin: 0;
      font-size: 15px;
      font-weight: 600;
    }

    .cd-linklike {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 0;
      background: none;
      cursor: pointer;
      font: inherit;
      font-size: 13px;
      font-weight: 500;
      color: var(--pegbo-fg-subtle);
    }

    .cd-linklike:hover {
      color: var(--pegbo-fg-default);
    }

    .cd-tl-tools {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 20px 4px;
      flex-wrap: wrap;
    }

    .cd-search {
      flex: 1 1 220px;
      min-width: 160px;
      height: 36px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 12px;
      background: var(--pegbo-surface-default);
      border: 1px solid var(--pegbo-outline-strong);
      border-radius: var(--pegbo-radius-md);
      color: var(--pegbo-fg-subtlest);
    }

    .cd-search:focus-within {
      border-color: var(--pegbo-surface-brand-bold);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--pegbo-surface-brand-bold) 30%, transparent);
    }

    .cd-search input {
      flex: 1 1 0;
      min-width: 0;
      border: 0;
      outline: none;
      background: transparent;
      color: var(--pegbo-fg-default);
      font: inherit;
      font-size: 13px;
      font-weight: 300;
    }

    .cd-seg {
      display: inline-flex;
      background: var(--pegbo-surface-sunken);
      border-radius: var(--pegbo-radius-md);
      padding: 3px;
      gap: 2px;
    }

    .cd-seg-b {
      border: 0;
      background: none;
      cursor: pointer;
      font: inherit;
      font-size: 13px;
      font-weight: 500;
      color: var(--pegbo-fg-subtle);
      padding: 6px 11px;
      border-radius: var(--pegbo-radius-sm);
    }

    .cd-seg-b.is-active {
      background: var(--pegbo-surface-default);
      color: var(--pegbo-fg-default);
      box-shadow: 0 1px 2px color-mix(in srgb, var(--pegbo-fg-default) 10%, transparent);
    }

    .cd-tl {
      padding: 8px 20px 18px;
    }

    .cd-tl-day {
      margin: 14px 0 10px;
      font-size: 12px;
      font-weight: 600;
      color: var(--pegbo-fg-subtle);
      text-align: center;
    }

    .cd-tl-item {
      display: flex;
      gap: 12px;
      padding: 10px 0;
    }

    .cd-tl-ic {
      width: 34px;
      height: 34px;
      flex: 0 0 34px;
      border-radius: var(--pegbo-radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .cd-tl-ic.is-status {
      background: var(--pegbo-surface-accent-blue);
      color: var(--pegbo-fg-accent-blue);
    }

    .cd-tl-ic.is-call {
      background: var(--pegbo-surface-accent-green);
      color: var(--pegbo-fg-accent-green);
    }

    .cd-tl-ic.is-email {
      background: var(--pegbo-surface-accent-amber);
      color: var(--pegbo-fg-accent-amber);
    }

    .cd-tl-ic.is-note {
      background: var(--pegbo-surface-accent-purple);
      color: var(--pegbo-fg-accent-purple);
    }

    .cd-tl-main {
      flex: 1 1 0;
      min-width: 0;
    }

    .cd-tl-t {
      font-size: 14px;
      font-weight: 500;
    }

    .cd-tl-s {
      margin-top: 2px;
      font-size: 13px;
      font-weight: 300;
      color: var(--pegbo-fg-subtle);
    }

    .cd-tl-time {
      margin-top: 4px;
      font-size: 12px;
      font-weight: 300;
      color: var(--pegbo-fg-subtlest);
    }

    .cd-tl-act {
      flex: 0 0 auto;
      align-self: center;
    }

    .cd-tl-empty {
      padding: 24px;
      text-align: center;
      font-size: 13px;
      font-weight: 300;
      color: var(--pegbo-fg-subtle);
    }

    .cd-clist {
      padding: 6px 20px 18px;
    }

    .cd-crow {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 0;
      border-bottom: 1px solid var(--pegbo-outline-default);
    }

    .cd-crow:last-child {
      border-bottom: 0;
    }

    .cd-cav {
      width: 40px;
      height: 40px;
      flex: 0 0 40px;
      border-radius: 50%;
      background: var(--pegbo-surface-brand-subtle);
      color: var(--pegbo-fg-accent-green);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 600;
    }

    .cd-cmain {
      flex: 1 1 0;
      min-width: 0;
    }

    .cd-cname {
      font-size: 14px;
      font-weight: 600;
    }

    .cd-crole {
      margin-top: 1px;
      font-size: 13px;
      font-weight: 300;
      color: var(--pegbo-fg-subtle);
    }

    .cd-cmeta {
      display: flex;
      flex-direction: column;
      gap: 2px;
      font-size: 13px;
      font-weight: 300;
      color: var(--pegbo-fg-subtle);
      text-align: right;
    }

    .cd-cmeta-email {
      color: var(--pegbo-fg-link);
    }

    .cd-notes {
      padding: 14px 20px 18px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .cd-note {
      border: 1px solid var(--pegbo-outline-default);
      border-radius: var(--pegbo-radius-md);
      padding: 14px 16px;
    }

    .cd-note-h {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .cd-note-h b {
      font-size: 14px;
      font-weight: 600;
    }

    .cd-note-by {
      margin-top: 2px;
      font-size: 12px;
      font-weight: 300;
      color: var(--pegbo-fg-subtle);
    }

    .cd-note-body {
      margin: 8px 0 0;
      font-size: 13px;
      font-weight: 300;
      line-height: 19px;
      color: var(--pegbo-fg-default);
    }

    .cd-note-more {
      margin-top: 8px;
      padding: 0;
      border: 0;
      background: none;
      cursor: pointer;
      font: inherit;
      font-size: 13px;
      font-weight: 600;
      color: var(--pegbo-fg-default);
    }

    .cd-state-wrap {
      max-width: 1240px;
      margin: 0 auto;
      padding: 24px;
    }

    .cd-state {
      padding: 32px 0;
    }

    .cd-acc-link svg {
      width: 13px;
      height: 13px;
    }

    .cd-bidc {
      padding: 20px;
    }

    .cd-bidc-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px;
    }

    .cd-bidc-title {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
      color: var(--pegbo-fg-default);
    }

    .cd-bidc-sub {
      margin: 4px 0 0;
      font-size: 13px;
      font-weight: 300;
      color: var(--pegbo-fg-subtle);
    }

    .cd-bidc-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .cd-bidc-card {
      position: relative;
      border: 1px solid var(--pegbo-outline-default);
      border-radius: var(--pegbo-radius-lg);
      padding: 16px 18px;
      background: var(--pegbo-surface-default);
    }

    .cd-bidc-remove {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin-bottom: 12px;
      border: 0;
      background: none;
      cursor: pointer;
      font: inherit;
      font-size: 13px;
      font-weight: 500;
      color: var(--pegbo-fg-subtle);
    }

    .cd-bidc-top {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .cd-bidc-av {
      width: 40px;
      height: 40px;
      flex: 0 0 40px;
      border-radius: 50%;
      background: var(--pegbo-surface-brand-subtle);
      color: var(--pegbo-fg-accent-green);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 600;
    }

    .cd-bidc-name {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 15px;
      font-weight: 600;
      color: var(--pegbo-fg-default);
    }

    .cd-bidc-badge {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: var(--pegbo-radius-sm);
      background: var(--pegbo-surface-accent-green);
      color: var(--pegbo-fg-accent-green);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.04em;
    }

    .cd-bidc-role {
      margin-top: 2px;
      font-size: 13px;
      font-weight: 300;
      color: var(--pegbo-fg-subtle);
    }

    .cd-bidc-contactrow {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 12px 0 14px;
      font-size: 13px;
      font-weight: 300;
      color: var(--pegbo-fg-subtle);
      flex-wrap: wrap;
    }

    .cd-bidc-email {
      color: var(--pegbo-fg-link);
    }

    .cd-bidc-sep {
      color: var(--pegbo-outline-strong);
    }

    .cd-bidc-acts {
      display: flex;
      gap: 10px;
    }

    .cd-bidc-othertitle {
      margin: 24px 0 0;
      font-size: 16px;
      font-weight: 600;
      color: var(--pegbo-fg-default);
    }

    .cd-bidc-othertitle + .cd-bidc-sub {
      margin-bottom: 14px;
    }

    .cd-pnotes {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .cd-pnote {
      border: 1px solid var(--pegbo-outline-default);
      border-radius: var(--pegbo-radius-lg);
      padding: 16px 18px;
    }

    .cd-pnote-top {
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }

    .cd-pnote-ic {
      flex: 0 0 auto;
      display: inline-flex;
      padding-top: 2px;
      color: var(--pegbo-fg-default);
    }

    .cd-pnote-id {
      flex: 1 1 0;
      min-width: 0;
    }

    .cd-pnote-title {
      margin: 0;
      font-size: 15px;
      font-weight: 600;
      color: var(--pegbo-fg-default);
    }

    .cd-pnote-meta {
      margin: 3px 0 0;
      font-size: 13px;
      font-weight: 300;
      color: var(--pegbo-fg-subtle);
    }

    .cd-pnote-body {
      margin: 12px 0 0;
      font-size: 14px;
      font-weight: 300;
      line-height: 20px;
      color: var(--pegbo-fg-default);
    }

    .cd-pnote-more {
      margin-top: 12px;
      padding: 0;
      border: 0;
      background: none;
      cursor: pointer;
      font: inherit;
      font-size: 13px;
      font-weight: 600;
      color: var(--pegbo-fg-link);
    }

    .cd-detail {
      position: fixed;
      top: 48px;
      right: 0;
      bottom: 0;
      left: 380px;
      z-index: 5;
      display: flex;
      flex-direction: column;
      background: var(--pegbo-surface-default);
      border-left: 1px solid var(--pegbo-outline-default);
      box-shadow: var(--pegbo-shadow-lg);
      overscroll-behavior: contain;
      animation: cd-detail-in var(--pegbo-motion-duration-medium) var(--pegbo-motion-easing-ease-out);
    }

    @keyframes cd-detail-in {
      from {
        transform: translateX(20px);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    .cd-detail-head {
      flex: 0 0 auto;
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 22px 32px;
      border-bottom: 1px solid var(--pegbo-outline-default);
    }

    .cd-detail-heading {
      flex: 1 1 0;
      min-width: 0;
    }

    .cd-detail-title {
      margin: 0;
      font-size: 22px;
      font-weight: 600;
      color: var(--pegbo-fg-default);
    }

    .cd-detail-sub {
      margin: 4px 0 0;
      font-size: 14px;
      font-weight: 300;
      color: var(--pegbo-fg-subtle);
    }

    .cd-detail-close {
      flex: 0 0 auto;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--pegbo-outline-default);
      border-radius: 999px;
      background: var(--pegbo-surface-default);
      color: var(--pegbo-fg-subtle);
      cursor: pointer;
    }

    .cd-detail-close:hover {
      background: var(--pegbo-surface-page);
    }

    .cd-detail-body {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 28px 32px 40px;
    }

    .cd-detail-card-head {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 18px;
    }

    .cd-detail-badge {
      width: 34px;
      height: 34px;
      flex: 0 0 34px;
      border-radius: var(--pegbo-radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--pegbo-fg-inverse);
    }

    .cd-detail-badge.is-amber {
      background: var(--pegbo-fg-accent-amber);
    }

    .cd-detail-badge.is-blue {
      background: var(--pegbo-fg-accent-blue);
    }

    .cd-detail-badge.is-indigo {
      background: var(--pegbo-fg-accent-indigo);
    }

    .cd-detail-card-title {
      margin: 0;
      font-size: 17px;
      font-weight: 600;
      color: var(--pegbo-fg-default);
    }

    .cd-detail-action {
      margin-left: auto;
    }

    .cd-cred {
      border: 1px solid var(--pegbo-outline-default);
      border-radius: var(--pegbo-radius-lg);
      overflow: hidden;
    }

    .cd-cred-head,
    .cd-cred-row {
      display: grid;
      grid-template-columns: minmax(0, 2.4fr) 1fr 1fr 1.2fr 52px;
      gap: 12px;
      align-items: center;
      padding: 14px 18px;
    }

    .cd-cred-head {
      background: var(--pegbo-surface-page);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: var(--pegbo-fg-subtle);
    }

    .cd-cred-row {
      border-top: 1px solid var(--pegbo-outline-default);
      font-size: 14px;
      font-weight: 300;
      color: var(--pegbo-fg-default);
    }

    .cd-cred-c1 {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    .cd-cred-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--pegbo-fg-default);
    }

    .cd-cred-issuer {
      font-size: 13px;
      font-weight: 300;
      color: var(--pegbo-fg-subtle);
    }

    .cd-cred-exp {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: var(--pegbo-fg-status-danger);
    }

    .cd-cred-cf {
      justify-self: end;
      color: var(--pegbo-fg-subtlest);
    }

    .cd-cred-cf.has-file {
      color: var(--pegbo-fg-status-danger);
    }

    .cd-detail-group + .cd-detail-group {
      margin-top: 26px;
    }

    .cd-detail-list {
      margin: 0;
      padding-left: 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      font-size: 15px;
      font-weight: 300;
      color: var(--pegbo-fg-default);
    }

    .cd-sos-entity {
      margin-bottom: 22px;
    }

    .cd-sos-entity-type {
      font-size: 15px;
      font-weight: 600;
      color: var(--pegbo-fg-default);
    }

    .cd-sos-entity-num {
      margin-top: 2px;
      font-size: 14px;
      font-weight: 300;
      color: var(--pegbo-fg-subtle);
    }

    .cd-sos-summary {
      margin: 0 0 14px;
      font-size: 16px;
      font-weight: 600;
      color: var(--pegbo-fg-default);
    }

    .cd-sos-grid {
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .cd-sos-row {
      display: grid;
      grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
      gap: 16px;
    }

    .cd-sos-row dt {
      font-size: 14px;
      font-weight: 300;
      color: var(--pegbo-fg-subtle);
    }

    .cd-sos-row dd {
      margin: 0;
      font-size: 14px;
      font-weight: 600;
      color: var(--pegbo-fg-default);
    }

    .cd-detail-text {
      display: flex;
      flex-direction: column;
      gap: 16px;
      font-size: 15px;
      font-weight: 300;
      line-height: 23px;
      color: var(--pegbo-fg-default);
    }

    .cd-detail-text p {
      margin: 0;
    }

    @media (max-width: 1080px) {
      .cd-wrap {
        flex-direction: column;
      }

      .cd-aside {
        width: 100%;
        flex-basis: auto;
        position: static;
      }
    }

    @media (max-width: 720px) {
      .cd-row2 {
        grid-template-columns: 1fr;
      }
    }

    .cwc-scrim {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: color-mix(in srgb, var(--pegbo-surface-neutral-bold) 55%, transparent);
      animation: cd-overlay-in var(--pegbo-motion-duration-medium) var(--pegbo-motion-easing-ease-out);
    }

    .cwc-scrim.is-min {
      background: transparent;
      align-items: flex-end;
      justify-content: flex-end;
      padding: 0;
      pointer-events: none;
      animation: none;
    }

    .cwc-scrim.is-min .cwc-win {
      pointer-events: auto;
    }

    .cwc-win {
      width: 860px;
      max-width: 100%;
      max-height: calc(100vh - 48px);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: var(--pegbo-surface-default);
      border-radius: var(--pegbo-radius-md);
      box-shadow: var(--pegbo-shadow-lg);
    }

    .cwc-win.is-minwin {
      position: fixed;
      right: 24px;
      bottom: 24px;
      width: 380px;
      max-width: calc(100vw - 48px);
      border-radius: var(--pegbo-radius-md);
    }

    .cwc-top {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 18px;
      border-bottom: 1px solid var(--pegbo-outline-default);
    }

    .cwc-top-ct {
      flex: 1 1 0;
      font-size: 13px;
      font-weight: 300;
      color: var(--pegbo-fg-subtle);
    }

    .cwc-top-ct b {
      font-weight: 600;
      color: var(--pegbo-fg-default);
    }

    .cwc-icon {
      width: 30px;
      height: 30px;
      flex: 0 0 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: var(--pegbo-radius-sm);
      background: none;
      color: var(--pegbo-fg-subtlest);
      cursor: pointer;
    }

    .cwc-icon:hover {
      background: var(--pegbo-surface-sunken);
      color: var(--pegbo-fg-default);
    }

    .cwc-icon.is-light {
      color: var(--pegbo-fg-inverse);
    }

    .cwc-icon.is-light:hover {
      background: rgba(255, 255, 255, 0.16);
      color: var(--pegbo-fg-inverse);
    }

    .cwc-body {
      flex: 1 1 auto;
      min-height: 0;
      display: grid;
      grid-template-columns: 340px 1fr;
      align-items: stretch;
    }

    .cwc-left-col {
      display: flex;
      flex-direction: column;
      background: var(--pegbo-surface-inverse);
    }

    .cwc-left {
      flex: 1 1 auto;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 40px 24px 84px;
      background: transparent;
      color: var(--pegbo-fg-inverse);
      text-align: center;
    }

    .cwc-av {
      width: 64px;
      height: 64px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: var(--pegbo-fg-accent-blue);
      color: var(--pegbo-fg-inverse);
      font-size: 22px;
      font-weight: 600;
    }

    .cwc-name {
      font-size: 18px;
      font-weight: 600;
    }

    .cwc-phone {
      font-size: 13px;
      font-weight: 300;
      color: color-mix(in srgb, var(--pegbo-fg-inverse) 75%, transparent);
    }

    .cwc-co {
      font-size: 13px;
      font-weight: 300;
      color: color-mix(in srgb, var(--pegbo-fg-inverse) 60%, transparent);
    }

    .cwc-timer {
      margin-top: 14px;
      font-size: 15px;
      font-weight: 500;
      font-variant-numeric: tabular-nums;
    }

    .cwc-ended {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-top: 14px;
      font-size: 14px;
      color: var(--pegbo-fg-accent-green);
    }

    .cwc-ctrls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 24px;
    }

    .cwc-cc {
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.12);
      color: var(--pegbo-fg-inverse);
      cursor: pointer;
    }

    .cwc-cc:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .cwc-cc.is-on {
      background: var(--pegbo-surface-brand-subtle);
      color: var(--pegbo-fg-accent-green);
    }

    .cwc-end {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      height: 42px;
      padding: 0 18px;
      border: 0;
      border-radius: 22px;
      background: var(--pegbo-surface-status-danger-bold);
      color: var(--pegbo-fg-inverse);
      font: inherit;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
    }

    .cwc-end:hover {
      filter: brightness(0.95);
    }

    .cwc-end.is-sm {
      height: 34px;
      padding: 0 14px;
    }

    .cwc-pad {
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-default);
      border: 1px solid var(--pegbo-outline-default);
      padding: 12px;
    }

    .cwc-pad-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .cwc-pad-grid button {
      height: 40px;
      border: 1px solid var(--pegbo-outline-default);
      border-radius: var(--pegbo-radius-sm);
      background: var(--pegbo-surface-default);
      color: var(--pegbo-fg-default);
      font: inherit;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
    }

    .cwc-pad-grid button:hover {
      background: var(--pegbo-surface-sunken);
    }

    .cwc-pad-out {
      margin-top: 10px;
      padding: 10px;
      text-align: center;
      border-radius: var(--pegbo-radius-sm);
      background: var(--pegbo-surface-sunken);
      color: var(--pegbo-fg-subtlest);
      font-size: 13px;
      font-variant-numeric: tabular-nums;
    }

    .cwc-right {
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    .cwc-right-head {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 18px;
    }

    .cwc-live,
    .cwc-ended-panel {
      display: flex;
      flex-direction: column;
      min-height: 0;
      flex: 1 1 auto;
    }

    .cwc-ended-panel {
      overflow-y: auto;
    }

    .cwc-sec {
      padding: 16px 20px;
    }

    .cwc-sec-grow {
      flex: 1 1 auto;
    }

    .cwc-h {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 600;
      color: var(--pegbo-fg-default);
    }

    .cwc-h svg {
      color: var(--pegbo-fg-accent-purple);
    }

    .cwc-transcript {
      flex: 1 1 auto;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 4px 20px 12px;
    }

    .cwc-turn {
      display: flex;
      gap: 10px;
    }

    .cwc-turn-av {
      width: 24px;
      height: 24px;
      flex: 0 0 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      color: var(--pegbo-fg-inverse);
      font-size: 10px;
      font-weight: 600;
    }

    .cwc-turn-av.is-caller {
      background: var(--pegbo-fg-accent-blue);
    }

    .cwc-turn-av.is-partner {
      background: var(--pegbo-fg-accent-purple);
    }

    .cwc-who {
      margin-bottom: 2px;
      font-size: 13px;
      font-weight: 600;
    }

    .cwc-line {
      font-size: 13px;
      font-weight: 300;
      line-height: 18px;
      color: var(--pegbo-fg-subtle);
    }

    .cwc-noteblock {
      border-top: 1px solid var(--pegbo-outline-default);
      padding: 14px 20px;
    }

    .cwc-min-note .cwc-noteblock {
      border-top: 0;
    }

    .cwc-note-h {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      font-size: 14px;
      font-weight: 600;
    }

    .cwc-note-h svg {
      color: var(--pegbo-fg-accent-purple);
    }

    .cwc-ta {
      width: 100%;
      min-height: 70px;
      padding: 10px 12px;
      border: 1px solid var(--pegbo-outline-strong);
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-default);
      font: inherit;
      font-size: 13px;
      font-weight: 300;
      resize: vertical;
    }

    .cwc-ta.is-tall {
      min-height: 90px;
    }

    .cwc-ta:focus {
      outline: none;
      border-color: var(--pegbo-surface-brand-bold);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--pegbo-surface-brand-bold) 30%, transparent);
    }

    .cwc-summary {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 8px 0 4px;
      text-align: center;
    }

    .cwc-summary-ic {
      width: 54px;
      height: 54px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: var(--pegbo-surface-brand-subtle);
      color: var(--pegbo-surface-brand-bold);
    }

    .cwc-summary-img {
      width: 88px;
      height: 88px;
    }

    .cwc-summary p {
      max-width: 300px;
      font-size: 12px;
      font-weight: 300;
      color: var(--pegbo-fg-subtle);
    }

    .cwc-field-l {
      margin-bottom: 6px;
      font-size: 13px;
      font-weight: 600;
    }

    .cwc-field-h {
      margin-bottom: 8px;
      font-size: 12px;
      font-weight: 300;
      color: var(--pegbo-fg-subtlest);
    }

    .cwc-sel {
      width: 100%;
      height: 42px;
      padding: 0 12px;
      border: 1px solid var(--pegbo-outline-strong);
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-default);
      font: inherit;
      font-size: 14px;
      cursor: pointer;
    }

    .cwc-sel:focus {
      outline: none;
      border-color: var(--pegbo-surface-brand-bold);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--pegbo-surface-brand-bold) 30%, transparent);
    }

    .cwc-foot {
      display: flex;
      justify-content: flex-end;
      padding: 14px 20px;
      border-top: 1px solid var(--pegbo-outline-default);
    }

    .cwc-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      background: var(--pegbo-surface-inverse);
      color: var(--pegbo-fg-inverse);
    }

    .cwc-bar-info {
      flex: 1 1 0;
      min-width: 0;
    }

    .cwc-bar-info b {
      display: block;
      font-size: 13px;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .cwc-bar-info span {
      display: block;
      font-size: 12px;
      font-weight: 300;
      color: color-mix(in srgb, var(--pegbo-fg-inverse) 70%, transparent);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .cwc-bar-timer {
      margin: 0 4px;
      font-size: 13px;
      font-variant-numeric: tabular-nums;
    }

    .cwc-min-note {
      padding: 14px;
    }

    .cwc-confirm {
      width: 600px;
      max-width: 100%;
      overflow: hidden;
      background: var(--pegbo-surface-default);
      border-radius: var(--pegbo-radius-md);
      box-shadow: var(--pegbo-shadow-lg);
    }

    .cwc-confirm-head {
      padding: 22px 24px;
      background: var(--pegbo-surface-inverse);
      color: var(--pegbo-fg-inverse);
    }

    .cwc-confirm-name {
      font-size: 20px;
      font-weight: 600;
    }

    .cwc-confirm-sub {
      margin-top: 4px;
      font-size: 13px;
      font-weight: 300;
      color: color-mix(in srgb, var(--pegbo-fg-inverse) 75%, transparent);
    }

    .cwc-confirm-foot {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 20px;
    }

    .cwc-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      height: 42px;
      padding: 0 16px;
      border: 1px solid transparent;
      border-radius: var(--pegbo-radius-md);
      font: inherit;
      font-size: 14px;
      font-weight: 500;
      white-space: nowrap;
      cursor: pointer;
    }

    .cwc-btn-ghost {
      margin-right: auto;
      background: none;
      color: var(--pegbo-fg-default);
    }

    .cwc-btn-ghost:hover {
      background: var(--pegbo-surface-sunken);
    }

    .cwc-btn-outline {
      background: var(--pegbo-surface-default);
      color: var(--pegbo-fg-default);
      border-color: var(--pegbo-outline-strong);
    }

    .cwc-btn-outline:hover {
      background: var(--pegbo-surface-sunken);
    }

    .cwc-btn-primary {
      background: var(--pegbo-surface-brand-bold);
      color: var(--pegbo-fg-inverse);
    }

    .cwc-btn-primary:hover {
      background: var(--pegbo-surface-brand-bold-hovered);
    }

    @media (max-width: 720px) {
      .cwc-body {
        grid-template-columns: 1fr;
      }
    }

    /* Bid Packages body scroll wrapper (PEG-473): fills the bounded Body host so the
       table's own DS ScrollContainer resolves against a bounded height (mirrors
       .project-list-scroll); the optional sync banner sits above the table card. */
    .bp-scroll {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .bp-search {
      width: 300px;
      max-width: 100%;
      margin-top: 16px;
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 40px;
      padding: 0 12px;
      border: 1px solid var(--pegbo-outline-strong);
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-default);
      color: var(--pegbo-fg-subtlest);
      transition:
        border-color var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out),
        box-shadow var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .bp-search:focus-within {
      border-color: var(--pegbo-surface-brand-bold);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--pegbo-surface-brand-bold) 30%, transparent);
    }

    .bp-search-icon {
      flex: 0 0 18px;
      color: var(--pegbo-fg-subtlest);
    }

    .bp-search input {
      flex: 1 1 0;
      min-width: 0;
      border: 0;
      outline: none;
      background: transparent;
      color: var(--pegbo-fg-default);
      font: inherit;
      font-size: 14px;
      line-height: 20px;
      font-weight: 300;
    }

    .bp-search input::placeholder {
      color: var(--pegbo-fg-subtlest);
      opacity: 1;
    }

    .bp-search-clear {
      flex: 0 0 auto;
      width: 18px;
      height: 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: var(--pegbo-radius-sm);
      padding: 0;
      background: transparent;
      color: var(--pegbo-fg-subtlest);
      cursor: pointer;
      transition:
        color var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out),
        box-shadow var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .bp-search-clear:hover {
      color: var(--pegbo-fg-default);
    }

    .bp-search-clear:focus-visible {
      outline: none;
      box-shadow: 0 0 0 2px var(--pegbo-outline-focus);
    }

    .bp-sort {
      flex: 0 0 14px;
      width: 14px;
      height: 14px;
      color: var(--pegbo-fg-subtlest);
    }

    .bp-sort.is-ascending,
    .bp-sort.is-descending {
      color: var(--pegbo-surface-brand-bold);
    }

    .bp-sort.is-none .bp-sort-up,
    .bp-sort.is-none .bp-sort-down {
      opacity: 0.55;
    }

    .bp-sort.is-ascending .bp-sort-down {
      opacity: 0.2;
    }

    .bp-sort.is-descending .bp-sort-up {
      opacity: 0.2;
    }

    /* Bid Packages columns (PEG-473): the class lands on both <th> and <td> (DS
       DataTable). Min-widths give the table a natural width so it scrolls in both
       axes with a sticky header when the Body host is narrower; the Bid Package
       column flexes to fill. The Bid Coverage body cells carry a per-row status tint
       (see td.bp-cov-cell.is-* below); the <th> header and all other columns keep the
       DS default. */
    .bp-col-package {
      min-width: 260px;
    }

    .bp-col-coverage {
      min-width: 220px;
    }

    .bp-col-due {
      min-width: 180px;
      white-space: nowrap;
    }

    .bp-col-actions {
      width: 52px;
      text-align: right;
    }

    .bp-pkg-stack {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }

    .bp-pkg-name {
      align-self: flex-start;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      border-radius: var(--pegbo-radius-xs);
      color: var(--pegbo-fg-link);
      /* body/md/emphasis + fg/link — mirrors the Projects list .project-name-link so both
         lists' primary name links render identically (16px). */
      font-size: var(--pegbo-font-size-md);
      line-height: var(--pegbo-line-height-md);
      font-weight: var(--pegbo-font-weight-medium);
      text-decoration: none;
    }

    .bp-pkg-name:hover {
      text-decoration: underline;
    }

    .bp-pkg-partners {
      /* Typography inherits the DS table-cell default (body/sm/default); only the subtle
         color is column-specific. */
      color: var(--pegbo-fg-subtle);
    }

    .bp-cov {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }

    .bp-cov-count {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--pegbo-fg-default);
      /* body/sm/emphasis — the coverage count value (e.g. "5/5") is emphasized. */
      font-size: var(--pegbo-font-size-sm);
      line-height: var(--pegbo-line-height-sm);
      font-weight: var(--pegbo-font-weight-medium);
    }

    .bp-cov-icon {
      flex: 0 0 auto;
      width: 18px;
      height: 18px;
      display: block;
    }

    /* Bid Coverage cell fill: the ENTIRE Bid Coverage <td> is tinted per row by coverage
       group (no → red, low → amber, good → green). The class lands on the body cell only
       (via DataTable cellClassName), so the <th> header stays default and all other
       columns stay white. The tint is a lighter shade of the SAME accent family the DS
       Status chip uses (surface.accent-{red|amber|green}), so the chip — with its
       outline.accent border — stays visibly distinct on top. var(--pegbo-*) only, no raw
       hex. The coverage indicator itself is the DS Status component (its own chrome). */
    td.bp-cov-cell.is-no {
      background: color-mix(in srgb, var(--pegbo-surface-accent-red) 55%, transparent);
    }

    td.bp-cov-cell.is-low {
      background: color-mix(in srgb, var(--pegbo-surface-accent-amber) 55%, transparent);
    }

    td.bp-cov-cell.is-good {
      background: color-mix(in srgb, var(--pegbo-surface-accent-green) 55%, transparent);
    }

    .bp-due {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
    }

    .bp-due-date {
      /* body/sm/default inherited from the DS table cell; keep nowrap + default color. */
      color: var(--pegbo-fg-default);
      white-space: nowrap;
    }

    .bp-due-risk {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: var(--pegbo-fg-subtle);
      /* body/xs/default — the due-date risk / warning line (e.g. "Overdue by 2 days"). */
      font-size: var(--pegbo-font-size-xs);
      line-height: var(--pegbo-line-height-xs);
      font-weight: var(--pegbo-font-weight-light);
    }

    .bp-due-risk svg {
      flex: 0 0 auto;
    }

    .bp-due-risk.is-urgent {
      color: var(--pegbo-fg-status-danger);
    }

    .bp-due-risk.is-soon {
      color: var(--pegbo-fg-status-warning);
    }

    /* Actions cell (PEG-473): right-aligns the DS ghost IconButton "more" trigger
       (lucide Ellipsis) that opens the DS DropdownMenu. Replaces the old fixed-
       position .bp-kebab + .bp-menu. */
    .bp-actions-cell {
      display: flex;
      justify-content: flex-end;
    }

    .bp-empty {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      min-height: 420px;
      padding: 40px 24px;
      text-align: center;
      animation: bp-empty-in var(--pegbo-motion-duration-medium) var(--pegbo-motion-easing-ease-out);
    }

    @keyframes bp-empty-in {
      from {
        opacity: 0;
        transform: translateY(6px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .bp-empty-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: var(--pegbo-surface-sunken);
      color: var(--pegbo-fg-default);
    }

    .bp-empty-copy {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      max-width: 520px;
    }

    .bp-empty-copy h2 {
      margin: 0;
      color: var(--pegbo-fg-default);
      font-size: 20px;
      line-height: 26px;
      font-weight: 600;
    }

    .bp-empty-copy p {
      margin: 0;
      color: var(--pegbo-fg-subtle);
      font-size: 14px;
      line-height: 20px;
      font-weight: 300;
    }

    .bp-skeleton-line,
    .bp-skeleton-dot {
      display: block;
      border-radius: var(--pegbo-radius-sm);
      background:
        linear-gradient(
          90deg,
          var(--pegbo-surface-neutral-subtle) 25%,
          var(--pegbo-outline-default) 37%,
          var(--pegbo-surface-neutral-subtle) 63%
        );
      background-size: 400% 100%;
      animation: project-skeleton-shimmer var(--pegbo-motion-duration-row-highlight) var(--pegbo-motion-easing-ease-out) infinite;
    }

    .bp-skeleton-line {
      height: 12px;
      margin-bottom: 8px;
    }

    .bp-skeleton-line.is-wide {
      width: 70%;
    }

    .bp-skeleton-line.is-short {
      width: 40%;
      margin-bottom: 0;
    }

    .bp-skeleton-line.is-mid {
      width: 60%;
      margin-bottom: 0;
    }

    .bp-skeleton-dot {
      width: 18px;
      height: 18px;
      border-radius: 50%;
    }

    .bp-head-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 0 0 auto;
    }

    /* Bid Packages error / access state (PEG-473): centered copy + optional Retry,
       rendered in the Body host for the non-ready sub-states. */
    .bp-list-state {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      min-height: 320px;
      padding: 40px 24px;
      text-align: center;
    }

    .bp-list-state-copy {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      max-width: 520px;
    }

    .bp-list-state-copy h2 {
      margin: 0;
      color: var(--pegbo-fg-default);
      font-size: var(--pegbo-font-size-xl);
      line-height: var(--pegbo-line-height-xl);
      font-weight: var(--pegbo-font-weight-semibold);
    }

    .bp-list-state-copy p {
      margin: 0;
      color: var(--pegbo-fg-subtle);
      font-size: var(--pegbo-font-size-sm);
      line-height: var(--pegbo-line-height-sm);
      font-weight: var(--pegbo-font-weight-light);
    }

    .bp-form {
      display: flex;
      flex-direction: column;
    }

    .bp-form-intro {
      margin: 0 0 16px;
      color: var(--pegbo-fg-subtle);
      font-size: 13px;
      line-height: 18px;
      font-weight: 300;
    }

    .bp-field {
      margin-bottom: 16px;
    }

    .bp-field-label {
      display: block;
      margin-bottom: 6px;
      color: var(--pegbo-fg-default);
      font-size: 13px;
      line-height: 18px;
      font-weight: 500;
    }

    .bp-req {
      color: var(--pegbo-fg-status-danger);
    }

    .bp-control {
      width: 100%;
      height: 40px;
      padding: 0 12px;
      border: 1px solid var(--pegbo-outline-strong);
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-default);
      color: var(--pegbo-fg-default);
      font: inherit;
      font-size: 14px;
      font-weight: 300;
      transition:
        border-color var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out),
        box-shadow var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .bp-control:focus {
      outline: none;
      border-color: var(--pegbo-surface-brand-bold);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--pegbo-surface-brand-bold) 30%, transparent);
    }

    .bp-field.is-invalid .bp-control {
      border-color: var(--pegbo-fg-status-danger);
    }

    .bp-field.is-invalid .bp-control:focus {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--pegbo-fg-status-danger) 22%, transparent);
    }

    .bp-field-hint {
      margin: 6px 0 0;
      color: var(--pegbo-fg-subtle);
      font-size: 12px;
      line-height: 16px;
      font-weight: 300;
    }

    .bp-field-err {
      margin: 6px 0 0;
      color: var(--pegbo-fg-status-danger);
      font-size: 12px;
      line-height: 16px;
    }

    .bp-stepper {
      display: inline-flex;
      align-items: center;
      height: 40px;
      border: 1px solid var(--pegbo-outline-strong);
      border-radius: var(--pegbo-radius-md);
      overflow: hidden;
    }

    .bp-stepper button {
      width: 40px;
      height: 100%;
      border: 0;
      background: var(--pegbo-surface-default);
      color: var(--pegbo-fg-default);
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .bp-stepper button:hover {
      background: var(--pegbo-surface-neutral-subtle);
    }

    .bp-stepper button:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      background: var(--pegbo-surface-default);
    }

    .bp-stepper input {
      width: 54px;
      height: 100%;
      border: 0;
      border-left: 1px solid var(--pegbo-outline-default);
      border-right: 1px solid var(--pegbo-outline-default);
      text-align: center;
      background: var(--pegbo-surface-default);
      color: var(--pegbo-fg-default);
      font: inherit;
      font-size: 14px;
      font-weight: 500;
      -moz-appearance: textfield;
    }

    .bp-stepper input:focus {
      outline: none;
    }

    .bp-stepper input::-webkit-outer-spin-button,
    .bp-stepper input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    .bp-tp-picker {
      padding: 10px;
      border: 1px solid var(--pegbo-outline-default);
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-neutral-subtle);
    }

    .bp-tp-search {
      width: 100%;
      margin-bottom: 10px;
    }

    .bp-tp-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-height: 172px;
      overflow-y: auto;
      padding-right: 2px;
    }

    .bp-tp-card,
    .bp-pcard {
      position: relative;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 12px;
      border: 1px solid var(--pegbo-outline-default);
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-default);
      cursor: pointer;
      transition:
        border-color var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out),
        box-shadow var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .bp-tp-card:hover,
    .bp-pcard:hover {
      background: var(--pegbo-surface-neutral-subtle);
    }

    .bp-tp-card:has(input:checked),
    .bp-pcard:has(input:checked) {
      border-color: var(--pegbo-fg-default);
      box-shadow: inset 0 0 0 1px var(--pegbo-fg-default);
    }

    .bp-tp-card input,
    .bp-pcard input {
      margin: 2px 0 0;
      width: 16px;
      height: 16px;
      flex: 0 0 16px;
      accent-color: var(--pegbo-surface-brand-bold);
      cursor: pointer;
    }

    .bp-tp-main,
    .bp-pcard-main {
      flex: 1 1 0;
      min-width: 0;
    }

    .bp-tp-name,
    .bp-pcard-name {
      display: block;
      color: var(--pegbo-fg-default);
      font-size: 14px;
      line-height: 20px;
      font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .bp-tp-meta,
    .bp-pcard-meta {
      display: block;
      margin-top: 1px;
      color: var(--pegbo-fg-subtle);
      font-size: 13px;
      line-height: 18px;
      font-weight: 300;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .bp-tp-empty {
      padding: 22px 12px;
      text-align: center;
      color: var(--pegbo-fg-subtle);
      font-size: var(--pegbo-font-size-sm);
      line-height: var(--pegbo-line-height-sm);
      font-weight: var(--pegbo-font-weight-light);
    }

    .bp-cand-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .bp-cand {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px;
      border: 1px solid var(--pegbo-outline-default);
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-default);
    }

    .bp-cand-logo {
      flex: 0 0 56px;
      width: 56px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: var(--pegbo-radius-sm);
      background: var(--pegbo-surface-neutral-subtle);
      color: var(--pegbo-fg-subtlest);
    }

    .bp-cand-logo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .bp-cand-body {
      flex: 1 1 0;
      min-width: 0;
    }

    .bp-cand-head {
      display: flex;
      align-items: baseline;
      gap: 8px;
    }

    .bp-cand-name {
      color: var(--pegbo-fg-default);
      font-size: var(--pegbo-font-size-sm);
      line-height: var(--pegbo-line-height-sm);
      font-weight: var(--pegbo-font-weight-medium);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .bp-cand-preferred {
      flex: 0 0 auto;
      color: var(--pegbo-fg-link);
      font-size: var(--pegbo-font-size-xs);
      line-height: var(--pegbo-line-height-xs);
      font-weight: var(--pegbo-font-weight-medium);
    }

    .bp-cand-loc {
      margin-top: 2px;
      color: var(--pegbo-fg-subtle);
      font-size: var(--pegbo-font-size-xs);
      line-height: var(--pegbo-line-height-xs);
      font-weight: var(--pegbo-font-weight-light);
    }

    .bp-cand-checking {
      align-self: center;
      color: var(--pegbo-fg-subtle);
      font-size: var(--pegbo-font-size-xs);
      line-height: var(--pegbo-line-height-xs);
      font-weight: var(--pegbo-font-weight-light);
      white-space: nowrap;
    }

    .bp-cand-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
    }

    .bp-cand-cta {
      flex: 0 0 auto;
      align-self: center;
    }

    .bp-cand-added {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--pegbo-fg-status-success);
      font-size: var(--pegbo-font-size-xs);
      font-weight: var(--pegbo-font-weight-medium);
    }

    .bp-cand-contacts-toggle {
      margin-top: 8px;
      padding: 0;
      border: 0;
      background: none;
      color: var(--pegbo-fg-link);
      font-size: var(--pegbo-font-size-xs);
      line-height: var(--pegbo-line-height-xs);
      font-weight: var(--pegbo-font-weight-medium);
      cursor: pointer;
    }

    .bp-cand-contacts-toggle:hover {
      text-decoration: underline;
    }

    .bp-cand-contacts {
      margin-top: 8px;
    }

    .bp-cand-contacts-state {
      color: var(--pegbo-fg-subtle);
      font-size: var(--pegbo-font-size-xs);
      line-height: var(--pegbo-line-height-xs);
      font-weight: var(--pegbo-font-weight-light);
    }

    .bp-cand-contacts-error {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 8px 10px;
      border: 1px solid var(--pegbo-outline-status-warning);
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-status-warning);
      color: var(--pegbo-fg-status-warning);
      font-size: var(--pegbo-font-size-xs);
      line-height: var(--pegbo-line-height-xs);
      font-weight: var(--pegbo-font-weight-light);
    }

    .bp-cand-contacts-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin: 0;
      padding: 8px 10px;
      list-style: none;
      border: 1px solid var(--pegbo-outline-default);
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-neutral-subtle);
    }

    .bp-cand-contact {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .bp-cand-contact + .bp-cand-contact {
      padding-top: 8px;
      border-top: 1px solid var(--pegbo-outline-subtle);
    }

    .bp-cand-contact-name {
      color: var(--pegbo-fg-default);
      font-size: var(--pegbo-font-size-xs);
      line-height: var(--pegbo-line-height-xs);
      font-weight: var(--pegbo-font-weight-medium);
    }

    .bp-cand-contact-meta {
      color: var(--pegbo-fg-subtle);
      font-size: var(--pegbo-font-size-xs);
      line-height: var(--pegbo-line-height-xs);
      font-weight: var(--pegbo-font-weight-light);
    }

    .bp-cand-pager {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding-top: 4px;
    }

    .bp-cand-page-info {
      color: var(--pegbo-fg-subtle);
      font-size: var(--pegbo-font-size-xs);
      line-height: var(--pegbo-line-height-xs);
      font-weight: var(--pegbo-font-weight-light);
    }

    .bp-cand-state {
      padding: 22px 12px;
      text-align: center;
      color: var(--pegbo-fg-subtle);
      font-size: var(--pegbo-font-size-xs);
      line-height: var(--pegbo-line-height-xs);
      font-weight: var(--pegbo-font-weight-light);
    }

    .bp-cand-error {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      padding: 22px 12px;
      text-align: center;
      color: var(--pegbo-fg-subtle);
      font-size: var(--pegbo-font-size-xs);
      line-height: var(--pegbo-line-height-xs);
      font-weight: var(--pegbo-font-weight-light);
    }

    .bp-cand-notice {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 8px 12px;
      border: 1px solid var(--pegbo-outline-status-warning);
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-status-warning);
      color: var(--pegbo-fg-status-warning);
      font-size: var(--pegbo-font-size-xs);
      line-height: var(--pegbo-line-height-xs);
      font-weight: var(--pegbo-font-weight-light);
    }

    .bp-detail {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .bp-detail-head {
      align-items: center;
      padding: 8px 24px 28px;
      background: var(--pegbo-surface-default);
      border-bottom: 1px solid var(--pegbo-outline-default);
    }

    .bp-detail-head .page-title {
      font-size: 24px;
      line-height: 30px;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .bp-detail-body {
      flex: 1 1 auto;
      padding: 20px 24px 32px;
    }

    .bp-detail-loading {
      margin: 16px 0;
      color: var(--pegbo-fg-subtle);
      font-size: var(--pegbo-font-size-sm);
      line-height: var(--pegbo-line-height-sm);
      font-weight: var(--pegbo-font-weight-light);
    }

    .bp-detail-state {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      padding: 24px 0;
    }

    .bp-detail-state h3 {
      margin: 0;
      color: var(--pegbo-fg-default);
      font-size: var(--pegbo-font-size-md);
      line-height: var(--pegbo-line-height-md);
      font-weight: var(--pegbo-font-weight-semibold);
    }

    .bp-detail-state p {
      margin: 0;
      color: var(--pegbo-fg-subtle);
      font-size: var(--pegbo-font-size-sm);
      line-height: var(--pegbo-line-height-sm);
      font-weight: var(--pegbo-font-weight-light);
    }

    /* Bid Package DETAIL — 3-zone master-detail scaffold (PEG-483 v1-1). Zone (1) is the
       PageShell nav (full-height left); the breadcrumbs + package header band sit in the
       pinned page-header slot above the Body; zones (2) list and (3) detail split the
       Body 40/60 and each scrolls independently. */

    /* Widen the nav host for the detail route so the richer package rows (name + due hint
       + coverage) fit; the host holds the portaled zone (1) sidebar. */
    .workspace-nav-host:has(> .bp-detail-nav) {
      width: 312px;
    }

    .bp-detail-nav {
      display: block;
    }

    .bp-nav {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .bp-nav-list {
      display: flex;
      flex-direction: column;
      gap: 2px;
      margin-top: 4px;
    }

    .bp-nav-empty {
      margin: 8px 12px;
      color: var(--pegbo-fg-subtle);
      font-size: var(--pegbo-font-size-sm);
      line-height: var(--pegbo-line-height-sm);
      font-weight: var(--pegbo-font-weight-light);
    }

    /* Truncation note — the response can carry fewer packages than page.totalElements
       (mirrors BidPackagesList); surface it so the nav is not silently partial. */
    .bp-nav-truncated {
      margin: 6px 12px 2px;
      padding-top: 6px;
      border-top: 1px solid var(--pegbo-outline-default);
      color: var(--pegbo-fg-subtlest);
      font-size: var(--pegbo-font-size-xs);
      line-height: var(--pegbo-line-height-sm);
      font-weight: var(--pegbo-font-weight-light);
    }

    /* One-line sidebar row (PEG-483 v1-1): name (truncates) + days hint + coverage
       dot/counter. Replaces the old two-line name/hint + Status-pill layout. */
    .bp-nav-pkg {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 40px;
      padding: 8px 12px;
      border-radius: var(--pegbo-radius-sm);
      color: var(--pegbo-fg-default);
      text-decoration: none;
      transition: background var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .bp-nav-pkg:hover {
      background: var(--pegbo-surface-neutral-subtle);
    }

    .bp-nav-pkg.is-active {
      background: var(--pegbo-surface-brand-subtle);
    }

    .bp-nav-pkg-name {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: var(--pegbo-font-size-sm);
      line-height: var(--pegbo-line-height-sm);
      font-weight: var(--pegbo-font-weight-light);
    }

    .bp-nav-pkg.is-active .bp-nav-pkg-name {
      font-weight: var(--pegbo-font-weight-medium);
    }

    .bp-nav-pkg-due {
      flex: 0 0 auto;
      color: var(--pegbo-fg-subtle);
      font-size: var(--pegbo-font-size-xs);
      line-height: var(--pegbo-line-height-xs);
      font-variant-numeric: tabular-nums;
    }

    .bp-nav-pkg-due.is-over {
      color: var(--pegbo-fg-status-danger-bold);
    }

    .bp-nav-pkg-cov {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    /* Coverage dot + counter — colored by coverage group (no/low/good). Both use the
       darker text-stop of the family for legibility, matching the header coverage
       Status family and the prototype sidebar indicator. */
    .bp-nav-dot {
      flex: 0 0 auto;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--pegbo-fg-subtle);
    }

    .bp-nav-dot.is-no {
      background: var(--pegbo-fg-status-danger-bold);
    }

    .bp-nav-dot.is-low {
      background: var(--pegbo-fg-status-warning);
    }

    .bp-nav-dot.is-good {
      background: var(--pegbo-fg-status-success);
    }

    .bp-nav-count {
      min-width: 3.5ch;
      text-align: right;
      color: var(--pegbo-fg-subtle);
      font-size: var(--pegbo-font-size-xs);
      line-height: var(--pegbo-line-height-xs);
      font-weight: var(--pegbo-font-weight-medium);
      font-variant-numeric: tabular-nums;
    }

    .bp-nav-count.is-no {
      color: var(--pegbo-fg-status-danger-bold);
    }

    .bp-nav-count.is-low {
      color: var(--pegbo-fg-status-warning);
    }

    .bp-nav-count.is-good {
      color: var(--pegbo-fg-status-success);
    }

    /* Header band — breadcrumbs render above (.bp-crumbs); this is the package header. */
    .bp-detail-band {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 8px 24px 16px;
      background: var(--pegbo-surface-default);
      border-bottom: 1px solid var(--pegbo-outline-subtle);
    }

    /* Orange toolbox tile — consistently signals "bid package" (prototype parity).
       White glyph is decorative (aria-hidden), so the bold-orange fill is fine. */
    .bp-detail-band-icon {
      flex: 0 0 auto;
      margin-top: 2px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-accent-orange-bold);
      color: var(--pegbo-fg-inverse);
    }

    .bp-detail-band-main {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .bp-detail-band-title {
      margin: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--pegbo-fg-default);
      font-size: var(--pegbo-font-size-2xl);
      line-height: var(--pegbo-line-height-2xl);
      font-weight: var(--pegbo-font-weight-semibold);
    }

    .bp-detail-band-meta {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px 12px;
      color: var(--pegbo-fg-subtle);
      font-size: var(--pegbo-font-size-sm);
      line-height: var(--pegbo-line-height-sm);
      font-weight: var(--pegbo-font-weight-light);
    }

    .bp-detail-band-cov {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .bp-detail-band-value {
      color: var(--pegbo-fg-default);
      font-variant-numeric: tabular-nums;
    }

    .bp-detail-band-info {
      display: inline-flex;
      color: var(--pegbo-fg-subtle);
    }

    .bp-detail-band-sep {
      color: var(--pegbo-fg-subtlest);
    }

    .bp-detail-band-due {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .bp-detail-band-due b {
      color: var(--pegbo-fg-default);
      font-weight: var(--pegbo-font-weight-light);
    }

    .bp-band-warn {
      display: inline-flex;
    }

    /* Overdue / attention: colour ONLY the date + warn icon — the "Bid due date:" label
       stays subtle (inherited from .bp-detail-band-meta). */
    .bp-detail-band-due.is-critical b,
    .bp-detail-band-due.is-critical .bp-band-warn {
      color: var(--pegbo-fg-status-danger-bold);
    }

    .bp-detail-band-due.is-attention b,
    .bp-detail-band-due.is-attention .bp-band-warn {
      color: var(--pegbo-fg-status-warning);
    }

    .bp-detail-band-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--pegbo-fg-subtle);
      font-size: var(--pegbo-font-size-sm);
      line-height: var(--pegbo-line-height-sm);
      font-weight: var(--pegbo-font-weight-light);
    }

    /* Body: the island fills the bounded Body host. When the island is the Body's direct
       child (no profile overlay), drop the Body's padding/scroll so the zones own the
       space and each scrolls independently. */
    .workspace-view-host:has(> .bp-detail-island) {
      padding: 0;
      overflow: hidden;
    }

    .bp-detail-island {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    .bp-detail-zones {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      overflow: hidden;
    }

    /* Zone (2) — trade-partners list. ~40% of the space right of the sidebar, min 360px,
       own scroll (both axes — the moved-as-is partners table is wider than the column). */
    .bp-detail-list {
      flex: 0 0 40%;
      min-width: 360px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-right: 1px solid var(--pegbo-outline-default);
      background: var(--pegbo-surface-default);
    }

    .bp-detail-list-head {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 24px 16px 12px;
      border-bottom: 1px solid var(--pegbo-outline-subtle);
    }

    .bp-detail-list-title {
      color: var(--pegbo-fg-default);
      font-size: var(--pegbo-font-size-lg);
      line-height: var(--pegbo-line-height-lg);
      font-weight: var(--pegbo-font-weight-semibold);
    }

    .bp-detail-list-count {
      color: var(--pegbo-fg-subtle);
      font-size: var(--pegbo-font-size-lg);
      line-height: var(--pegbo-line-height-lg);
      font-weight: var(--pegbo-font-weight-medium);
      font-variant-numeric: tabular-nums;
    }

    .bp-detail-list-actions {
      margin-left: auto;
    }

    .bp-detail-list-body {
      flex: 1 1 auto;
      min-height: 0;
      overflow-x: hidden;
      overflow-y: auto;
    }

    /* Bulk-action bar — REPLACES the search/filter toolbar when ≥1 partner is selected.
       Actions on the left, a close button on the right (clears the selection). App-side for
       now; the DS ActionPanel component (and the Email action) land in a follow-up task. */
    .bp-tp-actionbar {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 16px;
      background: var(--pegbo-surface-neutral-subtle);
      border-bottom: 1px solid var(--pegbo-outline-subtle);
      /* no-token: directional bottom shadow to lift the bar off the list — DS only ships
         symmetric shadow-* tokens; follow-up to add a directional shadow token to the DS. */
      box-shadow: 0 6px 8px -4px color-mix(in srgb, var(--pegbo-fg-default) 12%, transparent);
    }

    .bp-tp-actionbar-lead {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    /* Master checkbox aligned to the group-header checkbox column (16px inset + 16px chevron
       + 8px gap = 40px), so it sits directly above the group/row checkboxes. */
    .bp-tp-actionbar-check {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      margin-left: 24px;
    }

    /* Ungrouped (Group by = None) list — full width, no picker height cap. */
    .bp-tp-flat {
      display: flex;
      flex-direction: column;
    }

    .bp-tp-actionbar-count {
      color: var(--pegbo-fg-default);
      font-size: var(--pegbo-font-size-sm);
      line-height: var(--pegbo-line-height-sm);
      font-weight: var(--pegbo-font-weight-light);
    }

    .bp-tp-actionbar-actions {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .bp-delete-copy {
      margin: 0;
      color: var(--pegbo-fg-default);
      font-size: var(--pegbo-font-size-sm);
      line-height: var(--pegbo-line-height-sm);
      font-weight: var(--pegbo-font-weight-light);
    }

    /* Zone (3) — detail panel (v1-1 placeholder). ~60% of the space, min 480px, own scroll. */
    .bp-detail-panel {
      flex: 1 1 0;
      min-width: 480px;
      overflow: auto;
      background: var(--pegbo-surface-page);
    }

    .bp-detail-empty {
      height: 100%;
      min-height: 240px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 24px;
      text-align: center;
    }

    .bp-detail-empty-icon {
      color: var(--pegbo-fg-subtlest);
    }

    .bp-detail-empty-title {
      margin: 0;
      color: var(--pegbo-fg-default);
      font: var(--pegbo-font-body-md-emphasis);
    }

    .bp-detail-empty-sub {
      margin: 0;
      max-width: 320px;
      color: var(--pegbo-fg-subtle);
      font: var(--pegbo-font-body-sm-default);
    }

    /* ── Zone (3) v1-3 — inline trade-partner detail panel (PEG-485) ─────────────
       Header band (white) pinned over a grey scroll body of cards, matching the
       prototype's compact detail column. */
    .bp-detail-panel:has(> .bp-pd) {
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .bp-pd {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      background: var(--pegbo-surface-page);
    }

    .bp-pd-head {
      flex: 0 0 auto;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      padding: 20px 24px 16px;
      background: var(--pegbo-surface-default);
      border-bottom: 1px solid var(--pegbo-outline-default);
    }

    .bp-pd-head-main {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .bp-pd-name {
      margin: 0;
      color: var(--pegbo-fg-default);
      font: var(--pegbo-font-heading-2xl-default);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .bp-pd-head-tags {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
    }

    .bp-pd-cert-pill {
      display: inline-flex;
      align-items: center;
      padding: 1px 8px;
      border: 1px solid var(--pegbo-outline-default);
      border-radius: 999px;
      color: var(--pegbo-fg-subtle);
      font: var(--pegbo-font-body-sm-default);
    }

    .bp-pd-cert-more {
      background: transparent;
      color: var(--pegbo-fg-link);
      cursor: pointer;
      font-variant-numeric: tabular-nums;
    }

    .bp-pd-cert-pop {
      width: 200px;
    }

    .bp-pd-cert-pop-row {
      padding: 4px 8px;
      color: var(--pegbo-fg-default);
      font: var(--pegbo-font-body-sm-default);
    }

    .bp-pd-outreach {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .bp-pd-outreach-label {
      color: var(--pegbo-fg-subtle);
      font: var(--pegbo-font-body-sm-default);
    }

    .bp-pd-sep {
      color: var(--pegbo-fg-subtlest);
    }

    .bp-pd-body {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 20px 24px 28px;
    }

    /* Panel card — Bid Contacts / Company Details / Notes / Activity. */

    /* Bid contacts. */
    .bp-pd-contacts {
      display: flex;
      flex-direction: column;
      max-height: 440px;
      overflow-y: auto;
    }

    .bp-pd-contact {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px 0;
    }

    .bp-pd-contact + .bp-pd-contact {
      border-top: 1px solid var(--pegbo-outline-subtle);
    }

    .bp-pd-avatar {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 999px;
      background: var(--pegbo-surface-neutral-subtle);
      color: var(--pegbo-fg-subtle);
      font-size: var(--pegbo-font-size-xs);
      font-weight: var(--pegbo-font-weight-semibold);
    }

    .bp-pd-contact-main {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .bp-pd-contact-id {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .bp-pd-contact-name {
      color: var(--pegbo-fg-default);
      font: var(--pegbo-font-body-sm-high);
    }

    .bp-pd-contact-meta {
      color: var(--pegbo-fg-subtle);
      font: var(--pegbo-font-body-sm-default);
      overflow-wrap: anywhere;
    }

    .bp-pd-contact-acts {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    /* Company details — nested sub-sections. */

    /* Credential list — certificates / licences. */

    /* Secretary of State. */

    /* Notes. */

    /* Activity timeline. */

    .bp-pd-empty-tl {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 28px 14px;
      text-align: center;
    }

    .bp-pd-empty-tl-ico {
      color: var(--pegbo-fg-subtlest);
    }

    .bp-pd-empty-tl-title {
      margin: 0;
      color: var(--pegbo-fg-default);
      font: var(--pegbo-font-body-sm-emphasis);
    }

    .bp-pd-empty-tl-sub {
      margin: 0;
      color: var(--pegbo-fg-subtle);
      font: var(--pegbo-font-body-sm-default);
    }

    /* ── Zone (2) v1-2 — flat trade-partner list (prototype parity) ─────────────── */

    /* Controls row — pinned under the list head: search + group-by toggle + density. */
    .bp-tp-controls {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      border-bottom: 1px solid var(--pegbo-outline-subtle);
    }

    .bp-search.bp-tp-search {
      width: auto;
      flex: 1 1 180px;
      min-width: 160px;
      max-width: 320px;
      margin-top: 0;
      margin-bottom: 0;
      min-height: var(--pegbo-shared-height-sm, 34px);
    }

    /* Group-by trigger active dot — small brand dot after the label when grouping is on. */
    .bp-groupby-dot {
      flex: 0 0 auto;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--pegbo-fg-brand);
    }

    /* Group-by menu — right-aligned selected check + destructive item wrapper. */
    .bp-menu-check {
      margin-left: auto;
      color: var(--pegbo-fg-brand);
    }

    .bp-menu-danger {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--pegbo-fg-status-danger);
    }

    /* Density segmented control — pushed to the far right of the controls row. */
    .bp-density {
      margin-left: auto;
    }

    /* Extra-contacts popover (opened from the "+N contact" pill). */
    .bp-contact-pop {
      width: 288px;
    }

    .bp-contact-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      padding: 6px 8px;
    }

    .bp-contact-info {
      min-width: 0;
      display: flex;
      flex-direction: column;
    }

    .bp-contact-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--pegbo-fg-default);
      font-size: var(--pegbo-font-size-sm);
      line-height: var(--pegbo-line-height-sm);
      font-weight: var(--pegbo-font-weight-medium);
    }

    .bp-contact-meta {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--pegbo-fg-subtle);
      font-size: var(--pegbo-font-size-xs);
      line-height: var(--pegbo-line-height-xs);
      font-weight: var(--pegbo-font-weight-light);
    }

    .bp-contact-acts {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 2px;
    }

    /* Group section — a flat band; header sticks to the top of the scrolling body. */
    .bp-tpg-head {
      position: sticky;
      top: 0;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      background: var(--pegbo-surface-default);
      border-top: 1px solid var(--pegbo-outline-subtle);
      cursor: pointer;
      user-select: none;
    }

    .bp-tpg-head.is-not-invited {
      background: var(--pegbo-surface-neutral-subtle);
    }

    .bp-tpg-head.is-undecided {
      background: var(--pegbo-surface-accent-amber);
    }

    .bp-tpg-head.is-not-bidding {
      background: var(--pegbo-surface-accent-red);
    }

    .bp-tpg-head.is-bidding {
      background: var(--pegbo-surface-accent-blue);
    }

    .bp-tpg-head.is-bid-submitted {
      background: var(--pegbo-surface-accent-indigo);
    }

    .bp-tpg-head.is-won {
      background: var(--pegbo-surface-accent-green);
    }

    .bp-tpg-head:focus-visible {
      outline: none;
      box-shadow: inset 0 0 0 2px var(--pegbo-outline-focus);
    }

    .bp-tpg:first-child .bp-tpg-head {
      border-top: 0;
    }

    .bp-tpg-lead {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    /* Group select-all checkbox — first in the leading cluster so it sits in the same
       vertical column as the partner-row checkboxes (both at the 16px head/row inset).
       Fixed width reserves the column even for empty buckets (which render an empty
       placeholder span, no Checkbox), so the dot/title/count never shift. Hidden by
       default and revealed like the row checkbox: on head hover/focus, or pinned via
       is-active when at least one row in the bucket is selected. */
    .bp-tpg-check {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      width: 16px;
      min-width: 16px;
      opacity: 0;
      transition: opacity var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .bp-tpg-head:hover .bp-tpg-check,
    .bp-tpg-head:focus-within .bp-tpg-check,
    .bp-tpg-check.is-active {
      opacity: 1;
    }

    /* Hover-reveal checkboxes (row .bp-tpc-check + group .bp-tpg-check above) are
       opacity-only, so on touch/coarse-pointer input — no pre-tap hover state — the
       control stays hit-testable at opacity:0 and a first tap could act on it unseen.
       Force both permanently visible there instead of relying on hover to reveal them.
       pointer/hover alone only reflect the PRIMARY input, so a hybrid touchscreen
       laptop (fine trackpad primary, coarse touchscreen secondary) would never match —
       any-pointer: coarse catches a coarse pointer anywhere on the device, primary or
       not, which is what actually matters here (the user can tap the touchscreen
       regardless of what the browser calls "primary"). */
    @media (hover: none), (pointer: coarse), (any-pointer: coarse) {
      .bp-tpc-check,
      .bp-tpg-check {
        opacity: 1;
      }
    }

    .bp-tpg-chev {
      color: var(--pegbo-fg-subtle);
      transition: transform var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .bp-tpg-chev.is-collapsed {
      transform: rotate(-90deg);
    }

    .bp-tpg-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--pegbo-fg-subtle);
    }

    .bp-tpg-dot.is-undecided {
      background: var(--pegbo-fg-accent-amber);
    }

    .bp-tpg-dot.is-not-bidding {
      background: var(--pegbo-fg-accent-red);
    }

    .bp-tpg-dot.is-bidding {
      background: var(--pegbo-fg-accent-blue);
    }

    .bp-tpg-dot.is-bid-submitted {
      background: var(--pegbo-fg-accent-indigo);
    }

    .bp-tpg-dot.is-won {
      background: var(--pegbo-fg-accent-green);
    }

    .bp-tpg-dot.is-not-invited {
      background: var(--pegbo-fg-subtle);
    }

    .bp-tpg-dot.is-empty {
      background: var(--pegbo-fg-subtlest);
    }

    .bp-tpg-title {
      color: var(--pegbo-fg-default);
      font-size: var(--pegbo-font-size-sm);
      line-height: var(--pegbo-line-height-sm);
      font-weight: var(--pegbo-font-weight-semibold);
    }

    .bp-tpg-title.is-empty {
      color: var(--pegbo-fg-subtle);
      font-weight: var(--pegbo-font-weight-medium);
    }

    .bp-tpg-count {
      color: var(--pegbo-fg-subtle);
      font-size: var(--pegbo-font-size-sm);
      font-variant-numeric: tabular-nums;
    }

    .bp-tpg-count::before {
      content: '·';
      margin-right: 4px;
    }

    .bp-tpg-count.is-empty {
      color: var(--pegbo-fg-subtlest);
    }

    .bp-tpg-empty {
      margin: 0;
      padding: 8px 16px 12px 40px;
      color: var(--pegbo-fg-subtlest);
      font-size: var(--pegbo-font-size-sm);
      line-height: var(--pegbo-line-height-sm);
      font-weight: var(--pegbo-font-weight-light);
    }

    /* Flat full-width partner row — no card border; a top border divides rows. The whole
       row is the select target (role=button); nested controls stopPropagation. */
    .bp-tpc {
      position: relative;
      display: flex;
      gap: 10px;
      padding: var(--pegbo-spacing-sm) 16px;
      border-top: 1px solid var(--pegbo-outline-default);
      cursor: pointer;
      transition: background var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .bp-tpc:focus-visible {
      outline: none;
      box-shadow: inset 0 0 0 2px var(--pegbo-outline-focus);
    }

    .bp-tpc.is-indent {
      padding-left: 40px;
    }

    .bp-tpg-body .bp-tpc:first-child,
    .bp-tp-list .bp-tpc:first-child {
      border-top: 0;
    }

    /* Hover applies only when not the open (selected) row, so selection stays distinct. */
    .bp-tpc:not(.is-selected):hover {
      background: var(--pegbo-surface-neutral-subtle);
    }

    .bp-tpc.is-checked {
      background: var(--pegbo-surface-selected);
    }

    .bp-tpc.is-selected {
      background: var(--pegbo-surface-page);
    }

    .bp-tpc-edge {
      position: absolute;
      inset: 0 auto 0 0;
      width: 6px;
      background: var(--pegbo-surface-selected-bold);
    }

    /* Checkbox reveals on row hover/focus; a checked box stays visible. */
    .bp-tpc-check {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      padding-top: 2px;
      opacity: 0;
      transition: opacity var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .bp-tpc:hover .bp-tpc-check,
    .bp-tpc:focus-within .bp-tpc-check,
    .bp-tpc-check.is-on {
      opacity: 1;
    }

    .bp-tpc-main {
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .bp-tpc-line1 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .bp-tpc-name {
      min-width: 0;
      flex: 0 1 auto;
      color: var(--pegbo-fg-default);
      font: var(--pegbo-font-body-md-emphasis);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .bp-tpc-right {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    /* Single More menu — reveals on row hover/focus, and stays visible while selected. */
    .bp-tpc-more {
      display: inline-flex;
      align-items: center;
      opacity: 0;
      transition: opacity var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .bp-tpc:hover .bp-tpc-more,
    .bp-tpc:focus-within .bp-tpc-more,
    .bp-tpc.is-selected .bp-tpc-more {
      opacity: 1;
    }

    .bp-tpc-line2 {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      padding-bottom: 8px;
      color: var(--pegbo-fg-subtle);
    }

    .bp-tpc-line2-icon {
      flex: 0 0 auto;
      color: var(--pegbo-fg-subtlest);
    }

    .bp-tpc-city {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: var(--pegbo-font-size-sm);
      line-height: var(--pegbo-line-height-sm);
      font-weight: var(--pegbo-font-weight-light);
    }

    /* Preferred-contact line — "Name · Phone" (truncates first). */
    .bp-tpc-contact {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--pegbo-fg-subtle);
      font: var(--pegbo-font-body-sm-default);
    }

    /* "+N contact" pill — opens the extra-contacts popover. */
    .bp-tpc-extra {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      border: 0;
      border-radius: 9999px;
      padding: 0 6px;
      background: var(--pegbo-surface-sunken);
      color: var(--pegbo-fg-link);
      font-size: var(--pegbo-font-size-xs);
      line-height: var(--pegbo-line-height-xs);
      font-weight: var(--pegbo-font-weight-medium);
      font-variant-numeric: tabular-nums;
      cursor: pointer;
    }

    .bp-tpc-note {
      display: flex;
      align-items: flex-start;
      gap: 6px;
      margin-top: 2px;
      padding: 0;
      border: 0;
      background: none;
      color: var(--pegbo-fg-default);
      font: inherit;
      text-align: left;
      cursor: pointer;
    }

    .bp-tpc-note-icon {
      flex: 0 0 auto;
      margin-top: 2px;
      color: var(--pegbo-fg-link);
    }

    .bp-tpc-note-text {
      font-size: var(--pegbo-font-size-sm);
      line-height: var(--pegbo-line-height-sm);
      font-weight: var(--pegbo-font-weight-light);
    }

    .bp-tpc-note-text.is-clamped {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .bp-tp-nomatch {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 40px 24px;
      text-align: center;
    }

    .bp-tp-nomatch-title {
      margin: 0;
      color: var(--pegbo-fg-default);
      font-size: var(--pegbo-font-size-sm);
      line-height: var(--pegbo-line-height-sm);
      font-weight: var(--pegbo-font-weight-semibold);
    }

    .bp-tp-nomatch-sub {
      margin: 0 0 6px;
      color: var(--pegbo-fg-subtle);
      font-size: var(--pegbo-font-size-sm);
      line-height: var(--pegbo-line-height-sm);
      font-weight: var(--pegbo-font-weight-light);
    }

    .accordion {
      background: var(--pegbo-surface-default);
      border: 1px solid var(--pegbo-outline-default);
      border-radius: var(--pegbo-radius-md);
      overflow: hidden;
    }

    .accordion + .accordion {
      margin-top: 16px;
    }

    .accordion-head {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 15px 18px;
      border-radius: var(--pegbo-radius-md);
      cursor: pointer;
      user-select: none;
    }

    .accordion-head:focus-visible {
      outline: none;
      box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--pegbo-surface-brand-bold) 30%, transparent);
    }

    .accordion-chevron {
      flex: 0 0 18px;
      color: var(--pegbo-fg-default);
      transition: transform var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .accordion[data-open='false'] .accordion-chevron {
      transform: rotate(-90deg);
    }

    .accordion-title {
      color: var(--pegbo-fg-default);
      font-size: 17px;
      font-weight: 600;
    }

    .accordion-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 22px;
      height: 22px;
      padding: 0 7px;
      border-radius: var(--pegbo-radius-sm);
      background: var(--pegbo-surface-neutral-subtle);
      color: var(--pegbo-fg-subtle);
      font-size: 12px;
      font-weight: 600;
    }

    .accordion-actions {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .accordion-collapsed {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      margin-left: 8px;
      color: var(--pegbo-fg-subtle);
      font-size: 13px;
      font-weight: 300;
    }

    .accordion-collapsed b {
      color: var(--pegbo-fg-default);
      font-weight: 600;
    }

    .bp-summary-sep {
      margin: 0 4px;
      color: var(--pegbo-fg-subtlest);
    }

    .accordion-body {
      padding: 2px 18px 18px;
      border-top: 1px solid var(--pegbo-outline-default);
    }

    .bp-dash-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 16px;
    }

    .bp-card {
      padding: 18px 20px;
      border: 1px solid var(--pegbo-outline-default);
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-default);
    }

    .bp-card-top {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }

    .bp-card-label {
      color: var(--pegbo-fg-default);
      font-size: 16px;
      font-weight: 600;
    }

    .bp-card-num {
      color: var(--pegbo-fg-default);
      font-size: 24px;
      line-height: 1.1;
      font-weight: 500;
      letter-spacing: -0.01em;
    }

    .bp-card-date {
      color: var(--pegbo-fg-default);
      font-size: 24px;
      line-height: 1.1;
      font-weight: 500;
      letter-spacing: -0.01em;
    }

    .bp-card-date.is-empty {
      color: var(--pegbo-fg-subtlest);
      font-weight: 500;
    }

    .bp-card-cap {
      margin: 8px 0 0;
      color: var(--pegbo-fg-subtle);
      font-size: 13px;
      font-weight: 300;
    }

    .bp-pill {
      display: inline-flex;
      align-items: center;
      height: 22px;
      padding: 0 9px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .bp-pill.is-no {
      background: var(--pegbo-surface-status-danger);
      border: 1px solid var(--pegbo-outline-status-danger);
      color: var(--pegbo-fg-status-danger);
    }

    .bp-pill.is-low {
      background: var(--pegbo-surface-status-warning);
      border: 1px solid var(--pegbo-outline-status-warning);
      color: var(--pegbo-fg-status-warning);
    }

    .bp-pill.is-good {
      background: var(--pegbo-surface-status-success);
      border: 1px solid var(--pegbo-outline-status-success);
      color: var(--pegbo-fg-status-success);
    }

    .bp-risk-inline {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-left: auto;
      font-size: 13px;
      font-weight: 500;
    }

    .bp-risk-inline.is-crit {
      color: var(--pegbo-fg-status-danger);
    }

    .bp-risk-inline.is-attn {
      color: var(--pegbo-fg-status-warning);
    }

    .bp-funnel {
      margin-top: 16px;
      padding: 18px 20px;
      border: 1px solid var(--pegbo-outline-default);
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-default);
    }

    .bp-funnel-head {
      margin-bottom: 16px;
      color: var(--pegbo-fg-default);
      font-size: 16px;
      font-weight: 600;
    }

    .engagement-funnel-bar {
      display: flex;
      height: 14px;
      border-radius: 0;
      overflow: hidden;
      background: var(--pegbo-surface-neutral-subtle);
    }

    .engagement-funnel-seg {
      height: 100%;
    }

    .engagement-funnel-seg + .engagement-funnel-seg {
      box-shadow: inset 2px 0 0 var(--pegbo-surface-default);
    }

    .engagement-funnel-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 12px 26px;
      margin: 16px 0 0;
      padding: 0;
      list-style: none;
    }

    .engagement-funnel-legend-item {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--pegbo-fg-subtle);
      font-size: 13px;
      font-weight: 300;
    }

    .engagement-funnel-dot {
      width: 11px;
      height: 11px;
      flex: 0 0 11px;
      border-radius: 50%;
    }

    .engagement-funnel-legend-count {
      color: var(--pegbo-fg-default);
      font-weight: 600;
    }

    .engagement-funnel-seg.is-not-invited,
    .engagement-funnel-dot.is-not-invited {
      background: var(--pegbo-fg-accent-grey);
    }

    .engagement-funnel-seg.is-undecided,
    .engagement-funnel-dot.is-undecided {
      background: var(--pegbo-chart-orange-500);
    }

    .engagement-funnel-seg.is-not-bidding,
    .engagement-funnel-dot.is-not-bidding {
      background: var(--pegbo-chart-red-500);
    }

    .engagement-funnel-seg.is-bidding,
    .engagement-funnel-dot.is-bidding {
      background: var(--pegbo-chart-blue-500);
    }

    .engagement-funnel-seg.is-bid-submitted,
    .engagement-funnel-dot.is-bid-submitted {
      background: var(--pegbo-chart-teal-500);
    }

    .engagement-funnel-seg.is-won,
    .engagement-funnel-dot.is-won {
      background: var(--pegbo-chart-green-500);
    }

    .bp-intel {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-top: 32px;
      padding: 14px 16px;
      border: 1px solid var(--pegbo-outline-accent-indigo);
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-accent-indigo);
    }

    .bp-intel-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-fg-accent-indigo);
      color: var(--pegbo-surface-default);
    }

    .bp-intel-text {
      flex: 1 1 0;
      min-width: 0;
    }

    .bp-intel-text h4 {
      margin: 0;
      color: var(--pegbo-fg-default);
      font-size: 15px;
      font-weight: 600;
    }

    .bp-intel-text p {
      margin: 2px 0 0;
      color: var(--pegbo-fg-subtle);
      font-size: 13px;
      font-weight: 300;
    }

    .bp-ptable {
      display: grid;
      grid-template-columns: 40px minmax(220px, 1.3fr) 180px 150px minmax(200px, 1fr) 150px;
      margin-top: 14px;
    }

    .bp-pthead,
    .bp-prow {
      display: contents;
    }

    .bp-pth {
      display: flex;
      align-items: center;
      padding: 9px 12px;
      background: var(--pegbo-surface-neutral-subtle);
      border-top: 1px solid var(--pegbo-outline-default);
      border-bottom: 1px solid var(--pegbo-outline-default);
      color: var(--pegbo-fg-subtle);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .bp-pth-sort {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 0;
      border: 0;
      background: none;
      color: inherit;
      font: inherit;
      letter-spacing: inherit;
      text-transform: inherit;
      cursor: pointer;
    }

    .bp-pcell {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      min-width: 0;
      padding: 12px;
      border-bottom: 1px solid var(--pegbo-outline-default);
      font-size: 14px;
    }

    .bp-prow:hover .bp-pcell {
      background: var(--pegbo-surface-neutral-subtle);
    }

    .bp-pcell-check,
    .bp-pth.bp-pcell-check {
      align-items: center;
    }

    .bp-checkbox {
      width: 16px;
      height: 16px;
      accent-color: var(--pegbo-surface-brand-bold);
      cursor: pointer;
    }

    .bp-pname {
      color: var(--pegbo-fg-link);
      font-size: 14px;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .bp-pmeta {
      color: var(--pegbo-fg-subtle);
      font-size: 13px;
      font-weight: 300;
    }

    .bp-certs {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 1px;
    }

    .bp-cert {
      display: inline-flex;
      align-items: center;
      height: 18px;
      padding: 0 6px;
      border-radius: var(--pegbo-radius-xs);
      background: var(--pegbo-surface-neutral-subtle);
      color: var(--pegbo-fg-subtle);
      font-size: 11px;
      font-weight: 500;
    }

    .bp-outreach {
      display: inline-flex;
      align-items: center;
      align-self: flex-start;
      height: 24px;
      padding: 0 10px;
      border: 1px solid transparent;
      border-radius: var(--pegbo-radius-md);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .bp-outreach.is-follow {
      background: var(--pegbo-surface-accent-blue);
      border-color: var(--pegbo-outline-accent-blue);
      color: var(--pegbo-fg-accent-blue);
    }

    .bp-outreach.is-contacted {
      background: var(--pegbo-surface-accent-green);
      border-color: var(--pegbo-outline-accent-green);
      color: var(--pegbo-fg-accent-green);
    }

    .bp-outreach.is-responded {
      background: var(--pegbo-surface-accent-teal);
      border-color: var(--pegbo-outline-accent-teal);
      color: var(--pegbo-fg-accent-teal);
    }

    .bp-outreach.is-none {
      background: var(--pegbo-surface-neutral-subtle);
      border-color: var(--pegbo-outline-accent-grey);
      color: var(--pegbo-fg-subtle);
    }

    .bp-intel-cell {
      color: var(--pegbo-fg-default);
      font-size: 13px;
      font-weight: 300;
    }

    .bp-intel-cell.is-muted {
      color: var(--pegbo-fg-subtlest);
    }

    .bp-link {
      align-self: flex-start;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      border: 0;
      padding: 0;
      background: transparent;
      color: var(--pegbo-fg-link);
      font: inherit;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
    }

    .bp-link:hover {
      text-decoration: underline;
    }

    .bp-pcell-acts {
      flex-direction: row;
      align-items: center;
      gap: 2px;
    }

    .bp-iconbtn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border: 1px solid var(--pegbo-outline-default);
      border-radius: var(--pegbo-radius-sm);
      background: transparent;
      color: var(--pegbo-fg-subtle);
      cursor: pointer;
    }

    .bp-iconbtn:hover {
      background: var(--pegbo-surface-neutral-subtle);
      color: var(--pegbo-fg-default);
    }

    .bp-pempty {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 48px 24px;
      text-align: center;
    }

    .bp-pempty h3 {
      margin: 4px 0 0;
      color: var(--pegbo-fg-default);
      font-size: 16px;
      font-weight: 600;
    }

    .bp-pempty p {
      margin: 0 0 6px;
      max-width: 340px;
      color: var(--pegbo-fg-subtle);
      font-size: 14px;
      font-weight: 300;
    }

    .bp-rowmenu {
      position: fixed;
      z-index: 160;
      min-width: 208px;
      padding: 6px;
      background: var(--pegbo-surface-default);
      border: 1px solid var(--pegbo-outline-default);
      border-radius: var(--pegbo-radius-md);
      box-shadow: var(--pegbo-shadow-lg);
    }

    .bp-rowmenu-item {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 9px 10px;
      border: 0;
      border-radius: var(--pegbo-radius-sm);
      background: transparent;
      color: var(--pegbo-fg-default);
      font: inherit;
      font-size: 14px;
      text-align: left;
      cursor: pointer;
    }

    .bp-rowmenu-item:hover {
      background: var(--pegbo-surface-neutral-subtle);
    }

    .bp-rowmenu-item svg {
      flex: 0 0 auto;
      color: var(--pegbo-fg-subtle);
    }

    .bp-rowmenu-sep {
      height: 1px;
      margin: 6px 4px;
      background: var(--pegbo-outline-default);
    }

    .bp-add {
      display: flex;
      flex-direction: column;
      min-height: 100%;
    }

    .bp-pick {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 4px;
    }

    .bp-add-foot {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: auto;
      padding-top: 16px;
    }

    .bp-flt-bar {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 12px;
    }

    .bp-flt-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 32px;
      padding: 0 12px;
      border: 1px solid var(--pegbo-outline-strong);
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-default);
      color: var(--pegbo-fg-default);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: border-color var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .bp-flt-toggle:hover {
      border-color: var(--pegbo-surface-brand-bold);
    }

    .bp-flt-toggle.is-open {
      border-color: var(--pegbo-surface-brand-bold);
      color: var(--pegbo-fg-link);
    }

    .bp-flt-toggle:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--pegbo-surface-brand-bold) 30%, transparent);
    }

    .bp-flt-count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: var(--pegbo-radius-lg);
      background: var(--pegbo-surface-brand-bold);
      color: var(--pegbo-surface-default);
      font-size: 11px;
      font-weight: 600;
    }

    .bp-flt-clear-all {
      border: 0;
      background: transparent;
      color: var(--pegbo-fg-link);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      padding: 0;
    }

    .bp-flt-clear-all:hover {
      text-decoration: underline;
    }

    /* Map view toggle — mirrors .bp-flt-toggle, pinned to the right of the filter bar (AC 13). */
    .bp-flt-map-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 32px;
      margin-left: auto;
      padding: 0 12px;
      border: 1px solid var(--pegbo-outline-strong);
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-default);
      color: var(--pegbo-fg-default);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: border-color var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .bp-flt-map-toggle:hover {
      border-color: var(--pegbo-surface-brand-bold);
    }

    .bp-flt-map-toggle.is-open {
      border-color: var(--pegbo-surface-brand-bold);
      color: var(--pegbo-fg-link);
    }

    .bp-flt-map-toggle:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--pegbo-surface-brand-bold) 30%, transparent);
    }

    /* Split list + map layout, shown when the map toggle is on. The two panes share the drawer body
       height: the list scrolls, the map fills its pane (google-map-react needs an explicit height). */
    .bp-add-split {
      display: flex;
      gap: 16px;
      margin-top: 4px;
      flex: 1 1 auto;
      min-height: 0;
    }

    .bp-pick-split {
      flex: 1 1 0;
      min-width: 0;
      overflow-y: auto;
    }

    .bp-map-pane {
      flex: 1 1 0;
      min-width: 0;
      min-height: 480px;
      border: 1px solid var(--pegbo-outline-default);
      border-radius: var(--pegbo-radius-md);
      overflow: hidden;
    }

    .bp-map {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 480px;
    }

    .bp-map-loading {
      position: absolute;
      inset: 0;
      background: var(--pegbo-surface-page);
    }

    .bp-map-unavailable {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 480px;
      color: var(--pegbo-fg-subtle);
      font-size: var(--pegbo-font-size-sm);
    }

    /* Loading / error surface for the map pane, so a pending or failed candidate fetch doesn't read
       as a legitimately-empty overview. */
    .bp-map-status {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 480px;
      padding: 16px;
      text-align: center;
      color: var(--pegbo-fg-subtle);
      font-size: var(--pegbo-font-size-sm);
    }

    /* google-map-react anchors this wrapper's top-left at the marker's coordinate; the pin and card
       are absolutely positioned relative to it and offset to center on the point. */
    .bp-map-pin-wrap {
      position: relative;
    }

    .bp-map-pin-wrap.is-open {
      z-index: 2;
    }

    .bp-map-marker {
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      transform: translate(-50%, -50%);
      border: 1px solid var(--pegbo-outline-strong);
      border-radius: 50%;
      background: var(--pegbo-surface-default);
      color: var(--pegbo-fg-link);
      cursor: pointer;
      box-shadow: var(--pegbo-shadow-sm);
    }

    .bp-map-marker.is-added {
      background: var(--pegbo-surface-brand-bold);
      color: var(--pegbo-surface-default);
    }

    .bp-map-marker.is-open {
      border-color: var(--pegbo-surface-brand-bold);
    }

    /* Anchor sits at the pin (google-map-react positions the wrapper); the default transform centers
       the card above the pin. Marker JS overrides the transform to keep the card inside the pane. */
    .bp-map-card-anchor {
      position: absolute;
      left: 0;
      top: 0;
      transform: translate(-50%, calc(-100% - 22px));
    }

    .bp-map-card {
      width: 260px;
      max-width: 80vw;
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 12px;
      border: 1px solid var(--pegbo-outline-default);
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-default);
      box-shadow: var(--pegbo-shadow-lg);
    }

    .bp-map-card-x {
      position: absolute;
      top: 8px;
      right: 8px;
      padding: 0;
      border: 0;
      background: none;
      color: var(--pegbo-fg-subtle);
      cursor: pointer;
    }

    .bp-map-card-head {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding-right: 20px;
    }

    .bp-map-card-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      width: 32px;
      height: 32px;
      border-radius: var(--pegbo-radius-sm);
      background: var(--pegbo-surface-page);
      color: var(--pegbo-fg-subtle);
      overflow: hidden;
    }

    .bp-map-card-logo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .bp-map-card-id {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }

    .bp-map-card-name {
      color: var(--pegbo-fg-default);
      font-size: var(--pegbo-font-size-sm);
      font-weight: var(--pegbo-font-weight-medium);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .bp-map-card-loc {
      color: var(--pegbo-fg-subtle);
      font-size: var(--pegbo-font-size-xs);
      line-height: var(--pegbo-line-height-xs);
    }

    .bp-map-card-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .bp-map-card-cta {
      display: flex;
    }

    /* Narrow drawer / WCAG 1.4.10 reflow (≤ ~768px): stack the list above the map instead of two
       cramped columns, so both panes keep usable width and the popup card is not squeezed. */
    @media (max-width: 768px) {
      .bp-add-split {
        flex-direction: column;
      }

      .bp-pick-split,
      .bp-map-pane {
        flex: 1 1 auto;
        min-width: 0;
      }

      .bp-map-pane {
        min-height: 320px;
      }

      /* The map (and its loading / error / unavailable surfaces) fills its pane; drop the 480px floor
         to the mobile pane height so an oversized child isn't clipped by the pane's overflow:hidden. */
      .bp-map,
      .bp-map-unavailable,
      .bp-map-status {
        min-height: 320px;
        max-height: 50vh;
      }
    }

    .bp-flt-panel {
      display: flex;
      flex-direction: column;
      gap: 18px;
      margin-top: 12px;
      padding: 16px;
      border: 1px solid var(--pegbo-outline-default);
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-page);
    }

    .bp-flt-section {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .bp-flt-title {
      margin: 0;
      font-size: 13px;
      font-weight: 600;
      color: var(--pegbo-fg-default);
    }

    .bp-flt-field {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .bp-flt-label {
      font-size: 12px;
      font-weight: 500;
      color: var(--pegbo-fg-subtle);
    }

    .bp-flt-combo {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 36px;
      padding: 0 10px;
      border: 1px solid var(--pegbo-outline-strong);
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-default);
    }

    .bp-flt-combo:focus-within {
      border-color: var(--pegbo-surface-brand-bold);
    }

    .bp-flt-combo-icon {
      flex: 0 0 15px;
      color: var(--pegbo-fg-subtlest);
    }

    .bp-flt-combo .bp-flt-input {
      flex: 1 1 0;
      min-width: 0;
      border: 0;
      outline: none;
      background: transparent;
    }

    .bp-flt-input {
      min-height: 36px;
      padding: 0 10px;
      border: 1px solid var(--pegbo-outline-strong);
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-default);
      color: var(--pegbo-fg-default);
      font: inherit;
      font-size: 14px;
    }

    .bp-flt-input::placeholder {
      color: var(--pegbo-fg-subtlest);
      opacity: 1;
    }

    .bp-flt-input.is-disabled {
      background: var(--pegbo-surface-sunken);
      color: var(--pegbo-fg-subtlest);
      cursor: not-allowed;
    }

    .bp-flt-pop {
      position: absolute;
      z-index: 20;
      top: calc(100% + 4px);
      left: 0;
      right: 0;
      max-height: 220px;
      overflow-y: auto;
      border: 1px solid var(--pegbo-outline-default);
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-raised);
      box-shadow: 0 8px 24px color-mix(in srgb, var(--pegbo-fg-default) 12%, transparent);
    }

    .bp-flt-options {
      list-style: none;
      margin: 0;
      padding: 4px;
    }

    .bp-flt-option {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 8px;
      border-radius: var(--pegbo-radius-sm);
      font-size: 13px;
      color: var(--pegbo-fg-default);
      cursor: pointer;
    }

    .bp-flt-option.is-active,
    .bp-flt-option:hover {
      background: var(--pegbo-surface-brand-subtle);
    }

    .bp-flt-optcheck {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 16px;
      width: 16px;
      height: 16px;
      border: 1px solid var(--pegbo-outline-strong);
      border-radius: var(--pegbo-radius-sm);
      color: var(--pegbo-surface-default);
    }

    .bp-flt-optcheck.is-on {
      background: var(--pegbo-surface-brand-bold);
      border-color: var(--pegbo-surface-brand-bold);
    }

    .bp-flt-status {
      padding: 8px;
      font-size: 12px;
      color: var(--pegbo-fg-subtlest);
    }

    .bp-flt-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .bp-flt-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 6px 3px 9px;
      border-radius: var(--pegbo-radius-lg);
      background: var(--pegbo-surface-brand-subtle);
      color: var(--pegbo-fg-default);
      font-size: 12px;
    }

    .bp-flt-chip-x {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      border: 0;
      border-radius: var(--pegbo-radius-lg);
      background: transparent;
      color: var(--pegbo-fg-subtle);
      cursor: pointer;
      padding: 0;
    }

    .bp-flt-chip-x:hover {
      color: var(--pegbo-fg-default);
    }

    .bp-flt-hint {
      margin: 0;
      font-size: 12px;
      color: var(--pegbo-fg-subtlest);
    }

    .bp-flt-radios {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 16px;
    }

    .bp-flt-radio,
    .bp-flt-check-row {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--pegbo-fg-default);
      cursor: pointer;
    }

    .bp-flt-checks {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .bp-flt-error {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      color: var(--pegbo-fg-default);
    }

    .bp-notes-drawer .drawer-title {
      font-weight: 600;
    }

    .bp-notes {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .bp-notes-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .bp-notes-title {
      margin: 0;
      color: var(--pegbo-fg-default);
      font-size: 18px;
      line-height: 24px;
      font-weight: 600;
    }

    .bp-notes-list {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .bp-note {
      display: grid;
      grid-template-columns: 20px minmax(0, 1fr);
      column-gap: 12px;
      row-gap: 12px;
      padding: 16px;
      border: 1px solid var(--pegbo-outline-default);
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-default);
    }

    .bp-note-icon {
      color: var(--pegbo-fg-default);
      padding-top: 2px;
    }

    .bp-note-main {
      min-width: 0;
    }

    .bp-note-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .bp-note-title {
      margin: 0;
      color: var(--pegbo-fg-default);
      font-size: 15px;
      line-height: 20px;
      font-weight: 600;
    }

    .bp-note-meta {
      margin: 4px 0 0;
      color: var(--pegbo-fg-subtle);
      font-size: 13px;
      line-height: 18px;
      font-weight: 300;
    }

    .bp-note-body {
      margin: 12px 0 0;
      color: var(--pegbo-fg-default);
      font-size: 14px;
      line-height: 20px;
      font-weight: 300;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .bp-note-foot {
      grid-column: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .bp-note-count {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      min-width: 32px;
      justify-content: center;
      padding: 4px 8px;
      border-radius: var(--pegbo-radius-sm);
      color: var(--pegbo-fg-default);
      background: var(--pegbo-surface-sunken);
      font-size: 13px;
      line-height: 16px;
      font-weight: 600;
    }

    .bp-note-foot .bp-link {
      color: var(--pegbo-fg-default);
    }

    .bp-call {
      display: flex;
      flex-direction: column;
      min-height: 100%;
    }

    .bp-call-kicker {
      margin: 0;
      color: var(--pegbo-fg-subtle);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .bp-call-head {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding-bottom: 36px;
    }

    .bp-call-head-main {
      flex: 1 1 0;
      min-width: 0;
    }

    .bp-call-company {
      margin: 0;
      color: var(--pegbo-fg-default);
      font-size: 18px;
      font-weight: 600;
    }

    .bp-call-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 16px;
      margin: 6px 0 0;
      color: var(--pegbo-fg-subtle);
      font-size: 13px;
      font-weight: 300;
    }

    .bp-call-meta-item {
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .bp-call-context {
      margin: 2px 0 0;
      color: var(--pegbo-fg-subtlest);
      font-size: 13px;
      font-weight: 300;
    }

    .bp-call-head-actions {
      display: flex;
      gap: 8px;
      flex: 0 0 auto;
      margin-left: auto;
      margin-bottom: 6px;
    }

    .bp-call-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr);
      grid-template-rows: minmax(0, 1fr);
      gap: 24px;
      margin-top: 0;
      flex: 1 1 auto;
    }

    .bp-call-main {
      min-width: 0;
    }

    .bp-call-tabs {
      display: flex;
      align-items: flex-end;
      gap: 18px;
      border-bottom: 1px solid var(--pegbo-outline-default);
    }

    .bp-call-tab {
      padding: 8px 2px;
      margin-bottom: -1px;
      border: 0;
      border-bottom: 2px solid transparent;
      background: transparent;
      color: var(--pegbo-fg-subtle);
      font: inherit;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
    }

    .bp-call-tab.is-active {
      color: var(--pegbo-fg-default);
      border-bottom-color: var(--pegbo-fg-link);
    }

    .bp-call-paragraph {
      margin: 16px 0 0;
      color: var(--pegbo-fg-default);
      font-size: 14px;
      line-height: 21px;
      font-weight: 300;
    }

    .bp-call-subhead-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 18px 0 8px;
    }

    .bp-call-subhead {
      margin: 0;
      color: var(--pegbo-fg-default);
      font-size: 14px;
      font-weight: 600;
    }

    .bp-call-subhead-more {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border: 0;
      border-radius: var(--pegbo-radius-sm);
      background: transparent;
      color: var(--pegbo-fg-subtle);
      cursor: pointer;
    }

    .bp-call-subhead-more:hover {
      background: var(--pegbo-surface-neutral-subtle);
      color: var(--pegbo-fg-default);
    }

    .bp-call-actions {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .bp-call-check {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--pegbo-fg-default);
      font-size: 14px;
      font-weight: 300;
      cursor: pointer;
    }

    .bp-call-check input {
      width: 16px;
      height: 16px;
      accent-color: var(--pegbo-surface-brand-bold);
      cursor: pointer;
    }

    .bp-call-lines {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin: 16px 0;
    }

    .bp-call-line {
      display: flex;
      gap: 10px;
    }

    .bp-call-avatar {
      width: 30px;
      height: 30px;
      flex: 0 0 30px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--pegbo-fg-inverse);
      font-size: 12px;
      font-weight: 600;
    }

    .bp-call-avatar.is-speaker-1 {
      background: var(--pegbo-fg-accent-blue);
    }

    .bp-call-avatar.is-speaker-2 {
      background: var(--pegbo-fg-accent-indigo);
    }

    .bp-call-line-body {
      flex: 1 1 0;
      min-width: 0;
    }

    .bp-call-speaker {
      color: var(--pegbo-fg-default);
      font-size: 13px;
      font-weight: 600;
    }

    .bp-call-text {
      margin: 2px 0 0;
      color: var(--pegbo-fg-default);
      font-size: 14px;
      line-height: 20px;
      font-weight: 300;
    }

    .bp-call-audio {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 8px;
      padding: 14px 16px;
      border: 1px solid var(--pegbo-outline-default);
      border-radius: var(--pegbo-radius-lg);
      background: var(--pegbo-surface-default);
      box-shadow: var(--pegbo-shadow-md);
    }

    .bp-call-audio-controls {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .bp-call-audio-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: var(--pegbo-fg-default);
      cursor: pointer;
    }

    .bp-call-audio-btn.is-play {
      background: transparent;
      color: var(--pegbo-fg-default);
    }

    .bp-call-audio-track {
      position: relative;
      width: 100%;
      height: 4px;
      border-radius: var(--pegbo-radius-xl);
      background: var(--pegbo-outline-default);
      overflow: hidden;
    }

    .bp-call-audio-fill {
      position: absolute;
      inset: 0 90% 0 0;
      background: var(--pegbo-fg-default);
    }

    .bp-call-audio-time {
      color: var(--pegbo-fg-subtle);
      font-size: 12px;
      font-weight: 300;
      white-space: nowrap;
    }

    .bp-call-chat {
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 520px;
      padding: 0 0 24px;
      border-left: 1px solid var(--pegbo-outline-default);
    }

    .bp-call-chat-head {
      display: flex;
      align-items: center;
      gap: 6px;
      margin: 0;
      padding: 12px 24px 14px;
      border-bottom: 1px solid var(--pegbo-outline-default);
      color: var(--pegbo-fg-default);
      font-size: 14px;
      font-weight: 600;
    }

    .bp-call-chat-head svg {
      color: var(--pegbo-fg-accent-indigo);
    }

    .bp-call-cav {
      width: 44px;
      height: 44px;
      flex: 0 0 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: var(--pegbo-fg-accent-blue);
      color: var(--pegbo-fg-inverse);
      font-size: 16px;
      font-weight: 600;
    }

    .bp-call-send {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      flex: 0 0 34px;
      border: 0;
      border-radius: 50%;
      background: var(--pegbo-surface-brand-bold);
      color: var(--pegbo-fg-inverse);
      cursor: pointer;
    }

    .bp-call-chips {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      margin-top: auto;
      margin-bottom: 40px;
      padding: 0 24px;
    }

    .bp-call-chip {
      padding: 9px 14px;
      border: 0;
      border-radius: var(--pegbo-radius-xl);
      background: var(--pegbo-surface-sunken);
      color: var(--pegbo-fg-default);
      font: inherit;
      font-size: 13px;
      text-align: left;
      cursor: pointer;
    }

    .bp-call-chip:hover {
      background: var(--pegbo-outline-default);
    }

    .bp-call-compose {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin: 0 24px;
      padding: 12px;
      border: 1px solid var(--pegbo-outline-default);
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-page);
    }

    .bp-call-compose input {
      width: 100%;
      min-width: 0;
      height: 24px;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--pegbo-fg-default);
      font: inherit;
      font-size: 14px;
      font-weight: 300;
    }

    .bp-call-compose input:focus {
      outline: none;
    }

    .bp-call-compose-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .bp-call-compose-right {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .bp-call-compose-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border: 0;
      border-radius: 50%;
      background: var(--pegbo-surface-brand-subtle);
      color: var(--pegbo-surface-brand-bold);
      cursor: pointer;
    }

    @keyframes bp-toast-in {
      from {
        opacity: 0;
        transform: translate(-50%, 12px);
      }
      to {
        opacity: 1;
        transform: translate(-50%, 0);
      }
    }

    .bp-toast {
      position: fixed;
      left: 50%;
      bottom: 26px;
      z-index: 120;
      transform: translate(-50%, 0);
      padding: 10px 16px;
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-fg-default);
      color: var(--pegbo-surface-default);
      font-size: 13px;
      box-shadow: var(--pegbo-shadow-lg);
      animation: bp-toast-in var(--pegbo-motion-duration-normal) var(--pegbo-motion-easing-ease-out);
    }

    @media (max-width: 960px) {
      .bp-dash-grid {
        grid-template-columns: 1fr;
      }

      .bp-ptable {
        grid-template-columns: 34px minmax(160px, 1.4fr) 150px 130px 150px;
      }

      .bp-pth-intel,
      .bp-pcell-intel {
        display: none;
      }

      .bp-call-grid {
        grid-template-columns: 1fr;
      }
    }

    .cp-modal-shell {
      position: fixed;
      inset: 0;
      z-index: 80;
      visibility: hidden;
      pointer-events: none;
      transition: visibility var(--pegbo-motion-duration-medium) var(--pegbo-motion-easing-ease-out);
    }

    .cp-modal-shell.is-open,
    .cp-modal-shell.is-entering,
    .cp-modal-shell.is-exiting {
      visibility: visible;
    }

    .cp-modal-shell.is-open {
      pointer-events: auto;
    }

    .cp-modal {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      background: var(--pegbo-surface-default);
      opacity: 0;
      will-change: opacity;
      transition: opacity var(--pegbo-motion-duration-medium) var(--pegbo-motion-easing-ease-out);
    }

    .cp-modal-shell.is-open .cp-modal,
    .cp-modal-shell.is-entering .cp-modal {
      opacity: 1;
    }

    .cp-modal:focus {
      outline: none;
    }

    .cp-top {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      height: 64px;
      padding: 0 32px;
      border-bottom: 1px solid var(--pegbo-outline-default);
    }

    .cp-top-title {
      margin: 0;
      color: var(--pegbo-fg-default);
      font-size: 22px;
      line-height: 28px;
      font-weight: 700;
      letter-spacing: -0.01em;
    }

    .cp-main {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      padding: 36px 24px;
      background: var(--pegbo-surface-default);
    }

    .cp-col {
      width: 660px;
      max-width: 100%;
      margin: 0 auto;
    }

    .cp-pane {
      animation: cp-pane-in var(--pegbo-motion-duration-normal) var(--pegbo-motion-easing-ease-out);
    }

    @keyframes cp-pane-in {
      from {
        opacity: 0;
        transform: translateY(8px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    .cp-sec-title {
      margin: 0;
      color: var(--pegbo-fg-default);
      font-size: 20px;
      line-height: 26px;
      font-weight: 600;
    }

    .cp-optional {
      color: var(--pegbo-fg-subtlest);
      font-weight: 300;
    }

    .cp-subsec-title {
      margin: 0;
      color: var(--pegbo-fg-default);
      font-size: 18px;
      line-height: 24px;
      font-weight: 600;
    }

    .cp-sec-sub {
      margin: 6px 0 0;
      color: var(--pegbo-fg-subtle);
      font-size: 14px;
      line-height: 20px;
      font-weight: 300;
    }

    .cp-section {
      margin-top: 34px;
    }

    .cp-field {
      margin-top: 22px;
    }

    .cp-field-label {
      display: block;
      margin-bottom: 8px;
      color: var(--pegbo-fg-default);
      font-size: 14px;
      line-height: 20px;
      font-weight: 600;
    }

    .cp-req {
      color: var(--pegbo-fg-status-danger);
      margin-left: 2px;
    }

    .cp-control {
      width: 100%;
      min-height: 46px;
      padding: 11px 14px;
      border: 1px solid var(--pegbo-outline-strong);
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-default);
      color: var(--pegbo-fg-default);
      font-family: var(--pegbo-font-family-base);
      font-size: 15px;
      line-height: 22px;
      font-weight: 300;
      transition:
        border-color var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out),
        box-shadow var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .cp-control::placeholder {
      color: var(--pegbo-fg-subtlest);
      opacity: 1;
    }

    .cp-control:focus {
      outline: none;
      border-color: var(--pegbo-surface-brand-bold);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--pegbo-surface-brand-bold) 30%, transparent);
    }

    .cp-textarea {
      min-height: 104px;
      resize: vertical;
    }

    .cp-field.is-invalid .cp-control,
    .cp-field-cell.is-invalid .cp-control,
    .cp-row3-cell.is-invalid .cp-control {
      border-color: var(--pegbo-fg-status-danger);
    }

    .cp-field.is-invalid .cp-control:focus,
    .cp-field-cell.is-invalid .cp-control:focus,
    .cp-row3-cell.is-invalid .cp-control:focus {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--pegbo-fg-status-danger) 22%, transparent);
    }

    .cp-field-hint {
      margin: 7px 0 0;
      color: var(--pegbo-fg-subtlest);
      font-size: 13px;
      line-height: 18px;
      font-weight: 300;
    }

    .cp-field-err {
      margin: 7px 0 0;
      color: var(--pegbo-fg-status-danger);
      font-size: 13px;
      line-height: 18px;
    }

    .cp-foot-error {
      margin: 0 0 10px;
    }

    .cp-zip-field {
      position: relative;
    }

    .cp-zip-panel {
      position: absolute;
      z-index: 20;
      top: calc(100% + 4px);
      left: 0;
      right: 0;
      padding: 4px;
      max-height: 220px;
      overflow-y: auto;
      background: var(--pegbo-surface-default);
      border: 1px solid var(--pegbo-outline-strong);
      border-radius: var(--pegbo-radius-md);
      box-shadow: 0 8px 24px color-mix(in srgb, var(--pegbo-fg-default) 14%, transparent);
    }

    .cp-zip-list {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .cp-zip-list li {
      margin: 0;
    }

    .cp-zip-option {
      display: block;
      width: 100%;
      padding: 9px 12px;
      border: none;
      border-radius: var(--pegbo-radius-md);
      background: transparent;
      color: var(--pegbo-fg-default);
      font-family: var(--pegbo-font-family-base);
      font-size: 14px;
      line-height: 20px;
      text-align: left;
      cursor: pointer;
    }

    .cp-zip-option:hover,
    .cp-zip-option.is-active {
      background: color-mix(in srgb, var(--pegbo-fg-default) 6%, transparent);
    }

    .cp-zip-status {
      padding: 9px 12px;
      color: var(--pegbo-fg-subtlest);
      font-size: 14px;
      line-height: 20px;
    }

    .cp-row3 {
      display: grid;
      grid-template-columns: 1fr 120px 140px;
      gap: 14px;
    }

    .cp-row3-cell .cp-field-label {
      margin-bottom: 8px;
    }

    .cp-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 14px;
    }

    .cp-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      height: 32px;
      padding: 0 8px 0 12px;
      border: 1px solid var(--pegbo-outline-default);
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-sunken);
      color: var(--pegbo-fg-default);
      font-size: 13px;
      line-height: 18px;
      font-weight: 500;
      white-space: nowrap;
    }

    .cp-chip.is-selected {
      background: var(--pegbo-surface-brand-subtle);
      border-color: transparent;
    }

    .cp-chip button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 2px;
      border: 0;
      border-radius: var(--pegbo-radius-sm);
      background: none;
      color: var(--pegbo-fg-subtlest);
      cursor: pointer;
    }

    .cp-chip button:hover {
      background: color-mix(in srgb, var(--pegbo-fg-default) 8%, transparent);
      color: var(--pegbo-fg-default);
    }

    .cp-inline-add {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-top: 14px;
      padding: 0;
      border: 0;
      background: none;
      color: var(--pegbo-fg-default);
      font-family: var(--pegbo-font-family-base);
      font-size: 14px;
      line-height: 20px;
      font-weight: 500;
      cursor: pointer;
    }

    .cp-inline-add-boxed {
      height: 40px;
      padding: 0 16px;
      border: 1px solid var(--pegbo-outline-strong);
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-default);
      transition: background var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .cp-inline-add-boxed:hover {
      background: var(--pegbo-surface-page);
    }

    .cp-inline-add:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--pegbo-surface-brand-bold) 30%, transparent);
      border-radius: var(--pegbo-radius-md);
    }

    /* Layout wrapper for the DS DateTimePicker trigger (it renders w-full itself). */
    .cp-date-picker {
      width: 100%;
      max-width: 330px;
    }

    /* The DS DateTimePicker calendar renders in a document.body portal whose
       PopperContent is fixed at z-index 50 — BELOW the modal shell (z-index 90) — so
       inside CreateProjectModal it opened underneath the modal and looked like nothing
       happened on click. Lift ONLY the date-picker's popper wrapper above the modal
       layer, matched via :has() by the dialog it hosts. Scoping this way (not a
       descendant selector or a modal-scoped CSS var) is required because the portal is
       a body child, NOT a DOM descendant of the modal. Other radix popovers (header
       dropdown, etc.) keep their default stacking. */
    [data-radix-popper-content-wrapper]:has([aria-label='Date and time picker']) {
      z-index: 200 !important;
    }

    .cp-date-icon {
      flex: 0 0 auto;
      color: var(--pegbo-fg-subtlest);
    }

    .cp-bp-list {
      display: flex;
      flex-direction: column;
    }

    .cp-bp-card {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-top: 16px;
      padding: 18px 20px;
      border: 1px solid var(--pegbo-outline-default);
      border-radius: var(--pegbo-radius-card);
      background: var(--pegbo-surface-default);
    }

    .cp-bp-main {
      flex: 1 1 0;
      min-width: 0;
    }

    .cp-bp-name {
      color: var(--pegbo-fg-default);
      font-size: 17px;
      line-height: 23px;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .cp-bp-date {
      display: flex;
      align-items: center;
      gap: 7px;
      margin-top: 6px;
      color: var(--pegbo-fg-subtle);
      font-size: 14px;
      line-height: 20px;
      font-weight: 300;
    }

    .cp-bp-date svg {
      flex: 0 0 auto;
      color: var(--pegbo-fg-subtlest);
    }

    .cp-bp-date.is-empty {
      color: var(--pegbo-fg-subtlest);
    }

    .cp-bp-acts {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .cp-bp-act {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 0;
      border: 0;
      background: none;
      color: var(--pegbo-fg-default);
      font-family: var(--pegbo-font-family-base);
      font-size: 14px;
      line-height: 20px;
      font-weight: 500;
      cursor: pointer;
      transition: color var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .cp-bp-act:hover {
      color: var(--pegbo-fg-link);
    }

    .cp-bp-act.is-danger:hover {
      color: var(--pegbo-fg-status-danger);
    }

    .cp-dropzone {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      margin-top: 14px;
      padding: 30px 24px;
      border: 1.5px dashed var(--pegbo-outline-strong);
      border-radius: var(--pegbo-radius-card);
      background: var(--pegbo-surface-page);
      text-align: center;
      cursor: pointer;
      transition:
        border-color var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out),
        background var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .cp-dropzone:hover,
    .cp-dropzone:focus-within {
      border-color: var(--pegbo-surface-brand-bold);
      background: color-mix(in srgb, var(--pegbo-surface-brand-subtle) 30%, var(--pegbo-surface-default));
    }

    .cp-dropzone.is-disabled,
    .cp-dropzone.is-disabled:hover {
      cursor: default;
      border-color: var(--pegbo-outline-default);
      background: var(--pegbo-surface-page);
    }

    .cp-dropzone-main {
      color: var(--pegbo-fg-default);
      font-size: 15px;
      line-height: 22px;
      font-weight: 600;
    }

    .cp-dropzone-link {
      color: var(--pegbo-fg-link);
    }

    .cp-dropzone-sub {
      color: var(--pegbo-fg-subtle);
      font-size: 14px;
      line-height: 20px;
      font-weight: 300;
    }

    .cp-dropzone-input {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
      border: 0;
    }

    .cp-doc-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 12px;
      padding: 13px 14px;
      border-radius: var(--pegbo-radius-md);
      background: var(--pegbo-surface-page);
    }

    .cp-doc-icon {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      border-radius: var(--pegbo-radius-sm);
      background: var(--pegbo-surface-sunken);
      color: var(--pegbo-fg-subtlest);
    }

    .cp-doc-name {
      flex: 1 1 0;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--pegbo-fg-default);
      font-size: 14px;
      line-height: 20px;
      font-weight: 500;
    }

    .cp-doc-link {
      flex: 1 1 0;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--pegbo-fg-link);
      font-size: 14px;
      line-height: 20px;
      font-weight: 400;
      text-decoration: none;
    }

    .cp-doc-link:hover {
      text-decoration: underline;
    }

    .cp-doc-input {
      flex: 1 1 0;
      min-width: 0;
      border: 0;
      background: transparent;
      outline: none;
      color: var(--pegbo-fg-default);
      font-family: var(--pegbo-font-family-base);
      font-size: 14px;
      line-height: 20px;
    }

    .cp-doc-input::placeholder {
      color: var(--pegbo-fg-subtlest);
    }

    .cp-doc-del {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 4px;
      border: 0;
      border-radius: var(--pegbo-radius-sm);
      background: none;
      color: var(--pegbo-fg-subtlest);
      cursor: pointer;
      transition:
        color var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out),
        background var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .cp-doc-del:hover {
      background: color-mix(in srgb, var(--pegbo-fg-default) 6%, transparent);
      color: var(--pegbo-fg-status-danger);
    }

    .cp-doc-size {
      flex: 0 0 auto;
      color: var(--pegbo-fg-subtle);
      font-size: 13px;
      line-height: 18px;
      font-weight: 400;
    }

    .cp-doc-status {
      flex: 0 0 auto;
      color: var(--pegbo-fg-subtle);
      font-size: 13px;
      line-height: 18px;
      font-weight: 400;
    }

    .cp-doc-row.is-pending {
      opacity: 0.7;
    }

    .cp-foot {
      flex: 0 0 auto;
      background: var(--pegbo-surface-default);
      border-top: 1px solid var(--pegbo-outline-default);
    }

    .cp-prog-wrap {
      padding: 14px 32px 0;
    }

    .cp-step-label {
      margin-bottom: 10px;
      color: var(--pegbo-fg-default);
      font-size: 14px;
      line-height: 20px;
      font-weight: 600;
    }

    .cp-prog {
      display: flex;
      gap: 10px;
    }

    .cp-seg {
      flex: 1 1 0;
      height: 5px;
      padding: 0;
      border: 0;
      border-radius: var(--pegbo-radius-xs);
      background: var(--pegbo-surface-sunken);
      overflow: hidden;
      cursor: default;
    }

    .cp-seg:not(:disabled) {
      cursor: pointer;
    }

    .cp-seg-fill {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: var(--pegbo-surface-brand-bold);
      transition: width var(--pegbo-motion-duration-slow) var(--pegbo-motion-easing-ease-out);
    }

    .cp-foot-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 32px;
    }

    .cp-foot-left,
    .cp-foot-right {
      display: flex;
      align-items: center;
      gap: 18px;
    }

    .cp-foot-btn {
      min-height: 48px;
      padding: 0 22px;
      border-radius: var(--pegbo-radius-md);
      font-size: 16px;
      font-weight: 600;
    }

    .cp-foot-cancel {
      padding: 0 6px;
    }

    .cp-cert {
      display: flex;
      flex-direction: column;
      padding-bottom: 8px;
    }

    .cp-cert-search {
      display: flex;
      align-items: center;
      gap: 9px;
      height: 44px;
      padding: 0 14px;
      margin-bottom: 16px;
      border: 1px solid var(--pegbo-outline-strong);
      border-radius: var(--pegbo-radius-md);
      transition:
        border-color var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out),
        box-shadow var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .cp-cert-search:focus-within {
      border-color: var(--pegbo-surface-brand-bold);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--pegbo-surface-brand-bold) 30%, transparent);
    }

    .cp-cert-search-icon {
      flex: 0 0 auto;
      color: var(--pegbo-fg-subtlest);
    }

    .cp-cert-search input {
      flex: 1 1 0;
      min-width: 0;
      border: 0;
      outline: none;
      background: transparent;
      color: var(--pegbo-fg-default);
      font-family: var(--pegbo-font-family-base);
      font-size: 15px;
      line-height: 22px;
      font-weight: 300;
    }

    .cp-cert-search input::placeholder {
      color: var(--pegbo-fg-subtlest);
    }

    .cp-cert-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 16px;
    }

    .cp-cert-grid {
      display: flex;
      gap: 18px;
    }

    .cp-cert-col {
      flex: 1 1 0;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .cp-cert-opt {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 3px 2px;
      border-radius: var(--pegbo-radius-sm);
      color: var(--pegbo-fg-default);
      font-size: 15px;
      line-height: 22px;
      cursor: pointer;
    }

    .cp-cert-opt input {
      flex: 0 0 auto;
      width: 18px;
      height: 18px;
      margin: 0;
      accent-color: var(--pegbo-surface-brand-bold);
      cursor: pointer;
    }

    .cp-cert-empty {
      padding: 24px;
      text-align: center;
      color: var(--pegbo-fg-subtle);
      font-size: 14px;
      line-height: 20px;
      font-weight: 300;
    }

    .cp-bid {
      display: flex;
      flex-direction: column;
      padding-bottom: 8px;
    }

    .cp-bid-head {
      display: grid;
      grid-template-columns: 1fr 1fr 44px;
      gap: 16px;
      margin-bottom: 8px;
    }

    .cp-bid-head .cp-field-label {
      margin-bottom: 0;
    }

    .cp-bid-row {
      display: grid;
      grid-template-columns: 1fr 1fr 44px;
      gap: 16px;
      align-items: start;
      margin-bottom: 14px;
    }

    .cp-bid-row .cp-date-picker {
      max-width: none;
    }

    .cp-field-cell {
      display: flex;
      flex-direction: column;
    }

    .cp-bid-del {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 46px;
      padding: 0;
      border: 0;
      border-radius: var(--pegbo-radius-md);
      background: none;
      color: var(--pegbo-fg-subtlest);
      cursor: pointer;
      transition: color var(--pegbo-motion-duration-fast) var(--pegbo-motion-easing-ease-out);
    }

    .cp-bid-del:hover:not(:disabled) {
      color: var(--pegbo-fg-status-danger);
    }

    .cp-bid-del:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .cp-discard-text {
      margin: 0;
      color: var(--pegbo-fg-subtle);
      font-size: 14px;
      line-height: 20px;
      font-weight: 300;
    }

    @media (max-width: 640px) {
      .cp-top,
      .cp-prog-wrap,
      .cp-foot-row {
        padding-left: 18px;
        padding-right: 18px;
      }

      .cp-main {
        padding: 24px 18px;
      }

      .cp-row3 {
        grid-template-columns: 1fr 1fr;
      }

      .cp-cert-grid {
        flex-wrap: wrap;
      }

      .cp-cert-col {
        flex-basis: calc(50% - 9px);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
      }
    }