/* SilvaReport Forest Register. Component styles. Values come from tokens.css.
   Source: silvareport-forest-register-style-guide.html. */

/* Names the existing templates already read */
:root {
  --color-primary: var(--pine);
  --color-text: var(--ink);
  --color-text-secondary: var(--ink-subtle);
  --color-border: var(--border-control);
  --color-danger: var(--signal);
  --radius: var(--radius-sm);
  --font-family: var(--font-body);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 14.5px/22px var(--font-body); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--pine); margin: 0; text-wrap: balance; }
h2 { font-size: 28px; line-height: 34px; font-weight: 600; margin-bottom: var(--space-4); }
h3 { font-size: 21px; line-height: 28px; font-weight: 600; margin-bottom: var(--space-3); }
h4 { font-size: 17px; line-height: 24px; font-weight: 600; margin-bottom: var(--space-2); }
p { margin: 0 0 var(--space-3); text-wrap: pretty; }
a { color: var(--pine); text-underline-offset: 2px; }
a:hover { color: var(--pine-hover); }
pre, code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
main { max-width: 1120px; margin: 0 auto; padding: var(--space-6) var(--space-7) var(--space-7); }

/* Button */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 40px; padding: 9px var(--space-4); border: 1px solid var(--pine); border-radius: var(--radius-sm); background: var(--pine); color: var(--on-pine); font: 600 14px/20px var(--font-body); text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--pine-hover); border-color: var(--pine-hover); color: var(--on-pine); }
.btn--success { background: var(--pine); border-color: var(--pine); color: var(--on-pine); }
.btn--outline, .btn--secondary, .btn--info { background: var(--paper); border-color: var(--border-control); color: var(--pine); }
.btn--outline:hover, .btn--secondary:hover, .btn--info:hover { background: var(--pine-tint); border-color: var(--pine); color: var(--pine); }
.btn--danger { background: var(--paper); border-color: var(--signal); color: var(--signal); }
.btn--danger:hover { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
.btn--sm { min-height: 32px; padding: 5px var(--space-3); font-size: 13px; line-height: 18px; }
.btn--lg { min-height: 48px; padding: 13px var(--space-5); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--surface-subtle); border-color: var(--rule-strong); color: var(--ink-subtle); cursor: not-allowed; }
@media (pointer: coarse) { .btn, .btn--sm { min-height: 44px; } }

/* Badge: neutral counts and file types. Never a status. */
.badge, .badge--info, .badge--success, .badge--danger { display: inline-block; padding: 1px 7px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink-muted); font: 600 12px/16px var(--font-body); font-variant-numeric: tabular-nums; vertical-align: middle; white-space: nowrap; }
h2 .badge, h3 .badge { margin-left: var(--space-1); position: relative; top: -3px; }

/* Status */
.status { display: inline-flex; align-items: flex-start; gap: 6px; font: 600 13px/18px var(--font-body); white-space: nowrap; }
.status__mark { flex: none; width: 14px; height: 14px; margin-top: 2px; display: block; }
.status--met { color: var(--ink); font-weight: 500; }
.status--met .status__mark, .status__mark.status--met { color: var(--pine); }
.status--not-met, .status--partial, .status--unverified { color: var(--signal); }
.status--na { color: var(--ink-subtle); font-weight: 400; }

/* Field */
.field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); max-width: 480px; }
.field__label, .field > label { font: 600 13px/18px var(--font-body); color: var(--ink); }
.field__optional { font-weight: 400; color: var(--ink-subtle); }
.field__error { color: var(--signal); font: 500 13px/18px var(--font-body); }
input[type="text"], input[type="email"], input[type="number"], .input { width: 100%; min-height: 40px; padding: 9px var(--space-3); border: 1px solid var(--border-control); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font: 400 14px/20px var(--font-body); }
input::placeholder { color: var(--ink-subtle); opacity: 1; }
input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.input--code { font-size: 22px; line-height: 28px; letter-spacing: 6px; text-align: center; font-variant-numeric: tabular-nums; }

/* Notice */
.flash-messages { max-width: 1120px; margin: var(--space-4) auto 0; padding: 0 var(--space-7); display: flex; flex-direction: column; gap: var(--space-2); }
.flash-error, .warning-box { padding: var(--space-3) var(--space-4); border: 1px solid var(--signal); border-radius: var(--radius-sm); background: var(--signal-tint); color: var(--ink); }
.flash-error { font-weight: 500; }
.warning-box { margin-bottom: var(--space-4); }
.warning-box h4 { color: var(--signal); font: 700 13px/18px var(--font-body); margin-bottom: var(--space-1); }
.warning-box ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 18px; }
.cost-display { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); padding: var(--space-2) 0; margin-bottom: var(--space-4); border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; }
.cost-display small { font-size: 13px; color: var(--ink-muted); }
.cost-display br { display: none; }

/* Site chrome */
.site-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space-1) var(--space-4); padding: var(--space-2) var(--space-7) 0; background: var(--pine); color: var(--on-pine-muted); font: 400 13px/18px var(--font-body); }
.site-nav span { margin-right: auto; }
.site-nav a { color: var(--on-pine); font-weight: 600; text-decoration: none; padding: 3px 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--on-pine); border-bottom-color: var(--on-pine); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--on-pine); }
.site-nav a:focus-visible, .site-header a:focus-visible { outline-color: var(--on-pine); }
.site-header { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-7) var(--space-4); background: var(--pine); color: var(--on-pine); }
.site-header h1 { color: var(--on-pine); font-size: 21px; line-height: 26px; font-weight: 700; margin: 0; }
.site-header p { margin: 0; color: var(--on-pine-muted); font-size: 13px; line-height: 18px; }
.admin-bar { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: baseline; padding: var(--space-2) 0; margin-bottom: var(--space-5); border-bottom: 2px solid var(--pine); font: 700 13px/18px var(--font-body); color: var(--pine); }
.admin-bar span { font-weight: 400; color: var(--ink-subtle); }
.actions-section { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); max-width: 1192px; margin: var(--space-5) auto var(--space-7); padding: var(--space-4) var(--space-7) 0; border-top: 1px solid var(--rule-strong); }
.actions-header { flex-basis: 100%; font: 700 12px/16px var(--font-body); color: var(--ink-subtle); }
.report-back { max-width: 1192px; margin: 0 auto; padding: var(--space-3) var(--space-7) var(--space-2); }
.report-back__link { display: inline-flex; align-items: center; gap: var(--space-1); font: 600 13px/18px var(--font-body); color: var(--pine); text-decoration: none; }
.report-back__link:hover { text-decoration: underline; }
.report-back__link:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }

/* Card and empty state */
.card { padding: var(--space-5); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper); margin-bottom: var(--space-5); }
.card .card { border: 0; padding: 0; margin: 0; }
.card--narrow { max-width: 440px; margin: var(--space-6) auto; }
.card__note { margin: var(--space-4) 0 0; font-size: 13px; line-height: 19px; color: var(--ink-subtle); }
.btn--block { width: 100%; }
.field--wide { max-width: 480px; }
.screen-meta { color: var(--ink-subtle); font-size: 13px; line-height: 19px; }
.admin-section { margin-top: var(--space-7); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.empty-state { padding: var(--space-7) var(--space-5); text-align: center; }
.empty-state p { color: var(--ink-muted); }

/* Data table */
.data-table { width: 100%; border-collapse: collapse; font: 400 13px/18px var(--font-body); font-variant-numeric: tabular-nums; }
.data-table th { padding: var(--space-2) var(--space-3); border-bottom: 1.5px solid var(--pine); background: var(--surface-subtle); color: var(--pine); font: 700 12px/16px var(--font-body); text-align: left; white-space: nowrap; }
.data-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--rule); vertical-align: top; }
.data-table tbody tr:not(.edit-row):hover td { background: var(--pine-tint); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table .num, .num { text-align: right; white-space: nowrap; }
.text-center { text-align: center !important; }
.text-bold { font-weight: 600; }
.cell-truncate { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-actions { white-space: nowrap; }
.admin-actions .btn + form, .admin-actions form + .btn { margin-left: var(--space-1); }
.edit-row td { background: var(--surface-subtle); }
.edit-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.edit-form label { display: flex; flex-direction: column; gap: var(--space-1); font: 600 12px/16px var(--font-body); }
.edit-form input { width: 220px; max-width: 100%; }
.table-scroll { overflow-x: auto; }

/* Upload */
.dropzone { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-7) var(--space-5); border: 1.5px dashed var(--border-control); border-radius: var(--radius-sm); background: var(--paper); text-align: center; }
.dropzone.is-over, .dropzone.dragover, .dropzone:hover { background: var(--pine-tint); border-color: var(--pine); }
.dropzone__icon { display: flex; color: var(--pine); }
.dropzone__icon svg { width: 32px; height: 32px; display: block; }
.dropzone__title { font: 600 17px/24px var(--font-display); color: var(--pine); }
.dropzone__separator { font-size: 13px; line-height: 18px; color: var(--ink-subtle); }
.dropzone__hint { font-size: 12px; line-height: 16px; color: var(--ink-subtle); }
.file-types { margin: var(--space-2) 0 0; font-size: 13px; line-height: 19px; color: var(--ink-muted); }
.file-types summary { cursor: pointer; color: var(--pine); font-weight: 600; width: max-content; }
.file-types dl { display: grid; gap: var(--space-1); margin: var(--space-2) 0; }
.file-types dl div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--space-3); }
.file-types dt { font-weight: 600; color: var(--ink); }
.file-types dd { margin: 0; overflow-wrap: anywhere; }
.file-types p { margin: 0; }
.upload-status { font-size: 13px; line-height: 18px; color: var(--ink-muted); margin-top: var(--space-2); }
.upload-status:empty { display: none; }
.file-card { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); }
.file-card__body { min-width: 0; flex: 1 1 280px; }
.file-card__name { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: 14px; line-height: 20px; }
.file-card__name strong { font-weight: 600; overflow-wrap: anywhere; }
.file-card__meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); margin-top: 2px; color: var(--ink-subtle); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }
.file-card__status { color: var(--ink-muted); }
.file-card__status--error { color: var(--signal); font-weight: 600; }
.file-card--failed { background: var(--signal-tint); box-shadow: -8px 0 0 var(--signal-tint), 8px 0 0 var(--signal-tint); }
.file-progress { height: 4px; margin-top: 6px; max-width: 420px; background: var(--surface-subtle); border-radius: var(--radius-full); overflow: hidden; }
.file-progress__fill { height: 100%; width: 0; background: var(--pine); transition: width .2s linear; }
.process-section { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1.5px solid var(--pine); }
.markdown-box { max-height: 600px; overflow: auto; padding: var(--space-3) var(--space-4); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--surface-subtle); }
.markdown-box pre { margin: 0; font-size: 13px; line-height: 19px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }

/* Report: sheet */
.rpt { max-width: 1192px; margin: 0 auto; background: var(--paper); color: var(--ink); font: 400 14.5px/22px var(--font-body); }
.rpt__body { padding: var(--space-5) var(--space-7) var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.rpt h2 { font-size: 21px; line-height: 28px; font-weight: 600; margin: 0 0 var(--space-3); }
.rpt h3 { font: 700 13px/18px var(--font-body); color: var(--pine); margin: 0 0 var(--space-1); }
.rpt-section { min-width: 0; }
.rpt-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-6); }
.rpt-cols--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rpt-note { margin: var(--space-2) 0 0; font-size: 13px; line-height: 19px; color: var(--ink-muted); }
.rpt-gap { color: var(--signal); font-weight: 600; }
.rpt-sci { font-style: italic; }

/* Report: header band */
.rpt-band { background: var(--pine); color: var(--on-pine); padding: 36px var(--space-7) 34px; display: flex; flex-direction: column; gap: 26px; }
.rpt-band__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-1) var(--space-4); font-size: 13px; line-height: 18px; color: var(--on-pine); }
.rpt-band__brand { font: 700 17px/22px var(--font-display); }
.rpt-band__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.rpt-band__sub { font-size: 14px; line-height: 20px; color: var(--on-pine-muted); margin: 0; }
.rpt-band h1 { margin: 0; color: var(--on-pine); font: 600 40px/46px var(--font-display); }
.rpt-strip { background: var(--pine); color: var(--on-pine); padding: 14px var(--space-7); display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; line-height: 18px; }
.rpt-strip .rpt-band__brand { font-size: 15px; }

/* Report: particulars */
.rpt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule-strong); border-left: 1px solid var(--rule-strong); margin: 0; }
.rpt-grid > div { padding: var(--space-2) var(--space-3); border-right: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); min-width: 0; }
.rpt-grid dt { font-size: 12px; line-height: 16px; color: var(--ink-subtle); }
.rpt-grid dd { margin: 2px 0 0; font-size: 14px; line-height: 20px; font-weight: 600; overflow-wrap: anywhere; }

/* Report: rows */
.rpt-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.rpt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 13.5px; line-height: 19px; }
.rpt-level { font-weight: 700; color: var(--signal); }
.rpt-level--low { color: var(--pine); }
.rpt-level--high { color: var(--signal-strong); }

/* Report: actions */
.rpt-actions { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.rpt-action { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--space-2); padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 14px; line-height: 20px; break-inside: avoid; }
.rpt-action__num { font: 700 18px/20px var(--font-display); color: var(--pine); font-variant-numeric: lining-nums; }

/* Report: custody route */
.rpt-route { display: grid; grid-template-columns: 82px minmax(0, 1fr); column-gap: var(--space-3); }
.rpt-route__head { display: flex; justify-content: flex-end; font-size: 12px; line-height: 16px; color: var(--ink-subtle); grid-column: 1 / -1; margin-bottom: var(--space-1); }
.rpt-route__leg { font: 700 13px/18px var(--font-body); color: var(--pine); padding-top: var(--space-2); border-top: 1px solid var(--rule); }
.rpt-route__steps { margin: 0; padding: var(--space-2) 0 0; list-style: none; border-top: 1px solid var(--rule); }
.rpt-route__leg:first-of-type, .rpt-route__leg:first-of-type + .rpt-route__steps { border-top: 0; }
.rpt-step { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr) 76px; gap: var(--space-2); padding-bottom: var(--space-3); break-inside: avoid; }
.rpt-step::before { content: ""; position: absolute; left: 7px; top: 4px; bottom: -4px; width: 2px; background: var(--rule-strong); }
.rpt-step:last-child { padding-bottom: var(--space-2); }
.rpt-step:last-child::before { bottom: var(--space-3); }
.rpt-step .status__mark { position: relative; width: 16px; height: 16px; margin-top: 2px; background: var(--paper); border-radius: var(--radius-full); }
.rpt-step__name { font-size: 14px; line-height: 20px; font-weight: 600; }
.rpt-step__detail { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.rpt-step__vol { font-size: 13.5px; line-height: 20px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rpt-step__vol--none { font-weight: 400; color: var(--ink-subtle); font-size: 12px; }

/* Report: Information to request, choosing requests for a supplier email */
.rpt-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); }
.rpt-head h2 { margin: 0; }
.rpt-pick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-size: 13px; line-height: 18px; }
.rpt-pick__link { padding: 0; border: 0; background: none; color: var(--pine); font: 600 13px/18px var(--font-body); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.rpt-pick__link:disabled { color: var(--ink-subtle); text-decoration: none; cursor: default; }
.rpt-pick__count { color: var(--ink-subtle); font-variant-numeric: tabular-nums; }
.rpt-actions--pick .rpt-action { grid-template-columns: 18px 30px minmax(0, 1fr); }
.rpt-actions--pick label { cursor: pointer; }
.rpt-action__check { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--pine); cursor: pointer; }
.rpt-action.is-picked { background: var(--pine-tint); box-shadow: -8px 0 0 var(--pine-tint), 8px 0 0 var(--pine-tint); }
.rpt-email { align-items: flex-start; overflow-y: auto; }
.overlay__dialog.rpt-email__dialog { max-width: 760px; margin: var(--space-6) 0; text-align: left; padding: var(--space-5); }
.rpt-email__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.rpt-email__head h2 { margin: 0; font-size: 21px; line-height: 28px; }
.rpt-email__label { display: block; margin: var(--space-4) 0 var(--space-1); font: 700 13px/18px var(--font-body); color: var(--pine); }
.rpt-email__subject { display: flex; gap: var(--space-2); align-items: center; }
.rpt-email__subject input { flex: 1; }
.rpt-email__body { max-height: 52vh; overflow-y: auto; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-control); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font: 400 14px/21px var(--font-body); }
.rpt-email__body:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.rpt-email__body p { margin: 0 0 var(--space-3); color: var(--ink); }
.rpt-email__body ol { margin: 0 0 var(--space-3); padding-left: 22px; }
.rpt-email__body li { margin-bottom: var(--space-2); }
.rpt-email__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-4); }
.rpt-email__status { font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* Report: goods and ownership graph diagrams (Graphviz, frontend/src/graphs.js) */
.rpt-graph-block { margin-bottom: var(--space-5); break-inside: avoid; }
.rpt-graph__intro { margin: 0 0 var(--space-2); max-width: 80ch; }
.rpt-graph { overflow-x: auto; }
.rpt-graph svg { display: block; width: 100%; height: auto; }
.rpt-graph svg a { cursor: default; }
.rpt-graph__wait { min-height: 120px; }
.rpt-graph-print { display: none; }
.print-tip { margin: var(--space-2) 0 0; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.rpt-graph__key { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: var(--space-2) 0 0; font-size: 12px; line-height: 16px; color: var(--ink-subtle); }
.rpt-graph__key span { display: inline-flex; align-items: center; gap: 6px; }
.rpt-graph__sw { display: inline-block; width: 22px; height: 0; border-top: 1.5px solid var(--pine); }
.rpt-graph__sw--gap { border-top: 1.5px dashed var(--signal); }
.rpt-graph__sw--partial { border-top-color: var(--signal); }
.rpt-graph__sw--dotted { border-top: 2px dotted var(--ink-subtle); }
.rpt-graph__sw--origin { width: 16px; height: 11px; border: 1.5px solid var(--pine); border-radius: 3px; background: #dce8df; }

/* Report: volume flow (Sankey) above the reconciliation table */
.rpt-flow { margin: 0 0 var(--space-4); break-inside: avoid; }
.rpt-flow__scroll { overflow-x: auto; }
.rpt-flow svg { display: block; }
.rpt-flow__node { fill: var(--pine); }
.rpt-flow__node--flag { fill: var(--signal); }
.rpt-flow__node--none { fill: var(--paper); stroke: var(--border-control); stroke-width: 1.5; stroke-dasharray: 3 3; }
.rpt-flow__band { fill: var(--pine); opacity: .28; }
.rpt-flow__band--unknown { fill: var(--pine); opacity: .1; }
.rpt-flow__loss { fill: var(--rule-strong); opacity: .75; }
.rpt-flow__gain { fill: var(--signal); opacity: .55; }
.rpt-flow__label { font: 600 11px var(--font-body); fill: var(--ink-muted); }
.rpt-flow__lot { font: 500 11px var(--font-body); fill: var(--ink); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; }
.rpt-flow__vol { font: 700 12.5px var(--font-body); fill: var(--ink); font-variant-numeric: tabular-nums; }
.rpt-flow__vol--none { font-weight: 400; fill: var(--ink-subtle); }
.rpt-flow__note { font: 600 11.5px var(--font-body); fill: var(--ink); font-variant-numeric: tabular-nums; }
.rpt-flow__note--gain { fill: var(--signal); }
.rpt-flow__note--sub { font-weight: 400; fill: var(--ink-subtle); }
.rpt-flow__key { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-top: var(--space-2); font-size: 12px; line-height: 16px; color: var(--ink-subtle); }
.rpt-flow__key span { display: inline-flex; align-items: center; gap: 6px; }
.rpt-flow__sw { display: inline-block; width: 14px; height: 10px; border-radius: 2px; background: var(--pine); opacity: .28; }
.rpt-flow__sw--lots { background: linear-gradient(var(--pine) 0 40%, transparent 40% 60%, var(--pine) 60%); opacity: .5; }
.rpt-flow__sw--loss { background: var(--rule-strong); opacity: 1; }
.rpt-flow__sw--gain { background: var(--signal); opacity: .6; }
.rpt-flow__sw--none { background: var(--paper); border: 1.5px dashed var(--border-control); opacity: 1; }
.rpt-flow__sw--flag { background: var(--signal); opacity: 1; width: 6px; }

/* Report: tables */
.rpt-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; }
.rpt-table th { padding: 0 var(--space-3) 5px 0; border-bottom: 1.5px solid var(--pine); color: var(--pine); font: 700 12px/16px var(--font-body); text-align: left; vertical-align: bottom; }
.rpt-table td { padding: 6px var(--space-3) 6px 0; border-bottom: 1px solid var(--rule); vertical-align: top; overflow-wrap: anywhere; }
.rpt-table th:last-child, .rpt-table td:last-child { padding-right: 0; }
.rpt-table .num { text-align: right; white-space: nowrap; }
.rpt-table .nowrap { white-space: nowrap; }
.rpt-table caption { text-align: left; font: 700 13px/18px var(--font-body); color: var(--pine); padding-bottom: var(--space-1); }
.rpt-table tr { break-inside: avoid; }
.rpt-table thead { display: table-header-group; }
.rpt-sub { display: block; color: var(--ink-subtle); font-size: 12px; line-height: 16px; }

/* Report: timeline */
.rpt-timeline { margin: 0; padding: 0; list-style: none; }
.rpt-tl { position: relative; display: grid; grid-template-columns: 92px 16px minmax(0, 1fr); gap: var(--space-2); padding-bottom: var(--space-2); font-size: 13px; line-height: 18px; break-inside: avoid; }
.rpt-tl::before { content: ""; position: absolute; left: 107px; top: 4px; bottom: -4px; width: 2px; background: var(--rule-strong); }
.rpt-tl:last-child::before { display: none; }
.rpt-tl__date { color: var(--ink-subtle); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rpt-tl__dot { position: relative; width: 8px; height: 8px; margin: 5px 4px 0; border-radius: var(--radius-full); background: var(--pine); }
.rpt-tl .status__mark { position: relative; width: 16px; height: 16px; margin: 1px 0 0; background: var(--paper); border-radius: var(--radius-full); color: var(--signal); }
.rpt-tl__event b { font-weight: 600; }
.rpt-tl--check .rpt-tl__date { color: var(--signal); font-weight: 600; }

/* Report: footer */
.rpt-foot { display: flex; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--rule); font-size: 12px; line-height: 16px; color: var(--ink-subtle); }

/* Small screens */
@media (max-width: 640px) {
  main { padding: var(--space-5) var(--space-4) var(--space-6); }
  .site-nav, .site-header, .flash-messages { padding-left: var(--space-4); padding-right: var(--space-4); }
  .site-nav span { flex-basis: 100%; }
  .site-nav { justify-content: flex-start; }
  h2 { font-size: 24px; line-height: 30px; }
  .card { padding: var(--space-4); }
  .rpt-band { padding: var(--space-5) var(--space-4); gap: var(--space-5); }
  .rpt-band h1 { font-size: 28px; line-height: 34px; }
  .rpt-band__main { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .rpt-strip { padding: var(--space-3) var(--space-4); }
  .rpt__body { padding: var(--space-5) var(--space-4); }
  .rpt-cols, .rpt-cols--even { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .rpt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rpt-grid > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .rpt-route { grid-template-columns: minmax(0, 1fr); }
  .rpt-route__leg { padding-bottom: var(--space-1); }
  .rpt-route__steps { border-top: 0; padding-top: var(--space-1); }
  .rpt-step { grid-template-columns: 16px minmax(0, 1fr) 62px; }
  .rpt-tl { grid-template-columns: 78px 16px minmax(0, 1fr); }
  .rpt-tl::before { left: 93px; }
  .actions-section, .report-back { padding-left: var(--space-4); padding-right: var(--space-4); }
}

/* ── Findings (replaces the risk list: no ratings) ── */
.rpt-findings { margin: 0 0 var(--space-4); padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.rpt-finding { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: var(--space-3); padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 13.5px; line-height: 19px; break-inside: avoid; }
.rpt-finding__area { font-size: 12px; line-height: 19px; color: var(--ink-subtle); text-align: right; }
.rpt-basis--knowledge { font-style: italic; }
.rpt-count { font-weight: 700; color: var(--pine); font-variant-numeric: tabular-nums; }
.rpt-count--open { color: var(--signal); }
.rpt-foot__disclaimer { max-width: 60%; text-align: right; }

/* ── App: processing overlay, inline notices ── */
.overlay { position: fixed; inset: 0; background: rgba(23, 35, 29, 0.6); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.overlay__dialog { background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); padding: var(--space-6); max-width: 480px; width: 100%; text-align: center; }
.overlay__dialog p { color: var(--ink-muted); }
.progress-bar { height: 8px; background: var(--surface-subtle); border: 1px solid var(--rule-strong); margin: var(--space-4) 0 var(--space-2); }
.progress-bar__fill { height: 100%; width: 0; background: var(--pine); }
.overlay__percent { font-weight: 600; color: var(--pine); font-variant-numeric: tabular-nums; }
.overlay__warning { color: var(--signal); font-size: 13px; }
.overlay__dialog .overlay__stage { color: var(--ink); font-weight: 600; margin-bottom: var(--space-1); }
.overlay__detail { font-size: 13px; line-height: 19px; margin: 0; overflow-wrap: anywhere; }
.overlay__live { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 13px; line-height: 19px; margin: 0; font-variant-numeric: tabular-nums; }
.overlay__live-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pine); }
.overlay__live--active .overlay__live-dot { animation: overlay-pulse 1.6s ease-in-out infinite; }
.overlay__live--waiting .overlay__live-dot { background: var(--ink-subtle); }
.overlay__dialog .overlay__live--stalled { color: var(--signal); text-align: left; }
.overlay__live--stalled .overlay__live-dot { background: var(--signal); }
.overlay__clock { font-size: 13px; line-height: 19px; margin-top: var(--space-1); font-variant-numeric: tabular-nums; }
@keyframes overlay-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
@media (prefers-reduced-motion: reduce) { .overlay__live--active .overlay__live-dot { animation: none; } }
.notification { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); color: var(--ink); }
.notification--error { background: var(--signal-tint); border-color: var(--signal); }
.notification__close { background: none; border: 0; padding: 0 var(--space-1); font: 600 14px/20px var(--font-body); color: var(--ink); cursor: pointer; text-decoration: underline; }
.file-card__actions { flex: none; display: flex; gap: var(--space-2); }

/* ── Locations map (frontend/src/LocationsMap.jsx) ──
   Marker colours: plots pine, facilities signal, transport blue, other slate.
   Shape carries the meaning too (circle, square, diamond, triangle). */
.loc-map { position: relative; border: 1px solid var(--rule); margin-bottom: var(--space-3); background: var(--surface-subtle); }
.loc-live { width: 100%; height: 440px; }
.loc-static { display: block; width: 100%; height: auto; }
.loc-map--live .loc-drawn { display: none; }
.loc-drawn__closeup { margin: 0; border-top: 1px solid var(--rule); }
.loc-drawn__closeup figcaption { padding: var(--space-2) var(--space-3) 0; font: 700 12px/16px var(--font-body); color: var(--pine); }
.loc-key__hint { color: var(--ink-subtle); font-style: italic; }
.loc-static__bg { fill: var(--surface-subtle); }
.loc-static__area { fill: rgba(47, 122, 77, 0.22); stroke: var(--pine); stroke-width: 1.5; stroke-linejoin: round; }
.loc-static__line { fill: none; stroke: var(--pine); stroke-width: 2; stroke-dasharray: 6 4; }
.loc-static__leader { stroke: var(--ink-subtle); stroke-width: 1; }
.loc-static__spot { fill: var(--ink); }
.loc-static__scale path { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.loc-static__scale text, .loc-static__north text { font: 600 12px var(--font-body); fill: var(--ink); dominant-baseline: middle; }
.loc-static__north path { fill: var(--ink); }
.loc-badge { display: inline-block; vertical-align: middle; overflow: visible; }
.loc-badge path { stroke: #ffffff; stroke-width: 1.5; }
.loc-badge text { font: 700 11px var(--font-body); fill: #ffffff; }
.loc-badge--plot path { fill: var(--pine); }
.loc-badge--facility path { fill: var(--signal); }
.loc-badge--transport path { fill: #2f5d8a; }
.loc-badge--other path { fill: #4c5a52; }
.loc-marker { cursor: default; line-height: 0; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); }
.loc-marker svg { overflow: visible; }
.loc-key { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0 0 var(--space-4); padding: 0; list-style: none; font-size: 13px; color: var(--ink-muted); }
.loc-key li { display: flex; align-items: center; gap: var(--space-2); }
.loc-key__area { display: inline-block; width: 16px; height: 12px; background: rgba(47, 122, 77, 0.22); border: 1.5px solid var(--pine); }
.loc-table td.num { width: 28px; }
.loc-table__zoom { padding: 0; border: 0; background: none; color: var(--pine); font: inherit; text-align: left; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.loc-table__zoom:hover { color: var(--pine-hover); }
.loc-table__zoom:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 640px) { .loc-live { height: 320px; } }

/* ── Print: A4, pine band bleeds to the edge, running page numbers ──
   Sizes are in points for paper. The cover page has no top margin so the
   band bleeds; later pages carry "SilvaReport · Report SR-…" at the top
   (the text is set by TimberCoCReport.jsx) and "Page X of Y" at the foot.
   "Goods and ownership" prints on landscape pages, one flowchart per page,
   scaled to fill the page (named pages: Chrome and Edge; other browsers
   print it portrait). */
@page {
  size: A4;
  margin: 14mm 0 13mm;
  @top-left { padding-left: 15mm; font: 400 7.5pt Archivo, Arial, sans-serif; color: #4c5a52; vertical-align: bottom; padding-bottom: 3mm; }
  @bottom-center { content: "Page " counter(page) " of " counter(pages); font: 400 7.5pt Archivo, Arial, sans-serif; color: #4c5a52; }
}
@page :first { margin-top: 0; }
@page flowchart {
  size: A4 landscape;
  margin: 12mm 0 11mm;
}
@media print {
  .site-nav, .site-header, .flash-messages, .actions-section, .report-back, .rpt-strip, .print-tip { display: none !important; }
  html, body { background: #ffffff; }
  a, a:link, a:visited { color: inherit; text-decoration: none; }
  p { orphans: 3; widows: 3; }

  /* Type scale for paper */
  .rpt { max-width: none; font-size: 10pt; line-height: 14.5pt; }
  /* Block layout, not flex: Chrome honours "keep with" page-break rules
     between blocks but not between flex items. */
  .rpt__body { display: block; padding: 9mm 15mm 0; }
  .rpt__body > * + * { margin-top: 7mm; }
  /* No gap at the top of a page that starts with a forced break. */
  .rpt__body > .rpt-goods, .rpt__body > .rpt-goods + * { margin-top: 0; }
  .rpt h2 { font-size: 15pt; line-height: 19pt; margin-bottom: 3mm; }
  .rpt h3 { font-size: 9.5pt; line-height: 13pt; }
  .rpt-note, .rpt-graph__intro { font-size: 8.5pt; line-height: 12pt; }
  .rpt-sub { font-size: 8pt; line-height: 11pt; }
  .rpt-band { padding: 12mm 15mm 9mm; gap: 7mm; }
  .rpt-band__top { font-size: 8.5pt; line-height: 11pt; }
  .rpt-band__brand { font-size: 12pt; line-height: 15pt; }
  .rpt-band h1 { font-size: 24pt; line-height: 28pt; }
  .rpt-band__sub { font-size: 9pt; line-height: 12pt; }
  .rpt-grid dt { font-size: 7.5pt; line-height: 10pt; }
  .rpt-grid dd { font-size: 9.5pt; line-height: 13pt; }
  .rpt-grid > div { padding: 1.6mm 2.5mm; }
  .rpt-row { font-size: 9.5pt; line-height: 13pt; padding: 1.4mm 0; }
  .rpt-finding { font-size: 9.5pt; line-height: 13.5pt; padding: 1.8mm 0; }
  .rpt-finding__area { font-size: 8pt; line-height: 13.5pt; }
  .rpt-action { font-size: 9.5pt; line-height: 13.5pt; padding: 2mm 0; }
  .rpt-action__num { font-size: 12pt; line-height: 13.5pt; }
  .rpt-step__name { font-size: 9.5pt; line-height: 13pt; }
  .rpt-step__detail { font-size: 8.5pt; line-height: 12pt; }
  .rpt-step__vol { font-size: 9.5pt; line-height: 13pt; }
  .rpt-route__head, .rpt-step__vol--none { font-size: 8pt; }
  .rpt-route__leg { font-size: 9pt; line-height: 12pt; }
  .rpt-table { font-size: 8.5pt; line-height: 12pt; }
  .rpt-table th { font-size: 8pt; line-height: 11pt; }
  .rpt-tl { font-size: 8.5pt; line-height: 12pt; }
  .rpt-graph__key, .rpt-flow__key, .loc-key { font-size: 8pt; line-height: 11pt; }
  .rpt-foot { font-size: 7.5pt; line-height: 10pt; }

  /* Page breaks: a section that would be cut by the page end starts on a
     new page instead; one longer than a page starts on a new page and
     runs on. Rows, findings and steps never split. */
  .rpt-section { break-inside: avoid-page; }
  /* Except the particulars, so the cover page is never left empty under the
     band, and plain text (Assessment), which flows on like any paragraph. */
  .rpt-section.rpt-particulars, .rpt-cols, .rpt-cols > .rpt-section { break-inside: auto; }
  h2, h3 { break-after: avoid-page; }
  .rpt-band { break-inside: avoid; }
  .rpt-finding, .rpt-action, .rpt-step, .rpt-tl, .rpt-table tr, .rpt-row { break-inside: avoid; }
  .rpt-flow, .loc-map, .loc-key, .rpt-foot { break-inside: avoid; }
  /* The closing disclaimer stays with what comes before it, never alone on a page. */
  .rpt-foot { break-before: avoid-page; }
  .rpt-section:has(+ .rpt-foot) { break-inside: auto; }

  /* Goods and ownership: landscape pages, one flowchart each, filling the page */
  /* Chrome lays the document out at the portrait width, so the section is
     widened to the landscape page (297 mm less the 15 mm side padding). */
  .rpt-goods { page: flowchart; break-before: page; break-after: page; width: 267mm; max-width: none; }
  .rpt-goods .rpt-graph-block { margin: 0; break-inside: avoid; }
  .rpt-goods .rpt-graph-block + .rpt-graph-block { break-before: page; }
  .rpt-graph { overflow: visible; }
  .rpt-graph__inner { min-width: 0 !important; }
  .rpt-graph--screen { display: none; }
  .rpt-graph-print { display: block; }
  .rpt-graph-print svg { display: block; margin: 0 auto; }
  .rpt-goods .rpt-graph__intro { max-width: none; }

  /* Interactive bits that make no sense on paper */
  .rpt-pick, .rpt-action__check, .rpt-email { display: none !important; }
  .rpt-actions--pick .rpt-action { grid-template-columns: 9mm minmax(0, 1fr); background: none; box-shadow: none; }
  .loc-live { display: none !important; }
  .loc-map--live .loc-drawn { display: block; }
  .loc-key .loc-key__hint, .loc-credit { display: none; }
  .loc-static { height: 78mm; }
  .loc-table__zoom { color: inherit; text-decoration: none; }
}