/* mesa-panel.css — GENERATED by tools/mesa-panel.cjs: assets/css/mesa-opt.css (the mould of «La mesa de corte») less the glass
   optimiser's own parts and its layout of the tool, then tools/mesa-panel.src.css (the panel cutting optimiser's own). Do not
   edit: change one of those two and run  node tools/mesa-panel.cjs */
/* 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; }

/* the list, on paper */
#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; }
/* «these sizes are an example»: an ink bar with the way out of it */
/* the rows: a swatch in the colour of the size's pieces, width, height, how many */
/* the rows are drawn by the page script at the end of the document: their room is kept until then (r1021) */
#mesa .p{ border-top:1.5px solid var(--mo-line); padding:3px 0; }
/* the first three boxes of a row, whatever their type (assets/js/cut-units.js makes them text boxes for inches) */
/* add a size, paste a list, the rows' extras */
/* 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 .mo-cap{ margin-right:6px; font-size:.74rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--mo-dim); }
/* the plan's buttons: pills with a paper edge; the secondary ones in «More» (assets/js/cut-more.js) */
/* a message of the row (link copied, job saved…) and a verdict that is not «well cut» stay with the plan */
#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 */

/* ---------- 3. what the result says in full, in a strip under the table (and under Pro) ---------- */
/* 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 .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 .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. */
/* the consent box of pro.js, whole, small, under the button (its sizes and margins are inline styles) */
@media (min-width:900px){
}

/* ---------- from a laptop up: the list at the left, the table at the right, both in one screen ---------- */
@media (min-width:1000px){
  /* 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) */
  /* the figures under the list, the cost of the glass under the table: the two columns of the workbench go on */
  /* one line, so the plan keeps its height in every language; what does not fit is a sideways scroll away */
}
@media (min-width:1000px) and (max-width:1359px){
  #mesa .mo-cap{ display:none; }
}
/* ---------- 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 .mo-fig dd{ font-size:min(15vw, 5.4rem); }
  #mesa .mo-fig{ gap:clamp(12px, 5vw, 40px); }
  #mesa .mo-fig dt{ margin-top:8px; }
  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 .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); }
}
}
@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{ padding:0 !important; margin:0 !important; }
  #mesa #cutExTag{ order:0; }
  #mesa #verdict{ order:1; }
  #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; }
}

/* mesa-panel.src.css — what is the panel cutting optimiser's own in «La mesa de corte» (r1300, 12-11-2026).
   The source of the last part of assets/css/mesa-panel.css (tools/mesa-panel.cjs puts the mould's sheet before it,
   less the glass optimiser's parts and less its layout of the tool). Screen only; every rule at #mesa or at a page
   that has it. The band takes the material's colour from mesa.css (--mc-mat: amber for wood; ink on amber 10.9:1).
   THE LAYOUT IS TWO REAL COLUMNS: .calc is a grid of two cells (the form, the ink panel) and the results are a block
   under both, with a small grid of their own. Nothing is display:contents. */
@media screen{
body:has(#mesa) .site-head{ background:var(--mc-mat); }
#mesa > .hero{ background:var(--mc-mat); }
#mesa .mo-pill.ok i{ background:var(--mc-mat); }
#mesa .mo-fig > div[hidden]{ display:none; }
#mesa .mo-fig dd small[data-mo-from]{ font-size:.34em; margin-left:.12em; }

/* ---------- the two columns ---------- */
#mesa .calc{ display:grid; grid-template-columns:minmax(0,1fr); gap:0; align-items:stretch; border:0; border-radius:0; box-shadow:none; background:var(--paper); overflow:visible; position:relative; }
#mesa .calc::before{ display:none; }
#mesa .calc > form{ display:block; padding:18px var(--mo-gut) 22px; min-width:0; border:0; background:none; }
/* the page's own phone layout (the form's parts and the results interleaved by `order`) gives way to form, table, results */
#mesa .calc > form > *{ order:0; margin-left:0; margin-right:0; }
#mesa .calc > form > fieldset:first-of-type{ margin-top:0; margin-bottom:0; }
#mesa .calc > form > :last-child{ margin-bottom:0; }
#mesa .calc > #moInk, #mesa .calc > .results{ order:0; }
#mesa .pcr-head, #mesa .pcr-list{ margin-inline:0; }
#mesa .calc > #moInk{ min-width:0; background:#0b0f0e; }
#mesa #moInk > #moTable{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px 12px; align-items:start; padding:14px var(--mo-gut) 18px; background:#0b0f0e; color:#f4f1ea; color-scheme:dark; }
#mesa #moTable > *{ min-width:0; margin:0; }

/* ---------- the parts, on paper: the rows as they are, without the card ---------- */
#mesa #f > fieldset:first-of-type > :is(.btnrow, .pcr){ flex:0 0 100%; }
#mesa #pcRows{ margin:0; padding:0; border:0; background:none; box-shadow:none; }
/* «example list»: an ink bar with the way out of it, as on the glass page */
#mesa #pcrEx{ margin:0 0 10px; padding:6px 6px 6px 14px; border:0; border-radius:10px; background:var(--mc-cut); color:var(--mc-on-cut); }
#mesa #pcrEx[hidden]{ display:none; }
#mesa #pcrEx button{ min-height:44px; padding:0 14px; border:0; border-radius:999px; background:var(--mc-mat); color:#0b0f0e; font-weight:800; }
#mesa #pcPaste{ margin:10px 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 #pcPaste > summary{ min-height:44px; padding:11px 0; font-weight:700; cursor:pointer; }
#mesa #pcPaste[open] > summary{ margin-bottom:6px; }
#mesa #f .btnrow{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0; }
#mesa #f .btnrow .btn{ min-height:44px; padding:0 14px; border:2px solid var(--mc-edge); border-radius:999px; background:transparent; color:var(--ink); font-size:.9rem; font-weight:800; }
#mesa #f .btnrow #ex{ background:var(--mc-cut); border-color:var(--mc-cut); color:var(--mc-on-cut); }
#mesa #f > fieldset:first-of-type > .note{ margin:10px 0 0 !important; padding:0; border:0; background:none; font-size:.86rem; color:var(--ink-3); }   /* answers their inline margin */
#mesa #f > fieldset:first-of-type > .note a{ display:inline-block; padding:8px 0; margin:-8px 0; }
#mesa #f > .mo-set:first-of-type{ margin-top:14px; border-top:3px solid var(--mc-edge); }
#mesa .mo-set > .seg{ margin:2px 0 16px; }
#mesa #moSetCost > summary{ min-height:44px; }
#mesa #moSetCost[hidden]{ display:none; }

/* ---------- the table: a button per sheet, the plan's buttons, every sheet stacked on the ink ---------- */
#mesa .mo-jump{ display:flex; align-items:center; gap:6px; min-height:44px; }
#mesa .mo-jump[hidden]{ display:none; }
#mesa .mo-jump-in{ display:flex; gap:6px; min-width:0; overflow-x:auto; padding:3px; margin:-3px; scrollbar-width:thin; }
#mesa .mo-jump-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-jump-in button:hover{ background:#f4f1ea; border-color:#f4f1ea; color:#0b0f0e; }
#mesa #moRow{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; min-height:44px; }
#mesa #moTable .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 #moTable .btn:hover{ background:#f4f1ea; border-color:#f4f1ea; color:#0b0f0e; transform:none; }
#mesa #moTable :is(.btn, .mo-jump-in button):focus-visible{ outline:3px solid var(--mc-lilac); outline-offset:2px; }
#mesa #pfNote{ color:#bdbab2; font-size:.86rem; }
#mesa #pfNote:empty{ display:none; }
#mesa .mo-say{ padding:12px 14px; border:1.5px solid rgba(244,241,234,.3); border-radius:10px; background:#161d1b; color:#f4f1ea; line-height:1.4; }
#mesa .mo-say strong{ display:block; }
#mesa.mo-ok .mo-say{ display:none; }
#mesa #plan{ min-height:120px; padding:0; border:0; background:none; color:#f4f1ea; --text:#f4f1ea; --dim:#bdbab2; --ink:#f4f1ea; --ink-2:#f4f1ea; --ink-3:#bdbab2; }
#mesa #plan figure{ margin:0 0 14px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; }
#mesa #plan figure svg{ display:block; width:100%; height:auto; }
#mesa #plan figcaption{ margin:6px 0 0; color:#bdbab2; font-size:.9rem; }
#mesa #plan .pc-key{ margin:4px 0 0; color:#bdbab2; }

/* ---------- under the table: what the band does not say, with thin rules and no boxes ---------- */
#mesa .calc > .results{ display:block; min-width:0; padding:0 var(--mo-gut) 30px; border:0; border-top:3px solid var(--mc-edge); background:none; }
#mesa .calc > .results > *{ max-width:1240px; margin-left:auto; margin-right:auto; margin-bottom:14px; }
#mesa .calc > .results > :first-child{ margin-top:0; }
#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 > #verdict:not(.ok){ margin-top:22px; border-radius:10px; }
#mesa .calc > .results > .metrics{ margin-top:30px; grid-template-columns:repeat(2, minmax(0,1fr)); }
#mesa .calc > .results > #cuts{ margin-top:30px; min-width:0; overflow-x:auto; }
#mesa #cuts table{ width:100%; }
#mesa #cuts td{ white-space:normal; overflow-wrap:anywhere; }
#mesa .calc > .results > #panelpro{ margin-top:30px; }

/* ---------- Pro: a ticket in amber (assets/js/panel-pro.js writes the card and its own styles, which these outrank) ---------- */
#mesa #panelpro{ display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:"p" "h" "j" "t" "b"; gap:0; align-items:start; padding:0; border:3px solid var(--mc-edge); border-radius:14px; overflow:hidden; background:var(--surface); box-shadow:none; }
#mesa #panelpro[hidden]{ display:none; }
#mesa #panelpro .pp-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-mat);
  font-size:.74rem; font-weight:700; letter-spacing:.13em; line-height:1.3; text-transform:uppercase; text-wrap:balance; }
#mesa #panelpro .pp-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; white-space:nowrap; }
#mesa #panelpro .pp-pre{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#mesa #panelpro h3{ grid-area:h; margin:0; padding:22px 28px 0; font-size:1.55rem; font-weight:800; letter-spacing:-.02em; line-height:1.08; }
#mesa #panelpro #pp-job{ grid-area:j; margin:10px 0 0; padding:0 28px; font-size:1.02rem; line-height:1.4; }
#mesa #panelpro :is(.pp-trust, .pp-free){ margin:8px 0 0; padding:0 28px; font-size:.82rem; color:var(--ink-3); }
#mesa #panelpro .pp-trust{ grid-area:t; }
#mesa #panelpro .pp-free{ grid-row:5; grid-column:1; padding-bottom:20px; }
#mesa #panelpro .pp-row{ grid-area:b; align-self:stretch; display:flex; flex-direction:column; justify-content:center; align-items:stretch; gap:10px; margin:0; padding:22px 26px; border-top:3px dashed var(--mc-edge); }
#mesa #panelpro .pp-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 #panelpro .pp-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 #panelpro .pp-row > .sf-consent-msg{ order:3; margin:0 !important; }

/* a phone: three figures, the third with its unit (metres of tape), in the width of the screen */
@media (max-width:560px){
  #mesa .mo-fig{ gap:12px; }
  #mesa .mo-fig dd{ font-size:min(13vw, 5.4rem); }
  #mesa .mo-fig dt{ font-size:.66rem; letter-spacing:.09em; }
}
@media (min-width:900px){
  #mesa #panelpro{ grid-template-columns:auto minmax(0,1fr) minmax(280px, 340px); grid-template-areas:"p h b" "p j b" "p t b" "p f b"; grid-template-rows:auto auto auto 1fr; }
  #mesa #panelpro .pp-free{ grid-area:f; }
  #mesa #panelpro .pp-row{ border-top:0; border-left:3px dashed var(--mc-edge); }
}
@media (min-width:1000px){
  #mesa .calc{ grid-template-columns:minmax(400px, 32vw) minmax(0,1fr); }
  #mesa .calc > form{ grid-column:1; grid-row:1; padding:18px var(--mo-pad) 24px var(--mo-gut); border-right:3px solid var(--mc-edge); min-height:calc(100vh - 236px); }
  #mesa .calc > #moInk{ grid-column:2; grid-row:1; }
  /* the table stays in sight while the list beside it is longer than the screen and stops at the panel's foot; it is
     never taller than the window: the sheets scroll inside it */
  #mesa #moInk > #moTable{ position:sticky; top:0; grid-template-columns:minmax(0,1fr) auto; padding:14px var(--mo-gut) 16px var(--mo-pad); }
  #mesa #moTable > #moJump{ grid-column:1; grid-row:1; }
  #mesa #moTable > #moRow{ grid-column:2; grid-row:1; justify-content:flex-end; }
  #mesa #moTable > :is(#pfNote, #moSay, #plan){ grid-column:1 / -1; }
  #mesa #moTable > #plan{ max-height:calc(100vh - 100px); overflow-y:auto; scrollbar-width:thin; padding-right:4px; }
  /* a sheet is as wide as the panel as long as it is whole in the first screen (the band and the table's row above it
     take 340 px): a 2440 × 1220 board uses nine tenths of the width at 1560 × 787 */
  #mesa #plan figure svg{ max-height:calc(100vh - 340px); }
  /* the rows in the narrower column: the reference keeps room to be read */
  #mesa .pcr-head, #mesa .pcr-row{ grid-template-columns:minmax(48px,1fr) 62px 62px 40px 40px 40px 28px; gap:3px; }
  #mesa .pcr-row input{ padding-inline:6px; }
  #mesa .calc > .results{ grid-column:1 / -1; display:grid; grid-template-columns:minmax(400px, 32vw) minmax(0,1fr); padding:0 0 30px; }
  #mesa .calc > .results > *{ grid-column:1 / -1; max-width:1240px; width:calc(100% - 2 * var(--mo-gut)); justify-self:center; margin-left:0; margin-right:0; }
  #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 > :is(#cuts, #pcxParts){ grid-column:2; width:auto; max-width:none; justify-self:stretch; margin-left:var(--mo-pad); margin-right:var(--mo-gut); }
}
/* r1302: from 1400 px the parts' column is 520 px wide, so a reference of ten or twelve letters is read whole */
@media (min-width:1400px){
  #mesa .calc, #mesa .calc > .results{ grid-template-columns:520px minmax(0,1fr); }
  #mesa .pcr-head, #mesa .pcr-row{ grid-template-columns:minmax(110px,1fr) 62px 62px 44px 40px 40px 32px; gap:4px; }
}
@media (prefers-color-scheme: dark){
  #mesa .calc{ background:#161d1b; }
  #mesa .calc > #moInk{ box-shadow:inset 0 0 0 1px rgba(244,241,234,.14); }
}
}
/* r1303: on paper this page is its report alone (#report: the page's own print rule hides the header, the footer and
   every `main > section`). The mould's box holds the header and the tool and is not a section: it is hidden here, as
   they were before the mould. */
@media print{
#mesa{ display:none; }
}