/* ============================================================================
   THE SCAN — the homepage's reason to exist.

   Mobile first: the field is thumb reachable, findings are tappable rows that
   open a sheet rather than expanding in place, and the primary action docks to
   the bottom of the viewport once there is something worth acting on.

   Loaded alongside gn.css. Kept separate so the scan can be dropped onto other
   surfaces (a /scan route, a shareable report page) without the whole system.
   ============================================================================ */

.gn-hero { padding: clamp(28px, 6vw, 64px) var(--gut) 0; max-width: var(--max); margin: 0 auto; }
.gn-badge {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
  color: var(--ink2); border: 1px solid var(--line); background: var(--bg2);
  padding: 4px 11px 4px 5px; border-radius: 999px; margin-bottom: 16px;
}
.gn-badge b {
  background: var(--ink); color: var(--bg); font-size: 10.5px; font-weight: 580;
  padding: 2px 7px; border-radius: 999px; letter-spacing: .01em;
}
.gn-hero h1 { max-width: 17ch; margin: 0 0 12px; }
.gn-lede { font-size: 16px; line-height: 1.5; color: var(--ink2); max-width: 54ch; margin: 0 0 20px; }
.gn-lede b { color: var(--ink); font-weight: 530; }

.gn-run { display: grid; gap: 8px; max-width: 540px; margin: 0 0 10px; }
@media (min-width: 560px) { .gn-run { grid-template-columns: 1fr auto; } }
.gn-field {
  display: flex; align-items: center; gap: 9px; height: 50px; padding: 0 14px;
  background: var(--bg); border: 1px solid var(--line2); border-radius: 11px;
  transition: border-color .14s, box-shadow .14s;
}
.gn-field:focus-within { border-color: var(--ac); box-shadow: 0 0 0 3px var(--actint); }
.gn-field svg { width: 15px; height: 15px; color: var(--ink3); flex: none; }
.gn-field input {
  flex: 1; border: 0 !important; outline: 0; background: none;
  min-height: 0 !important; padding: 0 !important; font-size: 16px;
  box-shadow: none !important; border-radius: 0;
}
.gn-go {
  height: 50px; padding: 0 20px; border: 0; border-radius: 11px;
  background: var(--ac); color: var(--acink); font-size: 15px; font-weight: 530;
  cursor: pointer; white-space: nowrap; transition: opacity .13s;
}
.gn-go:hover { opacity: .9; }
.gn-go[disabled] { opacity: .5; cursor: default; }
.gn-micro { font-size: 12.5px; color: var(--ink3); margin: 0 0 26px; }

/* ------------------------------------------------------------ report card */

.gn-report { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut) 8px; }
.gn-card {
  border: 1px solid var(--line); border-radius: 14px; background: var(--bg);
  overflow: hidden; box-shadow: 0 1px 2px rgba(8,9,10,.04), 0 12px 34px -26px rgba(8,9,10,.3);
}
.gn-chead {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 13px; border-bottom: 1px solid var(--line); background: var(--bg2);
}
.gn-ct { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gn-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink3); flex: none; transition: background .2s, box-shadow .2s; }
.gn-dot.on { background: var(--ac); box-shadow: 0 0 0 3px var(--actint); }
.gn-dot.done { background: var(--ok); }
.gn-dot.err { background: var(--bad); }
.gn-ct code { font-family: var(--mo); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gn-cstat { font-family: var(--mo); font-size: 11px; color: var(--ink3); white-space: nowrap; }

/* The chip strip was a horizontal scroller with the scrollbar hidden: at 390px
   it held 439px of chips in a 353px box, so two of the five scan results — the
   score and the pricing — sat off the right edge with nothing indicating they
   were there. A hidden scrollbar on a swipe strip is the carousel pattern this
   project rules out, and these chips are the summary of the scan, not a
   browsable gallery. They wrap now; nothing is off-screen at any width. */
.gn-strip { display: flex; flex-wrap: wrap; gap: 6px; padding: 11px 13px; border-bottom: 1px solid var(--line); }
.gn-chip {
  display: flex; align-items: center; gap: 6px; flex: none; font-size: 12px;
  color: var(--ink3); border: 1px solid var(--line); background: var(--bg);
  border-radius: 999px; padding: 5px 11px 5px 7px; transition: .2s;
}
.gn-chip i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--line2); display: grid; place-items: center; flex: none; }
.gn-chip i svg { width: 7px; height: 7px; color: var(--bg); opacity: 0; }
.gn-chip[data-s="run"] { border-color: var(--ac); color: var(--ink); }
.gn-chip[data-s="run"] i { border-color: var(--ac); border-right-color: transparent; animation: gnspin .7s linear infinite; }
.gn-chip[data-s="done"] { color: var(--ink); border-color: var(--line2); }
.gn-chip[data-s="done"] i { background: var(--ink); border-color: var(--ink); }
.gn-chip[data-s="done"] i svg { opacity: 1; }
@keyframes gnspin { to { transform: rotate(360deg); } }

.gn-fh { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 13px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--ink3); }
.gn-segs { display: flex; gap: 2px; background: var(--bg3); padding: 2px; border-radius: 8px; }
.gn-segs button { font-size: 12px; padding: 5px 11px; border: 0; background: none; border-radius: 6px; cursor: pointer; color: var(--ink2); }
.gn-segs button[aria-pressed="true"] { background: var(--bg); color: var(--ink); box-shadow: 0 1px 2px rgba(8,9,10,.09); }

.gn-empty { display: grid; place-items: center; min-height: 172px; font-size: 13.5px; color: var(--ink3); text-align: center; padding: 24px; line-height: 1.55; }

.gn-fi {
  display: flex; gap: 11px; width: 100%; text-align: left; background: none;
  border: 0; border-bottom: 1px solid var(--line); padding: 13px;
  align-items: flex-start; cursor: pointer; transition: background .12s;
}
.gn-fi:last-of-type { border-bottom: 0; }
.gn-fi:hover { background: var(--bg2); }
.gn-sev { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; flex: none; }
.gn-sev.high { background: var(--bad); }
.gn-sev.med { background: var(--warn); }
.gn-sev.low { background: var(--ink3); }
.gn-ft { flex: 1; min-width: 0; }
.gn-f1 { display: block; font-size: 14.5px; font-weight: 510; line-height: 1.35; letter-spacing: -.01em; }
.gn-f2 { display: block; font-size: 13px; color: var(--ink2); line-height: 1.45; margin-top: 3px; }
.gn-fend { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; padding-top: 1px; }
.gn-cost { font-family: var(--mo); font-size: 12.5px; color: var(--bad); white-space: nowrap; font-weight: 500; }
.gn-cost.z { color: var(--ink3); }
.gn-chev { width: 16px; height: 16px; color: var(--ink3); }

/* ------------------------------------------------------------ money model */

.gn-cf { border-top: 1px solid var(--line); background: var(--bg2); padding: 13px; }
.gn-big { border: 1px solid var(--line2); border-radius: 11px; background: var(--bg); padding: 14px; margin-bottom: 11px; }
.gn-big .n { font-size: clamp(28px, 7vw, 34px); font-weight: 560; letter-spacing: -.035em; line-height: 1; color: var(--bad); font-variant-numeric: tabular-nums; }
.gn-big .u { font-size: 12.5px; color: var(--ink3); margin-top: 5px; line-height: 1.45; }
.gn-big .yr { font-size: 13px; color: var(--ink2); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.gn-big .yr b { color: var(--ink); font-weight: 550; }
.gn-inputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.gn-inp label { display: block; font-size: 11px; color: var(--ink3); margin-bottom: 4px; line-height: 1.3; }
.gn-inp div { display: flex; align-items: center; gap: 3px; height: 42px; padding: 0 9px; background: var(--bg); border: 1px solid var(--line2); border-radius: 8px; }
.gn-inp div:focus-within { border-color: var(--ac); box-shadow: 0 0 0 3px var(--actint); }
.gn-inp span { font-size: 12.5px; color: var(--ink3); }
.gn-inp input {
  width: 100%; border: 0 !important; outline: 0; background: none; font-size: 16px;
  font-family: var(--mo); min-width: 0; min-height: 0 !important; padding: 0 !important;
  box-shadow: none !important; border-radius: 0;
}
.gn-formula {
  font-family: var(--mo); font-size: 11.5px; color: var(--ink2); margin-top: 9px;
  line-height: 1.75; background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px; overflow-x: auto; white-space: nowrap;
}
.gn-formula b { color: var(--ink); font-weight: 600; }
@media (min-width: 820px) {
  .gn-cf { display: grid; grid-template-columns: 1fr 300px; gap: 14px; align-items: start; }
  .gn-big { margin-bottom: 0; order: 2; }
}

.gn-cant { max-width: var(--max); margin: 0 auto; padding: 12px var(--gut) 0; }
.gn-cant > div { border: 1px dashed var(--line2); border-radius: 10px; padding: 12px; font-size: 12.5px; color: var(--ink3); line-height: 1.55; }
.gn-cant b { color: var(--ink2); font-weight: 530; }

/* ----------------------------------------------------------------- sheet */

.gn-scrim { position: fixed; inset: 0; z-index: 1200; background: rgba(8,9,10,.42); opacity: 0; pointer-events: none; transition: opacity .24s; }
.gn-scrim.on { opacity: 1; pointer-events: auto; }
.gn-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1201; background: var(--bg);
  border-radius: 18px 18px 0 0; transform: translateY(101%);
  transition: transform .3s cubic-bezier(.32,.72,0,1); max-height: 88vh;
  display: flex; flex-direction: column; box-shadow: 0 -8px 40px -12px rgba(8,9,10,.3);
}
.gn-sheet.on { transform: none; }
@media (min-width: 820px) {
  .gn-sheet { left: auto; right: 14px; bottom: 14px; top: 14px; width: 470px; border-radius: 14px; max-height: none; transform: translateX(115%); }
  .gn-sheet.on { transform: none; }
}
.gn-grab { width: 36px; height: 4px; border-radius: 99px; background: var(--line2); margin: 9px auto 0; flex: none; }
@media (min-width: 820px) { .gn-grab { display: none; } }
.gn-sh { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px 11px; border-bottom: 1px solid var(--line); }
.gn-sh .gn-sev { margin-top: 7px; }
.gn-sht { flex: 1; min-width: 0; }
.gn-sht h3 { font-size: 17px; font-weight: 540; letter-spacing: -.018em; line-height: 1.3; margin: 0; }
.gn-sht p { font-size: 13.5px; color: var(--ink2); margin: 4px 0 0; line-height: 1.5; }
.gn-shx { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); display: grid; place-items: center; cursor: pointer; flex: none; }
.gn-shx svg { width: 14px; height: 14px; color: var(--ink2); }
.gn-sb { padding: 13px 15px; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.gn-dl { font-size: 11px; color: var(--ink3); margin: 0 0 6px; font-weight: 520; letter-spacing: .02em; text-transform: uppercase; }
.gn-sb pre {
  font-family: var(--mo); font-size: 12px; line-height: 1.6; background: var(--bg3);
  border: 1px solid var(--line); border-radius: 9px; padding: 11px; overflow-x: auto;
  color: var(--ink); white-space: pre-wrap; word-break: break-word;
}
.gn-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13px; margin: 14px 0 0; }
.gn-kv dt { color: var(--ink3); }
.gn-kv dd { color: var(--ink); font-weight: 500; margin: 0; }
.gn-sf { padding: 12px 15px calc(12px + var(--safe)); border-top: 1px solid var(--line); background: var(--bg2); display: grid; gap: 8px; }
@media (min-width: 560px) { .gn-sf { grid-template-columns: 1fr 1fr; } }
.gn-btn { height: 46px; border-radius: 10px; border: 1px solid var(--line2); background: var(--bg); font-size: 14.5px; font-weight: 520; cursor: pointer; display: grid; place-items: center; }
.gn-btn.ac { background: var(--ac); color: var(--acink); border-color: var(--ac); }

/* ------------------------------------------------------------------ dock */

.gn-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
  padding: 9px var(--gut) calc(9px + var(--safe));
  background: rgba(255,255,255,.9); border-top: 1px solid var(--line);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  display: flex; align-items: center; gap: 10px;
  transform: translateY(140%); transition: transform .32s cubic-bezier(.32,.72,0,1);
}
.gn-dock.on { transform: none; }
.gn-dockt { flex: 1; min-width: 0; }
.gn-dockt b { display: block; font-size: 13.5px; font-weight: 540; letter-spacing: -.01em; line-height: 1.25; }
.gn-dockt span { display: block; font-size: 12px; color: var(--ink3); line-height: 1.35; margin-top: 1px; }
.gn-dockb {
  height: 42px; padding: 0 15px; border-radius: 10px; background: var(--ink);
  color: var(--bg); border: 0; font-size: 14px; font-weight: 530; cursor: pointer;
  white-space: nowrap; flex: none;
}