/* Shared feedback contract. Current wizard/table treatments remain selectable. */ :is(.ct-prototype-body,.ct-product) { --ct-menu-weight:400; --ct-menu-active-weight:500; --ct-menu-height:42px; --ct-info:#2563eb; --ct-info-soft:#eff6ff; } /* Text links share explicit interaction colors; navigation keeps its own selected state. */ :is(.ct-prototype-body,.ct-product) { --ct-link:#047857; --ct-link-hover:#065f46; --ct-link-active:#064e3b; } :is(.ct-prototype,.ct-product) :is(a.fi-link,a.ct-inline-link,a.ct-work-title,.ct-content-preview a,.ct-resource-examples a) { color:var(--ct-link); text-decoration:none; transition:color var(--ct-motion) var(--ct-ease); } :is(.ct-prototype,.ct-product) :is(a.fi-link,a.ct-inline-link,a.ct-work-title,.ct-content-preview a,.ct-resource-examples a):is(:hover,:focus-visible) { color:var(--ct-link-hover); text-decoration:none; } :is(.ct-prototype,.ct-product) :is(a.fi-link,a.ct-inline-link,a.ct-work-title,.ct-content-preview a,.ct-resource-examples a):active { color:var(--ct-link-active); text-decoration:none; } :is(.ct-prototype,.ct-product) :is(a.fi-link,a.ct-inline-link,a.ct-work-title,.ct-content-preview a,.ct-resource-examples a):focus-visible { outline:2px solid var(--ct-link); outline-offset:3px; } .ct-copy-button { flex-shrink:0; } .ct-copy-button:focus-visible { outline:2px solid var(--ct-primary); outline-offset:2px; } @media(pointer:coarse) { .ct-copy-button { min-width:44px; min-height:44px; } } :is(.ct-prototype-body,.ct-product) .fi-dropdown-panel:has(.fi-ta-col-manager) { padding:6px; width:300px; max-width:calc(100vw - 32px); min-height:min(200px,calc(100dvh - 32px)); z-index:50; } :is(.ct-prototype-body,.ct-product) .fi-ta-col-manager { gap:6px; } :is(.ct-prototype-body,.ct-product) .fi-ta-col-manager-header { position:sticky; top:-6px; z-index:1; padding:10px 12px; gap:16px; line-height:20px; background:var(--ct-surface,#fff); } :is(.ct-prototype-body,.ct-product) .fi-ta-col-manager-heading { font-size:14px; line-height:20px; font-weight:600; letter-spacing:-.025em; } :is(.ct-prototype-body,.ct-product) .fi-ta-col-manager-header .fi-link { color:var(--ct-muted); font-size:12px; font-weight:400; } :is(.ct-prototype-body,.ct-product) .fi-ta-col-manager-header .fi-link:hover { color:var(--ct-text); } :is(.ct-prototype,.ct-product)[data-table-style=original] .fi-ta-table > thead .fi-ta-selection-cell { line-height:21px; } :is(.ct-prototype-body,.ct-product) .fi-ta-col-manager-items { margin-top:0; gap:0; } :is(.ct-prototype-body,.ct-product) .fi-ta-col-manager-item { padding:0; gap:10px; border-radius:7px; } :is(.ct-prototype-body,.ct-product) .fi-ta-col-manager-item:has(input:not(:disabled)):hover { background:var(--ct-surface-hover,#fafafa); } :is(.ct-prototype-body,.ct-product) .fi-ta-col-manager-label { min-height:var(--ct-menu-height); padding:10px 12px; gap:10px; font-size:14px; line-height:20px; font-weight:var(--ct-menu-weight); cursor:pointer; } :is(.ct-prototype-body,.ct-product) .fi-ta-col-manager-label:has(input:disabled) { color:var(--ct-muted); cursor:default; } :is(.ct-prototype-body,.ct-product) .fi-ta-col-manager-actions-ctn { position:sticky; bottom:-6px; z-index:1; padding:10px 12px; border-top:1px solid var(--ct-border); justify-content:flex-end; background:var(--ct-surface,#fff); } :is(.ct-prototype-body,.ct-product) .fi-dropdown-panel .fi-dropdown-list-item { min-height:var(--ct-menu-height); padding:10px 12px; gap:10px; font-weight:var(--ct-menu-weight); } :is(.ct-prototype-body,.ct-product) .fi-dropdown-list-item-label, :is(.ct-prototype-body,.ct-product) .fi-dropdown-list-item-label :is(div,span,strong) { font-weight:var(--ct-menu-weight); } :is(.ct-prototype-body,.ct-product) .fi-dropdown-list-item:is([aria-current],.fi-selected) .fi-dropdown-list-item-label, :is(.ct-prototype-body,.ct-product) .fi-dropdown-list-item:is([aria-current],.fi-selected) .fi-dropdown-list-item-label :is(div,span,strong) { font-weight:var(--ct-menu-active-weight); } :is(.ct-prototype-body,.ct-product) .fi-select-input-option { min-height:var(--ct-menu-height); padding-block:10px; font-weight:var(--ct-menu-weight); } :is(.ct-prototype-body,.ct-product) .fi-select-input-option.fi-selected { font-weight:var(--ct-menu-active-weight); } :is(.ct-prototype,.ct-product) .ct-section-menu-item { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; width:100%; } :is(.ct-prototype,.ct-product) .ct-section-menu-item > :first-child { min-width:0; overflow-wrap:anywhere; } :is(.ct-prototype,.ct-product) .ct-menu-language { flex-shrink:0; margin-inline-start:auto; color:var(--ct-muted); font-size:11px; white-space:nowrap; } :is(.ct-prototype,.ct-product) .ct-profile-menu .fi-dropdown-panel > :has(+ .ct-menu-footnote) { border-block-end:0; } :is(.ct-prototype,.ct-product) .ct-logout-form { width:100%; } :is(.ct-prototype,.ct-product) .ct-logout-form > button { width:100%; } :is(.ct-prototype,.ct-product) .ct-topbar-tools .ct-language-trigger { display:flex; gap:6px; width:auto; padding:7px 8px; border-radius:7px; font-size:11px; font-weight:500; } :is(.ct-prototype,.ct-product) :is(.ct-language-trigger,.ct-notification-options-trigger):hover { background:var(--ct-subtle); } :is(.ct-prototype,.ct-product) .ct-language-options { display:grid; gap:4px; } :is(.ct-prototype,.ct-product) .ct-language-options > button { display:flex; align-items:center; gap:14px; width:100%; padding:14px 16px; border-radius:8px; text-align:start; transition:background-color var(--ct-motion) var(--ct-ease); } :is(.ct-prototype,.ct-product) .ct-language-options > button:hover { background:var(--ct-subtle); } :is(.ct-prototype,.ct-product) .ct-language-options > button[aria-pressed=true] { background:var(--ct-primary-soft); color:var(--ct-primary); } :is(.ct-prototype,.ct-product) .ct-language-code { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid var(--ct-border); border-radius:7px; font-size:11px; } :is(.ct-prototype,.ct-product) .ct-language-options strong { display:block; font-size:14px; font-weight:500; } :is(.ct-prototype,.ct-product) .ct-language-options small { display:block; margin-top:2px; font-size:12px; color:var(--ct-muted); } :is(.ct-prototype,.ct-product) .ct-language-options > button > .ct-icon { margin-inline-start:auto; } /* Desktop sidebar rail: the toggle and flyout share the same border inset. */ :is(.ct-prototype-body,.ct-product) { --ct-sidebar-rail-width:72px; --ct-sidebar-expanded-width:238px; --ct-sidebar-expanded-padding:16px; --ct-sidebar-profile-height:64px; --ct-sidebar-toggle-size:24px; --ct-sidebar-ease:cubic-bezier(.4,0,.2,1); } html.ct-sidebar-animating { overflow-x:clip; } :is(.ct-prototype,.ct-product) .ct-sidebar-viewport { position:absolute; inset-block:0; inset-inline-start:0; width:var(--ct-sidebar-expanded-width); pointer-events:none; } :is(.ct-prototype,.ct-product) .ct-sidebar-layer { position:absolute; inset-block:0; inset-inline-start:0; display:flex; flex-direction:column; width:var(--ct-sidebar-expanded-width); padding:28px var(--ct-sidebar-expanded-padding) 16px; border-inline-end:1px solid transparent; background:var(--ct-surface); pointer-events:auto; } :is(.ct-prototype,.ct-product) .ct-sidebar-layer[data-sidebar-layer=expanded] { z-index:1; } :is(.ct-prototype,.ct-product) .ct-sidebar-layer[data-sidebar-layer=rail] { width:var(--ct-sidebar-rail-width); padding-inline:13.5px; visibility:hidden; pointer-events:none; } :is(.ct-prototype,.ct-product) [data-collapsed=true] .ct-sidebar-layer[data-sidebar-layer=expanded] { opacity:0; visibility:hidden; pointer-events:none; } :is(.ct-prototype,.ct-product) [data-collapsed=true] .ct-sidebar-layer[data-sidebar-layer=rail] { visibility:visible; pointer-events:auto; } :is(.ct-prototype,.ct-product) .ct-sidebar-transitioning[data-collapsed] .ct-sidebar-layer { visibility:visible; } :is(.ct-prototype,.ct-product) .ct-sidebar-layer > nav { min-block-size:0; padding-block:8px 0; margin-block-end:16px; } :is(.ct-prototype,.ct-product) :is(.ct-sidebar-surface,.ct-sidebar-edge) { display:none; position:absolute; inset-block:0; inset-inline-end:0; z-index:-1; pointer-events:none; } :is(.ct-prototype,.ct-product) .ct-sidebar-surface { inset-inline-start:0; background:var(--ct-surface); transform-origin:left center; } /* A native border stays aligned with the surface at fractional screen scales. */ :is(.ct-prototype,.ct-product) .ct-sidebar-edge { width:0; z-index:2; border-inline-end:1px solid var(--ct-border); } html[dir=rtl] :is(.ct-prototype,.ct-product) .ct-sidebar-surface { transform-origin:right center; } :is(.ct-prototype,.ct-product) .ct-sidebar-brand-icon { display:none; } :is(.ct-prototype,.ct-product) .ct-sidebar-profile-row { display:flex; align-items:center; min-height:var(--ct-sidebar-profile-height); margin-block-start:10px; } :is(.ct-prototype,.ct-product) .ct-sidebar-profile-row > .fi-dropdown { width:100%; } :is(.ct-prototype,.ct-product) .ct-sidebar-profile-row .ct-profile { margin-block-start:0; } :is(.ct-prototype,.ct-product) .ct-sidebar-toggle { display:none; position:absolute; inset-block-end:calc(16px + (var(--ct-sidebar-profile-height) - var(--ct-sidebar-toggle-size)) / 2); inset-inline-end:calc((1px - var(--ct-sidebar-toggle-size)) / 2); z-index:2; width:var(--ct-sidebar-toggle-size); height:var(--ct-sidebar-toggle-size); padding:5px; align-items:center; justify-content:center; border:1px solid var(--ct-border); border-radius:6px; color:var(--ct-muted); background:var(--ct-surface); } :is(.ct-prototype,.ct-product) .ct-sidebar-toggle::before { content:''; position:absolute; inset:-6px; } :is(.ct-prototype,.ct-product) .ct-sidebar-toggle:hover { color:var(--ct-text); background:var(--ct-subtle); } :is(.ct-prototype,.ct-product) .ct-sidebar-toggle .ct-icon { width:12px; height:12px; transition:transform var(--ct-motion) var(--ct-sidebar-ease); } :is(.ct-prototype,.ct-product) [data-collapsed=true] .ct-sidebar-toggle .ct-icon { transform:rotate(180deg); } html[dir=rtl] :is(.ct-prototype,.ct-product) .ct-sidebar-toggle .ct-icon { transform:rotate(180deg); } html[dir=rtl] :is(.ct-prototype,.ct-product) [data-collapsed=true] .ct-sidebar-toggle .ct-icon { transform:none; } :is(.ct-prototype,.ct-product) .ct-sidebar-rail-item { width:44px; margin-inline:auto; margin-block:4px; } :is(.ct-prototype,.ct-product) .ct-sidebar-group-icon { display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:12px; border-radius:7px; color:var(--ct-muted); } :is(.ct-prototype,.ct-product) .ct-sidebar-group-icon:is(:hover,[aria-expanded=true]) { background:var(--ct-subtle); color:var(--ct-text); } :is(.ct-prototype,.ct-product) .ct-sidebar-group-icon.ct-current { color:var(--ct-primary); background:var(--ct-primary-soft); } :is(.ct-prototype-body,.ct-product) .fi-dropdown-panel:has(> .ct-sidebar-flyout-content) { z-index:35; } :is(.ct-prototype-body,.ct-product) .ct-sidebar-flyout-content .ct-menu-heading { padding:14px 16px 12px; border-bottom:1px dashed var(--ct-border); text-align:start; color:var(--ct-text); font-size:12px; font-weight:600; } :is(.ct-prototype-body,.ct-product) .ct-sidebar-flyout-content .fi-dropdown-list-item[aria-current=page] { background:var(--ct-primary-soft); color:var(--ct-primary); } :is(.ct-prototype-body,.ct-product) .ct-sidebar-flyout-content .fi-dropdown-list-item[aria-current=page] :is(svg,.fi-dropdown-list-item-label) { color:var(--ct-primary); } :is(.ct-prototype-body,.ct-product) .ct-sidebar-flyout-content .ct-sidebar-flyout-child { padding-inline-start:28px; } :is(.ct-prototype,.ct-product) [data-sidebar-layer=rail] .ct-brand { padding:0; align-items:center; width:44px; } :is(.ct-prototype,.ct-product) [data-sidebar-layer=rail] .ct-brand > :not(.ct-sidebar-brand-icon) { display:none; } :is(.ct-prototype,.ct-product) [data-sidebar-layer=rail] .ct-brand > .ct-sidebar-brand-icon { display:block; width:32px; height:36px; object-fit:contain; object-position:center; } :is(.ct-prototype,.ct-product) [data-sidebar-layer=rail] :is(.ct-identity-copy,.fi-tenant-menu-trigger-text,.fi-user-menu-trigger-text,.ct-search > span,.ct-search > kbd,.ct-sidebar-bottom > a > span) { display:none; } :is(.ct-prototype,.ct-product) [data-sidebar-layer=rail] :is(.ct-organization,.fi-tenant-menu-trigger,.fi-user-menu-trigger,.ct-profile) > svg { display:none; } :is(.ct-prototype,.ct-product) [data-sidebar-layer=rail] :is(.ct-organization,.fi-tenant-menu-trigger,.ct-search,.fi-user-menu-trigger,.ct-profile,.ct-sidebar-bottom > a) { width:44px; min-height:44px; height:44px; justify-content:center; padding:6px; gap:0; border-color:transparent; background:transparent; } :is(.ct-prototype,.ct-product) [data-sidebar-layer=rail] :is(.ct-search,.fi-tenant-menu-trigger,.fi-user-menu-trigger,.ct-profile):hover { background:var(--ct-subtle); } :is(.ct-prototype,.ct-product) [data-sidebar-layer=rail] .ct-sidebar-bottom { padding-top:10px; } :is(.ct-prototype,.ct-product) [data-sidebar-layer=rail] .ct-scroll-region { scrollbar-gutter:auto; overflow-x:hidden; } /* Desktop layout settles once; the separate surface/edge and content animate with transforms. */ @media(min-width:1024px) { .ct-product[data-variant=sidebar] .fi-sidebar.ct-workspace-sidebar { z-index:31; translate:none; transform:none; transition:none; background:transparent; border-inline-end-width:0; } .ct-product .ct-workspace-sidebar > :is(.ct-sidebar-surface,.ct-sidebar-edge) { display:block; } .ct-product:has(.ct-workspace-sidebar[data-collapsed=true]) { --sidebar-width:var(--ct-sidebar-rail-width); } .ct-product .ct-workspace-sidebar .ct-sidebar-toggle { display:flex; } .ct-product .fi-sidebar.ct-workspace-sidebar[data-collapsed=true] { width:var(--ct-sidebar-rail-width); } .ct-product .ct-workspace-sidebar [data-sidebar-layer=rail] .fi-sidebar-nav { padding-block-start:12px; } .ct-product[data-variant=sidebar] :is(.ct-workspace-topbar,.fi-main-ctn) { transition:none; } } @media(min-width:701px) { .ct-prototype .ct-sidebar.ct-scroll-owner { z-index:31; transition:--ct-scroll-thumb var(--ct-motion) var(--ct-ease); background:transparent; border-inline-end-width:0; } .ct-prototype .ct-sidebar > :is(.ct-sidebar-surface,.ct-sidebar-edge) { display:block; } .ct-prototype .ct-sidebar-toggle { display:flex; } .ct-prototype .ct-sidebar[data-collapsed=true] { width:var(--ct-sidebar-rail-width); } .ct-prototype[data-variant=sidebar]:has(.ct-sidebar[data-collapsed=true]) .ct-main { margin-inline-start:var(--ct-sidebar-rail-width); } .ct-prototype[data-variant=sidebar]:has(.ct-sidebar[data-collapsed=true]) .ct-prototype-switcher { left:calc(50% + 36px); } html[dir=rtl] .ct-prototype[data-variant=sidebar]:has(.ct-sidebar[data-collapsed=true]) .ct-prototype-switcher { left:calc(50% - 36px); } } @media(min-width:701px) and (max-width:960px) { .ct-prototype .ct-sidebar { --ct-sidebar-expanded-width:206px; --ct-sidebar-expanded-padding:12px; } } @media(max-width:1023px) { .ct-product .ct-workspace-sidebar { --ct-sidebar-expanded-width:260px; --ct-sidebar-expanded-padding:12px; } } @media(max-width:700px) { .ct-prototype .ct-sidebar { --ct-sidebar-expanded-width:260px; --ct-sidebar-expanded-padding:12px; } } @media(prefers-reduced-motion:reduce) { :is(.ct-prototype,.ct-product) :is(.ct-sidebar,.ct-workspace-sidebar,.ct-workspace-topbar,.fi-main-ctn,.ct-main,.ct-prototype-switcher,.ct-sidebar-toggle .ct-icon) { transition-duration:0ms!important; } } /* A stable gutter avoids layout shifts while the thumb fades with attention. */ @property --ct-scroll-thumb { syntax:''; inherits:true; initial-value:transparent; } :is(.ct-prototype,.ct-prototype-body,.ct-product) .ct-scroll-owner { --ct-scroll-thumb:transparent; transition:--ct-scroll-thumb var(--ct-motion) var(--ct-ease); } :is(.ct-prototype,.ct-prototype-body,.ct-product) .ct-scroll-owner:is(:hover,:has(:focus-visible),.ct-mobile-open) { --ct-scroll-thumb:#b8c1bb; } :is(.ct-prototype,.ct-prototype-body,.ct-product) .ct-scroll-region { overflow:auto; scrollbar-width:thin; scrollbar-gutter:stable; scrollbar-color:var(--ct-scroll-thumb) transparent; } :is(.ct-prototype,.ct-prototype-body,.ct-product) .ct-scroll-region::-webkit-scrollbar { width:6px; height:6px; } :is(.ct-prototype,.ct-prototype-body,.ct-product) .ct-scroll-region::-webkit-scrollbar-track { background:transparent; } :is(.ct-prototype,.ct-prototype-body,.ct-product) .ct-scroll-region::-webkit-scrollbar-thumb { background:var(--ct-scroll-thumb); border-radius:8px; } :is(.ct-prototype,.ct-prototype-body,.ct-product) .ct-scroll-region:focus-visible { outline:2px solid var(--ct-primary); outline-offset:-3px; } :is(.ct-prototype,.ct-product) .ct-sidebar { --ct-navigation-edge-space:16px; } :is(.ct-prototype,.ct-product) .ct-sidebar > nav { min-block-size:0; padding-block:8px 0; margin-block-end:var(--ct-navigation-edge-space); } /* Footer links belong to the panel edge; only a bounded body scrolls. */ :is(.ct-prototype,.ct-product) .ct-panel:has(> .ct-panel-footer-link) { display:flex; flex-direction:column; min-block-size:0; } :is(.ct-prototype,.ct-product) .ct-panel:has(> .ct-panel-footer-link) > .ct-panel-heading { flex-shrink:0; } :is(.ct-prototype,.ct-product) .ct-panel > .ct-panel-footer-link { flex-shrink:0; margin-block-start:auto; min-height:52px; padding-block:16px; gap:12px; border-top-style:dashed; transition:background-color var(--ct-motion) var(--ct-ease),color var(--ct-motion) var(--ct-ease); } :is(.ct-prototype,.ct-product) .ct-panel > .ct-panel-footer-link:hover { color:var(--ct-primary); background:var(--ct-subtle); } :is(.ct-prototype,.ct-product) .ct-panel > .ct-panel-footer-link:focus-visible { color:var(--ct-primary); background:var(--ct-primary-soft); outline:2px solid var(--ct-primary); outline-offset:-3px; } :is(.ct-prototype,.ct-product) .ct-panel-scroll > .ct-panel-body { flex:1 1 auto; block-size:0; min-block-size:0; } @media(max-width:960px) { :is(.ct-prototype,.ct-product) .ct-panel-scroll > .ct-panel-body { flex:0 1 auto; block-size:auto; max-block-size:min(440px,60dvh); } } /* Tabs are navigation; only the actual settings sections own content frames. */ :is(.ct-prototype,.ct-product)[data-edition] .ct-settings-layout { grid-template-columns:minmax(0,1fr) 260px; gap:24px; align-items:start; } :is(.ct-prototype,.ct-product)[data-edition] .ct-settings-layout .ct-form-context { padding:0; border:1px solid var(--ct-border); border-radius:12px; background:white; overflow:hidden; } :is(.ct-prototype,.ct-product)[data-edition] .ct-settings-layout .ct-form-context h2 { font-size:14px; line-height:20px; margin:0; } :is(.ct-prototype,.ct-product)[data-edition] .ct-settings-layout .ct-form-context > :is(.ct-panel-heading,.ct-detail-padding,.ct-panel-footer-link) { padding-inline:24px; } :is(.ct-prototype,.ct-product) .ct-settings-surface,:is(.ct-prototype,.ct-product) .ct-settings-surface .fi-sc-tabs,:is(.ct-prototype,.ct-product) .ct-settings-surface .fi-sc-tabs-tab { padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible; } :is(.ct-prototype,.ct-product)[data-edition] .ct-settings-surface .fi-tabs { padding:0 0 5px; margin:0 0 24px; border-bottom:1px solid var(--ct-border); } :is(.ct-prototype,.ct-product) .ct-settings-surface .fi-section { padding:0; border:1px solid var(--ct-border); border-radius:var(--ct-radius); background:var(--ct-surface); box-shadow:none; } :is(.ct-prototype,.ct-product) .ct-settings-surface .fi-section-header { padding:20px 24px; border-bottom:1px dashed var(--ct-border); } :is(.ct-prototype,.ct-product) .ct-settings-surface .fi-section-content-ctn { border:0; padding:0; } :is(.ct-prototype,.ct-product) .ct-settings-surface .fi-section-content { padding:24px; } :is(.ct-prototype,.ct-product) .ct-settings-surface .fi-sc-tabs-tab .fi-section { border-bottom:0; border-end-start-radius:0; border-end-end-radius:0; } :is(.ct-prototype,.ct-product)[data-edition] .ct-settings-surface .ct-form-footer { margin:0; padding:18px 24px; border:1px solid var(--ct-border); border-top-style:dashed; border-radius:0 0 var(--ct-radius) var(--ct-radius); background:var(--ct-surface); } :is(.ct-prototype,.ct-product)[data-edition] .ct-system-layout > .ct-system-sections { gap:28px; } /* Documentation stacks own sibling spacing; captions stay with their specimen. */ .ct-prototype .ct-system-sections .ct-specimen-stack { display:grid; gap:24px; min-width:0; } .ct-prototype .ct-system-sections .ct-specimen-stack > * { margin-block:0; } .ct-prototype .ct-system-sections .ct-specimen { display:grid; gap:12px; min-width:0; } .ct-prototype .ct-system-sections .ct-specimen > :is(.ct-component-caption,.ct-help) { margin:0; } .ct-prototype .ct-system-sections .ct-specimen-stack > form > .ct-form-footer { padding-block-end:0; } .ct-prototype .ct-action-size-specimens { gap:24px; align-items:flex-start; } .ct-prototype .ct-action-size-specimens .fi-header-action-bar { justify-content:flex-start; } :is(.ct-prototype,.ct-product)[data-edition] :is(.ct-system-sections,.ct-metric-specimens) > .ct-panel { display:block; padding:0; margin:0; border:1px solid var(--ct-border); border-radius:12px; background:white; overflow:hidden; } :is(.ct-prototype,.ct-product)[data-edition] :is(.ct-system-sections,.ct-metric-specimens) > .ct-panel > .ct-panel-heading { display:flex; padding:20px 24px; margin:0; border-bottom:1px dashed var(--ct-border); } :is(.ct-prototype,.ct-product)[data-edition] :is(.ct-system-sections,.ct-metric-specimens) > .ct-panel > .ct-panel-heading h2 { margin:0; font-size:14px; line-height:20px; } :is(.ct-prototype,.ct-product)[data-edition] :is(.ct-system-sections,.ct-metric-specimens) > .ct-panel > .ct-panel-heading p { margin:4px 0 0; font-size:12px; line-height:20px; } :is(.ct-prototype,.ct-product)[data-edition] :is(.ct-system-sections,.ct-metric-specimens) > .ct-panel > .ct-detail-padding { padding:24px; } :is(.ct-prototype,.ct-product)[data-edition] .ct-system-sections .ct-prose { margin:0; } :is(.ct-prototype,.ct-product)[data-edition] .ct-type-specimens > div { padding:20px 24px; } :is(.ct-prototype,.ct-product) .ct-type-menu { font-size:14px; line-height:20px; font-weight:var(--ct-menu-weight); } :is(.ct-prototype,.ct-product)[data-edition] .ct-guide-sections { max-width:none; } :is(.ct-prototype,.ct-product) .ct-guide-sections .ct-prose > :first-child { margin-top:0; } :is(.ct-prototype,.ct-product) .ct-guide-sections .ct-prose p { max-width:72ch; line-height:25px; } :is(.ct-prototype,.ct-product) .ct-guide-sections .ct-inline-link { margin-top:22px; } /* Every active tab — ordinary, version (parent) and section (child) — has one anatomy: transparent background and a 3 px underline flush with the gray baseline, in every hierarchy layout and at every width. Never exclude a tab family from this rule or give an active tab a tinted background (user decision 2026-09-22). */ :is(.ct-prototype,.ct-product)[data-edition] :is(.ct-local-tabs,.fi-tabs) { align-items:stretch; flex-wrap:nowrap; padding-bottom:6px; border-bottom:0; background:linear-gradient(var(--ct-border),var(--ct-border)) left bottom / 100% 1px no-repeat local; } :is(.ct-prototype,.ct-product) :is(.ct-local-tabs :is(a,button),.fi-tabs-item)::after { content:''; position:absolute; inset-inline:0; bottom:-6px; height:3px; background:var(--ct-primary); opacity:0; } :is(.ct-prototype,.ct-product) :is(.ct-local-tabs :is(a,button)[aria-current=page],.fi-tabs-item.fi-active,.fi-tabs-item[aria-selected=true]) { background:transparent; } :is(.ct-prototype,.ct-product) :is(.ct-local-tabs :is(a,button)[aria-current=page],.fi-tabs-item.fi-active,.fi-tabs-item[aria-selected=true])::after { opacity:1; } /* Long source readings retain their full text in a keyboard-scrollable region. */ :is(.ct-prototype,.ct-product) .ct-reading-region { max-height:70vh; overflow:auto; scrollbar-width:thin; scrollbar-gutter:stable; scrollbar-color:var(--ct-border-strong) transparent; padding-inline-end:8px; } :is(.ct-prototype,.ct-product) .ct-reading-region:focus-visible { outline:2px solid var(--ct-primary); outline-offset:4px; } /* Version hierarchy occupies navigation only. */ :is(.ct-prototype,.ct-product) .ct-hierarchy-navigation { container:ct-tabs / inline-size; display:grid; gap:12px; min-width:0; margin-bottom:28px; } :is(.ct-prototype,.ct-product) .ct-hierarchy-track { display:contents; } :is(.ct-prototype,.ct-product) .ct-hierarchy-navigation .ct-version-nav { margin:0; } :is(.ct-prototype,.ct-product) .ct-hierarchy-navigation .ct-icon { width:16px; height:16px; color:inherit; } :is(.ct-prototype,.ct-product) .ct-hierarchy-navigation .ct-counter { margin:0; flex-shrink:0; font-variant-numeric:tabular-nums; } :is(.ct-prototype,.ct-product) .ct-hierarchy-navigation :is(a,button)[aria-current=page] .ct-counter { color:var(--ct-primary); background:var(--ct-primary-soft); border-color:color-mix(in srgb,var(--ct-primary) 22%,var(--ct-border)); } :is(.ct-prototype,.ct-product) .ct-section-nav { min-width:0; padding:0; } :is(.ct-prototype,.ct-product) .ct-section-track { display:flex; align-items:stretch; flex-wrap:nowrap; gap:var(--ct-tab-gap); width:100%; min-width:max-content; padding-bottom:5px; border-bottom:1px solid var(--ct-border); } :is(.ct-prototype,.ct-product) .ct-section-nav :is(a,button) { max-width:100%; } :is(.ct-prototype,.ct-product) :is(.ct-section-nav,.ct-local-tabs) :is(a,button):focus-visible { outline-offset:-2px; } :is(.ct-prototype,.ct-product) .ct-section-nav :is(a,button)[aria-current=page] { background:transparent; } :is(.ct-prototype,.ct-product) .ct-section-nav :is(a,button)::after { content:''; position:absolute; inset-inline:0; bottom:-6px; height:3px; background:var(--ct-primary); opacity:0; transition:opacity var(--ct-motion) var(--ct-ease); } :is(.ct-prototype,.ct-product) .ct-section-nav :is(a,button)[aria-current=page]::after { opacity:1; } :is(.ct-prototype,.ct-product) .ct-section-nav :is(a,button) > .ct-tab-label { min-width:0; white-space:nowrap; } :is(.ct-prototype,.ct-product) .ct-hierarchy-navigation[data-hierarchy=trail] { grid-template-columns:auto minmax(0,1fr); align-items:start; gap:20px; } :is(.ct-prototype,.ct-product)[data-edition] .ct-hierarchy-navigation[data-hierarchy=trail] .ct-version-nav { width:auto; } :is(.ct-prototype,.ct-product) .ct-hierarchy-navigation[data-hierarchy=trail] .ct-section-nav { border-inline-start:1px solid var(--ct-border); padding-inline-start:16px; } :is(.ct-prototype,.ct-product) .ct-hierarchy-navigation[data-hierarchy=rail] .ct-section-nav { padding-inline:8px; } :is(.ct-prototype,.ct-product) .ct-version-branches { display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--ct-tab-gap); min-width:0; } :is(.ct-prototype,.ct-product) .ct-version-branch { display:flex; align-items:flex-start; flex-shrink:0; min-width:0; gap:16px; } :is(.ct-prototype,.ct-product) .ct-version-branch-active { flex:1; min-width:min(100%,480px); } :is(.ct-prototype,.ct-product)[data-edition] .ct-version-branch .ct-version-nav { flex-shrink:0; width:auto; } :is(.ct-prototype,.ct-product) .ct-version-branch > .ct-section-nav { flex:1; padding-inline-start:16px; border-inline-start:1px dashed var(--ct-border-strong); } /* Baselines live inside scroll tracks, above any classic scrollbar gutter. */ :is(.ct-prototype,.ct-product) .ct-hierarchy-navigation:not(:is([data-hierarchy=joined],[data-hierarchy=split])) .ct-section-nav { overflow-x:auto; scrollbar-width:thin; scrollbar-color:var(--ct-border-strong) transparent; scroll-padding-inline:var(--ct-tab-padding-inline); } /* One continuous navigation line; both levels stay on that line when scrolling. */ :is(.ct-prototype,.ct-product) .ct-hierarchy-navigation:is([data-hierarchy=joined],[data-hierarchy=split]) { display:block; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; scrollbar-color:var(--ct-border-strong) transparent; scroll-padding-inline:12px; } :is(.ct-prototype,.ct-product) .ct-hierarchy-navigation:is([data-hierarchy=joined],[data-hierarchy=split]) .ct-hierarchy-track { display:flex; flex-wrap:nowrap; align-items:stretch; gap:16px; width:100%; min-width:max-content; padding-top:4px; border-bottom:1px solid var(--ct-border); } :is(.ct-prototype,.ct-product)[data-edition] .ct-hierarchy-navigation:is([data-hierarchy=joined],[data-hierarchy=split]) .ct-version-nav { flex:0 0 auto; width:max-content; max-width:none; padding-bottom:5px; border-bottom:0; background:transparent; overflow:visible; } :is(.ct-prototype,.ct-product) .ct-hierarchy-navigation:is([data-hierarchy=joined],[data-hierarchy=split]) .ct-section-nav { display:flex; flex:0 0 auto; padding-inline:8px; } :is(.ct-prototype,.ct-product) .ct-hierarchy-navigation:is([data-hierarchy=joined],[data-hierarchy=split]) .ct-section-track { border-bottom:0; } :is(.ct-prototype,.ct-product) .ct-hierarchy-navigation[data-hierarchy=joined] .ct-section-nav { border-inline-start:1px solid var(--ct-border-strong); padding-inline-start:20px; } :is(.ct-prototype,.ct-product) .ct-hierarchy-navigation[data-hierarchy=split] .ct-section-nav { margin-inline-start:auto; } /* The active column is underlined across its entire cell. */ :is(.ct-prototype,.ct-product) .ct-hierarchy-navigation[data-hierarchy=ribbon] .ct-section-nav .ct-tab-label { white-space:normal; } :is(.ct-prototype,.ct-product) .ct-hierarchy-navigation[data-hierarchy=ribbon] .ct-section-track { display:grid; grid-template-columns:repeat(var(--ct-section-count),minmax(0,1fr)); align-items:stretch; width:100%; min-width:calc(var(--ct-section-count) * 140px + (var(--ct-section-count) - 1) * var(--ct-tab-gap)); border-bottom:1px solid var(--ct-border); } :is(.ct-prototype,.ct-product) .ct-hierarchy-navigation[data-hierarchy=ribbon] .ct-section-nav :is(a,button) { display:grid; grid-template-columns:16px minmax(0,1fr) auto; min-height:56px; border-inline-start:1px solid var(--ct-border); border-radius:0; } :is(.ct-prototype,.ct-product) .ct-hierarchy-navigation[data-hierarchy=ribbon] .ct-section-nav :is(a,button):first-child { border-inline-start:0; } :is(.ct-prototype,.ct-product) .ct-hierarchy-navigation[data-hierarchy=ribbon] .ct-section-nav :is(a,button):not(:first-child)::after { inset-inline-start:-1px; } /* The branch rule belongs only to navigation; content retains its own surfaces. The section row reaches up through the grid gap so its own scroll box never clips the connector. */ :is(.ct-prototype,.ct-product) .ct-hierarchy-navigation[data-hierarchy=outline] .ct-section-nav { position:relative; margin-top:-12px; padding-top:12px; padding-inline-start:36px; } :is(.ct-prototype,.ct-product) .ct-hierarchy-navigation[data-hierarchy=outline] .ct-section-nav::before { content:''; position:absolute; inset-inline-start:12px; top:0; width:12px; height:30px; border-inline-start:1px solid var(--ct-border-strong); border-bottom:1px solid var(--ct-border-strong); border-end-start-radius:6px; } @container ct-tabs (max-width:800px) { :is(.ct-prototype,.ct-product) .ct-version-branch-active { flex-wrap:wrap; gap:8px; } :is(.ct-prototype,.ct-product) .ct-hierarchy-navigation[data-hierarchy=menu] .ct-section-nav { flex-basis:100%; margin-inline-start:12px; padding-inline-start:12px; } } @media(max-width:1000px) { :is(.ct-prototype,.ct-product) .ct-hierarchy-navigation[data-hierarchy=trail] { grid-template-columns:minmax(0,1fr); gap:12px; } :is(.ct-prototype,.ct-product)[data-edition] .ct-hierarchy-navigation[data-hierarchy=trail] .ct-version-nav { width:100%; } :is(.ct-prototype,.ct-product) .ct-hierarchy-navigation[data-hierarchy=trail] .ct-section-nav { padding-inline-start:8px; border-inline-start:0; } } @media(max-width:700px) { :is(.ct-prototype,.ct-product) .ct-section-nav :is(a,button) { min-height:44px; } :is(.ct-prototype,.ct-product) .ct-hierarchy-navigation .ct-version-nav a { min-height:44px; } :is(.ct-prototype,.ct-product) .ct-settings-surface .fi-section-header,:is(.ct-prototype,.ct-product) .ct-settings-surface .fi-section-content { padding:20px 16px; } :is(.ct-prototype,.ct-product)[data-edition] .ct-settings-surface .ct-form-footer { padding:16px; } } @media(prefers-reduced-motion:reduce) { :is(.ct-prototype,.ct-product) .ct-section-nav :is(a,button),:is(.ct-prototype,.ct-product) .ct-section-nav :is(a,button)::after { transition:none; } } /* Native wizard state, validation and navigation are shared by all four layouts. */ :is(.ct-prototype,.ct-product):not([data-wizard-style=current]) .ct-intake-workspace { grid-template-columns:minmax(0,1fr) 240px; gap:24px; align-items:start; } :is(.ct-prototype,.ct-product):not([data-wizard-style=current]) .ct-intake-workspace .fi-sc-wizard { border:1px solid var(--ct-border); border-radius:12px; box-shadow:none; background:white; overflow:hidden; } :is(.ct-prototype,.ct-product):not([data-wizard-style=current]) .ct-intake-workspace .fi-sc-wizard-header { grid-auto-flow:column; grid-auto-columns:1fr; border:0; padding:16px; gap:8px; } :is(.ct-prototype,.ct-product):not([data-wizard-style=current]) .ct-intake-workspace .fi-sc-wizard-header-step { display:flex; min-width:0; } :is(.ct-prototype,.ct-product):not([data-wizard-style=current]) .ct-intake-workspace .fi-sc-wizard-header-step-btn { width:100%; min-width:0; gap:12px; padding:12px; border-radius:8px; } :is(.ct-prototype,.ct-product):not([data-wizard-style=current]) .ct-intake-workspace .fi-sc-wizard-header-step-btn:disabled { opacity:1; cursor:default; } :is(.ct-prototype,.ct-product):not([data-wizard-style=current]) .ct-intake-workspace .fi-sc-wizard-header-step-text { min-width:0; width:auto; } :is(.ct-prototype,.ct-product):not([data-wizard-style=current]) .ct-intake-workspace .fi-sc-wizard-header-step-label { font-size:13px; font-weight:500; } :is(.ct-prototype,.ct-product):not([data-wizard-style=current]) .ct-intake-workspace .fi-sc-wizard-header-step-description { font-size:11px; line-height:18px; margin-top:3px; color:var(--ct-muted); } :is(.ct-prototype,.ct-product):not([data-wizard-style=current]) .ct-intake-workspace .fi-sc-wizard-header-step-icon-ctn { width:30px; height:30px; border:1px solid var(--ct-border-strong); border-radius:7px; color:var(--ct-muted); background:white; } :is(.ct-prototype,.ct-product):not([data-wizard-style=current]) .ct-intake-workspace .fi-sc-wizard-header-step-icon-ctn .fi-icon { width:17px; height:17px; color:inherit; } :is(.ct-prototype,.ct-product):not([data-wizard-style=current]) .ct-intake-workspace :is(.fi-active,.fi-completed) > .fi-sc-wizard-header-step-btn .fi-sc-wizard-header-step-icon-ctn { color:var(--ct-primary); border-color:#a7d5bc; background:var(--ct-primary-soft); } :is(.ct-prototype,.ct-product):not([data-wizard-style=current]) .ct-intake-workspace .fi-sc-wizard-header-step-separator { display:none; } :is(.ct-prototype,.ct-product):not([data-wizard-style=current]) .ct-intake-workspace .fi-sc-wizard-step.fi-active { min-width:0; padding:28px; margin:0; border-top:1px dashed var(--ct-border); } :is(.ct-prototype,.ct-product):not([data-wizard-style=current]) .ct-intake-workspace .fi-sc-wizard-footer { padding:18px 28px; margin:0; border-top:1px dashed var(--ct-border); background:#fcfcfc; } :is(.ct-prototype,.ct-product):not([data-wizard-style=current]) .ct-intake-guidance { padding:20px; border:1px solid var(--ct-border); border-radius:12px; background:white; } :is(.ct-prototype,.ct-product)[data-wizard-style=rail] .ct-intake-workspace .fi-sc-wizard { display:grid; grid-template-columns:185px minmax(0,1fr); } :is(.ct-prototype,.ct-product)[data-wizard-style=rail] .ct-intake-workspace .fi-sc-wizard-header { grid-column:1; grid-row:1/3; grid-auto-flow:row; grid-auto-columns:auto; align-content:start; padding:16px 10px; border-inline-end:1px dashed var(--ct-border); } :is(.ct-prototype,.ct-product)[data-wizard-style=rail] .ct-intake-workspace .fi-sc-wizard-header-step-btn { align-items:flex-start; } :is(.ct-prototype,.ct-product)[data-wizard-style=rail] .ct-intake-workspace .fi-sc-wizard-header-step.fi-active { background:var(--ct-primary-soft); border-radius:8px; } :is(.ct-prototype,.ct-product)[data-wizard-style=rail] .ct-intake-workspace .fi-sc-wizard-step.fi-active { grid-column:2; border-top:0; } :is(.ct-prototype,.ct-product)[data-wizard-style=rail] .ct-intake-workspace .fi-sc-wizard-footer { grid-column:2; } :is(.ct-prototype,.ct-product)[data-wizard-style=ribbon] .ct-intake-workspace .fi-sc-wizard-header { gap:0; padding:20px 24px; } :is(.ct-prototype,.ct-product)[data-wizard-style=ribbon] .ct-intake-workspace .fi-sc-wizard-header-step { padding-bottom:10px; border-bottom:2px solid var(--ct-border); } :is(.ct-prototype,.ct-product)[data-wizard-style=ribbon] .ct-intake-workspace .fi-sc-wizard-header-step:is(.fi-active,.fi-completed) { border-bottom-color:var(--ct-primary); } :is(.ct-prototype,.ct-product)[data-wizard-style=ribbon] .ct-intake-workspace .fi-sc-wizard-header-step-btn { padding:8px 6px; } :is(.ct-prototype,.ct-product)[data-wizard-style=ribbon] .ct-intake-workspace .fi-sc-wizard-header-step-icon-ctn { border:0; background:transparent; } :is(.ct-prototype,.ct-product)[data-wizard-style=stages] .ct-intake-workspace .fi-sc-wizard { border:0; background:transparent; overflow:visible; } :is(.ct-prototype,.ct-product)[data-wizard-style=stages] .ct-intake-workspace .fi-sc-wizard-header { padding:0 0 16px; gap:12px; } :is(.ct-prototype,.ct-product)[data-wizard-style=stages] .ct-intake-workspace .fi-sc-wizard-header-step { background:white; border:1px solid var(--ct-border); border-radius:10px; } :is(.ct-prototype,.ct-product)[data-wizard-style=stages] .ct-intake-workspace .fi-sc-wizard-header-step.fi-active { border-color:#8cbaa3; background:#f4faf6; } :is(.ct-prototype,.ct-product)[data-wizard-style=stages] .ct-intake-workspace .fi-sc-wizard-header-step-btn { display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding:18px; } :is(.ct-prototype,.ct-product)[data-wizard-style=stages] .ct-intake-workspace .fi-sc-wizard-step.fi-active { background:white; border:1px solid var(--ct-border); border-bottom:0; border-radius:12px 12px 0 0; } :is(.ct-prototype,.ct-product)[data-wizard-style=stages] .ct-intake-workspace .fi-sc-wizard-footer { border:1px solid var(--ct-border); border-top-style:dashed; border-radius:0 0 12px 12px; } /* Shared typography for primary/secondary pairs in every native list and relation table. */ :is(.ct-prototype,.ct-product) { --ct-table-primary-size:14px; --ct-table-primary-line-height:24px; --ct-table-secondary-size:13px; --ct-table-secondary-line-height:20px; --ct-progress-description-size:11px; --ct-progress-description-line-height:16px; } :is(.ct-prototype,.ct-product) .ct-table-text { display:flex; flex-direction:column; gap:4px; } :is(.ct-prototype,.ct-product) :is(.fi-ta-text-has-descriptions .fi-ta-text-item,.ct-table-primary) { font-size:var(--ct-table-primary-size); line-height:var(--ct-table-primary-line-height); } :is(.ct-prototype,.ct-product) :is(.fi-ta-text-description,.ct-table-secondary) { color:var(--ct-muted); font-size:var(--ct-table-secondary-size); line-height:var(--ct-table-secondary-line-height); font-weight:400; } :is(.ct-prototype,.ct-product) .ct-progress-description { color:var(--ct-muted); font-size:var(--ct-progress-description-size); line-height:var(--ct-progress-description-line-height); font-weight:400; } /* One boundary when an empty state directly follows the table toolbar. */ :is(.ct-prototype,.ct-product) .fi-ta-main:has(.fi-ta-header-toolbar) .fi-ta-empty-state { border-top:0; } :is(.ct-prototype,.ct-product) .fi-ta-row.fi-selected { background:var(--ct-primary-soft); } :is(.ct-prototype,.ct-product) .fi-ta-row:has(.fi-ta-record-checkbox:checked) { background:var(--ct-primary-soft); } :is(.ct-prototype,.ct-product)[data-table-design]:not([data-table-design=current]) .fi-ta-ctn { border:1px solid var(--ct-border); border-radius:12px; background:white; padding:0; box-shadow:none; } :is(.ct-prototype,.ct-product)[data-table-design]:not([data-table-design=current]) .fi-ta-text { font-variant-numeric:tabular-nums; } :is(.ct-prototype,.ct-product)[data-table-design=ledger] .fi-ta-table > thead > tr { background:#f4f6f4; } :is(.ct-prototype,.ct-product)[data-table-design=ledger] .fi-ta-header-cell { border-bottom:1px solid var(--ct-border-strong); padding-block:11px; } :is(.ct-prototype,.ct-product)[data-table-design=ledger] .fi-ta-table :is(th,td) + :is(th,td) { border-inline-start:1px solid #eceeec; } :is(.ct-prototype,.ct-product)[data-table-design=ledger] .fi-ta-table tbody tr:nth-child(even):not(.fi-selected) { background:#fafbfa; } :is(.ct-prototype,.ct-product)[data-table-design=ledger] .fi-ta-text { padding-block:12px; } :is(.ct-prototype,.ct-product)[data-table-design=rows] .fi-ta-content { padding-inline:12px; background:#f8f9f8; } :is(.ct-prototype,.ct-product)[data-table-design=rows] .fi-ta-table { border-collapse:separate; border-spacing:0 10px; background:#f8f9f8; } :is(.ct-prototype,.ct-product)[data-table-design=rows] .fi-ta-table > thead > tr { background:transparent; } :is(.ct-prototype,.ct-product)[data-table-design=rows] .fi-ta-header-cell { border:0; padding-block:6px; } :is(.ct-prototype,.ct-product)[data-table-design=rows] .fi-ta-row { background:white; } :is(.ct-prototype,.ct-product)[data-table-design=rows] .fi-ta-row .fi-ta-cell { border-block:1px solid var(--ct-border); } :is(.ct-prototype,.ct-product)[data-table-design=rows] .fi-ta-row .fi-ta-cell:first-child { border-inline-start:1px solid var(--ct-border); border-start-start-radius:8px; border-end-start-radius:8px; } :is(.ct-prototype,.ct-product)[data-table-design=rows] .fi-ta-row .fi-ta-cell:last-child { border-inline-end:1px solid var(--ct-border); border-start-end-radius:8px; border-end-end-radius:8px; } :is(.ct-prototype,.ct-product)[data-table-design=rows] .fi-ta-text { padding-block:20px; } :is(.ct-prototype,.ct-product)[data-table-design=focus] .fi-ta-table > thead > tr { background:white; } :is(.ct-prototype,.ct-product)[data-table-design=focus] .fi-ta-header-cell { border-bottom:1px dashed var(--ct-border); padding-block:16px; } :is(.ct-prototype,.ct-product)[data-table-design=focus] .fi-ta-header-cell-label { font-size:11px; font-weight:400; } :is(.ct-prototype,.ct-product)[data-table-design=focus] .fi-ta-row .fi-ta-cell { border-bottom:1px solid #f1f2f1; } :is(.ct-prototype,.ct-product)[data-table-design=focus] .fi-ta-row .fi-ta-cell[data-record-identity] { background:#f7f9f7; } :is(.ct-prototype,.ct-product)[data-table-design] .fi-ta-row .fi-ta-cell[data-record-identity] .fi-ta-text-item { font-weight:500; } :is(.ct-prototype,.ct-product)[data-table-design=focus] .fi-ta-row .fi-ta-cell[data-record-identity] .fi-ta-text-item { color:#253d30; } :is(.ct-prototype,.ct-product)[data-table-design=focus] .fi-ta-text { padding-block:18px; } :is(.ct-prototype,.ct-product)[data-table-design]:not([data-table-design=current]) .fi-ta-row:is(:hover,.fi-selected):not(:has(.fi-ta-empty-state)), :is(.ct-prototype,.ct-product)[data-table-design]:not([data-table-design=current]) .fi-ta-row:has(.fi-ta-record-checkbox:checked) { background:#ecf7f0; } :is(.ct-prototype,.ct-product) .ct-notification-heading { display:flex; align-items:flex-start; gap:8px; font-size:14px; line-height:1.5; } :is(.ct-prototype,.ct-product) .ct-notification-heading > strong { flex:1; min-width:0; overflow-wrap:anywhere; } :is(.ct-prototype,.ct-product) .ct-notification-heading > .fi-dropdown { flex:none; margin-inline-start:auto; } :is(.ct-prototype,.ct-product) .ct-notification-options-trigger { width:1lh; height:1lh; margin:0; padding:0; border-radius:7px; color:var(--ct-muted); font:inherit; } :is(.ct-prototype,.ct-product) .ct-notification-options-trigger > .fi-icon { width:15px; height:15px; } :is(.ct-prototype,.ct-product) .ct-notification-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:14px; } :is(.ct-prototype-body,.ct-product) :is(.ct-document-readiness,.ct-coefficient-review,.ct-budget-revision,.ct-extraction-run) > .fi-section { padding:0; border:1px solid var(--ct-border); border-radius:var(--ct-radius); background:var(--ct-surface); box-shadow:none; } :is(.ct-prototype-body,.ct-product) :is(.ct-document-readiness,.ct-coefficient-review,.ct-budget-revision,.ct-extraction-run) > .fi-section > .fi-section-header { padding:20px 24px; border:0; gap:12px; align-items:flex-start; } :is(.ct-prototype-body,.ct-product) :is(.ct-document-readiness,.ct-coefficient-review,.ct-budget-revision,.ct-extraction-run) > .fi-section:not(.fi-collapsed) > .fi-section-header { border-bottom:1px dashed var(--ct-border); } :is(.ct-prototype-body,.ct-product) .ct-document-readiness .fi-section-header-text-ctn { min-width:0; } :is(.ct-prototype-body,.ct-product) :is(.ct-document-readiness,.ct-coefficient-review,.ct-budget-revision,.ct-extraction-run) .fi-section-header-heading { color:var(--ct-text); font-size:14px; line-height:20px; font-weight:600; } :is(.ct-prototype-body,.ct-product) :is(.ct-document-readiness,.ct-coefficient-review,.ct-budget-revision,.ct-extraction-run) .fi-section-header-description { margin-top:4px; color:var(--ct-muted); font-size:12px; line-height:20px; overflow-wrap:anywhere; } :is(.ct-prototype-body,.ct-product) .ct-document-readiness .fi-section-header-after-ctn { max-width:40%; margin:0; } :is(.ct-prototype-body,.ct-product) .ct-document-readiness .fi-section-header-after-ctn .fi-in-text-item { font-size:12px; line-height:20px; font-weight:500; } :is(.ct-prototype-body,.ct-product) .ct-document-readiness .fi-section-collapse-btn { flex:none; margin:0; width:28px; height:28px; } :is(.ct-prototype-body,.ct-product) :is(.ct-document-readiness,.ct-coefficient-review,.ct-budget-revision,.ct-extraction-run) .fi-section-content { padding:24px; } :is(.ct-prototype-body,.ct-product) :is(.ct-document-readiness,.ct-coefficient-review,.ct-budget-revision,.ct-extraction-run) .fi-section-content-ctn { border:0; box-shadow:none; } :is(.ct-prototype-body,.ct-product) .ct-document-readiness .fi-in-repeatable { gap:0; } :is(.ct-prototype-body,.ct-product) .ct-document-readiness .fi-in-repeatable-item > .fi-sc { grid-template-columns:minmax(0,1fr) auto; row-gap:8px; } :is(.ct-prototype-body,.ct-product) .ct-document-readiness .fi-in-repeatable-item + .fi-in-repeatable-item { margin-top:20px; padding-top:20px; border-top:1px dashed var(--ct-border); } :is(.ct-prototype-body,.ct-product) :is(.ct-document-readiness,.ct-coefficient-review,.ct-budget-revision,.ct-extraction-run) .fi-section-footer { padding:16px 24px; border-top:1px dashed var(--ct-border); } @media(max-width:767px) { :is(.ct-prototype-body,.ct-product) .ct-document-readiness > .fi-section > .fi-section-header { display:grid; grid-template-columns:minmax(0,1fr) 28px; padding:20px; gap:12px; } :is(.ct-prototype-body,.ct-product) .ct-document-readiness .fi-section-header-after-ctn { grid-column:1; grid-row:2; max-width:none; } :is(.ct-prototype-body,.ct-product) .ct-document-readiness .fi-section-header-after-ctn > .fi-sc { justify-content:flex-start; } :is(.ct-prototype-body,.ct-product) .ct-document-readiness .fi-section-collapse-btn { grid-column:2; grid-row:1; } :is(.ct-prototype-body,.ct-product) .ct-document-readiness :is(.fi-section-content,.fi-section-footer) { padding:20px; } } :is(.ct-prototype-body,.ct-product) :is(.ct-coefficient-review,.ct-budget-revision) :is(.ct-coefficient-source,.ct-budget-revision-source) { padding-top:24px; border-top:1px dashed var(--ct-border); } :is(.ct-prototype-body,.ct-product) :is(.ct-coefficient-review,.ct-budget-revision,.ct-extraction-run) .fi-in-entry { row-gap:6px; } :is(.ct-prototype-body,.ct-product) :is(.ct-coefficient-review,.ct-budget-revision,.ct-extraction-run) .fi-in-entry-label { color:var(--ct-muted); font-size:12px; line-height:18px; font-weight:400; } :is(.ct-prototype-body,.ct-product) :is(.ct-coefficient-review,.ct-budget-revision,.ct-extraction-run) .fi-in-text-item { color:var(--ct-text); font-size:14px; line-height:21px; font-weight:500; overflow-wrap:anywhere; } :is(.ct-prototype-body,.ct-product) :is(.ct-coefficient-review,.ct-budget-revision,.ct-extraction-run) .fi-sc.fi-grid { gap:28px; } .ct-prototype .ct-supporting-specimens { display:grid; gap:24px; margin-bottom:24px; } :is(.ct-prototype-body,.ct-product) .ct-extraction-run .fi-section-header-text-ctn { min-width:0; } :is(.ct-prototype-body,.ct-product) .ct-extraction-run .fi-section-header-after-ctn { margin:0; } :is(.ct-prototype-body,.ct-product) .ct-extraction-run .fi-section-collapse-btn { flex:none; margin:0; width:28px; height:28px; } :is(.ct-prototype-body,.ct-product) .ct-extraction-run[data-run-failed=true] .fi-section-header-description { color:var(--ct-danger); } :is(.ct-prototype-body,.ct-product) .ct-extraction-stage-times { padding-top:24px; border-top:1px dashed var(--ct-border); } :is(.ct-prototype-body,.ct-product) .ct-extraction-stage-times .fi-in-repeatable { gap:12px; } :is(.ct-prototype-body,.ct-product) .ct-extraction-stage-times .fi-in-repeatable-item > .fi-sc { grid-template-columns:minmax(0,1fr) auto; gap:24px; } @media(max-width:767px) { :is(.ct-prototype-body,.ct-product) .ct-extraction-run > .fi-section > .fi-section-header { display:grid; grid-template-columns:minmax(0,1fr) 28px; padding:20px; } :is(.ct-prototype-body,.ct-product) .ct-extraction-run .fi-section-header-after-ctn { grid-column:1; grid-row:2; } :is(.ct-prototype-body,.ct-product) .ct-extraction-run .fi-section-header-after-ctn > .fi-sc { justify-content:flex-start; } :is(.ct-prototype-body,.ct-product) .ct-extraction-run .fi-section-collapse-btn { grid-column:2; grid-row:1; } :is(.ct-prototype-body,.ct-product) .ct-extraction-run .fi-section-content { padding:20px; } } @media(max-width:767px) { :is(.ct-prototype-body,.ct-product) .ct-coefficient-review > .fi-section > .fi-section-header, :is(.ct-prototype-body,.ct-product) .ct-coefficient-review .fi-section-content { padding:20px; } } :is(.ct-prototype,.ct-product) .ct-notification-actions .fi-btn { min-height:34px; border-radius:7px; font-size:12px; font-weight:500; padding:7px 10px; } :is(.ct-prototype,.ct-product) .ct-notification-actions .fi-icon { width:15px; height:15px; } :is(.ct-prototype,.ct-product) .ct-notification-outcome { margin-top:14px; display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ct-primary); } :is(.ct-prototype,.ct-product) .ct-notification > div { min-width:0; } :is(.ct-prototype,.ct-product) .ct-notification:last-child { border-bottom:0; } @media(max-width:1200px) { :is(.ct-prototype,.ct-product):not([data-wizard-style=current]) .ct-intake-workspace { grid-template-columns:1fr; } :is(.ct-prototype,.ct-product):not([data-wizard-style=current]) .ct-intake-guidance { display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; } :is(.ct-prototype,.ct-product):not([data-wizard-style=current]) .ct-intake-guidance > :is(h2,p) { grid-column:1/-1; } :is(.ct-prototype,.ct-product)[data-edition] .ct-settings-layout { grid-template-columns:1fr; } } @media(max-width:700px) { :is(.ct-prototype-body,.ct-product) { --ct-menu-height:44px; } :is(.ct-prototype,.ct-prototype-body,.ct-product) .ct-scroll-owner { --ct-scroll-thumb:#b8c1bb; } :is(.ct-prototype,.ct-product)[data-edition] .ct-settings-layout .ct-form-context > :is(.ct-panel-heading,.ct-detail-padding,.ct-panel-footer-link) { padding-inline:16px; } :is(.ct-prototype,.ct-product)[data-edition] :is(.ct-system-sections,.ct-metric-specimens) > .ct-panel > :is(.ct-panel-heading,.ct-detail-padding) { padding:20px; } :is(.ct-prototype,.ct-product):not([data-wizard-style=current]) .ct-intake-workspace .fi-sc-wizard-header { gap:4px; padding:12px 8px; } :is(.ct-prototype,.ct-product):not([data-wizard-style=current]) .ct-intake-workspace .fi-sc-wizard-header-step-btn { padding:8px 4px; flex-direction:column; align-items:center; gap:8px; } :is(.ct-prototype,.ct-product):not([data-wizard-style=current]) .ct-intake-workspace .fi-sc-wizard-header-step-text { justify-items:center; } :is(.ct-prototype,.ct-product):not([data-wizard-style=current]) .ct-intake-workspace .fi-sc-wizard-header-step-description { display:none; } :is(.ct-prototype,.ct-product):not([data-wizard-style=current]) .ct-intake-workspace .fi-sc-wizard-step.fi-active { padding:22px 18px; } :is(.ct-prototype,.ct-product):not([data-wizard-style=current]) .ct-intake-workspace .fi-sc-wizard-footer { padding:16px 18px; } :is(.ct-prototype,.ct-product)[data-wizard-style=rail] .ct-intake-workspace .fi-sc-wizard { grid-template-columns:1fr; } :is(.ct-prototype,.ct-product)[data-wizard-style=rail] .ct-intake-workspace .fi-sc-wizard-header { grid-row:auto; grid-auto-flow:column; grid-auto-columns:1fr; border-inline-end:0; border-bottom:1px dashed var(--ct-border); } :is(.ct-prototype,.ct-product)[data-wizard-style=rail] .ct-intake-workspace .fi-sc-wizard-step.fi-active,:is(.ct-prototype,.ct-product)[data-wizard-style=rail] .ct-intake-workspace .fi-sc-wizard-footer { grid-column:1; } :is(.ct-prototype,.ct-product)[data-wizard-style=stages] .ct-intake-workspace .fi-sc-wizard-header { padding:0 0 12px; gap:8px; } :is(.ct-prototype,.ct-product)[data-wizard-style=stages] .ct-intake-workspace .fi-sc-wizard-header-step-btn { padding:14px 6px; } :is(.ct-prototype,.ct-product):not([data-wizard-style=current]) .ct-intake-guidance { display:block; } :is(.ct-prototype,.ct-product) .ct-notification-actions .fi-btn { min-height:40px; } } @media(hover:none),(pointer:coarse) { :is(.ct-prototype,.ct-prototype-body,.ct-product) .ct-scroll-owner { --ct-scroll-thumb:#b8c1bb; } } @media(prefers-reduced-motion:reduce) { :is(.ct-prototype,.ct-prototype-body,.ct-product) .ct-scroll-owner { transition:none; } } /* Header and row actions share 34px cells inside a 36px frame, including singletons. */ :is(.ct-prototype,.ct-product) .fi-action-button-group { --grouped-action-height:calc(36px - 2px); } /* A joined control owns its outer corners, including nested native menu triggers. */ :is(.ct-prototype,.ct-product) .fi-action-button-group > .fi-action-button-cell { border-radius:0; } :is(.ct-prototype,.ct-product) .fi-action-button-group > .fi-action-button-cell:first-child { border-start-start-radius:7px; border-end-start-radius:7px; } :is(.ct-prototype,.ct-product) .fi-action-button-group > .fi-action-button-cell:last-child { border-start-end-radius:7px; border-end-end-radius:7px; } :is(.ct-prototype,.ct-product) .fi-action-button-cell > .fi-dropdown, :is(.ct-prototype,.ct-product) .fi-action-button-cell > .fi-dropdown > .fi-dropdown-trigger { border-radius:inherit; } :is(.ct-prototype,.ct-product) .fi-action-button-group .fi-grouped-action.fi-btn[data-grouped-action] { border-radius:inherit; background:transparent; color:var(--ct-muted); } :is(.ct-prototype,.ct-product) .fi-action-button-group .fi-grouped-action.fi-btn[data-grouped-action] > .fi-icon { color:inherit; } :is(.ct-prototype,.ct-product) .fi-action-button-group [data-grouped-danger=true] .fi-grouped-action.fi-btn[data-grouped-action] { color:var(--ct-danger); } /* Native schema and Blade callouts share the approved stale-warning anatomy. */ :is(.ct-prototype-body,.ct-product) { --ct-alert-warning-surface:#fffdf5; --ct-alert-warning-border:#e9dcb8; --ct-alert-warning-description:#78716c; } :is(.ct-prototype,.ct-product) .fi-callout { --ct-alert-surface:var(--ct-canvas); --ct-alert-border:var(--ct-border); --ct-alert-icon:var(--ct-muted); --ct-alert-description:var(--ct-muted); display:flex; align-items:center; gap:14px; padding:16px; border:1px dashed var(--ct-alert-border); border-radius:8px; background:var(--ct-alert-surface); box-shadow:none; color:var(--ct-text); } :is(.ct-prototype,.ct-product) .fi-callout.fi-color-warning { --ct-alert-surface:var(--ct-alert-warning-surface); --ct-alert-border:var(--ct-alert-warning-border); --ct-alert-icon:var(--ct-warning); --ct-alert-description:var(--ct-alert-warning-description); border-style:solid; } :is(.ct-prototype,.ct-product) .fi-callout.fi-color-danger { --ct-alert-surface:var(--ct-danger-soft); --ct-alert-border:#fecaca; --ct-alert-icon:var(--ct-danger); --ct-alert-description:#991b1b; border-style:solid; } :is(.ct-prototype,.ct-product) .fi-callout.fi-color-info { --ct-alert-surface:var(--ct-info-soft); --ct-alert-border:#bfdbfe; --ct-alert-icon:var(--ct-info); --ct-alert-description:#1e40af; border-style:solid; } :is(.ct-prototype,.ct-product) .fi-callout:is(.fi-color-success,.fi-color-primary) { --ct-alert-surface:var(--ct-primary-soft); --ct-alert-border:#a7f3d0; --ct-alert-icon:var(--ct-primary); --ct-alert-description:#065f46; border-style:solid; } :is(.ct-prototype,.ct-product) .fi-callout > .fi-callout-icon { flex:0 0 18px; width:18px; height:18px; margin:0; color:var(--ct-alert-icon); } :is(.ct-prototype,.ct-product) .fi-callout .fi-callout-main { flex:1; min-width:0; } :is(.ct-prototype,.ct-product) .fi-callout .fi-callout-text { display:block; } :is(.ct-prototype,.ct-product) .fi-callout .fi-callout-heading { margin:0; color:var(--ct-text); font-size:13px; line-height:1.5; font-weight:600; } :is(.ct-prototype,.ct-product) .fi-callout .fi-callout-description { margin:0; color:var(--ct-alert-description); font-size:12px; line-height:20px; font-weight:400; overflow-wrap:anywhere; } :is(.ct-prototype,.ct-product) .fi-callout .fi-callout-heading + .fi-callout-description { margin-block-start:3px; } :is(.ct-prototype,.ct-product) .fi-callout .fi-callout-controls { display:flex; flex:0 0 auto; gap:8px; margin:0; } :is(.ct-prototype,.ct-product) .fi-callout .fi-callout-footer { margin-block-start:12px; } :is(.ct-prototype,.ct-product) .ct-page-alert { margin-block:0 22px; } :is(.ct-prototype,.ct-product) .ct-alert-specimens { margin-block-end:28px; } @media(max-width:700px) { :is(.ct-prototype,.ct-product) .fi-callout { display:grid; grid-template-columns:18px minmax(0,1fr); align-items:start; } :is(.ct-prototype,.ct-product) .fi-callout > .fi-callout-icon { margin-block-start:1px; } :is(.ct-prototype,.ct-product) .fi-callout .fi-callout-main { grid-column:2; } :is(.ct-prototype,.ct-product) .fi-callout .fi-callout-controls { grid-column:2; margin:0; max-width:100%; flex-wrap:wrap; } :is(.ct-prototype,.ct-product) .fi-callout:not(:has(> .fi-callout-icon)) { grid-template-columns:minmax(0,1fr); } :is(.ct-prototype,.ct-product) .fi-callout:not(:has(> .fi-callout-icon)) :is(.fi-callout-main,.fi-callout-controls) { grid-column:1; } } /* Native stats belong to the existing summary surface, with charts below the copy. */ :is(.ct-prototype,.ct-product) .ct-header-metrics { container:ct-metrics / inline-size; min-width:0; margin-bottom:28px; border:1px solid var(--ct-border); border-radius:var(--ct-radius); background:var(--ct-surface); overflow:hidden; } :is(.ct-prototype,.ct-product) .ct-metrics-period { display:flex; align-items:baseline; justify-content:space-between; gap:8px 20px; flex-wrap:wrap; padding:12px 16px; border-bottom:1px dashed var(--ct-border); color:var(--ct-muted); font-size:12px; line-height:18px; } :is(.ct-prototype,.ct-product) .ct-metrics-period > :first-child { color:var(--ct-text); font-weight:500; } :is(.ct-prototype,.ct-product) .ct-header-metrics-grid { display:grid; grid-template-columns:repeat(var(--ct-metric-columns,4),minmax(0,1fr)); } :is(.ct-prototype,.ct-product) .ct-header-metric { --ct-metric-color:var(--ct-info); --ct-metric-fill:var(--ct-info-soft); display:flex; flex-direction:column; min-width:0; height:100%; margin:0; padding:0; border:0; border-radius:0; box-shadow:none; background:var(--ct-surface); } :is(.ct-prototype,.ct-product) .ct-header-metric + .ct-header-metric { border-inline-start:1px dashed var(--ct-border); } :is(.ct-prototype,.ct-product) .ct-header-metric[data-tone=success] { --ct-metric-color:var(--ct-primary); --ct-metric-fill:var(--ct-primary-soft); } :is(.ct-prototype,.ct-product) .ct-header-metric[data-tone=danger] { --ct-metric-color:var(--ct-danger); --ct-metric-fill:var(--ct-danger-soft); } :is(.ct-prototype,.ct-product) .ct-header-metric .fi-wi-stats-overview-stat-content { display:flex; flex:1; flex-direction:column; gap:4px; padding:12px 16px 4px; } :is(.ct-prototype,.ct-product) .ct-header-metric .fi-wi-stats-overview-stat-label-ctn { align-items:flex-start; gap:8px; min-height:40px; } :is(.ct-prototype,.ct-product) .ct-header-metric .fi-wi-stats-overview-stat-label { color:var(--ct-muted); font-size:14px; line-height:20px; font-weight:400; } :is(.ct-prototype,.ct-product) .ct-header-metric .fi-wi-stats-overview-stat-label-ctn .fi-icon { width:18px; height:18px; margin-top:1px; color:var(--ct-muted); } :is(.ct-prototype,.ct-product) .ct-header-metric .fi-wi-stats-overview-stat-value { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; color:var(--ct-text); font-size:24px; line-height:32px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.025em; } :is(.ct-prototype,.ct-product) .ct-header-metric .fi-wi-stats-overview-stat-value small { color:var(--ct-muted); font-size:12px; line-height:18px; font-weight:400; letter-spacing:0; } :is(.ct-prototype,.ct-product) .ct-header-metric .fi-wi-stats-overview-stat-description { align-items:flex-start; gap:6px; min-height:18px; margin-top:auto; color:var(--ct-metric-color); font-size:12px; line-height:18px; font-weight:400; } :is(.ct-prototype,.ct-product) .ct-header-metric .fi-wi-stats-overview-stat-description .fi-icon { width:16px; height:16px; margin-top:1px; color:inherit; } :is(.ct-prototype,.ct-product) .ct-header-metric > :last-child { flex:none; margin:0; padding:0; } :is(.ct-prototype,.ct-product) .ct-header-metric .fi-wi-stats-overview-stat-chart { position:relative; inset:auto; height:48px; margin:0; padding:0; border-radius:0; } :is(.ct-prototype,.ct-product) .ct-header-metric .fi-wi-stats-overview-stat-chart > canvas { display:block; width:100%; height:48px; } :is(.ct-prototype,.ct-product) .ct-header-metric .fi-wi-stats-overview-stat-chart .fi-wi-stats-overview-stat-chart-bg-color { color:var(--ct-metric-fill); } :is(.ct-prototype,.ct-product) .ct-header-metric .fi-wi-stats-overview-stat-chart .fi-wi-stats-overview-stat-chart-border-color { color:var(--ct-metric-color); } :is(.ct-prototype,.ct-product) .ct-header-metrics[data-metric-style=canvas] { border:0; border-radius:0; background:transparent; overflow:visible; } :is(.ct-prototype,.ct-product) .ct-header-metrics[data-metric-style=canvas] .ct-header-metric { background:transparent; } :is(.ct-prototype,.ct-product) .ct-header-metrics[data-metric-style=canvas] .ct-metrics-period { padding-block-start:0; padding-inline:0; } :is(.ct-prototype,.ct-product) .ct-header-metrics[data-metric-style=canvas] .ct-header-metric:first-child .fi-wi-stats-overview-stat-content { padding-inline-start:0; } :is(.ct-prototype,.ct-product) .ct-header-metrics[data-metric-style=canvas] .ct-header-metric:last-child .fi-wi-stats-overview-stat-content { padding-inline-end:0; } :is(.ct-prototype,.ct-product) .ct-header-metrics[data-metric-style=canvas] .ct-data-disclosure > summary { padding-inline:0; } /* The chart and its optional data footer share one surface. */ :is(.ct-prototype,.ct-product) :is(.ct-charts-grid,.ct-workspace-charts) .fi-section { padding:0; } :is(.ct-prototype,.ct-product) :is(.ct-charts-grid,.ct-workspace-charts) .fi-section-header { padding:20px 24px; } :is(.ct-prototype,.ct-product) :is(.ct-charts-grid,.ct-workspace-charts) .fi-section-content { padding:24px; } :is(.ct-prototype,.ct-product) .ct-chart-with-data { border:1px solid var(--ct-border); border-radius:var(--ct-radius); background:var(--ct-surface); } :is(.ct-prototype,.ct-product) .ct-chart-with-data > .fi-wi-chart { border-radius:inherit; } :is(.ct-prototype,.ct-product) .ct-chart-with-data > .fi-wi-chart > .fi-section { border:0; border-radius:inherit; box-shadow:none; } :is(.ct-prototype,.ct-product) :is(.ct-chart-with-data,.ct-header-metrics[data-metric-style=surface]) > .ct-data-disclosure { --ct-data-footer-radius:calc(var(--ct-radius) - 1px); overflow:hidden; border-end-start-radius:var(--ct-data-footer-radius); border-end-end-radius:var(--ct-data-footer-radius); } :is(.ct-prototype,.ct-product) .ct-data-disclosure:not([open]) > summary { border-end-start-radius:var(--ct-data-footer-radius,0px); border-end-end-radius:var(--ct-data-footer-radius,0px); } :is(.ct-prototype,.ct-product) .ct-data-disclosure > summary .ct-data-disclosure-caption + .ct-icon { margin-inline-start:0; } :is(.ct-prototype,.ct-product) .ct-metric-data-scroll table { min-width:580px; } :is(.ct-prototype,.ct-product) .ct-data-disclosure { border-top:1px dashed var(--ct-border); } :is(.ct-prototype,.ct-product) .ct-data-disclosure > summary { display:flex; align-items:center; gap:8px 16px; flex-wrap:wrap; min-height:44px; padding:10px 16px; color:var(--ct-muted); font-size:12px; line-height:18px; list-style:none; cursor:pointer; transition:background-color var(--ct-motion) var(--ct-ease),color var(--ct-motion) var(--ct-ease); } :is(.ct-prototype,.ct-product) .ct-data-disclosure > summary::-webkit-details-marker { display:none; } :is(.ct-prototype,.ct-product) .ct-data-disclosure > summary:hover { color:var(--ct-text); background:var(--ct-subtle); } :is(.ct-prototype,.ct-product) .ct-data-disclosure > summary:focus-visible { outline:2px solid var(--ct-primary); outline-offset:-4px; } :is(.ct-prototype,.ct-product) .ct-data-disclosure-caption { margin-inline-start:auto; } :is(.ct-prototype,.ct-product) .ct-data-disclosure > summary .ct-icon { flex:none; margin-inline-start:auto; width:14px; height:14px; transition:transform var(--ct-motion) var(--ct-ease); } :is(.ct-prototype,.ct-product) .ct-data-disclosure[open] > summary .ct-icon { transform:rotate(180deg); } :is(.ct-prototype,.ct-product) .ct-data-disclosure-content { padding:20px 24px 24px; border-top:1px dashed var(--ct-border); } :is(.ct-prototype,.ct-product) .ct-data-table-scroll { overflow-x:auto; scrollbar-width:thin; scrollbar-color:var(--ct-border-strong) transparent; } :is(.ct-prototype,.ct-product) .ct-data-table-scroll:focus-visible { outline:2px solid var(--ct-primary); outline-offset:-2px; } :is(.ct-prototype,.ct-product) .ct-data-table-scroll table { width:100%; border-collapse:collapse; font-size:12px; line-height:18px; font-variant-numeric:tabular-nums; } :is(.ct-prototype,.ct-product) .ct-data-table-scroll caption { padding-bottom:16px; text-align:start; color:var(--ct-muted); } :is(.ct-prototype,.ct-product) .ct-data-table-scroll :is(th,td) { padding:12px; text-align:start; border-bottom:1px solid var(--ct-border); } :is(.ct-prototype,.ct-product) .ct-data-table-scroll th { font-weight:500; } :is(.ct-prototype,.ct-product) .ct-data-table-scroll thead th { color:var(--ct-muted); border-bottom-style:dashed; } :is(.ct-prototype,.ct-product) .ct-data-table-scroll th span { white-space:nowrap; } :is(.ct-prototype,.ct-product) .ct-data-table-scroll :is(th,td):first-child { padding-inline-start:0; text-align:start; } :is(.ct-prototype,.ct-product) .ct-data-table-scroll tbody tr:last-child :is(th,td) { border-bottom:0; } :is(.ct-prototype,.ct-product) .ct-data-disclosure-content p { max-width:72ch; margin:16px 0 0; color:var(--ct-muted); font-size:12px; line-height:20px; } @media(max-width:900px) { :is(.ct-prototype,.ct-product) :is(.ct-charts-grid,.ct-workspace-charts) .fi-section-header { padding:20px 16px; } :is(.ct-prototype,.ct-product) :is(.ct-charts-grid,.ct-workspace-charts) .fi-section-content { padding:16px; } :is(.ct-prototype,.ct-product) .ct-chart-with-data .ct-data-disclosure-content { padding-inline:16px; } } :is(.ct-prototype,.ct-product) .ct-metric-guidelines .ct-rules { margin:0; } :is(.ct-prototype,.ct-product)[data-edition] .ct-system-sections > .ct-metric-specimens { padding:0; margin:0; border:0; background:transparent; } :is(.ct-prototype,.ct-product) .ct-metric-example { min-width:0; } :is(.ct-prototype,.ct-product) .ct-metric-example-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; margin-bottom:16px; } :is(.ct-prototype,.ct-product) .ct-metric-example-heading h3 { margin:0; color:var(--ct-text); font-size:14px; line-height:20px; font-weight:600; } :is(.ct-prototype,.ct-product) .ct-metric-example-heading p { margin:4px 0 0; color:var(--ct-muted); font-size:12px; line-height:20px; } :is(.ct-prototype,.ct-product) .ct-metric-example-heading .ct-inline-link { margin:0; } :is(.ct-prototype,.ct-product) .ct-metric-example > .ct-header-metrics { margin:0; } :is(.ct-prototype,.ct-product) .ct-resource-examples { margin-top:24px; padding-top:24px; border-top:1px dashed var(--ct-border); } :is(.ct-prototype,.ct-product) .ct-resource-examples h3 { margin:0; font-size:14px; line-height:20px; font-weight:600; } :is(.ct-prototype,.ct-product) .ct-resource-examples ul { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:24px; margin:16px 0 0; padding:0; list-style:none; } :is(.ct-prototype,.ct-product) .ct-resource-examples a { display:flex; align-items:flex-start; gap:8px; color:var(--ct-primary); font-size:12px; line-height:20px; font-weight:500; } :is(.ct-prototype,.ct-product) .ct-resource-examples a .ct-icon { flex-shrink:0; width:16px; height:16px; margin-top:2px; } :is(.ct-prototype,.ct-product) .ct-resource-examples p { margin:6px 0 0; color:var(--ct-muted); font-size:12px; line-height:20px; } @container ct-metrics (max-width:900px) { :is(.ct-prototype,.ct-product) .ct-header-metrics-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } :is(.ct-prototype,.ct-product) .ct-header-metric:nth-child(odd) { border-inline-start:0; } :is(.ct-prototype,.ct-product) .ct-header-metric:nth-child(n+3) { border-top:1px dashed var(--ct-border); } :is(.ct-prototype,.ct-product) .ct-header-metric .fi-wi-stats-overview-stat-content { padding-inline:16px; } :is(.ct-prototype,.ct-product) .ct-metrics-period,:is(.ct-prototype,.ct-product) .ct-data-disclosure > summary { padding-inline:16px; } :is(.ct-prototype,.ct-product) .ct-data-disclosure-content { padding-inline:16px; } :is(.ct-prototype,.ct-product) .ct-header-metrics[data-metric-style=canvas] .ct-header-metric:nth-child(odd) .fi-wi-stats-overview-stat-content { padding-inline-start:0; } :is(.ct-prototype,.ct-product) .ct-header-metrics[data-metric-style=canvas] .ct-header-metric:nth-child(even) .fi-wi-stats-overview-stat-content { padding-inline-end:0; } } @container ct-metrics (max-width:440px) { :is(.ct-prototype,.ct-product) .ct-metrics-period { display:grid; gap:4px; } :is(.ct-prototype,.ct-product) .ct-data-disclosure > summary { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; } :is(.ct-prototype,.ct-product) .ct-data-disclosure-caption { margin:0; grid-column:1; } :is(.ct-prototype,.ct-product) .ct-data-disclosure > summary .ct-icon { grid-column:2; grid-row:1/3; } } @container ct-metrics (max-width:320px) { :is(.ct-prototype,.ct-product) .ct-header-metrics-grid { grid-template-columns:minmax(0,1fr); } :is(.ct-prototype,.ct-product) .ct-header-metric + .ct-header-metric { border-inline-start:0; border-top:1px dashed var(--ct-border); } :is(.ct-prototype,.ct-product) .ct-header-metric .fi-wi-stats-overview-stat-label-ctn { min-height:20px; } :is(.ct-prototype,.ct-product) .ct-header-metric .fi-wi-stats-overview-stat-description { min-height:18px; } :is(.ct-prototype,.ct-product) .ct-header-metrics[data-metric-style=canvas] .ct-header-metric .fi-wi-stats-overview-stat-content { padding-inline:0; } } @media(prefers-reduced-motion:reduce) { :is(.ct-prototype,.ct-product) .ct-data-disclosure > summary,:is(.ct-prototype,.ct-product) .ct-data-disclosure > summary .ct-icon { transition:none; } :is(.ct-prototype,.ct-product) .ct-panel > .ct-panel-footer-link { transition:none; } } .ct-notifications .fi-no-notifications { gap:0; } .ct-notification.fi-no-notification { overflow:visible; background:transparent; } .ct-notification-body { margin:6px 0 10px; color:var(--ct-muted); font-size:13px; line-height:21px; overflow-wrap:anywhere; } .ct-notification .ct-notification-body p { margin:0; } .ct-notification-body > :not(:first-child) { margin-block-start:6px; } .ct-notifications > .fi-link { line-height:inherit; text-decoration:none; } :is(.ct-prototype,.ct-product) .ct-notification-clear { float:inline-end; color:var(--ct-danger); } :is(.ct-prototype-body,.ct-product) .ct-budget-revision .fi-section-header-text-ctn { min-width:0; } :is(.ct-prototype-body,.ct-product) .ct-budget-revision .fi-section-header-after-ctn { flex:none; margin:0; } :is(.ct-prototype-body,.ct-product) .ct-budget-revision .fi-section-collapse-btn { flex:none; margin:0; width:28px; height:28px; } @media(max-width:640px) { :is(.ct-prototype-body,.ct-product) .ct-budget-revision > .fi-section > .fi-section-header { display:grid; grid-template-columns:minmax(0,1fr) 28px; padding:20px; gap:12px; } :is(.ct-prototype-body,.ct-product) .ct-budget-revision .fi-section-header-after-ctn { grid-column:1; grid-row:2; max-width:none; } :is(.ct-prototype-body,.ct-product) .ct-budget-revision .fi-section-header-after-ctn > .fi-sc { justify-content:flex-start; } :is(.ct-prototype-body,.ct-product) .ct-budget-revision .fi-section-collapse-btn { grid-column:2; grid-row:1; } :is(.ct-prototype-body,.ct-product) .ct-budget-revision .fi-section-content { padding:20px; } } /* Review records and their complete native reference specimens. */ :is(.ct-product,.ct-review-artifact-reference) .ct-review-section > .fi-section { min-width:0; padding:0; border:1px solid var(--ct-border); border-radius:var(--ct-radius); background:var(--ct-surface); box-shadow:none; } :is(.ct-product,.ct-review-artifact-reference) .ct-review-section > .fi-section > .fi-section-header { padding:20px 22px; border-bottom:1px dashed var(--ct-border); } :is(.ct-product,.ct-review-artifact-reference) .ct-review-section > .fi-section > .fi-section-header .fi-section-header-heading { font-size:14px; line-height:22px; font-weight:600; letter-spacing:-.025em; } :is(.ct-product,.ct-review-artifact-reference) .ct-review-section > .fi-section > .fi-section-header .fi-section-header-description { margin:4px 0 0; color:var(--ct-muted); font-size:11px; line-height:20px; } :is(.ct-product,.ct-review-artifact-reference) .ct-review-section > .fi-section > .fi-section-content-ctn { border:0; } :is(.ct-product,.ct-review-artifact-reference) .ct-review-section > .fi-section > .fi-section-content-ctn > .fi-section-content { padding:24px; gap:24px; background:transparent; } :is(.ct-product,.ct-review-artifact-reference) .ct-review-section :is(.fi-in-text,.fi-prose,.fi-in-key-value-value) { min-width:0; overflow-wrap:anywhere; } :is(.ct-product,.ct-review-artifact-reference) .ct-review-section .fi-in-key-value :is(th,td) { overflow-wrap:anywhere; } :is(.ct-product,.ct-review-artifact-reference) .ct-review-history-change > .fi-section { padding:0; border:1px solid var(--ct-border); border-radius:var(--ct-radius); box-shadow:none; } :is(.ct-product,.ct-review-artifact-reference) .ct-review-history-change > .fi-section > .fi-section-header { padding:20px 24px; } :is(.ct-product,.ct-review-artifact-reference) .ct-review-history-change > .fi-section > .fi-section-content-ctn { border:0; background:transparent; box-shadow:none; } :is(.ct-product,.ct-review-artifact-reference) .ct-review-history-change > .fi-section > .fi-section-content-ctn > .fi-section-content { padding:24px; background:transparent; } @media(max-width:767px) { :is(.ct-product,.ct-review-artifact-reference) .ct-review-history-change > .fi-section > .fi-section-header, :is(.ct-product,.ct-review-artifact-reference) .ct-review-history-change > .fi-section > .fi-section-content-ctn > .fi-section-content { padding:16px; } } .ct-review-artifact-reference .ct-record-context { margin-bottom:26px; } .ct-contract-history { display:grid; gap:24px; min-width:0; } .ct-contract-history .ct-history-items { display:grid; gap:24px; } .ct-contract-history .ct-history-items > :not(:first-child) { border-top:1px dashed var(--ct-border); padding-top:24px; } .ct-contract-history :is(.ct-history-items,.ct-timeline,.ct-key-values) { min-width:0; overflow-wrap:anywhere; } @media(max-width:700px) { :is(.ct-product,.ct-review-artifact-reference) .ct-review-section > .fi-section > .fi-section-header { padding:16px; } :is(.ct-product,.ct-review-artifact-reference) .ct-review-section > .fi-section > .fi-section-content-ctn > .fi-section-content { padding:20px; } } /* Native batch progress inside the table reference uses the product cell contract. */ .ct-prototype .ct-progress-cell { --cp-signal:var(--ct-primary); --cp-fill:var(--ct-progress-fill); --cp-soft:var(--ct-primary-soft,#ecfdf5); min-width:0; margin:4px 0; text-align:start; } .ct-prototype .ct-progress-cell[data-tone=danger] { --cp-signal:var(--ct-danger); --cp-fill:var(--ct-progress-danger); --cp-soft:var(--ct-danger-soft,#fef2f2); } .ct-prototype .ct-progress-cell[data-tone=warning] { --cp-signal:var(--ct-warning); --cp-fill:var(--ct-progress-warning); --cp-soft:var(--ct-warning-soft,#fefce8); } .ct-prototype .ct-progress-cell[data-tone=neutral] { --cp-signal:var(--ct-muted); --cp-fill:var(--ct-progress-neutral); --cp-soft:var(--ct-subtle); } .ct-prototype .ct-progress-cell .cp-cell-phase { overflow:hidden; text-overflow:ellipsis; } .ct-prototype[dir=rtl] .ct-progress-cell .cp-cell-meter > span { transform-origin:right center; } /* Payment is a financial proportion, independent of process progress preferences. */ .ct-payment-cell { padding:8px 12px; } .ct-payment-summary,.ct-payment-overview { --ct-payment-signal:var(--ct-primary); --ct-payment-fill:var(--ct-progress-fill); } .ct-payment-summary { display:grid; gap:4px; min-width:180px; width:max-content; padding:0; margin:0; border:0; border-radius:0; background:transparent; color:var(--ct-text); font:inherit; font-size:var(--ct-table-secondary-size,13px); line-height:var(--ct-table-secondary-line-height,20px); font-variant-numeric:tabular-nums; text-align:start; cursor:help; } :is(.ct-payment-summary,.ct-payment-overview)[data-tone=danger] { --ct-payment-signal:var(--ct-danger); --ct-payment-fill:var(--ct-progress-danger); } .ct-payment-summary:focus-visible { outline:2px solid var(--ct-primary); outline-offset:4px; } .ct-payment-amount { display:flex; align-items:baseline; justify-content:space-between; gap:12px; white-space:nowrap; } .ct-payment-amount > :first-child { color:var(--ct-muted); } .ct-payment-amount strong { color:var(--ct-text); font-size:var(--ct-table-primary-size,14px); line-height:var(--ct-table-primary-line-height,24px); font-weight:400; } .ct-payment-measure { display:grid; grid-template-columns:minmax(0,1fr) max-content; align-items:center; gap:4px; line-height:12px; } .ct-payment-measure .ct-payment-percent { color:var(--ct-payment-signal); text-align:end; font-size:11px; } .ct-payment-measure meter { display:block; appearance:none; width:100%; height:6px; border:0; border-radius:3px; background:var(--ct-border); overflow:hidden; } .ct-payment-measure meter::-webkit-meter-inner-element { display:block; } .ct-payment-measure meter::-webkit-meter-bar { height:6px; background:var(--ct-border); border:0; border-radius:3px; box-shadow:none; } .ct-payment-measure meter::-webkit-meter-optimum-value { background:var(--ct-payment-fill); border-radius:3px; transition:none; } .ct-payment-measure meter::-moz-meter-bar { background:var(--ct-payment-fill); border-radius:3px; } .ct-product .ct-payment-overview[data-shared-context] { margin:0; } .ct-payment-overview[data-shared-context] .ct-payment-measure { display:grid; min-width:180px; height:20px; } @media(max-width:700px) { .ct-payment-overview[data-shared-context] > div:last-child { grid-column:1 / -1; } }