/* mesa-opt.css — the structure of «La mesa de corte» in the glass cutting optimiser (r1290, 11-11-2026).
   ==========================================================================
   Only the fourteen pages of the glass cutting optimiser link it, after base.css and mesa.css (whose tokens it
   uses: --mc-ink, --mc-paper, --mc-mint, --mc-amber, --mc-coral, --mc-lilac, --mc-p0…7, --mc-edge). The markup
   is written by tools/mesa-opt.cjs and the live parts by assets/js/cut-mesa.js.
     1. the band: the site's header and the page's title on the material's colour, the RESULT at the right;
     2. the workbench, as wide as the window and with no cards: the list on paper, the plan on an ink table;
     3. what the result says in full (figures with their working, cost, total, next steps), in a strip below;
     4. the rest of the page in full-width sections with an ink edge.
   How it sits on the other two sheets: the header and the tool are inside #mesa, so the rules written for the old
   layout (main:has(> #tool #sheets) …, main > .hero:first-of-type …) no longer match them; every rule here starts
   at #mesa or at body:has(#mesa). The !important that appear answer an inline style of the page or of a script
   (each says which). Screen only: print keeps the site's print styles (one rule at the end puts the figures back
   before the drawings, where the printed page always had them).
   Dark theme: the same structure on ink, as mesa.css decided for the tools (long sessions at a screen): the band
   keeps its colour, the list goes on the dark sheet, the table is ink in both themes.
   Contrast (WCAG 2.x, measured): ink on mint 12.3, paper on ink 17.1, ink on paper 17.1; the dim text of the list
   (--ink-3 #4a5450 on paper) 7.0; the dim text of the table (#bdbab2 on ink) 9.9; the field line (--rule-2 on
   paper) 3.1; dark: --ink-3 #b9b6ae on the sheet 8.5.
   ========================================================================== */
@media screen{
#mesa, main:has(> #mesa){ --mo-gut:max(18px, 3.2vw); --mo-pad:clamp(16px, 2vw, 30px); --mo-line:color-mix(in srgb, var(--ink) 18%, transparent); --mo-dim:#bdbab2; }

/* ---------- 1. the band ---------- */
/* the site's header on the band: the same header, in ink on the material's colour, not stuck to the window */
body:has(#mesa) .site-head{ position:relative; background:var(--mc-mint); border-bottom:0; color-scheme:light;
  --ink:#0b0f0e; --ink-2:#0b0f0e; --ink-3:#2a3330; --paper:#f4f1ea; --paper-2:#e9e5da; --surface:#fff; --surface-2:#faf8f3; --rule:#d8d3c6; --rule-2:#0b0f0e;
  --glass:#0b0f0e; --glass-deep:#0b0f0e; --glass-tint:#f4f1ea; color:#0b0f0e; }
body:has(#mesa) .site-head > .wrap{ max-width:none; padding-inline:max(18px, 3.2vw); }
body:has(#mesa) .site-head :is(.nav > a, .nav-dd, .brand){ color:#0b0f0e; }
body:has(#mesa) .site-head :is(.nav > a, .nav-dd):hover, body:has(#mesa) .site-head .nav-drop.open > .nav-dd{ background:rgba(11,15,14,.1); }
body:has(#mesa) .site-head .sfp-btn{ background:transparent; border-color:rgba(11,15,14,.55); color:#0b0f0e; }
body:has(#mesa) .site-head .sfp-btn kbd{ border-color:rgba(11,15,14,.55); color:#0b0f0e; }
body:has(#mesa) .site-head .nav > a:last-of-type{ background:transparent; border:2px solid #0b0f0e; border-radius:999px; color:#0b0f0e; font-weight:800; padding:6px 16px; }
body:has(#mesa) .site-head .nav > a:last-of-type:hover{ background:#0b0f0e; color:#f4f1ea; }
body:has(#mesa) .site-head :is(a, button):focus-visible{ outline:3px solid #0b0f0e; outline-offset:2px; }
body:has(#mesa) .site-head .menu-btn{ color:#0b0f0e; border-color:#0b0f0e; background:transparent; }

main.wrap:has(> #mesa){ max-width:none; padding:0; }
/* the padding answers the inline padding-bottom of the header's section */
#mesa > .hero{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:4vw; align-items:end; margin:0; padding:4px var(--mo-gut) 16px !important;
  background:var(--mc-mint); color:#0b0f0e; border-bottom:3px solid #0b0f0e; color-scheme:light;
  --ink:#0b0f0e; --ink-2:#0b0f0e; --ink-3:#0b0f0e; --glass:#0b0f0e; --glass-deep:#0b0f0e; --mc-focus:#0b0f0e; --mc-edge:#0b0f0e; --mc-cut:#0b0f0e; --mc-on-cut:#f4f1ea; }
#mesa > .hero::after{ display:none; }
#mesa .mo-hl{ min-width:0; }
#mesa .hero .eyebrow{ margin:0; color:#0b0f0e; font-size:.74rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
#mesa .hero h1{ margin:6px 0 0; max-width:20em; font-weight:800; font-stretch:100%; font-size:clamp(1.5rem, 2.25vw, 2.2rem); line-height:1.02; letter-spacing:-.025em; color:#0b0f0e; text-wrap:balance; }
#mesa .mo-sub{ margin:8px 0 0; max-width:42em; font-size:.98rem; line-height:1.35; color:#0b0f0e; }
#mesa :is(.mo-more, .mo-set){ border:0; border-radius:0; padding:0; margin:0; background:none; }
#mesa :is(.mo-more, .mo-set)[open] > summary{ margin-bottom:0; }
#mesa .mo-more{ display:inline; }
#mesa .mo-more > summary{ display:inline; list-style:none; cursor:pointer; font-weight:700; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px; padding:12px 0; border-radius:2px; }
#mesa .mo-more > summary::-webkit-details-marker{ display:none; }
#mesa .mo-more > summary:focus-visible{ outline:3px solid #0b0f0e; outline-offset:2px; }
#mesa .mo-more-in{ margin:12px 0 4px; padding-top:12px; border-top:1.5px solid rgba(11,15,14,.35); }
#mesa .mo-more-in .answer{ margin:0 0 12px; padding:0; background:none; border:0; border-radius:0; box-shadow:none; max-width:none; }
#mesa .mo-more-in :is(p, .hint, .answer){ color:#0b0f0e; }
#mesa .mo-more-in .cta-row{ margin:0 0 10px; }
#mesa .mo-more-in .cta.ghost{ border-color:#0b0f0e; color:#0b0f0e; }
/* the result */
#mesa .mo-res{ min-width:0; }
#mesa .mo-pill{ display:inline-flex; align-items:center; gap:8px; max-width:100%; min-height:32px; margin:0 0 10px; padding:5px 14px 5px 9px; border-radius:999px; background:#0b0f0e; color:#f4f1ea; font-size:.9rem; font-weight:700; line-height:1.2; }
#mesa .mo-pill i{ flex:0 0 18px; width:18px; height:18px; border-radius:50%; background:#f4f1ea; display:grid; place-items:center; }
#mesa .mo-pill.ok i{ background:var(--mc-mint); }
#mesa .mo-pill.ok i::after{ content:""; width:8px; height:4px; border-left:2.5px solid #0b0f0e; border-bottom:2.5px solid #0b0f0e; transform:rotate(-45deg) translateY(-1px); }
#mesa .mo-pill.warn i{ background:var(--mc-amber); }
#mesa .mo-pill.no i{ background:var(--mc-coral); }
#mesa .mo-fig{ display:flex; align-items:end; gap:clamp(18px, 3vw, 46px); margin:0; }
#mesa .mo-fig > div{ display:grid; }
#mesa .mo-fig dt{ order:2; margin-top:12px; font-size:.74rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
#mesa .mo-fig dd{ margin:0; font-stretch:62%; font-weight:900; font-size:clamp(3.2rem, 6.2vw, 6.2rem); line-height:.8; letter-spacing:-.01em; font-variant-numeric:tabular-nums; white-space:nowrap; }
#mesa .mo-fig dd small{ font-size:.42em; margin-left:.06em; }

/* ---------- 2. the workbench ---------- */
/* the padding answers the inline padding of the section */
#mesa > #tool{ padding:0 !important; margin:0; }
#mesa #cutGuide, #mesa .cg-n, #mesa #cutExTag{ display:none; }
#mesa .calc{ display:grid; grid-template-columns:minmax(0,1fr); align-items:start; gap:0; border:0; border-radius:0; box-shadow:none; background:var(--paper); overflow:visible; position:relative; }
#mesa .calc::before{ content:""; display:block; position:static; height:auto; grid-column:1 / -1; grid-row:2 / 4; align-self:stretch; background:#0b0f0e; z-index:auto; }
#mesa .calc > .results{ display:contents; }
#mesa .calc > .results > *{ grid-column:1 / -1; order:6; margin-inline:var(--mo-gut); min-width:0; }

/* the list, on paper */
#mesa .calc > form{ grid-column:1; grid-row:1; padding:18px var(--mo-gut) 22px; min-width:0; }
#mesa fieldset{ margin:0; }
#mesa #f > fieldset:first-of-type{ display:flex; flex-wrap:wrap; gap:0 8px; align-items:center; }
#mesa #f > fieldset:first-of-type > *{ flex:0 0 100%; min-width:0; }
#mesa #f > fieldset:first-of-type > legend{ display:flex; align-items:baseline; gap:12px; float:left; width:100%; margin:0 0 10px; padding:0; border:0; font-size:1.25rem; font-weight:800; font-stretch:100%; letter-spacing:-.01em; color:var(--ink); }
#mesa legend::before{ display:none; }
#mesa .mo-count{ font-size:.9rem; font-weight:500; letter-spacing:0; color:var(--ink-3); }
/* «these sizes are an example»: an ink bar with the way out of it */
#mesa .cstart{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 10px; margin:0 0 10px; padding:8px 8px 8px 14px; border:0; border-radius:10px; background:var(--mc-cut); color:var(--mc-on-cut); }
#mesa .cstart:has(> #cutStartEx[hidden]):not(:has(> .cstart-last)){ display:none; }
#mesa .cstart p{ margin:0; font-size:.92rem; line-height:1.3; color:inherit; }
#mesa .cstart .cstart-h{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#mesa .cstart .cstart-ex{ flex:1 1 6em; }
#mesa .cstart .cstart-b{ display:contents; }
#mesa .cstart #cutPasteGo{ display:none; }
#mesa .cstart .cta{ min-height:44px; padding:0 16px; border:0; border-radius:999px; background:var(--mc-mint); color:#0b0f0e; font-weight:800; font-size:.95rem; white-space:nowrap; }
#mesa .cstart .cta:hover{ background:#f4f1ea; color:#0b0f0e; box-shadow:none; transform:none; }
#mesa .cstart .cta:focus-visible{ outline:3px solid var(--mc-lilac); outline-offset:2px; }
#mesa .cstart .cstart-last{ flex:1 1 100%; }
/* the rows: a swatch in the colour of the size's pieces, width, height, how many */
#mesa .phead, #mesa .p{ display:grid; grid-template-columns:14px minmax(0,1fr) minmax(0,1fr) 68px 44px; gap:0 10px; align-items:center; }
#mesa .phead{ margin:0; padding:6px 0 4px; font-family:inherit; font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); }
#mesa .phead::before{ content:""; }
/* the rows are drawn by the page script at the end of the document: their room is kept until then (r1021) */
#mesa #ps{ display:block; margin:0; min-height:0; }
#mesa #ps[data-rows]{ min-height:calc(var(--psr, 4) * 51.5px + 1.5px); }
#mesa .p{ border-top:1.5px solid var(--mo-line); padding:3px 0; }
#mesa .p:last-child{ border-bottom:1.5px solid var(--mo-line); }
#mesa .p::before{ content:""; width:14px; height:30px; border:1.5px solid var(--ink); border-radius:3px; background:var(--sw, transparent); }
/* the first three boxes of a row, whatever their type (assets/js/cut-units.js makes them text boxes for inches) */
#mesa .p > input:nth-child(-n+3){ grid-area:auto; width:100%; min-height:44px; height:44px; margin:0; padding:0 2px; border:0; border-bottom:1.5px solid transparent; border-radius:0; background:transparent; box-shadow:none;
  font-size:1.22rem; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink); -moz-appearance:textfield; appearance:textfield; }
#mesa .p > input:nth-child(-n+3)::-webkit-inner-spin-button, #mesa .p > input:nth-child(-n+3)::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
#mesa .p > input:nth-child(-n+3):hover{ border-bottom-color:var(--rule-2); }
#mesa .p > input:nth-child(-n+3):focus{ outline:0; border-bottom-color:var(--ink); background:var(--surface); box-shadow:inset 0 -3px 0 var(--ink); }
#mesa .p > .lrm{ grid-area:auto; width:44px; height:44px; border:0; border-radius:8px; background:none; color:var(--ink-3); font-size:1.25rem; }
#mesa .p > .lrm:hover{ color:var(--ink); background:var(--mo-line); }
#mesa .p > :is(.pref, .pglass, .pshape, .pfix){ display:none; }
#mesa #ps.mo-x .p > :is(.pref, .pglass, .pshape), #mesa .p.mo-has > :is(.pref, .pglass, .pshape){ display:block; height:40px; margin:2px 0 6px; font-size:.9rem; }
#mesa #ps.mo-x .p > .pfix, #mesa .p.mo-has > .pfix{ display:flex; grid-column:2 / -1; min-height:44px; margin:-4px 0 2px; }
#mesa #ps.rotfixed .p > .pfix{ display:none; }
#mesa .p > .pref{ grid-column:2 / 3; }
#mesa .p > .pglass{ grid-column:3 / 4; }
#mesa .p > .pshape{ grid-column:4 / -1; padding:0 2px; }
#mesa #shapeNote{ margin:8px 0 0; }
/* add a size, paste a list, the rows' extras */
#mesa #f > fieldset:first-of-type > :is(#add, #paste){ flex:0 1 auto; width:auto; min-height:44px; margin:12px 0 0 !important; padding:0 13px; border:2px solid var(--mc-edge); border-radius:999px; background:transparent; color:var(--ink); font-size:.9rem; font-weight:800; letter-spacing:-.01em; }
#mesa #f > fieldset:first-of-type > #add{ background:var(--mc-cut); border-color:var(--mc-cut); color:var(--mc-on-cut); }
#mesa #f > fieldset:first-of-type > #paste:hover{ background:var(--mc-cut); border-color:var(--mc-cut); color:var(--mc-on-cut); }
#mesa .mo-rowx{ flex:0 0 100%; justify-self:start; display:inline-flex; align-items:center; gap:8px; min-height:44px; margin:2px 0 0; padding:0; border:0; background:none; color:var(--ink-2); font:inherit; font-size:.88rem; font-weight:600; text-align:left; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
#mesa .mo-rowx::before{ content:"+"; font-weight:800; text-decoration:none; display:inline-block; width:.8em; }
#mesa .mo-rowx[aria-expanded="true"]::before{ content:"–"; }
#mesa #pasteBox{ margin-top:10px; }
/* the settings, folded, each with its value in sight */
#mesa #f > fieldset:has(> .mo-set){ margin-top:14px; border-top:3px solid var(--mc-edge); }
#mesa #f > fieldset:has(> .mo-set) > legend, #mesa .mo-set > fieldset > legend{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; float:left; padding:0; margin:0; border:0; }
#mesa .mo-set{ border-bottom:1.5px solid var(--mo-line); }
#mesa .mo-more > summary{ background:none; }
#mesa .mo-set > summary{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; min-height:44px; padding:11px 0; list-style:none; cursor:pointer; font-weight:700; color:var(--ink); }
#mesa .mo-set > summary::-webkit-details-marker{ display:none; }
#mesa .mo-set > summary::after{ content:"+"; flex:0 0 .7em; font-weight:800; text-align:right; }
#mesa .mo-set[open] > summary::after{ content:"–"; }
#mesa .mo-set-v{ margin-left:auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; color:var(--ink-3); font-variant-numeric:tabular-nums; }
#mesa .mo-set > summary:hover .mo-set-t{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:2px; }
#mesa .mo-set > :is(.mo-set-in, fieldset){ padding:2px 0 16px; }
#mesa .mo-set .cu-units{ margin:0 0 12px; }
#mesa .mo-notes{ margin-top:14px; font-size:.86rem; color:var(--ink-3); }
#mesa .mo-notes :is(.note, .hint){ margin:0 0 8px !important; padding:0; border:0; background:none; font-size:inherit; color:inherit; }
#mesa .mo-notes .mobhint{ display:none; }
#mesa .mo-notes a{ display:inline-block; padding:10px 0; margin:-10px 0; }

/* the table, on ink (r1294). Its parts are inside #moTable, one box that follows the reader down the list; that box
   is inside #moInk, the ink panel itself: a real block as tall as the list beside it, which is what keeps the
   sticky table inside the ink in every browser */
#mesa .calc > .results > #moInk{ grid-row:3; order:0; margin:0; min-width:0; background:#0b0f0e; }
#mesa #moInk > #moTable{ margin:0; padding:14px var(--mo-gut) 18px; display:grid; grid-template-columns:minmax(0,1fr); gap:10px 12px; align-items:start; position:relative; background:#0b0f0e; color:#f4f1ea; color-scheme:dark; }
#mesa .calc > .results > #verdict:not(.ok){ grid-row:2; order:0; margin:14px var(--mo-gut) 0; }
#mesa #moTable > *{ min-width:0; margin:0; }
#mesa #moTable > #planrow{ margin:0 !important; }   /* answers its inline margin */
#mesa #moTable > #moChips{ margin-top:2px; }
#mesa .mo-tabs{ display:flex; align-items:center; gap:6px; min-height:44px; min-width:0; }
#mesa .mo-cap{ margin-right:6px; font-size:.74rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--mo-dim); }
#mesa .mo-tabs-in{ display:flex; gap:6px; min-width:0; overflow-x:auto; padding:3px; margin:-3px; scrollbar-width:thin; }
#mesa .mo-tabs-in button{ flex:0 0 auto; min-width:44px; min-height:44px; padding:0 8px; border:2px solid rgba(244,241,234,.45); border-radius:8px; background:none; color:#f4f1ea; font:inherit; font-weight:800; cursor:pointer; }
#mesa .mo-tabs-in button:hover{ border-color:#f4f1ea; }
#mesa .mo-tabs-in button[aria-pressed="true"]{ background:#f4f1ea; border-color:#f4f1ea; color:#0b0f0e; }
#mesa :is(.mo-tabs-in, .mo-thumbs, .mo-chips) button:focus-visible, #mesa #planrow :is(a, button):focus-visible{ outline:3px solid var(--mc-lilac); outline-offset:2px; }
#mesa.mo-one .mo-tabs, #mesa.mo-none .mo-tabs{ visibility:hidden; }
#mesa.mo-one .mo-thumbs, #mesa.mo-none .mo-thumbs{ display:none; }
/* the plan's buttons: pills with a paper edge; the secondary ones in «More» (assets/js/cut-more.js) */
#mesa #planrow{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; min-height:44px; }
#mesa #planrow > :is(.cta, .cta-more){ flex:0 0 auto; order:5; }
#mesa #planrow > #moFull{ order:1; } #mesa #planrow > #planlink{ order:2; } #mesa #planrow > #cutLabels{ order:3; } #mesa #planrow > #cutWa{ order:4; }
#mesa #planrow > .cta, #mesa #planrow .cta-more-btn{ min-height:44px; padding:0 14px; border:2px solid #f4f1ea; border-radius:999px; background:transparent; color:#f4f1ea; font-size:.9rem; font-weight:800; box-shadow:none; white-space:nowrap; }
#mesa #planrow > .cta:hover, #mesa #planrow .cta-more-btn:hover, #mesa #planrow .cta-more-btn[aria-expanded="true"]{ background:#f4f1ea; border-color:#f4f1ea; color:#0b0f0e; transform:none; box-shadow:none; }
#mesa #planrow .mo-long{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#mesa #planrow .cta-more-list{ color-scheme:light; background:#fff; border:2px solid #0b0f0e; border-radius:10px; box-shadow:6px 6px 0 var(--mc-mint); padding:6px; }
#mesa #planrow .cta-more-list > :is(.cta, .cta.ghost){ border:0; border-radius:6px; background:none; color:#0b0f0e; font-weight:600; }
#mesa #planrow .cta-more-list > .cta:is(:hover, :focus-visible){ background:#f4f1ea; color:#0b0f0e; }
/* a message of the row (link copied, job saved…) and a verdict that is not «well cut» stay with the plan */
#mesa #moTable > #sharemsg:not([hidden]){ margin:0 !important; background:#f4f1ea; color:#0b0f0e; border:0; }   /* answers its inline margin */
#mesa #verdict:not(.ok){ position:relative; border-radius:10px; }
#mesa #verdict:not(.ok):not(.warn):not(.no){ background:#161d1b; color:#f4f1ea; border:1.5px solid rgba(244,241,234,.3); }
#mesa #verdict:not(.ok):not(.warn):not(.no) :is(strong, small){ color:#f4f1ea; }
#mesa #verdict:not(.ok):not(.warn):not(.no) .dot{ background:#f4f1ea; box-shadow:none; }
/* the plan: one sheet at a time, large; the others are a tab or a thumbnail away */
#mesa #sheets{ display:block; min-height:120px; }
#mesa #sheets > .cpf-go{ display:none; }
#mesa #sheets > .sheetbox.mo-off{ display:none; }
#mesa #sheets > .sheetbox{ display:flex; flex-direction:column-reverse; gap:8px; margin:0; padding:0; border:0 !important; border-radius:0; background:none; }   /* answers the inline border of a rack piece */
#mesa #sheets .sheetlab{ margin:0; font-family:inherit; font-size:.9rem; color:var(--mo-dim); }
#mesa #sheets .sheetlab b{ color:#f4f1ea; font-weight:800; }
#mesa #sheets svg{ display:block; width:100%; height:auto; max-height:none; }
#mesa #sheets svg > rect:first-child{ fill:#161d1b; stroke:#161d1b; }
#mesa #sheets svg text{ font-size:13.5px !important; font-family:var(--font) !important; font-weight:700 !important; }   /* answers the inline font of the label */
#mesa .mo-thumbs{ display:flex; gap:8px; overflow-x:auto; padding:3px; scrollbar-width:thin; }
#mesa .mo-thumbs button{ flex:0 0 96px; padding:0; border:2px solid transparent; border-radius:4px; background:none; cursor:pointer; }
#mesa .mo-thumbs button[aria-pressed="true"]{ border-color:var(--mc-mint); }
#mesa .mo-thumbs svg{ display:block; width:100%; height:auto; pointer-events:none; }
#mesa .mo-thumbs svg > rect:first-child{ fill:#161d1b; stroke:#161d1b; }
#mesa .mo-thumbs svg rect[data-c]{ fill-opacity:1; stroke:#0b0f0e; stroke-width:3; }
#mesa .mo-thumbs svg rect[data-c="0"]{ fill:var(--mc-p0); } #mesa .mo-thumbs svg rect[data-c="1"]{ fill:var(--mc-p1); } #mesa .mo-thumbs svg rect[data-c="2"]{ fill:var(--mc-p2); } #mesa .mo-thumbs svg rect[data-c="3"]{ fill:var(--mc-p3); }
#mesa .mo-thumbs svg rect[data-c="4"]{ fill:var(--mc-p4); } #mesa .mo-thumbs svg rect[data-c="5"]{ fill:var(--mc-p5); } #mesa .mo-thumbs svg rect[data-c="6"]{ fill:var(--mc-p6); } #mesa .mo-thumbs svg rect[data-c="7"]{ fill:var(--mc-p7); }
#mesa .mo-thumbs svg > line{ display:none; }
#mesa .mo-thumbs svg > rect[stroke-dasharray]{ stroke:#f4f1ea; stroke-opacity:.4; }
#mesa .mo-chips{ display:flex; flex-wrap:wrap; gap:8px; font-size:.84rem; color:var(--mo-dim); }
#mesa .mo-chips > *{ display:inline-flex; align-items:center; gap:.35em; min-height:32px; padding:4px 12px; border:1.5px solid rgba(244,241,234,.32); border-radius:999px; background:none; color:inherit; font:inherit; line-height:1.25; text-align:left; }
#mesa .mo-chips b{ color:#f4f1ea; font-weight:700; white-space:nowrap; }
#mesa .mo-chips button{ min-height:44px; margin:-6px 0; cursor:pointer; color:#f4f1ea; border-color:rgba(244,241,234,.6); }
#mesa .mo-chips button:hover{ background:#f4f1ea; color:#0b0f0e; }

/* ---------- 3. what the result says in full, in a strip under the table (and under Pro) ---------- */
#mesa .calc > .results::before{ content:""; grid-column:1 / -1; grid-row:4; order:0; border-top:3px solid var(--mc-edge); }
#mesa .calc > .results > :is(#cutpro, #cp-q){ order:1; }
#mesa .calc > .results > :is(#cp-install, #cp-shop, .note){ order:2; margin-top:14px; }
/* r1295: «well cut» is already said in the band, large; here it stays for a screen reader only (the results are a live
   region) and is not drawn a second time. The figures and the cost of the glass sit side by side, with thin rules and
   no boxes. */
#mesa .calc > .results > #verdict.ok{ position:absolute; width:1px; height:1px; margin:0; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#mesa .calc > .results > .metrics{ order:4; margin-top:30px; }
#mesa .calc > .results > #cutCost{ order:5; margin-top:30px; }
#mesa .calc > .results > :is(#cutTotal, #fix){ order:6; }
#mesa .calc > .results > :is(.metrics, #cutCost, #cutTotal, #fix, #m-echo, p.hint, .addspec, .addspec-link, #cs, [data-subscribe], .note){ max-width:1240px; width:calc(100% - 2 * var(--mo-gut)); justify-self:center; margin-bottom:14px; }
#mesa .metrics{ gap:0 28px; align-content:start; border:0; border-radius:0; background:none; }
#mesa .metric{ padding:14px 0 12px; border:0; border-top:1.5px solid var(--mo-line); border-radius:0; background:none; box-shadow:none; }
#mesa .metric details{ margin:6px 0 0; padding:0; border:0; border-radius:0; background:none; }
#mesa .metric details > summary{ display:inline-block; min-height:44px; padding:11px 0; margin:-6px 0; }
/* the band already gives the first two figures (how many, what yield): here they keep their line (the label, what it is
   counted from and «See the working») and lose the figure; the strip's own figures are the ones the band does not give */
#mesa .metrics > .metric:nth-child(-n+2){ order:2; padding:10px 0 6px; }
#mesa .metrics > .metric:nth-child(-n+2) > :is(.v, .bar){ display:none; }
#mesa .metrics > .metric:nth-child(n+3){ order:1; }
#mesa #cutCost{ padding:0; border:0; border-radius:0; background:none; }
#mesa #cutCost h3{ margin:0 0 4px; padding:14px 0 0; border-top:1.5px solid var(--mo-line); font-size:1.25rem; font-weight:800; letter-spacing:-.01em; }
#mesa #cutCost .cc-order{ margin:12px 0 0; padding:0; border:0; border-top:1.5px solid var(--mo-line); border-bottom:1.5px solid var(--mo-line); border-radius:0; background:none; }
#mesa #cutCost .cc-order > summary{ min-height:44px; padding:11px 0; }
#mesa #cutTotal{ margin-top:8px; }
#mesa .calc > .results > p.hint{ margin:0 auto 14px !important; }   /* answers its inline margin */
#mesa .calc > .results > :last-child{ margin-bottom:34px; }
#mesa .metrics{ grid-template-columns:repeat(2, minmax(0,1fr)); }
#mesa #tool > :is(.sfcmp, .pro-note, .sub-moment){ margin-inline:var(--mo-gut); }
#mesa #tool > .pro-note{ max-width:1240px; margin:0 auto 30px; width:calc(100% - 2 * var(--mo-gut)); }
#mesa #tool > .sfcmp.cmp-wide{ max-width:1240px; width:calc(100% - 2 * var(--mo-gut)); margin:0 auto 20px; }

/* ---------- Pro: a ticket (assets/js/cut-pro.js writes the card and its own styles, which these outrank) ----------
   the price on ink at the left, what it unlocks for THIS job in the middle, the button and the consent box of
   pro.js at the right. Nothing of the card's logic is here. */
#mesa #cutpro{ display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:"p" "h" "v" "j" "k" "t" "b"; gap:0; align-items:start; width:calc(100% - 2 * var(--mo-gut)); max-width:1240px; justify-self:center;
  margin:30px 0 6px; padding:0; border:3px solid var(--mc-edge); border-radius:14px; overflow:hidden; background:var(--surface); box-shadow:none; }
#mesa #cutpro[hidden]{ display:none; }
#mesa #cutpro .cp-price{ grid-area:p; align-self:stretch; display:grid; align-content:center; justify-items:start; margin:0; padding:22px 30px; background:#0b0f0e; color:var(--mc-mint);
  font-size:.74rem; font-weight:700; letter-spacing:.13em; line-height:1.3; text-transform:uppercase; text-wrap:balance; }
#mesa #cutpro .cp-num{ display:block; margin:0 0 12px; color:#f4f1ea; font-stretch:62%; font-weight:900; font-size:clamp(4.4rem, 7.5vw, 7.4rem); line-height:.8; letter-spacing:-.01em; text-transform:none; }
#mesa #cutpro :is(.cp-pre, .cp-c){ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#mesa #cutpro h3{ grid-area:h; margin:0; padding:22px 28px 0; font-size:1.55rem; font-weight:800; font-stretch:100%; letter-spacing:-.02em; line-height:1.08; }
#mesa #cutpro .cp-val{ grid-area:v; margin:8px 0 0; padding:0 28px; font-weight:400; color:var(--ink-2); }
#mesa #cutpro #cp-job{ grid-area:j; display:grid; gap:7px; margin:10px 0 0; padding:0 28px; font-size:1.02rem; line-height:1.35; }
#mesa #cutpro #cp-cmp{ grid-area:k; margin:7px 0 0; padding:0 28px; font-size:1.02rem; line-height:1.35; }
#mesa #cutpro #cp-cmp[hidden]{ display:none; }
#mesa #cutpro .cp-i{ display:block; position:relative; padding-left:26px; }
#mesa #cutpro #cp-cmp.cp-i{ padding-left:54px; }
#mesa #cutpro #cp-cmp.cp-i::before{ left:28px; }
#mesa #cutpro .cp-i::first-letter{ text-transform:uppercase; }
#mesa #cutpro .cp-i::before{ content:""; position:absolute; left:0; top:.36em; width:13px; height:7px; border-left:3px solid var(--ink); border-bottom:3px solid var(--ink); transform:rotate(-45deg); }
#mesa #cutpro .cp-trust{ grid-area:t; margin:12px 0 0; padding:0 28px 22px; font-size:.82rem; color:var(--ink-3); }
#mesa #cutpro .cp-trust a{ display:inline-block; padding:10px 0; margin:-10px 0; }
#mesa #cutpro .cp-row{ grid-area:b; align-self:stretch; display:flex; flex-direction:column; justify-content:center; gap:10px; margin:0; padding:22px 26px; border-top:3px dashed var(--mc-edge); }
#mesa #cutpro .cp-row > .cta{ order:1; min-height:54px; justify-content:center; text-align:center; font-size:1.05rem; }
/* the consent box of pro.js, whole, small, under the button (its sizes and margins are inline styles) */
#mesa #cutpro .cp-row > .sf-consent{ order:2; margin:0 !important; max-width:none !important; font-size:.8rem !important; line-height:1.38 !important; color:var(--ink-2); }
#mesa #cutpro .cp-row > .sf-consent-msg{ order:3; margin:0 !important; }
#mesa #cutpro :is(.cp-prev, .cp-20){ display:none; }
#mesa .calc > .results > #cp-q{ width:calc(100% - 2 * var(--mo-gut)); max-width:1240px; justify-self:center; margin:8px 0 0; border-top:0; }
@media (min-width:900px){
  #mesa #cutpro{ grid-template-columns:auto minmax(0,1fr) minmax(280px, 340px); grid-template-areas:"p h b" "p v b" "p j b" "p k b" "p t b"; grid-template-rows:auto auto auto auto 1fr; }
  #mesa #cutpro .cp-row{ border-top:0; border-left:3px dashed var(--mc-edge); }
}

/* ---------- from a laptop up: the list at the left, the table at the right, both in one screen ---------- */
@media (min-width:1000px){
  #mesa .calc{ grid-template-columns:minmax(360px, 30vw) minmax(0,1fr); grid-template-rows:auto auto 1fr; }
  #mesa .calc::before{ grid-column:2; grid-row:1 / 4; }
  #mesa .calc > .results::before{ grid-row:4; }
  #mesa .calc > form{ grid-column:1; grid-row:1 / 4; align-self:stretch; padding:18px var(--mo-pad) 24px var(--mo-gut); border-right:3px solid var(--mc-edge); min-height:calc(100vh - 236px); }
  #mesa .calc > .results > #verdict:not(.ok){ grid-column:2; grid-row:1; margin:14px var(--mo-gut) 0 var(--mo-pad); }
  /* the ink panel takes the table's row and the rest of the list's height; the table inside it stays in sight while
     the list or a setting is longer than the screen, and stops at the panel's foot. It never is taller than the
     window (the plan's height is the window's less 404 px) */
  #mesa .calc > .results > #moInk{ grid-column:2; grid-row:2 / 4; align-self:stretch; }
  #mesa #moInk > #moTable{ position:sticky; top:0; padding:14px var(--mo-gut) 16px var(--mo-pad); grid-template-columns:minmax(0,1fr) auto; }
  #mesa #moTable > #moTabs{ grid-column:1; grid-row:1; }
  #mesa #moTable > #planrow{ grid-column:2; grid-row:1; justify-content:flex-end; }
  #mesa #moTable > #sharemsg{ grid-column:1 / -1; grid-row:2; }
  #mesa #moTable > #sheets{ grid-column:1 / -1; grid-row:3; margin-right:136px; }
  #mesa #moTable > #moThumbs{ grid-column:1 / -1; grid-row:3; justify-self:end; align-self:center; width:120px; flex-direction:column; overflow-x:visible; overflow-y:auto; max-height:max(240px, calc(100vh - 368px)); }
  #mesa.mo-one #moTable > #sheets{ margin-right:0; }
  #mesa .mo-thumbs button{ flex:0 0 auto; }
  #mesa #sheets svg{ max-height:max(220px, calc(100vh - 404px)); }
  #mesa #moTable > #moChips{ grid-column:1 / -1; grid-row:4; }
  /* the figures under the list, the cost of the glass under the table: the two columns of the workbench go on */
  #mesa .calc > .results > .metrics{ grid-column:1; width:auto; max-width:none; justify-self:stretch; margin-left:var(--mo-gut); margin-right:var(--mo-pad); }
  #mesa .calc > .results > #cutCost{ grid-column:2; width:auto; max-width:760px; justify-self:start; margin-left:var(--mo-pad); margin-right:var(--mo-gut); }
  /* one line, so the plan keeps its height in every language; what does not fit is a sideways scroll away */
  #mesa .mo-chips{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:8px 3px; margin:-8px -3px !important; }
  #mesa .mo-chips > *{ flex:0 0 auto; white-space:nowrap; }
}
@media (min-width:1000px) and (max-width:1359px){
  #mesa .mo-cap{ display:none; }
  #mesa #planrow > .cta, #mesa #planrow .cta-more-btn{ padding:0 11px; font-size:.86rem; }
  #mesa #planrow{ gap:6px; }
}
/* ---------- a phone: the band with the title and the three figures, the list, then the table ---------- */
@media (max-width:999px){
  #mesa > .hero{ grid-template-columns:minmax(0,1fr); row-gap:12px; padding-top:10px !important; }
  #mesa #sheets svg text{ font-size:16px !important; }
  #mesa .mo-fig dd{ font-size:min(15vw, 5.4rem); }
  #mesa .mo-fig{ gap:clamp(12px, 5vw, 40px); }
  #mesa .mo-fig dt{ margin-top:8px; }
  #mesa #planrow > .cta, #mesa #planrow .cta-more{ flex:0 0 auto; width:auto; }
  #mesa #planrow .cta-more{ flex-direction:row; position:relative; }
  #mesa #planrow .cta-more-list{ position:absolute; top:calc(100% + 6px); left:auto; right:0; width:min(320px, calc(100vw - 2 * var(--mo-gut))); margin:0; }
  body:has(#mesa) .site-head .nav > a:last-of-type{ border:0; padding:8px 11px; border-radius:var(--r-ctl); font-weight:520; }
}
@media (max-width:560px){
  #mesa .phead, #mesa .p{ grid-template-columns:12px minmax(0,1fr) minmax(0,1fr) 56px 44px; gap:0 8px; }
  #mesa .phead{ display:grid; font-size:.66rem; letter-spacing:.09em; }
  #mesa .p > *{ grid-area:auto; }
  #mesa .p::before{ width:12px; }
  #mesa .p > .pref, #mesa .p > .pglass{ grid-column:2 / 4; }
  #mesa .p > .pshape{ grid-column:2 / -1; }
  #mesa #f > fieldset:first-of-type > :is(#add, #paste){ flex:1 1 auto; padding:0 12px; font-size:.9rem; }
  #mesa .mo-pill{ font-size:.86rem; }
}

/* the fixed bar of assets/js/running.js says the figures again: not while the band's own are in sight (the class
   is set by assets/js/cut-mesa.js; the bar is fixed, so nothing moves when it comes and goes) */
html.mo-figs-in body .sfrun{ display:none; }

/* ---------- 4. the rest of the page: full-width sections with an ink edge ---------- */
main:has(> #mesa) > section{ margin:0; padding:26px max(var(--mo-gut), calc(50% - 600px)); border-top:3px solid var(--mc-edge); max-width:none; }
main:has(> #mesa) > section.prose > :is(h2, details){ max-width:none; }
main:has(> #mesa) > section :is(h2){ font-size:clamp(1.45rem, 1rem + 1.5vw, 2.1rem); font-weight:800; letter-spacing:-.025em; line-height:1.05; }
main:has(> #mesa) > section.prose h2::before{ display:none; }
main:has(> #mesa) > section > details.sf-sec{ border:0; border-radius:0; margin:0; padding:0; background:none; }
main:has(> #mesa) > section > details.sf-sec > summary{ min-height:44px; }
main:has(> #mesa) > section > details.sf-sec > :not(summary){ max-width:900px; }
main:has(> #mesa) > section > details.sf-sec > :is(table, .tbl-wrap, figure){ max-width:none; }
main:has(> #mesa) > section:not(:has(> details.sf-sec)) > :is(p, ul, ol, dl){ max-width:900px; }
body:has(#mesa) main + section.sf-hu{ border-top:3px solid var(--mc-edge); padding-top:26px; margin-top:0 !important; }   /* answers its inline margin */

/* ---------- dark: the same structure on ink ---------- */
@media (prefers-color-scheme: dark){
  #mesa{ --mo-line:rgba(244,241,234,.2); }
  #mesa #cutpro .cp-price{ box-shadow:inset -1px 0 0 rgba(244,241,234,.3); }
  #mesa .calc{ background:#161d1b; }
  #mesa .calc::before{ background:#0b0f0e; box-shadow:inset 0 0 0 1px rgba(244,241,234,.14); }
  #mesa #sheets svg > rect:first-child, #mesa .mo-thumbs svg > rect:first-child{ fill:#1d2624; stroke:#1d2624; }
  #mesa .cstart .cta{ color:#0b0f0e; }
  #mesa .p > input:nth-child(-n+3):focus{ background:#0b0f0e; }
}
}
@media screen and (prefers-reduced-motion: reduce){ #mesa *{ scroll-behavior:auto; } }
/* print (r1303): on paper the page is what it was before the mould, to the page: the calculator's sheet of base.css
   (body.sf-psheet), whose rules say `main > section` and `main > #tool`, said here for the sections of #mesa. The
   table's two boxes are not there on paper (the sheets break across pages as children of the results, as they
   were); the folds are open, with or without the script, and have no box. */
@media print{
  body.sf-psheet #mesa > section:not(:has(.calc)), body.sf-psheet #mesa > section > :not(.calc){ display:none !important; }
  body.sf-psheet #mesa > section{ padding:0 !important; margin:0 !important; }
  #mesa :is(#moInk, #moTable){ display:contents; }
  #mesa :is(.results, #moTable) > *{ order:4; }
  #mesa #cutExTag{ order:0; }
  #mesa #verdict{ order:1; }
  #mesa #sheets{ order:2; }
  #mesa :is(#planrow, #cutpro, #cp-install, #cp-shop), #mesa .results > p.hint{ order:3; }
  #mesa :is(.mo-res, .mo-sub-t, .mo-tabs, .mo-thumbs, .mo-chips, .mo-rowx, .mo-count, #moFull, .mo-short){ display:none !important; }
  #mesa :is(.mo-set, .mo-more) > summary{ display:none; }
  #mesa details.mo-set{ margin:0; padding:0; border:0; background:none; }
  #mesa details.mo-set::details-content{ content-visibility:visible; display:block; }
}
/* r1302: the bar at the foot of a phone (assets/js/site.js, .sfab) is one button, «See the plan», while the table is out
   of sight (assets/js/mesa-plan.js adds the button and sets the class); with the table in sight it is the site's own */
@media screen{
.sfab > .sfab-plan{ display:none; }
html.mo-plan-away body .sfab > :not(.sfab-plan){ display:none; }
html.mo-plan-away body .sfab > .sfab-plan{ display:inline-flex; flex:1 1 0; background:#0b0f0e; border-color:#0b0f0e; color:#f4f1ea; font-weight:800; }
html.mo-plan-away body .sfab > .sfab-plan:focus-visible{ outline:3px solid #b9a7ff; outline-offset:2px; }
}