/* ===========================================================================
 * quotes.css — the Preventivi add-on's stylesheet, re-hosted inside MyTasKat.
 *
 * MOVED, NOT REWRITTEN. This is lines 13–540 of
 * QuoteTool/QUOTE-TOOL-stella33-preventivi-standalone.html with exactly one
 * mechanical change applied to every rule: a `#quotes-root` (and, where the
 * markup lives in the body-level modal layer, `#quotes-modal-root`) prefix.
 * Selectors, class names and declarations are otherwise the standalone's.
 *
 * WHY PREFIXING AND NOT AN IFRAME (plan §4.1, the Phase 2 spike):
 * MyTasKat's own stylesheet styles only five bare elements
 * (`* {box-sizing}`, `html,body`, `h1,h2,h3,p`, `button,input,select,textarea
 * {font:inherit;color:inherit}`, `button{cursor}`, `a{color:inherit}`) and
 * every one of them is out-specified by a `#quotes-root`-prefixed rule, so
 * the bleed the plan feared is one-directional and already lost. In the other
 * direction the prefix is airtight. An iframe would have cost the shared
 * token bridge below, the host's `api()`/`toast()` and focus handling, and
 * would have had to re-solve printing from inside a nested browsing context —
 * for a document whose AUTHORITATIVE rendering is Phase 3's Gotenberg pass
 * over a standalone HTML file with only the paper CSS in it. Prefixing wins.
 *
 * THE PAPER IS NOT HERE. The `.paper` rules of the standalone (its CSS lines
 * 426–509) are deliberately absent: they live in `QuoteEngine.PAPER_CSS` and
 * quotes.js injects them once as <style id="quotes-paper-css">, UNPREFIXED, so
 * that the on-screen preview, the hidden measuring probe that
 * buildPaginatedPages() appends to <body>, the print root and the future
 * sidecar PDF all read one source. Duplicating them here is how the preview
 * and the PDF start to drift.
 *
 * TOKENS. The five things the HOST owns — page background, card surface,
 * radius, font, main text colour — are aliased onto the host's branding
 * tokens, so an admin who rebrands MyTasKat rebrands the editor chrome too.
 * The DOCUMENT palette (--brand-900, --accent, the paper colours) stays the
 * tool's own: that is the letterhead, not the platform.
 * ======================================================================== */

/* ---------------------------------------------------------------------------
   TOKENS — Stella33 brand palette
   verde petrolio scuro #20343A · blu-nero scuro #111C21 · marrone ramato #94562B
   azzurro polvere #A7B6B4 · grigio verde chiaro #CBCFC0 · tortora caldo #A6A291

   ADAPTED: the standalone's `:root{}` becomes this selector list. `.paper` is
   in it because the measuring probe and #quotes-print-root are BODY children —
   outside #quotes-root — and PAPER_CSS resolves --paper-accent, --surface-2,
   --ink-faint, --shadow-lg, --radius-lg and --font-body through them.
   ADAPTED: the two dark-scheme blocks are dropped. MyTasKat has no
   prefers-color-scheme switch at all (styles.css says so in its header) — it
   derives a whole palette from ten branding tokens instead, and the five
   aliases below already follow a dark token set.
   --------------------------------------------------------------------------- */
#quotes-root,
#quotes-modal-root,
#quotes-print-root,
.paper {
  --brand-900:#20343A;
  --brand-700:#2E4750;
  --accent:#94562B;
  --accent-strong:#7A4522;
  --mist:#A7B6B4;
  --sage:#CBCFC0;
  --sand:#A6A291;

  /* host-owned (page bg / card surface / main text) */
  --bg:var(--page-bg, #F6F5EF);
  --surface:var(--card-bg, #FFFFFF);
  --ink:var(--text-main, #111C21);

  --surface-2:#EFEEE4;
  --surface-3:#E7E4D6;
  --ink-soft:#54605D;
  --ink-faint:#848D82;
  --border:#E1DFD1;
  --border-strong:#C9C5AF;

  --success:#3F7A4E;
  --success-bg:#E7F1E3;
  --warning:#95611E;
  --warning-bg:#F7EDDC;
  --danger:#A23B2E;
  --danger-bg:#F8E6E1;

  --focus:#94562B;
  --shadow-sm:0 1px 2px rgba(17,28,33,.08), 0 1px 1px rgba(17,28,33,.05);
  --shadow-md:0 8px 24px rgba(17,28,33,.12), 0 2px 6px rgba(17,28,33,.07);
  --shadow-lg:0 24px 60px rgba(17,28,33,.18), 0 6px 16px rgba(17,28,33,.09);

  /* host-owned (radius): 6 / 10 / 16 derived from the single --radius token,
     the same trick styles.css already plays for its own triple. */
  --radius-sm:calc(var(--radius, 10px) * 0.6);
  --radius-md:var(--radius, 10px);
  --radius-lg:calc(var(--radius, 10px) * 1.6);

  /* host-owned (font) */
  --font-display:var(--font-family, 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  --font-body:var(--font-family, 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}

/* ---------------------------------------------------------------------------
   RESET & BASE
   ADAPTED: the standalone's `html,body{}` and `body{}` rules collapse onto
   #quotes-root (the add-on owns a container, never the document), and `.app`
   is gone with the topbar.
   --------------------------------------------------------------------------- */
#quotes-root, #quotes-modal-root { box-sizing:border-box; }
#quotes-root *, #quotes-root *::before, #quotes-root *::after,
#quotes-modal-root *, #quotes-modal-root *::before, #quotes-modal-root *::after { box-sizing:border-box; }

#quotes-root {
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
/* 0.88.0: NOT the paper's headings (`:not(.paper *)`). With an id in it this
   reset out-ranked every `.paper …` rule of PAPER_CSS, so in the preview a
   section title lost its 3mm margin-bottom and its accent colour — while the
   paginator's measuring probe, a <body> child, kept them. The probe then
   measured each titled section 3mm taller than the page drew it, and the
   totals went to a page of their own under a blank band that looked roomy
   enough. The paper's headings now look exactly as in the PDF. */
#quotes-root :is(h1, h2, h3, h4):not(.paper *),
#quotes-modal-root h1, #quotes-modal-root h2, #quotes-modal-root h3, #quotes-modal-root h4 {
  font-family:var(--font-display);text-wrap:balance;margin:0;color:var(--ink);
}
#quotes-root p, #quotes-modal-root p { margin:0; }
#quotes-root button, #quotes-modal-root button { font-family:inherit; }
#quotes-root input, #quotes-root select, #quotes-root textarea,
#quotes-modal-root input, #quotes-modal-root select, #quotes-modal-root textarea {
  font-family:inherit;font-size:14px;color:var(--ink);background:var(--surface);
}
#quotes-root a, #quotes-modal-root a { color:var(--brand-700); }
#quotes-root ::selection, #quotes-modal-root ::selection { background:var(--sage);color:var(--brand-900); }
@media (prefers-reduced-motion: reduce){
  #quotes-root *, #quotes-modal-root *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;}
}
#quotes-root :focus-visible, #quotes-modal-root :focus-visible { outline:2px solid var(--focus);outline-offset:2px;border-radius:4px; }

/* ---------------------------------------------------------------------------
   LAYOUT / PAGES
   ADAPTED: `.shell`'s 36px/28px page padding is gone — the host's <main>
   already supplies it; only the tall bottom gutter that keeps the sticky
   wizard footer from covering the last card survives.
   --------------------------------------------------------------------------- */
/* ADAPTED (this pass): the standalone capped `.shell` at 1180px/880px and
   centred it with `margin:0 auto`, which is what kept the whole tool boxed in
   the middle of the host's <main> no matter how wide the window got. The host
   already gives #quotes-root the full flex-item width (`.main` in styles.css
   is `flex:1` with no max-width of its own, `align-items:stretch` by
   default), so the cap here was the only thing narrowing the frame. Dropped
   in favour of width:100%: the wizard body grid, the settings nav+content
   grid and the archive table wrapper below are already built to use the
   extra room (fixed sidebar/nav column, growing content column) rather than
   stretch everything uniformly. `.paper` (the print/preview page, fixed at
   210mm by quote-engine.js's PAPER_CSS) is unaffected — it lives in
   `.paper-scroll{align-items:center}`, which centres it regardless of how
   wide this shell gets.
   RESPONSIVE (2026-09): a 1600px cap is back — not the standalone's 1180px
   box, but the point past which an archive row or a wizard form stretched
   edge to edge on a 2560px monitor stops being readable; the host's .main
   caps at the same figure. And #quotes-root is a size container: every
   breakpoint in the RESPONSIVE section at the foot of this file is an
   `@container quotes (max-width: …)` rule keyed on the width the add-on
   actually gets (the host's sidebar takes 240px of the viewport until it
   collapses into a drawer at 1024px), with `@media` fallbacks under
   `@supports not (container-type:inline-size)`. */
#quotes-root{container-type:inline-size;container-name:quotes;}
#quotes-root .shell{width:100%;max-width:1600px;margin-inline:auto;padding:4px 0 60px;}
#quotes-root .shell.narrow{max-width:none;}

#quotes-root .page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:28px;flex-wrap:wrap;}
#quotes-root .page-head h1{font-size:clamp(22px, 5cqi, 30px);font-weight:600;}
#quotes-root .page-head .sub{color:var(--ink-soft);font-size:14.5px;margin-top:6px;max-width:56ch;}
#quotes-root .eyebrow{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent);margin-bottom:8px;
}
#quotes-root .spacer{flex:1;}

/* the language pills and the square icon button survive the topbar's removal:
   the hero, step 1 and every row-actions cell use them. */
#quotes-root .lang-toggle, #quotes-modal-root .lang-toggle{display:flex;border:1px solid var(--border-strong);border-radius:999px;overflow:hidden;width:fit-content;}
#quotes-root .lang-toggle button, #quotes-modal-root .lang-toggle button{
  padding:6px 13px;border:none;background:var(--surface);color:var(--ink-soft);font-weight:700;font-size:12.5px;
  letter-spacing:.4px;cursor:pointer;transition:background .15s,color .15s;
}
#quotes-root .lang-toggle button.active, #quotes-modal-root .lang-toggle button.active{background:var(--accent);color:#fff;}
#quotes-root .icon-btn, #quotes-modal-root .icon-btn{
  width:36px;height:36px;border-radius:10px;border:1px solid var(--border-strong);background:var(--surface);
  color:var(--ink-soft);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;
}
#quotes-root .icon-btn:hover, #quotes-modal-root .icon-btn:hover{color:var(--brand-700);border-color:var(--mist);background:var(--surface-2);}

/* ---------------------------------------------------------------------------
   CARDS / SECTIONS
   --------------------------------------------------------------------------- */
#quotes-root .card, #quotes-modal-root .card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);min-width:0;
}
#quotes-root .card-pad, #quotes-modal-root .card-pad{padding:clamp(16px, 4cqi, 26px) clamp(16px, 4cqi, 28px);}
#quotes-root .card + .card, #quotes-modal-root .card + .card{margin-top:18px;}
#quotes-root .section-title, #quotes-modal-root .section-title{font-size:17px;font-weight:600;font-family:var(--font-display);margin-bottom:4px;}
#quotes-root .section-hint, #quotes-modal-root .section-hint{color:var(--ink-faint);font-size:13px;margin-bottom:18px;}
/* Task <-> Preventivo links: the wizard head's "Task collegati" line, under
   the stepper. Each task is a button (the host's board is one click away)
   drawn as a chip so the row wraps cleanly with three or four of them. */
#quotes-root .linked-tasks{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:10px;font-size:13px;}
#quotes-root .linked-tasks-label{color:var(--ink-faint);font-weight:600;}
#quotes-root .linked-task{display:inline-flex;align-items:center;max-width:100%;padding:3px 10px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--ink);font:inherit;font-size:12.5px;line-height:1.4;text-align:left;white-space:normal;}
#quotes-root button.linked-task{cursor:pointer;}
#quotes-root button.linked-task:hover,#quotes-root button.linked-task:focus-visible{border-color:currentColor;text-decoration:underline;outline:none;}
/* 0.33.1 — link/unlink from the quote side (wizard head) */
#quotes-root .linked-task-row{display:inline-flex;align-items:center;gap:2px;max-width:100%;}
#quotes-root .linked-tasks-empty{color:var(--ink-faint);font-size:12.5px;}
#quotes-root .linked-task-unlink{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--ink-faint);font:inherit;font-size:12px;line-height:1;cursor:pointer;}
#quotes-root .linked-task-unlink:hover,#quotes-root .linked-task-unlink:focus-visible{background:var(--surface);color:var(--ink);outline:none;}
#quotes-root .task-link-picker{margin-top:8px;font-size:13px;}
#quotes-root .task-link-input{display:block;width:100%;max-width:360px;padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px;}
#quotes-root .task-link-input:focus{outline:none;border-color:currentColor;}
#quotes-root .task-link-matches{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:6px;}
#quotes-root .task-link-matches:empty{display:none;}
#quotes-root .task-link-match{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:3px 10px;border-radius:999px;border:1px dashed var(--border);background:var(--surface);color:var(--ink);font:inherit;font-size:12.5px;line-height:1.4;text-align:left;white-space:normal;cursor:pointer;}
#quotes-root .task-link-match:hover,#quotes-root .task-link-match:focus-visible{border-style:solid;border-color:currentColor;text-decoration:underline;outline:none;}
#quotes-root .task-link-archived,#quotes-root .task-link-none{color:var(--ink-faint);font-size:12px;}
#quotes-root .divider, #quotes-modal-root .divider{height:1px;background:var(--border);margin:22px 0;border:none;}

#quotes-root .grid, #quotes-modal-root .grid{display:grid;gap:16px;}
#quotes-root .grid.cols-2, #quotes-modal-root .grid.cols-2{grid-template-columns:repeat(2,1fr);}
#quotes-root .grid.cols-3, #quotes-modal-root .grid.cols-3{grid-template-columns:repeat(3,1fr);}
#quotes-root .grid.cols-4, #quotes-modal-root .grid.cols-4{grid-template-columns:repeat(4,1fr);}
/* the 2-col / 1-col steps of these grids are in the RESPONSIVE section
   (container-keyed for #quotes-root, viewport-keyed for the modal layer). */

#quotes-root .field, #quotes-modal-root .field{display:flex;flex-direction:column;gap:6px;min-width:0;}
#quotes-root .field label, #quotes-modal-root .field label{font-size:12.5px;font-weight:600;color:var(--ink-soft);display:flex;align-items:center;gap:5px;}
#quotes-root .field label .req, #quotes-modal-root .field label .req{color:var(--danger);}
#quotes-root .field .field-hint, #quotes-modal-root .field .field-hint,
#quotes-root .field-hint, #quotes-modal-root .field-hint{font-size:11.5px;color:var(--ink-faint);}
#quotes-root .field .field-err, #quotes-modal-root .field .field-err{font-size:11.5px;color:var(--danger);font-weight:600;}

#quotes-root input[type=text],#quotes-root input[type=email],#quotes-root input[type=tel],
#quotes-root input[type=number],#quotes-root input[type=date],#quotes-root input[type=time],
#quotes-root input[type=url],#quotes-root select,#quotes-root textarea,
#quotes-modal-root input[type=text],#quotes-modal-root input[type=email],#quotes-modal-root input[type=tel],
#quotes-modal-root input[type=number],#quotes-modal-root input[type=date],#quotes-modal-root input[type=time],
#quotes-modal-root input[type=url],#quotes-modal-root select,#quotes-modal-root textarea{
  padding:9px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);
  width:100%;transition:border-color .15s, box-shadow .15s;
}
#quotes-root input:focus,#quotes-root select:focus,#quotes-root textarea:focus,
#quotes-modal-root input:focus,#quotes-modal-root select:focus,#quotes-modal-root textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);outline:none;
}
#quotes-root input.invalid,#quotes-root select.invalid,#quotes-root textarea.invalid,
#quotes-modal-root input.invalid,#quotes-modal-root select.invalid,#quotes-modal-root textarea.invalid{border-color:var(--danger);}
#quotes-root textarea, #quotes-modal-root textarea{resize:vertical;min-height:74px;line-height:1.5;}
#quotes-root input[type=color], #quotes-modal-root input[type=color]{width:44px;height:36px;padding:2px;border-radius:8px;border:1px solid var(--border-strong);}
#quotes-root input::placeholder,#quotes-root textarea::placeholder,
#quotes-modal-root input::placeholder,#quotes-modal-root textarea::placeholder{color:var(--ink-faint);}
#quotes-root .checkline, #quotes-modal-root .checkline{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink);}
#quotes-root .checkline input[type=checkbox], #quotes-modal-root .checkline input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);}
#quotes-root select, #quotes-modal-root select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234E6C6E' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px;}

/* buttons */
#quotes-root .btn, #quotes-modal-root .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 18px;border-radius:999px;border:1px solid transparent;font-size:13.5px;font-weight:600;
  cursor:pointer;transition:all .15s;white-space:nowrap;line-height:1.2;
}
#quotes-root .btn:disabled, #quotes-modal-root .btn:disabled{opacity:.45;cursor:not-allowed;}
#quotes-root .btn-primary, #quotes-modal-root .btn-primary{background:var(--brand-900);color:#fff;box-shadow:var(--shadow-sm);}
#quotes-root .btn-primary:hover:not(:disabled), #quotes-modal-root .btn-primary:hover:not(:disabled){background:var(--brand-700);}
#quotes-root .btn-accent, #quotes-modal-root .btn-accent{background:var(--accent);color:#fff;}
#quotes-root .btn-accent:hover:not(:disabled), #quotes-modal-root .btn-accent:hover:not(:disabled){background:var(--brand-700);}
#quotes-root .btn-ghost, #quotes-modal-root .btn-ghost{background:transparent;border-color:var(--border-strong);color:var(--ink);}
#quotes-root .btn-ghost:hover:not(:disabled), #quotes-modal-root .btn-ghost:hover:not(:disabled){background:var(--surface-2);border-color:var(--mist);}
#quotes-root .btn-soft, #quotes-modal-root .btn-soft{background:var(--surface-2);color:var(--brand-900);border-color:transparent;}
#quotes-root .btn-soft:hover:not(:disabled), #quotes-modal-root .btn-soft:hover:not(:disabled){background:var(--surface-3);}
#quotes-root .btn-danger, #quotes-modal-root .btn-danger{background:transparent;color:var(--danger);border-color:var(--danger);}
#quotes-root .btn-danger:hover:not(:disabled), #quotes-modal-root .btn-danger:hover:not(:disabled){background:var(--danger-bg);}
/* ADDED: the armed half of the host's two-click confirm (ARCHITECTURE §3.1),
   which replaced the standalone's delete modal. */
#quotes-root .btn-danger.armed, #quotes-modal-root .btn-danger.armed{background:var(--danger);color:#fff;border-color:var(--danger);}
#quotes-root .btn-sm, #quotes-modal-root .btn-sm{padding:6px 12px;font-size:12.5px;}
#quotes-root .btn-icon-only, #quotes-modal-root .btn-icon-only{padding:8px;border-radius:8px;}

#quotes-root .chip, #quotes-modal-root .chip{
  display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;font-size:11.5px;font-weight:700;
  letter-spacing:.02em;background:var(--surface-2);color:var(--ink-soft);
}
#quotes-root .chip.dot::before, #quotes-modal-root .chip.dot::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
#quotes-root .status-badge, #quotes-modal-root .status-badge{padding:4px 11px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.03em;white-space:nowrap;}
#quotes-root .status-draft, #quotes-modal-root .status-draft{background:var(--surface-3);color:var(--ink-soft);}
#quotes-root .status-tosend, #quotes-modal-root .status-tosend{background:var(--warning-bg);color:var(--warning);}
#quotes-root .status-sent, #quotes-modal-root .status-sent{background:#DCEAFB;color:#1D5A9E;}
#quotes-root .status-approved, #quotes-modal-root .status-approved{background:var(--success-bg);color:var(--success);}
#quotes-root .status-rejected, #quotes-modal-root .status-rejected{background:var(--danger-bg);color:var(--danger);}
#quotes-root .status-expired, #quotes-modal-root .status-expired{background:var(--surface-3);color:var(--ink-faint);}
#quotes-root .status-contract, #quotes-modal-root .status-contract{background:var(--brand-900);color:#fff;}
#quotes-root select.status-inline{
  border:none;font-weight:700;font-size:11px;width:auto;min-width:126px;max-width:100%;
  padding:5px 24px 5px 12px;border-radius:999px;cursor:pointer;background-position:right 9px center;background-size:11px;
}
#quotes-root select.status-inline:focus{box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);}

/* ---------------------------------------------------------------------------
   HOME / ARCHIVE
   --------------------------------------------------------------------------- */
#quotes-root .hero-panel{
  background:linear-gradient(155deg, var(--brand-900), var(--brand-700));
  border-radius:var(--radius-lg);padding:clamp(20px, 5cqi, 34px);color:#fff;box-shadow:var(--shadow-md);
  display:flex;flex-direction:column;gap:22px;position:relative;overflow:hidden;
}
#quotes-root .hero-panel::after{
  content:'';position:absolute;right:-60px;top:-60px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--mist) 55%, transparent), transparent 70%);
}
#quotes-root .hero-panel h1{color:#fff;font-size:clamp(21px, 4cqi, 26px);position:relative;}
#quotes-root .hero-panel .sub{color:color-mix(in srgb, white 78%, transparent);font-size:14px;max-width:52ch;position:relative;}
#quotes-root .type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;position:relative;}
#quotes-root .type-card{
  background:color-mix(in srgb, white 10%, transparent);border:1.5px solid color-mix(in srgb, white 22%, transparent);
  border-radius:var(--radius-md);padding:18px;cursor:pointer;text-align:left;color:#fff;transition:all .15s;
}
#quotes-root .type-card:hover{background:color-mix(in srgb, white 16%, transparent);}
#quotes-root .type-card.selected{background:#fff;border-color:#fff;color:var(--brand-900);}
#quotes-root .type-card .ticon{font-size:22px;margin-bottom:8px;display:block;}
#quotes-root .type-card .tname{font-weight:700;font-size:15px;margin-bottom:3px;}
#quotes-root .type-card .tdesc{font-size:12px;opacity:.85;line-height:1.4;}
#quotes-root .hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;position:relative;}
#quotes-root .hero-actions .lang-toggle{border-color:color-mix(in srgb, white 35%, transparent);}
#quotes-root .hero-actions .lang-toggle button{background:transparent;color:#fff;}
#quotes-root .hero-actions .lang-toggle button.active{background:#fff;color:var(--brand-900);}
#quotes-root .btn-hero{background:#fff;color:var(--brand-900);}
#quotes-root .btn-hero:hover:not(:disabled){background:var(--sage);}
/* ADDED (OfficeRnD Phase 1): the "Clienti" entry sits on the hero's dark
   gradient next to "+ Nuovo preventivo" — .btn-ghost's default colours (dark
   text, dark border) would be invisible there, same fix already applied to
   .hero-actions .lang-toggle above. */
#quotes-root .hero-actions .btn-ghost{color:#fff;border-color:color-mix(in srgb, white 35%, transparent);}
#quotes-root .hero-actions .btn-ghost:hover:not(:disabled){background:color-mix(in srgb, white 14%, transparent);}

/* Matches the standalone's toolbar (KQuote-stella33-preventivi-standalone_5.html
   ~L303): one row, bottoms aligned, wrapping only when the row genuinely
   doesn't fit. */
#quotes-root .toolbar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:clamp(16px, 3cqi, 26px) 0 14px;}
#quotes-root .toolbar-field label{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-faint);font-weight:700;}
/* RESPONSIVE: the widths quotes.js used to write inline on each
   `.field.toolbar-field` (`style="min-width:220px;max-width:340px"` and the
   like) are these modifiers now, so the phone rules below can override them. */
#quotes-root .toolbar-field{flex:0 1 auto;min-width:0;}
#quotes-root .toolbar-field--search{flex:1 1 220px;min-width:200px;max-width:340px;}
#quotes-root .toolbar-field .search-box{flex:none;width:100%;min-width:0;max-width:none;}
#quotes-root .toolbar-field--type, #quotes-root .toolbar-field--status, #quotes-root .toolbar-field--lang{min-width:130px;}
#quotes-root .toolbar-field--check{flex-direction:row;align-items:center;gap:8px;padding-bottom:10px;}
#quotes-root .search-box{position:relative;flex:1;min-width:200px;max-width:320px;}
#quotes-root .search-box input{padding-left:34px;}
#quotes-root .search-box svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--ink-faint);}
#quotes-root .filter-select{min-width:130px;}

/* ADAPTED (the one specificity fix the prefixing forced): the standalone's
   bare `table{...min-width:820px}` sat BELOW `.paper table.items{min-width:0}`
   in specificity, which is what let the paper's fixed-layout items table
   survive it — the tool had already been bitten by this once (spec §10).
   Prefixed with an id it would out-rank the paper rule and blow the A4 layout
   apart, so the archive table's rules are scoped to their own wrapper, which
   renderArchiveTable() always emits. */
#quotes-root .table-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--surface);}
#quotes-root .table-wrap table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:820px;}
#quotes-root .table-wrap table thead th{
  text-align:left;padding:12px 16px;background:var(--surface-2);color:var(--ink-soft);font-size:11.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border);white-space:nowrap;
  cursor:pointer;user-select:none;
}
#quotes-root .table-wrap table thead th:hover{color:var(--brand-700);}
#quotes-root .table-wrap table tbody td{padding:13px 16px;border-bottom:1px solid var(--border);vertical-align:middle;overflow-wrap:anywhere;}
#quotes-root .table-wrap table tbody tr:last-child td{border-bottom:none;}
#quotes-root .table-wrap table tbody tr:hover{background:var(--surface-2);}
#quotes-root .num-money{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;}
#quotes-root .row-actions{display:flex;gap:6px;justify-content:flex-end;}
#quotes-root .empty-state, #quotes-modal-root .empty-state{padding:60px 24px;text-align:center;color:var(--ink-faint);}
#quotes-root .empty-state .big, #quotes-modal-root .empty-state .big{font-size:38px;margin-bottom:10px;}

/* ---------------------------------------------------------------------------
   WIZARD
   ADAPTED: the two sticky offsets were measured against the standalone's own
   65px topbar, which is gone. The host's <main> scrolls with the page, so the
   stepper sticks to 0 and the sidebar clears the stepper instead.
   --------------------------------------------------------------------------- */
#quotes-root .wizard-head{position:sticky;top:0;z-index:30;background:var(--bg);padding:18px 0 14px;}
#quotes-root .stepper{display:flex;gap:2px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin;}
#quotes-root .step-pill{
  flex:1;min-width:96px;display:flex;flex-direction:column;gap:6px;padding:10px 4px 0;border:none;background:none;
  cursor:pointer;position:relative;
}
#quotes-root .step-pill .bar{height:4px;border-radius:3px;background:var(--border-strong);}
#quotes-root .step-pill.done .bar{background:var(--mist);}
#quotes-root .step-pill.active .bar{background:var(--brand-900);}
#quotes-root .step-pill .label{font-size:11px;font-weight:700;color:var(--ink-faint);text-align:left;letter-spacing:.01em;}
#quotes-root .step-pill.active .label{color:var(--brand-900);}
#quotes-root .step-pill.done .label{color:var(--ink-soft);}

#quotes-root .wizard-body{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start;}
#quotes-root .wizard-body > div{min-width:0;}
#quotes-root .wizard-sidebar{position:sticky;top:130px;display:flex;flex-direction:column;gap:14px;}
/* one column at the host's drawer breakpoint (1024px): RESPONSIVE section */

#quotes-root .totals-card{padding:22px;}
#quotes-root .totals-card .t-row{display:flex;justify-content:space-between;font-size:13.5px;padding:6px 0;color:var(--ink-soft);}
#quotes-root .totals-card .t-row.grand{
  border-top:1px solid var(--border);margin-top:8px;padding-top:14px;font-size:19px;font-weight:700;color:var(--brand-900);
  font-family:var(--font-display);
}
#quotes-root .totals-card .t-row .v{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink);}
#quotes-root .totals-card .t-row.grand .v{color:var(--brand-900);}
#quotes-root .vat-note{font-size:11px;color:var(--ink-faint);margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);}

#quotes-root .save-indicator{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-faint);}
#quotes-root .save-indicator .dot{width:7px;height:7px;border-radius:50%;background:var(--success);}
#quotes-root .save-indicator.saving .dot{background:var(--warning);animation:quotes-pulse 1s infinite;}
@keyframes quotes-pulse{50%{opacity:.35;}}

#quotes-root .wizard-footer{
  position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--border);
  padding:14px 0;margin-top:26px;display:flex;justify-content:space-between;align-items:center;gap:14px;
  box-shadow:0 -6px 18px rgba(6,40,42,.05);z-index:20;
}
/* ADAPTED (this pass): matched the .shell cap it used to sit under (1180px,
   centred) so the sticky footer's content lined up with the wizard body
   above it. Now that .shell is full width, the footer follows suit — the
   flex row's own `justify-content:space-between` already keeps the totals on
   the left and the nav buttons on the right at any width. */
#quotes-root .wizard-footer-inner{width:100%;display:flex;justify-content:space-between;align-items:center;padding:0 12px;gap:16px;flex-wrap:wrap;}

#quotes-root .banner, #quotes-modal-root .banner{border-radius:var(--radius-md);padding:13px 16px;font-size:13px;display:flex;gap:10px;align-items:flex-start;}
#quotes-root .banner.warn, #quotes-modal-root .banner.warn{background:var(--warning-bg);color:var(--warning);}
#quotes-root .banner.err, #quotes-modal-root .banner.err{background:var(--danger-bg);color:var(--danger);}
#quotes-root .banner.info, #quotes-modal-root .banner.info{background:var(--surface-2);color:var(--ink-soft);}
#quotes-root .banner ul, #quotes-modal-root .banner ul{margin:4px 0 0;padding-left:18px;}

/* line items */
#quotes-root .lineitem{
  border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;background:var(--surface);
  display:flex;flex-direction:column;gap:10px;
}
#quotes-root .lineitem + .lineitem{margin-top:10px;}
#quotes-root .lineitem.dragging{opacity:.4;}
#quotes-root .lineitem-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
#quotes-root .lineitem-head .drag-handle{cursor:grab;color:var(--ink-faint);font-size:15px;padding:2px 4px;}
#quotes-root .lineitem-head .li-title{font-weight:700;font-size:14px;flex:1;}
#quotes-root .lineitem-head .li-total{font-variant-numeric:tabular-nums;font-weight:700;color:var(--brand-900);}
#quotes-root .lineitem-flags{display:flex;gap:14px;flex-wrap:wrap;}
#quotes-root .lineitem-actions{display:flex;gap:6px;flex-wrap:wrap;}
#quotes-root .category-tag{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);}
#quotes-root .add-line-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
#quotes-root .includedlist{display:flex;flex-direction:column;gap:6px;}
#quotes-root .includedlist .il-item{display:flex;gap:8px;align-items:center;}
#quotes-root .includedlist .il-item input{flex:1;}
#quotes-root .chips-insert, #quotes-modal-root .chips-insert{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px;}
#quotes-root .chip-btn, #quotes-modal-root .chip-btn{
  padding:4px 10px;border-radius:999px;border:1px solid var(--border-strong);background:var(--surface);
  font-size:11.5px;color:var(--ink-soft);cursor:pointer;
}
#quotes-root .chip-btn:hover, #quotes-modal-root .chip-btn:hover{background:var(--surface-2);border-color:var(--mist);}
#quotes-root .rate-picker, #quotes-modal-root .rate-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
/* 2 cols under 640px, 1 col under 400px: RESPONSIVE section */
#quotes-root .rate-opt, #quotes-modal-root .rate-opt{
  border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);padding:10px;cursor:pointer;text-align:left;
  background:var(--surface);
}
#quotes-root .rate-opt.selected, #quotes-modal-root .rate-opt.selected{border-color:var(--accent);background:var(--surface-2);}
#quotes-root .rate-opt .rn, #quotes-modal-root .rate-opt .rn{font-weight:700;font-size:13px;}
#quotes-root .rate-opt .rp, #quotes-modal-root .rate-opt .rp{font-size:12px;color:var(--ink-soft);}
/* 0.34.0 "Dal listino" (PRICELISTS_PLAN.md §6): the inline picker under the
   step-5 quick-add row, and the tag a picked line wears on its card. Chips
   echo .rate-opt; the dashed `.default` chip is the migrated legacy row a
   quick-add preselects; the internal-notes box is deliberately muted — those
   lines are never printed, and the styling says so before the label does. */
#quotes-root .pl-picker{margin-top:12px;padding:12px 14px;border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);}
#quotes-root .pl-picker-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:10px;}
#quotes-root .pl-picker-title{font-weight:700;font-size:13px;}
#quotes-root .pl-picker-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin;}
#quotes-root .pl-chip{
  flex:0 0 auto;min-width:150px;max-width:240px;border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);
  padding:8px 10px;cursor:pointer;text-align:left;background:var(--surface);display:flex;flex-direction:column;gap:2px;
}
#quotes-root .pl-chip:hover{background:var(--surface-2);}
#quotes-root .pl-chip.selected{border-color:var(--accent);background:var(--surface-2);}
#quotes-root .pl-chip.default{border-style:dashed;}
#quotes-root .pl-chip.default.selected{border-style:solid;}
#quotes-root .pl-chip .rn{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#quotes-root .pl-chip .rn em{font-style:normal;font-weight:600;font-size:10.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.04em;margin-left:4px;}
#quotes-root .pl-chip .rp{font-size:12px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* 0.78.5 — another sede's office on the chip (its building, in the accent), and
   step 5's warning when listino lines belong to a building other than the quote's. */
#quotes-root .pl-chip .rn em.pl-chip-sede{color:var(--accent);text-transform:none;letter-spacing:0;}
#quotes-root .pl-picker-sede-note{color:var(--accent-strong);font-weight:600;}
#quotes-root .pl-sede-conflict{margin-top:10px;padding:8px 12px;border-radius:8px;background:#FBEFD9;border:1px solid #E8C98F;color:#6B4A12;}
#quotes-root .pl-picker-detail, #quotes-modal-root .pl-picker-detail{margin-top:10px;font-size:13px;}
#quotes-root .pl-picker-desc, #quotes-modal-root .pl-picker-desc{color:var(--ink);line-height:1.45;}
#quotes-root .pl-picker-desc .muted, #quotes-modal-root .pl-picker-desc .muted{color:var(--ink-faint);font-style:italic;}
#quotes-root .pl-picker-facts, #quotes-modal-root .pl-picker-facts{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px;font-size:12px;color:var(--ink-soft);}
#quotes-root .pl-picker-attach, #quotes-modal-root .pl-picker-attach{color:var(--brand-900);font-weight:600;}
#quotes-root .pl-picker-notes, #quotes-modal-root .pl-picker-notes{
  margin-top:8px;padding:8px 10px;border:1px dashed var(--mist);border-radius:var(--radius-sm);background:var(--surface-2);
  color:var(--ink-faint);font-size:12px;line-height:1.4;
}
#quotes-root .pl-picker-notes-title, #quotes-modal-root .pl-picker-notes-title{font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px;}
#quotes-root .pl-picker-foot{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
#quotes-root .pl-tag{
  display:inline-flex;align-items:center;gap:4px;margin-top:3px;padding:1px 4px 1px 8px;border-radius:999px;
  background:var(--surface-2);color:var(--ink-soft);font-size:11px;font-weight:600;max-width:100%;
}
#quotes-root .pl-tag.missing{color:var(--ink-faint);font-style:italic;}
#quotes-root .pl-tag-x{border:none;background:none;color:var(--ink-faint);cursor:pointer;font-size:13px;line-height:1;padding:0 3px;}
#quotes-root .pl-tag-x:hover{color:var(--danger);}
#quotes-root .dates-list{display:flex;flex-wrap:wrap;gap:6px;}
#quotes-root .date-tag{display:flex;align-items:center;gap:6px;background:var(--surface-2);border-radius:999px;padding:4px 6px 4px 12px;font-size:12.5px;}
#quotes-root .date-tag button{border:none;background:none;color:var(--ink-faint);cursor:pointer;font-size:14px;line-height:1;}

#quotes-root .settings-nav{display:flex;flex-direction:column;gap:2px;}
#quotes-root .settings-nav button{
  text-align:left;padding:10px 14px;border-radius:var(--radius-sm);border:none;background:none;color:var(--ink-soft);
  font-weight:600;font-size:13.5px;cursor:pointer;
}
#quotes-root .settings-nav button.active{background:var(--surface-2);color:var(--brand-900);}
#quotes-root .settings-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:22px;}
#quotes-root .settings-layout > div{min-width:0;}
#quotes-root .rate-table-row{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);}
#quotes-root .rate-table-row.head{font-size:11px;font-weight:700;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.04em;}
/* ADDED (global venue list): the row's trailing controls are copy / move /
   delete now, wrapped in ONE cell so the five-column grid above is untouched.
   `.inherited` rows are the globals a sede reads off the shared list: same
   geometry, visibly quieter, and read-only — they are edited under
   "Globale (tutte le sedi)" and nowhere else. */
#quotes-root .rate-row-actions{display:flex;align-items:center;gap:2px;justify-content:flex-end;}
#quotes-root .rate-table-row.inherited input{background:var(--surface-2);color:var(--ink-faint);border-style:dashed;cursor:default;}
#quotes-root .rate-list-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
/* 0.34.0 "Listini" (PRICELISTS_PLAN.md §5): the seven section chips, then
   ONE column — a search box, the compact list of the section × scope's
   entries (name, one-line price summary, capacity, PDF badges; the inherited
   globals first under a sede, tagged "Globale") and, under the one row that
   is clicked, its read-only overview (rates, capacity, both descriptions,
   attachments, internal notes, the action row). "Modifica" opens the entry
   in the modal layer as a floating window (.modal-box.pl-editor, below with
   the other modal rules) — the tasks board's card → preview → window
   pattern. On the list, `.inherited` = a global row under a sede's scope,
   `.selected` (+ aria-expanded) = the row whose overview is open. */
#quotes-root .pl-sections{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
#quotes-root .chip-btn.active, #quotes-modal-root .chip-btn.active{background:var(--brand-900);border-color:var(--brand-900);color:#fff;}
#quotes-root .pl-master{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-items:start;}
#quotes-root .pl-list-col{min-width:0;}
/* the search box: icon left, ✕ right (shown only with a value), "n di m" beside */
#quotes-root .pl-search-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
#quotes-root .pl-search{position:relative;flex:1 1 220px;min-width:0;max-width:420px;}
#quotes-root .pl-search > svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--ink-faint);pointer-events:none;}
#quotes-root .pl-search-input{width:100%;padding-left:32px;padding-right:32px;}
#quotes-root .pl-search-clear{display:none;position:absolute;right:4px;top:50%;transform:translateY(-50%);width:26px;height:26px;border:0;border-radius:6px;background:transparent;color:var(--ink-faint);font:inherit;font-size:13px;line-height:1;cursor:pointer;align-items:center;justify-content:center;}
#quotes-root .pl-search.has-value .pl-search-clear{display:inline-flex;}
#quotes-root .pl-search-clear:hover{color:var(--ink);background:var(--surface-2);}
#quotes-root .pl-search-count{font-size:12px;color:var(--ink-faint);white-space:nowrap;}
#quotes-root .pl-list-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
#quotes-root .pl-list{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);overflow:hidden;}
#quotes-root .pl-list-group{padding:8px 12px 4px;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);background:var(--surface-2);}
#quotes-root .pl-list-empty{padding:12px;margin:0;}
#quotes-root .pl-row{display:flex;flex-direction:column;gap:2px;width:100%;padding:9px 12px;border:0;border-bottom:1px solid var(--border);border-left:3px solid transparent;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;}
#quotes-root .pl-row:hover{background:var(--surface-2);}
#quotes-root .pl-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
#quotes-root .pl-row.selected{background:var(--surface-2);border-left-color:var(--brand-900);border-bottom-color:transparent;}
#quotes-root .pl-row.inherited .pl-row-name{color:var(--ink-soft);}
#quotes-root .pl-row-name{display:flex;align-items:center;gap:6px;min-width:0;font-size:13px;font-weight:600;}
#quotes-root .pl-row-name .muted{color:var(--ink-faint);font-style:italic;font-weight:500;}
#quotes-root .pl-row-tag{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);border:1px solid var(--border);border-radius:999px;padding:0 6px;line-height:15px;}
#quotes-root .pl-row-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;font-size:12px;color:var(--ink-soft);}
#quotes-root .pl-row-meta .muted{color:var(--ink-faint);}
#quotes-root .pl-row-badge{font-size:10px;font-weight:700;color:var(--brand-900);border:1px solid var(--brand-900);border-radius:4px;padding:0 4px;line-height:15px;}
#quotes-root .pl-list-add{margin:8px 12px;}
/* the overview: unrolled under its row, the same left accent, on the muted ground */
#quotes-root .pl-overview{padding:6px 14px 14px 15px;border-left:3px solid var(--brand-900);border-bottom:1px solid var(--border);background:var(--surface-2);font-size:13px;}
#quotes-root .pl-overview-facts{display:flex;flex-wrap:wrap;gap:8px 22px;padding-bottom:10px;border-bottom:1px dashed var(--border);margin-bottom:10px;}
#quotes-root .pl-overview-fact{display:flex;flex-direction:column;gap:1px;min-width:0;}
#quotes-root .pl-overview-label{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);}
#quotes-root .pl-overview-value{font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;}
#quotes-root .pl-overview-descs{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;}
#quotes-root .pl-overview-desc{min-width:0;display:flex;flex-direction:column;gap:3px;}
#quotes-root .pl-overview-text{color:var(--ink);line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;}
#quotes-root .pl-overview .muted{color:var(--ink-faint);font-style:italic;}
#quotes-root .pl-overview-attach{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:10px;font-size:12.5px;}
#quotes-root .pl-overview-attach-item{display:inline-flex;align-items:center;gap:8px;}
#quotes-root .pl-overview .pl-picker-notes{margin-top:10px;}
#quotes-root .pl-overview-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;}
#quotes-root .pl-overview-actions .btn svg{margin-right:5px;}
/* the editor's fields (painted inside the floating window, #quotes-modal-root) */
#quotes-modal-root .pl-detail-editor{min-width:0;}
#quotes-modal-root .pl-detail-head{display:grid;grid-template-columns:1.6fr repeat(auto-fit,minmax(110px,1fr));gap:10px;align-items:end;margin-bottom:12px;}
#quotes-modal-root .pl-detail-head .field{margin-bottom:0;}
/* KT-137: costo, margine, prezzo di listino. The block is INTERNAL: the same
   dashed, muted box as the internal notes. A field whose value is COMPUTED
   (the margin of a one-price row, each rate's cost on an events row) loses
   its input look — dashed, no fill, softer ink — and shows "calcolato"; it
   stays typeable (typing it recomputes the other one). A negative margin
   is painted in the warning colour. */
#quotes-modal-root .pl-cm{margin:0 0 12px;padding:10px 12px;border:1px dashed var(--mist);border-radius:var(--radius-sm);background:var(--surface-2);}
#quotes-modal-root .pl-cm-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-bottom:8px;}
#quotes-modal-root .pl-cm-title{font-weight:700;font-size:13px;color:var(--ink);}
#quotes-root .pl-internal-tag, #quotes-modal-root .pl-internal-tag,
#quotes-root .pl-internal-title{font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);}
#quotes-modal-root .pl-cm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end;}
#quotes-modal-root .pl-cm-grid--margin{grid-template-columns:minmax(0,1fr) minmax(0,2fr);margin-top:8px;}
#quotes-modal-root .pl-cm-field{position:relative;margin-bottom:0;}
#quotes-modal-root .pl-cm-field .pl-cm-unit{position:absolute;right:10px;bottom:8px;font-size:12px;color:var(--ink-faint);pointer-events:none;}
#quotes-modal-root .pl-cm-field input[data-pl-bind$=":margin"]{padding-right:24px;}
#quotes-modal-root .pl-cm-derived-tag{display:none;margin-left:4px;padding:0 5px;border-radius:var(--radius-sm);background:var(--surface-3);color:var(--ink-soft);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
#quotes-modal-root .pl-cm-field.is-derived .pl-cm-derived-tag{display:inline-block;}
#quotes-modal-root .pl-cm-field.is-derived input{background:transparent;border-style:dashed;color:var(--ink-soft);}
#quotes-modal-root .pl-cm-field.is-derived input:focus{background:var(--surface);border-style:solid;color:var(--ink);}
#quotes-modal-root .pl-cm-field.is-negative input{color:var(--warning);font-weight:600;}
#quotes-modal-root .pl-cm-input.is-invalid{border-color:var(--danger);}
#quotes-modal-root .pl-cm-table{display:flex;flex-direction:column;gap:6px;}
#quotes-modal-root .pl-cm-trow{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:center;}
#quotes-modal-root .pl-cm-thead{font-size:11px;font-weight:700;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.04em;}
#quotes-modal-root .pl-cm-rate-label{font-size:12.5px;color:var(--ink);}
#quotes-modal-root .pl-cm-trow .pl-cm-derived-tag{position:absolute;right:6px;top:-7px;}
#quotes-modal-root .pl-cm-hint{margin-top:8px;}
#quotes-modal-root .pl-cm-hint.is-warning{color:var(--warning);}
#quotes-root .pl-overview-internal{margin-top:10px;padding:8px 10px;border:1px dashed var(--mist);border-radius:var(--radius-sm);background:var(--surface-2);}
#quotes-root .pl-overview-internal .pl-overview-facts{border-bottom:0;padding-bottom:0;margin:4px 0 0;}
#quotes-root .pl-overview-value.is-negative, #quotes-root .pl-row-margin.is-negative{color:var(--warning);font-weight:600;}
#quotes-root .pl-row-margin{color:var(--ink-faint);}
#quotes-modal-root .pl-detail-editor .grid{margin-bottom:12px;}
#quotes-modal-root .pl-detail-editor textarea{min-height:64px;font-size:12.5px;}
#quotes-modal-root .pl-value{font-size:13px;padding:6px 0;color:var(--ink);min-height:20px;}
#quotes-modal-root .pl-attachments{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;}
#quotes-modal-root .pl-attachment{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;}
#quotes-root .pl-attachment-lang, #quotes-modal-root .pl-attachment-lang{font-size:11px;font-weight:700;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.04em;}
#quotes-root .pl-attachment-file, #quotes-modal-root .pl-attachment-file{color:var(--brand-900);font-weight:600;}
#quotes-modal-root .pl-attachment label.btn{cursor:pointer;}
/* ADDED: the per-year `startFrom` editor that replaced `numbering.nextNumber`
   (plan D3) — same visual language as .rate-table-row above. */
#quotes-root .startfrom-row{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);}

#quotes-root .logo-upload{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
#quotes-root .logo-preview{width:88px;height:88px;border-radius:var(--radius-md);border:1px dashed var(--border-strong);display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--surface-2);}
#quotes-root .logo-preview img{max-width:100%;max-height:100%;object-fit:contain;}

/* ---------------------------------------------------------------------------
   MODALS
   ADAPTED: the toast rules are gone — the add-on calls the HOST's toast() so
   that a quote's "Salvato" and a task's "Salvato" look and stack alike.
   --------------------------------------------------------------------------- */
#quotes-modal-root .modal-backdrop{position:fixed;inset:0;background:rgba(6,24,26,.45);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;}
#quotes-modal-root .modal-box{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:560px;width:100%;max-height:88vh;overflow-y:auto;}
#quotes-modal-root .modal-box.wide{max-width:760px;}
#quotes-modal-root .modal-head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--border);}
#quotes-modal-root .modal-head h3{font-size:17px;}
#quotes-modal-root .modal-body{padding:22px 24px;}
#quotes-modal-root .modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--border);flex-wrap:wrap;position:sticky;bottom:0;background:var(--surface);}

/* 0.34.0 Listini: the floating editor window. Styled after the host's
   .task-window (styles.css spec B): a centred dialog on desktop — the body
   is the one scroller, the head and the foot stay put — and a full-screen
   sheet at or under 900px (--bp-tablet, the host's EDITOR_SHEET_MAX). No
   top/left is written from JS, so a drag/resize can be added later without
   touching the markup. */
#quotes-modal-root .modal-box.pl-editor{max-width:none;width:min(720px,96vw);max-height:90vh;max-height:90dvh;display:flex;flex-direction:column;overflow:hidden;}
#quotes-modal-root .pl-editor .modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;}
#quotes-modal-root .pl-editor-head{gap:12px;padding:16px 20px;}
#quotes-modal-root .pl-editor-title{display:flex;flex-direction:column;gap:2px;min-width:0;}
#quotes-modal-root .pl-editor-title h3{font-size:16px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#quotes-modal-root .pl-editor-tag{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);}
#quotes-modal-root .pl-editor .modal-foot{justify-content:space-between;align-items:center;}
#quotes-modal-root .pl-editor-foot-right{display:flex;align-items:center;gap:12px;margin-left:auto;}
#quotes-modal-root .pl-editor-delete svg{margin-right:5px;}
#quotes-modal-root .save-indicator{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-faint);}
#quotes-modal-root .save-indicator .dot{width:7px;height:7px;border-radius:50%;background:var(--success);}
#quotes-modal-root .save-indicator.saving .dot{background:var(--warning);animation:quotes-pulse 1s infinite;}
@media (prefers-reduced-motion: no-preference){
  #quotes-modal-root .modal-box.pl-editor{animation:quotes-winpop .16s ease-out;}
}
@keyframes quotes-winpop{from{opacity:.5;transform:scale(.985);}to{opacity:1;transform:none;}}

#quotes-modal-root .history-list, #quotes-root .history-list{display:flex;flex-direction:column;gap:8px;font-size:12.5px;color:var(--ink-soft);list-style:none;margin:0;padding:0;}
#quotes-modal-root .history-list li, #quotes-root .history-list li{display:flex;gap:8px;}
#quotes-modal-root .history-list time, #quotes-root .history-list time{color:var(--ink-faint);white-space:nowrap;}

#quotes-root .vhidden, #quotes-modal-root .vhidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
#quotes-root .text-right, #quotes-modal-root .text-right{text-align:right;}
#quotes-root .mt-0, #quotes-modal-root .mt-0{margin-top:0 !important;}
#quotes-root .flex, #quotes-modal-root .flex{display:flex;flex-wrap:wrap;}
#quotes-root .gap-8, #quotes-modal-root .gap-8{gap:8px;}
#quotes-root .wrap, #quotes-modal-root .wrap{flex-wrap:wrap;}

/* ---------------------------------------------------------------------------
   THE HOST'S UTENTI LIST — the third role value (plan D2)
   Not scoped to #quotes-root on purpose: the pill is rendered by app.js in
   Amministrazione → Utenti, next to `.role-pill.admin`. It borrows the
   "watch" hue, the one semantic colour styles.css already defines that is
   neither the brand accent (admin) nor a plain grey (member).
   --------------------------------------------------------------------------- */
.role-pill.sales { background: var(--status-watch-bg); color: var(--status-watch); }

/* ---------------------------------------------------------------------------
   PRINT (plan §4.2 — the fallback path; the customer's PDF is Phase 3's
   Gotenberg render of a standalone document and never comes through here).
   ONE block, as the plan asks.

   `@page{size:A4;margin:0}` and `body *{visibility:hidden}` are NOT repeated
   here: they arrive with QuoteEngine.PAPER_CSS, injected by quotes.js. What is
   left is the half PAPER_CSS cannot know — the host chrome to remove, and the
   fact that this app's print root is `#quotes-print-root`, not the
   standalone's `#print-root`.
   --------------------------------------------------------------------------- */
@media print {
  /* display:none, not visibility:hidden: the host's sidebar is 240px of
     reserved column and the floating editor window is position:fixed — hiding
     them without removing them leaves the paper offset on every page. */
  #app,
  .editor-window,
  .task-window,
  .toast-wrap,
  .toasts,
  .assist-widget-root { display: none !important; }

  #quotes-print-root,
  #quotes-print-root * { visibility: visible !important; }
  #quotes-print-root { display: block !important; position: absolute; top: 0; left: 0; width: 100%; margin: 0; }
  #quotes-print-root .paper { box-shadow: none; break-after: page; }
  #quotes-print-root .paper:last-child { break-after: auto; }
  /* RESPONSIVE: the on-screen preview's fit-to-width transform (see the
     .paper-scroll rules at the foot of this file) is reset here; #app is
     display:none in print anyway, this is belt and braces. */
  #quotes-root .paper-scroll { overflow: visible; }
  #quotes-root .paper-scroll .paper { transform: none; margin: 0; }
}

/* Off-screen while the browser is not printing: the pages live in a <body>
   child so that no host container's overflow or stacking context can clip
   them (plan §4.2), which also means nothing else may see them. */
#quotes-print-root { display: none; }

/* ---------------------------------------------------------------------------
   Phase 3A — the send modal and the public link
   ---------------------------------------------------------------------------
   Everything the "Invia al cliente" box needs is already here (.modal-*,
   .field, .banner.info, .flex/.gap-8, the input/textarea rules): these are the
   three places where the defaults are wrong for the job.
   --------------------------------------------------------------------------- */

/* A read-only value is not an editable field and must not invite a click:
   muted ground, monospace so a long token is scannable character by character,
   and no resize handle. */
#quotes-root input[readonly], #quotes-modal-root input[readonly]{
  background:var(--surface-2);color:var(--ink-soft);cursor:text;
  font-family:ui-monospace,'IBM Plex Mono',monospace;font-size:12px;
}

/* The covering letter is read as a whole, not typed into a slot: the body
   field gets room to show its paragraph structure without scrolling. */
#quotes-modal-root #send-body{min-height:220px;}

/* The wizard's step-8 action row and the settings Email tab both put a
   placeholder legend on screen; keep it out of the way of the fields. */
#quotes-root .banner.info code, #quotes-modal-root .banner.info code{
  font-family:ui-monospace,'IBM Plex Mono',monospace;font-size:12px;
}

/* ---------------------------------------------------------------------------
   Preventivi v2 — sedi records, the allestimento catalog, the referente
   picker, the archive's bulk bar and the struck/yearly totals.
   Ported from QuoteTool/KQuote-stella33-preventivi-standalone_5.html's CSS
   (its `.bulk-bar` / `.col-check` / `.contact-*` / `.sede-card` /
   `.rates-sede-*` / `.before-discount` rules), #quotes-root-prefixed like
   everything else in this file.
   --------------------------------------------------------------------------- */

/* archive: multi-select + bulk status bar (D-H) */
#quotes-root .bulk-bar{
  display:flex;align-items:center;gap:12px;padding:10px 16px;margin-bottom:10px;
  background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--radius-md);flex-wrap:wrap;
}
#quotes-root .bulk-bar .bulk-count{font-weight:700;font-size:13.5px;color:var(--brand-900);}
#quotes-root .bulk-bar .bulk-status-label{font-size:12.5px;font-weight:600;color:var(--ink-soft);}
#quotes-root .bulk-bar select{width:auto;min-width:150px;}
#quotes-root th.col-check, #quotes-root td.col-check{width:36px;text-align:center;}
#quotes-root tr.row-selected{background:color-mix(in srgb, var(--accent) 8%, transparent);}

/* totals card: "Totale senza sconto" struck through, the yearly breakdown */
#quotes-root .totals-card .t-row.before-discount .v{text-decoration:line-through;color:var(--ink-faint);}
#quotes-root .totals-card .yearly-breakdown{border-top:1px dashed var(--border);margin-top:8px;padding-top:4px;}
#quotes-root .totals-card .t-row.yr{font-size:12px;color:var(--ink-faint);padding:3px 0;}

/* stepClient: the referente picker + its chips + the inline "new referente" form */
#quotes-root .contact-chip-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
#quotes-root .contact-chip{
  display:flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:999px;padding:5px 6px 5px 12px;font-size:12.5px;color:var(--ink);
}
#quotes-root .contact-chip i{color:var(--ink-faint);font-style:normal;}
#quotes-root .contact-chip .chip-x{border:none;background:none;color:var(--ink-faint);cursor:pointer;font-size:14px;line-height:1;padding:2px 4px;}
#quotes-root .contact-chip .chip-x:hover{color:var(--danger);}
/* KT-118: the Clienti card's Referenti table — an OfficeRnD-owned row is
   read-only (no Modifica/Elimina) and reads as such. */
#quotes-root .contact-row-ornd td{color:var(--ink-soft);}

/* settings: one card per sede (Sedi tab) */
#quotes-root .sede-card{border:1px solid var(--border);border-radius:var(--radius-md);padding:12px;margin-top:10px;}

/* Servizio PDF status card (Impostazioni → Email). */
#quotes-root .pdf-status{padding:10px 12px;border-radius:var(--radius-md);border:1px solid var(--border-strong);background:var(--surface-2);font-size:13.5px;}
#quotes-root .pdf-status.ok{border-color:color-mix(in srgb, var(--success) 45%, var(--border-strong));background:color-mix(in srgb, var(--success) 10%, var(--surface));}
#quotes-root .pdf-status.warn{border-color:color-mix(in srgb, var(--accent) 55%, var(--border-strong));background:color-mix(in srgb, var(--accent) 10%, var(--surface));}

/* ---------------------------------------------------------------------------
   OfficeRnD Phase 1 (Agent B) — the provenance badge ("Clienti" list/detail,
   the Sfoglia OfficeRnD directory table, the wizard's step 3 linked-customer
   summary), and the lock hint on a synced customer's detail.
   OFFICERND_PHASE1_CONTRACT.md "Preventivi UI (Agent B)".
   --------------------------------------------------------------------------- */
#quotes-root .src-badge{
  display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;font-size:11.5px;font-weight:700;
  letter-spacing:.02em;white-space:nowrap;
}
#quotes-root .src-badge.officernd{background:var(--warning-bg);color:var(--warning);}
#quotes-root .src-badge.local{background:var(--surface-2);color:var(--ink-soft);}

/* ---------------------------------------------------------------------------
   MARKDOWN NOTES (product decision 2026-09-08) — the ONE deliberate exception
   to "THE PAPER IS NOT HERE" at the top of this file.

   The three "Testi standard" now go through `QuoteEngine.mdToHTML()`, which can
   emit <ul>/<ol>/<strong>/<em>/.md-h1..3 inside `.note-block`. Those rules
   cannot live in `QuoteEngine.PAPER_CSS`: PAPER_CSS is pinned line-by-line
   against the frozen standalone's stylesheet (test/quote-engine.test.js), which
   never had a Markdown note. They live in `QuoteEngine.PAPER_BASE_CSS` instead
   — which the PDF sidecar and /q/<token> inline, but which quotes.js does NOT
   inject into the SPA (it injects PAPER_CSS only). So the on-screen preview
   needs its own copy, and this is it: keep the two byte-compatible.

   Unprefixed, like the other `.paper` selectors here: the measuring probe and
   #quotes-print-root are BODY children, outside #quotes-root.
   --------------------------------------------------------------------------- */
.paper .note-block ul,
.paper .note-block ol { margin: 1.4mm 0 1.4mm; padding-left: 4.4mm; }
.paper .note-block li { margin-bottom: 0.5mm; }
.paper .note-block strong { font-weight: 700; color: #1A2420; }
.paper .note-block em { font-style: italic; }
.paper .note-block .md-h1,
.paper .note-block .md-h2,
.paper .note-block .md-h3 {
  font-family: var(--font-display); font-weight: 600; color: #1A2420; letter-spacing: .01em;
  margin: 2.2mm 0 1mm; line-height: 1.35;
}
.paper .note-block .md-h1:first-child,
.paper .note-block .md-h2:first-child,
.paper .note-block .md-h3:first-child { margin-top: 0; }
.paper .note-block .md-h1 { font-size: 11.5px; color: var(--paper-accent, #20343A); }
.paper .note-block .md-h2 { font-size: 10.8px; }
.paper .note-block .md-h3 { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #5B6459; }

/* standard texts: translate column (0.31.0) --------------------------------
   Amministrazione → Preventivi → "Testi standard": each pair is IT box |
   translate buttons | EN box. The middle column is sized by its content and
   the two boxes share what is left, so the buttons stay put whatever the
   textarea grows to. Below 900px the row stacks and the arrows read
   top-to-bottom instead of left-to-right, which is still the right story.
   --------------------------------------------------------------------------- */
#quotes-root .std-text-row {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: start;
}
#quotes-root .std-text-translate {
  display: flex; flex-direction: column; gap: 8px; padding-top: 26px; min-width: 170px;
}
#quotes-root .std-text-translate .btn { white-space: nowrap; width: 100%; }
#quotes-root .std-text-import { margin-top: 6px; }

/* ===========================================================================
   RESPONSIVE (2026-09) — the add-on inside a phone / tablet / drawer-width
   host.

   Breakpoints, shared with the host's styles.css: 1100px (the settings
   nav becomes a strip), 1024px (the sidebar becomes a drawer), 900px
   (tablet), 760px, 640px (phone), 560px
   (grids to one column), 400px (the rate picker to one column). Every rule
   for #quotes-root is an `@container quotes (max-width: …)` query — the width
   the add-on actually has, sidebar or no sidebar — with the same rules
   repeated as `@media` under `@supports not (container-type:inline-size)`
   for browsers without container queries. The modal layer
   (#quotes-modal-root) is a <body> child outside the container, so its rules
   are plain `@media`.

   THE PAPER PREVIEW. quote-engine.js's PAPER_CSS draws `.paper` at
   210mm × 297mm and must not change (Gotenberg renders the same CSS for the
   PDF). quotes.js's measurePaper() writes `--paper-scale` = min(1,
   (box width − padding) / 794px) on `.paper-scroll`; the transform below
   shrinks the page to fit and the negative margins shrink its LAYOUT box by
   the same amount, so the scaled page leaves no empty band under it and
   stays centred. `transform`, not `zoom`: the print block resets it in one
   line, and it cannot disturb the paginator's off-screen measuring probe
   (a <body> child, never inside .paper-scroll). The PDF never sees any of
   this — it is a separate document the sidecar renders from PAPER_CSS.
   --------------------------------------------------------------------------- */
#quotes-root .paper-scroll{--paper-scale:1;overflow:auto;max-width:100%;}
#quotes-root .paper-scroll .paper{
  transform:scale(var(--paper-scale,1));transform-origin:top center;
  margin-inline:calc(105mm * (var(--paper-scale,1) - 1));
  margin-bottom:calc(297mm * (var(--paper-scale,1) - 1));
}

/* long emails / links / tokens never widen a card or a cell */
#quotes-root a, #quotes-root .pl-row, #quotes-root .contact-chip, #quotes-root .linked-task,
#quotes-root .section-hint, #quotes-root .pl-attachment-file{overflow-wrap:anywhere;}

/* the settings sub-nav as a horizontal strip (under 760px, below) needs
   these to become chips */
#quotes-root .settings-nav button{white-space:nowrap;}

/* --- ≤1024px: the host's drawer breakpoint — the wizard is one column ---- */
@container quotes (max-width: 1024px){
  #quotes-root .wizard-body{grid-template-columns:1fr;}
  #quotes-root .wizard-sidebar{position:static;}
}
/* --- ≤900px: tablet ------------------------------------------------------ */
@container quotes (max-width: 900px){
  #quotes-root .grid.cols-2, #quotes-root .grid.cols-3, #quotes-root .grid.cols-4{grid-template-columns:1fr 1fr;}
  #quotes-root .std-text-row{grid-template-columns:1fr;}
  #quotes-root .std-text-translate{padding-top:0;flex-direction:row;}
  #quotes-root .wizard-footer-inner{padding:0 4px;}
  #quotes-root .ct-layout,#quotes-root .ct-titles,#quotes-root .ct-previews{grid-template-columns:1fr;}
}
/* --- ≤1100px: settings stack, sub-nav becomes a scrollable chip strip ----
   (the 200px vertical nav is not worth a fifth of a mid-size window) */
@container quotes (max-width: 1100px){
  #quotes-root .settings-layout{grid-template-columns:1fr;gap:14px;}
  #quotes-root .settings-nav{flex-direction:row;gap:6px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin;-webkit-overflow-scrolling:touch;}
  #quotes-root .settings-nav button{flex:0 0 auto;padding:8px 14px;border-radius:999px;border:1px solid var(--border-strong);}
  #quotes-root .settings-nav button.active{border-color:var(--brand-900);}
}
/* --- ≤760px ---------------------------------------------------------------- */
@container quotes (max-width: 760px){
  #quotes-root .rate-table-row{grid-template-columns:1fr 1fr;}
  #quotes-root .type-grid{grid-template-columns:1fr;}
}
/* --- ≤640px: phone -------------------------------------------------------- */
@container quotes (max-width: 640px){
  #quotes-root .page-head{gap:10px;margin-bottom:16px;}
  /* toolbar: search on its own line, the filters two per row, buttons wrap */
  #quotes-root .toolbar{gap:8px 10px;}
  #quotes-root .toolbar-field{flex:1 1 calc(50% - 5px);min-width:0;max-width:none;}
  #quotes-root .toolbar-field--search{flex-basis:100%;max-width:none;}
  #quotes-root .toolbar .spacer{display:none;}
  #quotes-root .bulk-bar{gap:8px;padding:10px 12px;}
  #quotes-root .bulk-bar select{flex:1 1 140px;min-width:0;}
  /* the archive table as stacked cards: one card per row, each cell
     labelled from its data-label (renderArchiveTable). The Clienti /
     OfficeRnD / HubSpot tables keep the .table-wrap sideways scroll. */
  #quotes-root .table-wrap--cards{border:0;background:transparent;overflow:visible;border-radius:0;}
  #quotes-root .table-wrap--cards table{display:block;min-width:0;}
  #quotes-root .table-wrap--cards thead, #quotes-root .table-wrap--cards thead tr{display:block;}
  #quotes-root .table-wrap--cards thead th{display:none;}
  #quotes-root .table-wrap--cards thead th.col-check{display:flex;align-items:center;gap:8px;width:auto;padding:4px 14px 10px;background:transparent;border:0;}
  #quotes-root .table-wrap--cards tbody{display:flex;flex-direction:column;gap:10px;}
  #quotes-root .table-wrap--cards tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);}
  #quotes-root .table-wrap--cards tbody tr:hover{background:var(--surface);}
  #quotes-root .table-wrap--cards tbody tr.row-selected{background:color-mix(in srgb, var(--accent) 8%, var(--surface));border-color:var(--accent);}
  #quotes-root .table-wrap--cards tbody td{display:flex;flex-direction:column;gap:2px;padding:0;border:0;min-width:0;}
  #quotes-root .table-wrap--cards tbody td::before{content:attr(data-label);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);}
  #quotes-root .table-wrap--cards tbody td[data-label=""]::before{content:none;}
  #quotes-root .table-wrap--cards tbody td.col-check{grid-column:1 / -1;flex-direction:row;width:auto;text-align:left;}
  #quotes-root .table-wrap--cards tbody td.col-actions{grid-column:1 / -1;border-top:1px dashed var(--border);padding-top:8px;margin-top:2px;}
  #quotes-root .table-wrap--cards .row-actions{justify-content:flex-start;flex-wrap:wrap;}
  #quotes-root .table-wrap--cards select.status-inline{width:100%;}
  /* stepper: number-only pills, the name lives in title/aria-label */
  #quotes-root .stepper{gap:4px;}
  #quotes-root .step-pill{min-width:auto;padding:6px 6px 0;}
  #quotes-root .step-pill .step-name{display:none;}
  #quotes-root .step-pill .label{text-align:center;}
  #quotes-root .wizard-head{padding:10px 0 8px;}
  #quotes-root .wizard-head .page-head h1{font-size:18px;}
  #quotes-root .wizard-footer{padding:10px 0;}
  #quotes-root .wizard-footer-inner{padding:0;gap:8px;}
  #quotes-root .wizard-footer-inner > .flex{flex:1 1 auto;justify-content:flex-end;flex-wrap:wrap;}
  #quotes-root .wizard-footer .btn{padding:10px 14px;}
  /* step 5: line cards, the "Dal listino" picker wraps, its detail is full width */
  #quotes-root .lineitem{padding:12px;}
  #quotes-root .lineitem-actions{margin-left:auto;}
  #quotes-root .pl-picker{padding:10px;}
  #quotes-root .pl-picker-chips{flex-wrap:wrap;overflow:visible;}
  #quotes-root .pl-chip{flex:1 1 140px;max-width:none;}
  #quotes-root .pl-picker-foot .btn{flex:1 1 auto;}
  #quotes-root .rate-picker{grid-template-columns:repeat(2,1fr);}
  /* the paper preview: less frame around the scaled page */
  #quotes-root .paper-scroll{padding:12px;gap:12px;border-radius:var(--radius-md);}
  #quotes-root .preview-toolbar > div[style]{text-align:left !important;}
  #quotes-root .hero-panel::after{display:none;}
  #quotes-root .empty-state{padding:36px 16px;}
  #quotes-root .pl-list-toolbar .btn, #quotes-root .rate-list-actions .btn{flex:1 1 auto;}
  #quotes-root .pl-overview-descs{grid-template-columns:1fr;}
  #quotes-root .pl-overview-actions .btn{flex:1 1 auto;justify-content:center;}
  #quotes-root .pl-search{max-width:none;flex-basis:100%;}
  /* KT-144 phase C: "Consolida clienti" — each row a card, its three
     columns (MyTasKat | OfficeRnD | HubSpot) and the anomalies stacked */
  #quotes-root .table-wrap--cards.bench-wrap tbody tr{grid-template-columns:1fr;}
  #quotes-root .bench-table td.bench-col-ext{min-width:0;}
  /* KT-144 phase D: the merge dialog's two cards stacked */
  #quotes-root .merge-sides{grid-template-columns:1fr;}
}
/* --- ≤560px: every grid to one column ------------------------------------ */
@container quotes (max-width: 560px){
  #quotes-root .grid.cols-2, #quotes-root .grid.cols-3, #quotes-root .grid.cols-4{grid-template-columns:1fr;}
  #quotes-root .rate-table-row{grid-template-columns:1fr;}
  #quotes-root .startfrom-row{grid-template-columns:1fr 1fr;}
}
/* --- ≤400px --------------------------------------------------------------- */
@container quotes (max-width: 400px){
  #quotes-root .rate-picker{grid-template-columns:1fr;}
  #quotes-root .toolbar-field{flex-basis:100%;}
}

/* the same rules keyed on the viewport, for browsers without @container */
@supports not (container-type: inline-size){
  @media (max-width:1024px){
    #quotes-root .wizard-body{grid-template-columns:1fr;}
    #quotes-root .wizard-sidebar{position:static;}
  }
  @media (max-width:900px){
    #quotes-root .grid.cols-2, #quotes-root .grid.cols-3, #quotes-root .grid.cols-4{grid-template-columns:1fr 1fr;}
    #quotes-root .std-text-row{grid-template-columns:1fr;}
    #quotes-root .std-text-translate{padding-top:0;flex-direction:row;}
    #quotes-root .ct-layout,#quotes-root .ct-titles,#quotes-root .ct-previews{grid-template-columns:1fr;}
  }
  @media (max-width:1100px){
    #quotes-root .settings-layout{grid-template-columns:1fr;gap:14px;}
    #quotes-root .settings-nav{flex-direction:row;gap:6px;overflow-x:auto;padding-bottom:6px;}
    #quotes-root .settings-nav button{flex:0 0 auto;padding:8px 14px;border-radius:999px;border:1px solid var(--border-strong);}
  }
  @media (max-width:760px){
    #quotes-root .rate-table-row{grid-template-columns:1fr 1fr;}
    #quotes-root .type-grid{grid-template-columns:1fr;}
  }
  @media (max-width:640px){
    #quotes-root .toolbar-field{flex:1 1 calc(50% - 5px);min-width:0;max-width:none;}
    #quotes-root .toolbar-field--search{flex-basis:100%;}
    #quotes-root .table-wrap--cards{border:0;background:transparent;overflow:visible;}
    #quotes-root .table-wrap--cards table{display:block;min-width:0;}
    #quotes-root .table-wrap--cards thead, #quotes-root .table-wrap--cards thead tr{display:block;}
    #quotes-root .table-wrap--cards thead th{display:none;}
    #quotes-root .table-wrap--cards thead th.col-check{display:flex;width:auto;padding:4px 14px 10px;background:transparent;border:0;}
    #quotes-root .table-wrap--cards tbody{display:flex;flex-direction:column;gap:10px;}
    #quotes-root .table-wrap--cards tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);}
    #quotes-root .table-wrap--cards tbody td{display:flex;flex-direction:column;gap:2px;padding:0;border:0;min-width:0;}
    #quotes-root .table-wrap--cards tbody td::before{content:attr(data-label);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);}
    #quotes-root .table-wrap--cards tbody td[data-label=""]::before{content:none;}
    #quotes-root .table-wrap--cards tbody td.col-check{grid-column:1 / -1;flex-direction:row;width:auto;text-align:left;}
    #quotes-root .table-wrap--cards tbody td.col-actions{grid-column:1 / -1;border-top:1px dashed var(--border);padding-top:8px;}
    #quotes-root .table-wrap--cards .row-actions{justify-content:flex-start;flex-wrap:wrap;}
    #quotes-root .step-pill{min-width:auto;padding:6px 6px 0;}
    #quotes-root .step-pill .step-name{display:none;}
    #quotes-root .wizard-footer-inner{padding:0;gap:8px;}
    #quotes-root .pl-picker-chips{flex-wrap:wrap;overflow:visible;}
    #quotes-root .pl-chip{flex:1 1 140px;max-width:none;}
    #quotes-root .rate-picker{grid-template-columns:repeat(2,1fr);}
    #quotes-root .paper-scroll{padding:12px;gap:12px;}
    #quotes-root .pl-overview-descs{grid-template-columns:1fr;}
    #quotes-root .pl-search{max-width:none;flex-basis:100%;}
    #quotes-root .crm-check{white-space:normal;}
    #quotes-root .crm-bulk .btn{flex:1 1 auto;}
    #quotes-root .deal-pick-head .task-link-input{max-width:none;}
    #quotes-root .deal-pick-row{max-width:none;}
    #quotes-root .ctw-signatures{grid-template-columns:1fr;}
    #quotes-root .ctw-actions .btn{flex:1 1 auto;}
    #quotes-root .table-wrap--cards.bench-wrap tbody tr{grid-template-columns:1fr;}
    #quotes-root .bench-table td.bench-col-ext{min-width:0;}
    #quotes-root .merge-sides{grid-template-columns:1fr;}
  }
  @media (max-width:560px){
    #quotes-root .grid.cols-2, #quotes-root .grid.cols-3, #quotes-root .grid.cols-4{grid-template-columns:1fr;}
    #quotes-root .rate-table-row{grid-template-columns:1fr;}
  }
  @media (max-width:400px){
    #quotes-root .rate-picker{grid-template-columns:1fr;}
  }
}

/* --- the modal layer: a <body> child, so viewport-keyed ------------------- */
@media (max-width:640px){
  #quotes-modal-root .modal-backdrop{padding:10px;align-items:flex-end;}
  #quotes-modal-root .modal-box{max-height:94vh;max-height:94dvh;}
  #quotes-modal-root .modal-head{padding:14px 16px;}
  #quotes-modal-root .modal-body{padding:16px;}
  #quotes-modal-root .modal-foot{padding:12px 16px;}
  #quotes-modal-root .modal-foot .btn{flex:1 1 auto;}
  #quotes-modal-root .rate-picker{grid-template-columns:repeat(2,1fr);}
  /* 0.78.0 — the Registro Imprese popup stacks its tables on a phone. */
  #quotes-modal-root .reg-hits td{display:block;padding:2px 0;border-top:0;}
  #quotes-modal-root .reg-hits tr{display:block;padding:8px 0;border-top:1px solid var(--border);}
  #quotes-modal-root .reg-hits td[style]{text-align:left !important;}
  #quotes-modal-root .reg-review thead{display:none;}
  #quotes-modal-root .reg-review tr{display:block;padding:8px 0;border-top:1px solid var(--border);}
  #quotes-modal-root .reg-review td{display:block;padding:2px 0;border-top:0;}
  #quotes-modal-root .reg-review td.reg-label,#quotes-modal-root .reg-review td.reg-pick{white-space:normal;}
  #quotes-modal-root .reg-review td.reg-cur:before,#quotes-modal-root .reg-review td.reg-next:before{content:attr(data-h) ": ";color:var(--ink-faint);}
}
@media (max-width:560px){
  #quotes-modal-root .grid.cols-2, #quotes-modal-root .grid.cols-3, #quotes-modal-root .grid.cols-4{grid-template-columns:1fr;}
}
@media (max-width:400px){
  #quotes-modal-root .rate-picker{grid-template-columns:1fr;}
}
/* the Listini editor: a full-screen sheet at the tablet breakpoint, its
   field grid two columns under 760px and one under 560px */
@media (max-width:900px){
  #quotes-modal-root .modal-backdrop--pl-editor{padding:0;align-items:stretch;}
  #quotes-modal-root .modal-box.pl-editor{width:100%;max-width:none;height:100%;max-height:none;border-radius:0;animation:none;}
}
@media (max-width:760px){
  #quotes-modal-root .pl-detail-head{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  #quotes-modal-root .pl-detail-head{grid-template-columns:1fr;}
  #quotes-modal-root .pl-editor .modal-foot .btn{flex:0 1 auto;}
  /* KT-137: the three fields stack on a phone; the events table keeps its
     three columns (label · price · cost), narrower. */
  #quotes-modal-root .pl-cm-grid, #quotes-modal-root .pl-cm-grid--margin{grid-template-columns:1fr;}
  #quotes-modal-root .pl-cm-trow{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:6px;}
}
/* wider than the phone breakpoint the modal grids still step down first */
@media (min-width:561px) and (max-width:900px){
  #quotes-modal-root .grid.cols-3, #quotes-modal-root .grid.cols-4{grid-template-columns:1fr 1fr;}
}

/* --- touch: no hover, so every target is at least 36px (chips 32px) ------- */
@media (hover:none){
  #quotes-root .btn, #quotes-modal-root .btn,
  #quotes-root .icon-btn, #quotes-modal-root .icon-btn,
  #quotes-root .lang-toggle button, #quotes-modal-root .lang-toggle button,
  #quotes-root .settings-nav button, #quotes-root .step-pill,
  #quotes-root .pl-row, #quotes-root .rate-opt, #quotes-modal-root .rate-opt,
  #quotes-root .type-card{min-height:36px;}
  #quotes-root .chip-btn, #quotes-modal-root .chip-btn, #quotes-root .pl-chip,
  #quotes-root .linked-task, #quotes-root .task-link-match, #quotes-root .contact-chip,
  #quotes-root .date-tag, #quotes-root .pl-tag{min-height:32px;}
  #quotes-root .linked-task-unlink, #quotes-root .pl-tag-x, #quotes-root .pl-search-clear, #quotes-root .contact-chip .chip-x,
  #quotes-root .date-tag button, #quotes-root .lineitem-head .drag-handle{min-width:32px;min-height:32px;display:inline-flex;align-items:center;justify-content:center;}
  #quotes-root .table-wrap table thead th{padding:14px 16px;}
}

/* buildings (0.35.0) */
/* BUILDINGS_PLAN.md §E "Quotes" / §G: the settings "Sedi" card is a read-only
   projection now (public/quotes.js settingsCompanyTab) — a muted variant of
   the existing .sede-card so it does not read as an editable form, and the
   plain-text values that replaced the old inputs line up with the rest of
   the .field grid without looking like disabled controls. */
#quotes-root .sede-card--readonly{background:var(--surface-2);}
#quotes-root .sede-card--readonly .field > div{font-size:13px;color:var(--ink);}

/* crm sync (0.38.0) */
/* CRM_SYNC_PLAN.md §H (Phase 5). The view is built out of the stylesheet's
   existing vocabulary — .shell/.page-head, .pdf-status, .banner, .chip-btn,
   .table-wrap, .card.card-pad — so this block only adds what has no
   equivalent yet: the source badge's third provenance, the inline checkbox
   labels the plan toolbar needs, the change/conflict cells that must stay
   readable inside a table row, and the preview's per-field override. */
#quotes-root .src-badge.hubspot{background:color-mix(in srgb, var(--brand-500) 14%, var(--surface));color:var(--brand-700);}
/* A checkbox + its label as ONE control, so "Includi non collegate" and
   "Consenti creazione" line up with the buttons beside them instead of
   wrapping mid-phrase. */
#quotes-root .crm-check{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-soft);white-space:nowrap;}
#quotes-root .crm-check input{margin:0;}
#quotes-root .crm-changes{font-size:12.5px;}
#quotes-root .crm-change{color:var(--ink-soft);overflow-wrap:anywhere;}
#quotes-root .crm-conflicts{color:var(--warning);font-weight:600;margin-top:2px;}
#quotes-root .crm-applied{margin-top:4px;font-size:12.5px;}
#quotes-root .crm-row-error{color:var(--danger);}
#quotes-root .crm-preview-row{margin-bottom:18px;}
#quotes-root .crm-preview-head{font-size:13px;margin-bottom:6px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
#quotes-root .crm-conflict-row{background:var(--warning-bg);}
/* The per-field "usa sorgente / ignora" pair: stacked under the outcome so a
   narrow screen never puts a radio on a line of its own, away from its label. */
#quotes-root .crm-override{display:flex;flex-direction:column;gap:2px;margin-top:4px;font-size:12px;}
#quotes-root .crm-override label{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
#quotes-root .crm-mapping .crm-arrow{text-align:center;color:var(--ink-faint);}
#quotes-root .crm-mapping select, #quotes-root .crm-mapping input[type=text]{min-width:150px;}
#quotes-root .crm-tabs{row-gap:8px;}
@container quotes (max-width: 640px){
  #quotes-root .crm-check{white-space:normal;}
  #quotes-root .crm-bulk .btn{flex:1 1 auto;}
}

/* quote deals (0.39.0) */
/* QUOTE_DEALS_PLAN.md §F (Phase 5). The block sits in the wizard HEAD right
   under .linked-tasks and borrows its grammar on purpose — one wrapping row of
   small facts, the label muted, everything else inline — so the head reads as
   ONE strip of facts about the document instead of two competing cards. Only
   what has no equivalent yet is added here: the snapshot's age (which must
   stay quiet but legible, it is the sentence that says "not live"), the two
   warning lines, and the inline picker's rows. */
#quotes-root .linked-deal{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:8px;font-size:13px;}
#quotes-root .linked-deal-label{color:var(--ink-faint);font-weight:600;}
#quotes-root .linked-deal-name{overflow-wrap:anywhere;}
#quotes-root .linked-deal-facts{color:var(--ink-soft);}
#quotes-root .linked-deal-open{font-size:12.5px;}
/* The age of the snapshot: never louder than the facts it dates. */
#quotes-root .linked-deal-when{color:var(--ink-faint);font-size:12px;}
#quotes-root .linked-deal-closed{background:var(--surface-2);color:var(--ink-soft);}
#quotes-root .linked-deal-warn{margin-top:4px;font-size:12.5px;color:var(--warning);font-weight:600;}
/* A difference to judge, not an error: warning-coloured text, ordinary weight,
   with the armed button on the same line. */
#quotes-root .linked-deal-mismatch{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:4px;font-size:12.5px;color:var(--warning);}
#quotes-root .linked-deal-hint{color:var(--ink-faint);font-size:12px;overflow-wrap:anywhere;}
#quotes-root .linked-deal-suggest{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:6px;padding:8px 10px;border:1px dashed var(--border);border-radius:8px;background:var(--surface-2);font-size:12.5px;}
#quotes-root .deal-pick{margin-top:8px;font-size:13px;}
#quotes-root .deal-pick-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
#quotes-root .deal-pick-head .task-link-input{max-width:340px;}
#quotes-root .deal-pick-matches{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:6px;}
#quotes-root .deal-pick-matches:empty{display:none;}
#quotes-root .deal-pick-section{margin-top:4px;color:var(--ink-faint);font-size:12px;font-weight:600;}
#quotes-root .deal-pick-row{display:block;width:100%;max-width:520px;padding:5px 10px;border:1px dashed var(--border);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-size:12.5px;line-height:1.45;text-align:left;white-space:normal;cursor:pointer;}
#quotes-root .deal-pick-row:hover,#quotes-root .deal-pick-row:focus-visible{border-style:solid;border-color:currentColor;outline:none;}
/* Muted, NOT hidden: linking a quote to the deal it really belongs to is right
   even after that deal was closed (§I decision c). */
#quotes-root .deal-pick-row--closed{color:var(--ink-faint);}
#quotes-root .deal-pick-facts{color:var(--ink-soft);}
#quotes-root .deal-pick-already{color:var(--warning);}
@container quotes (max-width: 640px){
  #quotes-root .deal-pick-head .task-link-input{max-width:none;}
  #quotes-root .deal-pick-row{max-width:none;}
}

/* quote deals — task-search experience (0.40.2): the deal matches are chips
   like .task-link-match; a company deal wears a tag, a closed one is muted. */
#quotes-root .deal-pick-src{font-size:11px;padding:1px 6px;border-radius:999px;background:var(--surface-2,rgba(0,0,0,.05));color:var(--muted,#6b7280);}
#quotes-root .deal-pick-row--closed{opacity:.6;}
#quotes-root .deal-pick-row .deal-pick-facts{font-size:12px;color:var(--muted,#6b7280);}
#quotes-root .deal-pick-row .deal-pick-already{font-size:12px;color:var(--warn,#b45309);}

/* ---- Contratti: the contract workflow manager tab (CONTRACTS_PLAN.md §3) ----
   Two columns like the Listini tab (the template list reuses .pl-list /
   .pl-row); the steps are a reorderable list, the step editor below it, the
   previews two printed "pages" side by side. */
#quotes-root .ct-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:22px;align-items:start;}
#quotes-root .ct-list-col,#quotes-root .ct-editor-col{min-width:0;}
#quotes-root .ct-template-list{margin-top:8px;}
#quotes-root .ct-badge{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);border:1px solid var(--border);border-radius:999px;padding:0 6px;line-height:15px;margin-left:6px;}
#quotes-root .ct-badge-on{color:var(--brand-900);border-color:var(--brand-900);}
#quotes-root .ct-template-head{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;}
#quotes-root .ct-template-head .row-actions{flex-wrap:wrap;justify-content:flex-start;}
#quotes-root .ct-step-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
#quotes-root .ct-steps{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);overflow:hidden;}
#quotes-root .ct-step-row{display:flex;align-items:center;gap:6px;padding:6px 8px;border-bottom:1px solid var(--border);border-left:3px solid transparent;}
#quotes-root .ct-step-row:last-child{border-bottom:0;}
#quotes-root .ct-step-row.selected{background:var(--surface-2);border-left-color:var(--brand-900);}
#quotes-root .ct-step-move{display:flex;flex-direction:column;gap:0;}
#quotes-root .ct-step-move .icon-btn{padding:0 4px;line-height:14px;font-size:11px;}
#quotes-root .ct-step-move .icon-btn[disabled]{opacity:.3;cursor:default;}
#quotes-root .ct-step-main{flex:1;min-width:0;display:flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;padding:4px 6px;}
#quotes-root .ct-step-main:hover{background:var(--surface-2);}
#quotes-root .ct-step-title{flex:1;min-width:0;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#quotes-root .ct-step-hint{font-size:11px;color:var(--warn,#b45309);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis;}
#quotes-root .ct-step-std{color:var(--ink-faint);font-size:12px;padding:0 6px;}
#quotes-root .ct-kind{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:4px;padding:0 5px;line-height:16px;border:1px solid var(--border);color:var(--ink-soft);white-space:nowrap;}
#quotes-root .ct-kind-system{color:var(--brand-900);border-color:var(--brand-900);}
#quotes-root .ct-kind-attachment{color:var(--ink-faint);}
#quotes-root .ct-editor{margin-top:6px;}
#quotes-root .ct-titles{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
#quotes-root .ct-check{display:inline-flex;align-items:center;gap:6px;font-size:13px;margin:8px 0;}
#quotes-root .ct-toolbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:6px;}
#quotes-root .ct-toolbar .ct-insert-field{max-width:220px;font-size:12px;}
#quotes-root .ct-hint{font-size:11px;font-weight:500;color:var(--warn,#b45309);margin-left:6px;}
#quotes-root .ct-images{margin-top:10px;}
#quotes-root .ct-images-title{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px;}
#quotes-root .ct-images-strip{display:flex;flex-wrap:wrap;gap:10px;}
#quotes-root .ct-image{width:120px;display:flex;flex-direction:column;gap:4px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px;background:var(--surface);}
#quotes-root .ct-image img{width:100%;height:70px;object-fit:contain;background:#fff;}
#quotes-root .ct-image-actions{display:flex;gap:4px;justify-content:space-between;}
#quotes-root .ct-previews{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
#quotes-root .ct-page{position:relative;background:#fff;color:#111;border:1px solid var(--border);box-shadow:0 1px 4px rgba(0,0,0,.08);padding:28px 26px;min-height:200px;font-size:12.5px;line-height:1.5;}
#quotes-root .ct-page-lang{position:absolute;top:8px;right:10px;font-size:10px;font-weight:700;color:#999;}
#quotes-root .ct-page-title{font-weight:700;font-size:13.5px;margin-bottom:12px;text-transform:uppercase;}
#quotes-root .ct-page-body{white-space:pre-wrap;}
#quotes-root .ct-page-body ul,#quotes-root .ct-page-body ol{margin:4px 0 4px 18px;white-space:normal;}
#quotes-root .ct-page-body .md-h1{font-weight:700;font-size:14px;margin:8px 0 4px;}
#quotes-root .ct-page-body .md-h2{font-weight:700;font-size:13px;margin:6px 0 3px;}
#quotes-root .ct-page-body .md-h3{font-weight:700;margin:4px 0 2px;}
#quotes-root .ct-page-body::after{content:"";display:block;clear:both;}
#quotes-root .ct-page-warn{margin-top:10px;font-size:11px;color:var(--warn,#b45309);}
#quotes-root .ct-attachment{margin-top:10px;}
#quotes-root .ct-attachments .ct-attachment, #quotes-root .ctw-attachment{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;}
#quotes-root .ct-attachment label.btn{cursor:pointer;}
/* 0.41.x: one slot per language (PDF or image), a thumbnail for an image. */
#quotes-root .ct-attachments{margin-top:10px;display:flex;flex-direction:column;gap:6px;}
#quotes-root .ct-attachments .ct-attachment{margin:0;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);}
#quotes-root .ct-attachments .pl-attachment-lang{min-width:64px;}
#quotes-root .ct-attachment-file{display:inline-flex;align-items:center;gap:4px;min-width:0;}
#quotes-root .ct-attachment-name{overflow-wrap:anywhere;}
#quotes-root .ct-attachment-thumb{display:block;flex-basis:100%;max-width:220px;max-height:140px;width:auto;height:auto;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;}
#quotes-root .ct-attachment-hint{margin:2px 0 0;}
#quotes-root .ct-signatory-default{max-width:420px;margin-bottom:12px;}

/* ---- Contratti P2 (CONTRACTS_PLAN.md §4 / §5.1) --------------------------
   The "richiede contratto" tag on a step-5 line card, the main-product radio
   under it, the hint under the list, the Listini row badge and the
   "Contratto" chip. Same vocabulary as .pl-tag / .pl-row-badge / .chip. */
#quotes-root .ct-tag{
  display:inline-flex;align-items:center;margin:3px 0 0 4px;padding:1px 8px;border-radius:999px;
  background:var(--warning-bg);color:var(--warning);font-size:11px;font-weight:600;
}
#quotes-root .ct-main{margin:8px 0 2px;font-weight:600;color:var(--ink-soft);}
#quotes-root .ct-main.auto{color:var(--ink-faint);}
#quotes-root .ct-main-hint{margin-top:10px;padding:8px 10px;border-radius:var(--radius-sm);background:var(--warning-bg);color:var(--warning);font-weight:600;}
#quotes-root .pl-row-badge--contract{color:var(--warning);border-color:var(--warning);}
#quotes-root .chip-contract, #quotes-modal-root .chip-contract{background:var(--warning-bg);color:var(--warning);}
#quotes-root .ct-create[disabled]{opacity:.45;cursor:not-allowed;}
#quotes-modal-root .pl-contract{margin-top:8px;max-width:420px;}
/* 0.90.0 — "Affittabile in esclusiva": a meeting room also rented monthly. */
#quotes-modal-root .pl-exclusive{margin-top:16px;padding-top:12px;border-top:1px solid var(--border);}
#quotes-modal-root .pl-exclusive-toggle{display:inline-flex;align-items:center;gap:8px;font-weight:600;cursor:pointer;}
#quotes-modal-root .pl-exclusive-group{margin-top:10px;padding:12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-2);}
#quotes-root .pl-exclusive-title, #quotes-modal-root .pl-exclusive-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:8px;}
#quotes-root .pl-overview-exclusive{margin-top:10px;padding-top:8px;border-top:1px dashed var(--border);}
#quotes-root .pl-row-badge--exclusive{color:var(--accent);border-color:var(--accent);}
#quotes-root .pl-chip .rn em.pl-chip-exclusive{color:var(--accent);text-transform:none;letter-spacing:0;}

/* ---- Contratti P3b: the contract wizard + the Contratti list (CONTRACTS_PLAN.md §5)
   The wizard reuses the quote wizard's chrome as-is (.wizard-head / .stepper /
   .step-pill / .wizard-body / .wizard-sidebar / .wizard-footer, .totals-card,
   .banner, .paper-scroll scaling) and the template editor's printed page
   (.ct-page). Only what has no equivalent yet is added: the status pill, the
   Order step's blocks, the services table, the "da compilare" marks, the
   preview pages' running head and signature blocks. */
#quotes-root .ctw-status, #quotes-modal-root .ctw-status{
  display:inline-block;vertical-align:middle;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;
  letter-spacing:.03em;white-space:nowrap;font-family:var(--font-body);
}
#quotes-root h1 .ctw-status{margin-left:8px;}
#quotes-root .ctw-status-draft, #quotes-modal-root .ctw-status-draft{background:var(--surface-3);color:var(--ink-soft);}
#quotes-root .ctw-status-issued, #quotes-modal-root .ctw-status-issued{background:#DCEAFB;color:#1D5A9E;}
#quotes-root .ctw-status-signed, #quotes-modal-root .ctw-status-signed{background:var(--success-bg);color:var(--success);}
#quotes-root .ctw-status-cancelled, #quotes-modal-root .ctw-status-cancelled{background:var(--danger-bg);color:var(--danger);}
/* KT-142 phase E: the approval pill (card title, list row), the card on the
   Anteprima, the list chips' pressed state. Same pill shape as .ctw-status. */
#quotes-root .ctwa-pill, #quotes-modal-root .ctwa-pill{
  display:inline-block;vertical-align:middle;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;
  letter-spacing:.03em;white-space:nowrap;font-family:var(--font-body);margin-left:6px;
}
#quotes-root .ctwa-pill--none, #quotes-modal-root .ctwa-pill--none{background:var(--surface-3);color:var(--ink-soft);}
#quotes-root .ctwa-pill--pending, #quotes-modal-root .ctwa-pill--pending{background:var(--warning-bg);color:var(--warning);}
#quotes-root .ctwa-pill--sent_back, #quotes-modal-root .ctwa-pill--sent_back{background:var(--danger-bg);color:var(--danger);}
#quotes-root .ctwa-pill--approved, #quotes-modal-root .ctwa-pill--approved{background:var(--success-bg);color:var(--success);}
#quotes-root .ctwa-card .ctwa-line{margin:4px 0;}
#quotes-root .ctwa-card .ctwa-muted, #quotes-root .ctwa-card .ctwa-hint{color:var(--ink-soft);font-size:12.5px;}
#quotes-root .ctwa-card .ctwa-hint{margin-left:6px;align-self:center;}
#quotes-root .ctwa-card .ctwa-sub{font-weight:700;margin:12px 0 4px;}
#quotes-root .ctwa-card .ctwa-checks-row{margin:4px 0;}
#quotes-root .ctwa-failed, #quotes-modal-root .ctwa-failed{margin:4px 0 4px 18px;padding:0;}
#quotes-root .chip-btn.ctwa-chip.active{background:var(--ink);color:var(--surface);border-color:var(--ink);}
/* The "Contratto" chip became a door: a button that still looks like the chip. */
#quotes-root button.chip-contract, #quotes-modal-root button.chip-contract{border:0;font:inherit;font-size:11px;cursor:pointer;line-height:inherit;}
#quotes-root button.chip-contract:hover{filter:brightness(.95);}
#quotes-root .ctw-list tbody tr.ctw-row{cursor:pointer;}
#quotes-root .ctw-list tbody tr.ctw-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
#quotes-root .ctw-readonly{align-items:center;}
#quotes-root .ctw-block{margin-top:18px;padding-top:14px;border-top:1px solid var(--border);}
#quotes-root .ctw-block:first-of-type{border-top:0;padding-top:0;}
#quotes-root .ctw-block-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;}
#quotes-root .ctw-block-title{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px;}
#quotes-root .ctw-block-head .ctw-block-title{margin-bottom:0;}
#quotes-root .ctw-value{font-size:13.5px;color:var(--ink);padding:6px 0;min-height:20px;overflow-wrap:anywhere;}
#quotes-root .ctw-fixes{margin-top:12px;padding:12px;border:1px dashed var(--warning);border-radius:var(--radius-md);background:var(--warning-bg);}
#quotes-root .ctw-to-fill{font-size:11px;font-weight:700;color:var(--warning);text-transform:uppercase;letter-spacing:.04em;margin-left:6px;}
#quotes-root .ctw-other-missing{margin-top:10px;font-size:12.5px;color:var(--ink-soft);}
#quotes-root .ctw-table-wrap{margin-top:4px;}
#quotes-root .ctw-table-wrap table{min-width:0;font-size:13px;}
#quotes-root .ctw-table thead th{padding:8px 12px;}
#quotes-root .ctw-table tbody td{padding:9px 12px;vertical-align:top;}
#quotes-root .ctw-table .num-money{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
#quotes-root .ctw-line-main td:first-child{border-left:3px solid var(--brand-900);}
#quotes-root .ctw-line-desc{font-size:12px;color:var(--ink-faint);margin-top:2px;white-space:pre-wrap;}
#quotes-root .ctw-tag-main{background:var(--brand-900);color:#fff;}
#quotes-root .ctw-tag-extra{background:var(--surface-3);color:var(--ink-soft);}
#quotes-root .ctw-amounts{border:1px solid var(--border);border-radius:var(--radius-md);padding:6px 14px;background:var(--surface-2);}
#quotes-root .ctw-amount-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:13.5px;color:var(--ink-soft);}
#quotes-root .ctw-amount-row .v{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink);}
#quotes-root .ctw-amount-row.grand{border-top:1px solid var(--border);font-weight:700;color:var(--ink);}
#quotes-root .ctw-amount-row.grand .v{color:var(--brand-900);font-size:15px;}
#quotes-root .link-btn{border:0;background:none;padding:0;color:var(--brand-700);font:inherit;font-size:11.5px;cursor:pointer;text-decoration:underline;}
#quotes-root .ctw-toolbar{margin-top:4px;}
#quotes-root .ctw-preview{margin-top:10px;}
#quotes-root .ctw-preview .ct-page{min-height:120px;}

/* ---- the contract text step: editor | preview (0.40.5) -------------------
   The one screen in the add-on somebody writes on for minutes at a time. Two
   panes side by side whenever there is room for two 360px tracks (auto-fit —
   no breakpoint to guess, the drawer and the sidebar are accounted for by the
   grid itself), one column under them; each pane is bounded
   and scrolls INSIDE itself, so the merge-field toolbar above the box and the
   printed page beside it never leave the screen while a long annex is edited.
   The box itself is monospaced (Markdown), roomy and vertically resizable. */
#quotes-root .ctw-split{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
  gap:18px;align-items:start;margin-top:10px;
}
#quotes-root .ctw-split-pane{min-width:0;display:flex;flex-direction:column;}
#quotes-root .ctw-split-editor .ctw-toolbar{margin:0 0 6px;}
#quotes-root .ctw-split-preview .section-title{margin-top:0;}
#quotes-root .ctw-split-preview .ctw-preview{margin-top:6px;max-height:66vh;overflow:auto;}
#quotes-root #ctw-body,#quotes-root #ctw-footnote,
#quotes-root #ct-body-it,#quotes-root #ct-body-en{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:13px;line-height:1.6;tab-size:2;resize:vertical;
}
#quotes-root #ctw-body{min-height:56vh;max-height:72vh;}
#quotes-root #ctw-footnote{min-height:120px;}
/* the admin template editor's two boxes and their printed pages */
#quotes-root #ct-body-it,#quotes-root #ct-body-en{min-height:44vh;max-height:64vh;}
#quotes-root .ct-previews .ct-preview{max-height:60vh;overflow:auto;}

@container quotes (max-width: 900px){
  #quotes-root #ctw-body{min-height:42vh;max-height:none;}
  #quotes-root #ct-body-it,#quotes-root #ct-body-en{min-height:34vh;max-height:none;}
  #quotes-root .ctw-split-preview .ctw-preview,
  #quotes-root .ct-previews .ct-preview{max-height:none;overflow:visible;}
}
@supports not (container-type: inline-size){
  @media (max-width:900px){
    #quotes-root #ctw-body{min-height:42vh;max-height:none;}
    #quotes-root #ct-body-it,#quotes-root #ct-body-en{min-height:34vh;max-height:none;}
    #quotes-root .ctw-split-preview .ctw-preview,
    #quotes-root .ct-previews .ct-preview{max-height:none;overflow:visible;}
  }
}
#quotes-root .ctw-footnote-page{padding:18px 20px;min-height:0;}
#quotes-root .ctw-lock{margin-bottom:10px;}
#quotes-root .ctw-img-placeholder{display:inline-block;padding:18px 28px;border:1px dashed #bbb;color:#888;font-size:11px;text-transform:uppercase;letter-spacing:.06em;background:#fafafa;margin:6px 0;}
#quotes-root .ctw-signed{margin:0 0 18px;}
#quotes-root .ctw-signed label.btn{cursor:pointer;}
#quotes-root .ctw-history{margin-top:6px;}
/* The preview pages: PAPER_CSS's .paper is a fixed A4 sheet — a contract
   page grows with its text instead (the PDF paginates server-side). */
#quotes-root .paper-scroll .paper.ctw-paper{height:auto;min-height:297mm;padding:18mm 16mm 16mm;position:relative;font-size:10.5px;line-height:1.5;}
#quotes-root .ctw-paper-head{display:flex;justify-content:space-between;font-size:8.5px;color:#8a938d;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid #e3e6e2;padding-bottom:3mm;margin-bottom:8mm;}
#quotes-root .ctw-paper-title{font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.03em;margin-bottom:6mm;color:#1A2420;}
#quotes-root .ctw-paper-body{white-space:pre-wrap;}
#quotes-root .ctw-paper-body table, #quotes-root .ctw-paper-body dl, #quotes-root .ctw-paper-body ul, #quotes-root .ctw-paper-body ol{white-space:normal;}
#quotes-root .ctw-paper .ctw-table-wrap{border:0;background:transparent;border-radius:0;margin:2mm 0 4mm;}
#quotes-root .ctw-paper .ctw-table{width:100%;border-collapse:collapse;font-size:9.5px;}
#quotes-root .ctw-paper .ctw-table th{text-align:left;font-size:8px;text-transform:uppercase;letter-spacing:.05em;color:#5B6459;border-bottom:1px solid #1A2420;padding:1.5mm 2mm;}
#quotes-root .ctw-paper .ctw-table td{border-bottom:1px solid #e3e6e2;padding:1.8mm 2mm;vertical-align:top;}
#quotes-root .ctw-paper .ct-tag{font-size:7.5px;margin:0 0 0 2mm;}
/* 0.41.x: the Stella33 letterhead on top of the Ordine page (the PDF's own):
   the company block LEFT, the sede Stella33 block RIGHT on the same level. */
#quotes-root .ctw-letterhead{display:flex;justify-content:space-between;align-items:flex-start;gap:6mm;margin:0 0 6mm;padding-bottom:3mm;border-bottom:1px solid #1A2420;}
#quotes-root .ctw-company{flex:1;min-width:0;}
#quotes-root .ctw-company-name{font-weight:700;font-size:12px;color:#1A2420;}
#quotes-root .ctw-company-meta{font-size:8.5px;line-height:1.45;color:#5B6459;margin-top:1mm;}
#quotes-root .ctw-block-sede{flex:0 0 auto;max-width:48%;text-align:right;}
#quotes-root .ctw-block-sede .ctw-order-h{margin-top:0;}
#quotes-root .ctw-block-sede .ctw-dl{grid-template-columns:1fr auto;}
/* 0.41.x: an attachment step's image — scaled in the step, a page in the preview. */
#quotes-root .ctw-attachment{align-items:flex-start;}
#quotes-root .ctw-attachment-img{display:block;max-width:100%;max-height:420px;width:auto;height:auto;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;flex-basis:100%;}
#quotes-root .ctw-attachment-page{display:block;max-width:100%;height:auto;margin:0 auto;}
/* 0.81.0 — Allegato B / D as their rasterized PDF pages in the contract Anteprima: FULL-BLEED like the 0.78.5 brochure pages (no padding, no head, no accent border), the A4 sheet kept, the raster fitted edge to edge, aspect kept and centred. */
#quotes-root .paper-scroll .paper.ctw-paper.ctw-attach-page{height:297mm;min-height:297mm;padding:0;border-top:0;display:flex;align-items:center;justify-content:center;overflow:hidden;}
#quotes-root .ctw-attach-page .ctw-attach-img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:center center;}
#quotes-root .ctw-attach-note{margin:8px 0 0;}
#quotes-root .ctw-attachment-paper{white-space:normal;}
#quotes-root .ctw-attachment-fallback{display:block;flex-basis:100%;font-size:12px;color:var(--warning);}
#quotes-root .ctw-paper .ctw-attachment-fallback{font-size:8.5px;}
#quotes-root .ctw-order-h{font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#5B6459;margin:4mm 0 1.5mm;}
#quotes-root .ctw-dl{display:grid;grid-template-columns:auto 1fr;gap:1mm 3mm;margin:0;font-size:9.5px;}
#quotes-root .ctw-dl dt{color:#5B6459;}
#quotes-root .ctw-dl dd{margin:0;color:#1A2420;overflow-wrap:anywhere;}
#quotes-root .ctw-order-footnote{margin-top:5mm;font-size:8.5px;color:#3a443f;}
#quotes-root .ctw-signatures{display:grid;grid-template-columns:1fr 1fr;gap:10mm;margin-top:14mm;}
#quotes-root .ctw-sign-label{font-size:8px;text-transform:uppercase;letter-spacing:.06em;color:#5B6459;}
#quotes-root .ctw-sign-name{font-size:10px;font-weight:600;margin:1mm 0 8mm;min-height:4mm;}
#quotes-root .ctw-sign-line{border-top:1px solid #1A2420;padding-top:1.5mm;font-size:8px;color:#8a938d;}
/* 0.47.0 / 0.47.1 — the cover, page 1 of an OFFICE ("Uffici Privati") or a
   MEMBERSHIP ("Membership: <prodotto>") contract's Anteprima; REDRAWN in
   0.84.0 for Simone's Stella design. Both kinds use these rules unchanged —
   only the subtitle's words differ.
   It is the same geometry the PDF prints (services/contract-paper.js
   COVER_CSS, itself the event quote's quote-engine PAPER_COVER_CSS, where
   the measurements off the design are explained): a FIXED 210x297 mm page
   with no padding and no accent border (the step papers grow with their
   text, this one must not); /img/cover-bg.jpg — the whole artwork, logo and
   copper bar included — stretched over it at inset 0; the title block
   19.05 mm from the left and 107.42 mm from the top, right under the copper
   bar. Title Poppins SemiBold 45pt #111C21 (33pt / 25.5pt clamped to four
   lines for the longer steps E.coverTitleSize picks), subtitle Poppins
   Light 24pt, black, 15px below. Same type sizes as the paper, so preview
   and PDF agree — which is also why the title says text-wrap:wrap: the
   #quotes-root headings are text-wrap:balance, and balanced lines would
   break the title where the PDF does not. */
#quotes-root .paper-scroll .paper.ctw-paper.ctw-cover{height:297mm;min-height:297mm;overflow:hidden;position:relative;border-top:0;padding:0;}
#quotes-root .ctw-cover .ctw-cover-bg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:0;}
#quotes-root .ctw-cover .ctw-cover-bg img{width:100%;height:100%;display:block;max-width:none;}
#quotes-root .ctw-cover .ctw-cover-titleblock{position:absolute;left:19.05mm;right:19.05mm;top:107.42mm;z-index:1;text-align:left;}
#quotes-root .ctw-cover .ctw-cover-title{font-family:'Poppins',sans-serif;font-size:45pt;font-weight:600;color:#111C21;line-height:1.2;letter-spacing:0;margin:0;overflow-wrap:anywhere;text-wrap:wrap;}
#quotes-root .ctw-cover .ctw-cover-title.ctw-cover-title--long{font-size:33pt;}
#quotes-root .ctw-cover .ctw-cover-title.ctw-cover-title--xlong{font-size:25.5pt;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;}
#quotes-root .ctw-cover .ctw-cover-sub{font-family:'Poppins',sans-serif;font-size:24pt;font-weight:300;color:#000;line-height:1.3;margin-top:15px;overflow-wrap:anywhere;}
/* KT-142 phase C (CONTRACT_APPROVAL_PLAN.md §8.3): the DRAFT watermark of the
   preview, on every page (steps and cover) while the wire says
   approval.watermark — the same flag, the same word (data-watermark: BOZZA /
   DRAFT by the contract's language) and the same look services/pdf-stamp.js
   stamps on the PDF: Helvetica bold, grey at 22 %, ~160 pt, centred along the
   A4 diagonal (atan(297/210) = 54.7°), ABOVE the content and click-through. */
#quotes-root .paper.ctw-paper.ctw-paper--draft::before{content:attr(data-watermark);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-54.7deg);font-family:Helvetica,Arial,sans-serif;font-weight:700;font-size:160pt;line-height:1;letter-spacing:0;color:rgba(115,115,115,.22);white-space:nowrap;pointer-events:none;z-index:3;user-select:none;}
@container quotes (max-width: 640px){
  #quotes-root .ctw-signatures{grid-template-columns:1fr;}
  #quotes-root .ctw-actions .btn{flex:1 1 auto;}
}
@media print{
  #quotes-root .paper-scroll .paper.ctw-paper{break-after:page;}
}

/* ---- 0.41.x: several main products, the fee per period, the periodicity
   table, merge fields in step titles, "Aggiorna dal modello" -------------- */
#quotes-root .ct-main-hint.ct-main-mixed{background:var(--danger-bg);color:var(--danger);}
#quotes-root .ctw-table-condensed table{font-size:13px;}
#quotes-root .ctw-monthly-equiv{font-size:11.5px;color:var(--ink-faint);padding:0 0 4px;}
#quotes-root .ctw-totals .ctw-monthly-equiv{text-align:right;margin-top:-4px;}
#quotes-root .ctw-paper .ctw-monthly-equiv{font-size:8.5px;}
#quotes-root .ctw-refresh{margin-top:12px;}
#quotes-root .ctw-refresh-hint{margin-top:6px;font-size:12px;color:var(--ink-soft);}
/* 0.41.x: the quote snapshot — the sidebar's main-products line, the
   "Aggiorna dal preventivo" button under "Aggiorna dal modello", the
   sidebar's "Elimina bozza", and the list row's trash on a draft. */
#quotes-root .ctw-mains{margin-top:8px;font-size:12px;color:var(--ink-soft);line-height:1.4;}
#quotes-root .ctw-mains-label{font-weight:700;}
#quotes-root .ctw-mains-list{color:var(--ink);}
#quotes-root .ctw-refresh-quote{margin-top:8px;}
#quotes-root .ctw-side-delete{margin-top:16px;padding-top:12px;border-top:1px solid var(--border);}
#quotes-root .ctw-side-delete .btn{color:var(--danger);}
#quotes-root .ctw-side-delete .btn.armed{color:#fff;}
#quotes-root .ctw-quote-changed .btn{align-self:flex-start;}
#quotes-root .ctw-list .col-actions{width:48px;text-align:right;}
#quotes-root .ctw-orphan{margin:0 0 10px;padding:6px 10px;border-radius:var(--radius-sm);background:var(--surface-3);color:var(--ink-faint);}
#quotes-root .ct-title-hint{margin:-4px 0 10px;font-size:12px;color:var(--ink-faint);}
#quotes-root .ct-periods{margin-top:16px;}
#quotes-root .ct-periods-wrap{margin-top:4px;}
#quotes-root .ct-periods-table{width:100%;border-collapse:collapse;font-size:13px;min-width:0;}
#quotes-root .ct-periods-table th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);padding:6px 8px;}
#quotes-root .ct-periods-table td{padding:4px 8px;vertical-align:middle;}
#quotes-root .ct-periods-table input{width:100%;min-width:90px;}
#quotes-root .ct-periods-table input.ct-period-months{width:80px;min-width:0;}
#quotes-root .ct-period-key{font-size:12px;}
#quotes-root .ct-period-hint{display:block;font-size:11px;color:var(--warning);}
#quotes-root .ct-period-actions{text-align:right;white-space:nowrap;}
#quotes-root .ct-period-lock{opacity:.6;cursor:help;}
#quotes-root .ct-period-add{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px;}
#quotes-root .ct-period-add input{max-width:220px;}

/* ---------------------------------------------------------------------------
   RICH TEXT — the Toast UI Editor instances of the Contratti bodies
   (public/vendor/toastui-editor/, mounted by quotes.js from afterPaint()).
   The library's own stylesheet is loaded BEFORE quotes.css by index.html, so
   the few rules here win: the editor has to sit inside the same two-pane
   layout the textarea sat in, and read in the app's own typeface.
   The <textarea> is never removed — it is the fallback and the value every
   caret helper reads — it is only hidden while an instance is mounted on it.
   --------------------------------------------------------------------------- */
#quotes-root textarea.rte-on{display:none;}
#quotes-root .rte-host:empty{display:none;}
#quotes-root .rte-host{margin-top:2px;min-width:0;}
#quotes-root .rte-host .toastui-editor-defaultUI{border-color:var(--border);border-radius:var(--radius-sm);}
#quotes-root .rte-host .toastui-editor-contents{font-family:inherit;font-size:13.5px;line-height:1.6;}
#quotes-root .rte-host .toastui-editor-contents table{width:100%;}
#quotes-root .rte-host .toastui-editor-md-container .toastui-editor-md-preview{font-family:inherit;}

/* GFM tables and ~~strike~~ in the printed preview pages: contract-text.js
   renders them as <table class="ct-table"> / <del>, and contract-paper.js
   carries the matching rules for the PDF. `.ct-page-body` is pre-wrap, which
   a table must not inherit. */
#quotes-root .ct-page-body .ct-table,#quotes-root .ctw-preview .ct-table{
  width:100%;border-collapse:collapse;margin:6px 0;font-size:12px;white-space:normal;
}
#quotes-root .ct-page-body .ct-table th,#quotes-root .ct-page-body .ct-table td,
#quotes-root .ctw-preview .ct-table th,#quotes-root .ctw-preview .ct-table td{
  border:1px solid #d9d5cc;padding:4px 6px;vertical-align:top;text-align:left;
}
#quotes-root .ct-page-body .ct-table th,#quotes-root .ctw-preview .ct-table th{background:#f4f1ea;font-weight:700;}
#quotes-root .ct-page-body del{text-decoration:line-through;color:#777;}
/* …and the other three constructs the rich-text toolbar can write:
   a thematic break, a blockquote and a link (contract-text.js emits
   .ct-hr / .ct-quote / .ct-link; contract-paper.js styles the PDF's). */
#quotes-root .ct-page-body .ct-hr,#quotes-root .ctw-preview .ct-hr{border:0;border-top:1px solid #d9d5cc;margin:8px 0;}
#quotes-root .ct-page-body .ct-quote,#quotes-root .ctw-preview .ct-quote{
  margin:6px 0;padding:2px 0 2px 10px;border-left:3px solid #d9d5cc;color:#444;white-space:normal;
}
#quotes-root .ct-page-body .ct-link,#quotes-root .ctw-preview .ct-link{color:#1a5fb4;text-decoration:underline;}

/* ---- "Crea deal…" (KT-106, QUOTE_DEAL_CREATE_PLAN.md §3): the inline create
   form under the deal picker, and Impostazioni → HubSpot → "Modulo deal". */
#quotes-root .deal-pick-head .btn{flex:none;}
#quotes-root .deal-create{margin-top:8px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);font-size:13px;max-width:720px;}
#quotes-root .deal-create-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;}
#quotes-root .deal-create-banner{margin:4px 0 8px;font-size:12.5px;}
#quotes-root .deal-create-grid{gap:10px 14px;margin-top:6px;}
#quotes-root .deal-create-field input[type="text"],#quotes-root .deal-create-field input[type="number"],
#quotes-root .deal-create-field input[type="date"],#quotes-root .deal-create-field select{width:100%;min-width:0;}
#quotes-root .deal-create-field.has-error input,#quotes-root .deal-create-field.has-error select{border-color:var(--danger);}
#quotes-root .deal-create-check{width:18px;height:18px;margin:6px 0;}
#quotes-root .deal-create-company{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:10px;}
#quotes-root .deal-create-company-name{overflow-wrap:anywhere;}
#quotes-root .deal-create-props{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);}
#quotes-root .deal-create-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
#quotes-root .hs-dealform-defaults{max-width:720px;}
#quotes-root .hs-dealform-scope,#quotes-root .hs-dealform-error{margin-bottom:10px;max-width:720px;}
#quotes-root .hs-dealform-list{display:flex;flex-direction:column;max-width:720px;max-height:380px;overflow:auto;margin-top:8px;padding:2px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);}
#quotes-root .hs-dealform-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:6px 0;border-bottom:1px solid var(--border);font-size:13px;}
#quotes-root .hs-dealform-row:last-child{border-bottom:none;}
#quotes-root .hs-dealform-row label{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;font-weight:500;}
#quotes-root .hs-dealform-row--off .hs-dealform-req{opacity:.5;}
#quotes-root .hs-dealform-name{color:var(--ink-faint);font-size:11.5px;}
#quotes-root .hs-dealform-count{color:var(--ink-faint);font-weight:500;}
/* THE CONTRACT TABLE (0.79.0) — P3 (CONTRACT_ANNEX_A_PLAN.md D17) built it
   for Allegato A; Simone (2026-10-08, the real contract's page 1 as the
   model) made it the layout of every page of facts. The Anteprima prints
   it on the Ordine (.ax-order, ContractText.orderTableHTML), Allegato A and
   B (their `##` headings, annexRowsHTML) and Allegato C (.ax-extras,
   extrasTableHTML): ONE rule set for the four, the twin of the paper's
   .ax-* rules in services/contract-paper.js — the grey label column
   (~31%, bold; the second label lines regular, "e-mail" italic), the value
   on white, 1px grey rules, a thicker rule (.ax-group) opening every extra
   after the first. Colours are fixed, not tokens: it is paper. */
#quotes-root .ax-table{display:table;width:100%;border-collapse:collapse;margin:4px 0;white-space:normal;font-size:9.5px;line-height:1.4;}
#quotes-root .ax-row{display:table-row;}
#quotes-root .ax-label,#quotes-root .ax-body{display:table-cell;vertical-align:top;border:1px solid #A6A6A6;padding:5px 7px;}
#quotes-root .ax-label{width:31%;font-weight:700;color:#1F1F1F;background:#CBCFC0;}
#quotes-root .ax-sub{display:block;font-weight:400;}
#quotes-root .ax-sub-em{font-style:italic;}
#quotes-root .ax-body{background:#fff;color:#1A2420;overflow-wrap:anywhere;}
#quotes-root .ax-row.ax-group>.ax-label,#quotes-root .ax-row.ax-group>.ax-body{border-top:2.5px solid #7F7F7F;}
#quotes-root .ax-body img.ct-img{max-width:100%;}
/* P3 (§4.4): the "Condizioni" panel above the Allegato A editor. */
#quotes-root .ctw-terms{border:1px solid var(--border);border-radius:var(--radius-sm,8px);background:var(--surface-2);padding:12px 14px;margin:0 0 14px;}
#quotes-root .ctw-terms-head{margin-bottom:8px;}
#quotes-root .ctw-terms-group{margin-top:10px;}
#quotes-root .ctw-terms-sub{font-weight:700;font-size:12.5px;margin-bottom:4px;}
#quotes-root .ctw-terms-opt{padding:4px 0;border-bottom:1px dashed var(--border);}
#quotes-root .ctw-terms-opt:last-of-type{border-bottom:none;}
#quotes-root .ctw-terms-params{gap:8px 12px;margin:6px 0 4px 24px;}
#quotes-root .ctw-terms-params input,#quotes-root .ctw-terms-params select,#quotes-root .ctw-terms input[type="text"]{width:100%;min-width:0;}
#quotes-root .ctw-terms-mode{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;}
#quotes-root .ctw-terms-prices{width:auto;border-collapse:collapse;font-size:12px;}
#quotes-root .ctw-terms-prices th,#quotes-root .ctw-terms-prices td{padding:2px 8px 2px 0;text-align:left;}
#quotes-root .ctw-terms-prices input{max-width:120px;}
#quotes-root .ctw-terms-warn{margin:8px 0 0;font-size:12px;color:var(--warn,#b45309);}
#quotes-root .ctw-terms-preview{margin-top:12px;padding-top:8px;border-top:1px solid var(--border);font-size:12px;color:var(--ink-soft,#555);overflow-wrap:anywhere;}
#quotes-root .ctw-terms-preview-label{font-weight:700;}

/* KT-144 phase C — "Consolida clienti" (CUSTOMER_MERGE_PLAN.md §5.2). Built
   from the existing vocabulary (.table-wrap--cards, .chip, .chip-btn,
   .search-box, .card); this block only adds the cell layout, the OfficeRnD
   "Con contratti" pill and the anomaly badge — all on existing tokens. At phone width the row becomes a card (the ≤640px rules
   above) with the three columns stacked. */
#quotes-root .bench-table td{vertical-align:top;}
#quotes-root .bench-table td.bench-col-ext{min-width:240px;}
#quotes-root .bench-hit{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 0;border-top:1px dashed var(--border);}
#quotes-root .bench-pill--active{background:var(--success-bg);color:var(--success);}
#quotes-root .bench-anomaly{background:var(--warning-bg);color:var(--warning);border:0;font:inherit;font-size:11px;font-weight:700;cursor:pointer;}
#quotes-root .bench-anomaly:hover{filter:brightness(.95);}
#quotes-root .bench-group{margin-bottom:12px;}
#quotes-root .bench-target{margin:8px 0;font-weight:700;color:var(--ink-soft);}

/* KT-144 phase D — the merge dialog (CUSTOMER_MERGE_PLAN.md §5.5): the two
   cards side by side (stacked at ≤640px, above), the card that stays marked,
   the field table's fixed OfficeRnD rows. Existing tokens only. */
#quotes-root .merge-sides{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:12px 0;}
#quotes-root .merge-side{border:1px solid var(--border);}
#quotes-root .merge-side--stays{border-color:var(--success);box-shadow:0 0 0 1px var(--success) inset;}
#quotes-root .merge-section{margin-top:16px;}
#quotes-root .merge-fields td{vertical-align:top;overflow-wrap:anywhere;}
#quotes-root .merge-fixed{background:var(--surface-2,transparent);color:var(--ink-soft);}
#quotes-root .merge-choice{display:flex;flex-wrap:wrap;gap:10px;}
#quotes-root .merge-choice label{display:inline-flex;align-items:center;gap:4px;}
/* 0.69.0 — the N-way merge (the cards above wrap as many per row as fit,
   220px each at least, so they stack at phone width): the steps strip, the
   shared selection bar and box, the selected row. Existing tokens only. */
#quotes-root .merge-steps{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;margin:10px 0 4px;padding:0;color:var(--ink-soft);font-size:13px;}
#quotes-root .merge-steps li.active{color:var(--ink);font-weight:700;}
#quotes-root .merge-who{font-weight:600;}
/* 0.70.1 — a value typed during the merge: the third option takes a whole
   line (the input stretches to it), the error red, the KT-141 warnings
   yellow. Existing tokens only. */
#quotes-root .merge-custom{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;flex-basis:100%;}
#quotes-root .merge-custom-input{flex:1 1 220px;min-width:0;max-width:100%;}
#quotes-root .merge-custom-note{flex-basis:100%;}
#quotes-root .merge-typed-err{font-size:12.5px;color:var(--danger,#b91c1c);font-weight:600;}
#quotes-root .merge-typed-warn{font-size:12.5px;color:var(--warning);background:var(--warning-bg);border-radius:6px;padding:2px 6px;}
#quotes-root .merge-typed-warn-note{font-weight:400;opacity:.85;}
#quotes-root .bench-selbar{flex-wrap:wrap;align-items:center;margin:0 0 12px;}
#quotes-root .bench-select{display:inline-flex;align-items:center;margin-right:6px;vertical-align:middle;}
#quotes-root .bench-select input{width:18px;height:18px;}
#quotes-root tr.is-selected td{background:var(--surface-2,transparent);}

/* 0.71.0 — Registro Imprese (openapi.com): the hits table and the status
   line — in the merge dialog's inline box (#quotes-root) and, since 0.78.0,
   in the popup (#quotes-modal-root, a <body> child: its phone rules sit in
   the viewport-keyed modal block below, not in a container query). */
#quotes-root .reg-hits, #quotes-modal-root .reg-hits{width:100%;border-collapse:collapse;font-size:13px;}
#quotes-root .reg-hits td, #quotes-modal-root .reg-hits td{padding:6px 8px;border-top:1px solid var(--border);vertical-align:middle;}
#quotes-root .reg-hits tr:first-child td, #quotes-modal-root .reg-hits tr:first-child td{border-top:0;}
#quotes-root .reg-company, #quotes-modal-root .reg-company{line-height:1.5;}
#quotes-root .reg-status-warn, #quotes-modal-root .reg-status-warn{color:var(--warn,#b45309);font-weight:600;}
#quotes-root .reg-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
/* 0.78.0 — the popup's review table: label / current / registry / checkbox. */
#quotes-modal-root .reg-popup .section-title{font-size:13px;font-weight:700;}
#quotes-modal-root .reg-review{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px;}
#quotes-modal-root .reg-review th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);padding:4px 8px;border-bottom:1px solid var(--border);}
#quotes-modal-root .reg-review td{padding:6px 8px;border-top:1px solid var(--border);vertical-align:top;overflow-wrap:anywhere;}
#quotes-modal-root .reg-review tr:first-child td{border-top:0;}
#quotes-modal-root .reg-review td.reg-label{font-weight:600;white-space:nowrap;}
#quotes-modal-root .reg-review td.reg-pick{white-space:nowrap;}
#quotes-modal-root .reg-review tr[data-reg-state="checked"] td.reg-next{font-weight:600;}
#quotes-modal-root .reg-review tr[data-reg-state="disabled"] td,#quotes-modal-root .reg-review tr[data-reg-state="same"] td,#quotes-modal-root .reg-review tr[data-reg-state="none"] td{color:var(--ink-faint);}
#quotes-modal-root .reg-review .reg-note{font-size:11.5px;color:var(--ink-soft);margin-left:6px;white-space:normal;}
#quotes-modal-root .reg-review input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);vertical-align:middle;}
@container quotes (max-width: 640px){
  #quotes-root .reg-hits td{display:block;padding:2px 0;border-top:0;}
  #quotes-root .reg-hits tr{display:block;padding:8px 0;border-top:1px solid var(--border);}
  #quotes-root .reg-hits td[style]{text-align:left !important;}
}
/* the @media twin of the rule above, for browsers without container
   queries (the same fallback discipline as the first @supports block). */
@supports not (container-type: inline-size){
  @media (max-width:640px){
    #quotes-root .reg-hits td{display:block;padding:2px 0;border-top:0;}
    #quotes-root .reg-hits tr{display:block;padding:8px 0;border-top:1px solid var(--border);}
    #quotes-root .reg-hits td[style]{text-align:left !important;}
  }
}