/* Monument Recovery design system.

   Rails port (2026-08-24), following the cut sheet and ZiaCon. Lifted out of
   public/monument-recovery/index.html, where it was two inline <style> blocks.

   SCOPED under .monument-recovery. This sheet carries .container, .btn, .card and
   .hero, all of which the shared header and footer also use; unscoped it would
   hand the site chrome the tool's design system.

   The @media print block sits ABOVE the wrapper because 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 rather than children. */

@media print{
  .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/tools/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 wrapper: a body selector cannot match from inside it. */
  body{background:#fff;color:#000}
  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. */
.mon-mapview{isolation:isolate}


.monument-recovery{
  /* Tokens cine.css does not define, derived from the cine palette. The static
     build got these from public/tools/shell.css. */
  --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;
  --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. */
  .hero .inner{padding-top:calc(var(--head-h, 76px) + 30px)}

  /* padding:0 is a reset, not a style: cine.css pads .card by 30px, which is
     right for the site's content cards and wrong for these, which pad their own
     head and body. Caught on the cut sheet by printing a PDF. */
  .card{padding:0}

  /* Card head and body. The static builds got these from public/tools/shell.css;
     the tool sheets only ever styled the print and .hint variants on top. Without
     them a card head is unstyled text and its label runs into its hint. */
  .card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
             padding:16px 22px;border-bottom:1px solid var(--line)}
  .card-head h2,.card-head h3{font-size:1.12rem}
  .card-head .lab{font-family:var(--head);font-size:.72rem;letter-spacing:.14em;
                  text-transform:uppercase;color:var(--gold-text);font-weight:700}
  .card-body{padding:22px}
  .fieldbox label{display:block;font-family:var(--body);font-weight:600;font-size:.72rem;
                  letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin-bottom:6px}

  /* 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}

  /* ===== "built on" + accordions + final CTA (canonical) ===== */
    .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{margin-top:26px}
    .final .tiny{display:block;margin-top:14px;font-size:.85rem;color:var(--ink3)}

    /* ===== tool-specific (monument recovery) ===== */
    .toolbar-top{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:26px;margin-bottom:18px}
    .toolbar-top .count{margin-left:auto;font-size:.85rem;color:var(--ink3);font-weight:600}
    .mon .tk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-bottom:none;border-radius:10px 10px 0 0;overflow:hidden}
    .tk-field{background:var(--card);padding:12px 15px;display:flex;flex-direction:column;gap:4px}
    .tk-field.wide{grid-column:span 2}
    .tk-field label{font-family:var(--head);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink2);font-weight:700}
    .tk-field input,.tk-field select{border:none;background:transparent;color:var(--ink);font:inherit;font-size:.95rem;font-weight:500;padding:2px 0;width:100%;border-bottom:1px solid transparent}
    .tk-field input:focus,.tk-field select:focus{outline:none;border-bottom-color:var(--gold)}
    .mon-lower{display:grid;grid-template-columns:1fr 220px;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:0;overflow:hidden}
    .mon-desc{background:var(--card);padding:12px 15px;display:flex;flex-direction:column;gap:5px}
    .mon-desc label{font-family:var(--head);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink2);font-weight:700}
    .mon-desc textarea{border:none;background:transparent;color:var(--ink);font:inherit;font-size:.95rem;resize:vertical;min-height:96px;width:100%}
    .mon-desc textarea:focus{outline:none}
    .photo-cell{background:var(--card);padding:12px 15px;display:flex;flex-direction:column;gap:8px}
    .photo-cell label{font-family:var(--head);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink2);font-weight:700}
    .photo-drop{border:1.5px dashed var(--line-strong);border-radius:8px;min-height:120px;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;color:var(--ink3);font-size:.8rem;text-align:center;padding:8px}
    .photo-drop:hover{border-color:var(--gold)}
    .photo-drop .ph-inner{display:flex;align-items:center;justify-content:center;width:100%}
    .photo-drop img{max-width:100%;max-height:220px;object-fit:contain;border-radius:4px;display:block}
    .linkbtn{border:none;background:none;color:var(--gold-text);font:inherit;font-family:var(--head);font-weight:700;font-size:.75rem;cursor:pointer;padding:0;text-align:left}
    .linkbtn:hover{text-decoration:underline}
    .pill{font-family:var(--head);font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid var(--accent-line);background:var(--accent-bg);color:var(--gold-text);white-space:nowrap}
    .tk-rm{border:none;background:transparent;color:var(--ink3);cursor:pointer;font-size:18px;line-height:1;padding:6px 10px;border-radius:6px}
    .tk-rm:hover{color:var(--gold-text);background:var(--accent-bg)}
    .empty{padding:40px 20px;text-align:center;color:var(--ink3);border:1px dashed var(--line-strong);border-radius:12px}
    .savednote{font-size:.78rem;color:var(--ink3);margin-top:14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1.5}
    .savednote a{color:var(--gold-text);font-family:var(--head);font-weight:700;text-decoration:none}
    .savednote a:hover{text-decoration:underline}
    .savednote svg{width:14px;height:14px;color:var(--gold-text);flex:none}
    .savednote.warn{color:var(--gold-text);font-weight:600}
    .microcta{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;font-size:.82rem;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-family:var(--head);font-weight:700;text-decoration:none;white-space:nowrap}
    .microcta a:hover{text-decoration:underline}
    /* per-monument map */
    .mon-map{border:1px solid var(--line);border-radius:0 0 10px 10px;overflow:hidden}
    .mon-maptools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--card)}
    .mon-maptools select{width:auto;background:var(--field);border:1px solid var(--line-strong);border-radius:8px;color:var(--ink);font-family:var(--head);font-weight:600;font-size:.8rem;padding:7px 11px;cursor:pointer}
    .mon-maptools .gps{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line-strong);border-radius:8px;color:var(--ink);font-family:var(--head);font-weight:700;font-size:.8rem;padding:7px 12px;cursor:pointer}
    .mon-maptools .gps:hover{border-color:var(--gold)}
    .mon-maptools .gps svg{width:14px;height:14px}
    .mon-maptools .readout{margin-left:auto;font-size:.78rem;color:var(--ink3);font-variant-numeric:tabular-nums}
    .mon-mapview{height:300px;width:100%;background:var(--alt)}
    .leaflet-container{font-family:inherit}

    /* firm letterhead builder (cut-sheet template) */
    .card-head .hint{font-size:.75rem;color:var(--ink3);font-weight:500;font-family:var(--body);text-transform:none;letter-spacing:0}
    .meta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-radius:0 0 14px 14px;overflow:hidden}
    .field{background:var(--card);padding:12px 16px;display:flex;flex-direction:column;gap:5px}
    .field.wide{grid-column:span 2}
    .field label{font-family:var(--head);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink2);font-weight:700}
    .field input,.field select{border:none;background:transparent;color:var(--ink);font:inherit;font-size:.95rem;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)}
    .logo-cell{background:var(--card);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(--field);text-align:center;color:var(--ink3);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-family:var(--head);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink2);font-weight:700}
    .logo-meta .sub{font-size:.72rem;color:var(--ink3)}
    @media(max-width:720px){.meta-grid{grid-template-columns:repeat(2,1fr)}}

    .print-only{display:none}
  

    @media(max-width:860px){ .nav-center{display:none} .head-inner{height:64px} .mon .tk-grid{grid-template-columns:repeat(2,1fr)} .mon-lower{grid-template-columns:1fr} }
    @media(max-width:720px){ .g3{grid-template-columns:1fr} }
  /* unified: PDF action moved to a pinned bottom bar (test) */
  .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-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:.6in .5in}
      .no-print{display:none!important}
      .print-only{display:block}
      :root{color-scheme:light}            /* print always renders as light, even if the tool is in dark theme */
      .tool{padding:0}
      .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}
      .ph-name{font-size:16px;font-weight:800;letter-spacing:.01em;line-height:1.15}
      .ph-contact{font-size:9.5px;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}
      .print-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 24px;margin-bottom:14px;font-size:11px}
      .print-meta div span{text-transform:uppercase;letter-spacing:.08em;font-size:9px;display:block}
      .print-meta div b{font-weight:600}
      /* A bordered box that runs past the bottom of a page prints as an open
         ended box: sides that run off page one and a stray closing edge on page
         two. A rule above each record separates them just as clearly and cannot
         break across pages. The inner field grid still carries its own borders. */
      .card{border:0!important;border-top:2px solid #000!important;border-radius:0!important;
            box-shadow:none;margin:0 0 14px;background:#fff}
      .card-head{break-inside:avoid;break-after:avoid}  /* keep the header with its grid */
      .mon .tk-grid,.tk-field,.mon-lower,.mon-desc,.photo-cell,.print-foot{break-inside:avoid}  /* keep the grid + fields + footer whole; a card may break only between grid and description, never leaving a blank page */
      .card-head{border-bottom:1px solid #000;padding:8px 12px}
      .card-head .lab,.card-head .lab .nm{color:#000}
      .card-body{padding:12px}
      .pill{border-color:#000;background:#fff;color:#000}
      .mon .tk-grid,.mon-lower{background:#fff !important;gap:0;border-top:1px solid #000;border-left:1px solid #000}
      .tk-field,.mon-desc,.photo-cell{background:#fff;border-right:1px solid #000;border-bottom:1px solid #000}
      .tk-field input,.tk-field select,.mon-desc textarea{color:#000;font-size:11px}
      .tk-field label,.mon-desc label,.photo-cell label{font-size:8px}
      .photo-drop{border:1px solid #000}
      .photo-drop.empty-drop{display:none}
      .linkbtn,.tk-rm{display:none!important}
      .savednote,.toolbar-top{display:none!important}
      /* A one-monument report was spilling the footer onto a second sheet that
         carried nothing but the QR and the send loop. The record itself fits;
         the footer missed by well under an inch. Rather than pin the footer to
         the page box (Chrome paints a fixed element on the last page only, and
         that is version-dependent), the sheet gives back the space it was
         reserving for input affordances a printed form does not need:
         the textarea's on-screen typing room and the photo drop-zone's
         placeholder box. A real photo still prints at its own size. */
      .mon-desc textarea{min-height:0;height:auto}
      .photo-drop{min-height:0;border:none;padding:0}
      .photo-cell:not(:has(img)){display:none}
      .print-foot{margin-top:12px;border-top:1px solid #999;padding-top:10px;display:flex;justify-content:center;align-items:center;gap:16px;font-size:10px;color:#333;break-inside:avoid}
      .print-foot .qr{width:48px;height:48px}
      .print-foot .datum-logo{height:26px}
      .print-foot .cta{max-width:42ch;text-align:left}
      .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}
      .datum-logo .dm-mark path{stroke:#000!important}
      .datum-logo .dm-mark circle{fill:#000!important}
    }
}