:root { /* Immutable reference tokens: exact Birzha v9 values. */ --birzha-v9-paper: #f4f3ef; --birzha-v9-surface: #fff; --birzha-v9-ink: #171817; --birzha-v9-muted: #656660; --birzha-v9-line: #dcdcd5; --birzha-v9-blue: #2859e8; --birzha-v9-blue-dark: #1744c4; --birzha-v9-blue-soft: #e7edff; --birzha-v9-lime: #d8ff68; --birzha-v9-danger: #b42318; --birzha-v9-font: "Segoe UI Variable Display", "Segoe UI", Inter, Arial, sans-serif; --birzha-v9-breakpoint-tablet: 1040px; --birzha-v9-breakpoint-mobile: 760px; --birzha-v9-motion: 180ms; /* Native Servaki ChatFirst palette: app/chat-first.css --cf-* tokens. */ --servaki-paper: #f4f3f0; --servaki-panel: #fff; --servaki-surface: #f9f8f5; --servaki-ink: #171717; --servaki-muted: #66635e; --servaki-line: #e8e5df; --servaki-soft: #fff2e8; --servaki-orange: #ff7200; --servaki-orange-hover: #b94700; --servaki-orange-light: #ff8a1c; --servaki-orange-text-dark: #ff8a1c; --servaki-orange-soft: #fff2e8; --servaki-on-orange: #110b06; --servaki-own: #fff0e4; --servaki-quote: #ffe5d1; --servaki-danger: #a42632; --servaki-dark-canvas: #090a0b; --servaki-dark-panel: #181b20; --servaki-dark-surface: #20242a; --servaki-dark-ink: #f2f0e9; --servaki-dark-muted: #aaa9a4; --servaki-dark-line: #2a2d31; --servaki-dark-soft: #25282e; --servaki-dark-quote: #33363d; --servaki-dark-danger: #ff9aa2; /* Semantic FinPult tokens. */ --fp-canvas: var(--birzha-v9-paper); --fp-surface: var(--birzha-v9-surface); --fp-ink: var(--birzha-v9-ink); --fp-muted: var(--birzha-v9-muted); --fp-border: var(--birzha-v9-line); --fp-action: var(--birzha-v9-blue); --fp-action-hover: var(--birzha-v9-blue-dark); --fp-action-soft: var(--birzha-v9-blue-soft); --fp-accent: var(--birzha-v9-lime); --fp-danger: var(--birzha-v9-danger); --fp-on-action: var(--birzha-v9-surface); --fp-product-panel: var(--birzha-v9-ink); --fp-on-panel: var(--birzha-v9-surface); --fp-hard-line: var(--birzha-v9-ink); --fp-inverse-surface: var(--birzha-v9-ink); --fp-on-inverse: var(--birzha-v9-surface); --fp-dark-canvas: color-mix(in srgb, var(--birzha-v9-ink) 96%, black); --fp-dark-surface: color-mix(in srgb, var(--birzha-v9-surface) 7%, var(--birzha-v9-ink)); --fp-dark-surface-elevated: color-mix(in srgb, var(--birzha-v9-surface) 11%, var(--birzha-v9-ink)); --fp-dark-border: color-mix(in srgb, var(--birzha-v9-surface) 17%, transparent); --fp-focus: color-mix(in srgb, var(--fp-action) 32%, transparent); --fp-shadow-soft: 0 18px 48px color-mix(in srgb, var(--fp-ink) 10%, transparent); --fp-shadow-board: 0 30px 80px color-mix(in srgb, var(--fp-ink) 20%, transparent); /* Component tokens: no page-local palette values. */ --fp-button-height: 48px; --fp-button-radius: 14px; --fp-button-padding: 20px; --fp-button-background: var(--fp-action); --fp-button-background-hover: var(--fp-action-hover); --fp-button-foreground: var(--fp-on-action); --fp-card-radius: 22px; --fp-card-padding: 24px; --fp-card-background: var(--fp-surface); --fp-card-border: var(--fp-border); --fp-card-shadow: var(--fp-shadow-soft); --fp-board-radius: 30px; --fp-quality-border: 2px solid var(--fp-hard-line); --fp-focus-outline: 3px solid var(--fp-focus); --fp-focus-offset: 3px; } /* Owner-approved hybrid palette, 2026-09-03. Reference tokens above stay archival. */ :root { --fp-approved-08090a: #08090a; --fp-approved-090a0b: #090a0b; --fp-approved-111317: #111317; --fp-approved-171717: #171717; --fp-approved-17191d: #17191d; --fp-approved-2a2d31: #2a2d31; --fp-approved-404040: #404040; --fp-approved-b8c3d3: #b8c3d3; --fp-approved-c9c2b7: #c9c2b7; --fp-approved-e5e0d7: #e5e0d7; --fp-approved-eeeae2: #eeeae2; --fp-approved-f2f0e9: #f2f0e9; --fp-approved-faf8f3: #faf8f3; --fp-approved-ff7200: #ff7200; } .work-order-actions button { transition: border-color 120ms ease, transform 120ms ease; } .work-order-actions button:hover:not(:disabled) { border-color: var(--accent); } .work-order-actions button:active:not(:disabled) { transform: translateY(1px); } .work-order-actions .work-handoff-status:empty { display: none; } .work-order .work-order-result, .work-order .work-order-evidence, #workHandoffActorBadge { background: var(--surface-soft); } @media (prefers-reduced-motion: reduce) { .work-order-actions button { transition: none; transform: none; } } html[data-motion="reduced"] .work-order-actions button { transition: none; transform: none; } :root { color-scheme: light; --canvas: var(--fp-canvas); --surface: var(--fp-surface); --surface-elevated: var(--fp-surface); --surface-soft: var(--fp-action-soft); --text: var(--fp-ink); --muted: var(--fp-muted); --border: var(--fp-border); --accent: var(--fp-action); --accent-ink: var(--fp-on-action); --accent-soft: var(--fp-action-soft); --positive: var(--fp-action-hover); --negative: var(--fp-danger); --warning-text: var(--fp-ink); --warning-graphic: var(--fp-accent); --info: var(--fp-action); --hard-line: var(--fp-hard-line); --inverse: var(--fp-inverse-surface); --inverse-text: var(--fp-on-inverse); --shadow: var(--fp-shadow-soft); --radius: var(--fp-card-radius); --space: 24px; --sidebar: 260px; --focus: 0 0 0 3px var(--fp-focus); font-family: var(--birzha-v9-font); } html[data-theme="dark"] { color-scheme: dark; --canvas: var(--fp-dark-canvas); --surface: var(--fp-dark-surface); --surface-elevated: var(--fp-dark-surface-elevated); --surface-soft: color-mix(in srgb, var(--fp-surface) 5%, var(--fp-product-panel)); --text: var(--fp-on-panel); --muted: color-mix(in srgb, var(--fp-on-panel) 65%, transparent); --border: var(--fp-dark-border); --accent: var(--fp-action); --accent-ink: var(--fp-on-action); --accent-soft: color-mix(in srgb, var(--fp-action) 18%, transparent); --positive: var(--fp-action); --warning-text: var(--fp-accent); --warning-graphic: var(--fp-accent); --inverse: var(--fp-surface); --inverse-text: var(--fp-ink); --shadow: var(--fp-shadow-board); --focus: 0 0 0 3px color-mix(in srgb, var(--fp-action) 42%, transparent); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--canvas); color: var(--text); min-width: 320px; font-family: var(--birzha-v9-font); } button, a { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } button:focus-visible, a:focus-visible { outline: none; box-shadow: var(--focus); } button:disabled { cursor: not-allowed; opacity: .58; } a { color: inherit; text-decoration: none; } .onboarding-dialog { width: min(620px, calc(100vw - 40px)); padding: 0; overflow: hidden; border: 2px solid var(--hard-line); border-radius: 24px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); } .onboarding-dialog::backdrop { background: color-mix(in srgb, var(--hard-line) 58%, transparent); backdrop-filter: blur(8px); } html[data-theme="dark"] .onboarding-dialog { background: var(--surface-elevated); color: var(--text); } .onboarding-shell { padding: 28px; } .onboarding-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; } .onboarding-heading h2 { margin: 4px 0 0; font-size: 28px; letter-spacing: -.04em; } .onboarding-skip { min-height: 42px; padding: 0 14px; border: 1px solid var(--border); border-radius: 11px; background: transparent; color: var(--muted); cursor: pointer; } .onboarding-skip:hover { border-color: var(--hard-line); color: var(--text); } .onboarding-progress { margin: 22px 0 10px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .onboarding-steps { min-height: 260px; } .onboarding-step { min-height: 260px; padding: 26px; border: 1px solid var(--border); border-left: 6px solid var(--accent); border-radius: 16px; background: var(--surface-elevated); } .onboarding-step[hidden] { display: none; } .onboarding-step-number { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 850; } .onboarding-step h3 { margin: 22px 0 12px; font-size: 25px; line-height: 1.05; letter-spacing: -.04em; } .onboarding-step p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; } .onboarding-step p + p { margin-top: 16px; } .onboarding-step .onboarding-warning { padding: 12px 14px; border-radius: 11px; background: var(--accent-soft); color: var(--text); font-size: 13px; } .onboarding-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; } .onboarding-actions button { min-height: 46px; } .onboarding-primary { display: inline-flex; align-items: center; justify-content: center; } .app-shell { min-height: 100vh; } .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); padding: 28px 18px 20px; background: var(--fp-surface); color: var(--fp-ink); border-right: 2px solid var(--fp-ink); display: flex; flex-direction: column; z-index: 20; box-shadow: none; } .brand { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 760; letter-spacing: -.02em; padding: 0 8px 28px; } .brand-mark { width: 38px; height: 38px; flex: 0 0 38px; display: block; border: 0; border-radius: 0; background: transparent center / contain no-repeat url("/assets/brand/finpult-mark-light.svg"); transform: none; } html[data-theme="dark"] .brand-mark { background-image: url("/assets/brand/finpult-mark-dark.svg"); } .mobile-brand { display: none; } .side-nav { display: grid; gap: 5px; } .nav-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 13px; border: 1px solid transparent; border-radius: 12px; color: var(--muted); font-weight: 620; font-size: 14px; } .sidebar .nav-item { color: var(--fp-muted); } .nav-item span { width: 20px; text-align: center; font-size: 18px; } .nav-item:hover { color: var(--fp-ink); background: var(--fp-action-soft); } .nav-item.active { color: var(--fp-ink); background: var(--fp-surface); border-color: var(--fp-ink); box-shadow: inset 4px 0 0 var(--fp-accent); } .nav-item-soon { cursor: default; opacity: .66; } .nav-item-soon small { margin-left: auto; padding: 3px 6px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 8px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; } .nav-section { margin: 28px 0 12px; } .nav-section > p { margin: 0 10px 9px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .workspace-card { width: 100%; border: 1px solid var(--fp-ink); background: var(--fp-action-soft); color: var(--fp-ink); border-radius: 14px; padding: 10px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; text-align: left; cursor: pointer; } .workspace-avatar, .profile-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--fp-ink); color: var(--fp-surface); font-size: 11px; font-weight: 850; } .workspace-card strong, .workspace-card small, .profile strong, .profile small { display: block; } .workspace-card strong, .profile strong { font-size: 13px; } .workspace-card small, .profile small { margin-top: 2px; color: var(--muted); font-size: 11px; } .sidebar .nav-section > p, .sidebar .workspace-card small, .sidebar .profile small { color: var(--fp-muted); } .sidebar .profile .icon-button { border-color: var(--fp-border); background: var(--fp-surface); color: var(--fp-ink); } .secondary { margin-top: auto; } .profile { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; border-top: 1px solid var(--fp-ink); margin-top: 16px; padding: 18px 5px 0; } .main { margin-left: var(--sidebar); padding: 42px clamp(28px, 4.5vw, 72px) 72px; max-width: 1660px; } .topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; margin-bottom: 32px; } .eyebrow { margin: 0 0 7px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; } h1, h2, p { margin-top: 0; } h1 { margin-bottom: 9px; font-size: clamp(38px, 4.5vw, 64px); font-weight: 850; line-height: .98; letter-spacing: -.062em; } h2 { margin-bottom: 0; font-size: 19px; letter-spacing: -.025em; } .subtitle { margin-bottom: 0; color: var(--muted); font-size: 14px; } .staging-badge { display: inline-flex; align-items: center; margin-left: 8px; padding: 5px 8px; border: 1px solid var(--fp-ink); border-radius: 999px; background: var(--fp-surface); color: var(--fp-ink); font-size: 9px; letter-spacing: .04em; vertical-align: middle; } .top-actions { display: flex; gap: 10px; } .icon-button, .primary-button, .period-button, .ghost-icon, .theme-tools button { border: 0; color: var(--text); cursor: pointer; } .icon-button { width: 42px; height: 42px; border-radius: 12px; background: var(--surface); border: 1px solid var(--fp-ink); } .notification { position: relative; } .notification i { position: absolute; top: 10px; right: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .primary-button { min-height: 46px; padding: 0 19px; border: 2px solid var(--fp-ink); border-radius: var(--fp-button-radius); background: var(--fp-action); color: var(--fp-on-action); font-weight: 820; box-shadow: 0 12px 28px color-mix(in srgb, var(--fp-action) 20%, transparent); } .primary-button span { margin-right: 8px; font-size: 18px; } .card { border: 2px solid var(--fp-ink); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } .metric-grid { display: grid; grid-template-columns: 1.35fr .85fr .85fr; gap: 16px; } .metric-card { position: relative; padding: 23px; min-height: 184px; overflow: hidden; } .metric-card.featured { border-color: var(--fp-ink); background: var(--fp-surface); color: var(--fp-ink); box-shadow: var(--fp-shadow-soft); } .metric-card.featured::after { content: ""; position: absolute; width: 160px; height: 160px; border-radius: 50%; right: 0; bottom: -85px; background: var(--fp-action); filter: blur(45px); opacity: .1; } .metric-card.featured .card-label, .metric-card.featured .account-strip { color: var(--fp-muted); } .metric-card.featured .account-strip strong { color: var(--fp-ink); } .metric-card.featured .forecast-details-link { color: var(--fp-action); } .metric-card:nth-child(2) { border-color: var(--fp-ink); background: var(--fp-action); color: var(--fp-on-action); } .metric-card:nth-child(2) .card-label, .metric-card:nth-child(2) .delta span { color: color-mix(in srgb, var(--fp-on-action) 72%, transparent); } .metric-card:nth-child(2) .delta { color: var(--fp-accent) !important; } .metric-card[data-cash-position="cash-gap"] { min-height: 220px; border-color: color-mix(in srgb, var(--negative) 62%, var(--border)); } .metric-card[data-cash-position="cash-gap"]::after { background: var(--negative); opacity: .2; } .metric-card[data-cash-position="cash-gap"] .metric-value, .metric-card[data-cash-position="cash-gap"] .delta { color: var(--negative); } .metric-card[data-cash-position="balanced"] { border-color: var(--fp-ink); } .metric-card[data-cash-position="balanced"] .delta { color: var(--warning-text); } .metric-card[data-cash-position="unknown"] { border-color: var(--fp-ink); } .metric-card[data-cash-position="unknown"] .delta { color: var(--warning-text); } .card-label { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; font-weight: 700; } .ghost-icon { min-width: 32px; min-height: 32px; display: inline-grid; place-items: center; background: transparent; padding: 4px; color: var(--muted); border-radius: 9px; } .status-dot { width: 8px; height: 8px; border-radius: 50%; } .positive-bg { background: var(--positive); } .negative-bg { background: var(--negative); } .metric-value { display: block; margin-top: 19px; font-size: clamp(26px, 3vw, 36px); line-height: 1; letter-spacing: -.045em; white-space: nowrap; } .metric-value.masked { letter-spacing: .08em; } /* A client release must never show unfinished demo reports as accounting data. */ html[data-runtime-data-class="admitted-real"] .staging-badge, html[data-runtime-data-class="admitted-real"] [data-synthetic-copy], html[data-runtime-data-class="admitted-real"] .work-task-sync, html[data-runtime-data-class="admitted-real"] .metric-card:not(.featured) .delta, html[data-runtime-data-class="admitted-real"] .attention-card, html[data-runtime-data-class="admitted-real"] .owner-route, html[data-runtime-data-class="admitted-real"] [data-client-views~="reports"], html[data-runtime-data-class="admitted-real"] [data-client-views~="budgets"], html[data-runtime-data-class="admitted-real"] [data-client-views~="import"], html[data-runtime-data-class="admitted-real"] [data-client-views~="diagnostics"], html[data-runtime-data-class="admitted-real"] [data-section="reports"], html[data-runtime-data-class="admitted-real"] [data-section="budgets"], html[data-runtime-data-class="admitted-real"] [data-section="import"], html[data-runtime-data-class="admitted-real"] [data-section="diagnostics"] { display: none !important; } html[data-runtime-data-class="admitted-real"] .metric-card:not(.featured) .metric-value { white-space: normal; overflow-wrap: anywhere; font-size: clamp(16px, 1.65vw, 24px); } html[data-runtime-data-class="admitted-real"] .team-card { padding: clamp(16px, 2vw, 28px); } html[data-runtime-data-class="admitted-real"][data-theme="dark"] { --positive: color-mix(in srgb, var(--fp-action) 40%, var(--fp-on-panel)); } html[data-runtime-data-class="admitted-real"][data-theme="dark"] .dashboard-board .metric-card.featured .forecast-details-link, html[data-runtime-data-class="admitted-real"][data-theme="dark"] .operations-card a, html[data-runtime-data-class="admitted-real"][data-theme="dark"] .operations-card .positive { color: var(--positive); } .delta { margin: 12px 0 0; font-size: 12px; font-weight: 750; } .delta span { color: var(--muted); font-weight: 500; margin-left: 5px; } .positive { color: var(--positive) !important; } .negative { color: var(--negative) !important; } .account-strip { display: flex; justify-content: space-between; position: absolute; left: 23px; right: 23px; bottom: 20px; font-size: 11px; color: var(--muted); } .account-strip strong { color: var(--text); } .forecast-strip span { display: flex; align-items: baseline; gap: 5px; } .forecast-strip span:last-child { text-align: right; } .forecast-details-link { display: inline-flex; align-items: center; min-height: 36px; margin-top: 5px; color: var(--accent); font-size: 11px; font-weight: 750; } .forecast-details-link:hover { text-decoration: underline; } .metric-card[data-source-state="unavailable"] .metric-value, .metric-card[data-source-state="unavailable"] .account-strip strong { color: var(--muted); } .attention-card { margin-top: 16px; padding: 22px 24px; border-color: var(--fp-ink); background: var(--fp-surface); box-shadow: var(--fp-shadow-soft); } .attention-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; } .data-status { margin: 0; color: var(--muted); font-size: 11px; text-align: right; } .data-status[data-state="ready"] { color: var(--positive); } .data-status[data-state="partial"], .data-status[data-state="fallback"] { max-width: 340px; color: var(--warning-text); } .attention-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; } .attention-item { min-width: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 70px; padding: 12px; border: 1px solid var(--hard-line); border-radius: 14px; background: var(--accent-soft); color: var(--text); } .attention-item:hover { border-color: var(--hard-line); background: var(--surface-elevated); color: var(--text); } .attention-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); font-weight: 900; } .attention-icon.warning-icon { background: color-mix(in srgb, var(--warning-graphic) 14%, transparent); color: var(--warning-text); } .attention-item strong, .attention-item small { display: block; overflow-wrap: anywhere; } .attention-item strong { font-size: 12px; } .attention-item small { margin-top: 4px; color: var(--muted); font-size: 10px; } .attention-arrow { color: var(--muted); font-size: 18px; } .content-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .75fr); gap: 16px; margin-top: 16px; } .cashflow-card, .budget-card, .operations-card { padding: 23px; } .section-heading, .chart-summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; } .period-button { background: var(--surface-soft); border: 1px solid var(--border); border-radius: 10px; padding: 8px 11px; font-size: 11px; } .chart-summary { margin-top: 24px; } .chart-summary span { color: var(--muted); font-size: 11px; } .chart-summary strong { display: block; margin-top: 4px; font-size: 19px; } .legend { display: flex; gap: 15px; } .legend span { display: flex; align-items: center; gap: 6px; } .legend i { width: 8px; height: 8px; border-radius: 2px; } .income-key { background: var(--positive); }.expense-key { background: var(--info); } .chart { height: 214px; display: grid; grid-template-columns: 48px 1fr; margin-top: 17px; } .y-labels { display: flex; flex-direction: column; justify-content: space-between; padding: 1px 8px 21px 0; color: var(--muted); font-size: 9px; text-align: right; } .chart-area { position: relative; display: flex; align-items: end; justify-content: space-around; gap: 12px; padding: 0 10px 21px; } .grid-lines { position: absolute; inset: 0 0 21px; display: flex; flex-direction: column; justify-content: space-between; } .grid-lines i { border-top: 1px dashed var(--border); } .bar-group { position: relative; z-index: 1; height: 100%; flex: 1; display: flex; align-items: end; justify-content: center; gap: 4px; } .bar-group b, .bar-group em { width: min(15px, 32%); border-radius: 4px 4px 1px 1px; background: var(--positive); opacity: .55; } .bar-group em { background: var(--info); opacity: .7; } .bar-group.current b, .bar-group.current em { opacity: 1; } .bar-group span { position: absolute; bottom: -20px; color: var(--muted); font-size: 9px; } .budget-card { display: flex; flex-direction: column; border-color: var(--fp-product-panel); background: var(--fp-product-panel); color: var(--fp-on-panel); box-shadow: var(--fp-shadow-board); } .budget-card .eyebrow, .budget-card .budget-values span, .budget-card .warning-note small { color: color-mix(in srgb, var(--fp-on-panel) 64%, transparent); } .budget-card .budget-values > div { background: color-mix(in srgb, var(--fp-on-panel) 8%, transparent); } .budget-card .donut { background: conic-gradient(var(--fp-action) 0 67%, color-mix(in srgb, var(--fp-on-panel) 12%, transparent) 67% 100%); } .budget-card .donut::before { background: var(--fp-product-panel); } .budget-card .warning-note { background: color-mix(in srgb, var(--fp-accent) 13%, transparent); color: var(--fp-on-panel); } .donut { width: 150px; aspect-ratio: 1; margin: 25px auto 20px; padding: 15px; border-radius: 50%; background: conic-gradient(var(--accent) 0 67%, var(--surface-soft) 67% 100%); } .donut::before { content: ""; display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--surface); } .donut > div { position: absolute; margin: -91px 0 0 20px; width: 80px; text-align: center; } .donut strong, .donut span { display: block; }.donut strong { font-size: 25px; }.donut span { margin-top: 3px; color: var(--muted); font-size: 9px; } .budget-values { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .budget-values > div { padding: 12px; border-radius: 11px; background: var(--surface-soft); } .budget-values span, .budget-values strong { display: block; }.budget-values span { color: var(--muted); font-size: 9px; }.budget-values strong { margin-top: 5px; font-size: 12px; } .warning-note { display: flex; gap: 10px; align-items: center; margin-top: 14px; padding: 11px; border-radius: 11px; background: color-mix(in srgb, var(--warning-graphic) 11%, transparent); color: var(--warning-text); } .warning-note > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid currentColor; font-weight: 900; } .warning-note p { margin: 0; }.warning-note strong, .warning-note small { display: block; }.warning-note strong { font-size: 10px; }.warning-note small { margin-top: 3px; color: var(--muted); font-size: 9px; } .operations-card { margin-top: 16px; } .finance-card { margin-top: 16px; padding: 23px; } .finance-card[data-session-state="locked"] { border-style: dashed; } .call-auth-dialog { max-width: 490px; } .call-auth-boundary { padding: 12px 14px; border-radius: 12px; background: var(--surface-soft); color: var(--muted); font-size: 13px; line-height: 1.55; } .call-auth-progress { display: flex; align-items: flex-start; gap: 12px; min-height: 72px; padding: 16px 0; } .call-auth-progress p { margin: 0; font-size: 14px; line-height: 1.6; } .call-auth-indicator { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border-radius: 50%; color: var(--muted); background: var(--surface-soft); } .call-auth-dialog[data-state="confirmed"] .call-auth-indicator { background: var(--positive); color: var(--surface-elevated); } .call-auth-dialog[data-state="pending"] .call-auth-indicator { color: var(--accent); } .call-auth-dialog button[hidden] { display: none; } .call-auth-dialog .finance-field[hidden] { display: none; } #callAuthCode { max-width: 100%; letter-spacing: .35em; font-variant-numeric: tabular-nums; font-size: 24px; } .finance-heading { align-items: flex-start; } .finance-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .finance-primary-button { min-height: 40px; padding-inline: 16px; } .finance-primary-button:disabled { border: 1px solid var(--border); background: var(--surface-soft); color: var(--muted); opacity: 1; } .finance-status { margin: 14px 0 0; color: var(--muted); font-size: 12px; } .finance-card[data-session-state="ready"] .finance-status { color: var(--text); } .finance-analytics { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); } .fa-toolbar, .fa-directory-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .fa-directory { margin-left: auto; } .fa-directory summary { padding: 11px 4px; cursor: pointer; color: var(--muted); font-size: 12px; } .fa-directory-actions { padding: 8px 0; } .fa-filters, .fa-breakdowns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; } .fa-filter-note { font-size: 12px; color: var(--muted); } .fa-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0; } .fa-totals > div { padding: 14px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 12px; min-width: 0; } .fa-totals dt { font-size: 12px; color: var(--muted); } .fa-totals dd { margin: 8px 0 0; font-size: clamp(17px, 2.4vw, 25px); font-weight: 750; overflow-wrap: anywhere; } .fa-breakdowns > section { padding: 14px; border: 1px solid var(--border); border-radius: 12px; min-width: 0; } .finance-analytics h4 { margin: 0 0 12px; font-size: 14px; } .fa-group { display: block; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--border); padding: 12px 0; background: transparent; color: inherit; cursor: pointer; } .fa-group strong, .fa-group span { display: block; overflow-wrap: anywhere; } .fa-group span { margin-top: 5px; color: var(--muted); font-size: 12px; } .fa-journal { margin-top: 22px; } .fa-entry { border-bottom: 1px solid var(--border); padding: 6px 0; } .fa-entry summary { display: flex; justify-content: space-between; gap: 12px; cursor: pointer; padding: 10px 2px; } .fa-entry summary > span { min-width: 0; overflow-wrap: anywhere; } .fa-entry summary small { display: block; margin-top: 5px; color: var(--muted); } .fa-entry summary > strong { white-space: nowrap; font-size: 14px; } .fa-entry dl { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(0, 2fr); gap: 7px 14px; font-size: 12px; padding: 6px 2px 14px; } .fa-entry dt { color: var(--muted); } .fa-entry dd { margin: 0; overflow-wrap: anywhere; } .fa-movements { padding-left: 20px; margin: 10px 0 16px; } .fa-movements li { padding: 7px 0; font-size: 12px; } .fa-movements strong, .fa-movements span { display: block; overflow-wrap: anywhere; } .fa-movements span { margin-top: 4px; color: var(--muted); } .fa-form-dialog { width: min(540px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow: auto; } .fa-form-dialog .finance-form-note { margin: 4px 0; } .fa-form-dialog select, .fa-form-dialog input { max-width: 100%; } .finance-analytics :is(button, summary), .fa-form-dialog button { transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease; } .finance-analytics :is(button, summary):hover:not(:disabled) { background-color: var(--surface-soft); } .finance-analytics :is(button, summary):active:not(:disabled) { border-color: var(--accent); } .finance-analytics :is(button, summary, select):focus-visible, .fa-form-dialog :is(button, select, input):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .finance-analytics button:disabled { cursor: not-allowed; opacity: .65; } @media (max-width: 620px) { .fa-filters, .fa-breakdowns { grid-template-columns: minmax(0, 1fr); } .fa-directory { margin-left: 0; width: 100%; } .fa-totals { grid-template-columns: minmax(0, 1fr); gap: 6px; } .fa-totals > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 12px; } .fa-totals dd { margin: 0; font-size: 20px; } .fa-entry summary { flex-wrap: wrap; } } @media (prefers-reduced-motion: reduce) { .finance-analytics :is(button, summary), .fa-form-dialog button { transition: none; } } html[data-motion="reduced"] .finance-analytics :is(button, summary), html[data-motion="reduced"] .fa-form-dialog button { transition: none; } .finance-account-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; } .finance-account-list > .widget-state-note { grid-column: 1 / -1; } .finance-account { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); } .finance-account strong, .finance-account span { display: block; overflow-wrap: anywhere; } .finance-account strong { font-size: 12px; } .finance-account span { margin-top: 4px; color: var(--muted); font-size: 10px; } .finance-account > strong { flex: 0 0 auto; text-align: right; } .identity-audit { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); } .identity-audit-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .identity-audit-heading h3 { margin: 3px 0 0; font-size: 17px; } .identity-audit-status { margin: 11px 0 0; color: var(--muted); font-size: 11px; } .identity-audit-list { display: grid; gap: 8px; margin-top: 12px; } .identity-audit-event { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--accent) 5%, var(--surface-soft)); } .identity-audit-event strong, .identity-audit-event span, .identity-audit-event time { display: block; overflow-wrap: anywhere; } .identity-audit-event strong { font-size: 12px; } .identity-audit-event span, .identity-audit-event time { margin-top: 4px; color: var(--muted); font-size: 10px; } .identity-audit-event time { margin-top: 0; text-align: right; white-space: nowrap; } .finance-dialog { width: min(520px, calc(100vw - 32px)); max-height: min(720px, calc(100vh - 32px)); margin: auto; padding: 0; overflow: auto; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-elevated); color: var(--text); box-shadow: var(--shadow); } .finance-dialog::backdrop { background: color-mix(in srgb, var(--fp-ink) 72%, transparent); backdrop-filter: blur(4px); } .finance-form { display: grid; gap: 14px; padding: 22px; } .dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .dialog-heading h2 { margin-top: 4px; } .dialog-close { flex: 0 0 auto; font-size: 20px; } .finance-field { display: grid; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 750; } .finance-field input, .finance-field select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; outline: 0; background: var(--surface-soft); color: var(--text); font: inherit; font-size: 13px; } .finance-field input:focus-visible, .finance-field select:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent); } .finance-transfer-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .finance-transfer-fields[hidden], .finance-field[hidden] { display: none; } .finance-form-note, .finance-form-error { margin: 0; font-size: 11px; line-height: 1.5; } .finance-form-note { color: var(--muted); } .reversal-warning { padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--negative) 32%, var(--border)); border-radius: 10px; background: color-mix(in srgb, var(--negative) 8%, transparent); color: var(--text); } .finance-form-error { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--negative) 12%, transparent); color: var(--negative); } .finance-form-error[hidden] { display: none; } .dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 2px; } .upcoming-obligations-card { margin-top: 16px; padding: 23px; } .upcoming-obligations-note { margin: 14px 0 0; color: var(--muted); font-size: 12px; } .upcoming-obligations-rows { margin-top: 14px; } .upcoming-obligation-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--border); } .upcoming-obligation-details { min-width: 0; } .upcoming-obligation-details strong, .upcoming-obligation-details span { display: block; overflow-wrap: anywhere; } .upcoming-obligation-details strong, .upcoming-obligation-row > strong { font-size: 12px; } .upcoming-obligation-details span { margin-top: 4px; color: var(--muted); font-size: 10px; } .upcoming-obligation-row > strong { text-align: right; white-space: nowrap; } .construction-card { margin-top: 16px; padding: 23px; } .construction-status { margin: 14px 0 0; color: var(--muted); font-size: 12px; } .construction-tabs { display: flex; gap: 6px; margin-top: 16px; padding: 5px; overflow-x: auto; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-soft); } .construction-tabs button { min-height: 38px; padding: 0 14px; flex: 0 0 auto; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 800; } .construction-tabs button[aria-selected="true"] { border-color: var(--hard-line); background: var(--surface-elevated); color: var(--text); box-shadow: inset 0 -3px var(--accent); } .construction-action-status { margin: 10px 0 0; padding: 9px 12px; border-radius: 9px; background: var(--surface-soft); color: var(--muted); font-size: 10px; } .construction-review-action { min-height: 34px; padding: 0 12px; border: 1px solid var(--hard-line); border-radius: 8px; background: var(--inverse); color: var(--inverse-text); font: inherit; font-size: 10px; font-weight: 800; } .construction-review-action:disabled { border-color: var(--border); background: var(--surface-soft); color: var(--muted); } .construction-tabs button:focus-visible, .construction-source-button:focus-visible, .construction-journey button:focus-visible, .construction-field-action:focus-visible, .construction-review-action:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 60%, white); outline-offset: 2px; } .construction-panel { margin-top: 14px; } .construction-panel[hidden] { display: none; } .team-card { grid-column: 1 / -1; } .team-heading { align-items: flex-start; } .team-card .work-handoff-heading { margin-top: 18px; } .team-access { margin-top: 16px; padding: 18px; border: 1px solid var(--border); border-radius: 15px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 7%, var(--surface-soft)), var(--surface-soft)); } .team-access[hidden] { display: none; } .team-access-heading, .team-roster-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .team-access-heading h3, .team-roster-heading h3, .team-access-preview h3 { margin: 3px 0 0; font-size: 17px; } .team-access-heading > span, .team-roster-heading > span { padding: 5px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); font-size: 9px; font-weight: 800; } .team-access-layout { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr); gap: 14px; margin-top: 14px; } .team-access-form, .team-access-preview { min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-elevated); } .team-access-form { display: grid; gap: 11px; } .team-access-form > label, .team-access-form legend { color: var(--muted); font-size: 10px; font-weight: 800; } .team-access-form > label { display: grid; gap: 6px; } .team-access-form select { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-elevated); color: var(--text); font: inherit; } .team-access-form fieldset { min-width: 0; margin: 0; padding: 11px; border: 1px solid var(--border); border-radius: 9px; } .team-access-modules { display: grid; gap: 8px; margin-top: 8px; } .team-access-modules label { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 10px; font-weight: 700; } .team-access-buttons { display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; } .team-access-buttons button { min-height: 44px; } .team-access-buttons #teamAccessCancel { grid-column: 1 / -1; } .team-access-preview > p { margin: 10px 0; color: var(--muted); font-size: 10px; line-height: 1.5; } .team-access-preview-result { display: grid; gap: 8px; } .team-access-summary { padding: 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); } .team-access-summary.allowed { border-left: 4px solid var(--positive); }.team-access-summary.denied { border-left: 4px solid var(--negative); }.team-access-summary.neutral { border-left: 4px solid var(--accent); } .team-access-summary strong { font-size: 11px; }.team-access-summary ul { margin: 7px 0 0; padding-left: 17px; color: var(--muted); font-size: 10px; line-height: 1.55; } .team-roster-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; } .team-roster-layout > section { min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-elevated); } .team-roster { display: grid; gap: 8px; margin-top: 10px; } .team-person { padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); } .team-person[data-status="revoked"] { opacity: .64; }.team-person h4 { margin: 0; font-size: 12px; }.team-person p { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; } .team-person-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }.team-person-actions button { min-height: 36px; padding: 0 10px; border: 1px solid var(--hard-line); border-radius: 8px; background: var(--inverse); color: var(--inverse-text); font-size: 9px; font-weight: 800; } .construction-metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .construction-source-button { min-width: 0; padding: 14px; border: 1px solid var(--border); border-left: 5px solid var(--accent); border-radius: 12px; background: var(--surface-elevated); color: var(--text); text-align: left; } .construction-source-button span, .construction-source-button strong, .construction-source-button small { display: block; overflow-wrap: anywhere; } .construction-source-button span { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; } .construction-source-button strong { margin-top: 9px; font-size: clamp(18px, 2vw, 25px); } .construction-source-button small { margin-top: 7px; color: var(--accent); font-size: 9px; } .construction-provenance { margin-top: 10px; padding: 11px 13px; border: 1px dashed var(--border); border-radius: 10px; color: var(--muted); font-size: 11px; } .command-center-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }.command-center-heading h3 { margin: 3px 0 0; font-size: 18px; }.command-center-heading > span { color: var(--muted); font-size: 10px; } .command-center-pulse { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 14px; }.command-center-pulse article { padding: 14px; border: 1px solid var(--hard-line); border-radius: 12px; background: var(--inverse); color: var(--inverse-text); }.command-center-pulse span, .command-center-pulse strong { display: block; }.command-center-pulse span { font-size: 9px; opacity: .72; }.command-center-pulse strong { margin-top: 7px; font-size: 18px; } .command-center-columns { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 10px; margin-top: 14px; }.command-center-columns > section { min-width: 0; padding: 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); }.command-center-list { display: grid; gap: 8px; margin-top: 9px; }.command-center-item { padding: 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-elevated); }.command-center-item strong, .command-center-item span, .command-center-item small { display: block; overflow-wrap: anywhere; }.command-center-item strong { font-size: 11px; }.command-center-item span { margin-top: 5px; color: var(--muted); font-size: 9px; }.command-center-item small { margin-top: 7px; color: var(--accent); font-size: 9px; font-weight: 800; } .sync-center-body { min-width: 0; background: var(--page); color: var(--text); }.sync-center-page { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 56px; }.sync-center-top, .sync-center-hero, .sync-last, .sync-row, .sync-row > div { display: flex; align-items: center; }.sync-center-top { justify-content: space-between; margin-bottom: 20px; }.sync-center-top .brand { position: static; }.sync-online { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; }.sync-online i { width: 9px; height: 9px; border-radius: 50%; background: var(--positive); }.sync-center-hero { justify-content: space-between; gap: 24px; padding: 28px; }.sync-center-hero h1 { margin: 5px 0 0; font-size: clamp(30px, 5vw, 54px); }.sync-center-hero > div > p:last-child { max-width: 620px; margin: 10px 0 0; color: var(--muted); }.sync-last { flex-direction: column; align-items: flex-end; color: var(--muted); font-size: 11px; }.sync-last strong { margin-top: 6px; color: var(--text); font-size: 14px; }.sync-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }.sync-summary article { padding: 18px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-elevated); }.sync-summary span, .sync-summary strong { display: block; }.sync-summary span { color: var(--muted); font-size: 10px; }.sync-summary strong { margin-top: 10px; font-size: 30px; }.sync-truth { margin: 12px 0; padding: 13px 16px; border: 1px solid var(--warning); border-radius: 11px; color: var(--warning-text); font-weight: 800; }.sync-queue { padding: 24px; }.sync-row { display: grid; grid-template-columns: minmax(180px, 1.2fr) minmax(160px, .8fr) minmax(220px, 1.4fr) auto; gap: 12px; margin-top: 9px; padding: 14px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-soft); }.sync-row > * { min-width: 0; overflow-wrap: anywhere; }.sync-row .sync-kind { font-weight: 800; }.sync-row strong { color: var(--accent); font-size: 12px; }.sync-row small { color: var(--muted); }.sync-row button { min-height: 36px; padding: 0 12px; border: 1px solid var(--hard-line); border-radius: 8px; background: var(--surface-elevated); color: var(--text); font-weight: 800; }.sync-row-conflict strong { color: var(--warning-text); }.sync-receipt { color: var(--positive); font-size: 10px; font-weight: 800; }.sync-conflict-detail { margin-top: 12px; padding: 24px; }.sync-conflict-detail > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.sync-conflict-detail span { padding: 14px; border: 1px solid var(--border); border-radius: 10px; }.sync-conflict-detail span strong { display: block; margin-top: 8px; }.sync-conflict-detail > p:last-child, .sync-boundary { color: var(--muted); line-height: 1.6; }.sync-boundary { margin: 16px 0 0; font-size: 11px; } .construction-journeys-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-top: 20px; } .construction-journeys-heading h3 { margin: 3px 0 0; font-size: 17px; } .construction-journeys-heading > span { color: var(--muted); font-size: 10px; } .construction-journey-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 10px; } .construction-journey { display: grid; align-content: space-between; min-width: 0; min-height: 142px; padding: 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-soft); } .construction-journey strong, .construction-journey small { display: block; overflow-wrap: anywhere; } .construction-journey strong { font-size: 11px; line-height: 1.4; }.construction-journey small { margin-top: 6px; color: var(--muted); font-size: 9px; } .construction-journey button { min-height: 34px; margin-top: 10px; padding: 0 10px; border: 1px solid var(--hard-line); border-radius: 8px; background: var(--inverse); color: var(--inverse-text); font-size: 9px; font-weight: 800; } .construction-journey[data-status="completed"] { border-color: color-mix(in srgb, var(--positive) 55%, var(--border)); }.construction-journey[data-status="completed"] button { background: var(--surface-elevated); color: var(--positive); } .construction-receipt-status, .construction-boundary-note { margin: 10px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; } .construction-golden { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; margin-top: 16px; padding: 15px; border: 1px solid var(--hard-line); border-left: 5px solid var(--accent); border-radius: 12px; background: var(--surface-elevated); }.construction-golden h3 { margin: 3px 0 0; font-size: 16px; }.construction-golden > div > p:last-child { max-width: 680px; margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }.construction-golden button { min-height: 40px; padding: 0 14px; border: 1px solid var(--hard-line); border-radius: 9px; background: var(--inverse); color: var(--inverse-text); font-size: 10px; font-weight: 800; }.construction-golden button:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 60%, white); outline-offset: 2px; }.construction-golden > p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 10px; }.construction-golden dl { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 2px 0 0; }.construction-golden dl div { min-width: 0; padding: 9px; border: 1px solid var(--border); border-radius: 8px; }.construction-golden dt { color: var(--muted); font-size: 8px; }.construction-golden dd { margin: 4px 0 0; overflow-wrap: anywhere; font-size: 11px; font-weight: 800; } .construction-review-list { display: grid; gap: 8px; }.construction-review-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-soft); }.construction-review-item > span { padding: 4px 7px; border-radius: 7px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); font-size: 9px; font-weight: 800; }.construction-review-item strong, .construction-review-item small { display: block; overflow-wrap: anywhere; }.construction-review-item strong { font-size: 11px; }.construction-review-item small { margin-top: 4px; color: var(--muted); font-size: 9px; }.construction-review-item > b { color: var(--positive); font-size: 9px; } .construction-field-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }.construction-field-action { min-height: 112px; padding: 14px; border: 1px solid var(--hard-line); border-radius: 12px; background: var(--surface-elevated); color: var(--text); text-align: left; }.construction-field-action strong, .construction-field-action span, .construction-field-action small { display: block; overflow-wrap: anywhere; }.construction-field-action strong { font-size: 13px; }.construction-field-action span { margin-top: 9px; color: var(--muted); font-size: 10px; }.construction-field-action small { margin-top: 12px; color: var(--accent); font-size: 9px; font-weight: 800; } .construction-state-gallery { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }.construction-state-gallery span { padding: 8px; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); font-size: 9px; text-align: center; }.construction-state-gallery [data-state="error"],.construction-state-gallery [data-state="denied"] { color: var(--negative); }.construction-state-gallery [data-state="conflict"],.construction-state-gallery [data-state="suspended"] { color: var(--warning-text); } .construction-layout { display: grid; grid-template-columns: minmax(190px, .72fr) minmax(0, 1.6fr); gap: 14px; margin-top: 14px; } .construction-project-list { display: grid; align-content: start; gap: 8px; } .construction-project-button { width: 100%; min-height: 58px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); color: var(--text); text-align: left; } .construction-project-button strong, .construction-project-button span { display: block; overflow-wrap: anywhere; } .construction-project-button strong { font-size: 12px; } .construction-project-button span { margin-top: 5px; color: var(--muted); font-size: 10px; } .construction-project-button[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 4px 0 var(--accent); background: var(--surface-elevated); } .construction-detail { min-width: 0; padding: 15px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); } .construction-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .construction-detail-heading h3 { margin: 3px 0 0; font-size: 17px; } .construction-state { flex: 0 0 auto; padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--positive) 45%, var(--border)); border-radius: 999px; color: var(--positive); font-size: 9px; font-weight: 800; text-transform: uppercase; } .work-handoff-heading, .work-handoff-board-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }.work-handoff-heading h3, .work-handoff-board-title h3, .work-handoff-form h3 { margin: 3px 0 0; font-size: 17px; } .work-handoff-actors { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }.work-handoff-actors button { min-height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); color: var(--muted); font-size: 10px; font-weight: 800; }.work-handoff-actors button[aria-pressed="true"] { border-color: var(--accent); background: var(--inverse); color: var(--inverse-text); } .work-handoff-layout { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); gap: 14px; margin-top: 14px; }.work-handoff-form, .work-handoff-board { min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-soft); }.work-handoff-form { display: grid; align-content: start; gap: 12px; }.work-handoff-form label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 800; }.work-handoff-form input, .work-handoff-form select, .work-handoff-form textarea, .work-handoff-result, .work-handoff-evidence { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-elevated); color: var(--text); font: inherit; }.work-handoff-form textarea, .work-handoff-result, .work-handoff-evidence { resize: vertical; }.work-handoff-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.work-handoff-form button { min-height: 44px; } .work-handoff-form[hidden] { display: none; } .work-handoff-form[hidden] + .work-handoff-board { grid-column: 1 / -1; }.work-handoff-form[hidden] + .work-handoff-board .work-handoff-list { grid-template-columns: minmax(0, 640px); } .work-handoff-board-title > span { padding: 5px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); font-size: 9px; font-weight: 800; }.work-handoff-status { margin: 10px 0; color: var(--muted); font-size: 10px; line-height: 1.5; }.work-handoff-list { display: grid; gap: 9px; }.work-order { padding: 13px; border: 1px solid var(--border); border-left: 5px solid var(--accent); border-radius: 11px; background: var(--surface-elevated); }.work-order[data-status="completed"], .work-order[data-status="confirmed"] { border-left-color: var(--positive); }.work-order-heading { display: flex; justify-content: space-between; gap: 10px; }.work-order h4 { margin: 0; font-size: 13px; }.work-order-state { flex: 0 0 auto; color: var(--accent); font-size: 9px; font-weight: 800; }.work-order-meta, .work-order-result, .work-order-evidence { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }.work-order-result, .work-order-evidence { padding: 8px; border-radius: 8px; background: color-mix(in srgb, var(--positive) 10%, transparent); color: var(--text); }.work-order-checklist { display: grid; gap: 6px; margin: 9px 0 0; padding: 0; list-style: none; }.work-order-checklist label, .work-order-checklist li { display: flex; align-items: center; gap: 7px; color: var(--text); font-size: 10px; }.work-order-checklist input { inline-size: 16px; block-size: 16px; accent-color: var(--positive); }.work-order-actions { display: grid; gap: 7px; margin-top: 10px; }.work-order-actions button { min-height: 40px; border: 1px solid var(--hard-line); border-radius: 9px; background: var(--inverse); color: var(--inverse-text); font-size: 10px; font-weight: 800; }.work-handoff-empty { padding: 28px 16px; border: 1px dashed var(--border); border-radius: 11px; color: var(--muted); font-size: 11px; text-align: center; } .work-task-sync { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 10px; }.work-task-sync span { padding: 5px 8px; border-radius: 999px; background: var(--surface-elevated); color: var(--muted); font-size: 9px; font-weight: 800; }.work-task-sync [data-state="offline"], .work-task-sync [data-state="conflict"] { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--text); }.work-task-sync button { min-height: 34px; margin-left: auto; padding: 0 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-elevated); color: var(--text); font-size: 9px; font-weight: 800; }.work-task-sync button:disabled { opacity: .5; cursor: default; } .construction-stage-list { margin-top: 13px; } .material-supply { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); } .material-supply-content { display: grid; gap: 12px; } .material-supply-request { min-width: 0; padding: 13px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-elevated); overflow-wrap: anywhere; } .material-supply-request h4 { margin: 0; font-size: 13px; } .material-supply summary { padding: 10px 2px; cursor: pointer; font-size: 12px; } .material-supply-form { margin-top: 10px; padding: 12px; } .material-supply .secondary-button { min-height: 42px; padding: 9px 13px; border: 1px solid var(--hard-line); border-radius: 9px; background: var(--inverse); color: var(--inverse-text); font: inherit; font-size: 11px; font-weight: 700; white-space: normal; } .material-supply :is(button, input, select, textarea, summary) { transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease; } .material-supply :is(button, summary):hover:not(:disabled) { border-color: var(--accent); } .material-supply button:active:not(:disabled) { transform: translateY(1px); } .material-supply :is(button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .material-supply :disabled { opacity: .6; cursor: not-allowed; } @media (prefers-reduced-motion: reduce) { .material-supply :is(button, input, select, textarea, summary) { transition: none; } } .construction-stage { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); } .construction-stage strong, .construction-stage span { font-size: 11px; } .construction-stage span { color: var(--muted); } .construction-card[data-source-state="unavailable"] .construction-status { color: var(--warning-text); } .widget-state-note { margin: 14px 0 0; color: var(--muted); font-size: 12px; } [data-source-state="unavailable"] .widget-state-note, [data-source-state="unavailable"] .upcoming-obligations-note { color: var(--warning-text); } .import-preview-card { margin-top: 16px; } .import-preview-button { min-height: 40px; padding: 0 16px; } .import-preview-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .import-preview-button { display: inline-flex; align-items: center; cursor: pointer; } .visually-hidden:focus-visible + .import-preview-button { outline: 3px solid var(--accent); outline-offset: 3px; } .import-confirm-button { margin-top: 14px; } .import-confirmation-receipt[hidden] { display: none; } .import-confirmation-receipt { margin-top: 14px; padding: 14px; border: 1px solid color-mix(in srgb, var(--positive) 45%, var(--border)); border-radius: 12px; background: color-mix(in srgb, var(--positive) 8%, var(--surface)); } .import-confirmation-receipt > strong { display: block; margin-top: 5px; font-size: 14px; } .import-confirmation-receipt > p:last-child { margin: 10px 0 0; color: var(--muted); font-size: 11px; } .import-receipt-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; } .import-receipt-details span, .import-receipt-details strong { display: block; font-size: 11px; } .import-receipt-details span { color: var(--muted); } .import-receipt-details strong { margin-top: 4px; color: var(--text); overflow-wrap: anywhere; } .import-preview-warning { margin: 14px 0 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--warning) 55%, var(--border)); border-radius: 10px; color: var(--warning-text); font-size: 12px; } .import-preview-note { margin: 14px 0 0; color: var(--muted); font-size: 12px; } .import-preview-rows { margin-top: 14px; } .import-preview-row { display: grid; grid-template-columns: minmax(180px, 1fr) 110px auto; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--border); } .import-preview-row strong, .import-preview-row span { font-size: 12px; } .import-preview-row span { color: var(--muted); } .import-preview-row > strong:last-child { text-align: right; } .import-preview-row-duplicate > strong:last-child { color: var(--warning); } .import-preview-row-error > strong:last-child { color: var(--negative); } .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .section-heading a { color: var(--accent); font-size: 12px; font-weight: 750; } #overview, #availableCard, #reports, #budgets, #operations, #upcoming-obligations, #owner-validation, #construction, #team { scroll-margin-top: 110px; } .operation-list { margin-top: 16px; } .operation { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--border); } .op-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--surface-soft); color: var(--muted); } .operation > div { min-width: 0; }.operation strong, .operation small { display: block; }.operation strong { font-size: 12px; }.operation small { margin-top: 4px; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }.operation > strong { font-size: 13px; } .bottom-nav, .mobile-add { display: none; } .theme-tools { position: fixed; right: 18px; bottom: 18px; display: flex; gap: 6px; padding: 6px; border: 1px solid color-mix(in srgb, var(--fp-on-panel) 14%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--fp-product-panel) 94%, transparent); color: var(--fp-on-panel); backdrop-filter: blur(14px); z-index: 50; box-shadow: var(--fp-shadow-board); } .theme-tools button { width: 32px; height: 32px; border-radius: 9px; background: transparent; color: var(--fp-on-panel); } .theme-tools button:hover, .theme-tools button[aria-pressed="true"] { background: var(--fp-action); color: var(--fp-on-action); } .toast { position: fixed; left: 50%; bottom: 24px; z-index: 70; max-width: min(360px, calc(100vw - 32px)); padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-elevated); color: var(--text); box-shadow: var(--shadow); font-size: 12px; font-weight: 700; opacity: 0; pointer-events: none; transform: translate(-50%, 14px); transition: opacity .18s ease, transform .18s ease; } .toast.visible { opacity: 1; transform: translate(-50%, 0); } .operation.demo-operation { animation: demo-in .22s ease-out; } .metric-carousel-instructions { display: none; } @keyframes demo-in { from { opacity: 0; transform: translateY(-6px); } } html[data-density="compact"] { --space: 16px; }.app-shell { transition: background .2s ease, color .2s ease; } html[data-contrast="high"] { --border: currentColor; --muted: var(--text); } html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } } @media (max-width: 1040px) { :root { --sidebar: 86px; } .sidebar { padding-inline: 12px; } .brand { justify-content: center; }.brand > span:last-child, .nav-item:not(.active) { font-size: 0; }.nav-item { justify-content: center; padding-inline: 0; }.nav-item span { font-size: 18px; } .nav-section > p, .workspace-card > span:not(.workspace-avatar), .workspace-card > span:nth-child(2), .profile > span:nth-child(2), .profile .icon-button, .nav-item-soon small { display: none; } .workspace-card { display: grid; place-items: center; padding: 9px; }.profile { display: grid; place-items: center; grid-template-columns: 1fr; } .metric-grid { grid-template-columns: repeat(2, 1fr); }.metric-card.featured { grid-column: 1 / -1; } .content-grid { grid-template-columns: 1fr; }.budget-card { display: grid; grid-template-columns: 1fr 180px 1fr; align-items: center; column-gap: 22px; }.budget-card .section-heading { align-self: start; }.budget-card .warning-note { grid-column: 3; }.budget-card .budget-values { grid-column: 3; grid-row: 1; margin-top: 36px; } } @media (max-width: 760px) { :root { --radius: 16px; } .sidebar { display: none; } .main { margin-left: 0; padding: 24px 16px 108px; } .mobile-brand { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px; font-size: 18px; font-weight: 760; letter-spacing: -.02em; } .mobile-brand-mark { width: 34px; height: 34px; display: block; border: 0; border-radius: 0; background: transparent center / contain no-repeat url("/assets/brand/finpult-mark-light.svg"); transform: none; } html[data-theme="dark"] .mobile-brand-mark { background-image: url("/assets/brand/finpult-mark-dark.svg"); } .topbar { margin-bottom: 24px; }.topbar h1 { font-size: 34px; padding-right: 52px; }.topbar .eyebrow, .subtitle { display: none; }.top-actions .notification, .primary-button { display: none; } .metric-carousel-instructions { display: block; margin: -14px 0 10px; color: var(--muted); font-size: 11px; line-height: 1.45; } .metric-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: -16px; padding-inline: 16px; border-radius: var(--radius); scrollbar-width: none; }.metric-grid:focus-visible { outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 72%, white); }.metric-grid::-webkit-scrollbar { display: none; }.metric-card, .metric-card.featured { min-width: min(88vw, 330px); min-height: 174px; scroll-snap-align: start; }.metric-card.featured { min-height: 230px; }.metric-card.featured::after { right: 0; }.metric-card.featured[data-cash-position="cash-gap"] { min-height: 242px; }.metric-card.featured .card-label > span { min-width: 0; overflow-wrap: anywhere; }.metric-card.featured .forecast-details-link { max-width: calc(100% - 42px); line-height: 1.35; }.metric-card.featured .forecast-strip span { min-width: 0; flex-wrap: wrap; }.metric-card.featured .forecast-strip span:last-child { justify-content: flex-end; } .attention-card { margin-top: 12px; padding: 18px; }.attention-heading { display: block; }.data-status { margin-top: 8px; text-align: left; }.attention-grid { grid-template-columns: 1fr; }.attention-item { min-height: 66px; } .content-grid { display: block; }.cashflow-card, .budget-card, .operations-card { margin-top: 12px; padding: 18px; }.cashflow-card { margin-top: 16px; }.chart { height: 190px; }.chart-summary { align-items: flex-end; }.legend { display: grid; gap: 4px; } .upcoming-obligations-card { margin-top: 12px; padding: 18px; }.upcoming-obligation-row { grid-template-columns: 1fr auto; gap: 12px; } .finance-card { margin-top: 12px; padding: 18px; }.finance-heading { display: block; }.finance-actions { justify-content: flex-start; margin-top: 14px; }.finance-primary-button { display: inline-flex; align-items: center; }.finance-account-list { grid-template-columns: 1fr; }.finance-account { align-items: flex-start; }.identity-audit-heading { display: block; }.identity-audit-heading button { margin-top: 12px; }.identity-audit-event { grid-template-columns: 1fr; gap: 8px; }.identity-audit-event time { text-align: left; }.finance-dialog { width: calc(100vw - 20px); max-height: calc(100vh - 20px); border-radius: 16px; }.finance-form { padding: 18px; }.finance-transfer-fields { grid-template-columns: 1fr; }.dialog-actions { justify-content: stretch; }.dialog-actions > button { flex: 1 1 180px; } .work-handoff-form .primary-button { display: inline-flex; align-items: center; justify-content: center; width: 100%; } .team-access-buttons .primary-button { display: inline-flex; align-items: center; justify-content: center; width: 100%; } .import-preview-card { margin-top: 12px; padding: 18px; }.import-preview-card .section-heading { align-items: flex-start; flex-wrap: wrap; }.import-preview-actions { width: 100%; justify-content: flex-start; }.import-preview-card .import-preview-button, .import-preview-card .import-confirm-button { display: inline-flex; align-items: center; padding-inline: 12px; }.import-preview-row { grid-template-columns: 1fr auto; gap: 6px 12px; }.import-preview-row span { grid-column: 1; }.import-preview-row > strong:last-child { grid-column: 2; grid-row: 1 / span 2; } .import-receipt-details { grid-template-columns: 1fr; } .budget-card { display: block; }.donut { width: 144px; }.budget-values { margin-top: 0 !important; }.warning-note { margin-top: 12px; } .operation:nth-child(n+4) { display: none; }.operation { grid-template-columns: 36px 1fr auto; gap: 9px; }.operation > strong { font-size: 12px; }.operation small { max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bottom-nav { position: fixed; inset: auto 0 0; height: 74px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; padding: 8px 12px max(8px, env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--fp-surface) 96%, transparent); border-top: 2px solid var(--fp-ink); backdrop-filter: blur(18px); z-index: 40; } .bottom-nav a, .bottom-nav > span { display: grid; justify-items: center; gap: 4px; color: var(--fp-muted); font-size: 9px; font-weight: 700; }.bottom-nav a span, .bottom-nav > span > span { font-size: 18px; }.bottom-nav a.active { color: var(--fp-action); }.bottom-nav-soon { position: relative; opacity: .62; }.bottom-nav-soon small { position: absolute; top: -2px; right: 2px; font-size: 7px; text-transform: uppercase; } .mobile-add { position: fixed; display: grid; place-items: center; right: 18px; bottom: 88px; width: 52px; height: 52px; border: 2px solid var(--fp-ink); border-radius: 16px; background: var(--fp-action); color: var(--fp-on-action); font-size: 27px; box-shadow: 0 12px 30px color-mix(in srgb, var(--fp-action) 34%, transparent); z-index: 45; } .theme-tools { position: absolute; top: 18px; right: 16px; bottom: auto; left: auto; } .theme-tools button:not(:first-child) { display: none; } .theme-tools #onboardingOpenButton { display: grid; } .onboarding-dialog { width: calc(100vw - 20px); max-height: calc(100vh - 20px); border-radius: 18px; } .onboarding-shell { padding: 18px; } .onboarding-heading h2 { font-size: 23px; } .onboarding-skip { min-height: 38px; padding-inline: 10px; font-size: 12px; } .onboarding-steps, .onboarding-step { min-height: 300px; } .onboarding-step { padding: 20px; } .onboarding-step h3 { font-size: 23px; } .onboarding-step p { font-size: 14px; } .onboarding-actions .primary-button { display: inline-flex; } .toast { bottom: 150px; } } /* UX-2.2 — выбранная система «Сигнальные грани»: одна high-fidelity доска для обеих тем. */ .app-shell { padding-top: 88px; } .sidebar { inset: 0 0 auto 0; width: auto; height: 88px; padding: 0 48px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-right: 0; border-bottom: 2px solid var(--hard-line); background: var(--canvas); color: var(--text); } .sidebar .brand { justify-self: start; padding: 0; color: var(--text); font-size: 22px; font-weight: 850; } .sidebar .brand-mark { width: 44px; height: 44px; flex-basis: 44px; border: 0; border-radius: 0; } .sidebar > .side-nav:not(.secondary) { display: flex; gap: 8px; justify-self: center; } .sidebar .nav-item { min-height: 44px; padding: 0 14px; border: 1px solid transparent; border-radius: 12px; color: var(--muted); } .sidebar .nav-item.active { border-color: var(--hard-line); background: var(--surface); color: var(--text); box-shadow: inset 0 -4px var(--accent); } .sidebar .nav-item:hover { background: var(--surface-soft); color: var(--text); } .sidebar .nav-section, .sidebar .side-nav.secondary { display: none; } .sidebar .profile { width: auto; max-width: 210px; justify-self: end; margin: 0; padding: 0; border: 0; color: var(--text); } .sidebar .profile-avatar { background: var(--inverse); color: var(--inverse-text); } .sidebar .profile .icon-button { background: var(--surface); color: var(--text); } .main { max-width: none; margin-left: 0; padding: 30px 48px 80px; } .card { border: var(--fp-quality-border); background: var(--surface); box-shadow: none; } .dashboard-board { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(310px, .42fr); column-gap: 18px; padding: 36px 38px 32px; overflow: hidden; border: 2px solid var(--hard-line); border-radius: 28px; background: var(--surface); box-shadow: none; } .board-lime-pin { position: absolute; top: 18px; right: 26px; width: 18px; height: 18px; border: 2px solid var(--hard-line); border-radius: 5px; background: var(--fp-accent); transform: rotate(9deg); z-index: 3; } .dashboard-board .topbar { position: relative; z-index: 2; grid-column: 1 / -1; align-items: flex-end; margin-bottom: 22px; } .dashboard-board .topbar > div:first-child { max-width: min(760px, 68%); } .dashboard-board .topbar h1 { max-width: 760px; font-size: clamp(42px, 4.5vw, 64px); line-height: .96; } .dashboard-board .topbar h1 span { color: var(--accent); } .dashboard-board .subtitle { max-width: 620px; font-size: 15px; line-height: 1.5; } .dashboard-board .top-actions { padding-bottom: 4px; } .owner-route { grid-column: 1 / -1; display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: stretch; gap: 14px; margin-bottom: 18px; } .owner-route > p { display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 13px 15px; border: 1px solid var(--hard-line); border-radius: 13px; background: var(--inverse); color: var(--inverse-text); } .owner-route > p span { color: color-mix(in srgb, var(--inverse-text) 64%, transparent); font-size: 9px; font-weight: 820; letter-spacing: .12em; text-transform: uppercase; } .owner-route > p strong { margin-top: 4px; font-size: 13px; line-height: 1.25; } .owner-route ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; } .owner-route li { min-width: 0; } .owner-route a { min-height: 62px; height: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-elevated); } .owner-route a:hover { border-color: var(--hard-line); background: var(--accent-soft); } .owner-route b { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 10px; } .owner-route small, .owner-route strong { display: block; overflow-wrap: anywhere; } .owner-route small { color: var(--muted); font-size: 9px; } .owner-route strong { margin-top: 3px; font-size: 11px; } .owner-route i { color: var(--muted); font-size: 15px; font-style: normal; } .owner-validation-card { margin-top: 16px; padding: 22px; } .owner-validation-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .owner-validation-heading h2 { margin-top: 4px; font-size: 22px; } .owner-validation-local { flex: 0 0 auto; padding: 7px 10px; border: 1px solid var(--hard-line); border-radius: 999px; color: var(--text); font-size: 9px; font-weight: 820; letter-spacing: .08em; text-transform: uppercase; } .owner-validation-note { max-width: 760px; margin: 9px 0 16px; color: var(--muted); font-size: 12px; line-height: 1.5; } .owner-validation-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; } .owner-validation-grid article { min-width: 0; padding: 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-elevated); } .owner-validation-grid span, .owner-validation-grid small { display: block; color: var(--muted); font-size: 9px; line-height: 1.35; } .owner-validation-grid strong { display: block; margin: 8px 0 5px; color: var(--text); font-size: 20px; overflow-wrap: anywhere; } .owner-validation-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; } .owner-validation-footer p { margin: 0; color: var(--muted); font-size: 10px; } .dashboard-board .metric-grid { grid-template-columns: 1.15fr .72fr .72fr; } .dashboard-board .metric-grid[data-owner-money-grid="true"] { grid-template-columns: 1.25fr repeat(3, minmax(0, .72fr)); } .money-medium { padding: 4px 7px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; } .period-summary { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(2, minmax(130px, .7fr)) auto; align-items: center; gap: 16px; margin: 0 0 16px; padding: 14px 18px; border: 1px solid var(--hard-line); border-radius: 14px; background: var(--inverse); color: var(--inverse-text); } .period-summary p { margin: 0; } .period-summary span, .period-summary small { display: block; color: color-mix(in srgb, var(--inverse-text) 65%, transparent); font-size: 9px; } .period-summary strong { display: block; margin-top: 3px; font-size: 15px; } .period-summary a { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 13px; border-radius: 10px; background: var(--accent); color: var(--fp-on-action); font-size: 10px; font-weight: 850; transition: filter 180ms ease, transform 180ms ease; } .period-summary a:hover { filter: brightness(.95); transform: translateY(-1px); } .hybrid-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dashboard-board .metric-card { min-height: 184px; border: 1px solid var(--border); border-left-width: 6px; border-radius: 14px; background: var(--surface-elevated); color: var(--text); } .dashboard-board .metric-card.signal-primary { border-left-color: var(--accent); } .dashboard-board .metric-card.signal-neutral { border-left-color: var(--text); } .dashboard-board .metric-card.signal-negative { border-left-color: var(--negative); } .dashboard-board .metric-card.signal-primary[data-cash-position="cash-gap"] { border-left-color: var(--negative); } .dashboard-board .metric-card.featured { background: var(--surface-elevated); box-shadow: none; } .dashboard-board .metric-card.featured::after { display: none; } html[data-theme="dark"] .dashboard-board .metric-card.featured { color: var(--text); } html[data-theme="dark"] .dashboard-board .metric-card.featured .card-label, html[data-theme="dark"] .dashboard-board .metric-card.featured .account-strip { color: var(--muted); } html[data-theme="dark"] .dashboard-board .metric-card.featured .account-strip strong { color: var(--text); } html[data-theme="dark"] .dashboard-board .metric-card.featured .forecast-details-link { color: var(--accent); } .dashboard-board .metric-card.signal-neutral .delta { color: var(--accent) !important; } .dashboard-board .metric-card.signal-neutral .delta span { color: var(--muted); } .dashboard-board .operations-card { margin-top: 0; padding: 20px; background: var(--surface-elevated); } .dashboard-board .operation-list { margin-top: 12px; } .dashboard-board .operation { min-height: 58px; padding-block: 10px; } .dashboard-board .operations-card .section-heading { align-items: flex-start; } .dashboard-board .operations-card .section-heading a { white-space: nowrap; } .dashboard-board .operations-card .operation { grid-template-columns: 38px minmax(0, 1fr); } .dashboard-board .operations-card .operation > strong { grid-column: 2; margin-top: -8px; } .attention-card { margin-top: 18px; } .content-grid { margin-top: 18px; } .cashflow-card, .budget-card, .attention-card, .upcoming-obligations-card, .finance-card, .import-preview-card { border-color: var(--hard-line); } .budget-card { background: var(--inverse); color: var(--inverse-text); } .budget-card .donut::before { background: var(--inverse); } .budget-card .eyebrow, .budget-card .budget-values span, .budget-card .donut span, .budget-card .warning-note small { color: color-mix(in srgb, var(--inverse-text) 78%, transparent); } .budget-card .budget-values > div { background: color-mix(in srgb, var(--inverse-text) 8%, transparent); } .budget-card .warning-note { color: var(--inverse-text); } .theme-tools { top: 20px; right: 226px; bottom: auto; border: 2px solid var(--hard-line); background: var(--surface-elevated); color: var(--text); box-shadow: none; } .theme-tools button { color: var(--text); } .theme-tools button:hover, .theme-tools button[aria-pressed="true"] { background: var(--inverse); color: var(--inverse-text); } .bottom-nav { border-color: var(--hard-line); } @media (max-width: 1040px) { .sidebar { padding-inline: 24px; grid-template-columns: auto 1fr; } .sidebar .brand { font-size: 19px; } .sidebar .brand > span:last-child { display: inline; font-size: inherit; } .sidebar > .side-nav:not(.secondary) { justify-self: end; margin-right: 64px; } .sidebar .nav-item { padding-inline: 10px; font-size: 12px; } .sidebar .nav-item:not(.active) { font-size: 12px; } .sidebar .nav-item:nth-child(n+3) { display: none; } .sidebar .profile { display: none; } .theme-tools { right: 18px; } .theme-tools button:not(:first-child) { display: none; } .main { padding-inline: 28px; } .dashboard-board { display: block; padding: 28px 26px; } .dashboard-board .topbar > div:first-child { max-width: 78%; } .dashboard-board .topbar h1 { font-size: 58px; } .dashboard-board .metric-grid { grid-template-columns: 1fr 1fr; } .dashboard-board .metric-card.featured { grid-column: 1 / -1; } .period-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .period-summary > a { width: 100%; } .hybrid-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .owner-route { display: grid; grid-template-columns: 150px minmax(0, 1fr); } .owner-validation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dashboard-board .content-grid { grid-template-columns: 1fr; } .construction-layout { grid-template-columns: 1fr; } .work-handoff-layout { grid-template-columns: 1fr; } .team-access-layout { grid-template-columns: 1fr; } .command-center-columns { grid-template-columns: 1fr; } .construction-journey-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .app-shell { padding-top: 0; } .sidebar { display: none; } .main { margin-left: 0; padding: 14px 14px 102px; } #overview, #availableCard, #reports, #budgets, #operations, #upcoming-obligations, #owner-validation, #construction, #team { scroll-margin-top: 16px; } .mobile-brand { display: inline-flex; min-height: 42px; margin: 0 0 10px; color: var(--text); font-size: 18px; font-weight: 850; } .mobile-brand-mark { border: 0; } .dashboard-board { display: block; padding: 20px 14px 18px; border-width: 2px; border-radius: 22px; box-shadow: none; } .board-lime-pin { top: 14px; right: 16px; width: 14px; height: 14px; border-width: 1px; border-radius: 4px; } .dashboard-board .topbar { display: block; margin-bottom: 18px; } .dashboard-board .topbar > div:first-child { max-width: none; } .dashboard-board .topbar .eyebrow { display: block; max-width: 250px; margin-bottom: 9px; padding-right: 0; font-size: 9px; } .dashboard-board .staging-badge { display: none; } .dashboard-board .topbar h1 { max-width: 330px; padding-right: 0; font-size: 36px; line-height: .96; } .dashboard-board .subtitle { display: none; } .dashboard-board .top-actions { display: none; } .owner-route { display: block; margin-bottom: 12px; } .owner-route > p { display: none; } .owner-route ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .owner-route a { min-height: 54px; display: flex; justify-content: center; padding: 8px 5px; text-align: center; } .owner-route a > b, .owner-route a > i, .owner-route small { display: none; } .owner-route strong { margin: 0; font-size: 12px; line-height: 1.25; } .metric-carousel-instructions { display: none; } .dashboard-board .metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; overflow: visible; } .dashboard-board .metric-card, .dashboard-board .metric-card.featured { min-width: 0; min-height: 138px; padding: 15px; border-left-width: 5px; border-radius: 12px; scroll-snap-align: none; } .dashboard-board .metric-card.featured { grid-column: 1 / -1; min-height: 210px; padding: 18px; } .dashboard-board .metric-card:not(.featured) .metric-value { margin-top: 18px; font-size: 21px; white-space: normal; } .dashboard-board .metric-card:not(.featured) .card-label { font-size: 9px; } .dashboard-board .metric-card:not(.featured) .delta { margin-top: 12px; font-size: 9px; } .dashboard-board .metric-card.featured .metric-value { font-size: 38px; } .period-summary { grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 10px; padding: 14px; } .period-summary > p:first-child, .period-summary > a { grid-column: 1 / -1; } .dashboard-board .operations-card { margin-top: 10px; padding: 15px; } .dashboard-board .operations-card .section-heading h2 { font-size: 16px; } .dashboard-board .operations-card .section-heading a { font-size: 9px; } .dashboard-board .operation:nth-child(n+3) { display: none; } .dashboard-board .operations-card .operation { grid-template-columns: 36px minmax(0, 1fr) auto; } .dashboard-board .operations-card .operation > strong { grid-column: auto; margin-top: 0; } .attention-card { margin-top: 12px; } .owner-validation-card { margin-top: 12px; padding: 17px; } .owner-validation-heading { display: block; } .owner-validation-heading h2 { font-size: 19px; } .owner-validation-local { display: inline-block; margin-top: 9px; } .owner-validation-note { margin-bottom: 12px; } .owner-validation-grid { grid-template-columns: 1fr 1fr; gap: 7px; } .owner-validation-grid article { padding: 11px; } .owner-validation-grid strong { font-size: 17px; } .owner-validation-footer { align-items: stretch; flex-direction: column; } .owner-validation-footer .period-button { width: 100%; } .construction-card { padding: 17px; } .construction-heading { align-items: flex-start; } .construction-heading .staging-badge { display: none; } .construction-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: -4px; overflow-x: visible; } .construction-tabs button { width: 100%; min-height: 44px; padding: 6px 10px; white-space: normal; } .construction-metric-grid { grid-template-columns: 1fr 1fr; }.construction-source-button { padding: 11px; }.construction-source-button strong { font-size: 18px; }.construction-journey-list, .construction-field-grid { grid-template-columns: 1fr; }.construction-journey { min-height: 116px; }.construction-journeys-heading { display: block; }.construction-journeys-heading > span { display: block; margin-top: 5px; }.construction-review-item { grid-template-columns: auto minmax(0, 1fr); }.construction-review-item > b { grid-column: 2; }.construction-state-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .construction-golden { grid-template-columns: 1fr; }.construction-golden button { width: 100%; }.construction-golden dl { grid-template-columns: 1fr 1fr; } .work-handoff-heading { display: block; }.work-handoff-actors { justify-content: flex-start; margin-top: 10px; }.work-handoff-form-row { grid-template-columns: 1fr; }.work-handoff-form, .work-handoff-board { padding: 13px; }.work-order-heading { display: block; }.work-order-state { display: block; margin-top: 6px; } .team-access { padding: 13px; }.team-access-heading { display: block; }.team-access-heading > span { display: inline-block; margin-top: 8px; }.team-access-layout, .team-roster-layout { grid-template-columns: 1fr; }.team-access-form, .team-access-preview, .team-roster-layout > section { padding: 13px; }.team-access-buttons { grid-template-columns: 1fr; }.team-access-buttons #teamAccessCancel { grid-column: auto; }.team-person-actions { display: grid; }.team-person-actions button { width: 100%; } .command-center-pulse { grid-template-columns: 1fr; }.command-center-heading { display: block; }.command-center-heading > span { display: block; margin-top: 8px; } .sync-center-page { width: min(100% - 24px, 1180px); padding-top: 14px; }.sync-center-top { margin-bottom: 12px; }.sync-center-hero { display: block; padding: 20px; }.sync-center-hero h1 { font-size: 36px; }.sync-last { align-items: flex-start; margin-top: 18px; }.sync-summary { grid-template-columns: 1fr 1fr; gap: 7px; }.sync-summary article { padding: 13px; }.sync-summary strong { font-size: 24px; }.sync-queue { padding: 16px; }.sync-row { grid-template-columns: 1fr; gap: 7px; padding: 13px; }.sync-row button { width: 100%; margin-top: 4px; }.sync-conflict-detail > div { grid-template-columns: 1fr; } .bottom-nav { inset: auto 14px 10px; height: 64px; padding: 7px 9px max(7px, env(safe-area-inset-bottom)); border: 2px solid var(--hard-line); border-radius: 19px; background: color-mix(in srgb, var(--surface-elevated) 96%, transparent); box-shadow: 0 14px 34px color-mix(in srgb, var(--hard-line) 24%, transparent); } .mobile-add { top: 12px; right: 14px; bottom: auto; width: 42px; height: 42px; border-radius: 12px; font-size: 22px; } .theme-tools { top: 12px; right: 64px; bottom: auto; padding: 4px; border-radius: 12px; } .theme-tools button { width: 30px; height: 30px; } .theme-tools button:not(:first-child) { display: none; } .theme-tools #onboardingOpenButton { display: grid; } .toast { bottom: 88px; } } @media (prefers-reduced-motion: reduce) { .onboarding-dialog { scroll-behavior: auto; } } /* Client overview: one section at a time; auth visibility remains server-owned. */ [data-route-hidden="true"], [hidden] { display: none !important; } .client-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; } .client-header p { margin: 0; display: grid; gap: 5px; } .client-header strong { font-size: 18px; letter-spacing: -.03em; } .client-header strong, #construction h2, #constructionDetail h3, #constructionDetail strong { color: var(--text); } .client-header p span { font-size: 12px; line-height: 1.5; color: var(--muted); } .client-header #phoneAccessButton { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; flex-shrink: 0; } .dashboard-board .topbar h1 { font-size: clamp(28px, 3vw, 42px); line-height: 1.12; letter-spacing: -.04em; } .dashboard-board .topbar { gap: 20px; margin-bottom: 20px; } .dashboard-board .top-actions { align-self: center; } .dashboard-board .demo-add { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; max-width: 240px; line-height: 1.35; } .dashboard-board .metric-card.signal-neutral .card-label { color: var(--muted); } .client-section-note { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 8px 0 0; } .client-page { padding: 24px; margin: 16px 0; } .import-preview-card { padding: 24px; } .client-page > p { color: var(--muted); line-height: 1.6; margin-top: 12px; } .client-page .identity-audit { margin: 0; border: 0; padding: 0; } .client-page .theme-tools { position: static; display: flex; flex-wrap: wrap; width: auto; gap: 10px; padding: 16px 0 0; border: 0; background: transparent; box-shadow: none; transform: none; } .client-page .theme-tools button { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 110px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; } .client-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; } .client-menu a { min-height: 48px; display: flex; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-weight: 650; } .client-menu a.active { background: var(--accent); color: var(--fp-on-action); } .sidebar { overflow-y: auto; } .sidebar .nav-item { min-height: 42px; } .sidebar .secondary { gap: 2px; } .sidebar .profile { margin-top: 18px; } .content-grid[data-client-views] { grid-template-columns: minmax(0, 1fr); } .section-heading > a, .ghost-icon, .period-button, .onboarding-skip { min-height: 44px; } .section-heading > a { display: inline-flex; align-items: center; } .ghost-icon { min-width: 44px; } @media (min-width: 761px) and (max-width: 1040px) { .sidebar .nav-item[data-section="more"] { display: flex; } .sidebar > .side-nav:not(.secondary) { margin-right: 0; } } html[data-client-view="operations"] .dashboard-board { padding-top: 20px; } html[data-client-view="operations"] .operations-card { margin-top: 0; grid-column: 1 / -1; } html[data-client-view="overview"] .owner-route { display: none; } html[data-client-view="overview"] .main { display: flex; flex-direction: column; } html[data-client-view="overview"] .client-header { order: 0; } html[data-client-view="overview"] .dashboard-board { order: 1; } html[data-client-view="overview"] .upcoming-obligations-card { order: 2; } html[data-client-view="overview"] .attention-card { order: 3; } @media (max-width: 760px) { .mobile-brand { display: none; } .client-header { align-items: stretch; flex-direction: column; gap: 12px; margin-bottom: 16px; } .client-header #phoneAccessButton { width: 100%; } .dashboard-board .topbar { display: block; } .dashboard-board .top-actions { display: flex; margin-top: 14px; } .dashboard-board .demo-add { width: 100%; max-width: none; } .client-page { padding: 18px; } .import-preview-card { padding: 18px; } .client-page .theme-tools button:not(:first-child) { display: inline-flex; } .bottom-nav a { min-height: 48px; align-content: center; font-size: 11px; } .finance-actions .primary-button { display: inline-flex; align-items: center; justify-content: center; } .operations-card .section-heading { align-items: flex-start; flex-wrap: wrap; gap: 8px; } .section-heading > a { font-size: 12px; } .metric-card.featured .forecast-details-link { margin-bottom: 10px; min-height: 44px; } .metric-card.featured .forecast-strip { position: static; margin-top: 6px; } .dashboard-board .metric-card:not(.featured) .card-label { font-size: 11px; } } /* Crew settlements use the shared product tokens. */ .crew-create, .crew-entry { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: end; margin: 24px 0; } .crew-create label, .crew-entry label, .crew-picker { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--muted); } .crew-create input, .crew-entry input, .crew-entry select, .crew-picker select { width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; } .crew-picker { max-width: 480px; } .crew-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 24px 0; } .crew-totals > div { background: var(--surface-soft); border: 1px solid var(--border); border-radius: 14px; padding: 20px; display: grid; gap: 10px; } .crew-totals span { color: var(--muted); font-size: 14px; } .crew-totals strong { font-size: clamp(20px, 2.5vw, 30px); overflow-wrap: anywhere; } .crew-description { grid-column: 1 / -1; } #crewPaymentFields { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; min-width: 0; } #crew-settlements .secondary-button { min-height: 42px; padding: 9px 14px; border: 1px solid var(--hy-line); border-radius: 10px; background: var(--hy-surface); color: var(--hy-ink); font: inherit; cursor: pointer; transition: background-color 180ms ease, border-color 180ms ease; } #crew-settlements .secondary-button:hover:not(:disabled) { background: var(--hy-raised); border-color: var(--fp-action); } #crew-settlements .secondary-button:active:not(:disabled) { background: var(--hy-bg); } #crew-settlements .secondary-button:disabled { opacity: .55; cursor: not-allowed; } .crew-history-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; border-top: 1px solid var(--border); } .crew-history-row p { color: var(--muted); overflow-wrap: anywhere; margin: 8px 0 0; } .crew-history-row > div { min-width: 0; } #crewStatus { color: var(--muted); } #crew-settlements .primary-button { color: var(--fp-on-action); } @media (max-width: 600px) { .crew-create, .crew-entry, .crew-totals, #crewPaymentFields { grid-template-columns: minmax(0, 1fr); } #crew-settlements .primary-button { display: inline-flex; align-items: center; justify-content: center; width: 100%; color: var(--fp-on-action); } .crew-history-row { align-items: flex-start; flex-direction: column; } .crew-totals > div { padding: 16px; } } /* Owner-approved FinPult hybrid, 2026-09-03: reference palette and layout. */ body button.primary-button:not([hidden]){display:inline-flex!important;align-items:center;justify-content:center}body .workspace-card>span:nth-child(2){display:block!important;min-width:0}body .hybrid-hero #availableCard{min-width:0!important;width:100%!important;max-width:100%!important}.hybrid-hero-right{min-width:0} body .bottom-nav{display:none!important} body .hybrid-kpi.metric-card{min-height:96px!important;background:var(--hy-surface)!important;border-color:var(--hy-line)!important;display:block!important;padding:20px 22px!important}body .hybrid-kpi .card-label,body .hybrid-kpi .card-label span{color:var(--hy-muted)!important;font-size:11px!important;font-weight:400!important;letter-spacing:0!important}html[data-client-view=overview] .upcoming-obligations-card{display:none!important} :root{--fp-canvas:var(--fp-approved-eeeae2);--fp-surface:var(--fp-approved-faf8f3);--fp-ink:var(--fp-approved-171717);--fp-muted:var(--fp-approved-404040);--fp-border:var(--fp-approved-c9c2b7);--fp-hard-line:var(--fp-approved-c9c2b7);--fp-action:var(--fp-approved-ff7200);--fp-action-hover:var(--fp-approved-ff7200);--fp-on-action:var(--fp-approved-08090a);--fp-action-soft:var(--fp-approved-e5e0d7);--fp-accent:var(--fp-approved-ff7200);--fp-danger:var(--fp-approved-ff7200);--fp-inverse-surface:var(--fp-approved-090a0b);--fp-on-inverse:var(--fp-approved-f2f0e9);--fp-product-panel:var(--fp-approved-17191d);--fp-on-panel:var(--fp-approved-f2f0e9);--fp-dark-canvas:var(--fp-approved-090a0b);--fp-dark-surface:var(--fp-approved-111317);--fp-dark-surface-elevated:var(--fp-approved-17191d);--fp-dark-border:var(--fp-approved-2a2d31);--fp-card-radius:20px;--fp-shadow-soft:none;--fp-shadow-board:none;--fp-focus:var(--fp-approved-ff7200);--hy-bg:var(--fp-approved-eeeae2);--hy-surface:var(--fp-approved-faf8f3);--hy-raised:var(--fp-approved-e5e0d7);--hy-ink:var(--fp-approved-171717);--hy-muted:var(--fp-approved-404040);--hy-line:var(--fp-approved-c9c2b7)} html[data-theme=dark]{--hy-bg:var(--fp-approved-090a0b);--hy-surface:var(--fp-approved-111317);--hy-raised:var(--fp-approved-17191d);--hy-ink:var(--fp-approved-f2f0e9);--hy-muted:var(--fp-approved-b8c3d3);--hy-line:var(--fp-approved-2a2d31);--surface-soft:var(--fp-approved-17191d);--muted:var(--fp-approved-b8c3d3);--accent-soft:var(--fp-approved-17191d);--border:var(--fp-approved-2a2d31)} html body{margin:0!important;background:var(--hy-bg)!important;color:var(--hy-ink);font-family:'Segoe UI',Arial,sans-serif!important} body .app-shell{display:block!important;max-width:none!important;margin:0!important;padding:0!important;background:transparent!important} body .sidebar{position:fixed!important;inset:0 auto 0 0!important;width:256px!important;height:100vh!important;background:var(--fp-approved-08090a)!important;color:var(--fp-approved-f2f0e9)!important;border:0!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;padding:32px 22px!important;gap:0!important;z-index:25!important;overflow-y:auto} body .brand{display:block!important;color:var(--fp-approved-f2f0e9)!important;font-size:31px!important;font-weight:850!important;letter-spacing:-1.6px!important;line-height:1!important;padding:0!important;white-space:nowrap} body .brand b{color:var(--fp-approved-ff7200)}.hybrid-brand-note{font-size:9px;letter-spacing:2.8px;color:var(--fp-approved-b8c3d3);margin-top:10px;font-weight:700} body .nav-section{display:block!important;margin:36px 0 22px!important;border:0!important;padding:0!important} body .workspace-card{width:100%;background:var(--fp-approved-17191d)!important;color:var(--fp-approved-f2f0e9)!important;border:0!important;border-radius:16px!important;padding:17px 14px!important;opacity:1!important;display:flex!important;gap:12px!important;align-items:center} body .workspace-avatar{background:var(--fp-approved-ff7200)!important;color:var(--fp-approved-08090a)!important;width:40px;height:40px;border-radius:12px;font-weight:800}.workspace-card small{color:var(--fp-approved-b8c3d3)!important}.workspace-card>span:last-child{display:none} body .hybrid-legacy-nav{display:none!important}.hybrid-side-nav{display:grid;gap:8px}.hybrid-side-nav button{text-align:left;background:transparent;color:var(--fp-approved-b8c3d3);border:0;border-radius:12px;padding:13px;min-height:48px;font-size:14px}.hybrid-side-nav button.active{background:var(--fp-approved-ff7200);color:var(--fp-approved-08090a);font-weight:650} body .main{margin-left:256px!important;width:calc(100% - 256px)!important;max-width:none!important;padding:100px 44px 32px!important;display:block!important;background:transparent!important;min-width:0} .hybrid-global{position:fixed;left:256px;right:0;top:0;height:78px;background:var(--hy-surface);border-bottom:1px solid var(--hy-line);display:flex;align-items:center;justify-content:space-between;padding:0 44px;z-index:24;gap:12px}.hybrid-global-nav{display:flex;gap:8px}.hybrid-global-nav button{padding:12px 16px;border:0;background:transparent;color:var(--hy-ink);border-radius:12px;font:inherit}.hybrid-global-nav button.active{background:var(--hy-raised);border-bottom:3px solid var(--fp-approved-ff7200);font-weight:700} body .hybrid-global .profile{display:flex!important;position:static!important;border:0!important;margin:0!important;padding:0!important;color:var(--hy-muted)!important;background:transparent!important;font-size:12px!important}.hybrid-global .profile-avatar{display:none!important} body .client-header{margin:0 0 24px!important;padding:0 0 12px!important;min-height:0!important;border:0!important;border-bottom:1px solid var(--hy-line)!important;background:transparent!important;font-size:11px;display:flex!important;justify-content:space-between}.client-header p{font-size:11px!important}.client-header p strong{font-size:11px!important}.client-header button{font-size:12px!important;padding:8px 12px!important;min-height:0!important} .hybrid-top{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 28px}.hybrid-eyebrow{font-size:10px;letter-spacing:2px;font-weight:800;color:var(--fp-approved-ff7200)}.hybrid-top h1{margin:9px 0 0;font-size:30px;font-weight:550;letter-spacing:-1px;color:var(--hy-ink)}.hybrid-toolbar{display:flex;gap:9px} body button,body input,body select,body textarea{font-family:inherit}body button{cursor:pointer}body button:disabled{cursor:not-allowed}.hybrid-overview button,.hybrid-toolbar button{border:1px solid var(--hy-line);border-radius:12px;background:var(--hy-surface);color:var(--hy-ink);padding:11px 17px;font-size:14px}.hybrid-overview button.primary-button{background:var(--fp-approved-ff7200)!important;border-color:var(--fp-approved-ff7200)!important;color:var(--fp-approved-08090a)!important;font-weight:700;box-shadow:none!important} body .primary-button,body .crew-form-grid button.primary-button{background:var(--fp-approved-ff7200)!important;border-color:var(--fp-approved-ff7200)!important;color:var(--fp-approved-08090a)!important;box-shadow:none!important}body .primary-button:hover{filter:brightness(1)!important;text-decoration:underline} body .card,body .construction-card,body dialog{background:var(--hy-surface)!important;color:var(--hy-ink)!important;border:1px solid var(--hy-line)!important;border-radius:20px!important;box-shadow:none!important} body .dashboard-board{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important}html[data-client-view=overview] .dashboard-board,html[data-client-view=overview] .attention-card{display:none!important} body .board-lime-pin,body .mobile-brand,body .mobile-nav{display:none!important} .hybrid-overview{display:block}.hybrid-overview[hidden]{display:none!important}.hybrid-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:34px;background:var(--fp-approved-090a0b);border:1px solid var(--hy-line);color:var(--fp-approved-f2f0e9);border-radius:24px;padding:28px 32px;min-height:255px} body .hybrid-hero #availableCard{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important;display:block!important;color:var(--fp-approved-f2f0e9)!important;min-height:0!important;grid-column:auto!important;overflow:visible!important} .hybrid-hero #availableCard:before,.hybrid-hero #availableCard:after{display:none!important}.hybrid-hero #availableCard .card-label{color:var(--fp-approved-ff7200)!important;font-size:10px!important;letter-spacing:2px;font-weight:800}.hybrid-hero #availableValue{font-size:51px!important;font-weight:650!important;letter-spacing:-2px!important;color:var(--fp-approved-f2f0e9)!important;line-height:1.2!important;margin:8px 0!important;display:block} .hybrid-hero #forecastNotice{color:var(--fp-approved-b8c3d3)!important;font-size:12px!important;margin:8px 0!important}.hybrid-hero .forecast-strip,.hybrid-hero #forecastDetailsLink{display:none!important}.hybrid-add-operation{margin-top:20px!important}.hybrid-hero #balanceVisibilityToggle{color:var(--fp-approved-b8c3d3)!important;background:transparent!important;border:0!important;padding:0!important} .hybrid-hero-right{border-left:1px solid var(--fp-approved-2a2d31);padding-left:30px;display:flex;flex-direction:column;justify-content:space-between;gap:10px}.hybrid-hero-right p,.hybrid-hero-right small{font-size:12px;color:var(--fp-approved-b8c3d3);margin:0}.hybrid-due{font-size:32px;font-weight:650;letter-spacing:-1px}.hybrid-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;margin:18px 0 24px}.hybrid-kpi{min-width:0!important;background:var(--hy-surface);border:1px solid var(--hy-line);border-radius:17px;padding:20px 22px}.hybrid-kpi strong{display:block;min-width:0;font-size:24px!important;font-weight:650!important;letter-spacing:-.6px;color:var(--hy-ink)!important;margin:0!important;overflow-wrap:anywhere}.hybrid-kpi small{display:block;color:var(--hy-muted);font-size:11px;margin-top:5px} .hybrid-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:20px}.hybrid-grid:has(> .hybrid-panel[hidden]){grid-template-columns:1fr}.hybrid-panel{background:var(--hy-surface);border:1px solid var(--hy-line);border-radius:20px;padding:23px}.hybrid-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}.hybrid-panel-head h2{font-size:19px;font-weight:550;margin:0}.hybrid-panel-head button{font-size:12px;color:var(--fp-approved-ff7200);white-space:nowrap}.hybrid-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid var(--hy-line)}.hybrid-row strong{font-size:13px}.hybrid-row small{display:block;color:var(--hy-muted);font-size:11px;margin-top:5px}.hybrid-row-amount{text-align:right;white-space:nowrap}.hybrid-project-link{display:block;width:100%;text-align:left;border:0!important;border-top:1px solid var(--hy-line)!important;border-radius:0!important;padding:16px 0!important;font-size:13px!important}.hybrid-source-status{font-size:11px;color:var(--hy-muted);margin-top:20px} body :focus-visible{outline:3px solid var(--fp-approved-ff7200)!important;outline-offset:3px}body input,body select,body textarea{border:1px solid var(--hy-line)!important;background:var(--hy-surface)!important;color:var(--hy-ink)!important;border-radius:10px!important}body .positive,body .negative{color:var(--hy-ink)!important}body [hidden]{display:none!important} @media(max-width:1100px){body .sidebar{width:216px!important;padding:28px 16px!important}body .main{margin-left:216px!important;width:calc(100% - 216px)!important;padding:100px 24px 30px!important}.hybrid-global{left:216px;padding:0 24px}.hybrid-hero{padding:25px;gap:20px}.hybrid-hero #availableValue{font-size:41px!important}.hybrid-kpi{padding:15px}.hybrid-kpi strong{font-size:21px!important}.hybrid-global .profile{max-width:150px}.hybrid-global-nav{gap:0}.hybrid-global-nav button{padding:10px}} @media(max-width:760px){body .main{margin:0!important;width:100%!important;padding:85px 16px 100px!important}.hybrid-global{left:0;height:65px;padding:0 10px}.hybrid-global-nav{width:100%;justify-content:space-between}.hybrid-global-nav button{padding:10px;font-size:12px}body .hybrid-global .profile{display:none!important}body .sidebar{inset:auto 0 0!important;height:auto!important;width:100%!important;padding:8px!important;border-top:1px solid var(--fp-approved-2a2d31)!important;overflow:hidden}body .sidebar .brand,body .sidebar .hybrid-brand-note,body .sidebar .nav-section{display:none!important}.hybrid-side-nav{display:flex;gap:4px;overflow-x:auto}.hybrid-side-nav button{flex:none;padding:10px;font-size:11px;min-height:40px}.hybrid-top{align-items:flex-start;gap:10px}.hybrid-top h1{font-size:25px}.hybrid-toolbar{flex-direction:column}.hybrid-toolbar button{padding:9px;font-size:12px}.hybrid-hero{grid-template-columns:1fr;padding:24px}.hybrid-hero-right{border-left:0;border-top:1px solid var(--fp-approved-2a2d31);padding:20px 0 0;gap:15px}.hybrid-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.hybrid-kpi strong{font-size:18px!important;letter-spacing:-.8px!important;white-space:nowrap;overflow-wrap:normal}.hybrid-grid{grid-template-columns:1fr}.hybrid-panel{padding:18px}.hybrid-row{flex-wrap:wrap}body .client-header{align-items:flex-start!important;gap:12px!important}body .client-header p{min-width:0}.hybrid-panel-head{flex-wrap:wrap}} /* Boyarkin pilot legibility pass: restore the project semantic palette and keep every budget label tied to the surface it is actually rendered on. */ :root { --fp-action: var(--birzha-v9-blue); --fp-action-hover: var(--birzha-v9-blue-dark); --fp-action-text: var(--birzha-v9-blue-dark); --fp-on-action: var(--birzha-v9-surface); --fp-action-soft: var(--birzha-v9-blue-soft); --fp-accent: var(--birzha-v9-lime); --fp-danger: var(--birzha-v9-danger); --fp-focus: var(--birzha-v9-blue); --hy-bg: var(--birzha-v9-paper); --hy-surface: var(--birzha-v9-surface); --hy-raised: var(--birzha-v9-blue-soft); --hy-ink: var(--birzha-v9-ink); --hy-muted: var(--birzha-v9-muted); --hy-line: var(--birzha-v9-line); } html[data-theme=dark] { --fp-action-text: color-mix(in srgb, var(--birzha-v9-blue) 55%, white); --hy-bg: var(--fp-approved-090a0b); --hy-surface: var(--fp-approved-111317); --hy-raised: var(--fp-approved-17191d); --hy-ink: var(--fp-approved-f2f0e9); --hy-muted: var(--fp-approved-b8c3d3); --hy-line: var(--fp-approved-2a2d31); } /* FinPult has two independent palettes. Both support the same light/dark mode switch; Servaki values come from Projects/14_Servaki/app/chat-first.css. */ html[data-palette="servaki"] { --fp-canvas: var(--servaki-paper); --fp-surface: var(--servaki-panel); --fp-ink: var(--servaki-ink); --fp-muted: var(--servaki-muted); --fp-border: var(--servaki-line); --fp-hard-line: var(--servaki-ink); --fp-action: var(--servaki-orange); --fp-action-hover: var(--servaki-orange-hover); --fp-action-text: var(--servaki-orange-hover); --fp-on-action: var(--servaki-on-orange); --fp-action-soft: var(--servaki-orange-soft); --fp-accent: var(--servaki-orange); --fp-focus: var(--servaki-orange); --fp-product-panel: var(--servaki-dark-canvas); --fp-on-panel: var(--birzha-v9-surface); --fp-inverse-surface: var(--servaki-dark-canvas); --fp-on-inverse: var(--birzha-v9-surface); --canvas: var(--servaki-paper); --surface: var(--servaki-panel); --surface-elevated: var(--servaki-surface); --surface-soft: var(--servaki-soft); --text: var(--servaki-ink); --muted: var(--servaki-muted); --border: var(--servaki-line); --accent: var(--servaki-orange); --accent-ink: var(--servaki-on-orange); --accent-soft: var(--servaki-orange-soft); --inverse: var(--servaki-dark-canvas); --inverse-text: var(--birzha-v9-surface); --hy-bg: var(--servaki-paper); --hy-surface: var(--servaki-panel); --hy-raised: var(--servaki-soft); --hy-ink: var(--servaki-ink); --hy-muted: var(--servaki-muted); --hy-line: var(--servaki-line); } html[data-palette="servaki"][data-theme="dark"] { --fp-canvas: var(--servaki-dark-canvas); --fp-surface: var(--servaki-dark-panel); --fp-ink: var(--servaki-dark-ink); --fp-muted: var(--servaki-dark-muted); --fp-border: var(--servaki-dark-line); --fp-action-hover: var(--servaki-orange-light); --fp-action-text: var(--servaki-orange-text-dark); --fp-action-soft: var(--servaki-dark-soft); --canvas: var(--servaki-dark-canvas); --surface: var(--servaki-dark-panel); --surface-elevated: var(--servaki-dark-surface); --surface-soft: var(--servaki-dark-surface); --text: var(--servaki-dark-ink); --muted: var(--servaki-dark-muted); --border: var(--servaki-dark-line); --accent-soft: var(--servaki-dark-soft); --inverse: var(--servaki-panel); --inverse-text: var(--servaki-ink); --hy-bg: var(--servaki-dark-canvas); --hy-surface: var(--servaki-dark-panel); --hy-raised: var(--servaki-dark-surface); --hy-ink: var(--servaki-dark-ink); --hy-muted: var(--servaki-dark-muted); --hy-line: var(--servaki-dark-line); } .palette-picker { margin: 24px 0 8px; padding: 0; border: 0; } .palette-picker legend { color: var(--text); font-size: 15px; font-weight: 750; } .palette-picker > p { margin: 7px 0 14px; color: var(--muted); font-size: 13px; } .palette-options { display: grid; grid-template-columns: repeat(2, minmax(0, 240px)); gap: 12px; } .palette-option { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; gap: 2px 11px; align-items: center; min-height: 72px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; } .palette-option:hover { border-color: var(--fp-action); background: var(--surface-soft); } .palette-option[aria-pressed="true"] { border-color: var(--fp-action); box-shadow: inset 0 0 0 2px var(--fp-action); } .palette-option strong { font-size: 14px; } .palette-option small { grid-column: 2; color: var(--muted); font-size: 11px; } .palette-swatch { grid-row: 1 / 3; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 10px; } .palette-option-classic .palette-swatch { background: linear-gradient(135deg, var(--birzha-v9-blue) 0 55%, var(--birzha-v9-lime) 55%); } .palette-option-servaki .palette-swatch { background: linear-gradient(135deg, var(--servaki-dark-canvas) 0 55%, var(--servaki-orange) 55%); } @media (max-width: 560px) { .palette-options { grid-template-columns: 1fr; } } .hybrid-nav-label-mobile { display: none; } /* Financial reading and entry stay legible at normal zoom. */ #finance p, #finance .fa-entry dl, #finance .fa-movements li, .finance-dialog .finance-form-note, .finance-dialog .finance-form-error, .finance-dialog .finance-field, #finance .finance-field { font-size: 14px; line-height: 1.5; } #finance .finance-account strong, #finance .fa-group strong, #finance .fa-entry summary { font-size: 14px; line-height: 1.5; } #finance .finance-account span, #finance .fa-entry summary small, #finance .fa-group span, #finance .fa-totals dt { font-size: 12px; line-height: 1.4; } #finance .fa-directory summary { font-size: 14px; line-height: 1.5; } #finance button, #finance summary, .finance-dialog button { min-height: 44px; } .finance-dialog .ghost-icon { min-width: 44px; } .finance-dialog .finance-field :is(input, select, textarea), #finance .finance-field :is(input, select, textarea) { font-size: 14px; line-height: 1.5; } @media (max-width: 760px) { .finance-dialog .finance-field :is(input, select, textarea), #finance .finance-field :is(input, select, textarea) { font-size: 16px; } } .hybrid-hero .hybrid-eyebrow { color: var(--fp-accent); } @media (max-width: 760px) { body .sidebar { padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)) !important; } body .main { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important; } .hybrid-side-nav { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; overflow: visible; } .hybrid-side-nav button { min-width: 0; min-height: 44px; padding: 8px 2px; text-align: center; font-size: 11px; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; } .hybrid-nav-label-full { display: none; } .hybrid-nav-label-mobile { display: inline; } .hybrid-global-nav button { min-height: 44px; } } body .brand b, .hybrid-eyebrow, .hybrid-panel-head button { color: var(--fp-action-text); } body .workspace-avatar, .hybrid-side-nav button.active, .hybrid-overview button.primary-button, body .primary-button, body .crew-form-grid button.primary-button { background: var(--fp-action) !important; border-color: var(--fp-action) !important; color: var(--fp-on-action) !important; } .hybrid-global-nav button.active { border-bottom-color: var(--fp-action); } .hybrid-hero #availableCard .card-label { color: var(--fp-accent) !important; } body :focus-visible { outline-color: var(--fp-focus) !important; } body .budget-card { background: var(--hy-surface) !important; border-color: var(--hy-line) !important; color: var(--hy-ink) !important; } body .budget-card .eyebrow, body .budget-card .budget-values span, body .budget-card .donut span, body .budget-card .warning-note small { color: var(--hy-muted); } body .budget-card .budget-values > div { background: var(--hy-raised); } body .budget-card .donut { background: conic-gradient(var(--fp-action) 0 67%, var(--hy-raised) 67% 100%); } body .budget-card .donut::before { background: var(--hy-surface); } body .budget-card .donut strong, body .budget-card .budget-values strong { color: var(--hy-ink); } body .budget-card .warning-note { background: color-mix(in srgb, var(--fp-action) 10%, var(--hy-surface)); color: var(--hy-ink); } html[data-theme=dark] body .budget-card .warning-note { background: color-mix(in srgb, var(--fp-action) 18%, var(--hy-surface)); } body button, .hybrid-global-nav button, .hybrid-side-nav button { transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease; } body button:active:not(:disabled) { transform: translateY(1px); } @media (prefers-reduced-motion: reduce) { body button, body button:active:not(:disabled), .hybrid-global-nav button, .hybrid-side-nav button { transition: none; transform: none; } } html[data-motion="reduced"] body button, html[data-motion="reduced"] .hybrid-global-nav button, html[data-motion="reduced"] .hybrid-side-nav button { transition: none; transform: none; } @media (max-width: 1100px) { body .budget-card { display: block; } body .budget-card .budget-values { grid-column: auto; grid-row: auto; margin-top: 0; } body .budget-card .warning-note { grid-column: auto; } } /* Readable forms and touch targets in project and team workflows. */ :is(#team, #construction) :is(label, legend) { font-size: 12px; line-height: 1.5; } :is(#team, #construction) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { min-height: 44px; font-size: 14px; line-height: 1.5; } :is(#team, #construction) button { min-height: 44px; font-size: 12px; } #team .team-access-modules label, #team .work-order-checklist label { min-height: 44px; } @media (max-width: 760px) { :is(#team, #construction) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font-size: 16px; } } /* Owner export uses the existing settings and button components. */ #workspaceExport { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); } #workspaceExport p { font-size: 14px; line-height: 1.5; max-width: 70ch; } #workspaceExportDownload { min-height: 44px; max-width: 100%; font-size: 14px; white-space: normal; }