/* CPDreflect: ink, paper and brass. Shared by every public and working surface. */
.cpd-ui {
  --navy: #162a4e; --navy-light: #203858; --navy-deep: #10233f;
  --gold: #d4b57d; --gold-dark: #856329; --gold-deep: #74531f; --gold-light: #f5efdf;
  --cream: #f8f7f3; --cream-warm: #efeee8; --surface: #f8f7f3; --surface-card: #fffefa;
  --ink: #162a4e; --ink-soft: #526075; --ink-muted: #616c7b;
  --border: #dcdedc; --border-light: #e7e8e4;
  --accent: #d4b57d; --accent-dark: #856329;
  --font-display: 'Playfair Display', Georgia, serif; --font-body: 'DM Sans', Arial, sans-serif;
  --radius: 3px; --radius-sm: 2px; --radius-lg: 3px;
  --shadow-sm: none; --shadow-md: 0 18px 45px -30px #10233f50;
  --success: #24624d; --success-bg: #edf5ef; --danger: #a03535;
  margin: 0; background: var(--cream); color: var(--ink);
  font: 400 1rem/1.65 var(--font-body); -webkit-font-smoothing: antialiased;
}
.cpd-ui *, .cpd-ui *::before, .cpd-ui *::after { box-sizing: border-box; }
.cpd-ui :is(button,input,select,textarea) { font-family: var(--font-body); }
.cpd-ui :is(h1,h2,h3,.card-title,.stat-value,.auth-logo,.nav-logo) { font-family: var(--font-display); font-weight: 500; letter-spacing: -.025em; }
.cpd-ui :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline: 2px solid #856329; outline-offset: 4px; box-shadow: none; }
.cpd-ui :is(button,.btn,.nav-link,summary) { touch-action: manipulation; }
.cpd-ui :is(input,select,textarea) { max-width: 100%; font-size: 1rem; border-radius: 2px; }
.cpd-ui :is(a,button,input,textarea,select,summary,[id]) { scroll-margin-block: 110px 24px; }
.cpd-ui button:not(.linklike):not(.flash-close):not(.toast):not(.verify-dismiss) { min-height: 44px; }
.cpd-ui .cpd-icon { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.18em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cpd-ui .skip-link { position: absolute; left: 24px; top: -100px; z-index: 10001; padding: 12px 20px; background: #fffefa; color: #162a4e; }
.cpd-ui .skip-link:focus { top: 10px; }
.cpd-ui .app-nav { background: var(--navy-deep); border-bottom: 1px solid #d4b57d55; padding-inline: clamp(20px,4vw,64px); box-shadow: none; }
.cpd-ui .nav-inner { min-height: 82px; height: auto; gap: 24px; }
.cpd-ui .nav-logo { font-size: 1.75rem; white-space: nowrap; padding-block: 16px; }
.cpd-ui .nav-logo span { color: #d4b57d; }
.cpd-ui .nav-links { gap: 4px; }
.cpd-ui .nav-link { color: #d6deea; font-size: .875rem; border-radius: 0; min-height: 44px; display: inline-flex; align-items: center; padding: 10px 12px; border-bottom: 1px solid transparent; }
.cpd-ui .nav-link:hover { background: #ffffff08; color: #fff; }
.cpd-ui .nav-link.active { background: transparent; color: #e4c78e; border-bottom-color: #d4b57d; }
.cpd-ui .nav-link.logout { color: #d6deea; }
.cpd-ui .nav-user { gap: 8px; }
.cpd-ui .nav-name { max-width: 150px; overflow-wrap: anywhere; color: #d6deea; }
.cpd-ui .tier-badge { border-radius: 2px; font-size: .75rem; letter-spacing: .04em; }
.cpd-ui .nav-toggle { width: 44px; height: 44px; border: 1px solid #d4b57d66; border-radius: 2px; font-size: 1.25rem; }
.cpd-ui :is(.wizard-shell,.history-page,.cycle-page,.portfolio-page,.firm-page,.network-page,.settings-page,.detail-page,.pricing-page,.record-page,.import-page) { padding-top: 40px; padding-bottom: 80px; }
.cpd-ui :is(.cycle-page,.firm-page,.network-page) { max-width: 1180px; }
.cpd-ui :is(.history-page,.portfolio-page,.settings-page,.detail-page) { max-width: 1000px; }
.cpd-ui .wizard-shell { max-width: 900px; }
.cpd-ui :is(.wizard-header,.page-header) { text-align: left; }
.cpd-ui :is(.wizard-header,.history-page,.cycle-page,.firm-page,.network-page,.settings-page,.detail-page,.portfolio-page,.record-page,.import-page) h1 { font-size: clamp(2rem,3.5vw,2.85rem); line-height: 1.18; margin-bottom: 12px; }
.cpd-ui :is(.wizard-header .sub,.history-subtitle,.cycle-subtitle,.firm-sub,.network-sub,.settings-subtitle,.lede) { font-size: 1rem; color: var(--ink-soft); line-height: 1.65; }
.cpd-ui :is(.card,.panel,.stat-card,.history-card,.cycle-form,.honesty,.usage-bar,.detail-card,.settings-card,.pricing-card,.firm-card,.import-card) { border-radius: 3px; border-color: var(--border); box-shadow: none; }
.cpd-ui :is(.card,.panel,.detail-card,.settings-card) { background: var(--surface-card); padding: clamp(20px,3vw,32px); }
.cpd-ui :is(.panel h2,.card-title,.settings-card h2) { font-family: var(--font-display); font-size: 1.45rem; font-weight: 500; margin-bottom: 12px; }
.cpd-ui .stats-grid { gap: 0; border: 1px solid var(--border); background: var(--surface-card); margin-block: 26px; }
.cpd-ui .stat-card { text-align: left; border: 0; border-right: 1px solid var(--border); padding: 24px; background: transparent; }
.cpd-ui .stat-card:last-child { border-right: 0; }
.cpd-ui .stat-card.gold { background: #f2eddf; }
.cpd-ui .stat-value { font-size: 2.4rem; line-height: 1.15; }
.cpd-ui :is(.stat-label,.stat-note,.cycle-form label,.statement-hint,.statement-saved,.firm-honesty,.firm-role,.firm-detail summary,.supervision-meta,.supervision-form label) { font-size: .875rem; color: var(--ink-soft); }
.cpd-ui :is(.card-desc,.panel .lede,.detail-section p,.history-title,.statement-a,.firm-empty,.supervision-note p) { font-size: 1rem; }
.cpd-ui :is(.history-card,.history-detail) { padding: 24px; }
.cpd-ui .history-title { font-weight: 600; }
.cpd-ui :is(.history-date,.tag,.badge,.badge-ok,.badge-attn,.detail-section h4,.firm-flags li,.prog-label,.form-group label,.form-hint,.hint,.note) { font-size: .875rem; }
.cpd-ui :is(.badge,.badge-ok,.badge-attn,.tag,.word-estimate) { border-radius: 2px; }
.cpd-ui :is(.honesty,.usage-bar) { background: #f3efe5; border-color: #d8cbae; border-left: 3px solid #a78c56; font-size: .9375rem; }
.cpd-ui .honesty { line-height: 1.7; }
.cpd-ui .table-scroll { overflow-x: auto; max-width: 100%; margin-bottom: 16px; }
.cpd-ui :is(.firm-table,.index-table,.cycle-table) { font-size: .9375rem; }
.cpd-ui :is(.firm-table,.index-table,.cycle-table) th { font-size: .8125rem; background: #eeeee8; color: #526075; padding: 14px 12px; border-bottom: 1px solid #c7c9c6; }
.cpd-ui :is(.firm-table,.index-table,.cycle-table) td { padding: 16px 12px; border-bottom: 1px solid var(--border); }
.cpd-ui :is(.btn,.btn-primary,.btn-secondary,.btn-gold,.btn-outline,.detail-actions button,.detail-actions a,.filter-bar .btn-clear) { border-radius: 2px; font: 600 .9375rem/1.4 var(--font-body); min-height: 46px; padding: 12px 20px; transition: background .2s,border-color .2s; }
.cpd-ui .btn-primary, .cpd-ui .btn-gold { background: #d4b57d; color: #10233f; border: 1px solid #c1a166; box-shadow: inset 0 1px 0 #ffffff40; }
.cpd-ui .btn-primary:hover, .cpd-ui .btn-gold:hover { background: #e1c793; transform: none; box-shadow: none; }
.cpd-ui :is(.btn-secondary,.btn-outline) { background: transparent; color: var(--ink); border: 1px solid #a8b0b9; }
.cpd-ui :is(.btn-secondary,.btn-outline):hover { background: #eeeee8; border-color: #856329; }
.cpd-ui .btn-danger { background: #a03535; color: white; }
.cpd-ui .input-tabs { background: #eeeee8; border-radius: 2px; padding: 3px; }
.cpd-ui .input-tab { border-radius: 2px; font-size: .9375rem; }
.cpd-ui .input-tab.active { box-shadow: none; background: #fffefa; border-bottom: 2px solid #856329; }
.cpd-ui .prog-num { border-radius: 2px; font-weight: 500; }
.cpd-ui .prog-step.active .prog-num { transform: none; }
.cpd-ui .prog-step.done .prog-num { animation: none; }
.cpd-ui .upload-zone { border-radius: 2px; background: #fbfaf6; }
.cpd-ui :is(.takeaway-item,.guided-option,.option-card,.template-btn) { border-radius: 2px; }
.cpd-ui .verify-banner { background: #f2ebdb; border-bottom-color: #cfbc96; color: #293b53; font-size: .875rem; text-align: left; }
.cpd-ui .verify-dismiss { min-width: 44px; min-height: 44px; }
.cpd-ui .brand-footer { border-top: 1px solid var(--border); max-width: 1180px; margin: 0 auto; padding: 26px 24px; display: flex; justify-content: space-between; gap: 20px; color: var(--ink-soft); font-size: .875rem; flex-wrap: wrap; }
.cpd-ui .brand-footer a { color: #526075; margin-left: 18px; text-underline-offset: 4px; }
.cpd-ui :is(.own-wrap,.imp-wrap) { max-width: 900px; padding: 40px 24px 80px; }
.cpd-ui :is(.own-wrap,.imp-wrap) h1 { font-size: clamp(2rem,3.5vw,2.85rem); line-height: 1.2; margin-bottom: 20px; }
.cpd-ui :is(.own-wrap,.imp-wrap) a { color: #74531f; text-underline-offset: 4px; }
.cpd-ui :is(.own-note,.imp-note) { background: #f3efe5; border-color: #d8cbae; border-radius: 2px; padding: 18px; font-size: .9375rem; }
.cpd-ui :is(.own-hint,.imp-tmpl,.own-check,.own-field label,.own-section label) { font-size: .875rem; color: #526075; }
.cpd-ui .own-field :is(input,select), .cpd-ui .own-wrap textarea, .cpd-ui .imp-wrap textarea { font-size: 1rem; padding: 12px; border-radius: 2px; border-color: #b9bfc4; background: #fffefa; }
.cpd-ui :is(.own-actions,.imp-actions) { flex-wrap: wrap; gap: 14px; }
.cpd-ui .admin-page { max-width: 1180px; padding-top: 40px; }
.cpd-ui .admin-page h1 { font-size: clamp(2rem,3.5vw,2.85rem); line-height: 1.2; margin-bottom: 24px; }
.cpd-ui .kpi-card { border-radius: 2px; background: #fffefa; padding: 24px; }
.cpd-ui :is(.kpi-label,.kpi-sub,.tier-tag,.status-tag) { font-size: .875rem; }
.cpd-ui .kpi-value { font: 400 2.2rem/1.2 var(--font-display); }
.cpd-ui .admin-table { font-size: .9375rem; }
.cpd-ui .admin-table th { font-size: .8125rem; background: #eeeee8; padding: 14px 12px; color: #526075; }
.cpd-ui .admin-table td { padding: 14px 12px; }
.cpd-ui .pricing-page { max-width: 1040px; }
.cpd-ui .pricing-header h1 { font: 400 clamp(2.1rem,4vw,3.3rem)/1.2 var(--font-display); }
.cpd-ui .pricing-header p { font-size: 1rem; color: #526075; }
.cpd-ui .pricing-cards { gap: 28px; }
.cpd-ui .pricing-card { padding: 32px; background: #fffefa; border-color: #cbd0cd; }
.cpd-ui .pricing-card.premium { border-color: #a78c56; }
.cpd-ui .pricing-card h2 { font: 500 1.7rem/1.3 var(--font-display); }
.cpd-ui .price { font: 400 3.1rem/1.2 var(--font-display); }
.cpd-ui .features-list li { font-size: 1rem; }
.cpd-ui .features-list li::before { color: #856329; }
.cpd-ui .features-list li.premium-feature::before { content: '✓'; color: #856329; }
.cpd-ui :is(.popular-badge,.save-badge) { background: #d4b57d; color: #10233f; border-radius: 2px; }
.cpd-ui .billing-toggle { background: #eeeee8; border-radius: 2px; }
.cpd-ui .toggle-btn { border-radius: 2px; font-size: .9375rem; }
.cpd-ui .toggle-btn.active { background: #162a4e; color: #fffefa; box-shadow: none; }
.cpd-ui :is(.billed-note,.trust-item) { font-size: .875rem; color: #526075; }
.cpd-ui .trust-item .cpd-icon { color: #856329; width: 20px; height: 20px; }
.cpd-ui :is(.upgrade-modal,.tour-box) { border-radius: 3px; border: 1px solid #bba781; background: #fffefa; }
.cpd-ui .modal-symbol { color: #856329; font-size: 2.5rem; margin-bottom: 14px; }
.cpd-ui .upgrade-modal .feature-list li::before { color: #856329; }
.cpd-ui .usage-bar.urgent { animation: none; background: #f2eddf; border-color: #bba781; }
.cpd-ui .usage-bar.depleted { animation: none; }
.cpd-ui .wizard-shell .btn .cpd-icon + .cpd-icon { display: none; }
.cpd-ui :is(.start-wrap,.join-wrap) { max-width: 760px; padding: 40px 24px 80px; }
.cpd-ui :is(.start-wrap,.join-wrap) h1 { font-size: clamp(2rem,3.5vw,2.85rem); line-height: 1.2; margin-bottom: 20px; }
.cpd-ui .start-box { border-radius: 2px; background: #fffefa; padding: 26px; }
.cpd-ui .start-box h2 { font-size: 1.5rem; }
.cpd-ui :is(.start-lede,.start-box p) { font-size: 1rem; }
.cpd-ui .start-honesty { font-size: .875rem; color: #526075; }
.cpd-ui .start-form input { border-radius: 2px; padding: 12px; }
.cpd-ui :is(.takeaway-pill,.checkbox-item) { width: 100%; font-family: var(--font-body); text-align: left; border-radius: 2px; font-size: .9375rem; }
.cpd-ui :is(.takeaway-pill,.checkbox-item):disabled { cursor: not-allowed; }
.cpd-ui :is(.takeaway-pill,.checkbox-item).selected { background: #f3eddf; border-color: #ad905a; }
.cpd-ui.auth-body { background: #10233f; min-height: 100svh; padding: 48px 20px; }
.cpd-ui .auth-container { max-width: 500px; padding: 0; }
.cpd-ui .auth-card { padding: clamp(26px,5vw,48px); background: #fffefa; border: 1px solid #cfbc96; border-top: 3px solid #d4b57d; border-radius: 2px; box-shadow: 0 24px 75px #0003; }
.cpd-ui .auth-header { text-align: left; margin-bottom: 30px; }
.cpd-ui .auth-logo { font-size: 1.85rem; margin-bottom: 38px; }
.cpd-ui .auth-logo span { color: #856329; }
.cpd-ui .auth-header h1 { font-size: 2.3rem; line-height: 1.2; }
.cpd-ui .auth-header p { font-size: 1rem; margin-top: 12px; }
.cpd-ui .auth-form input { min-height: 48px; border-color: #b9bfc4; border-radius: 2px; font-size: 1rem; }
.cpd-ui .auth-links { font-size: .9375rem; }
.cpd-ui .auth-links a { color: #74531f; }
.cpd-ui #cookie-banner { background: #10233f !important; border-top: 1px solid #d4b57d55; box-shadow: none !important; }
.cpd-ui #cookie-banner a { color: #e4c78e !important; }
.cpd-ui #cookie-banner button { background: #d4b57d !important; color: #10233f !important; border-radius: 2px !important; min-height: 44px; }
/* The public demo is a working document, with the same paper surface as the app. */
.cpd-ui.demo-page { --white: #fffefa; --panel: #fffefa; --edge: #dcdedc; --muted: #526075; --text: #35465b; --slate: #526075; background: #f8f7f3; color: #162a4e; }
.cpd-ui.demo-page .hdr { padding: 20px max(24px,calc((100vw - 1160px)/2)); background: #10233f; border-bottom: 1px solid #d4b57d77; gap: 16px; }
.cpd-ui.demo-page .logo span { font-family: var(--font-display); font-size: 1.75rem; font-weight: 500; }
.cpd-ui.demo-page .logo span:last-child { color: #d4b57d; }
.cpd-ui.demo-page :is(.hdr-sub,.hdr-label) { font-size: .875rem; color: #d6deea; }
.cpd-ui.demo-page .hdr a:not(.logo) { color: #e4c78e; }
.cpd-ui.demo-page .wrap { max-width: 1180px; padding: 24px 24px 64px; }
.cpd-ui.demo-page .banner { color: #74401d; background: #f5eddd; border-color: #d8c6a4; border-radius: 2px; font-size: .9375rem; }
.cpd-ui.demo-page .banner strong { color: #4c3420; }
.cpd-ui.demo-page .intro { font-size: 1rem; margin-block: 22px; }
.cpd-ui.demo-page .intro strong { color: #162a4e; }
.cpd-ui.demo-page :is(.source,.panel,.doc) { border-radius: 2px; border: 1px solid #dcdedc; padding: 24px; }
.cpd-ui.demo-page :is(.source pre,.doc-meta,.doc-section-label,.step-hint,.step-num,.note,.source-tag,.source-label) { font-size: .875rem; }
.cpd-ui.demo-page .source pre { color: #526075; line-height: 1.7; }
.cpd-ui.demo-page :is(.source-label,.doc-section-label) { color: #74531f; }
.cpd-ui.demo-page .source-tag { color: #74401d; background: #f5eddd; }
.cpd-ui.demo-page :is(.step-title,.chip,.tmpl,.ctx-input,.val-gate,.val-sugg) { font-size: .9375rem; }
.cpd-ui.demo-page .steps-grid { gap: 24px; }
.cpd-ui.demo-page .chip { padding: 12px; margin-bottom: 8px; border-radius: 2px; }
.cpd-ui.demo-page .chip.on, .cpd-ui.demo-page .tmpl.on { background: #f3eddf; color: #74531f; border-color: #ad905a; }
.cpd-ui.demo-page .ctx-input { background: white; min-height: 60px; border-radius: 2px; padding: 12px; }
.cpd-ui.demo-page .panel-title { font-family: var(--font-display); font-size: 1.45rem; color: #162a4e; text-transform: none; letter-spacing: -.02em; }
.cpd-ui.demo-page .doc { border-top: 3px solid #a78c56; }
.cpd-ui.demo-page .doc-title { font-family: var(--font-display); font-size: 1.8rem; font-weight: 500; }
.cpd-ui.demo-page .doc-section p { font-size: 1rem; line-height: 1.8; }
.cpd-ui.demo-page .err { color: #a03535; }
.cpd-ui.demo-page .footer { color: #526075; font-size: .875rem; border-color: #dcdedc; }
@media (max-width: 1350px) {
  .cpd-ui .nav-toggle { display: block; }
  .cpd-ui .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 16px 24px 24px; background: #10233f; border-bottom: 1px solid #d4b57d66; box-shadow: 0 16px 20px #10233f25; }
  .cpd-ui .nav-links.open { display: flex; flex-direction: column; align-items: stretch; max-height: calc(100svh - 84px); overflow-y: auto; }
  .cpd-ui .nav-user { flex-wrap: wrap; margin: 12px 0 0; padding: 16px 0 0; border-left: 0; border-top: 1px solid #ffffff22; }
  .cpd-ui .nav-name { max-width: none; }
}
@media (max-width: 600px) {
  .cpd-ui .nav-inner { min-height: 72px; }
  .cpd-ui :is(.history-header,.history-meta) { flex-wrap: wrap; }
  .cpd-ui .history-header { gap: 12px; }
  .cpd-ui .history-title { flex-basis: 100%; }
  .cpd-ui :is(.wizard-shell,.history-page,.cycle-page,.firm-page,.network-page,.portfolio-page) { padding-inline: 20px; }
  .cpd-ui .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cpd-ui .stat-card { padding: 20px 16px; border-bottom: 1px solid var(--border); }
  .cpd-ui .stat-value { font-size: 2rem; }
  .cpd-ui .cycle-form .field { min-width: 0; flex: 1 1 130px; }
  .cpd-ui .input-tabs { flex-wrap: wrap; }
  .cpd-ui .input-tab { flex: 1 1 40%; }
  .cpd-ui .brand-footer a { margin: 0 18px 0 0; }
  .cpd-ui .cov-row { grid-template-columns: minmax(0,1fr) auto; }
  .cpd-ui .cov-row > :last-child { grid-column: 2; }
  .cpd-ui.demo-page .step-col { min-width: 0; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cpd-ui *, .cpd-ui *::before, .cpd-ui *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .cpd-ui { background: white; color: #162a4e; }
  .cpd-ui :is(.app-nav,.skip-link,.brand-footer,#cookie-banner,.verify-banner) { display: none !important; }
  .cpd-ui .table-scroll { overflow: visible; }
  .cpd-ui :is(.panel,.card,.stat-card) { box-shadow: none; }
}