/* Tools design system.

   Rails port (2026-08-24), following the cut sheet, the 811 tracker and the
   monument form. Lifted out of public/tools/index.html.

   SCOPED under .tools-hub: this sheet carries .container, .btn, .card and
   .hero, all of which the shared header and footer also use.

   This tool does not print, so there is no @media print block to keep above
   the wrapper. If one is ever added, put it there: a body selector cannot
   match from inside the wrapper, which is how a sheet ends up printing grey. */

.tools-hub{
  /* Tokens cine.css does not define, derived from the cine palette. Came from
     public/tools/shell.css when this was a static file. */
  --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: 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. */
  .card{padding:0}
  .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}

  .tools{padding-block:44px 8px}
    .tools-group h2{font-family:var(--head);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text);font-weight:800;margin:30px 0 0}
    .tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:16px}
    .microcta{margin-top:16px;font-size:.9rem;color:var(--ink3)}
    .microcta a{color:var(--gold-text);font-family:var(--head);font-weight:700;text-decoration:none}
    .microcta a:hover{text-decoration:underline}
    .tool-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px;text-decoration:none;transition:border-color .15s,transform .07s,box-shadow .15s}
    .tool-card:hover{border-color:var(--gold);box-shadow:var(--shadow);transform:translateY(-2px)}
    .tool-card .ic{width:44px;height:44px;border-radius:11px;background:var(--accent-bg);color:var(--gold-text);display:flex;align-items:center;justify-content:center}
    .tool-card .ic svg{width:23px;height:23px}
    .tool-card h3{font-family:var(--head);font-weight:800;font-size:1.15rem;color:var(--ink);margin:15px 0 0;letter-spacing:-.01em}
    .tool-card p{color:var(--ink2);font-size:.92rem;margin:7px 0 0;flex:1}
    .tool-card .open{margin-top:16px;font-family:var(--head);font-weight:700;font-size:.85rem;color:var(--gold-text);display:inline-flex;align-items:center;gap:5px;transition:gap .15s}
    .tool-card:hover .open{gap:9px}

    /* ZiaMap system section */
    .system{background:var(--alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:64px;margin-top:44px}
    .system .eyebrow{color:var(--gold-text)}
    .system h2{font-family:var(--head);font-weight:800;font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.08;letter-spacing:-.02em;color:var(--ink);margin-top:12px;max-width:24ch}
    .system .lead{color:var(--ink2);font-size:1.08rem;margin-top:14px;max-width:56rem}
    .system .lead b{color:var(--ink)}

    .symbiosis{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;margin-top:40px}
    .node{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow);display:flex;flex-direction:column}
    .node .nlabel{font-family:var(--head);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text);font-weight:800;display:flex;align-items:center;gap:8px}
    .node .nlabel svg{width:16px;height:16px}
    .node .ncap{font-size:.9rem;color:var(--ink2);margin-top:auto;padding-top:16px}
    .node .ncap b{color:var(--ink)}
    .capture{margin-top:14px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--alt)}
    .capture .shot{height:116px;background:linear-gradient(150deg,#3b4a3f,#232a2b);position:relative}
    .capture .shot .pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-62%);color:var(--gold)}
    .capture .shot .pin svg{width:30px;height:30px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.55))}
    .capture .meta{display:flex;flex-wrap:wrap;gap:6px;padding:10px}
    .chip2{display:inline-flex;align-items:center;gap:5px;font-family:var(--head);font-size:.68rem;font-weight:700;color:var(--ink);background:var(--card);border:1px solid var(--line-strong);border-radius:999px;padding:4px 9px;font-variant-numeric:tabular-nums}
    .chip2 svg{width:12px;height:12px;color:var(--gold-text);flex:none}
    .link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:0 20px}
    .link .ring{width:52px;height:52px;border-radius:50%;background:var(--card);border:1px solid var(--gold);color:var(--gold-text);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
    .link .ring svg{width:24px;height:24px;animation:spin 6s linear infinite}
    .link .llabel{font-family:var(--head);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);font-weight:800;text-align:center;max-width:10ch;line-height:1.35}
    @keyframes spin{to{transform:rotate(360deg)}}
    @media(prefers-reduced-motion:reduce){.link .ring svg{animation:none}}
    .office{margin-top:14px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
    .office .minimap{height:80px;background:linear-gradient(135deg,#20304a,#182233);position:relative}
    .office .minimap .grid-h,.office .minimap .grid-v{position:absolute;background:rgba(255,255,255,.07)}
    .office .minimap .grid-h{left:0;right:0;top:40px;height:1px}
    .office .minimap .grid-v{top:0;bottom:0;left:44%;width:1px}
    .office .minimap .pin{position:absolute;top:28px;left:40%;transform:translate(-50%,-100%);color:var(--gold)}
    .office .minimap .pin svg{width:20px;height:20px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
    .office .row{display:flex;align-items:center;gap:10px;padding:11px 12px;border-top:1px solid var(--line);font-size:.8rem;color:var(--ink3)}
    .office .row .thumb{width:30px;height:30px;border-radius:6px;background:linear-gradient(150deg,#3b4a3f,#232a2b);flex:none}
    .office .row b{color:var(--ink);font-family:var(--head);font-weight:700}
    .carries{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
    .carry{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px}
    .carry .ic{width:40px;height:40px;border-radius:10px;background:var(--accent-bg);color:var(--gold-text);display:flex;align-items:center;justify-content:center}
    .carry .ic svg{width:21px;height:21px}
    .carry h4{font-family:var(--head);font-weight:800;font-size:1rem;color:var(--ink);margin:13px 0 0}
    .carry p{color:var(--ink2);font-size:.9rem;margin-top:6px}
    @media(max-width:860px){ .symbiosis{grid-template-columns:1fr} .link{flex-direction:row;padding:16px 0} .carries{grid-template-columns:1fr} }

    .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)}

    .site-foot{border-top:1px solid var(--line);padding-block:34px;background:var(--bg)}
    .foot-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
    .foot-inner .made{font-family:var(--head);font-weight:700;font-size:.9rem;color:var(--ink)}
    .foot-inner .made a{color:var(--gold-text);text-decoration:none}
    .foot-inner .made a:hover{text-decoration:underline}
    .foot-inner .fine{font-size:.8rem;color:var(--ink3)}

    @media(max-width:860px){ .nav-center{display:none} .head-inner{height:64px} .tool-grid{grid-template-columns:1fr} }
}