/* Cut sheet design system.
 *
 * Rails port (2026-08-24) lifted this out of public/cutsheet/index.html, where
 * it was two inline <style> blocks. As a real stylesheet it is fingerprinted
 * and cached, which the static file never was: public/ stamped a one year
 * Cache-Control on it, so an edited tool stayed stale in a visitor's browser
 * for a year.
 *
 * SCOPED, for the same reason ziacon.css is. This sheet carries .container,
 * .btn, .card and .hero, all of which the shared header and footer also use.
 * The static build got away with it because it shipped its own copy of the
 * chrome; inside the real layout, unscoping this would hand the site header
 * and footer the tool's design system.
 *
 * The @media print block sits ABOVE the wrapper on purpose. It has to reach
 * the site header, footer and skip link to keep them off a printed sheet, and
 * those are siblings of the wrapper, not children.
 */

@media print{
  /* Unscoped on purpose. See the note above. The chrome the layout provides
     must not print on a sheet a crew signs and hands to a contractor. */
  .topbar,.mobile-menu,.skip,.site-foot,.install-toast{display:none !important}

  /* A form control prints as a control unless it is told otherwise. */
  select{appearance:none !important;-webkit-appearance:none !important;
         background-image:none !important;padding-right:.4em !important}
  textarea{resize:none !important;overflow:hidden !important}
  input::-webkit-calendar-picker-indicator,
  input::-webkit-inner-spin-button,
  input::-webkit-outer-spin-button{display:none !important;-webkit-appearance:none !important}
  input::placeholder,textarea::placeholder{color:transparent !important}

  /* Set by app/javascript/cutsheet/print_prep.js, which knows what CSS cannot see. */
  input.print-blank::-webkit-datetime-edit{visibility:hidden}
  tr.row-blank{display:none !important}
  tr.row-blank td{border:0 !important;padding:0 !important;height:0 !important;
                  line-height:0 !important;font-size:0 !important}

  /* Hoisted out of the .cutsheet wrapper: a body selector cannot match from
     inside it. Forcing black is what keeps a printed sheet legible when the
     screen palette uses greys and gold. */
  body{background:#fff;color:#000;font-size:11.5px}
  body,body *{color:#000 !important}
  .pdfbar{display:none !important}
  body{padding-bottom:0 !important}
}

/* The sticky PDF bar is fixed, so the page clears it. Above the wrapper
   because a body selector cannot match from inside it. */
body{padding-bottom:78px}

/* The install toast is fixed to the bottom right by the layout, and these three
   tools pin a Download PDF bar to the bottom of the window. On any viewport wide
   enough to show the toast (1024px and up) it landed on top of the button and
   swallowed the click: elementFromPoint at the button's centre returned the
   toast, so the tool's primary action was not merely obscured, it was dead.

   Lifted clear of the bar rather than hidden, because the tools are top of
   funnel and the toast is the beta signup path. 88px of bar (64px min-height
   plus 12px padding either side) and the toast's own 20px gap.

   Above the wrapper on purpose: .install-toast is a sibling of the tool, not a
   child, so a rule inside the wrapper cannot reach it.
   The `body` prefix is not decoration. shared/_install_toast.html.erb carries
   its own inline <style> block, and the layout renders that partial after the
   page, so at equal specificity the inline rule wins on source order. One extra
   element in the selector settles it without an !important. */
body .install-toast{bottom:108px}

/* Leaflet gives its panes and controls z-index 400 to 1000, and .leaflet-container
   is position:relative with z-index auto, so it does not contain them: they compete
   with the rest of the page. The attribution control (z-index 1000) painted straight
   over the pinned Download PDF bar (z-index 40) whenever the map scrolled to the
   bottom of the window.

   Isolating the map container is the fix rather than out-bidding it. A z-index race
   only settles the control that was noticed; isolation contains every pane, control,
   popup and tooltip Leaflet has, now and later, and the map still stacks correctly
   against the page because the container itself keeps its normal flow position. */
#map{isolation:isolate}


.cutsheet{
  /* Tokens the tool needs that cine.css does not define. Derived from the cine
     palette, not invented alongside it. The static build got these from
     public/tools/shell.css; here they live with the tool that uses them. */
  --line-strong:#D8D7D2; --card:#ffffff; --field:#ffffff;
  --accent-bg:#FFFBEF; --accent-line:#F3DFA0;
  --shadow:0 1px 2px rgba(20,24,28,.04),0 10px 30px -18px rgba(20,24,28,.16);
  --shadow-lg:0 30px 70px -30px rgba(20,24,28,.35);
  --focus:#2C6FB0; --radius:14px;

  /* Cut and fill are meaning, not decoration: a grading crew reads them off the
     printed sheet, so they stay fixed rather than following the site palette. */
  --cut:#B0451E; --cut-bg:#FBEEE7;
  --fill:#2E6A4C; --fill-bg:#E9F2ec;
  --ongrade:#6E675B;

  /* Legacy names the tool interior was written against. Do not use in new rules. */
  --paper:var(--bg); --surface:var(--card); --muted:var(--ink2); --gold-ink:var(--gold-text);

  /* The topbar is fixed, so the tool's own hero has to clear it. Site pages get
     this from .phero; the cut sheet opens with its own band. */
  .hero .inner{padding-top:calc(var(--head-h, 76px) + 30px)}
  /* The tool body's own wrapper. Its screen rule was
     `.wrap{max-width:1040px;margin:0 auto;padding:28px 20px 80px}` and it was
     deleted with the forked shell in the 2026-08-23 restyle, which left every
     card running edge to edge while the hero and the footer stayed in the
     site's 1180px container.

     Restored at 1180 rather than the original 1040 so the cards line up with
     the hero above them and the CTA band below, now that the page sits inside
     the real site layout. Same horizontal geometry as cine.css's .container. */
  .wrap{max-width:1180px;margin-inline:auto;padding:28px 30px 80px}

  .tool{padding-block:40px}
  .card-head h2,.card-head h3{font-size:1.12rem}
  .num,.bigin,td.cf{font-variant-numeric:tabular-nums}

  /* An empty field on a printed sheet: a rule to write on, not a dash. */
  .blankline{display:inline-block;min-width:8ch;height:.9em;vertical-align:-.15em;
             border-bottom:1px solid #9A9A9A}

  /* Semantic tokens for this tool. Cut and fill are meaning, not decoration:
       they are read off a printed sheet by a grading crew, so they stay fixed
       rather than following the site palette. Light values only; the site has
       no dark theme. */
    /* ===== ZiaMap Cut Sheet Tool — prototype =====
       Self-contained. Grade-stake grid with auto cut/fill, print-to-PDF letterhead output.
       Column model matches a real signed grade sheet from Joseph C. Truxaw & Associates
       (Brian's firm): Pt# · Calc# · Station/Offset · Grade El. · Stake El. · Cut/Fill · Remarks.
       v2 2026-07-26: firm profile (branded letterhead), Leaflet map (ziacon basemaps),
       CSV import. v3 2026-07-26: reshaped to the Truxaw grade-sheet columns; the points
       table now actually prints (was mislabeled no-print). */

    /* ---- masthead ---- */
    .masthead { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:6px; }
    .wordmark { font-size:30px; letter-spacing:-.5px; line-height:1; display:flex; align-items:center; gap:2px; }
    .wordmark .zia { font-weight:800; font-style:italic; }
    .wordmark .map { font-weight:300; }
    .wordmark .tick { width:11px; height:11px; margin:0 4px 2px 0; background:var(--gold); border-radius:2px; transform:rotate(45deg); }
    .masthead-logo { color:var(--ink); margin-top:4px; }
    .masthead-logo .datum-logo { height:34px; width:auto; display:block; }
    .eyebrow { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; }
    .headbtns { display:flex; align-items:center; gap:10px; }
    .lead { font-size:15px; color:var(--muted); max-width:60ch; margin:8px 0 22px; }

    /* ---- cards ---- */
    /* padding:0 is a reset, not a style. cine.css pads .card by 30px for the
       site's own content cards; these are head-and-body compartments that do
       their own padding, and without this the printed grade table sits inset
       from the letterhead instead of flush with it. */
    .card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:0; }
    .card + .card { margin-top:18px; }
    .card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); }
    .card-head h2 { margin:0; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:700; }
    .card-head .hint { font-size:12px; color:var(--muted); }

    /* ---- meta / field grid (project + firm) ---- */
    .meta-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-radius:0 0 var(--radius) var(--radius); overflow:hidden; }
    .field { background:var(--surface); padding:12px 16px; display:flex; flex-direction:column; gap:5px; }
    .field.wide { grid-column:span 2; }
    .field label { font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; }
    .field input, .field select {
      border:none; background:transparent; color:var(--ink); font:inherit; font-size:15px; font-weight:500;
      padding:2px 0; width:100%; border-bottom:1px solid transparent;
    }
    .field input:focus, .field select:focus { outline:none; border-bottom-color:var(--gold); }
    .field select { cursor:pointer; }

    /* ---- firm logo cell ---- */
    .logo-cell { background:var(--surface); padding:12px 16px; display:flex; align-items:center; gap:14px; grid-column:span 2; }
    .logo-drop {
      width:104px; height:64px; flex:none; border:1.5px dashed var(--line-strong); border-radius:8px;
      display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden;
      background:var(--paper); text-align:center; color:var(--muted); font-size:11px; padding:6px;
    }
    .logo-drop:hover { border-color:var(--gold); }
    .logo-drop img { max-width:100%; max-height:100%; object-fit:contain; }
    .logo-meta { display:flex; flex-direction:column; gap:4px; }
    .logo-meta .k { font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; }
    .logo-meta .sub { font-size:12px; color:var(--muted); }
    .linkbtn { border:none; background:none; color:var(--focus); font:inherit; font-size:12.5px; cursor:pointer; padding:0; text-align:left; }
    .linkbtn:hover { text-decoration:underline; }

    /* ---- map ---- */
    #map { height:340px; width:100%; background:var(--paper); }
    .leaflet-container { font-family:inherit; }
    .maptools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 14px; border-bottom:1px solid var(--line); }
    .basemapsel { font:inherit; font-size:13px; font-weight:600; color:var(--ink); background:var(--surface); border:1px solid var(--line-strong); border-radius:8px; padding:8px 12px; cursor:pointer; }
    .maptools .spacer { flex:1; }
    .mapfoot { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px 16px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted); }
    .mapfoot .coord { font-variant-numeric:tabular-nums; }
    .chk { display:inline-flex; align-items:center; gap:7px; cursor:pointer; user-select:none; }
    .chk input { width:15px; height:15px; accent-color:var(--gold); }

    /* slider toggle (add-to-PDF switches) */
    .switch { position:relative; display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none; font-size:12.5px; color:var(--ink); font-weight:500; }
    .switch input { position:absolute; opacity:0; width:0; height:0; }
    .switch .track { width:38px; height:22px; border-radius:11px; background:var(--line-strong); transition:background .15s; flex:none; position:relative; }
    .switch .thumb { position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .15s; box-shadow:0 1px 2px rgba(0,0,0,.3); }
    .switch input:checked + .track { background:var(--gold); }
    .switch input:checked + .track .thumb { transform:translateX(16px); }
    .switch input:focus-visible + .track { outline:2px solid var(--focus); outline-offset:2px; }

    /* ---- plan-view plot ---- */
    #plotCard.empty { display:none; }
    #plotWrap { padding:10px 12px; }
    #plotSvg { width:100%; height:auto; display:block; background:var(--paper); border:1px solid var(--line); border-radius:8px; }
    .print-plotlabel { display:none; }

    /* ---- table ---- */
    .table-scroll { overflow-x:auto; }
    table.sheet { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
    table.sheet th { font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700; text-align:left; padding:11px 10px; border-bottom:1px solid var(--line-strong); white-space:nowrap; }
    table.sheet th.num, table.sheet td.num { text-align:right; }
    table.sheet td { padding:0; border-bottom:1px solid var(--line); }
    table.sheet tr:last-child td { border-bottom:none; }
    table.sheet input {
      border:none; background:transparent; color:var(--ink); font:inherit; font-size:14.5px;
      padding:11px 10px; width:100%; min-width:56px;
    }
    table.sheet td.num input { text-align:right; font-variant-numeric:tabular-nums; }
    table.sheet input:focus { outline:2px solid var(--focus); outline-offset:-2px; border-radius:3px; background:var(--paper); }
    td.cf { padding:11px 10px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }
    td.cf .cut { color:var(--cut); }
    td.cf .fill { color:var(--fill); }
    td.cf .on { color:var(--ongrade); font-weight:600; letter-spacing:.04em; }
    td.cf .empty { color:var(--line-strong); }
    .rm { border:none; background:transparent; color:var(--muted); cursor:pointer; font-size:17px; line-height:1; padding:8px 12px; border-radius:6px; }
    .rm:hover { color:var(--cut); background:var(--cut-bg); }
    col.c-rm { width:44px; }

    /* ---- toolbar / buttons ---- */
    .toolbar { display:flex; align-items:center; gap:10px; padding:12px 14px; border-top:1px solid var(--line); flex-wrap:wrap; }
    .btn { font:inherit; font-size:14px; font-weight:600; border-radius:8px; padding:9px 15px; cursor:pointer; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); display:inline-flex; align-items:center; gap:7px; }
    .btn:hover { border-color:var(--muted); }
    .btn:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
    .btn.primary { background:var(--gold); border-color:var(--gold); color:#1B1915; }
    .btn.primary:hover { filter:brightness(.95); }
    .btn.sm { font-size:13px; padding:8px 12px; }
    .csvhint { font-size:12px; color:var(--muted); padding:0 4px; }
    .spacer { flex:1; }

    /* ---- summary strip ---- */
    .summary { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-radius:0 0 var(--radius) var(--radius); overflow:hidden; }
    .stat { background:var(--surface); padding:14px 16px; }
    .stat .k { font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; }
    .stat .v { font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; margin-top:3px; }
    .stat .v.cut { color:var(--cut); } .stat .v.fill { color:var(--fill); }

    .basis-row { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12.5px; padding:0 2px; margin-top:14px; }
    .basis-row select { font:inherit; font-size:12.5px; color:var(--ink); background:var(--surface); border:1px solid var(--line-strong); border-radius:6px; padding:5px 8px; min-width:0; flex:1 1 auto; }
    .savednote { font-size:12.5px; color:var(--muted); margin-top:18px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; line-height:1.5; }
    .savednote svg { width:14px; height:14px; color:var(--gold); flex:none; }
    .savednote a { color:var(--gold-ink); font-weight:700; text-decoration:none; }
    .savednote a:hover { text-decoration:underline; }
    .microcta { display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; font-size:12.5px; line-height:1.5; color:var(--ink2); background:var(--alt); border:1px solid var(--line); border-radius:8px; padding:.65rem .9rem; }
    .microcta.top { margin:0 0 20px; }
    .microcta.bottom { margin:22px 0 0; }
    .microcta a { color:var(--gold-text); font-weight:700; text-decoration:none; white-space:nowrap; }
    .microcta a:hover { text-decoration:underline; }

    /* ---- print-only letterhead + footer ---- */
    .print-only { display:none; }
    .print-maplabel { display:none; }


    @media (max-width:720px) {
      .meta-grid, .summary { grid-template-columns:repeat(2,1fr); }
      .field.wide, .logo-cell { grid-column:span 2; }
      .wordmark { font-size:26px; }
    }
    @media (prefers-reduced-motion:no-preference) { .btn { transition:border-color .12s, filter .12s; } }

    /* ===== built-on + accordions + final CTA (shell, screen only) ===== */
    .explain { background:var(--alt); border-top:1px solid var(--line); padding-block:64px; }
    .explain .eyebrow { color:var(--gold-text); }
    .explain h2 { font-family:var(--head); font-weight:800; font-size:clamp(1.6rem,3vw,2.2rem); line-height:1.1; letter-spacing:-.02em; color:var(--ink); margin-top:12px; max-width:26ch; }
    .g3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:34px; }
    .xcard { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:26px; }
    .xcard .ic { width:42px; height:42px; border-radius:11px; background:var(--accent-bg); color:var(--gold-text); display:flex; align-items:center; justify-content:center; margin-bottom:15px; }
    .xcard .ic svg { width:22px; height:22px; }
    .xcard h3 { font-family:var(--head); font-weight:700; font-size:1.05rem; color:var(--ink); margin:0; }
    .xcard p { color:var(--ink2); margin:8px 0 0; font-size:.94rem; }
    .accstack { max-width:860px; margin:38px auto 0; }
    details.accp { border-top:1px solid var(--line); }
    details.accp:last-child { border-bottom:1px solid var(--line); }
    details.accp > summary { display:flex; align-items:center; gap:12px; padding:22px 2px; list-style:none; cursor:pointer; user-select:none; }
    details.accp > summary::-webkit-details-marker { display:none; }
    details.accp > summary h3 { margin:0; font-family:var(--head); font-weight:700; font-size:1.02rem; color:var(--ink); }
    .chev { margin-left:auto; width:20px; height:20px; color:var(--ink3); transition:transform .2s; flex:none; }
    details[open] > summary .chev { transform:rotate(180deg); }
    summary:hover .chev { color:var(--ink); }
    .accp-body { padding:0 2px 26px; color:var(--ink2); font-size:.95rem; }
    .accp-body p { margin:0 0 10px; }
    .accp-body ul { list-style:none; display:flex; flex-direction:column; gap:11px; margin:0; padding:0; }
    .accp-body li { position:relative; padding-left:22px; font-size:.93rem; color:var(--ink2); }
    .accp-body li::before { content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:2px; background:var(--gold); transform:rotate(45deg); }
    .accp-body li b, .accp-body p b { color:var(--ink); }
    .final { text-align:center; padding-block:74px; }
    .final .badge { width:52px; height:52px; border-radius:14px; background:var(--gold); color:#141518; display:flex; align-items:center; justify-content:center; margin:0 auto 22px; box-shadow:var(--shadow); }
    .final .badge svg { width:26px; height:26px; }
    .final h2 { font-family:var(--head); font-weight:800; font-size:clamp(1.6rem,3vw,2.2rem); line-height:1.1; letter-spacing:-.02em; color:var(--ink); max-width:24ch; margin:0 auto; }
    .final p { color:var(--ink2); margin-top:16px; font-size:1.06rem; max-width:38rem; margin-inline:auto; }
    .final .btn.cta { margin-top:26px; background:var(--gold); border-color:var(--gold); color:#141518; font-family:var(--head); font-weight:700; padding:.85rem 1.6rem; border-radius:8px; text-decoration:none; }
    .final .btn.cta:hover { background:var(--gold-hover); filter:none; }
    .final .tiny { display:block; margin-top:14px; font-size:.85rem; color:var(--ink3); }
    @media (max-width:720px) { .g3 { grid-template-columns:1fr; } }
  .pdfbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--bg);border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(0,0,0,.14)}
  .pdfbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding-block:12px}
  .pdfbar-actions{display:flex;align-items:center;gap:18px}
  .pdfbar-actions .switch{white-space:nowrap}
  @media (max-width:560px){
    /* The label is the first thing to go: the switch and the button are what the
       bar is for, and at this width they need the room. */
    .pdfbar-inner .pdfbar-label{display:none}
    .pdfbar-actions{gap:12px}
  }
  .pdfbar-label{font-family:var(--head);font-weight:700;color:var(--ink);font-size:1rem}
  .head-right .login:hover{color:var(--gold)}

    @media print {
      @page { size:letter; margin:0.55in 0.5in; }
      :root { color-scheme:light; }              /* print as light even if the tool is in dark theme */
      .wrap { max-width:none; padding:0; }
      .no-print { display:none !important; }
      .print-only { display:block; }
      .card, .card + .card { border:none; box-shadow:none; margin:0; background:#fff; }
      .card-head { display:none; }
      .meta-grid { display:block; background:none; margin:0 0 10px; }

      /* firm letterhead */
      .print-head { display:flex; align-items:flex-start; justify-content:space-between; border-bottom:2px solid #000; padding-bottom:9px; margin-bottom:12px; gap:18px; }
      .ph-firm { display:flex; gap:11px; align-items:flex-start; }
      .ph-logo { max-height:54px; max-width:190px; object-fit:contain; }
      .ph-firm .datum-logo { height:46px; width:auto; color:#000; }
      .ph-firm .wordmark { font-size:22px; color:#000; }
      .ph-firm .wordmark .tick { background:#000; }
      .ph-name { font-size:16px; font-weight:800; letter-spacing:.01em; line-height:1.15; }
      .ph-contact { font-size:9.5px; color:#333; line-height:1.55; margin-top:3px; max-width:34ch; }
      .doc-title { text-align:right; flex:none; }
      .doc-title .t { font-size:15px; font-weight:800; letter-spacing:.02em; }
      .doc-title .s { font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:#444; }

      .print-meta { display:grid; grid-template-columns:repeat(3,1fr); gap:4px 24px; margin-bottom:14px; font-size:11px; }
      .print-meta div span { color:#555; text-transform:uppercase; letter-spacing:.08em; font-size:9px; display:block; }
      .print-meta div b { font-weight:600; }

      /* optional location map on the sheet */
      #mapCard { display:none; }
      body.mapprint #mapCard { display:block; border:none; box-shadow:none; margin:0 0 12px; page-break-inside:avoid; }
      body.mapprint #mapCard .card-head,
      body.mapprint #mapCard .maptools,
      body.mapprint #mapCard .mapfoot { display:none !important; }
      body.mapprint #map { height:2.05in !important; border:1px solid #000; }
      body.mapprint .print-maplabel { display:block; font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:#555; margin:0 0 3px; }

      /* plan-view plot (vector, prints clean) */
      #plotCard { display:none; }
      body.plotprint #plotCard:not(.empty) { display:block; border:none; box-shadow:none; margin:12px 0 0; page-break-inside:avoid; }
      body.plotprint #plotCard .card-head, body.plotprint #plotCard .maptools { display:none !important; }
      body.plotprint #plotWrap { padding:0; }
      body.plotprint #plotSvg { border:1px solid #000; }
      body.plotprint .print-plotlabel { display:block; font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:#555; margin:0 0 3px; }

      /* the grade-sheet table prints */
      #pointsCard { page-break-inside:auto; }
      /* The bottom edge rides on the last printed row, not on the table, so
         dropping the spare row at the end cannot leave the box hanging open. */
      table.sheet { border:1px solid #000; border-bottom:0; }
      table.sheet tr.row-last td { border-bottom:1px solid #000 !important; }
      table.sheet th { color:#000; border-bottom:1.5px solid #000; padding:5px 6px; font-size:9px; }
      table.sheet td { border-bottom:1px solid #bbb; }
      table.sheet input { padding:5px 6px; font-size:10.5px; color:#000; }
      td.cf { padding:5px 6px; color:#000 !important; }
      td.cf .cut, td.cf .fill, td.cf .on { color:#000 !important; }
      table.sheet th:last-child, table.sheet td:last-child { display:none; }  /* hide remove-button column */
      .table-scroll { overflow:visible; }

      .print-summary { margin-top:12px; display:flex; gap:28px; font-size:11px; border-top:1px solid #000; padding-top:8px; }
      .print-summary b { font-weight:700; }
      .print-foot { margin-top:26px; border-top:1px solid #999; padding-top:12px; display:flex; justify-content:center; align-items:center; gap:16px; font-size:10px; color:#333; }
      .print-foot .cta { max-width:42ch; text-align:left; }
      .print-foot .cta b { color:#000; }
      .print-foot .qr { width:58px; height:58px; flex:none; display:block; }
      .print-foot .qr img { display:block; width:100%; height:100%; image-rendering:pixelated; }
      .print-foot .datum-logo { height:30px; width:auto; display:block; color:#000; }
      /* datum mark prints black for B&W crispness (gold on screen) */
      .datum-logo .dm-mark path { stroke:#000 !important; }
      .datum-logo .dm-mark circle { fill:#000 !important; }
      /* keep the blank trailing row from printing its input placeholders */
      .sheet input::placeholder { color:transparent !important; }
    }
}