/* ZiaCon design system.
 *
 * Port step 3 (2026-08-20) lifted this out of the page. It was 33 KB of inline
 * style rules in the prototype HTML build, then in app/views/ziacon/show.html.erb
 * after step 2. As a real stylesheet it is fingerprinted and cached, which the
 * page itself never can be: /ziacon varies by visitor geo, so it ships
 * "private, must-revalidate" and is re-fetched every visit.
 *
 * SCOPED. Everything below the wrapper is nested under .ziacon, because this
 * sheet carries .container, .btn, .card, .brand, .head-inner, .nav-center and
 * .site-foot, all of which the shared header and footer also use. Before step 2
 * the controller injected two blocks of counter-CSS to keep them apart. Nesting
 * is what replaced that, and it is not optional: unscope this and the site
 * chrome takes on the tool's design system.
 *
 * Five rules sit ABOVE the wrapper because they cannot work inside it. Four
 * target html/body. The fifth is .print-hide, which markPrintChain stamps on the
 * report's siblings all the way up to document.body: with the tool inside the
 * real layout those siblings are the site header, footer and install toast, so
 * scoping that rule would start printing site chrome onto a survey report.
 *
 * 37 dead rules were dropped here (a retired promo ribbon, a theme toggle, an
 * older two-column report, an older grid-factors panel). Each was verified
 * unreachable: its class is named nowhere in the markup or in any script, and
 * nothing in ZiaCon builds a class name by concatenation.
 */

@media print{
  @page{margin:14mm}
  /* Unscoped on purpose. See the note above. */
  .print-hide{display:none !important}
  html,body{background:#fff !important;height:auto !important}
  body{padding-top:0 !important;margin:0 !important}
}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto !important}}

.ziacon{
  &{
    --bg:#ffffff; --alt:#F6F5F2; --ink:#14181C; --ink2:#5B6570; --ink3:#646B73;
    --gold:#F0B100; --gold-hover:#FFBE1A; --gold-text:#8F6900;
    --line:#E7E7E4; --line-strong:#D8D7D2; --card:#ffffff; --field:#ffffff;
    --accent-bg:#FFFBEF; --accent-line:#F3DFA0;
    /* The one non-brand colour ZiaCon uses: bad input, a failed row, a batch error.
       Not theme.css's --error (#b91c1c): that lives in a stylesheet this page does not
       load, and it is a different red, so borrowing it would be a visual change dressed
       up as a cleanup. Same value as the four hard-coded uses it replaces. */
    --danger:#C0392B;
    --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);
  }
  &,*{box-sizing:border-box;margin:0;padding:0}
  &{background:var(--bg);color:var(--ink2);font-family:Barlow,Arial,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.6}
  h1,h2,h3,h4,.eyebrow,.btn,.nav-center a,.tab{font-family:'Zilla Slab',Arial,sans-serif}
  h1{font-weight:800;font-size:clamp(2.4rem,5vw,3.7rem);line-height:1.02;letter-spacing:-.028em;color:var(--ink)}
  h2{font-weight:800;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
  h3{font-weight:700;font-size:1.1rem;color:var(--ink)}
  a{color:inherit}
  .container{max-width:1120px;margin-inline:auto;padding-inline:26px}
  .eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text)}

  /* white-space:normal overrides cine.css's site-wide .btn{white-space:nowrap}, scoped to ZiaCon.
     At 200% text the "See what ZiaMap does" CTA was 432px wide and could not break, which alone
     pushed the document to 459px in a 375px viewport: horizontal scrolling to read the page,
     failing WCAG 1.4.4 and 1.4.10. Short labels still do not wrap, because they fit. */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--gold);color:#141518;font-weight:700;font-size:.95rem;padding:.8rem 1.5rem;border-radius:8px;text-decoration:none;border:none;cursor:pointer;transition:background .15s,transform .04s;white-space:normal;text-align:center;max-width:100%}
  .btn:hover{background:var(--gold-hover)}
  .btn:active{transform:translateY(1px)}
  .btn.ghost{background:transparent;border:1.5px solid var(--line-strong);color:var(--ink)}
  .btn.ghost:hover{border-color:var(--ink3);background:transparent}
  .btn.sm{padding:.5rem .85rem;min-height:44px;font-size:.82rem;border-radius:7px}


  .site-head{position:relative;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
  .head-inner{position:relative;display:flex;align-items:center;height:74px;gap:16px}
  .brand{display:flex;align-items:center;text-decoration:none;gap:0}
  .nav-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:34px;align-items:center}
  .nav-center a{position:relative;font-weight:600;font-size:1rem;color:var(--ink);text-decoration:none;padding:6px 2px;border-bottom:2.5px solid transparent;transition:border-color .15s}
  .nav-center a:hover,.nav-center a.active{border-bottom-color:var(--gold)}
  .head-right{margin-left:auto;display:flex;align-items:center;gap:14px}

  .hero{background:var(--alt);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
  .hero::before{content:"";position:absolute;top:-160px;right:-120px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(240,177,0,.16),transparent 62%);pointer-events:none}
  .hero .inner{position:relative;padding-block:30px;max-width:770px}
  .hero .eyebrow{display:block;margin-bottom:9px}
  .hero h1 .tm{font-size:.42em;vertical-align:top;font-weight:700;color:var(--ink2);letter-spacing:0}
  .hero p.sub{font-size:1.06rem;color:var(--ink2);margin-top:12px;max-width:46rem;line-height:1.5}
  .hero .lore{margin-top:10px;font-size:.9rem;color:var(--ink3);max-width:46rem;line-height:1.45}
  .hero .lore b{color:var(--gold-text);font-weight:700}

  .tool{padding-block:40px}
  /* Reflow: at 200% text these two tabs are 393px side by side and overflowed a 375px viewport.
     max-width keeps the pill inside its column; wrap lets them stack rather than push the page. */
  .tabs{display:inline-flex;flex-wrap:wrap;max-width:100%;background:var(--alt);border:1px solid var(--line);border-radius:11px;padding:5px;gap:4px;margin-bottom:24px}
  .tab{font-weight:700;font-size:.92rem;color:var(--ink2);background:transparent;border:none;cursor:pointer;padding:.6rem 1.15rem;border-radius:8px;display:flex;align-items:center;gap:8px}
  .tab.active{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
  .tab svg{width:16px;height:16px}
  .panel{display:none}
  .panel.active{display:block}
  /* single panel: the map leads. It used to be pinned last with order:2, which put it
     2,432px down behind a 1,117px result card, so the one thing that tells you which
     systems cover your point was the last thing anyone saw (Brian, Fizzy 145). */
  #panel-single.active{display:flex;flex-direction:column}

  .card{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
  .card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line)}
  .card-head .lab{font-family:'Zilla Slab';font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);font-weight:800}
  .card-head .epsg{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.74rem;color:var(--ink3)}
  .card-body{padding:22px}

  .convert{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch}
  .framenote{margin-top:10px;font-size:.82rem;line-height:1.4;color:var(--ink2)}
  .swapwrap{display:flex;align-items:center;justify-content:center}
  .card,.card-body,.selrow,.selgrp,.fieldbox,.coordfields,.cf{min-width:0}
  .swap{width:46px;height:46px;border-radius:50%;background:var(--gold);color:#141518;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);transition:background .15s,transform .2s}
  .swap:hover{background:var(--gold-hover)}
  .swap:active{transform:rotate(180deg)}
  .swap svg{width:20px;height:20px}

  .selrow{display:flex;flex-direction:column;gap:12px}
  .selgrp{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
  .selgrp.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  /* Two columns in a 375px viewport gives each field about 110px, which is narrower than the
     Decimal / D M S toggle needs and too tight for a select reading "NAD83(NSRS2007)". Stack them
     on a phone: the toggle gets a single row at ordinary text size and still has room at 200%,
     and every select becomes readable. Root cause of the reflow overflow, rather than the symptom. */
  @media(max-width:560px){ .selgrp.two{grid-template-columns:minmax(0,1fr)} }
  .fieldbox label{display:block;font-family:'Zilla Slab';font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin-bottom:6px}
  label.help{cursor:help;text-decoration:underline dotted var(--ink3);text-underline-offset:3px;text-decoration-thickness:1px;width:max-content;max-width:100%}
  label.help:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:3px}
  .epsg[title]{cursor:help;text-decoration:underline dotted;text-underline-offset:3px}
  select,.txtin{width:100%;min-width:0;background:var(--field);border:1px solid var(--line-strong);border-radius:9px;color:var(--ink);padding:11px 13px;font-family:Barlow;font-size:.98rem;font-weight:500}
  select{font-family:'Zilla Slab';font-weight:600;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A929B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
  select:focus,.txtin:focus{outline:2px solid var(--gold);outline-offset:-1px;border-color:var(--gold)}
  .coordfields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:16px;padding-top:16px;border-top:1px dashed var(--line)}
  .elevrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
  .elevrow .ef{display:flex;flex-direction:column;gap:6px;min-width:0}
  .elevrow .georow{display:flex;align-items:center;gap:8px}
  .elevrow .georow .txtin{min-width:0}
  .elevrow .optnote{color:var(--ink3);font-weight:500;text-transform:none;letter-spacing:0}
  .elevnote{grid-column:1/-1;font-size:.82rem;color:var(--ink3);min-height:1.1em}
  .elevsrc{grid-column:1/-1;display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:.82rem;color:var(--ink2);background:var(--alt);border:1px solid var(--line);border-radius:9px;padding:9px 11px}
  .elevsrc b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);font-weight:600}
  .elevsrc .prov{color:var(--ink3);font-size:.78rem;flex-basis:100%}
  .elevnote.warn{color:var(--gold-text);font-weight:600}
  @media(max-width:640px){.elevrow{grid-template-columns:minmax(0,1fr)}}
  .ptnum{margin-top:16px}
  .ptnum label{display:block;font-family:'Zilla Slab';font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin-bottom:6px}
  .ptnum label .opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink3)}
  .txtin.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
  .cf .out{width:100%;background:var(--alt);border:1px solid var(--line);border-radius:9px;color:var(--ink);padding:11px 13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.06rem;font-weight:600;min-height:44px;display:flex;align-items:center;word-break:break-all}
  .cf .out.placeholder{color:var(--ink3);font-weight:400}
  /* Deliberately NOT wrappable. A segmented control that stacks N above S is not a smaller
     control, it is a broken one: flex-wrap let it shrink to 71px for content needing 100px and
     put the two halves on separate rows at ordinary text size. Reflow at 200% passes without it,
     so it buys nothing. Verified 2026-08-22. */
  .fmtwrap{display:inline-flex;flex-wrap:wrap;flex-shrink:0;max-width:100%;background:var(--alt);border:1px solid var(--line);border-radius:8px;padding:3px;gap:2px}
  .fmtwrap button{font-family:'Zilla Slab';font-weight:700;font-size:.76rem;color:var(--ink2);background:transparent;border:none;cursor:pointer;padding:5px 10px;border-radius:6px}
  .fmtwrap button.active{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
  /* The hemisphere toggle sits in .cf-head opposite the field label. Tabular figures are not the
     point here, so it takes the head font rather than the mono the value uses. */
  .fmtwrap.hemi button{min-width:2.1em;text-align:center}
  /* Every segmented toggle here changes what a number MEANS, not just how it looks: N/S flips a
     coordinate's sign, ft/m reinterprets the elevation, Decimal/D M S reinterprets what was typed.
     A mis-tap produces a wrong answer rather than an annoyance, so they take the full target on
     both axes. Added for .hemi in the P1 pass; generalised 2026-08-22 after a test caught ft/m
     sitting at 38px wide, which the narrower rule had missed. */
  @media (pointer: coarse){
    /* Both selectors on purpose: .fmtwrap.hemi button above sets min-width:2.1em and outranks a
       bare .fmtwrap button, so listing only the general one silently un-fixes the hemisphere pair. */
    .fmtwrap button,.fmtwrap.hemi button{min-width:44px}
  }
  /* Touch: these segmented controls are mode switches that reinterpret every value on the page,
     so on a coarse pointer they get a real target instead of the 24px a desk cursor can afford.
     Measured 2026-08-22: Decimal / D M S rendered 64x24 and 51x24 on a phone. */
  @media (pointer: coarse){
    .fmtwrap{padding:4px}
    /* min-height, not padding maths: the label sets the box height otherwise and lands short of
       the target. nowrap because the wider padding is enough to break "Decimal" onto two lines
       inside the settings grid, which made the control taller AND harder to read. */
    .fmtwrap button{min-height:44px;padding:6px 14px;font-size:.8rem;white-space:nowrap}
  }

  /* Sits over the map until the user opts into dragging, so a thumb swipe scrolls the page
     instead of panning. Removed on first tap and never rebuilt. */
  .mapveil{position:absolute;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;
    padding:0;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;
    background:color-mix(in srgb, var(--ink) 18%, transparent);
    font-family:'Zilla Slab';font-weight:700;font-size:.9rem;color:var(--ink);line-height:1}
  /* The label is a chip so it stays legible over topo tiles, which are busy and mid-tone. */
  .mapveil>span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;
    background:var(--card);border:1px solid var(--line-strong);box-shadow:var(--shadow-lg)}
  .cf-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
  .cf-head label{font-family:'Zilla Slab';font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}

  /* NAD27 accuracy option + grid loader */
  .accbox{margin-top:14px;padding:12px 14px;background:var(--accent-bg);border:1px solid var(--accent-line);border-radius:10px;font-size:.84rem;color:var(--ink2)}
  .accbox .accrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .accbox .fmtwrap button{font-size:.74rem}
  .accbox .gridstatus{font-family:'Zilla Slab';font-weight:600;font-size:.78rem}
  .accbox .gridstatus.ok{color:var(--gold-text)}
  .accbox .loadgrid{font-family:'Zilla Slab';font-weight:700;font-size:.76rem;color:var(--gold-text);background:transparent;border:none;cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:0}
  .accbox .note{display:block;margin-top:6px;color:var(--ink3);font-size:.78rem}

  .rc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--accent-line)}
  .rc-head .lab{font-family:'Zilla Slab';font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);font-weight:800;margin:0}
  .rc-head .epsg{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.74rem;color:var(--ink3)}
  .resultcard{margin-top:20px;padding:20px 22px;background:var(--accent-bg);border:1px solid var(--accent-line);border-radius:14px;display:grid;grid-template-columns:1fr;gap:0;align-items:center}
  .resultcard[hidden]{display:none}
  .resultcard.has-qr{grid-template-columns:1fr auto;gap:24px}
  .rc-main{min-width:0}
  /* CORPSCON-style conversion report */
  .reportmeta{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:14px;margin-bottom:18px;max-width:760px}
  #setupCard{margin-bottom:20px}
  #setupCard .convert{margin-top:0}
  #setupCard>.card-body{padding-top:18px}
  #setupCard .card{box-shadow:none}
  .vdatum{margin-top:12px}
  #pointCard .ptnum{max-width:260px}
  #pointCard .coordfields{margin-top:14px;padding-top:14px}
  #pointCard .elevrow{grid-template-columns:minmax(0,1fr)}
  #pointCard .elevrow .ef{max-width:320px}
  .reportmeta .rm-field{min-width:0}
  .reportmeta label{display:block;font-family:'Zilla Slab';font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin-bottom:6px}
  .reportmeta label .opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink3)}
  @media(max-width:560px){.reportmeta{grid-template-columns:1fr}}
  .report{min-width:0}
  .rep-head{text-align:center;margin-bottom:14px}
  .rep-num{font-family:'Zilla Slab';font-weight:700;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-text);margin-bottom:3px}
  .rep-num:empty{display:none}
  .rep-proj{font-family:'Zilla Slab';font-weight:800;font-size:1.5rem;line-height:1.1;color:var(--ink)}
  .rep-proj:empty::before{content:"Untitled project";color:var(--ink3);font-weight:700}
  .rep-sub{font-family:'Zilla Slab';font-weight:700;font-size:.95rem;color:var(--ink2);margin-top:2px}
  .rep-date{font-size:.85rem;color:var(--ink3);margin-top:2px}
  .rep-ptbar{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:12px 0 8px;padding-top:12px;border-top:2px solid var(--ink)}
  .rep-pt{font-family:'Zilla Slab';font-weight:800;font-size:1.05rem;color:var(--ink)}
  .rep-pt:empty::before{content:"Point 1";color:var(--ink3)}
  .rep-page{font-size:.8rem;color:var(--ink3)}
  .rep-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:2px 0;min-width:0}
  .rep-row .rk{font-family:'Zilla Slab';font-weight:700;font-size:.82rem;color:var(--ink2);white-space:nowrap}
  .rep-row .rv{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem;color:var(--ink);text-align:right;word-break:break-all}
  .rep-shift{text-align:center;font-size:.82rem;color:var(--ink2);margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}
  .rep-shift .rv{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)}
  /* NCAT-style all-systems output: one column per coordinate system, side by side. */
  .rep-framebar{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
  .rep-framelab{font-family:'Zilla Slab';font-weight:800;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
  .rep-framev{font-family:'Zilla Slab';font-weight:700;font-size:.95rem;color:var(--ink);background:var(--alt);border:1px solid var(--line);border-radius:6px;padding:2px 9px}
  .syscols{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .syscol{min-width:0;padding:12px 14px 14px;border-right:1px solid var(--line);background:var(--card)}
  .syscol:last-child{border-right:none}
  .syscol-h{font-family:'Zilla Slab';font-weight:800;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-text);text-align:center;padding-bottom:8px;margin-bottom:9px;border-bottom:1px solid var(--line)}
  .sysrow{display:grid;grid-template-columns:minmax(72px,auto) 1fr;gap:4px 10px;align-items:baseline;padding:3px 0;min-width:0}
  .sysk{font-family:'Zilla Slab';font-weight:700;font-size:.78rem;color:var(--ink2);line-height:1.25}
  .sysv{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.84rem;color:var(--ink);text-align:right;word-break:break-word;line-height:1.4}
  .sysv .alt{display:block;color:var(--ink3);font-size:.79rem}
  .sysv .na{color:var(--ink3);font-family:'Barlow',sans-serif}
  .syszone{display:flex;align-items:center;justify-content:flex-end;gap:6px}
  .syszone select{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;padding:4px 6px;min-height:28px;border:1px solid var(--line-strong);border-radius:5px;background:var(--card);color:var(--ink);max-width:100%;text-align:right;cursor:pointer}
  .syscol-note{margin-top:8px;padding-top:7px;border-top:1px dashed var(--line);font-family:'Barlow',sans-serif;font-size:.74rem;line-height:1.35;color:var(--ink3)}
  /* Export column picker, modelled on NCAT's "Customize Export" */
  .exportpick{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
  .exportpick>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:4px 0}
  .exportpick>summary::-webkit-details-marker{display:none}
  .exportpick[open]>summary .chev{transform:rotate(180deg)}
  .exportpick .chev{width:16px;height:16px;margin-left:auto;transition:transform .15s;color:var(--ink3)}
  .exportbody{padding:8px 0 2px}
  .exportctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
  .exphint{font-family:'Barlow',sans-serif;font-size:.78rem;color:var(--ink2)}
  .expgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px 14px;max-height:280px;overflow-y:auto;padding-right:4px}
  .expgroup{grid-column:1/-1;font-family:'Zilla Slab';font-weight:800;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-text);margin:9px 0 2px;padding-top:6px;border-top:1px dashed var(--line)}
  .expgroup:first-child{margin-top:0;padding-top:0;border-top:none}
  .expitem{display:flex;align-items:center;gap:7px;min-height:26px;font-family:'Barlow',sans-serif;font-size:.82rem;color:var(--ink2);cursor:pointer}
  .expitem input{width:15px;height:15px;accent-color:var(--gold);cursor:pointer;flex:none}
  .expitem.off{color:var(--ink3)}
  @media(max-width:640px){.syscols{grid-template-columns:1fr}.syscol{border-right:none;border-bottom:1px solid var(--line)}.syscol:last-child{border-bottom:none}
    /* A value here is a measurement and must not fragment across lines; a label is prose and may.
       So at narrow widths the value column claims its content width first and the label absorbs
       whatever is left. Measured 2026-08-22 at 375px: the row is 247px, the label was auto-sizing
       to 104px, leaving 133px for a convergence value needing 138px. Five pixels short, and
       -0d 08' 20.08284" broke in half. Both tracks stay shrinkable so a long value still wraps
       rather than pushing the page sideways. */
    .sysrow{grid-template-columns:minmax(0,1fr) minmax(0,auto)}
  }
  .resultcard .lbl{font-family:'Zilla Slab';font-weight:800;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-text);display:block;margin-bottom:5px}
  .resultcard .pt{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1rem;color:var(--ink);font-weight:600;word-break:break-word}
  .rc-actions{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--accent-line)}
  .rc-btns{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
  /* PDF: print only the report (Download PDF -> browser Save as PDF) */
  @media print {
    /* Print the report and nothing else. The old rule hid the page with visibility:hidden, which
       leaves every hidden element in flow: the report printed on page 1 and the rest of the
       document followed as five blank pages. `.print-hide` is stamped on the report's siblings at
       every level (markPrintChain in app.js), so the document collapses to the report alone. */
    #resultBar,.rc-main{display:block !important;background:#fff !important;border:0 !important;box-shadow:none !important;padding:0 !important;margin:0 !important}
    #shareBar,#qrBox{display:none !important}
    #report{width:100% !important;color:#000 !important}
    .rep-num,.rep-proj,.rep-sub,.rep-date,.rep-framelab,.rep-framev,.rep-pt,.rep-page,.syscol-h,.sysk,.sysv{color:#000 !important}
    .rep-framev{background:none !important;border:0 !important;padding:0 !important}
    /* Paper is narrow. Four columns squeeze to about 170px each and wrap the last one to its own
       row, so print two systems per row instead and let extra systems flow underneath. */
    .syscols{grid-template-columns:1fr 1fr !important;border:0 !important;border-radius:0 !important;gap:0 !important}
    .syscol{border:1px solid #999 !important;background:#fff !important;break-inside:avoid;page-break-inside:avoid}
    .sysrow{break-inside:avoid;page-break-inside:avoid}
    .sysv .alt{color:#333 !important}
    .sysv .na,.syscol-note{color:#555 !important}
    /* The zone pickers are controls on screen and plain text on paper. */
    .syszone select{-webkit-appearance:none;appearance:none;border:0 !important;background:none !important;padding:0 !important;min-height:0 !important;color:#000 !important;text-align:right;text-align-last:right}
    *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  }
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .errmsg{color:var(--danger);font-size:.86rem;margin-top:10px;font-weight:600;min-height:1.2em}
  .realnote{color:var(--gold-text);font-size:.84rem;margin-top:8px;font-weight:500}
  .realnote:empty{display:none}
  .sharebtn{font-family:'Zilla Slab';font-weight:700;font-size:.82rem;color:var(--ink2);background:transparent;border:1px solid var(--line-strong);border-radius:999px;padding:.48rem .9rem;min-height:44px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:border-color .12s,color .12s,background .12s}
  .sharebtn:hover{border-color:var(--ink3);color:var(--ink)}
  .sharebtn svg{width:14px;height:14px;opacity:.8}
  .sharebtn.primary{background:var(--gold);border-color:var(--gold);color:#141518}
  .sharebtn.primary:hover{background:var(--gold-hover);border-color:var(--gold-hover);color:#141518}
  .sharebtn.primary svg{opacity:1}
  .sharebtn.active{border-color:var(--gold);color:var(--gold-text);background:rgba(240,177,0,.12)}
  /* QR always visible; Text (SMS) is a phone action, so mobile-only */
  .sharebtn[data-share="sms"]{display:none}
  @media(max-width:640px){.sharebtn[data-share="sms"]{display:inline-flex}}
  /* a11y: visible keyboard focus + reduced-motion */
  a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}
  }
  .qrbox{padding:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;align-items:center;gap:7px;box-shadow:var(--shadow)}
  .qrbox #qrImg svg{display:block;width:150px;height:auto}
  .qrcap{font-size:.74rem;color:var(--ink3);text-align:center;max-width:150px}
  @media(max-width:640px){.resultcard.has-qr{grid-template-columns:1fr;justify-items:start}}
  .errmsg{color:var(--danger)}

  /* grid factors */
  .gridcard{margin-top:20px}
  .gfelev{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:20px;padding-top:18px;border-top:1px dashed var(--line)}
  .gfelev .ef{display:flex;flex-direction:column;gap:6px}
  .gfelev label{font-family:'Zilla Slab';font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
  .gfelev .georow{display:flex;align-items:center;gap:10px}
  @media(max-width:860px){.gfelev{grid-template-columns:1fr 1fr}}
  /* phones: single column so long reference/datum dropdown labels never truncate */
  @media(max-width:520px){.gfelev{grid-template-columns:1fr}}
  .gfnote{margin-top:14px;font-size:.84rem;color:var(--ink3)}
  .gfnote b{color:var(--ink2)}

  /* accordion (collapsible sections) */
  details.acc>summary,details.accp>summary{list-style:none;cursor:pointer;user-select:none}
  details.acc>summary::-webkit-details-marker,details.accp>summary::-webkit-details-marker{display:none}
  .acc-head{display:flex;align-items:center;gap:12px;padding:16px 22px}
  .acc-head .lab{font-family:'Zilla Slab';font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);font-weight:800}
  #setupCard .acc-head .epsg{flex:1;min-width:0;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .acc-head .epsg{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.74rem;color:var(--ink3);margin-left:auto}
  .chev{margin-left:auto;width:18px;height:18px;color:var(--ink3);transition:transform .2s;flex:none}
  details[open]>summary .chev{transform:rotate(180deg)}
  summary:hover .chev{color:var(--ink)}
  details.acc[open]>.card-body{border-top:1px solid var(--line)}
  /* Map and keyboard entry sit side by side on a desktop: two ways of entering one point,
     so they share a card rather than being separated by the job settings. Stacks under 900px. */
  .mapsplit{display:grid;grid-template-columns:minmax(0,1fr)}
  .pointfields{padding:18px 22px;display:flex;flex-direction:column;gap:14px;min-width:0}
  @media(min-width:900px){
    .mapsplit{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:stretch}
    .mapsplit>#map{height:100%;min-height:340px}
    .mapsplit>.pointfields{border-left:1px solid var(--line)}
  }
  @media(max-width:899px){.pointfields{border-top:1px solid var(--line)}}
  /* In one narrow column the paired fields stack rather than squeeze. */
  #pointCard .coordfields{grid-template-columns:minmax(0,1fr);margin-top:0;padding-top:0;border-top:0}
  #pointCard .elevrow{grid-template-columns:minmax(0,1fr);margin-top:0;padding-top:14px}
  #pointCard .ptnum{max-width:none}
  #coverCard{margin-top:20px}
  #coverCard .zonebar{border-top:0;background:transparent}
  /* One control height across the row: the selects were 31px, the switch 40 and My location 44,
     which alone padded the row by 15px. */
  .maptoolsrow .layerswitch button,.maptoolsrow #locateBtn,.maptoolsrow .basemapsel{min-height:34px;height:34px;padding-top:0;padding-bottom:0}
  /* Touch: the map row and Leaflet's own zoom controls are the smallest things on the page and
     the ones most likely to be used one-handed outdoors. Leaflet ships 30x30, which is well
     under the 44px target. Height is released rather than raised so the row can grow. */
  @media (pointer: coarse){
    .maptoolsrow .layerswitch button,.maptoolsrow #locateBtn,.maptoolsrow .basemapsel{min-height:44px;height:auto}
    .leaflet-touch .leaflet-bar a,.leaflet-bar a{width:44px;height:44px;line-height:44px;font-size:22px}
  }
  .maptoolsrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 22px 12px;border-bottom:1px solid var(--line)}
  .accstack{max-width:860px;margin:40px 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}
  details.accp>summary h3{margin:0}
  details.accp .chev{width:20px;height:20px}
  details.accp .accp-body{padding:0 2px 26px}
  details.accp .notes{background:none;border:none;border-radius:0;padding:0;margin:0;max-width:none}

  /* map */
  .layerswitch{display:inline-flex;gap:8px}
  .layerswitch button{font-family:'Zilla Slab';font-weight:700;font-size:.78rem;color:var(--ink2);background:var(--card);border:1.5px solid var(--line-strong);cursor:pointer;padding:6px 13px;min-height:40px;display:inline-flex;align-items:center;gap:6px;border-radius:8px;transition:border-color .12s,color .12s,background .12s}
  .layerswitch button:hover{border-color:var(--ink3);color:var(--ink)}
  .layerswitch button.active,.layerswitch button[data-ov].active{background:var(--gold);border-color:var(--gold);color:#141518}
  .basemapsel{width:auto;min-width:150px;font-family:'Zilla Slab';font-weight:700;font-size:.78rem;padding:7px 30px 7px 11px;border-radius:8px}
  .zonelabel{font-family:'Zilla Slab';font-weight:700;font-size:.72rem;color:var(--ink);background:var(--card);border:1px solid var(--line-strong);border-radius:5px;padding:2px 6px;box-shadow:var(--shadow)}
  .leaflet-tooltip.zonetip{background:var(--card);color:var(--ink);border:1px solid var(--line-strong)}
  #map{height:420px;width:100%;background:var(--alt)}
  .leaflet-container{font-family:Barlow,Arial,sans-serif}
  .zonebar{padding:14px 22px;border-top:1px solid var(--line);background:var(--alt)}
  .zlist{display:flex;flex-direction:column;gap:9px}
  .zrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .zrow .zsys{font-family:'Zilla Slab';font-weight:800;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-text);min-width:108px}
  .zrow .zzone{font-family:'Zilla Slab';font-weight:700;color:var(--ink);font-size:.98rem}
  .zrow .zepsg{color:var(--ink3);font-size:.8rem}
  .zrow .znote{color:var(--ink3);font-size:.78rem;font-style:italic}
  .zrow .spacer{flex:1}
  .zsub{color:var(--ink3);font-size:.82rem}
  .zsub .covlink{color:var(--gold-text);font-weight:700;text-decoration:underline;cursor:pointer}
  .plssline{display:flex;align-items:center;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
  .plssline .plsslab{font-family:'Zilla Slab';font-weight:800;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-text);min-width:108px}
  .plssline .plssv{font-family:'Zilla Slab';font-weight:700;color:var(--ink);font-size:.98rem;flex:1}
  .plssline .plsscopy{font-family:'Zilla Slab';font-weight:700;font-size:.76rem;color:var(--ink2);background:transparent;border:1px solid var(--line-strong);border-radius:999px;padding:.35rem .8rem;min-height:40px;cursor:pointer}
  .plssline .plsscopy:hover{border-color:var(--ink3);color:var(--ink)}
  .maphint{padding:9px 22px;border-top:1px solid var(--line);color:var(--ink3);font-size:.82rem}
  .measurepanel{padding:16px 22px;border-top:1px solid var(--line);background:var(--accent-bg)}
  .mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .mstat .mk{font-family:'Zilla Slab';font-weight:800;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-text);margin-bottom:4px}
  .mstat .mv{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.12rem;font-weight:600;color:var(--ink)}
  .mstat .mv.gold{color:var(--gold-text)}
  .mstat .msub{font-size:.76rem;color:var(--ink3);margin-top:2px;font-family:ui-monospace,monospace}
  .mnote{font-size:.82rem;color:var(--ink3);margin-top:12px}
  @media(max-width:860px){.mgrid{grid-template-columns:1fr}}

  .batchgrid{display:grid;grid-template-columns:1fr 44px 1fr;gap:14px;align-items:end;margin-bottom:18px}
  .batchgrid .selrow{gap:10px}
  textarea.paste{width:100%;min-height:180px;background:var(--field);border:1px solid var(--line-strong);border-radius:11px;color:var(--ink);padding:14px 16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92rem;line-height:1.7;resize:vertical}
  textarea.paste:focus{outline:2px solid var(--gold);outline-offset:-1px;border-color:var(--gold)}
  .batchfmt{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:11px}
  .batchfmt label{font-family:'Zilla Slab';font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);font-weight:800}
  .batchfmt select{width:auto;min-width:172px;padding:7px 32px 7px 11px;font-size:.9rem}
  .batchtools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
  .batchtools .spacer{flex:1}
  .hintline{font-size:.82rem;color:var(--ink3);margin-top:8px}
  .hintline code{font-family:ui-monospace,monospace;background:var(--alt);padding:1px 6px;border-radius:4px;color:var(--ink2)}
  .batchmsg{font-size:.85rem;font-weight:600;color:var(--ink2);margin-top:12px;min-height:1.2em}
  .batchmsg.err{color:var(--danger)}
  .tablewrap{overflow-x:auto;margin-top:16px;border:1px solid var(--line);border-radius:12px}
  table.res{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
  table.res th{font-family:'Zilla Slab';font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink2);font-weight:800;text-align:left;padding:12px 14px;border-bottom:1px solid var(--line-strong);white-space:nowrap;background:var(--alt)}
  table.res th.num,table.res td.num{text-align:right}
  table.res td{padding:10px 14px;border-bottom:1px solid var(--line);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88rem;color:var(--ink);white-space:nowrap}
  table.res tr:last-child td{border-bottom:none}
  table.res td.bad{color:var(--danger);font-family:Barlow}
  table.res tr.badrow td{background:rgba(192,57,43,.05)}

  .explain{background:var(--alt);border-top:1px solid var(--line);padding-block:72px}
  .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 p{color:var(--ink2);margin-top:8px;font-size:.94rem}
  .covtable{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
  .covtable th{font-family:'Zilla Slab';font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink2);font-weight:800;text-align:left;padding:12px 18px;background:var(--alt);border-bottom:1px solid var(--line-strong)}
  .covtable td{padding:12px 18px;border-bottom:1px solid var(--line);font-size:.92rem;color:var(--ink2);vertical-align:top}
  .covtable tr:last-child td{border-bottom:none}
  .covtable td:first-child{font-family:'Zilla Slab';font-weight:700;color:var(--ink);white-space:nowrap}
  .covtable b{color:var(--gold-text)}
  .notes{max-width:860px;margin:40px auto 0;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:26px 30px}
  .notes h3{margin-bottom:10px}
  .notes ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-top:6px}
  .notes li{position:relative;padding-left:22px;font-size:.93rem;color:var(--ink2)}
  .notes li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:2px;background:var(--gold);transform:rotate(45deg)}
  .notes li b{color:var(--ink)}
  .notes a{color:var(--gold-text);font-weight:700;text-decoration:underline;text-underline-offset:2px}

  .final{text-align:center;padding-block:78px}
  .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{max-width:22ch;margin:0 auto}
  .final p{color:var(--ink2);margin-top:16px;font-size:1.08rem;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:'Zilla Slab';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)}

  .brand-logo{height:27px;width:auto;display:block;color:var(--ink)}

  @media(max-width:860px){
    .convert{grid-template-columns:minmax(0,1fr);gap:12px}
    .coordfields{grid-template-columns:minmax(0,1fr)}
    .swapwrap{padding:2px 0}
    .swap{transform:rotate(90deg)}
    .swap:active{transform:rotate(270deg)}
    .batchgrid{grid-template-columns:1fr;gap:12px}
    .batchgrid .swapwrap{display:none}
    .g3{grid-template-columns:1fr}
    .nav-center{display:none}
    .head-inner{height:64px}
    #map{height:320px}
  }
  /* The site header is fixed and cine.css pads no body, so the first section
     clears it here, the same way .phero--hero does. */
  .hero .inner{padding-top:calc(var(--head-h, 76px) + 30px)}
}