/* Product preview mirrors app-shell, SectionCard and commission-run in insurepro-front.
   Tour controls sit outside the shell. Only the populated demo routes are exposed. */
.demo-tour { display: flex; align-items: center; gap: 24px; margin: 0 0 16px; }
.demo-tour > .meta { flex: none; font-family: var(--font-body); }
.demo-tour .workflow { display: flex; flex-wrap: wrap; gap: 6px; border: 0; background: none; }
.demo-tour .workflow button { min-height: 36px; padding: 6px 12px; border: 1px solid transparent; border-radius: 6px; gap: 8px; font-size: 12px; }
.demo-tour .workflow button[aria-selected="true"] { background: var(--secondary); border-color: var(--border); }
.demo-tour .workflow button::after, .demo-tour .step-arrow { display: none; }
.demo-tour .workflow .step-number { width: auto; height: auto; border: 0; background: none; color: var(--muted-foreground); font-family: var(--font-body); }
.workspace-frame { background: var(--sidebar); border: 1px solid var(--border); border-radius: 12px; padding: 0; overflow: hidden; }
.workbench { grid-template-columns: 208px minmax(0,1fr); background: var(--sidebar); border-radius: inherit; align-items: stretch; }
.module-rail { display: flex; flex-direction: column; gap: 2px; padding: 14px 8px 12px; border-radius: 0; min-width: 0; }
.demo-org { display: flex; align-items: center; gap: 10px; margin: 0 8px 24px; font-size: 13px; }
.demo-org > div { flex: 1; min-width: 0; }
.demo-org strong { display: block; font-weight: 500; font-size: 12px; }
.demo-org small { display: block; color: var(--muted-foreground); font-size: 11px; }
.org-avatar { display: grid; place-items: center; width: 28px; height: 28px; flex: none; background: var(--primary); color: var(--primary-foreground); border-radius: 6px; }
.module-rail .rail-heading { display: flex; justify-content: space-between; margin: 20px 8px 9px; font: 11px var(--font-body); text-transform: none; letter-spacing: 0; }
.module-rail button { text-align: left; justify-content: flex-start; position: relative; min-height: 34px; padding: 7px 8px; margin: 0; border: 0; border-radius: 6px; font-size: 12px; color: var(--muted-foreground); gap: 8px; }
.module-rail button svg { width: 15px; height: 15px; flex: none; }
.module-rail button[aria-pressed="true"] { background: var(--secondary); color: var(--foreground); font-weight: 500; }
.module-rail button[aria-pressed="true"]::before { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; background: var(--indicator); }
.demo-user { margin: auto -8px -12px; padding: 14px 16px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; font-size: 12px; }
.demo-user > span { background: var(--secondary); border-radius: 50%; width: 28px; height: 28px; display: grid; place-items: center; font-size: 10px; color: var(--muted-foreground); }
.demo-user small { display: block; color: var(--muted-foreground); font-size: 10px; margin-top: 2px; }
#work-panel { margin: 8px 8px 8px 0; background: var(--background); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
#work-panel:focus { outline: none; }
#work-panel:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.document-head { height: 48px; padding: 0 24px; }
.document-head .meta { font: 12px var(--font-body); color: var(--foreground); }
.quiet-tag { text-transform: none; letter-spacing: 0; font: 10px var(--font-body); border-radius: 4px; }
.document-foot { padding: 6px 24px; font-size: 10px; }
.reset-btn { font-size: 10px; min-height: 36px; }
.run-page { padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.workspace-frame .document-title { margin: 0 0 2px; align-items: center; }
.workspace-frame .document-title h2 { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -.01em; }
.workspace-frame .document-title p { font-size: 12px; line-height: 18px; margin-top: 4px; max-width: 100ch; }
.run-card { border: 1px solid var(--border); border-radius: 10px; background: var(--card); box-shadow: var(--shadow-surface); overflow: hidden; }
.run-card-heading { padding: 18px 20px 14px; }
.run-card-heading h3 { font-size: 15px; font-weight: 600; line-height: 20px; letter-spacing: 0; }
.run-card-heading p { font-size: 12px; color: var(--muted-foreground); margin-top: 4px; }
.run-filters { display: grid; grid-template-columns: minmax(0,1fr) 210px; gap: 16px; padding: 0 20px 20px; }
.run-filters label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.run-filters select { height: 36px; width: 100%; min-width: 0; padding: 0 10px; border: 1px solid var(--input); border-radius: 6px; color: var(--foreground); background: var(--secondary); font-size: 12px; }
.run-period { display: grid; grid-template-columns: 1fr 85px; gap: 8px; }
.run-import { padding: 0 20px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 12px; color: var(--muted-foreground); }
.workspace-frame .doc-btn { min-height: 34px; padding: 7px 12px; font: 500 12px var(--font-body); gap: 8px; border-color: var(--input); }
.workspace-frame .doc-btn.solid { border-color: var(--primary); }
.run-hint { font-size: 11px; color: var(--muted-foreground); max-width: 30ch; }
.run-chips { display: flex; gap: 6px; padding: 0 20px 16px; flex-wrap: wrap; }
.run-chip { background: transparent; color: var(--muted-foreground); border: 1px solid var(--input); border-radius: 6px; padding: 4px 9px; min-height: 28px; font-size: 11px; }
.run-chip[aria-pressed="true"] { background: var(--secondary); color: var(--foreground); }
.run-chip:hover { background: var(--muted); }
.run-table-scroll { overflow-x: auto; border-top: 1px solid var(--border); }
.run-table { border-collapse: collapse; width: 100%; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.run-table th { font-weight: 500; font-size: 11px; color: var(--muted-foreground); background: var(--muted); }
.run-table td, .run-table th { height: 44px; padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.run-table tbody tr:last-child td { border-bottom: 0; }
.run-table tbody tr:hover { background: var(--muted); }
.run-table td:first-child, .run-table th:first-child { width: 32px; padding-right: 4px; }
.run-table input { accent-color: var(--primary); width: 14px; height: 14px; opacity: 1; vertical-align: middle; }
.run-table .run-amount { text-align: right; font-family: var(--font-body); }
.run-amount small, .run-totals small { font-size: 10px; font-weight: 400; color: var(--muted-foreground); }
.run-table .run-policy { font-family: var(--font-mono); font-size: 11px; position: relative; padding-left: 14px; }
.row-stripe { position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; background: var(--muted-foreground); border-radius: 3px; }
.row-stripe.warning { background: var(--warning); }
.row-stripe.success { background: var(--success); }
.run-source { background: var(--primary); color: var(--primary-foreground); border-radius: 5px; padding: 4px 8px; font-size: 11px; }
.workspace-frame { --destructive: #f37b76; }
.run-table .negative { color: var(--destructive); }
.run-table .status { border: 0; border-radius: 4px; font-size: 10px; white-space: nowrap; }
.run-table .table-link { min-height: 28px; padding: 4px 0; font-size: 11px; text-decoration: none; }
.run-table td:last-child .table-link { display: block; }
.run-selection-note { padding: 10px 20px; border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: 10px; background: var(--muted); }
.run-totals { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; padding-top: 4px; }
.run-totals > div { display: flex; flex-direction: column; gap: 3px; }
.run-totals > div > span { font-size: 10px; color: var(--muted-foreground); }
.run-totals strong { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.run-totals .run-total-selected { margin-left: auto; }
.run-total-selected strong { font-size: 20px; }
/* Record previews use the app's compact section cards and property rail. */
.workspace-frame .document-grid { margin: 24px; grid-template-columns: minmax(0,1fr) 230px; gap: 20px; min-height: 520px; }
.workspace-frame .document-main { padding: 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.workspace-frame .document-main .document-title { margin-bottom: 24px; }
.workspace-frame .inspector { padding: 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); gap: 12px; }
.workspace-frame .inspector h3 { font-size: 16px; font-weight: 600; line-height: 22px; letter-spacing: 0; }
.workspace-frame .inspector p { font-size: 12px; }
.workspace-frame .record-fields dt { font-size: 11px; }
.workspace-frame .record-fields dd { font-size: 13px; }
.workspace-frame .num { font-family: var(--font-body); font-variant-numeric: tabular-nums; }
.workspace-frame .input { min-height: 36px; font-size: 13px; }
@media (max-width: 1100px) {
  .workbench { grid-template-columns: 180px minmax(0,1fr); }
  .demo-org { gap: 7px; margin-inline: 4px; }
  .demo-org strong { font-size: 11px; }
  .module-rail button { font-size: 11px; }
  .run-page { padding: 20px; }
  .workspace-frame .document-grid { margin: 20px; grid-template-columns: minmax(0,1fr); }
  .workspace-frame .inspector { display: flex; }
}
@media (max-width: 760px) {
  .workbench { grid-template-columns: minmax(0,1fr); }
  .module-rail { display: none; }
  #work-panel { margin: 6px; border-radius: 8px; }
  .demo-tour { flex-direction: column; align-items: flex-start; gap: 8px; }
  .demo-tour .workflow { width: 100%; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; }
  .demo-tour .workflow button { flex-direction: row; align-items: center; justify-content: center; padding: 8px 4px; gap: 5px; font-size: 11px; }
  .run-page { padding: 16px; gap: 16px; }
  .document-head { padding: 0 16px; }
  .document-foot { padding-inline: 16px; }
  .run-card-heading { padding: 16px 16px 12px; }
  .run-filters { grid-template-columns: 1fr; padding: 0 16px 16px; }
  .run-import { padding: 0 16px 16px; }
  .run-chips { padding-inline: 16px; }
  .run-table { min-width: 440px; }
  .run-table:has(th:nth-child(8)) { min-width: 820px; }
  .run-totals { gap: 14px; }
  .run-totals .run-total-selected { margin-left: 0; }
  .run-totals > .doc-btn { width: 100%; }
  .workspace-frame .document-title { flex-direction: column; align-items: flex-start; }
  .workspace-frame .document-grid { margin: 16px; gap: 16px; }
  .workspace-frame .document-main, .workspace-frame .inspector { padding: 16px; }
  .workspace-frame .record-fields { grid-template-columns: 1fr; }
}
.record-preview { display: grid; grid-template-columns: minmax(0,1fr) 230px; gap: 20px; align-items: start; min-height: 400px; }
.record-properties { padding: 20px; }
.record-properties h3 { font-size: 14px; }
.record-properties dl, .property-fields { margin: 16px 0 0; width: 100%; }
.record-properties dt, .property-fields dt { color: var(--muted-foreground); font-size: 11px; margin-top: 16px; }
.record-properties dd, .property-fields dd { margin: 4px 0 0; font-size: 12px; }
.record-total { display: flex; justify-content: space-between; padding: 16px 20px; font-size: 12px; border-top: 1px solid var(--border); }
.record-total small { color: var(--muted-foreground); font-weight: 400; }
.report-filters { padding-top: 20px; }
.report-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.report-stats > div { padding: 20px; border-right: 1px solid var(--border); min-width: 0; }
.report-stats > div:last-child { border-right: 0; }
.report-stats span { display: block; color: var(--muted-foreground); font-size: 11px; margin-bottom: 8px; }
.report-stats strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.report-stats small { color: var(--muted-foreground); font-size: 10px; font-weight: 400; }
.report-note { max-width: none; }
.demo-menu { display: none; }
@media (max-width: 1000px) {
 .record-preview { grid-template-columns: 1fr; }
 .report-stats strong { font-size: 16px; }
}
@media (max-width: 760px) {
 .workspace-frame { position: relative; }
 .demo-menu { display: grid; place-items: center; min-width: 32px; min-height: 32px; border: 1px solid var(--input); border-radius: 6px; background: transparent; color: var(--foreground); }
 .document-head { gap: 8px; }
 .document-head > .meta { flex: 1; }
 .workspace-frame.nav-open .module-rail { display: flex; position: absolute; top: 56px; bottom: 6px; left: 6px; width: 208px; z-index: 2; box-shadow: 12px 0 30px rgb(0 0 0 / .5); border: 1px solid var(--border); border-radius: 8px; }
 .report-stats { grid-template-columns: 1fr; }
 .report-stats > div { border-right: 0; border-bottom: 1px solid var(--border); padding: 16px; }
 .report-stats > div:last-child { border-bottom: 0; }
}
.record-documents { margin-top: 24px; }
.run-table input[type="checkbox"] { appearance: none; border: 1px solid var(--input); border-radius: 4px; background: transparent; }
.run-table input[type="checkbox"]:checked { background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8 3 3 5-6' fill='none' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E") center / 12px no-repeat; border-color: var(--primary); }
.source-choice { display: inline-flex; border: 1px solid var(--input); border-radius: 6px; overflow: hidden; }
.source-choice button { border: 0; padding: 5px 8px; background: transparent; color: var(--muted-foreground); font-size: 11px; min-height: 28px; }
.source-choice button + button { border-left: 1px solid var(--input); }
.source-choice button[aria-pressed="true"] { background: var(--primary); color: var(--primary-foreground); }
.source-choice button:hover { background: var(--secondary); color: var(--foreground); }
.padded-fields { padding: 0 20px 20px; }
.record-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 20px; }
.record-properties .record-actions { padding: 20px 0 0; }
.empty-demo { padding: 0 20px 24px; font-size: 13px; color: var(--muted-foreground); }
.run-table .table-link { font-family: var(--font-body); }
.run-table input[type="checkbox"] { cursor: pointer; }
.demo-org .sidebar-collapse { min-height: 28px; min-width: 24px; padding: 4px; color: var(--muted-foreground); }
.workspace-frame.rail-collapsed .workbench { grid-template-columns: 48px minmax(0,1fr); }
.workspace-frame.rail-collapsed .demo-org { margin: 0 0 16px; justify-content: center; }
.workspace-frame.rail-collapsed .demo-org > div, .workspace-frame.rail-collapsed .org-avatar,
.workspace-frame.rail-collapsed .rail-heading, .workspace-frame.rail-collapsed .module-rail > button > span,
.workspace-frame.rail-collapsed .demo-user { display: none; }
.workspace-frame.rail-collapsed .module-rail > button { justify-content: center; }
.workspace-frame.rail-collapsed .module-rail > button svg { width: 17px; }
@media (max-width: 760px) {
 .workspace-frame.rail-collapsed .workbench { grid-template-columns: minmax(0,1fr); }
 .sidebar-collapse { display: none !important; }
 .workspace-frame.rail-collapsed .module-rail > button > span, .workspace-frame.rail-collapsed .rail-heading,
 .workspace-frame.rail-collapsed .demo-org > div, .workspace-frame.rail-collapsed .org-avatar { display: block; }
 .workspace-frame.rail-collapsed .module-rail > button { justify-content: flex-start; }
}