/* ============================================================
   NAC LEAD FLOW — field work order
   Deliberately unlike the marketing site: primer white ground,
   carbon-copy surfaces, mono labels, sharp corners.
   Every token is scoped to .nac so nothing leaks into styles.css.
   ============================================================ */

.nac{
  --ground:  #F1F3F1;   /* primer white */
  --surface: #FCFCFA;   /* carbon-copy paper */
  --ink:     #1B1D1E;   /* graphite */
  --ink-mid: #55595B;
  --ink-dim: #8B8F90;
  --rule:    #CDD2CE;
  --rule-hi: #1B1D1E;
  --blue:    #2C5FA8;   /* painter's tape */
  --blue-dk: #23497F;
  --yellow:  #F0BE24;   /* safety — used ONCE, the progress leading edge */
  --rust:    #AC4A2E;   /* worst grades only */

  --r: 2px;             /* hard cap on radius */
  --ease: cubic-bezier(.2,.8,.3,1);

  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  position:fixed; inset:0;
  display:grid;
  /* three rows: strip, header, body. Naming only two put the 1fr on the
     header, which stretched it and pushed everything down. */
  grid-template-rows:auto auto 1fr;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-size:15px;
  line-height:1.45;
  overflow:hidden;
}

.nac *,.nac *::before,.nac *::after{ box-sizing:border-box; }
/* :where() so the reset carries no specificity of its own. Written plainly as
   `.nac button` it is (0,1,1) and outranks every single-class component rule
   below it — which silently blanked the background on .nac__btn--primary and
   .nac__tile, and forced ink-on-blue text on the primary button. */
.nac :where(button){
  font:inherit; color:inherit; background:none; border:0; cursor:pointer;
}
.nac input,.nac textarea{ font:inherit; color:inherit; }

/* Keyboard focus must always be obvious — this is a form people tab through. */
.nac :focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
}

/* ── progress strip ───────────────────────────────────────── */
.nac__bar{
  display:flex; gap:2px;
  padding:0; height:6px; flex:none;
  background:var(--rule);
}
.nac__seg{
  flex:1; background:var(--rule);
  transition:background .35s var(--ease);
}
.nac__seg.is-done{ background:var(--ink); }
/* the single use of safety yellow in the whole interface */
.nac__seg.is-now{ background:var(--yellow); }

/* ── header ───────────────────────────────────────────────── */
.nac__head{
  display:flex; align-items:center; gap:14px;
  padding:11px clamp(14px,3vw,26px);
  border-bottom:1px solid var(--rule);
  background:var(--surface);
  flex:none;
}
.nac__mark{
  font-family:var(--display); font-weight:700; font-size:19px;
  letter-spacing:.06em; text-transform:uppercase; line-height:1;
}
.nac__meta{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  color:var(--ink-dim); text-transform:uppercase;
}
.nac__meta b{ color:var(--ink); font-weight:600; }
.nac__spacer{ margin-left:auto; }
.nac__exit{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-mid);
  padding:7px 10px; border:1px solid var(--rule); border-radius:var(--r);
}
.nac__exit:hover{ border-color:var(--ink); color:var(--ink); }

/* ── two-pane body ────────────────────────────────────────── */
.nac__body{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,376px);
  overflow:hidden;
  min-height:0;
}
/* The footer is a row of this grid, not absolutely positioned — as an absolute
   child it escaped the column and stretched under the punch list panel. */
.nac__main{
  display:grid; grid-template-rows:1fr auto;
  overflow:hidden; min-height:0;
}
.nac__scroll{
  overflow-y:auto; min-height:0;
  padding:clamp(20px,3.4vw,44px) clamp(14px,3vw,44px) 34px;
}
.nac__inner{ max-width:760px; }

/* ── step heading ─────────────────────────────────────────── */
.nac__eyebrow{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-dim);
  display:flex; align-items:center; gap:9px; margin-bottom:13px;
}
.nac__eyebrow::after{ content:""; flex:1; height:1px; background:var(--rule); }
.nac__title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(30px,5.4vw,50px); line-height:.98;
  letter-spacing:.005em; text-transform:uppercase;
  margin:0 0 9px;
}
.nac__sub{ color:var(--ink-mid); font-size:14.5px; margin:0 0 clamp(20px,3vw,32px); max-width:52ch; }

/* ── tiles ────────────────────────────────────────────────── */
.nac__grid{ display:grid; gap:10px; }
.nac__grid--3{ grid-template-columns:repeat(auto-fit,minmax(206px,1fr)); }
.nac__grid--svc{ grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); }

.nac__tile{
  display:flex; align-items:flex-start; gap:12px;
  text-align:left; width:100%;
  padding:15px 15px 14px;
  background:var(--surface);
  border:1px solid var(--rule); border-radius:var(--r);
  transition:border-color .16s var(--ease), background .16s var(--ease),
             transform .16s var(--ease);
}
.nac__tile:hover{ border-color:var(--ink); }
.nac__tile:active{ transform:translateY(1px); }
.nac__tile.is-on{
  border-color:var(--blue);
  box-shadow:inset 0 0 0 1px var(--blue);
  background:#F4F7FC;
}

/* two-letter work-order code in a bordered mono box — not an icon */
.nac__code{
  flex:none;
  font-family:var(--mono); font-weight:600; font-size:12px;
  letter-spacing:.04em;
  width:32px; height:32px;
  display:grid; place-items:center;
  border:1.5px solid var(--ink); border-radius:var(--r);
  background:transparent;
}
.nac__tile.is-on .nac__code{ border-color:var(--blue); color:var(--blue); }

.nac__tileTxt{ min-width:0; }
.nac__tileLabel{
  display:block;
  font-family:var(--display); font-weight:600; font-size:19px;
  text-transform:uppercase; letter-spacing:.015em; line-height:1.06;
}
.nac__tileHint{ display:block; font-size:12.5px; color:var(--ink-dim); margin-top:2px; }

/* ── condition rows (step 3) ──────────────────────────────── */
.nac__cond{
  border:1px solid var(--rule); border-radius:var(--r);
  background:var(--surface); padding:13px 14px; margin-bottom:9px;
}
.nac__condHead{ display:flex; align-items:center; gap:11px; margin-bottom:11px; }
.nac__condName{
  font-family:var(--display); font-weight:600; font-size:18px;
  text-transform:uppercase; letter-spacing:.015em;
}
.nac__opts{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.nac__opt{
  background:transparent;
  padding:9px 8px; text-align:center;
  border:1px solid var(--rule); border-radius:var(--r);
  font-size:12.5px; line-height:1.15;
  transition:border-color .16s var(--ease), background .16s var(--ease);
}
.nac__opt small{ display:block; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-dim); margin-top:3px; }
.nac__opt:hover{ border-color:var(--ink); }
.nac__opt.is-on{ border-color:var(--blue); background:#F4F7FC; box-shadow:inset 0 0 0 1px var(--blue); }
.nac__opt.is-on small{ color:var(--blue); }

/* ── fields ───────────────────────────────────────────────── */
.nac__field{ margin-bottom:15px; }
.nac__label{
  display:block;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-mid); margin-bottom:6px;
}
.nac__input{
  width:100%; padding:12px 13px;
  background:var(--surface);
  border:1px solid var(--rule); border-radius:var(--r);
  font-size:15px;
  transition:border-color .16s var(--ease);
}
.nac__input:hover{ border-color:var(--ink-dim); }
.nac__input:focus{ outline:none; border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue); }
.nac__input::placeholder{ color:#B4B8B9; }
.nac__pair{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.nac__err{ color:var(--rust); font-size:12.5px; margin-top:5px; font-family:var(--mono); }

/* write-in for the "Something else" tile */
.nac__write{
  margin-top:12px; padding:13px 14px;
  border:1px solid var(--blue); border-radius:var(--r);
  background:#F4F7FC;
}

.nac__area{
  resize:vertical; min-height:56px; line-height:1.4;
  font-family:var(--body); margin-bottom:11px;
}
.nac__label--tight{ margin-bottom:6px; }

/* ── photos ───────────────────────────────────────────────── */
.nac__drop{
  border:1.5px dashed var(--rule); border-radius:var(--r);
  background:var(--surface);
  padding:30px 20px; text-align:center; width:100%;
  transition:border-color .16s var(--ease), background .16s var(--ease);
}
.nac__drop:hover,.nac__drop.is-over{ border-color:var(--blue); background:#F4F7FC; }
.nac__dropTitle{
  display:block;
  font-family:var(--display); font-weight:600; font-size:20px;
  text-transform:uppercase; letter-spacing:.02em;
}
.nac__dropHint{ display:block; font-size:12.5px; color:var(--ink-dim); margin-top:3px; }
.nac__thumbs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  gap:8px; margin-top:12px; }
.nac__thumb{ position:relative; aspect-ratio:4/3; border:1px solid var(--rule);
  border-radius:var(--r); overflow:hidden; background:var(--surface); }
.nac__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.nac__thumbX{
  position:absolute; top:3px; right:3px; width:21px; height:21px;
  display:grid; place-items:center;
  background:var(--ink); color:#fff; border-radius:var(--r);
  font-family:var(--mono); font-size:12px; line-height:1;
}
.nac__thumbState{
  position:absolute; left:0; right:0; bottom:0;
  font-family:var(--mono); font-size:9px; letter-spacing:.08em;
  text-transform:uppercase; text-align:center; padding:2px;
  background:rgba(27,29,30,.82); color:#fff;
}

/* ── footer nav ───────────────────────────────────────────── */
/* Sits immediately under the answers so the controls are never a scroll away.
   The rule above it ties it to the question it belongs to. */
.nac__foot{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  margin-top:clamp(18px,2.6vw,28px);
  padding-top:16px;
  border-top:1px solid var(--rule);
}
.nac__foot:empty{ display:none; }
.nac__btn{
  background:transparent;
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 21px; min-height:46px;
  border-radius:var(--r);
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase;
  border:1px solid var(--ink);
  transition:background .16s var(--ease), color .16s var(--ease),
             border-color .16s var(--ease), opacity .16s var(--ease);
}
.nac__btn--primary{ background:var(--blue); border-color:var(--blue); color:#fff; }
.nac__btn--primary:hover{ background:var(--blue-dk); border-color:var(--blue-dk); }
.nac__btn--ghost{ color:var(--ink-mid); border-color:var(--rule); }
.nac__btn--ghost:hover{ color:var(--ink); border-color:var(--ink); }
.nac__btn[disabled]{ opacity:.38; cursor:not-allowed; }
.nac__footNote{
  margin-left:auto;
  font-family:var(--mono); font-size:10px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-dim);
}

/* ── punch list ───────────────────────────────────────────── */
.nac__side{
  border-left:1px solid var(--rule);
  background:var(--surface);
  overflow-y:auto; min-height:0;
  padding:clamp(18px,2.4vw,26px);
}
.nac__sideHead{
  display:flex; align-items:baseline; gap:9px;
  padding-bottom:9px; margin-bottom:13px;
  border-bottom:1.5px solid var(--ink);
}
.nac__sideTitle{
  font-family:var(--display); font-weight:600; font-size:20px;
  text-transform:uppercase; letter-spacing:.03em;
}
.nac__sideCount{ font-family:var(--mono); font-size:10.5px; color:var(--ink-dim);
  letter-spacing:.09em; margin-left:auto; }
.nac__empty{ font-size:13px; color:var(--ink-dim); font-style:italic; }

.nac__item{
  display:grid; grid-template-columns:34px 1fr auto;
  gap:11px; align-items:start;
  padding:11px 0; border-bottom:1px solid var(--rule);
}
.nac__grade{
  font-family:var(--display); font-weight:700; font-size:22px; line-height:1;
  width:34px; height:34px; display:grid; place-items:center;
  border:1.5px solid var(--ink); border-radius:var(--r);
}
.nac__grade[data-g="D"]{ border-color:var(--rust); color:var(--rust); }
.nac__itemName{
  display:block;
  font-family:var(--display); font-weight:600; font-size:16.5px;
  text-transform:uppercase; letter-spacing:.015em; line-height:1.1;
}
.nac__itemCond{ display:block; font-size:12px; color:var(--ink-mid); margin-top:1px; }
.nac__itemNote{
  display:block; font-size:12px; color:var(--ink-mid); margin-top:2px;
  font-style:italic;
  /* keep long goals from stretching the panel */
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.nac__tag{
  font-family:var(--mono); font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; padding:3px 6px;
  border:1px solid var(--rule); border-radius:var(--r); color:var(--ink-mid);
  white-space:nowrap;
}
.nac__tag[data-p="Priority"]{ border-color:var(--rust); color:var(--rust); }

.nac__meta2{
  margin-top:14px; padding-top:12px; border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.05em;
  color:var(--ink-dim); display:grid; gap:4px;
}
.nac__meta2 span b{ color:var(--ink); font-weight:500; }

/* items stamp in — slight rotate that settles */
@keyframes nacStamp{
  0%   { opacity:0; transform:rotate(-2.4deg) scale(1.05) translateY(-5px); }
  55%  { opacity:1; transform:rotate(.7deg)  scale(.995) translateY(0); }
  100% { opacity:1; transform:rotate(0)      scale(1)    translateY(0); }
}
.nac__item.is-new{ animation:nacStamp .42s var(--ease) both; }

/* ── result screen ────────────────────────────────────────── */
.nac__result{ max-width:660px; }
.nac__ticket{
  border:1.5px solid var(--ink); border-radius:var(--r);
  background:var(--surface); margin-bottom:18px;
}
.nac__ticketHead{
  display:flex; align-items:center; gap:11px;
  padding:12px 15px; border-bottom:1.5px solid var(--ink);
}
.nac__ticketRef{ font-family:var(--mono); font-size:11px; letter-spacing:.11em; margin-left:auto; }
.nac__ticketBody{ padding:4px 15px 13px; }
.nac__ticketBody .nac__item:last-child{ border-bottom:0; }
.nac__note{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.05em;
  color:var(--ink-dim); border-left:2px solid var(--rule);
  padding-left:10px; margin:16px 0 20px;
}
.nac__actions{ display:flex; flex-wrap:wrap; gap:10px; }
.nac__sent{
  border:1px solid var(--blue); background:#F4F7FC; color:var(--blue-dk);
  border-radius:var(--r); padding:13px 15px; font-size:14px; margin-bottom:14px;
}
/* the send did not go through — must not read as a confirmation */
.nac__sent--warn{
  border-color:var(--ink); background:#FBFAF7; color:var(--ink);
  border-left-width:3px;
}

/* ── mobile: punch list becomes a bottom drawer ───────────── */
.nac__drawerTab{ display:none; }

@media(max-width:860px){
  .nac__body{ grid-template-columns:1fr; }
  /* the nav row scrolls with the content now; only the drawer tab is fixed,
     so the scroll column just needs room beneath it */
  .nac__scroll{ padding-bottom:calc(34px + 46px + env(safe-area-inset-bottom)); }

  /* Drawer, not a stacked block — the brief is explicit that the panel must
     not sit above the questions and push them off screen. */
  .nac__side{
    position:fixed; left:0; right:0; bottom:0; z-index:5;
    border-left:0; border-top:1.5px solid var(--ink);
    max-height:70svh;
    transform:translateY(calc(100% - 0px));
    transition:transform .32s var(--ease);
    padding-bottom:calc(18px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 26px rgba(27,29,30,.14);
  }
  .nac.is-drawer-open .nac__side{ transform:translateY(0); }

  .nac__drawerTab{
    position:fixed; left:0; right:0; bottom:0; z-index:6;
    display:flex; align-items:center; gap:9px;
    padding:12px clamp(14px,3vw,20px);
    padding-bottom:calc(12px + env(safe-area-inset-bottom));
    background:var(--ink); color:#fff;
    font-family:var(--mono); font-size:11px; letter-spacing:.1em;
    text-transform:uppercase;
    border-top:1.5px solid var(--ink);
  }
  .nac.is-drawer-open .nac__drawerTab{ display:none; }
  .nac__drawerTab b{ margin-left:auto; font-weight:500; }
  .nac__side{ z-index:7; }

  .nac__drawerClose{
    background:transparent;
    display:block; width:100%; margin-top:14px;
    padding:11px; border:1px solid var(--rule); border-radius:var(--r);
    font-family:var(--mono); font-size:11px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--ink-mid);
  }
  /* footer clears the drawer tab */
  .nac__foot{ bottom:46px; }
  .nac__footNote{ display:none; }
}
@media(min-width:861px){ .nac__drawerClose{ display:none; } }

@media(max-width:420px){
  /* Keep the three urgency chips on one row. Stacking them tripled the height
     of every item card, which is exactly the scrolling this flow avoids. The
     grade letter is dropped here — the punch list already carries it. */
  .nac__opts{ grid-template-columns:repeat(3,1fr); gap:5px; }
  .nac__opt{ padding:9px 4px; font-size:11.5px; }
  .nac__opt small{ display:none; }
  .nac__pair{ grid-template-columns:1fr; }
  .nac__grid--svc{ grid-template-columns:1fr 1fr; }
  .nac__tile{ flex-direction:column; gap:8px; padding:12px; }
  .nac__btn{ padding:12px 15px; }
}

/* ── reduced motion ───────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .nac *,.nac *::before,.nac *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .nac__item.is-new{ animation:none; }
}

/* ══ EMBEDDED IN THE MARKETING PAGE ═══════════════════════════
   Same component, hosted inside a section instead of taking over the
   viewport. It opens as a single quiet question; the first Continue unfolds
   the full work order — progress strip, reference number and punch list —
   without the visitor ever leaving the page.
   ============================================================ */
.nac--embed{
  position:relative; inset:auto;
  height:auto; overflow:visible;
  grid-template-rows:auto auto auto;
  border:1.5px solid var(--ink);
}

/* "Save & exit" points at "/" — meaningless when the flow is already ON "/",
   where it would just reload the page and throw the answers away. The ref
   stays visible, which is the part worth keeping. */
.nac--embed .nac__exit{ display:none; }

/* compact: no chrome, no panel — just the question */
.nac--embed .nac__bar,
.nac--embed .nac__head{ display:none; }
.nac--embed .nac__side{ display:none; }
.nac--embed .nac__drawerTab{ display:none; }

.nac--embed .nac__body{ grid-template-columns:1fr; overflow:visible; min-height:0; }
.nac--embed .nac__main{ display:block; overflow:visible; }
.nac--embed .nac__scroll{
  overflow:visible;
  padding:clamp(20px,3vw,36px);
}
/* the section supplies its own heading, so the step title starts smaller */
.nac--embed .nac__title{ font-size:clamp(26px,3.4vw,40px); }

/* engaged: the work order unfolds */
.nac--embed.is-engaged .nac__bar{ display:flex; }
.nac--embed.is-engaged .nac__head{ display:flex; }

@media(min-width:861px){
  .nac--embed.is-engaged .nac__body{
    grid-template-columns:minmax(0,1fr) minmax(268px,332px);
  }
  .nac--embed.is-engaged .nac__side{
    display:block;
    position:static; transform:none; max-height:none;
    border-left:1px solid var(--rule); box-shadow:none;
  }
}

/* on narrow screens the punch list stays a drawer, as it does standalone */
@media(max-width:860px){
  .nac--embed.is-engaged .nac__side{
    display:block;
    position:fixed; left:0; right:0; bottom:0;
    border-left:0; border-top:1.5px solid var(--ink);
  }
  .nac--embed.is-engaged .nac__drawerTab{ display:flex; }
  .nac--embed.is-engaged .nac__scroll{ padding-bottom:78px; }
}

/* first-run affordance, replaced by the progress strip once engaged */
.nac__kick{
  display:flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-dim);
  margin-bottom:14px;
}
.nac__kick::before{
  content:""; width:7px; height:7px; background:var(--yellow); flex:none;
}
.nac--embed.is-engaged .nac__kick{ display:none; }