/* SyntaxFlow — «tu taller en la web»: the workshop's price list and the
   configurator its customers open. On top of base.css and sf.css, with their
   tokens only, so light and dark come from there. Mobile first: 360 px wide
   works; tables that cannot shrink scroll inside their own box. */

/* ---------- the workshop's desk ---------- */
.pl-color{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.pl-color input[type=color]{ width:52px; height:40px; padding:2px; border:1px solid var(--rule-2); border-radius:var(--r-ctl); background:var(--surface); cursor:pointer; }
.pl-color-v{ font-family:var(--mono); font-size:.86rem; color:var(--ink-2); }

.pl-prod{ display:grid; gap:10px; padding:14px; border:1px solid var(--rule); border-radius:12px; background:var(--surface-2); min-width:0; }
.pl-prod .field{ margin-bottom:0; }
.pl-prod-h{ display:flex; flex-wrap:wrap; gap:10px 12px; align-items:flex-end; }
.pl-prod-h .grow{ flex:1 1 220px; }
.pl-prod-h > .field:not(.grow){ flex:0 1 240px; }
.pl-acts{ display:flex; flex-wrap:wrap; gap:6px; }
.pl-kind{ display:grid; gap:10px; }
.pl-warn{ margin:0; font-size:.88rem; font-weight:600; color:var(--warn); }

.pl-gridwrap{ overflow-x:auto; max-width:100%; border:1px solid var(--rule); border-radius:10px; background:var(--surface); }
.pl-gridwrap:focus-visible{ outline:2px solid var(--glass); outline-offset:2px; }
.pl-grid{ border-collapse:collapse; font-size:.88rem; }
.pl-grid th{ padding:6px 8px; font-weight:600; color:var(--ink-2); white-space:nowrap; text-align:left; font-variant-numeric:tabular-nums; }
.pl-grid thead th{ border-bottom:1px solid var(--rule); }
.pl-grid td{ padding:4px; }
.pl-grid input{ width:86px; min-height:38px; text-align:right; font-variant-numeric:tabular-nums; }

.pl-opts{ display:grid; gap:8px; }
.pl-opts > h3{ margin:4px 0 0; font-size:.95rem; }
.pl-opts > .hint{ margin:0; }
.pl-opt{ display:grid; gap:8px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:end; padding:8px 0; border-top:1px dashed var(--rule); }
.pl-opt .field label{ font-size:.84rem; margin-bottom:4px; }
.pl-opt > .btn{ justify-self:start; }
@media (min-width:760px){
  .pl-opt{ grid-template-columns:minmax(0,1.6fr) minmax(0,1.6fr) minmax(0,.8fr) minmax(0,1.1fr) auto; }
  .pl-opt > .btn{ justify-self:end; margin-bottom:4px; }
}

.pl-try{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 12px; padding:10px 12px; border-radius:10px; background:var(--readout); }
.pl-try-l{ flex:1 0 100%; font-size:.84rem; font-weight:650; color:var(--ink-2); }
.pl-try-f{ display:grid; gap:4px; font-size:.84rem; color:var(--ink-2); }
.pl-try-f input{ width:96px; }
.pl-try-out{ flex:1 1 220px; font-size:.9rem; color:var(--ink); font-variant-numeric:tabular-nums; }
.pl-try-out b{ font-size:1.02rem; }
.pl-try-out .hint{ display:block; margin-top:2px; }
.pl-try-out.bad{ color:var(--warn); font-weight:600; }

.pl-add .btn{ white-space:normal; text-align:left; }

.pl-share-st{ margin:0; font-size:.9rem; color:var(--ink-2); }
.pl-code{ width:100%; font-family:var(--mono); font-size:.8rem; line-height:1.45; word-break:break-all; resize:vertical; }
.pl-qr{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.pl-qr-img{ flex:0 0 auto; width:176px; max-width:100%; }
.pl-qr-img:empty{ display:none; }
.pl-qr-img svg{ display:block; width:100%; height:auto; border-radius:6px; }
.pl-qr-txt{ flex:1 1 200px; display:grid; gap:8px; }
.pl-qr-txt .hint{ margin:0; }
.btn.is-off{ opacity:.5; pointer-events:none; }

/* a request or a price list arriving from a link */
#pl-incoming:not(:empty){ margin-bottom:16px; }
.pl-req{ border-left:4px solid var(--pencil); }
.pl-req > p{ margin:0; }
.pl-reqwrap{ overflow-x:auto; }
.pl-reqt{ width:100%; border-collapse:collapse; font-size:.9rem; }
.pl-reqt th,.pl-reqt td{ padding:8px 6px; border-bottom:1px solid var(--rule); text-align:left; vertical-align:top; }
.pl-reqt .n{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.pl-st{ display:block; margin-top:2px; font-size:.8rem; font-weight:600; color:var(--ink-3); }
.st-changed .pl-st,.st-error .pl-st,.st-missing .pl-st{ color:var(--warn); }
.st-noList .pl-st{ color:var(--ink-2); }

/* ---------- the paper: always ink on white ---------- */
.d-prod{ break-inside:avoid; margin:0 0 5mm; }
.d-prod h3{ margin:0 0 1mm; font-size:11pt; color:#1b1f24; }
.d-desc{ margin:0 0 2mm; font-size:9pt; color:#4a525c; }
.sf-sheet.sf-doc .d-kv th{ text-align:left; font-weight:500; color:#1b1f24; }
.sf-sheet.sf-doc .d-grid th{ text-align:left; }
.sf-sheet.sf-doc .d-grid thead th.n{ text-align:right; }
.sf-sheet.sf-doc .d-opts{ margin-top:2mm; }
.d-poster{ display:grid; justify-items:center; text-align:center; gap:4mm; padding:8mm 0 4mm; color:#1b1f24; }
.d-p-logo{ max-height:22mm; max-width:70mm; object-fit:contain; }
.sf-doc .d-p-name{ margin:0; font-size:26pt; line-height:1.1; font-stretch:110%; }
.sf-doc .d-p-tag{ margin:0; font-size:12pt; color:#4a525c; }
.sf-doc .d-p-call{ margin:4mm 0 0; font-size:17pt; font-weight:650; max-width:150mm; }
.d-p-qr{ width:120mm; max-width:100%; }
.d-p-qr svg{ display:block; width:100%; height:auto; }
.sf-doc .d-p-steps{ margin:0; font-size:11pt; max-width:140mm; color:#1b1f24; }
.sf-doc .d-p-contact{ margin:0; font-size:12pt; font-weight:600; }

/* ---------- the customers' configurator ---------- */
.cf-root{ display:grid; gap:16px; }
.cf-empty{ max-width:68ch; }
.cf-empty > p{ margin:0; }
.cf-shop{ padding:18px 20px; border-radius:14px; background:var(--docs); color:var(--docs-ink); }
.cf-shop.has-color{ background:var(--cf-band); color:var(--cf-ink); }
.cf-shop .cf-name{ margin:0; font-size:clamp(1.35rem,4.6vw,1.9rem); line-height:1.15; font-stretch:110%; color:inherit; overflow-wrap:anywhere; }
.cf-shop .cf-tag{ margin:4px 0 0; font-size:1rem; color:inherit; opacity:.92; overflow-wrap:anywhere; }
.cf-indic{ display:block; margin:0; }
.cf-cond{ display:block; margin-top:6px; white-space:pre-line; overflow-wrap:anywhere; }

.cf-grid{ display:grid; gap:16px; align-items:start; }
@media (min-width:960px){
  .cf-grid{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); }
  .cf-req{ position:sticky; top:calc(var(--hd,61px) + 12px); }
  html.cf-embed .cf-req{ top:12px; }
}
.cf-form{ display:grid; gap:16px; min-width:0; }
.cf-products{ margin:0; min-width:0; }
.cf-products > legend,.cf-group > legend{ padding:0; font-weight:650; color:var(--ink); }
.cf-products > legend{ float:left; width:100%; margin-bottom:4px; font-size:1.06rem; }
.cf-prod{ display:flex; gap:12px; align-items:flex-start; padding:12px; border:1px solid var(--rule-2); border-radius:10px; background:var(--surface); cursor:pointer; }
.cf-prod:has(input:checked){ border-color:var(--glass); box-shadow:0 0 0 2px color-mix(in srgb,var(--glass) 30%,transparent); }
.cf-prod input,.cf-opt input{ width:20px; height:20px; margin:2px 0 0; flex:0 0 20px; accent-color:var(--glass); }
.cf-prod-t{ display:grid; gap:2px; min-width:0; overflow-wrap:anywhere; }
.cf-prod-t small{ font-size:.86rem; color:var(--ink-2); }
.cf-prod-t .cf-from{ font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.cf-conf .cf-h{ margin:0; font-size:1.06rem; overflow-wrap:anywhere; }
.cf-conf .field{ margin-bottom:0; }
.cf-sizes{ grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); }
.cf-sizes input{ font-variant-numeric:tabular-nums; }
.cf-conf > .hint{ margin:0; }
.cf-group{ display:grid; gap:6px; margin:0; padding:10px 12px; border:1px solid var(--rule); border-radius:10px; min-width:0; }
.cf-opt{ display:flex; flex-wrap:wrap; gap:4px 10px; align-items:flex-start; cursor:pointer; overflow-wrap:anywhere; }
.cf-opt > span{ flex:1 1 140px; }
.cf-opt small,.cf-count small{ color:var(--ink-2); font-size:.86rem; font-weight:500; font-variant-numeric:tabular-nums; }
.cf-check{ padding:4px 0; }
.cf-count{ display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; }
.cf-count label{ flex:1 1 160px; margin:0; }
.cf-count input{ width:84px; }
.cf-price{ padding:12px 14px; border-radius:10px; background:var(--readout); display:grid; gap:6px; }
.cf-price p{ margin:0; }
.cf-total{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:6px 12px; font-weight:600; }
.cf-total strong{ font-size:1.6rem; font-variant-numeric:tabular-nums; }
.cf-each{ font-size:.9rem; color:var(--ink-2); text-align:right; font-variant-numeric:tabular-nums; }
.cf-break{ margin:0; padding:0; list-style:none; display:grid; gap:2px; font-size:.88rem; color:var(--ink-2); }
.cf-break li{ display:flex; justify-content:space-between; gap:12px; font-variant-numeric:tabular-nums; }
.cf-break li span:first-child{ overflow-wrap:anywhere; }
.cf-msg{ font-weight:600; color:var(--ink); }
#cf-add{ justify-self:start; white-space:normal; text-align:left; }

.cf-req > h2{ margin:0; font-size:1.1rem; }
.cf-req > p{ margin:0; }
.cf-req .field{ margin-bottom:0; }
.cf-items{ margin:0; padding-left:1.3em; display:grid; gap:8px; }
.cf-items li{ padding-left:2px; }
.cf-items li > *{ vertical-align:middle; }
.cf-it-t{ overflow-wrap:anywhere; }
.cf-it-p{ display:inline-block; margin:0 8px; font-weight:650; font-variant-numeric:tabular-nums; }
.cf-tot{ width:100%; border-collapse:collapse; font-size:.92rem; }
.cf-tot th{ text-align:left; font-weight:500; color:var(--ink-2); padding:4px 0; }
.cf-tot td{ text-align:right; padding:4px 0; font-variant-numeric:tabular-nums; }
.cf-tot .cf-sum th,.cf-tot .cf-sum td{ border-top:1px solid var(--rule-2); padding-top:8px; font-weight:700; color:var(--ink); font-size:1.05rem; }
.cf-send .btn{ white-space:normal; }
.cf-text{ width:100%; font-family:var(--mono); font-size:.82rem; }
.cf-foot{ display:grid; gap:4px; text-align:center; }
.cf-foot p{ margin:0; font-size:.86rem; color:var(--ink-2); }

/* inside the workshop's own website: only the configurator */
html.cf-embed .site-head,html.cf-embed .site-foot,html.cf-embed main > .hero,html.cf-embed .cf-prose,
html.cf-embed .langbar,html.cf-embed .offnote,html.cf-embed .consent,html.cf-embed .jump{ display:none !important; }
html.cf-embed main.wrap{ padding-top:12px; padding-bottom:12px; }
html.cf-embed body{ background:var(--paper); }

/* sf.css's "More" menu is a <details>, and base.css boxes every details
   (border, padding, margin): undone here for this page. The same three lines
   belong in sf.css for the survey and the budget too (see the report). */
#pl-acts{ align-items:center; }
#pl-acts .q-more{ margin:0; padding:0; border:0; border-radius:0; background:none; }
#pl-acts .q-more[open] > summary{ margin-bottom:0; }

/* the paper's key-value rows and the table's row heads read as text, not as column heads */
.sf-sheet.sf-doc .d-kv th,.sf-sheet.sf-doc .d-grid tbody th{ text-transform:none; letter-spacing:0; font-size:9pt; font-weight:500; color:#1b1f24; padding:2mm 2mm 2mm 0; border-bottom:.2mm solid #d9dde3; }
.sf-sheet.sf-doc .d-prod .d-lines{ margin-bottom:1mm; }

/* base.css makes every table a scrolling block with shaded heads: these are
   small tables of our own, laid out as tables */
.cf-tot,.pl-reqt,.pl-grid{ display:table; overflow:visible; }
.cf-tot{ width:100%; }
body[data-area] main :is(.cf-tot,.pl-reqt,.pl-grid) :is(th,td){ background:none; }
.cf-tot{ margin:0; }
.pl-reqt,.pl-grid{ margin:0; }
.pl-reqt th,.pl-reqt td{ white-space:normal; }