/* bindnow.css — shared Bind Now / New Submission styles.
 * Loaded alongside the unmodified shared styles.css; adds, never overrides,
 * the shared config-panel and form primitives. Palette values are set as CSS
 * variables by bindnow-shell.js from BindNowConfig.palette. */

body.bindnow { background: var(--bn-surface, #f5f7fa); }

.bn-header {
  background: var(--bn-primary, #0091b6);
  color: #fff;
  padding: 14px 24px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.bn-wordmark { font-size: 22px; font-weight: 700; letter-spacing: 0.5px; }
.bn-system { font-size: 13px; opacity: 0.85; }

.bn-main { max-width: 860px; margin: 24px auto; padding: 0 16px; }

.bn-card {
  background: #fff;
  border: 1px solid #d9dee6;
  border-radius: 10px;
  padding: 22px 24px;
  margin-bottom: 18px;
}
.bn-card h2 { font-size: 17px; margin: 0 0 12px; color: var(--bn-primary, #0091b6); }

.bn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-bottom: 12px; }
.bn-grid label, #bn-upload-block > label, #bn-addmore > label { display: block; font-size: 12px; font-weight: 600; color: #444; margin-bottom: 4px; }
.bn-grid input, .bn-grid select {
  width: 100%; box-sizing: border-box; padding: 8px 10px;
  border: 1px solid #c4ccd6; border-radius: 6px; font-size: 14px; background: #fff;
}
.bn-npi { display: block; margin: 10px 0 14px; font-size: 13px; }

.bn-primary {
  background: var(--bn-primary, #0091b6); color: #fff; border: none;
  border-radius: 6px; padding: 10px 22px; font-size: 15px; font-weight: 600; cursor: pointer;
}
.bn-primary:disabled { background: #9aa4b2; cursor: not-allowed; }
.bn-inline-error { color: #b42318; background: #fee4e2; border-radius: 6px; padding: 10px 12px; margin: 10px 0; font-size: 13px; }

/* Upload widget */
.bn-upload-area {
  border: 2px dashed #c4ccd6; border-radius: 10px; padding: 28px; text-align: center;
  cursor: pointer; background: #fafbfc; transition: border-color .15s, background .15s;
}
.bn-upload-area.dragging, .bn-upload-area:hover { border-color: var(--bn-primary, #0091b6); background: #eef3fb; }
.bn-upload-hint { color: #667085; font-size: 13px; margin-top: 6px; }
.bn-file-list { margin-top: 10px; }
.bn-file-card {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  border: 1px solid #d9dee6; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; background: #fff;
}
.bn-file-name { font-weight: 600; font-size: 14px; }
.bn-file-meta { font-size: 12px; color: #667085; }
.bn-file-state { font-size: 12px; font-weight: 600; }
.bn-file-card.bn-state-error { border-color: #f04438; background: #fef3f2; }
.bn-file-card.bn-state-error .bn-file-state { color: #b42318; }
.bn-remove-file, .bn-upload-clear {
  background: #f3f4f6; border: none; border-radius: 6px; padding: 6px 12px; font-size: 12px; cursor: pointer;
}
.bn-upload-error { color: #b42318; background: #fee4e2; border-radius: 6px; padding: 10px 12px; margin-top: 8px; font-size: 13px; }

/* Progress */
.bn-subid { font-family: monospace; font-size: 12px; color: #667085; margin-bottom: 8px; }
#bn-progress-note { margin-top: 8px; font-size: 13px; color: #9a6700; }

/* Embed */
#bn-embed-iframe { width: 100%; height: 560px; border: 1px solid #d9dee6; border-radius: 8px; }
/* Interstitial while the presigned call is in flight (F2). */
#bn-embed-loading {
  height: 560px; display: flex; align-items: center; justify-content: center;
  border: 1px dashed #c4ccd6; border-radius: 8px; background: #fafbfc;
  color: #667085; font-size: 14px;
}

/* Loss Input Screen */
#bn-li-counter { font-size: 13px; font-weight: 700; color: var(--bn-primary, #0091b6); margin-bottom: 10px; }
#bn-li-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 16px; }
.bn-li-field label { display: block; font-size: 11px; font-weight: 600; color: #444; margin-bottom: 3px; }
.bn-li-box {
  border: 1px solid #98a2b3; border-radius: 4px; background: #fff;
  min-height: 32px; padding: 6px 8px; font-size: 14px; box-sizing: border-box;
}
.bn-li-box.bn-li-landed { background: #fff7e0; transition: background .1s; }
.bn-caret { display: inline-block; width: 1px; height: 16px; background: #333; animation: bn-blink 1s steps(1) infinite; }
@keyframes bn-blink { 50% { opacity: 0; } }
#bn-li-claims table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 12px; }
#bn-li-claims th, #bn-li-claims td { border: 1px solid #e0e4ea; padding: 5px 7px; text-align: left; }
#bn-li-footer { margin-top: 10px; font-size: 12px; color: #667085; font-family: monospace; }
#bn-replay { float: right; background: none; border: 1px solid #c4ccd6; border-radius: 6px; padding: 4px 10px; font-size: 11px; color: #667085; cursor: pointer; }

/* Outcome */
#bn-outcome-note { font-size: 12px; color: #667085; margin-bottom: 12px; }
/* Forced-outcome disclosure (F5): deliberately louder than the outcome note —
 * it must be as visible above a quote as the forced reason is inside a refer. */
#bn-forced-banner {
  border: 2px solid var(--bn-accent, #F2A900); background: #fff7e0;
  border-radius: 8px; padding: 10px 12px; margin-bottom: 12px;
  font-size: 13px; font-weight: 700; color: #7a5200;
}
#bn-outcome-coverage {
  border-left: 3px solid var(--bn-accent, #F2A900); background: #fff7e0;
  border-radius: 4px; padding: 8px 10px; margin-bottom: 12px; font-size: 13px; color: #7a5200;
}
#bn-quote-card { border: 2px solid var(--bn-bind, #1a7f37); border-radius: 10px; padding: 18px; }
#bn-quote-premium { font-size: 30px; font-weight: 800; color: var(--bn-bind, #1a7f37); }
#bn-quote-disclaimer { font-size: 12px; color: #667085; margin-top: 8px; }
#bn-refer-card { border: 2px solid var(--bn-refer, #9a6700); border-radius: 10px; padding: 18px; }
#bn-refer-reasons { margin: 8px 0 12px; padding-left: 18px; font-size: 13px; }
#bn-addmore { margin-top: 18px; border-top: 1px dashed #d9dee6; padding-top: 14px; }

/* Webhook panel */
#bn-webhook-payload { background: #0f172a; color: #d1e3ff; border-radius: 8px; padding: 12px; font-size: 11px; overflow-x: auto; }
#bn-webhook-line { font-size: 13px; color: #667085; }

/* Error card */
.bn-error-card {
  border: 2px solid #f04438; background: #fef3f2; border-radius: 10px;
  padding: 16px 18px; margin-bottom: 18px;
}
.bn-error-title { font-weight: 700; color: #b42318; margin-bottom: 6px; }
.bn-error-detail { white-space: pre-wrap; font-family: monospace; font-size: 12px; color: #7a271a; margin: 0; }

/* Demo Config toggle contrast fix (Task 4): styles.css sets a dark-sidebar
 * color/border-top for .demo-config-toggle; body.bindnow's light background
 * needs its own override, the way inbox.css overrides it for the light
 * Outlook sidebar. Without this the toggle is near-white-on-near-white. */
body.bindnow .demo-config-toggle { color: #3a4a5a; border-top-color: #d9dee6; }

/* Demo Config resolved-route line (Task 4) */
.bn-cfg-route { font-family: monospace; font-size: 11px; color: #667085; margin: 4px 0 10px; word-break: break-all; }

/* ---------------------------- Review page ------------------------------ */
/* Submission card: identity, clock, counts, one row per document. */
.bn-sub-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bn-sub-clock { font-family: monospace; font-size: 12px; color: #667085; }
#bn-sub-elapsed { font-family: monospace; }
.bn-sub-meta { font-size: 13px; color: #344054; }
.bn-sub-counts { font-size: 12px; color: #667085; margin: 10px 0 4px; }
#bn-doc-empty { font-size: 13px; color: #667085; border-top: 1px solid #e0e4ea; padding-top: 10px; }
#bn-doc-rows { border-top: 1px solid #e0e4ea; }
.bn-doc-row {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: 14px; align-items: center;
  border-bottom: 1px solid #e0e4ea; padding: 10px 0;
}
.bn-doc-name { font-size: 14px; font-weight: 600; word-break: break-all; }
.bn-doc-sub { font-size: 12px; color: #667085; }
.bn-doc-type { font-size: 12px; color: #344054; white-space: nowrap; }
.bn-doc-state { font-size: 12px; font-weight: 600; white-space: nowrap; }
.bn-doc-row.bn-doc-processing .bn-doc-state { color: #667085; }
.bn-doc-row.bn-doc-ready_for_review .bn-doc-state { color: var(--bn-primary, #0091b6); }
.bn-doc-row.bn-doc-complete .bn-doc-state { color: var(--bn-bind, #1a7f37); }
.bn-doc-row.bn-doc-unknown .bn-doc-state { color: #b42318; }
.bn-doc-row.bn-doc-idle .bn-doc-state { color: #98a2b3; }
.bn-doc-open {
  background: var(--bn-primary, #0091b6); color: #fff; border: none; border-radius: 6px;
  padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.bn-doc-open.bn-doc-open-secondary { background: #f3f4f6; color: #3a4a5a; }
.bn-spinner {
  display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px;
  border: 2px solid #d9dee6; border-top-color: var(--bn-primary, #0091b6); border-radius: 50%;
  animation: bn-spin .8s linear infinite;
}
@keyframes bn-spin { to { transform: rotate(360deg); } }

/* Cold open / version mismatch / transport mismatch. */
#bn-empty {
  max-width: 560px; margin: 80px auto; background: #fff; border: 1px solid #d9dee6;
  border-radius: 10px; padding: 28px; text-align: center;
}
#bn-empty .bn-empty-title { font-size: 17px; font-weight: 700; color: var(--bn-primary, #0091b6); }
#bn-empty .bn-empty-detail { font-size: 13px; color: #667085; margin: 10px 0 16px; }
#bn-empty-link { font-size: 13px; font-weight: 600; color: var(--bn-primary, #0091b6); }

/* Accept confirmation. */
#bn-accept, #bn-ack { margin-top: 14px; }
#bn-accepted { border: 2px solid var(--bn-bind, #1a7f37); border-radius: 10px; padding: 18px; }
.bn-accepted-title { font-size: 18px; font-weight: 800; color: var(--bn-bind, #1a7f37); }
.bn-accepted-detail { font-size: 14px; margin-top: 6px; }
.bn-accepted-disclosure { font-size: 12px; color: #667085; margin-top: 10px; }
/* F5: an acknowledged referral is not a bind, and must not be bind-green. */
#bn-accepted.bn-accepted-refer { border-color: var(--bn-refer, #9a6700); }
#bn-accepted.bn-accepted-refer .bn-accepted-title { color: var(--bn-refer, #9a6700); }

#bn-start-another {
  display: block; margin: 4px auto 40px; background: none; border: 1px solid #c4ccd6;
  border-radius: 6px; padding: 8px 14px; font-size: 13px; color: #3a4a5a; cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * In-app New Submission view (index.html #bindnow-view).
 * The same Bind Now card, wearing the workbench's chrome instead of the
 * standalone page's blue header band. The Bind Now identity moves into the
 * card as a small brand line so it survives the move without shouting.
 * ------------------------------------------------------------------------- */
.bn-inapp { padding: 4px 0 24px; }

/* Two columns. The form panel is fixed — it holds a known set of fields and
 * never scrolls. The attached-document list sits beside it and takes the
 * scrollbar instead, so any number of files leaves the form exactly where it
 * was and the submit button always on screen. */
.bn-inapp-cols {
  display: flex; align-items: flex-start; gap: 18px;
  max-width: 1180px;
}
.bn-inapp-form { flex: 0 1 640px; min-width: 0; margin-bottom: 0; }
.bn-doclist-card {
  flex: 1 1 300px; min-width: 250px; max-width: 420px;
  margin-bottom: 0; padding: 16px 18px;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 190px);
  position: sticky; top: 12px;
}
.bn-doclist-head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #e6e9ee;
}
.bn-doclist-title { font-size: 13px; font-weight: 700; color: var(--bn-primary, #0091b6); }
.bn-doclist-count {
  font-size: 12px; font-weight: 700; color: #475467;
  background: #f2f4f7; border-radius: 10px; padding: 1px 9px;
}
.bn-doclist-body { flex: 1 1 auto; overflow-y: auto; min-height: 56px; }
.bn-doclist-empty { font-size: 12px; color: #98a2b3; line-height: 1.5; padding: 4px 0; }

/* Scoped to the side panel so the standalone bindnow.html cards are untouched:
 * a narrow column has to wrap long filenames rather than overflow. */
.bn-doclist-body .bn-file-list { margin-top: 0; }
.bn-doclist-body .bn-file-card { align-items: flex-start; }
.bn-doclist-body .bn-file-card > div { min-width: 0; }
.bn-doclist-body .bn-file-name { font-size: 13px; overflow-wrap: anywhere; }
.bn-doclist-body .bn-remove-file { flex: 0 0 auto; }

.bn-inapp-brand {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid #e6e9ee;
}
.bn-inapp-wordmark {
  font-size: 18px; font-weight: 700; letter-spacing: 0.3px;
  color: var(--bn-primary, #0091b6);
}
.bn-inapp-system { font-size: 12px; color: #667085; }

/* The file list used to sit between the dropzone and this row; with it moved to
 * the side panel, the row needs its own separation from the dropzone. */
.bn-submit-row { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.bn-progress { font-size: 13px; color: #475467; }

/* A submitted batch's worklist row: visibly landed, not yet openable. */
.worklist-table tr.wl-row-submitted { cursor: default; background: #f4f8ff; }
.worklist-table tr.wl-row-submitted:hover { background: #eaf1ff; }
.worklist-table tr.wl-row-submitted td:first-child {
  box-shadow: inset 3px 0 0 var(--bn-primary, #0091b6);
  font-weight: 600;
}

/* Demo Config panel hint text. */
.config-hint { font-size: 11px; color: #667085; margin-top: 4px; line-height: 1.4; }
.config-hint code { font-family: monospace; background: #f2f4f7; padding: 1px 4px; border-radius: 3px; }

/* Demo Config action button (Clear remembered submissions). */
.config-btn {
  width: 100%; box-sizing: border-box;
  background: #fff; color: #b42318;
  border: 1px solid #f3b0aa; border-radius: 6px;
  padding: 7px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.config-btn:hover { background: #fef3f2; border-color: #f04438; }
.config-btn-neutral { color: #1a2a3a; border-color: #c5cdd8; }
.config-btn-neutral:hover { background: #f2f4f7; border-color: #2a9d8f; }

/* Demo Config: upload destinations (upload-destinations.js). */
.config-dest-list { list-style: none; margin: 0; padding: 0; border: 1px solid #e4e7ec; border-radius: 4px; }
.config-dest-list li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-top: 1px solid #e4e7ec; }
.config-dest-list li:first-child { border-top: none; }
.config-dest-text { flex: 1; min-width: 0; }
.config-dest-name { font-size: 12px; color: #1a2a3a; overflow-wrap: anywhere; }
.config-dest-meta { font-size: 11px; color: #667085; }
.config-dest-empty { font-size: 12px; color: #667085; }
.config-dest-remove {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  font-size: 16px; line-height: 1; color: #667085; padding: 2px 4px;
}
.config-dest-remove:hover { color: #b42318; }
.config-dest-form .config-input { margin-bottom: 6px; }
.config-sublabel { display: block; font-size: 11px; color: #4a5a6b; margin: 6px 0 3px; }

/* "Extraction Complete" — the status a submitted batch reaches once every
 * document is in state 6/7/8. statusClass() turns it into this class name. */
.status-badge.extraction-complete { background: #e6f7ee; color: #10653a; border: 1px solid #bfe6d0; }

/* ------------------- Real batch detail view (submitted rows) -------------- */
/* A real batch has known docIds, so there is nothing to configure per row. */
.doc-table.doc-table-no-config .col-config { display: none; }

/* Per-document status badges. review/complete already exist in styles.css. */
.doc-status-uploading  { background: #eef2f6; color: #475467; }
.doc-status-predicting { background: #ede9fe; color: #5b21b6; }
.doc-status-unknown    { background: #fee4e2; color: #b42318; }

/* A predicted category is never presented as the confirmed one. */
.doc-type-predicted {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  color: #5b21b6; background: #ede9fe; border-radius: 3px; padding: 1px 5px; vertical-align: middle;
}

.doc-empty { padding: 18px 12px; color: #667085; font-size: 13px; text-align: center; }
.doc-empty-error { color: #b42318; }

/* Submitted worklist rows are clickable like any other. */
.worklist-table tr.wl-row-submitted { cursor: pointer; }

/* Transient-state spinner beside Uploading / Predicting. Removes itself simply
 * by not being rendered once the document's state advances. */
.doc-spinner {
  display: inline-block; width: 11px; height: 11px; margin-left: 7px;
  vertical-align: -1px; border: 2px solid #c4ccd6; border-top-color: #5b21b6;
  border-radius: 50%; animation: doc-spin .8s linear infinite;
}
@keyframes doc-spin { to { transform: rotate(360deg); } }

/* styles.css has no :disabled rule, so a disabled button looked identical to an
 * enabled one — and .btn-outline:hover still lit up on hover. Fix both. */
.btn:disabled,
.btn[disabled] {
  color: #98a2b3;
  border-color: #e4e7ec;
  background: #f7f8fa;
  cursor: not-allowed;
}
.btn:disabled:hover,
.btn[disabled]:hover { background: #f7f8fa; }

/* Per-value focus icon in the live loss-run table: opens the embed on that
 * record + field.
 *
 * The cell is a FLEX ROW so the icon can never be pushed onto a line of its
 * own: the value span takes the remaining width and wraps inside itself, while
 * the icon stays a fixed-size sibling pinned beside it.
 *
 * Hidden until the row is hovered (20-odd columns of always-on icons shout over
 * the data), but clearly legible once revealed. */
.lr-cell-inner {
  display: flex;
  align-items: center;      /* icon centred vertically in the cell, even when
                               the value wraps to several lines */
  gap: 5px;
}
/* NO overflow-wrap:anywhere here — it split "$3,169.00" and "20-322577"
 * mid-value. Descriptions wrap at spaces, which is all that is wanted. */
.lr-cell-value { min-width: 0; }
.lr-cell-value.lr-nowrap { white-space: nowrap; }

/* A status badge is one token; it must never break into "Clos / ed". */
.lr-status { white-space: nowrap; }

/* ---- Live loss-run table: value-driven column widths --------------------
 * Column widths were being set by the HEADERS, whose long unbreakable words
 * ("CLAIM/LOSS/ACCIDENT/INJURY TYPE") have a large min-content width and starve
 * the values. Letting header text break drops the header's min-content to
 * almost nothing, so the VALUES decide the width instead.
 *
 * Scrolling and the sticky header live in the #detail-view.dv-fixed rules
 * further down: the .tab-content is the scroll container, not this wrapper. */

/* ---- Fixed-height detail layout for the live loss-run table --------------
 * Goal: the top chrome (breadcrumb, policy band, toolbar, tabs) stays put, and
 * the claims table takes the rest of the viewport with its own sticky header.
 *
 * Implemented by CONSTRAINING HEIGHT rather than with position:sticky. The app
 * shell is already a flex column with overflow:hidden (body/.layout) and
 * .main-content is the scroller, so making the detail view fill that height and
 * handing the leftover space to the table wrapper gives the same visual result
 * with none of sticky's failure modes (an overflow:hidden ancestor silently
 * disabling it, or a scroll container appearing where you did not want one).
 *
 * Scoped to .dv-fixed, which is only present while the live Loss History table
 * is the visible tab — every other tab and the seeded rows keep normal flow.
 * ----------------------------------------------------------------------- */
#detail-view.dv-fixed {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#detail-view.dv-fixed > .breadcrumb,
#detail-view.dv-fixed > .policy-header,
#detail-view.dv-fixed > .action-toolbar,
#detail-view.dv-fixed > .tab-bar { flex: 0 0 auto; }

/* THE scroll container. Everything under the tabs scrolls inside this, in both
 * axes, so a wide claims table scrolls sideways here rather than needing its
 * own nested scroller — a nested scroller would also break the sticky header
 * below, since sticky resolves against the nearest scrolling ancestor. */
#detail-view.dv-fixed > .tab-content {
  flex: 1;
  min-height: 0;
  overflow: auto;
  /* NO top padding. position:sticky with top:0 pins to the container's PADDING
   * edge, so a 20px pad left a band above the stuck header where rows scrolled
   * through in plain view. The spacing moves inside the panel instead, where it
   * scrolls away with the content and the header can pin flush to the top. */
  padding-top: 0;
}
#detail-view.dv-fixed > .tab-content > .tab-panel { padding-top: 20px; }

/* The claims table must NOT be its own scroll container in this mode. */
#detail-view.dv-fixed .lr-table-wrap.lr-live {
  max-height: none;
  min-height: 0;
  overflow: visible;
}
/* .data-table sets overflow:hidden for its border-radius; an overflow:hidden
 * ancestor silently disables position:sticky, so the live table opts out. */
#detail-view.dv-fixed .lr-table-wrap.lr-live .lr-table {
  overflow: visible;
  border-radius: 0;
}
#detail-view.dv-fixed .lr-table-wrap.lr-live .lr-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  overflow-wrap: break-word;
  background: #f0f4f8;
  box-shadow: inset 0 -1px 0 #dde2e8;
}

/* ---- Live Loss Summary (batch analysis) ---------------------------------
 * Generic question/answer rendering: the questions come from an analysis
 * profile, so nothing here assumes what they are. Capped in height with its own
 * scroll so a long analysis cannot swallow the claims table below it. */
.ls-wrap { margin-bottom: 14px; }

.ls-card { background: #fff; border: 1px solid #d9dee6; border-radius: 10px; padding: 14px 18px; }
.ls-head { display: flex; align-items: baseline; gap: 10px; }
.ls-title { font-size: 13px; font-weight: 700; color: var(--bn-primary, #0091b6); }
.ls-sub { font-size: 12px; color: #667085; }

.ls-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; padding-bottom: 10px; border-bottom: 1px solid #eef1f5; }
.ls-meta-item { font-size: 11px; color: #667085; }

.ls-message { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: #475467; }
.ls-message-error { color: #b42318; }

.ls-spinner {
  display: inline-block; width: 12px; height: 12px; flex: 0 0 auto;
  border: 2px solid #d9dee6; border-top-color: var(--bn-primary, #0091b6);
  border-radius: 50%; animation: ls-spin .8s linear infinite;
}
@keyframes ls-spin { to { transform: rotate(360deg); } }

/* One card per question. Two columns on a wide panel, one when narrow. */
.ls-qa { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; margin-top: 12px; }
.ls-qa-item { border-left: 3px solid var(--bn-accent, #F2A900); background: #fafbfc; border-radius: 0 6px 6px 0; padding: 10px 12px; }
.ls-question { font-size: 12px; font-weight: 700; color: #344054; margin-bottom: 6px; }
.ls-answer { font-size: 13px; color: #1f2933; line-height: 1.5; }
.ls-answer p { margin: 0 0 6px; }
.ls-answer p:last-child { margin-bottom: 0; }
.ls-answer-empty { color: #98a2b3; font-style: italic; }
.ls-answer-list { margin: 0; padding-left: 18px; }
.ls-answer-list li { margin-bottom: 4px; }
.ls-answer-json {
  margin: 0; padding: 8px 10px; background: #0f172a; color: #d1e3ff;
  border-radius: 6px; font-size: 11px; overflow-x: auto; white-space: pre;
}
.ls-sources { margin-top: 6px; font-size: 11px; color: #667085; }

/* A "structured" analysis profile answers with pipe-delimited rows; they render
 * as a headerless table rather than a wall of pipes. */
.ls-answer-table { overflow-x: auto; }
.ls-answer-table table { border-collapse: collapse; width: 100%; font-size: 12px; }
.ls-answer-table td {
  border: 1px solid #e4e7ec; padding: 4px 7px; white-space: nowrap;
  color: #1f2933;
}
.ls-answer-table tr:first-child td { background: #f6f8fb; font-weight: 600; }
.ls-cell-absent { color: #98a2b3; font-style: italic; }

.ls-qcode {
  display: inline-block; margin-right: 6px; padding: 1px 5px;
  font-size: 9px; font-weight: 700; letter-spacing: .3px;
  color: #475467; background: #eef1f5; border-radius: 3px; vertical-align: 1px;
}
.ls-answer-index { margin: 8px 0 3px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #98a2b3; }

/* ---- Loss Summary: consolidated year comparison -------------------------
 * One view of ALL the loss runs in the batch: who the insured is, the headline
 * numbers, then every policy year merged into a single history. */
.ls-who { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.ls-who-name { font-size: 15px; font-weight: 700; color: #1f2933; }
.ls-who-addr { font-size: 12px; color: #667085; }

.ls-stats { display: flex; flex-wrap: wrap; gap: 26px; margin: 12px 0 4px; padding: 12px 0; border-top: 1px solid #eef1f5; border-bottom: 1px solid #eef1f5; }
.ls-stat-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #98a2b3; }
.ls-stat-value { font-size: 19px; font-weight: 700; color: var(--bn-primary, #0091b6); line-height: 1.25; }
.ls-stat-note { font-size: 11px; color: #667085; }

.ls-years { overflow-x: auto; margin-top: 10px; }
.ls-years table { border-collapse: collapse; width: 100%; font-size: 12px; }
.ls-years th {
  text-align: left; padding: 6px 10px; white-space: nowrap;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: #667085; background: #f6f8fb; border-bottom: 1px solid #e4e7ec;
}
.ls-years td { padding: 7px 10px; border-bottom: 1px solid #f0f2f5; white-space: nowrap; }
.ls-years tbody tr:hover { background: #fafbfc; }
.ls-yr-year { font-weight: 700; color: #1f2933; }
.ls-yr-policy { font-family: monospace; font-size: 11px; color: #475467; }
.ls-num { text-align: right; }
.ls-split { display: block; font-size: 10px; color: #98a2b3; }

/* Incurred bar — the trend across years, readable without doing arithmetic. */
.ls-yr-incurred { min-width: 130px; }
.ls-inc-value { display: block; }
.ls-bar { display: block; height: 4px; margin-top: 3px; background: #eef1f5; border-radius: 2px; overflow: hidden; }
.ls-bar-fill { display: block; height: 100%; background: var(--bn-primary, #0091b6); border-radius: 2px; }
.ls-bar-fill.is-worst { background: #b42318; }

.ls-foot { margin-top: 10px; font-size: 10px; color: #98a2b3; line-height: 1.5; }
/* A clean policy year: empty track, no fill — not a 2% stub. */
.ls-bar.is-zero { background: #f2f4f7; }
/* .ls-years th (class+type) outranks a bare .ls-num, so numeric headers need
 * the qualified selector or they stay left while their cells are right. */
.ls-years th.ls-num { text-align: right; }
/* The collapsible body of the Loss Summary. */
.ls-body.hidden { display: none; }

/* Per-value focus icon: opens the embed on that record + field. Hidden until the
 * row is hovered — 11-24 columns of always-on icons shout over the data — but
 * clearly legible once revealed, and always reachable by keyboard.
 * (These rules were lost when an adjacent block was rewritten; without them the
 * icons rendered as default buttons on every row.) */
.lr-focus {
  flex: 0 0 auto;                 /* never shrink, never wrap to its own line */
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0;
  border: none; border-radius: 3px;
  background: transparent; color: #667085; cursor: pointer;
  opacity: 0; transition: opacity .12s, color .12s, background .12s;
}
.lr-table tbody tr:hover .lr-focus { opacity: .85; }
.lr-focus:hover { opacity: 1; color: var(--bn-primary, #0091b6); background: #e6eefa; }
.lr-focus:focus-visible {
  opacity: 1; color: var(--bn-primary, #0091b6);
  outline: 2px solid var(--bn-primary, #0091b6); outline-offset: 1px;
}

/* ---- Largest Claims -----------------------------------------------------
 * The five biggest claims across every loss run in the submission, in a card
 * between the Loss Summary and the per-document table. Four values and an icon,
 * so it reads at a glance instead of needing the horizontal scroll the
 * twenty-column table below it lives with. The card, header, caret and body
 * come from the .ls-card / .sm-collapse-head rules the Loss Summary uses.
 * ---------------------------------------------------------------------- */
.lc-table-wrap { margin-top: 10px; overflow-x: auto; }
.lc-table td { vertical-align: top; }
.lc-num, .lc-table th.lc-num { text-align: right; }
.lc-see, .lc-table th.lc-see { width: 84px; text-align: center; }

/* ALWAYS visible, where the icons in the wide table are revealed on hover: one
 * icon on five rows is a column, not the clutter twenty columns of them were.
 * Same specificity as the .lr-focus rule above, so this must stay after it. */
.lc-focus { opacity: .85; }

/* ---- Live loss-run table: unverified predictions ------------------------
 * A (record, field) that has a prediction but no verified value is NOT drawn as
 * a dash. A dash reads as "the loss run does not say", when in fact SortSpoke
 * holds a value nobody has confirmed yet. So the cell shows the prediction,
 * tagged as unverified, and the whole row is tinted — a claim still needing
 * attention has to be findable while scanning 20-odd columns.
 *
 * Amber, matching this app's existing "needs your attention" grammar:
 * .sm-next-action (styles.css) is the same left-edge-plus-tint idiom in the same
 * colours, and .doc-status-review uses the same chip pair. A prediction is an
 * unfinished item, not a category, so it reads as a warning rather than a label.
 *
 * (Re-authored: these rules were lost when an adjacent block was rewritten and,
 * unlike .lr-focus, were never noticed at the time — so they never reached a
 * commit even though the JS that depends on them did.) */
/* Painted on the CELLS, not the row. This table is also a .data-table, and
 * styles.css has `.data-table tr:hover td { background: #f8fafc }` — a td-level
 * background covers anything set on the tr, so a row-level colour here got
 * repainted grey the moment the row was hovered. Matching at td level also
 * out-specifies that rule, so the amber survives hover: a row still needing
 * attention does not stop looking that way just because the cursor is over it.
 * Hover feedback is not lost — the focus icons still appear. */
.lr-table tbody tr.lr-row-pending > td,
.lr-table tbody tr.lr-row-pending:hover > td,
.lc-table tbody tr.lr-row-pending > td,
.lc-table tbody tr.lr-row-pending:hover > td { background: #fdf8e8; }

/* Marks the row at its left edge. box-shadow rather than border-left: a border
 * adds width to the first cell and knocks every column out of alignment with
 * the sticky header. */
.lr-table tbody tr.lr-row-pending > td:first-child,
.lc-table tbody tr.lr-row-pending > td:first-child {
  box-shadow: inset 3px 0 0 #cca300;
}

/* Italic as well as amber: an unconfirmed value should not sit in the same
 * typeface as the verified ones around it. */
.lr-cell-value.lr-cell-unverified { color: #92400e; font-style: italic; }

/* The holder gets .lr-nowrap whenever the shown text has no whitespace, which
 * on a prediction cell would also pin the tag to the same line and widen the
 * column by the width of the word "unverified". Releasing it here lets the tag
 * drop below instead. Safe for the value itself: nothing in this table sets
 * overflow-wrap, so a value with no spaces still cannot be split. */
.lr-cell-value.lr-cell-unverified.lr-nowrap { white-space: normal; }

.lr-unverified-tag {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  font-style: normal;        /* the tag is a label, not part of the italic value */
  color: #92400e; background: #fef3c7;
  border-radius: 3px; padding: 1px 4px;
  vertical-align: middle;
  white-space: nowrap;      /* never breaks into "unverif / ied" */
}

/* ---- Summary tab: live submission summary --------------------------------
 * A submitted batch shows the analysis only. The seeded verdict bar, evidence
 * spine and report are driven by hand-authored data it does not have, so they
 * are hidden structurally rather than by id — a missed id would leave an empty
 * hand-authored panel on screen. */
#tab-summary.sm-live > *:not(#sm-analysis) { display: none; }

.sv-identity { margin-top: 10px; }
.sv-name { font-size: 17px; font-weight: 700; color: #1f2933; }
.sv-facts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 3px; }
.sv-fact { font-size: 12px; color: #667085; }
.sv-ops { font-size: 13px; color: #344054; margin-top: 6px; max-width: 70ch; line-height: 1.5; }

.sv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sv-chip {
  font-size: 11px; font-weight: 600; color: #475467;
  background: #eef1f5; border-radius: 10px; padding: 2px 9px;
}
.sv-chip-strong { background: #e6eefa; color: var(--bn-primary, #0091b6); }

.sv-alsoreported { margin-top: 8px; font-size: 11px; color: #98a2b3; }

.sv-metrics {
  display: flex; flex-wrap: wrap; gap: 26px;
  margin: 14px 0 4px; padding: 12px 0;
  border-top: 1px solid #eef1f5; border-bottom: 1px solid #eef1f5;
}
.sv-metric-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #98a2b3; }
.sv-metric-value { font-size: 20px; font-weight: 700; color: var(--bn-primary, #0091b6); line-height: 1.25; }
.sv-metric-sub { font-size: 11px; color: #667085; }
.sv-metric.is-adverse .sv-metric-value { color: #b42318; }
.sv-metric.is-good .sv-metric-value { color: #10653a; }

.sv-section-title {
  margin: 18px 0 8px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; color: #667085;
}

/* Flags carry the underwriting narrative, so they lead and they are legible. */
.sv-flags { display: flex; flex-direction: column; gap: 6px; }
.sv-flag {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px; border-radius: 6px; background: #fafbfc;
  border-left: 3px solid #d0d5dd;
}
.sv-flag-text { font-size: 13px; color: #1f2933; line-height: 1.45; }
.sv-sev {
  flex: 0 0 auto; min-width: 52px; text-align: center;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  border-radius: 3px; padding: 2px 6px; margin-top: 1px;
}
.sv-sev-high   { border-left-color: #b42318; }
.sv-sev-high   .sv-sev { background: #fee4e2; color: #b42318; }
.sv-sev-medium { border-left-color: #b54708; }
.sv-sev-medium .sv-sev { background: #fef0c7; color: #b54708; }
.sv-sev-low    { border-left-color: #175cd3; }
.sv-sev-low    .sv-sev { background: #e0eaff; color: #175cd3; }

.sv-table { overflow-x: auto; }
.sv-table table { border-collapse: collapse; width: 100%; font-size: 12px; }
.sv-table th {
  text-align: left; padding: 6px 10px; white-space: nowrap;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: #667085; background: #f6f8fb; border-bottom: 1px solid #e4e7ec;
}
.sv-table td { padding: 7px 10px; border-bottom: 1px solid #f0f2f5; }
.sv-table tbody tr:hover { background: #fafbfc; }
.sv-table th.sv-num, .sv-table td.sv-num { text-align: right; white-space: nowrap; }
.sv-absent { color: #98a2b3; }

.sv-prose { font-size: 13px; color: #344054; line-height: 1.5; margin: 0; max-width: 80ch; }
.sv-gaps { margin: 0; padding-left: 20px; }
.sv-gaps li { font-size: 13px; color: #344054; line-height: 1.5; margin-bottom: 5px; }

/* The safety stats are a supporting figure row, not a headline. */
.sv-metrics-tight { gap: 20px; padding: 10px 0; margin: 8px 0; }
.sv-metrics-tight .sv-metric-value { font-size: 16px; color: #344054; }

/* With no title bar above it, the identity block sits on the card's own padding. */
.ls-body > .sv-identity:first-child { margin-top: 0; }

/* "Still reading" is a waiting state, not a finding — it reads as activity. */
.lr-empty-row.lr-empty-pending { color: #667085; }