/* SyntaxFlow Compras — the app: my cases.
   ===========================================================================
   On top of base.css, sf.css, px-tokens.css (the product colour, --px-compras)
   and px-base.css (which also turns the page's opening band violet).
   Phone first (360 px), light and dark from the site's tokens; every status
   carries text and an icon, never colour alone. The work is what is pending
   and the next step: on a wide screen they stay in a column beside the case.
   =========================================================================== */
.pc-app{ --pc:var(--px-compras); --pc-ink:var(--px-compras-ink); --pc-tint:color-mix(in srgb,var(--pc) 9%,var(--surface)); --pc-edge:color-mix(in srgb,var(--pc) 35%,var(--rule)); }
.pc-app .btn.primary{ background:var(--pc); border-color:var(--pc); color:var(--pc-ink); }
.pc-app .btn.primary:hover{ background:color-mix(in srgb,var(--pc) 85%,var(--ink)); border-color:color-mix(in srgb,var(--pc) 85%,var(--ink)); color:var(--pc-ink); }
.pc-app a{ color:var(--pc); }
.pc-app a.btn{ text-decoration:none; color:var(--ink); }
.pc-app a.btn.primary{ color:var(--pc-ink); }
.pc-app :focus-visible{ outline:2px solid var(--pc); outline-offset:2px; }
.pc-ico{ display:inline-flex; width:1em; height:1em; flex:0 0 1em; vertical-align:-.12em; }
.pc-ico svg{ width:100%; height:100%; }
.pc-offscreen{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; left:-9999px; }
.pc-muted{ color:var(--ink-3); }
.pc-err{ color:var(--fail); font-size:.88rem; margin:4px 0 0; }
.pc-err:empty{ display:none; }
.pc-acts{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.pc-acts .field{ margin:0; flex:1 1 180px; }

/* mode and integrations */
.pc-top{ display:grid; gap:8px; }
.pc-mode{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:0; font-size:.92rem; color:var(--ink-2); }
.pc-badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:var(--pc-tint); border:1px solid var(--pc-edge); color:var(--ink); font-weight:620; font-size:.86rem; }
.pc-badge svg{ width:16px; height:16px; color:var(--pc); }
.pc-integrations{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 14px; font-size:.84rem; color:var(--ink-3); }
.pc-int{ display:inline-flex; align-items:center; gap:6px; }
.pc-int b{ font-weight:600; color:var(--ink-2); }

/* boxes for states */
.pc-state-box{ display:grid; grid-template-columns:auto 1fr; gap:6px 10px; align-items:start; padding:12px 14px; border-radius:10px; border:1px solid var(--rule); background:var(--surface); }
.pc-state-box > .pc-ico{ margin-top:3px; color:var(--warn); }
.pc-state-box > :not(.pc-ico){ grid-column:2; margin:0; }
.pc-state-box.conflict,.pc-state-box.permanent{ border-left:4px solid var(--fail); }

/* the chooser */
.pc-chooser h2,.pc-list-head h2,.pc-stats h2,.pc-danger h2{ font-size:var(--t-1); margin:0 0 8px; }
.pc-lead{ color:var(--ink-2); margin:0 0 12px; max-width:62ch; }
.pc-cats{ list-style:none; margin:0; padding:0; display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); }
.pc-cat{ display:grid; gap:8px; align-content:start; padding:14px 16px; border:1px solid var(--rule); border-top:3px solid var(--pc); border-radius:12px; background:var(--surface); }
.pc-cat h3{ margin:0; font-size:1.04rem; }
.pc-cat p{ margin:0; color:var(--ink-2); font-size:.92rem; }
.pc-cat-acts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }

/* the list */
.pc-list-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; }
.pc-list-head h2{ margin:0; }
.pc-filters{ display:grid; gap:0 12px; grid-template-columns:1fr; }
@media (min-width:640px){ .pc-filters{ grid-template-columns:minmax(0,2fr) minmax(0,1fr); } }
.pc-filters input,.pc-filters select{ width:100%; }
.pc-cases{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.pc-card{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; padding:14px 16px; background:var(--surface); border:1px solid var(--rule); border-radius:12px; }
@media (min-width:640px){ .pc-card{ grid-template-columns:minmax(0,1fr) auto; align-items:start; } }
.pc-card h3{ margin:0; font-size:1.06rem; overflow-wrap:anywhere; }
.pc-card h3 a{ color:var(--ink); text-decoration:none; }
.pc-card h3 a:hover{ text-decoration:underline; }
.pc-card p{ margin:2px 0 0; }
.pc-card-meta{ color:var(--ink-3); font-size:.88rem; overflow-wrap:anywhere; }
.pc-card-next{ font-size:.94rem; color:var(--ink-2); }
.pc-card-next b{ color:var(--ink); }
.pc-card-flags{ display:flex; flex-wrap:wrap; gap:6px 12px; font-size:.84rem; color:var(--ink-2); margin-top:6px !important; }
.pc-flag{ display:inline-flex; align-items:center; gap:5px; }
.pc-flag.rev{ color:var(--warn); }
.pc-flag.con,.pc-flag.late{ color:var(--fail); }
.pc-count{ font-size:.86rem; color:var(--ink-3); margin:0; }

/* status of a case: text + icon + a colour that is only a reminder */
.pc-state{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:.84rem; font-weight:620; white-space:nowrap; border:1px solid var(--rule-2); background:var(--surface-2); color:var(--ink); justify-self:start; }
.pc-state.s-needs-review,.pc-state.s-needs-action{ border-color:color-mix(in srgb,var(--warn) 55%,var(--rule)); }
.pc-state.s-needs-review .pc-ico,.pc-state.s-needs-action .pc-ico{ color:var(--warn); }
.pc-state.s-resolved,.pc-state.s-partially-resolved,.pc-state.s-ready{ border-color:color-mix(in srgb,var(--pass) 50%,var(--rule)); }
.pc-state.s-resolved .pc-ico,.pc-state.s-partially-resolved .pc-ico,.pc-state.s-ready .pc-ico{ color:var(--pass); }
.pc-state.s-communicated .pc-ico,.pc-state.s-awaiting-reply .pc-ico{ color:var(--pc); }

/* status of a fact */
.pc-chip{ display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; font-size:.8rem; font-weight:600; border:1px solid var(--rule); background:var(--surface); color:var(--ink-2); white-space:nowrap; }
.pc-chip.confirmed{ border-color:color-mix(in srgb,var(--pass) 50%,var(--rule)); }
.pc-chip.confirmed .pc-ico{ color:var(--pass); }
.pc-chip.extracted{ border-color:color-mix(in srgb,var(--warn) 55%,var(--rule)); }
.pc-chip.extracted .pc-ico{ color:var(--warn); }
.pc-chip.conflict{ border-color:color-mix(in srgb,var(--fail) 55%,var(--rule)); color:var(--ink); }
.pc-chip.conflict .pc-ico{ color:var(--fail); }
.pc-chip.entered .pc-ico{ color:var(--pc); }

/* money */
.pc-stats,.pc-danger{ padding-top:10px; }
.pc-money{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr)); margin:6px 0 12px; }
.pc-money > div{ padding:10px 12px; border:1px solid var(--rule); border-radius:10px; background:var(--surface); }
.pc-money dt{ font-size:.84rem; color:var(--ink-2); font-weight:600; }
.pc-money dd{ margin:2px 0 0; font-size:1.25rem; font-weight:680; font-variant-numeric:tabular-nums; color:var(--ink); }
.pc-money .hint{ margin:4px 0 0; }
.pc-cur{ margin:8px 0 0; font-weight:700; font-size:.86rem; letter-spacing:.06em; color:var(--ink-2); }
.pc-danger{ border-top:1px solid var(--rule); margin-top:12px; }
.pc-danger p{ color:var(--ink-2); max-width:62ch; }

/* the case */
.pc-back{ margin:0; }
.pc-backlink{ display:inline-flex; align-items:center; gap:6px; font-weight:600; text-decoration:none; }
.pc-backlink:hover{ text-decoration:underline; }
.pc-example{ border-color:var(--pc-edge); }
.pc-case-head{ display:flex; flex-wrap:wrap; gap:8px 16px; align-items:flex-start; justify-content:space-between; }
.pc-case-title{ min-width:0; }
.pc-case-head h2{ margin:0; font-size:var(--t-2); overflow-wrap:anywhere; }
.pc-case-cat{ margin:2px 0 0; color:var(--ink-3); font-size:.92rem; }
.pc-case-status{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.pc-save{ font-size:.82rem; color:var(--ink-3); }
.pc-save.saved{ color:var(--pass); }
.pc-save.failed,.pc-save.conflict{ color:var(--fail); font-weight:600; }
.pc-case-grid{ display:grid; gap:16px; grid-template-columns:minmax(0,1fr); }
@media (min-width:1000px){
  .pc-case-grid{ grid-template-columns:minmax(0,1fr) minmax(280px,340px); align-items:start; }
  .pc-side{ grid-column:2; grid-row:1; position:sticky; top:calc(var(--hd,61px) + 12px); }
  .pc-main{ grid-column:1; grid-row:1; }
}
.pc-side{ display:grid; gap:12px; min-width:0; }
.pc-main{ min-width:0; }
.pc-next,.pc-actions{ padding:14px 16px; border-radius:12px; border:1px solid var(--rule); background:var(--surface); display:grid; gap:8px; }
.pc-next{ border-left:4px solid var(--pc); background:var(--pc-tint); }
.pc-next h3,.pc-actions h3{ margin:0; font-size:1rem; }
.pc-next-step{ margin:0; font-size:1.02rem; color:var(--ink); }
.pc-next .hint{ margin:0; }
.pc-todo{ list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:.92rem; color:var(--ink-2); }
.pc-todo li{ display:flex; gap:8px; align-items:flex-start; }
.pc-todo li > .pc-ico{ margin-top:.2em; }
.pc-todo li.late{ color:var(--fail); }
.pc-todo .linklike{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; text-align:left; }
.pc-acts-more{ border-top:1px solid var(--rule); padding-top:8px; }

/* tabs */
.pc-tabs{ display:flex; gap:4px; overflow-x:auto; padding:4px; border-radius:12px; background:var(--paper-2); scrollbar-width:thin; }
.pc-tabs button{ flex:0 0 auto; min-height:42px; padding:6px 14px; border:0; border-radius:9px; background:transparent; color:var(--ink-2); font:inherit; font-weight:600; cursor:pointer; }
.pc-tabs button[aria-selected="true"]{ background:var(--surface); color:var(--ink); box-shadow:var(--e1); }
.pc-tabs button:focus-visible{ outline:2px solid var(--pc); outline-offset:-2px; }
.pc-panel{ display:grid; gap:14px; padding-top:12px; }
.pc-panel:focus-visible{ outline:2px dashed var(--pc-edge); outline-offset:4px; }
.pc-sec{ display:grid; gap:10px; padding:14px 16px; border:1px solid var(--rule); border-radius:12px; background:var(--surface); min-width:0; }
.pc-sec > h3{ margin:0; font-size:1.04rem; }
.pc-sec .field{ margin-bottom:0; }
.pc-sec input[type=text],.pc-sec input[type=date],.pc-sec input[type=search],.pc-sec select,.pc-sec textarea{ width:100%; }
.pc-group{ margin:6px 0 0; font-size:.86rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); }

/* facts */
.pc-facts{ display:grid; gap:8px; }
.pc-fact{ display:grid; gap:6px; padding:10px 12px; border:1px solid var(--rule); border-radius:10px; background:var(--surface-2); }
.pc-fact.st-conflict{ border-color:color-mix(in srgb,var(--fail) 45%,var(--rule)); }
.pc-fact.st-extracted{ border-color:color-mix(in srgb,var(--warn) 45%,var(--rule)); }
.pc-fact-in label{ display:block; font-size:.9rem; font-weight:600; color:var(--ink-2); margin-bottom:4px; }
.pc-fact-in .hint{ margin:4px 0 0; }
.pc-fact-ctl{ display:flex; gap:8px; }
.pc-fact-ctl > *{ min-width:0; }
.pc-fact-ctl > input,.pc-fact-ctl > select:first-child{ flex:1 1 auto; }
.pc-fact-ctl > select:not(:first-child),.pc-fact-ctl > input[maxlength="4"]{ flex:0 0 7.5em; }
.pc-fact-st{ display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; font-size:.86rem; }
.pc-src{ color:var(--pc) !important; text-decoration:underline; text-underline-offset:2px; font-size:.86rem; }
.pc-fact-prop{ display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; font-size:.9rem; }
.pc-choose p{ margin:0; width:100%; font-weight:600; }
@media (min-width:760px){
  .pc-fact{ grid-template-columns:minmax(0,1fr) minmax(170px,auto); align-items:start; }
  .pc-fact-st{ justify-content:flex-end; padding-top:26px; }
  .pc-fact-prop{ grid-column:1 / -1; }
}

/* contradictions, deadlines */
.pc-contras{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.pc-contras > li{ padding:10px 12px; border-radius:10px; border:1px solid color-mix(in srgb,var(--fail) 35%,var(--rule)); display:grid; gap:6px; justify-items:start; }
.pc-contra-t{ margin:0; display:flex; gap:8px; align-items:flex-start; font-weight:600; }
.pc-contra-t .pc-ico{ color:var(--fail); margin-top:.2em; }
.pc-contra-vals{ margin:0; padding-left:20px; color:var(--ink-2); font-size:.9rem; }
.pc-dl{ list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:.92rem; color:var(--ink-2); }
.pc-dl li{ display:flex; gap:8px; align-items:flex-start; }
.pc-res h4{ margin:4px 0; font-size:.96rem; }
.pc-res ul{ margin:0; padding-left:18px; }
.pc-res li{ margin:4px 0; }

/* documents */
.pc-docs{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.pc-doc{ display:grid; gap:8px; padding:12px 14px; border:1px solid var(--rule); border-radius:10px; background:var(--surface-2); min-width:0; }
.pc-doc-h{ display:flex; gap:8px; align-items:center; }
.pc-doc-h h4{ margin:0; font-size:1rem; overflow-wrap:anywhere; }
.pc-docmeta{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px 12px; margin:0; font-size:.88rem; }
.pc-docmeta dt{ color:var(--ink-3); }
.pc-docmeta dd{ margin:0; color:var(--ink-2); overflow-wrap:anywhere; }
.pc-hash{ font-family:var(--mono); font-size:.84rem; }
.pc-inj{ display:flex; gap:8px; align-items:flex-start; border-left-color:var(--fail); }
.pc-doc .note,.pc-doc .pc-flag{ margin:0; }

/* review beside the document */
.pc-review{ display:grid; gap:10px; padding:14px 16px; border:2px solid var(--pc-edge); border-radius:12px; background:var(--surface); min-width:0; }
.pc-review > h3{ margin:0; font-size:1.04rem; overflow-wrap:anywhere; }
.pc-review-cols{ display:grid; gap:12px; grid-template-columns:minmax(0,1fr); }
@media (min-width:900px){ .pc-review-cols{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; } .pc-doctext{ position:sticky; top:calc(var(--hd,61px) + 12px); max-height:calc(100svh - var(--hd,61px) - 40px); overflow:auto; } }
.pc-doctext{ padding:10px 12px; border-radius:10px; background:var(--surface-2); border:1px solid var(--rule); min-width:0; }
.pc-pageno{ margin:0 0 4px; font-size:.8rem; color:var(--ink-3); font-weight:600; }
.pc-page{ margin:0 0 10px; white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; font-size:.92rem; line-height:1.55; color:var(--ink); background:none; padding:0; border:0; }
.pc-page mark{ background:color-mix(in srgb,var(--warn) 22%,transparent); color:inherit; border-bottom:2px solid var(--warn); padding:0 1px; border-radius:2px; }
.pc-page mark.m-confirmed,.pc-page mark.m-edited{ background:color-mix(in srgb,var(--pass) 20%,transparent); border-bottom-color:var(--pass); }
.pc-page mark:focus{ outline:2px solid var(--pc); outline-offset:1px; }
.pc-docimg{ max-width:100%; height:auto; border-radius:8px; border:1px solid var(--rule); background:var(--sheet); }
.pc-props{ display:grid; gap:8px; min-width:0; }
.pc-prop{ display:grid; gap:6px; padding:10px 12px; border:1px solid color-mix(in srgb,var(--warn) 40%,var(--rule)); border-radius:10px; background:var(--surface); min-width:0; }
.pc-prop.done{ border-color:color-mix(in srgb,var(--pass) 40%,var(--rule)); }
.pc-prop-h{ display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; justify-content:space-between; }
.pc-prop-h h4{ margin:0; font-size:.95rem; }
.pc-prop-v{ margin:0; font-size:1.02rem; font-weight:620; overflow-wrap:anywhere; }
.pc-prop-why{ margin:0; font-size:.88rem; color:var(--warn); }
.pc-prop-src{ margin:0; font-size:.86rem; color:var(--ink-2); overflow-wrap:anywhere; }
.pc-prop-src .linklike{ color:var(--pc); text-decoration:underline; }
.pc-prop-x{ margin:0; font-size:.78rem; color:var(--ink-3); font-family:var(--mono); }
.pc-inj-t{ margin:0; display:flex; gap:8px; align-items:flex-start; color:var(--ink); }
.pc-inj-t .pc-ico{ color:var(--fail); margin-top:.2em; }

/* timeline */
.pc-tl{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.pc-tl-i{ display:grid; grid-template-columns:minmax(0,1fr); gap:2px 14px; padding:10px 0 10px 16px; border-left:2px solid var(--pc-edge); position:relative; }
.pc-tl-i::before{ content:""; position:absolute; left:-6px; top:15px; width:10px; height:10px; border-radius:50%; background:var(--pc); }
.pc-tl-i.nodate::before{ background:var(--surface); border:2px solid var(--ink-3); width:6px; height:6px; }
@media (min-width:640px){ .pc-tl-i{ grid-template-columns:9.5em minmax(0,1fr); } }
.pc-tl-d{ margin:0; font-weight:640; font-variant-numeric:tabular-nums; color:var(--ink); }
.pc-tl-b{ display:grid; gap:2px; justify-items:start; }
.pc-tl-b p{ margin:0; }
.pc-tl-x{ color:var(--ink-2); overflow-wrap:anywhere; }
.pc-tl-ev{ display:flex; flex-wrap:wrap; gap:4px; align-items:center; font-size:.86rem; color:var(--ink-3); }
.pc-tl-b .btn{ margin-top:4px; }

/* drafts */
.pc-draft textarea{ font-family:var(--mono); font-size:.9rem; line-height:1.5; }
.pc-recipient{ margin:0; }
.pc-missing{ margin:0; }
.pc-notes{ margin:0; padding-left:18px; color:var(--ink-3); font-size:.88rem; }
.pc-sent{ display:grid; gap:6px; padding:10px 12px; border-radius:10px; background:var(--pc-tint); border:1px solid var(--pc-edge); justify-items:start; }
.pc-sent p{ margin:0; }

/* history */
.pc-hist{ margin:0; padding-left:20px; display:grid; gap:6px; font-size:.92rem; color:var(--ink-2); }
.pc-hist time{ font-variant-numeric:tabular-nums; color:var(--ink-3); }

/* dialogs */
.pc-dlg{ display:grid; gap:10px; }
.pc-dlg .field{ margin:0; }
.pc-dlg input[type=text],.pc-dlg input[type=date],.pc-dlg select,.pc-dlg textarea{ width:100%; }
.pc-check{ display:flex; gap:8px; align-items:flex-start; }
.pc-check input{ margin-top:4px; width:18px; height:18px; flex:0 0 18px; accent-color:var(--pc); }
.pc-check label{ font-size:.94rem; color:var(--ink); }
.pc-export fieldset{ border:1px solid var(--rule); border-radius:10px; padding:10px 12px; margin:0; display:grid; gap:6px; }
.pc-export legend{ font-weight:640; padding:0 4px; }
.pc-statelist{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.pc-statelist .hint{ margin:2px 0 0; }

/* the paper (print preview) */
.pc-work{ grid-template-columns:minmax(0,1fr) !important; }
.pc-work .sf-paperwrap{ position:relative !important; top:auto !important; max-height:none !important; overflow:visible !important; }
.pc-work-bar{ display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; justify-content:space-between; }
.pc-work-bar h2{ margin:0; font-size:var(--t-1); }
.sf-sheet.sf-doc .pc-d-h{ font-size:11pt; margin:5mm 0 2mm; }
.sf-sheet.sf-doc .pc-d-p{ margin:0 0 2mm; }
.sf-sheet.sf-doc .pc-d-t{ width:100%; font-size:8.8pt; margin-bottom:2mm; }
.sf-sheet.sf-doc .pc-d-t th,.sf-sheet.sf-doc .pc-d-t td{ padding:1.2mm 2mm; border-bottom:.2mm solid var(--sheet-rule); text-align:left; vertical-align:top; }
.sf-sheet.sf-doc .pc-d-small{ color:var(--sheet-ink2); font-size:8pt; }
.sf-sheet.sf-doc .pc-d-note{ color:var(--sheet-ink2); font-size:8.4pt; margin:1mm 0 2mm; }
.sf-sheet.sf-doc .pc-d-example{ display:inline-block; border:.3mm solid var(--sheet-ink); color:var(--sheet-ink); padding:.8mm 2.5mm; border-radius:1.5mm; font-weight:700; margin:0 0 3mm; }
.sf-sheet.sf-doc .pc-d-ul{ margin:0 0 2mm; padding-left:5mm; }
.sf-sheet.sf-doc .pc-d-hash{ font-family:ui-monospace,Consolas,monospace; font-size:7.6pt; }
.sf-sheet.sf-doc .pc-d-body{ white-space:normal; line-height:1.55; margin-top:3mm; }
.sf-sheet.sf-doc .d-foot{ margin-top:6mm; color:var(--sheet-ink2); font-size:7.8pt; }

@media print{
  #pc-work{ display:block !important; }
  .pc-work-bar{ display:none !important; }
}