/* SyntaxFlow — the offer comparison (documents/compare-offers).
   On top of base.css and sf.css: the desk uses their tokens (light and dark
   come free); the paper is black ink on white, like every document here. */

/* ---------- the desk ---------- */
.o-tools{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 10px; }
.o-offers,.o-lines{ gap:14px; }
.o-offer,.o-line{ display:grid; gap:6px; padding:12px 14px; border:1px solid var(--rule); border-radius:12px; background:var(--surface-2); min-width:0; }
.o-offer-h,.o-line-h{ display:flex; flex-wrap:wrap; align-items:end; gap:4px 10px; }
.o-offer-h .grow,.o-line-h .grow{ flex:1 1 200px; }
.o-offer-h .field,.o-line-h .field{ margin-bottom:8px; }
.o-offer-h .o-narrow,.o-line-h .o-narrow{ flex:0 1 120px; }
.o-acts{ display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; }
.o-acts .btn{ min-height:32px; padding:2px 10px; }
.o-letter{ display:inline-grid; place-items:center; width:28px; height:28px; margin-bottom:10px; border-radius:50%; background:var(--docs); color:var(--docs-ink); font-weight:700; font-size:.9rem; flex:0 0 auto; }
.o-info{ margin:0; font-size:.88rem; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.o-info b{ color:var(--ink); }
.o-flag{ display:inline-block; font-size:.8rem; padding:1px 8px; margin:2px 4px 0 0; border-radius:999px; background:var(--paper-2); color:var(--ink-2); }
.o-flag.warn{ background:color-mix(in srgb,var(--pencil) 16%,var(--surface)); color:var(--pencil-ink); font-weight:600; }
.o-flag.ok{ background:color-mix(in srgb,var(--pass) 14%,var(--surface)); color:var(--pass); font-weight:650; }
.o-rows > summary,.o-extract > summary{ cursor:pointer; font-weight:600; font-size:.92rem; padding:4px 0; }
.o-rows[open] > summary,.o-extract[open] > summary{ margin-bottom:6px; }
.o-trio{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 10px; }
.o-trio .field{ margin-bottom:8px; }
.o-trio .field label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.o-row{ display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:0 8px; align-items:end; padding:8px 0; border-top:1px solid var(--rule); }
.o-row .o-f-ref{ grid-column:span 3; }
.o-row .o-f-text{ grid-column:span 7; }
.o-row .o-f-q,.o-row .o-f-u,.o-row .o-f-p,.o-row .o-f-d,.o-row .o-f-a{ grid-column:span 2; }
.o-row.ign > :not(.o-row-meta){ opacity:.55; }
.o-row .field{ margin-bottom:4px; }
.o-row .field label{ font-size:.78rem; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.o-row input,.o-row select{ min-height:38px; padding-top:4px; padding-bottom:4px; }
.o-row-meta{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:2px 10px; font-size:.8rem; color:var(--ink-3); }
.o-row-meta .o-org{ font-family:var(--mono); }
.o-row-end{ display:flex; gap:8px; align-items:center; margin-left:auto; }
.o-row-end .btn{ min-height:30px; padding:2px 10px; }
.o-row-end label{ font-size:.8rem; color:var(--ink-2); display:flex; gap:4px; align-items:center; }
.o-row-end input[type=checkbox]{ width:18px; height:18px; accent-color:var(--glass); }
.o-raw{ grid-column:1 / -1; margin:2px 0 0; font-family:var(--mono); font-size:.76rem; color:var(--ink-3); overflow-wrap:anywhere; }
.o-extract pre{ margin:0; max-height:260px; overflow:auto; padding:8px 10px; border:1px solid var(--rule); border-radius:8px; background:var(--surface); font-family:var(--mono); font-size:.76rem; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--ink-2); }
.o-line-meta{ display:flex; align-items:center; gap:8px; }
.o-line-meta strong{ font-size:.92rem; }
.o-line-meta .o-acts{ margin:0 0 0 auto; }
.o-line-f{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:0 8px; }
.o-line-f .field{ margin-bottom:6px; }
.o-line-f .o-f-text{ grid-column:span 6; }
.o-line-f .o-f-ref,.o-line-f .o-f-q,.o-line-f .o-f-u{ grid-column:span 2; }
.o-line-f .field label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.o-links{ display:grid; gap:6px; }
.o-link{ display:grid; grid-template-columns:minmax(0,1fr) minmax(120px,150px) auto; gap:2px 8px; align-items:center; }
.o-link > label{ grid-column:1 / -1; font-size:.82rem; font-weight:600; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.o-link select{ min-height:38px; text-overflow:ellipsis; }
.o-link .btn{ min-height:34px; padding:2px 10px; }
.o-link.sug select{ border-style:dashed; border-color:var(--pencil-ink); }
.o-calc{ display:flex; flex-wrap:wrap; gap:4px 12px; margin:2px 0 0; font-size:.88rem; font-variant-numeric:tabular-nums; color:var(--ink-2); }
.o-calc b{ color:var(--ink); }
.o-unmatched{ display:grid; gap:4px; margin:4px 0 0; padding:0; list-style:none; }
.o-unmatched li{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:.9rem; padding:4px 0; border-top:1px solid var(--rule); }
.o-unmatched li > span{ flex:1 1 220px; min-width:0; overflow-wrap:anywhere; }
.o-unmatched .btn{ min-height:32px; padding:2px 10px; }
.o-qs{ margin:0 0 6px; padding-left:22px; display:grid; gap:4px; font-size:.92rem; }
.o-qblock{ padding:10px 0; border-top:1px solid var(--rule); }
.o-qblock:first-of-type{ border-top:0; }
.o-qblock h3{ margin:0 0 6px; font-size:1rem; }
.o-empty{ margin:0; font-size:.9rem; color:var(--ink-3); }

/* ---------- the import dialog ---------- */
.o-imp{ display:grid; gap:8px; }
.o-imp textarea{ min-height:120px; }
.o-imp-row{ display:flex; flex-wrap:wrap; align-items:end; gap:8px 14px; }
.o-imp-row .field{ margin-bottom:0; }
.o-imp-status:empty{ display:none; }
.o-imp-status{ padding:10px 12px; border-radius:10px; border:1px solid var(--rule); background:var(--surface-2); font-size:.92rem; }
.o-imp-status.bad{ border-color:color-mix(in srgb,var(--pencil) 55%,var(--rule)); background:color-mix(in srgb,var(--pencil) 10%,var(--surface)); }
.o-imp-status p{ margin:0 0 4px; }
.o-imp-status p:last-child{ margin-bottom:0; }
.o-cols{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:4px 8px; }
.o-cols:empty{ display:none; }
.o-cols .field{ margin-bottom:0; }
.o-cols .field label{ font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.o-preview{ max-height:min(40vh,360px); }
.o-preview td input[type=checkbox]{ width:18px; height:18px; accent-color:var(--glass); }
.o-preview .o-org{ font-family:var(--mono); font-size:.76rem; color:var(--ink-3); white-space:nowrap; }
.o-preview tr.o-skip td{ color:var(--ink-3); }

@media (max-width:760px){
  .o-offer,.o-line{ padding:10px; }
  .o-row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .o-row .o-f-ref,.o-row .o-f-q,.o-row .o-f-u,.o-row .o-f-p,.o-row .o-f-d,.o-row .o-f-a{ grid-column:span 1; }
  .o-row .o-f-text{ grid-column:1 / -1; order:-1; }
  .o-row-meta{ order:-2; }
  .o-raw{ order:9; }
  .o-trio{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-auto-flow:dense; }
  .o-trio .field:nth-child(2){ grid-column:1 / -1; }
  .o-line-f .o-f-text{ grid-column:1 / -1; }
  .o-line-f .o-f-ref,.o-line-f .o-f-q,.o-line-f .o-f-u{ grid-column:span 4; }
  .o-link{ grid-template-columns:minmax(0,1fr) auto; }
  .o-link select:first-of-type{ grid-column:1 / -1; }
}

/* ---------- the paper ---------- */
.sf-sheet.sf-doc .d-cmp{ width:100%; border-collapse:collapse; font-size:8.4pt; font-variant-numeric:tabular-nums; }
.d-cmp thead th{ text-align:left; font-size:7.8pt; color:#4a525c; font-weight:650; padding:1.4mm 1.6mm; border-bottom:.35mm solid #1f2547; vertical-align:bottom; }
.d-cmp thead th.n,.d-cmp td.n{ text-align:right; }
.d-cmp tbody td{ padding:1.2mm 1.4mm; border-bottom:.2mm solid #d9dde3; vertical-align:top; line-height:1.28; }
.d-cmp tbody tr{ break-inside:avoid; }
.d-cmp .d-i{ color:#69727d; width:5mm; }
.d-cmp .d-ln b{ display:block; color:#1b1f24; font-weight:600; }
.d-cmp .d-ln span{ display:block; font-size:7.4pt; color:#4a525c; }
.d-cmp .d-amt{ display:block; font-weight:650; color:#1b1f24; }
.d-cmp .d-up{ display:block; font-size:7.4pt; color:#4a525c; }
.d-cmp .d-org{ display:block; font-size:6.8pt; color:#69727d; font-family:ui-monospace,Consolas,monospace; }
.d-cmp .d-st{ display:block; font-style:italic; color:#b5381f; font-weight:600; font-size:7.6pt; }
.d-cmp .d-st.soft{ color:#4a525c; font-weight:500; }
.d-cmp .d-fl{ display:block; font-size:6.9pt; color:#b5381f; }
.d-cmp td.d-best{ background:#e8f3ec; }
.d-cmp .d-tagb{ display:inline-block; margin-top:.4mm; padding:0 1.4mm; border-radius:1mm; background:#12773a; color:#fff; font-size:6.6pt; font-weight:700; letter-spacing:.02em; }
.d-cmp tr.d-outl .d-ln b{ color:#4a525c; }
.d-cmp tr.d-outl .d-amt{ color:#69727d; font-weight:500; }
.d-cmp .d-why{ display:block; margin-top:.6mm; font-size:7pt; color:#b5381f; }
.d-cmp.many{ font-size:7.4pt; }
.d-cmptot{ width:100%; margin:3mm 0 0; border-collapse:collapse; font-size:9pt; font-variant-numeric:tabular-nums; }
.d-cmptot th,.d-cmptot td{ padding:1.4mm 1.6mm; border-bottom:.2mm solid #d9dde3; text-align:left; }
.d-cmptot td.n{ text-align:right; white-space:nowrap; }
.d-cmptot tr.d-win th,.d-cmptot tr.d-win td{ font-weight:700; color:#12773a; }
.d-cmptot caption{ text-align:left; font-weight:650; font-size:9.5pt; color:#1f2547; padding-bottom:1.4mm; caption-side:top; }
.d-left{ margin:3mm 0 0; padding-left:5mm; font-size:8pt; color:#4a525c; }
.d-asks h3{ font-size:10pt; margin:5mm 0 1.5mm; color:#1f2547; }
.d-asks h3:first-child{ margin-top:0; }
.d-asks .d-sub{ margin:0 0 1.5mm; font-size:8pt; color:#4a525c; }
.d-asks ol{ margin:0 0 2mm; padding-left:6mm; font-size:9pt; }
.d-asks li{ margin-bottom:1.2mm; break-inside:avoid; }
.d-read h3{ font-size:10pt; margin:5mm 0 1mm; color:#1f2547; }
.d-read h3:first-child{ margin-top:0; }
.d-read .d-sub{ margin:0 0 1.5mm; font-size:7.8pt; color:#4a525c; }
.sf-sheet.sf-doc .d-rtab{ width:100%; border-collapse:collapse; font-size:7.8pt; font-variant-numeric:tabular-nums; margin-bottom:2mm; }
.d-rtab th{ text-align:left; font-size:7.2pt; color:#4a525c; border-bottom:.3mm solid #1f2547; padding:1mm 1.2mm; }
.d-rtab td{ padding:1mm 1.2mm; border-bottom:.2mm solid #e3e6ea; vertical-align:top; }
.d-rtab .n{ text-align:right; }
.d-rtab .d-org{ font-family:ui-monospace,Consolas,monospace; font-size:6.8pt; color:#69727d; white-space:nowrap; }
.d-rtab .d-rawl{ display:block; font-family:ui-monospace,Consolas,monospace; font-size:6.6pt; color:#69727d; }
.d-rtab tr.d-ignored td{ color:#9aa1a9; text-decoration:line-through; }
.d-rtab .d-ed{ color:#b5381f; font-weight:700; }
.d-rsum{ margin:0 0 3mm; font-size:8pt; color:#4a525c; }


/* ---------- saved rules ---------- */
.o-rules > summary{ cursor:pointer; font-weight:700; font-size:1.05rem; }
.o-rules[open] > summary{ margin-bottom:8px; }
.o-rule-list{ display:grid; gap:0; }
.o-rule{ display:grid; grid-template-columns:minmax(0,2fr) minmax(86px,.6fr) minmax(0,2fr) auto; gap:0 8px; align-items:end; padding:6px 0; border-top:1px solid var(--rule); }
.o-rule.off > .field{ opacity:.55; }
.o-rule .field{ margin-bottom:4px; }
.o-rule .field label{ font-size:.78rem; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.o-rule input[type=text],.o-rule select{ min-height:38px; }
.o-rule-end{ display:flex; gap:8px; align-items:center; margin-bottom:6px; }
.o-rule-end label{ display:flex; gap:4px; align-items:center; font-size:.82rem; color:var(--ink-2); }
.o-rule-end input[type=checkbox]{ width:18px; height:18px; accent-color:var(--glass); }
.o-rule-end .btn{ min-height:30px; padding:2px 10px; }
.o-byrule{ justify-self:start; }
.o-link > .btn[data-act="rule-save"]{ justify-self:start; }
@media (max-width:760px){
  .o-rule{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .o-rule .field:first-child,.o-rule .field:nth-child(3){ grid-column:1 / -1; }
}