/* Locate Tracker design system.

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

   SCOPED under .locate-tracker. 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}

.locate-tracker{
  /* 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}

  /* Utility-response status colours. Meaning, not decoration: a crew reads these
     off the printed locate log, and app.js names them in RSP_COLOR, so they are
     referenced from JavaScript rather than from this sheet. Light values only. */
  --rsp-ok:#2E6A4C; --rsp-caution:#9A7100; --rsp-wait:#C0C4CA; --rsp-late:#B0451E;

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

  /* Utility-response status colours. Meaning, not decoration: a crew reads
       these off the printed locate log. Light values only. */
    :root{--rsp-ok:#2E6A4C;--rsp-caution:#9A7100;--rsp-wait:#C0C4CA;--rsp-late:#B0451E}
    /* ===== "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 (811 locate tracker) ===== */
    .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}
    .tk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;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)}
    .tk-note{font-size:.72rem;color:var(--ink3)}
    .tk-note.warn{color:var(--gold-text);font-weight:700}
    .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)}
    .rsp-wrap{margin-top:18px}
    .rsp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
    .rsp-head h4{font-family:var(--head);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);font-weight:800;margin:0}
    .rsp-sum{font-size:.8rem;color:var(--ink3);font-weight:600}
    .rsp-sum b{color:var(--ink)}
    .rsp-scroll{overflow-x:auto}
    table.rsp{width:100%;border-collapse:collapse}
    table.rsp th{font-family:var(--head);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);font-weight:800;text-align:left;padding:8px 10px;border-bottom:1px solid var(--line-strong);white-space:nowrap}
    table.rsp td{padding:0;border-bottom:1px solid var(--line)}
    table.rsp tr:last-child td{border-bottom:none}
    table.rsp input,table.rsp select{border:none;background:transparent;color:var(--ink);font:inherit;font-size:.9rem;padding:9px 10px;width:100%}
    table.rsp input:focus,table.rsp select:focus{outline:2px solid var(--gold);outline-offset:-2px;border-radius:4px}
    .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:middle;background:var(--line-strong)}
    .dot.on{background:var(--gold)}
    .rsp .rm{border:none;background:transparent;color:var(--ink3);cursor:pointer;font-size:15px;padding:8px 12px}
    .rsp .rm:hover{color:var(--gold-text)}
    .rsp-add{margin-top:10px}
    .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)}
    .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}

    /* 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)}
    .linkbtn{border:none;background:none;color:var(--gold-text);font:inherit;font-family:var(--head);font-weight:700;font-size:.72rem;cursor:pointer;padding:0;text-align:left}
    .linkbtn:hover{text-decoration:underline}
    @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} .tk-grid{grid-template-columns:repeat(2,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}
      .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{border-bottom:1px solid #000;padding:8px 12px;break-inside:avoid;break-after:avoid}
      .card-head .lab,.card-head .lab .tno{color:#000}
      .card-body{padding:12px}
      .pill{border-color:#000;background:#fff;color:#000}
      .tk-grid{background:#fff !important;gap:0;border-top:1px solid #000;border-left:1px solid #000;break-inside:avoid}
      .tk-field{background:#fff;padding:6px 10px;border-right:1px solid #000;border-bottom:1px solid #000;break-inside:avoid}
      .tk-field input,.tk-field select{color:#000;font-size:11px}
      .tk-field label{font-size:8px}
      table.rsp th{color:#000;border-color:#000;font-size:8px;padding:4px 8px}
      table.rsp td{border-color:#999}
      table.rsp tr{break-inside:avoid}
      table.rsp input,table.rsp select{color:#000;font-size:10px;padding:4px 8px}
      .rsp .rm,.dot{display:none!important}
      .savednote,.rsp-add,.tk-rm{display:none!important}
      .print-foot{margin-top:22px;border-top:1px solid #999;padding-top:12px;display:flex;justify-content:center;align-items:center;gap:16px;font-size:10px;color:#333;break-inside:avoid}
      .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}
    }
}