/* SyntaxFlow — list and price-list preparation (/documents/list-prep/).
   ===========================================================================
   On top of base.css and sf.css, from their tokens only, so light and dark
   come free. Tables scroll inside their own box (focusable, labelled) so the
   page never scrolls sideways, down to 360 px.
   =========================================================================== */
#sf-listprep .lp-area{ display:grid; gap:16px; min-width:0; }
#sf-listprep .lp-area[hidden]{ display:none; }
#sf-listprep > .sf-limits{ margin:0; }

/* ---------- reading a list ---------- */
.lp-importer{ transition:outline-color .15s; }
.lp-importer.over{ outline:3px dashed var(--pencil-ink); outline-offset:3px; }
.lp-importer > h2 + .hint{ margin:0; }
.lp-importer .field{ margin-bottom:0; }
.lp-text{ min-height:150px; white-space:pre; overflow-wrap:normal; overflow-x:auto; tab-size:12; }
.lp-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0; }
.lp-info{ margin:0; font-size:.92rem; color:var(--ink-2); }
.lp-info:empty{ display:none; }
.lp-step2{ display:grid; gap:12px; min-width:0; }
.lp-step2[hidden]{ display:none; }
.lp-step2 h3{ margin:6px 0 0; font-size:1.02rem; }
.lp-step2 > .hint{ margin:0; }
.lp-controls{ display:flex; flex-wrap:wrap; gap:6px 18px; align-items:flex-end; }
.lp-controls[hidden],.lp-controls .field[hidden]{ display:none; }
.lp-controls .field{ margin-bottom:0; min-width:150px; }
.lp-controls .lp-checkf{ align-self:center; min-width:0; }
.lp-warn{ margin:0; padding:10px 14px 10px 30px; border-left:4px solid var(--warn); background:color-mix(in srgb,var(--warn) 9%,var(--surface)); border-radius:6px; display:grid; gap:4px; font-size:.9rem; }
.lp-warn[hidden]{ display:none; }

/* ---------- tables ---------- */
.lp-scroll{ position:relative; overflow:auto; max-width:100%; border:1px solid var(--rule); border-radius:8px; background:var(--surface); }   /* relative: a visually hidden heading inside stays inside, not past the page edge */
.lp-scroll:focus-visible{ outline:3px solid var(--glass); outline-offset:2px; }
.lp-prev{ max-height:360px; }
.lp-ptable,.lp-table{ display:table; margin:0; border-collapse:collapse; width:100%; font-size:.88rem; }   /* base.css makes tables blocks; these scroll in .lp-scroll */
.lp-ptable th,.lp-ptable td,.lp-table th,.lp-table td{ padding:6px 10px; border-bottom:1px solid var(--rule); text-align:left; vertical-align:top; }
.lp-ptable caption,.lp-table caption{ text-align:left; font-weight:640; padding:8px 10px 4px; }
.lp-ptable thead th{ background:var(--surface-2); }
.lp-ptable select{ min-width:132px; min-height:38px; padding:6px 30px 6px 10px; font-size:.88rem; }
.lp-ptable .lp-names th{ font-weight:600; color:var(--ink-2); font-size:.82rem; }
.lp-prev .lp-ptable td{ white-space:nowrap; max-width:280px; overflow:hidden; text-overflow:ellipsis; }
.lp-ptable .n,.lp-table .n{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.lp-ptable tbody tr:last-child td,.lp-table tbody tr:last-child td{ border-bottom:0; }

/* ---------- the questions ("1.250: which?") ---------- */
.lp-questions{ display:grid; gap:10px; }
.lp-questions[hidden]{ display:none; }
.lp-q{ margin:0; padding:10px 14px 12px; border:1px solid var(--rule-2); border-radius:8px; display:grid; gap:8px; min-width:0; }
.lp-q legend{ font-weight:620; padding:0 4px; }
.lp-questions .lp-q{ border:2px solid var(--pencil-ink); }
.lp-q .hint{ margin:0; }
.lp-q .q-check input{ flex:0 0 auto; }
.lp-use{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.lp-use .hint{ margin:0; }

/* ---------- the list ---------- */
.lp-list h2:focus{ outline:none; }
.lp-head{ display:flex; flex-wrap:wrap; gap:10px 18px; align-items:flex-end; }
.lp-head .grow{ flex:1 1 240px; margin-bottom:0; }
.lp-summary{ margin:0; font-weight:560; color:var(--ink-2); }
.lp-tools{ display:flex; flex-wrap:wrap; gap:8px 14px; align-items:flex-end; }
.lp-tools .field{ margin-bottom:0; min-width:140px; }
.lp-tools .field[hidden]{ display:none; }
.lp-tools .grow{ flex:1 1 200px; }
.lp-tablewrap{ max-height:72vh; }
.lp-table thead th{ position:sticky; top:0; background:var(--surface-2); z-index:1; white-space:nowrap; }
.lp-sort{ font:inherit; font-weight:640; color:var(--ink); background:none; border:0; padding:4px 0; cursor:pointer; display:inline-flex; gap:5px; align-items:center; min-height:32px; }
.lp-sort::after{ content:"↕"; color:var(--ink-3); font-size:.8em; }
.lp-sort.on.asc::after{ content:"↑"; color:var(--ink); }
.lp-sort.on.desc::after{ content:"↓"; color:var(--ink); }
.lp-sort:focus-visible{ outline:3px solid var(--glass); outline-offset:2px; border-radius:4px; }
.lp-line{ color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap; }
.lp-ref{ font-family:var(--mono); font-size:.86rem; white-space:nowrap; }
.lp-desc{ min-width:210px; }
.lp-table tr.lp-bad td{ background:color-mix(in srgb,var(--warn) 8%,transparent); }
.lp-table tr.lp-dup td{ background:color-mix(in srgb,var(--pencil) 10%,transparent); }
.lp-raw{ color:var(--fail); font-weight:600; text-decoration:underline wavy; text-underline-offset:3px; }
.lp-issues{ font-size:.84rem; color:var(--ink-2); min-width:150px; }
.lp-issues > *{ display:block; }
.lp-issues .lp-ok{ color:var(--pass); font-weight:600; }
.lp-issues .lp-kept{ color:var(--ink-3); }
.lp-dupbtn{ color:var(--pencil-ink); font-weight:640; text-align:left; padding:2px 0; }
.lp-none{ padding:18px 12px !important; color:var(--ink-2); text-align:center !important; }
.lp-more{ margin:0; }
.lp-more:empty{ display:none; }
.lp-acts{ display:flex; flex-wrap:wrap; gap:8px; }
.lp-acts .btn[hidden]{ display:none; }
.lp-note{ padding:8px 12px; border-left:4px solid var(--warn); background:color-mix(in srgb,var(--warn) 9%,var(--surface)); border-radius:6px; }
.lp-edit .field{ margin-bottom:10px; }
.lp-edit textarea{ min-height:64px; }
.lp-dupd .lp-scroll{ margin:8px 0 12px; }

/* ---------- comparing versions ---------- */
.lp-cres{ display:grid; gap:12px; min-width:0; }
.lp-cres:empty{ display:none; }
.lp-cres h3{ margin:4px 0 0; }
.lp-cres h3:focus{ outline:none; }
.lp-ctable td{ white-space:normal; }
.lp-ctable .lp-up,.lp-ctable .lp-down{ font-weight:640; }
.lp-age{ border-style:dashed; }

/* ---------- import profiles and batches (Pro) ---------- */
.lp-pro{ display:inline-block; margin-left:8px; padding:1px 7px; border-radius:999px; font-size:.72rem; font-weight:700; letter-spacing:.04em;
  color:var(--pencil-ink); border:1px solid currentColor; line-height:1.5; vertical-align:middle; }
.lp-prof{ display:grid; gap:8px; }
.lp-prof:empty{ display:none; }
.lp-prof-hint,.lp-prof-on{ margin:0; padding:10px 14px; border-radius:8px; border-left:4px solid var(--glass); background:color-mix(in srgb,var(--glass) 8%,var(--surface)); }
.lp-prof-hint{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; }
.lp-prof-on:focus{ outline:none; }
.lp-prof-row{ align-items:flex-end; }
.lp-prof-row .field{ margin-bottom:0; min-width:200px; }
.lp-from{ color:var(--ink-2); font-style:italic; }
.lp-proflist{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.lp-proflist li{ padding:10px 12px; border:1px solid var(--rule); border-radius:8px; display:grid; gap:4px; }
.lp-proflist h3{ margin:0; font-size:1rem; }
.lp-proflist .hint{ margin:0; }
.lp-pfedit .lp-ptable select{ min-width:150px; }
.lp-batch h3{ margin:4px 0 0; font-size:1rem; }
.lp-bpaste{ border:1px dashed var(--rule-2); border-radius:8px; padding:8px 12px; }
.lp-bpaste[open]{ display:grid; gap:10px; }
.lp-bpaste summary{ cursor:pointer; font-weight:600; min-height:32px; display:flex; align-items:center; }
.lp-bpaste .field{ margin:10px 0 0; }
.lp-bpaste > .btn{ margin-top:10px; }
.lp-bsources{ margin:0; padding:0; list-style:none; display:grid; gap:6px; }
.lp-bsources li{ display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; justify-content:space-between; padding:6px 10px; border:1px solid var(--rule); border-radius:8px; }
.lp-bsources li.hint{ border-style:dashed; justify-content:flex-start; }
.lp-brun{ align-items:flex-end; }
.lp-brun .field{ margin-bottom:0; min-width:240px; flex:1 1 240px; }
.lp-bres{ display:grid; gap:12px; min-width:0; }
.lp-bres:empty{ display:none; }
.lp-bres h3:focus{ outline:none; }
.lp-btable th[scope=row]{ font-weight:600; white-space:normal; min-width:140px; }
.lp-btable td{ white-space:normal; }
.lp-bstat{ font-weight:640; }
.lp-btable td.lp-bstat,.lp-btable td.lp-bstat.ok{ color:var(--pass); }
.lp-bstat.warn{ color:var(--fail); }
.lp-bacts{ white-space:nowrap; }
.lp-bacts .btn + .btn{ margin-left:6px; }
.lp-bq{ border:2px solid var(--pencil-ink); }

@media (max-width:640px){
  .lp-ptable select{ min-width:118px; }
  .lp-acts .btn,.lp-use .btn{ flex:1 1 100%; }
  .lp-tools .field,.lp-controls .field{ flex:1 1 100%; }
  .lp-desc{ min-width:160px; }
}
@media print{
  .lp-importer,.lp-tools,.lp-acts,.lp-more,#lp-compare .lp-importer{ display:none !important; }
  .lp-scroll{ overflow:visible; max-height:none; border:0; }
}