/* Opt-in styles. Application screens and the preview share these namespaced styles.
   Source: design.md §§1–6. No speculative hover/pressed/error visual variants. */
.ui-card, .ui-card *, .ui-table-scroll, .ui-table-scroll *, .ui-button, .ui-button *, .ui-badge { box-sizing: border-box; }
.ui-card, .ui-button, .ui-badge, .ui-table { font-family: var(--font-app); letter-spacing: 0; color: var(--text-primary); }
.ui-card { position: relative; min-width: 0; padding: 6px; background: var(--card-frame); border-radius: var(--radius-card); box-shadow: inset 0 4px 15px 0 rgb(255 255 255 / .5); }
/* Overlay reproduces the 1px INSIDE stroke without shifting the recorded child
   coordinates (KPI well x=4, panel well x=6). It never intercepts clicks. */
.ui-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; border: 1px solid var(--border-card); border-radius: inherit; }
.ui-card-header { min-height: 64px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ui-card-titles { display: flex; flex-direction: column; gap: 8px; padding: 0; }
.ui-card-title, .ui-stat-label { margin: 0; font-size: 16px; font-weight: 500; line-height: 20px; letter-spacing: 0; color: var(--text-primary); }
.ui-card-subtitle { margin: 0; font-size: 12px; font-weight: 400; line-height: normal; color: rgb(0 0 0 / .4); }
.ui-card-body { min-height: 309px; padding: 16px; border: 0; border-radius: 8px; background: var(--canvas); }
.ui-stat { width: 284px; max-width: 100%; height: 141px; padding: 4px; box-shadow: inset 0 4px 15px 0 rgb(255 255 255 / .30000001192092896); }
.ui-stat-header { height: 45px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 21px; }
.ui-stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 4px; border-radius: 6px; background: var(--border-card); flex-shrink: 0; }
.ui-stat-icon svg, .ui-stat-icon .figma-icon { width: 20px; height: 20px; }
.ui-stat-body { position: relative; height: 88px; padding: 12px 24px; border-radius: 10px; background: var(--canvas); }
.ui-stat-value { position: absolute; left: 24px; right: 24px; top: 30px; font-size: 28px; font-weight: 500; line-height: 28px; }
.ui-stat--delta .ui-stat-value { top: 12px; }
.ui-stat-delta-row { position: absolute; left: 24px; right: 24px; top: 58px; display: flex; align-items: center; gap: 4px; font-size: 11px; line-height: 18px; }
.ui-stat-delta { color: var(--success); font-weight: 500; }
.ui-stat-comparison { color: var(--text-secondary); font-weight: 400; }
.ui-stat--library { width: 272px; background: var(--surface-light); box-shadow: inset 0 4px 15px 0 #fff; }
.ui-stat--library .ui-stat-label { font-size: 14px; }
.ui-stat--library .ui-stat-value { font-size: 20px; }
.ui-button { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; min-height: 0; padding: 0 16px; margin: 0; border: 0; border-radius: 10px; box-shadow: none; background: var(--brand); color: #fff; font-size: 14px; font-weight: 500; line-height: 20px; text-decoration: none; cursor: pointer; white-space: nowrap; transform: none; transition: none; }
.ui-button--28 { height: 28px; font-size: 13px; border-radius: 8px; }
.ui-button--32 { height: 32px; }
.ui-button--48 { height: 48px; border-radius: 12px; }
.ui-button--secondary { background: var(--surface-light); color: var(--text-primary); }
.ui-button--secondary.ui-button--28:not(.ui-button--icon-start):not(.ui-button--icon-end) { border-radius: 10px; }
.ui-button--ghost { background: transparent; color: var(--text-primary); }
.ui-button--outline { background: transparent; color: var(--text-primary); border: 1px solid var(--border-input); }
.ui-button--colored-outline { background: transparent; color: var(--button-outline-text); border: 1px solid var(--button-outline); }
.ui-button--icon-start { padding-left: 10px; }
.ui-button--icon-end { padding-right: 10px; }
.ui-button-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; }
.ui-button-icon svg, .ui-button-icon .figma-icon { width: 100%; height: 100%; }
.ui-button--28 .ui-button-icon { width: 18px; height: 18px; }
.ui-button:disabled, .ui-button[aria-disabled="true"] { background: var(--button-disabled); color: var(--text-disabled); border: 0; opacity: 1; cursor: default; }
/* Accessible focus is an implementation adaptation using an existing token. */
.ui-button:focus-visible, .ui-table-scroll:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.ui-badge { display: inline-flex; align-items: center; justify-content: center; height: 20px; padding: 0 6px; border: 0; border-radius: 6px; font-size: 11px; font-weight: 500; line-height: 18px; white-space: nowrap; background: var(--grey-soft); color: var(--text-secondary); }
.ui-badge--orange { background: var(--warning-soft); color: var(--warning); }
.ui-badge--green { background: var(--success-soft); color: var(--success); }
.ui-badge--purple { background: var(--purple-soft); color: var(--purple); }
.ui-badge--blue { background: var(--info-soft); color: var(--info); }
.ui-table-scroll { max-width: 100%; overflow-x: auto; border-radius: 12px; background: var(--canvas); box-shadow: inset 0 4px 15px 0 #fff; }
.ui-table { table-layout: fixed; border-collapse: separate; border-spacing: 0; width: max-content; padding: 0; border: 0; font-size: 12px; line-height: 1.3; }
.ui-table caption { text-align: left; padding: 12px; color: var(--text-secondary); }
.ui-table thead { background: #f1f1f1; }
.ui-table tbody { background: var(--canvas); }
.ui-table th, .ui-table td { padding: 0; text-align: left; vertical-align: middle; border: 0; border-bottom: 1px solid var(--border-input); overflow-wrap: anywhere; }
.ui-table th { height: 40px; font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--text-secondary); background: rgb(255 255 255 / .05000000074505806); }
.ui-table td { height: 72px; font-weight: 400; background: rgb(255 255 255 / .0020000000949949026); }
.ui-cell-content { padding: 10px 12px; }
.ui-table--basic td { height: 36px; }
/* Fixed-height header/basic rows center their 15.6px line rather than adding
   20px + a divider to force 36px rows taller; measured inset is documented. */
.ui-table--basic td .ui-cell-content, .ui-table th .ui-cell-content { padding-block: 0; }
.ui-table-text { display: flex; flex-direction: column; gap: 4px; }
.ui-table-title { font-size: 14px; line-height: 20px; font-weight: 400; }
.ui-table-description { font-size: 12px; line-height: 18px; color: var(--text-secondary); }
.ui-table-amount { font-weight: 600; }

/* Native link semantics, same measured button visuals. */

.ui-table-column--289 { width: 289px; }
.ui-table-column--120 { width: 120px; }
/* Reasoning-card geometry from design.md §6, now using supplied native exports. */
.ui-reasoning { display: flex; flex-direction: column; gap: var(--space-28); height: var(--reasoning-height); min-width: 0; padding: var(--space-24); border: 0; border-radius: var(--radius-reasoning); box-shadow: none; background-color: var(--brand); background-image: var(--reasoning-image-numerical); background-size: cover; background-position: center; color: var(--on-accent); text-decoration: none; }
.ui-reasoning--purple { background-color: var(--purple); background-image: var(--reasoning-image-logical); }
.ui-reasoning--success { background-color: var(--success); background-image: var(--reasoning-image-diagrammatic); }
.ui-reasoning-top { display: flex; align-items: start; justify-content: space-between; }
.ui-reasoning-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--reasoning-icon-size); height: var(--reasoning-icon-size); border-radius: 100px; background: var(--canvas); color: var(--text-primary); }
.ui-reasoning-icon svg, .ui-reasoning-icon .figma-icon { width: 32px; height: 32px; }
.ui-reasoning-arrow svg, .ui-reasoning-arrow .figma-icon { width: 24px; height: 24px; stroke-width: 1.5; }
.ui-reasoning-copy { display: flex; flex-direction: column; gap: var(--space-14); }
.ui-reasoning-title { margin: 0; color: inherit; font-size: var(--reasoning-title-size); font-weight: 500; line-height: var(--reasoning-count-leading); letter-spacing: 0; }
.ui-reasoning-count { margin: 0; color: var(--on-accent-muted); font-size: var(--reasoning-count-size); font-weight: 400; line-height: var(--reasoning-count-leading); }
.ui-reasoning:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.ui-switch { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); font-family: var(--font-app); cursor: pointer; }
.ui-switch-copy { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.ui-switch-label { color: var(--text-primary); font-size: var(--text-body-size); font-weight: 500; line-height: var(--text-body-leading); }
.ui-switch-description { color: var(--text-secondary); font-size: var(--text-meta-size); font-weight: 400; line-height: var(--text-meta-leading); }
.ui-switch-input { appearance: none; width: 47px; height: 24px; min-height: 0; flex: 0 0 47px; padding: 2px; border: 0; border-radius: 20px; background: var(--toggle-off); box-shadow: none; }
.ui-switch-input::after { content: ''; display: block; width: 20px; height: 20px; border-radius: 50%; background: var(--canvas); }
.ui-switch-input:checked { background: var(--brand); }
.ui-switch-input:checked::after { transform: translateX(23px); }
.ui-switch-input:hover, .ui-switch-input:focus { box-shadow: none; }
.ui-switch-input:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }

.ui-card--content > .ui-card-body { min-height: 0; }

.figma-icon { display: inline-block; width: 20px; height: 20px; object-fit: contain; vertical-align: middle; flex-shrink: 0; }
.ui-reasoning-arrow .figma-icon { filter: brightness(0) invert(1); }