/*
  Claim detail (docs/design/portal-redesign/canvas-claims, the 17 "Claim detail" boards).
  Everything is scoped under .pui-cd (the page body) or a pui-cd- class, so nothing leaks to other pages.
*/

.pui-cd-title { font-family: var(--font-mono); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; margin: 0; }

/* Cards: the boards' header / title / description / content measures. */
.pui-cd .cn-card { gap: 0; padding: 0; border-radius: 12px; box-shadow: none; }
.pui-cd .cn-card-header { padding: 16px 20px 0; gap: 2px 12px; align-items: flex-start; }
.pui-cd .cn-card-title { font-size: 15px; font-weight: 600; line-height: 1.4; }
.pui-cd .cn-card-description { font-size: 13px; margin-top: 2px; line-height: 1.45; }
.pui-cd .cn-card-content { padding: 16px 20px; }
.pui-cd .cn-card-header:not(:has(.cn-card-description)) + .cn-card-content { padding-top: 12px; }

.pui-cd-eyebrow { font-size: 12px; font-weight: 500; color: var(--muted-foreground); letter-spacing: 0.01em; }
.pui-cd-note { font-size: 12px; line-height: 1.45; color: var(--muted-foreground); }
.pui-cd-danger { font-size: 13px; color: var(--tone-danger-fg); font-weight: 500; }
.pui-cd-in { color: var(--tone-success-fg); }
.pui-cd-out { color: var(--foreground); }

/* What needs you: the next step on the left, who we are waiting on on the right. */
.pui-cd-needs { gap: 16px; }
.pui-cd-next { flex: 1.5 1 340px; min-width: 0; gap: 8px; }
.pui-cd-next-title { font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; }
.pui-cd-waiting { flex: 1 1 280px; min-width: 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--muted); }
.pui-cd-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 999px; background: var(--accent); color: var(--accent-foreground); font-size: 10px; font-weight: 600; }
.pui-cd-waiting .pui-cd-avatar { width: 32px; height: 32px; font-size: 12px; background: var(--card); border: 1px solid var(--border); }
.pui-cd-comingup { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); gap: 6px 20px; align-items: baseline; font-size: 13px; }

/* Money: four figures and the deductible strip. */
.pui-cd-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.pui-cd-figure { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.pui-cd-deductible { padding: 10px 14px; border-radius: 8px; background: var(--muted); font-size: 13px; }

/* The story and the three facts under it. */
.pui-cd-story { font-size: 14px; line-height: 1.55; margin: 0 0 14px; }
.pui-cd-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 20px; overflow-wrap: anywhere; }
@media (max-width: 720px) { .pui-cd-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Steps. */
.pui-cd-steps > .pui-cd-step { padding: 12px 0; border-top: 1px solid var(--border); }
.pui-cd-steps > .pui-cd-step:first-child { border-top: 0; padding-top: 0; }
.pui-cd-circle { flex: none; width: 18px; height: 18px; border-radius: 999px; border: 1.5px solid var(--input); box-sizing: border-box; }
.pui-cd-circle-danger { border-color: var(--tone-danger-fg); }
.pui-cd-finished { border-top: 1px solid var(--border); }
.pui-cd-finished-row { padding: 8px 0; font-size: 13px; }
.pui-cd-check { color: var(--tone-success-fg); flex: none; }
.pui-cd-dash { flex: none; width: 14px; height: 1.5px; background: var(--input); }

/* Section bands ("The insurer side", "The ledger"). */
.pui-cd-band { padding: 12px 2px 0; }
.pui-cd-band-title { font-size: 16px; font-weight: 600; margin: 0; }

/* A party and its definition list. */
.pui-cd-party { padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; }
.pui-cd-dl { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }

/* The closing checklist, notes and activity in the right rail. */
.pui-cd-signoff { padding-top: 12px; border-top: 1px solid var(--border); }
.pui-cd-note-item { padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.pui-cd-note-body { font-size: 13px; line-height: 1.5; margin: 0; }
.pui-cd-composer { gap: 10px; }
.pui-cd-activity { padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.pui-cd-activity:last-child { border-bottom: 0; padding-bottom: 0; }

/* A callout inside a sheet or dialog. */
.pui-cd-callout { padding: 12px 14px; border-radius: 8px; border: 1px solid transparent; font-size: 13px; line-height: 1.45; }
.pui-cd-callout-info { background: var(--tone-info-bg); border-color: oklch(0.88 0.05 250); color: var(--tone-info-fg); }
.pui-cd-callout-warning { background: var(--tone-warning-bg); border-color: oklch(0.88 0.08 80); color: var(--tone-warning-fg); }
.pui-cd-callout-danger { background: var(--tone-danger-bg); border-color: oklch(0.88 0.06 25); color: var(--tone-danger-fg); }

/* The 480px dialogs (the boards' "Move this claim", "Revise the reserve", "Log a call"...). */
.pui-cd-dialog .cn-dialog, .cn-dialog.pui-cd-dialog { width: min(480px, calc(100vw - 32px)); max-width: calc(100vw - 32px); gap: 16px; }

/* ---- Pass 2: measurements from the first screenshot comparison ---- */
.pui-cd-eyebrow { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
.pui-cd .pui-detail { gap: 22px; }
.pui-cd .pui-detail-main { flex: 999 1 540px; }
.pui-cd .pui-detail-rail { flex: 1 1 340px; max-width: 340px; }
.pui-cd-story { display: block; }
.pui-cd-note { display: block; }
.pui-cd-facts .cn-button { height: auto; padding: 0; justify-content: flex-start; font-size: 14px; font-weight: 500; }
.pui-cd-parties .pui-cd-party { padding: 0; border: 0; }
.pui-cd-parties .pui-cd-dl { gap: 6px; }
.pui-cd-cond-badge { flex: 0 0 72px; }
.pui-cd-activity .pui-cd-note { display: block; }

/* Tables run edge to edge inside their card; numeric columns are right-aligned; the actions header is read-only for screen readers. */
.pui-cd .cn-card-content:has(.cn-table-container) { padding: 6px 0 0; }
.pui-cd .cn-table-head, .pui-cd .cn-table-cell { padding-left: 13px; padding-right: 13px; }
.pui-cd .cn-table-head { font-size: 12px; font-weight: 500; color: var(--muted-foreground); }
.pui-cd-act .cn-table-row > :last-child { text-align: right; }
.pui-cd-act .cn-table-head:last-child { font-size: 0; }
.pui-cd-r2 .cn-table-row > :nth-child(2),
.pui-cd-r3 .cn-table-row > :nth-child(3),
.pui-cd-r4 .cn-table-row > :nth-child(4),
.pui-cd-r5 .cn-table-row > :nth-child(5),
.pui-cd-r6 .cn-table-row > :nth-child(6) { text-align: right; }
.pui-cd-r3 .cn-table-row > :nth-child(3) .sc-vstack,
.pui-cd-r4 .cn-table-row > :nth-child(4) .sc-vstack { align-items: flex-end; }
.pui-cd-dialog-body { padding: 4px 24px 22px; }
.pui-sheet-simple .cn-field .cn-toggle-group.pui-cd-seg, .pui-sheet-complex .cn-field .cn-toggle-group.pui-cd-seg { display: inline-flex; width: auto; }
.pui-cd-seg { align-self: flex-start; width: fit-content; }
/* A date field alone in a sheet or dialog field fills the field, like the board's date trigger (it used to hug its text). */
.pui-sheet-simple .cn-field > .cn-date-picker, .pui-sheet-complex .cn-field > .cn-date-picker { display: block; width: 100%; }
.pui-sheet-simple .cn-field > .cn-date-picker > .cn-date-picker-trigger, .pui-sheet-complex .cn-field > .cn-date-picker > .cn-date-picker-trigger { width: 100%; justify-content: flex-start; }
.pui-cd-composer .cn-button { flex: none; white-space: nowrap; }

/* ── Rich confirmations (PortalBlocks.ConfirmPanel): the "confirms" boards ─────────────────────────────────── */
.pui-cm-confirm .cn-dialog-header { padding: 20px 24px 16px; gap: 4px; }
.pui-cm-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-foreground); }
.pui-cm-body { padding: 0 24px 16px; gap: 14px; }
.pui-cm-facts { padding: 12px 14px; border-radius: 8px; background: var(--muted); gap: 6px; }
.pui-cm-fact { justify-content: space-between; font-size: 13px; }
.pui-cm-fact > :last-child { text-align: right; }
.pui-cm-tone-success { color: var(--tone-success-fg); }
.pui-cm-tone-warning { color: var(--tone-warning-fg); }
.pui-cm-tone-danger { color: var(--tone-danger-fg); }
.pui-cm-footnote { font-size: 13px; line-height: 1.45; color: var(--muted-foreground); }
.pui-cm-callout { padding: 12px 14px; border-radius: 8px; font-size: 13px; line-height: 1.45; gap: 6px; }
.pui-cm-callout-warning { background: var(--tone-warning-bg); border: 1px solid oklch(0.88 0.08 80); color: var(--tone-warning-fg); }
.pui-cm-callout ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.pui-cm-callout-title { font-weight: 600; }
.pui-confirm.pui-ld-confirm-wide .cn-dialog { width: min(520px, calc(100vw - 32px)); max-width: calc(100vw - 32px); }
.pui-ld .pui-ld-confirm .cn-dialog-footer, .pui-ld .pui-ld-confirm-wide .cn-dialog-footer { margin-top: 6px; }
.pui-ld .pui-ld-confirm .pui-ld-dialog-body, .pui-ld .pui-ld-confirm-wide .pui-ld-dialog-body { padding-bottom: 10px; }

/* ── Load form: "Add a new broker" (DialogsLoadForm board) ────────────────────────────────────────────────── */
.pui-lf-quick .cn-dialog { width: min(480px, calc(100vw - 32px)); max-width: calc(100vw - 32px); padding: 0; gap: 0; border-radius: 14px; }
.pui-lf-quick .cn-dialog-header { padding: 20px 24px 0; gap: 4px; }
.pui-lf-quick-body { padding: 20px 24px; }
.pui-lf-quick .cn-dialog-footer { margin: 0; padding: 16px 24px; border-top: 1px solid var(--border); }
.pui-lf-quick [data-slot="field-label"], .pui-lf-quick [data-slot="label"] { color: var(--foreground); font-size: 13px; font-weight: 500; }
.pui-lf-quick [data-slot="field-error"], .pui-lf-quick [data-slot="field-description"] { font-size: 12px; }
.pui-lf-quick .pui-lf-link { align-self: flex-start; }

/* ── Safety "view details" dialogs (accident, drug and alcohol test) ───────────────────────────────────────── */
.pui-cm-detail .cn-dialog { width: min(700px, calc(100vw - 32px)); max-width: calc(100vw - 32px); padding: 0; gap: 0; border-radius: 14px; max-height: calc(100vh - 48px); }
.pui-cm-detail .cn-dialog-header { padding: 20px 24px 0; gap: 4px; }
.pui-cm-detail .cn-dialog-footer { margin: 0; padding: 16px 24px; border-top: 1px solid var(--border); }
.pui-cm-dscroll { padding: 20px 24px; }
.pui-cm-dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; }
.pui-cm-dcell { min-width: 0; align-items: flex-start; }
.pui-cm-dwide { grid-column: 1 / -1; }
.pui-cm-dlabel { font-size: 12px; color: var(--muted-foreground); }
.pui-cm-dvalue { font-size: 14px; color: var(--foreground); overflow-wrap: anywhere; }
.pui-cm-dgrid-error { margin: 12px 24px 0; }
@media (max-width: 560px) { .pui-cm-dgrid { grid-template-columns: 1fr; } }

/* ── Claim file caption dialog ────────────────────────────────────────────────────────────────────────────── */
.pui-cd-filetile { width: 48px; height: 48px; flex: none; border-radius: 10px; background: var(--muted); color: var(--muted-foreground); align-items: center; justify-content: center; }

/* ── Correcting a note ────────────────────────────────────────────────────────────────────────────────────── */
.pui-cd-note-correcting { padding: 6px 10px; margin: 0; border: 2px solid var(--tone-info-fg); border-radius: 8px; background: var(--muted); }

/* Dialog error alerts take the danger tint of the boards. */
.pui-lf-quick [data-slot="alert"], .pui-cm-confirm [data-slot="alert"] { background: var(--tone-danger-bg); border-color: oklch(0.88 0.06 25); }
.pui-lf-quick .pui-lf-link { margin-left: -8px; }
.pui-cm-confirm .pui-cm-body [data-slot="alert"] { margin: 0; }

/* The name over a drivers menu (MenusCatalog board): small and muted. */
.cn-dropdown-label.pui-cm-menu-name, .pui-cm-menu-name { font-size: 12px; font-weight: 400; color: var(--muted-foreground); }