:root {
  --ink: #0E1B2C; --ink2: #33445A; --muted: #55657A; --line: #DCE3EC; --line2: #EEF1F5;
  --bg: #F6F8FB; --card: #FFFFFF; --brand: #1E5BD8; --brand-dark: #0E3E9E; --brand-soft: #EAF1FD;
  --g: #12935A; --y: #D9A400; --o: #E8731B; --r: #D64545;
  --ok-bg: #E8F6EF; --warn-bg: #FFF6E0; --err-bg: #FDECEC;
  --radius: 14px;
  --head: 'Bricolage Grotesque', 'Public Sans', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 15px/1.55 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--ink); background: var(--bg); }
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }
h1, h2, h3 { font-family: var(--head); letter-spacing: -0.01em; margin: 0; }
h1 { font-size: 28px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
.boot { padding: 80px; text-align: center; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: ui-monospace, 'JetBrains Mono', Menlo, monospace; }
.hidden { display: none !important; }

/* ---------- buttons and fields */
button, .btn { font: inherit; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--brand); background: var(--brand);
  color: #fff; cursor: pointer; text-decoration: none; white-space: nowrap; }
button:hover, .btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
button.ghost, .btn.ghost { background: #fff; color: var(--brand); border-color: var(--line); }
button.ghost:hover, .btn.ghost:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }
button.danger { background: #fff; color: var(--r); border-color: var(--line); }
button.danger:hover { border-color: var(--r); background: var(--err-bg); }
button.link { background: none; border: 0; color: var(--brand); padding: 0; min-height: 0; font-weight: 600; }
button.link:hover { text-decoration: underline; background: none; }
button.sm, .btn.sm { min-height: 34px; padding: 5px 11px; font-size: 13px; border-radius: 8px; }
button:disabled { opacity: .55; cursor: default; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #9BBDF5; outline-offset: 1px; }
label.f { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--ink2); }
input, select, textarea { font: inherit; font-weight: 400; color: var(--ink); padding: 9px 12px; min-height: 42px;
  border: 1px solid #C9D3DF; border-radius: 10px; background: #fff; width: 100%; }
input.code { font-size: 26px; letter-spacing: .35em; text-align: center; font-weight: 600; }
.hint { font-size: 13px; color: var(--muted); font-weight: 400; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spacer { flex: 1; }

/* ---------- messages */
.msg { padding: 10px 14px; border-radius: 10px; font-size: 14px; border: 1px solid; }
.msg.err { background: var(--err-bg); border-color: #F3B3B3; color: #8E1F1F; }
.msg.ok { background: var(--ok-bg); border-color: #A9DCC3; color: #0B6B40; }
.msg.warn { background: var(--warn-bg); border-color: #F0D78C; color: #6B5300; }
#toast { position: fixed; right: 20px; bottom: 20px; z-index: 2000; max-width: 380px; }

/* ---------- sign-in screens */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.auth .card { width: 100%; max-width: 440px; padding: 30px; }
.auth h1 { font-size: 26px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand span { font-family: var(--head); font-weight: 700; font-size: 21px; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.google { background: #fff; color: var(--ink); border-color: #C9D3DF; width: 100%; }
.google:hover { background: #F6F8FB; color: var(--ink); border-color: #9AA9BC; }
.choice { display: grid; gap: 10px; }
.choice button { justify-content: flex-start; text-align: left; white-space: normal; padding: 14px 16px; background: #fff;
  color: var(--ink); border-color: var(--line); flex-direction: column; align-items: flex-start; gap: 2px; }
.choice button:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--ink); }
.choice button small { font-weight: 400; color: var(--muted); }
.qr { display: flex; justify-content: center; background: #fff; padding: 8px; border: 1px solid var(--line); border-radius: 12px; }
.qr svg { width: 200px; height: 200px; }
.codes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; padding: 14px 18px; background: var(--bg);
  border: 1px dashed #9AA9BC; border-radius: 12px; font-size: 16px; }

/* ---------- app shell */
.main { padding: 28px 32px 60px; min-width: 0; }
.page-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head .spacer { min-width: 10px; }
.crumb { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.crumb a { color: var(--muted); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: 0 1px 2px rgba(14, 27, 44, .04); }
.card + .card { margin-top: 18px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; align-items: start; }

/* ---------- tables */
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line2); vertical-align: middle; }
th { color: var(--muted); font-weight: 600; font-size: 13px; white-space: nowrap; background: #FAFBFD; }
thead th:first-child { border-top-left-radius: 8px; } thead th:last-child { border-top-right-radius: 8px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.click { cursor: pointer; }
tr.click:hover td { background: #F8FAFD; }
tr.me td { background: #EEF6F1; font-weight: 600; }
td select { min-height: 34px; padding: 4px 8px; font-size: 13px; width: auto; }
.empty { text-align: center; padding: 40px 20px; color: var(--muted); }
.empty p { max-width: 46ch; margin: 6px auto 16px; }
.eic { display: inline-flex; width: 56px; height: 56px; border-radius: 16px; background: var(--brand-soft); color: var(--brand); align-items: center; justify-content: center; margin-bottom: 12px; }
.eic .ic { width: 28px; height: 28px; }
.empty h3 { color: var(--ink); margin-bottom: 6px; }

/* ---------- chips, metrics */
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: var(--line2); color: var(--ink2); white-space: nowrap; }
.chip.ok { background: var(--ok-bg); color: #0B6B40; }
.chip.run { background: var(--brand-soft); color: var(--brand-dark); }
.chip.bad { background: var(--err-bg); color: #8E1F1F; }
.chip.warn { background: var(--warn-bg); color: #6B5300; }
.up { color: var(--g); font-weight: 600; }
.down { color: var(--r); font-weight: 600; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.tile .k { font-size: 13px; color: var(--muted); }
.tile .v { font-family: var(--head); font-size: 30px; font-weight: 700; line-height: 1.15; margin-top: 2px; }
.tile .d { font-size: 13px; margin-top: 2px; }
.tile.score { background: var(--ink); border-color: var(--ink); color: #fff; }
.tile.score .k, .tile.score .d { color: #C9D3DF; }
.tile .of { font-size: 16px; font-weight: 600; opacity: .7; margin-left: 2px; }
.bar { height: 8px; border-radius: 99px; background: var(--line2); overflow: hidden; min-width: 80px; }
.bar i { display: block; height: 100%; background: var(--g); }

/* ---------- map */
.map { height: 520px; border-radius: 12px; border: 1px solid var(--line); z-index: 0; }
.map.small { height: 380px; }
.pin { width: 30px; height: 30px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 12px; display: flex; align-items: center;
  justify-content: center; border: 2px solid rgba(255,255,255,.95); box-shadow: 0 1px 3px rgba(0,0,0,.35); font-family: 'Public Sans', sans-serif; }
.legend { display: flex; gap: 16px; font-size: 13px; color: var(--muted); flex-wrap: wrap; margin: 10px 0 0; }
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.biz { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.biz li { padding: 9px 12px; border-bottom: 1px solid var(--line2); cursor: pointer; display: flex; gap: 10px; }
.biz li:last-child { border-bottom: 0; }
.biz li:hover { background: #F2F6FC; }
.biz li.sel { background: var(--brand-soft); font-weight: 600; }
.biz .n { color: var(--muted); width: 22px; flex: none; text-align: right; }
.pin.home { box-shadow: 0 0 0 3px var(--ink), 0 1px 3px rgba(0,0,0,.35); }
.report-head { display: none; }

@media (max-width: 860px) {
  .hide-sm { display: none; }
  .main { padding: 20px 16px 48px; }
  .map { height: 420px; }
}
@media print {
  .side, .top, .scrim, .noprint, #toast { display: none !important; }
  .shell { display: block; }
  .main { padding: 0; }
  body { background: #fff; }
  .card, .tile { border-color: #ccc; break-inside: avoid; }
  .report-head { display: block; margin-bottom: 14px; }
  .map { height: 460px; }
}

/* comparison: business names wrap in narrow columns */
table.cmp th.bizname { white-space: normal; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink);
  min-width: 120px; max-width: 180px; width: 160px; line-height: 1.35; vertical-align: bottom; overflow-wrap: anywhere; }
table.cmp td:first-child { min-width: 190px; }
table.cmp.details td { max-width: 220px; line-height: 1.45; overflow-wrap: anywhere; }

/* ---------- icons */
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
button.sm .ic, .btn.sm .ic { width: 16px; height: 16px; }
.iconbtn { padding: 0 !important; width: 34px; min-width: 34px; }
.nowrap { white-space: nowrap; }
td.kw { min-width: 200px; }
td .sched { max-width: 150px; }

/* card heading: icon tile + title + actions on the right */
.card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.card-head h2 { font-size: 19px; }
.hic { width: 36px; height: 36px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.card .sub { margin: 0 0 12px 48px; }
@media (max-width: 860px) { .card .sub { margin-left: 0; } }

/* side navigation */
.avatar { width: 34px; height: 34px; border-radius: 50%; background: #22385A; color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* MapFootprint Score: a ring filled to the score in its rank colour */
.ring { --p: 0; --c: var(--g); position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--line2) 0); vertical-align: middle; }
.ring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--card); }
.ring b { position: relative; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }

/* status chips */
.chip .sd { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
.chip .spin { width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; display: inline-block; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* messages with icons */
.banner, .toast { display: flex; align-items: flex-start; gap: 10px; }
.banner { margin-bottom: 16px; }
.banner .ic, .toast .ic { margin-top: 2px; }
.toast { box-shadow: 0 8px 24px rgba(14, 27, 44, .16); animation: rise .18s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .chip .spin, .toast { animation: none; } }

h2.hi { display: flex; align-items: center; gap: 12px; font-size: 19px; }
h2.hi .hic { width: 34px; height: 34px; }

/* ---------- page frame: dark top bar, light side menu that folds to icons */
.shell { --top: 58px; --side: 236px; display: grid; grid-template-columns: var(--side) minmax(0, 1fr); grid-template-rows: var(--top) 1fr;
  grid-template-areas: "top top" "side main"; min-height: 100vh; transition: grid-template-columns .18s ease; }
.shell.icons { --side: 72px; }
.top { grid-area: top; position: sticky; top: 0; z-index: 1100; background: var(--ink); color: #fff; display: flex; align-items: center; gap: 6px; padding: 0 14px 0 10px; }
.top .brand { color: #fff; text-decoration: none; display: flex; align-items: center; gap: 9px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 19px; padding: 0 14px 0 4px; white-space: nowrap; }
.tbtn { background: none; border: 0; color: #DCE5F0; width: 42px; height: 42px; min-height: 0; padding: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; position: relative; cursor: pointer; }
.tbtn:hover, .tbtn[aria-expanded="true"] { background: #1D2F47; color: #fff; }
.tbtn .ic { width: 21px; height: 21px; }
.tbtn .avatar { width: 32px; height: 32px; font-size: 14px; background: var(--brand); }
.badge { position: absolute; top: 4px; right: 3px; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 10px; background: #E5484D; color: #fff; font-size: 11px; font-weight: 700; line-height: 15px; text-align: center; border: 2px solid var(--ink); box-sizing: border-box; }
.tpop { position: relative; }

.gsearch { position: relative; flex: 1; max-width: 620px; display: flex; align-items: center; gap: 8px; background: #17283E; border: 1px solid #2B4262; border-radius: 10px; padding: 0 10px 0 12px; height: 40px; color: #9FB0C6; }
.gsearch:focus-within { border-color: #6E9BEA; background: #1B2E47; }
.gsearch input { flex: 1; min-width: 0; background: transparent; border: 0; color: #fff; min-height: 0; height: 38px; padding: 0; }
.gsearch input::placeholder { color: #9FB0C6; }
.gsearch input:focus { outline: none; box-shadow: none; }
kbd { font: 600 11px/1 'Public Sans', sans-serif; border: 1px solid currentColor; border-radius: 5px; padding: 2px 6px; opacity: .75; }

.pop { position: absolute; top: calc(100% + 8px); right: 0; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(14, 27, 44, .18); padding: 6px; z-index: 1200; min-width: 270px; max-height: 70vh; overflow-y: auto; }
.pop.gres { left: 0; right: 0; }
.pop.notes { width: 380px; }
.pop a, .pop .menu-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 500; width: 100%; background: none; border: 0; min-height: 0; text-align: left; font-size: 14.5px; cursor: pointer; }
.pop a:hover, .pop .menu-item:hover, .pop a.sel { background: var(--brand-soft); }
.pop a .ic, .pop .menu-item .ic { color: var(--muted); }
.pop hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.menu-label { font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 8px 10px 4px; }
.pop .none { padding: 10px; color: var(--muted); font-size: 14px; }
.me-head { padding: 10px 10px 8px; border-bottom: 1px solid var(--line); margin-bottom: 6px; line-height: 1.4; }
.me-head strong, .me-head span { display: block; } .me-head span { color: var(--muted); font-size: 13.5px; }
.hit .ht, .note .ht { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.35; }
.hit .ht span, .note .ht span { color: var(--muted); font-size: 13px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.hit .ht span { white-space: nowrap; }
.hit .hk { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.hic.sm { width: 30px; height: 30px; border-radius: 8px; } .hic.sm .ic { width: 16px; height: 16px; color: var(--brand) !important; }
.note { align-items: flex-start !important; }
.note.new { background: #F3F7FE; }
.note .when { font-size: 12px !important; margin-top: 2px; }
.nic { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.nic .ic { width: 16px; height: 16px; }
.nic.ok { background: #E7F6EE; } .nic.ok .ic { color: var(--g) !important; }
.nic.err { background: #FDECEC; } .nic.err .ic { color: var(--r) !important; }
.nic.warn { background: #FFF6DD; } .nic.warn .ic { color: #9A7400 !important; }
.nic.info { background: var(--brand-soft); } .nic.info .ic { color: var(--brand) !important; }

.side { grid-area: side; position: sticky; top: var(--top); height: calc(100vh - var(--top)); background: var(--card); border-right: 1px solid var(--line);
  padding: 14px 12px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overflow-x: hidden; }
.side .nav { color: var(--ink); text-decoration: none; padding: 10px 12px; border-radius: 10px; font-weight: 500; display: flex; gap: 12px; align-items: center;
  white-space: nowrap; background: none; border: 0; min-height: 0; width: 100%; text-align: left; position: relative; cursor: pointer; font-size: 15px; }
.side .nav .ic { color: var(--muted); width: 20px; height: 20px; }
.side .nav:hover { background: #F1F4F9; }
.side .nav.on { background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; }
.side .nav.on .ic { color: var(--brand); }
.side .nav.on::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
.side-gap { flex: 1; }
.side .collapse { color: var(--muted); border-top: 1px solid var(--line); border-radius: 0; margin-top: 6px; padding-top: 14px; }
.shell.icons .side { padding: 14px 10px; }
.shell.icons .side .nav { justify-content: center; padding: 10px 0; }
.shell.icons .side .nav span { display: none; }
.shell.icons .side .nav.on::before { left: -10px; }
.main { grid-area: main; }
.scrim { display: none; }

@media (max-width: 860px) {
  .shell, .shell.icons { --side: 0px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; }
  .top { gap: 2px; padding: 0 8px 0 4px; }
  .top .brand span { display: none; }
  .top .brand { padding: 0 6px; }
  .gsearch kbd { display: none; }
  .pop.notes { width: min(380px, calc(100vw - 24px)); }
  .tpop .pop { position: fixed; top: 64px; right: 12px; left: 12px; }
  .side { position: fixed; top: var(--top); left: 0; bottom: 0; height: auto; width: 264px; z-index: 1150; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 10px 40px rgba(14, 27, 44, .25); }
  .shell.drawer .side { transform: none; }
  .shell.icons .side .nav span { display: inline; }
  .shell.icons .side .nav { justify-content: flex-start; padding: 10px 12px; }
  .side .collapse { display: none; }
  .scrim { display: block; position: fixed; inset: var(--top) 0 0 0; background: rgba(14, 27, 44, .35); z-index: 1140; }
  .scrim[hidden] { display: none; }
}
@media (prefers-reduced-motion: reduce) { .shell, .side { transition: none; } }

/* ---------- help */
.help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.help-card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink); }
.help-card:hover { border-color: #B9CCF0; }
.help-wrap:not(.home) { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; }
.help-nav { position: sticky; top: calc(var(--top) + 20px); display: flex; flex-direction: column; gap: 2px; }
.help-nav a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 14.5px; }
.help-nav a .ic { color: var(--muted); width: 17px; height: 17px; }
.help-nav a:hover { background: #F1F4F9; }
.help-nav a.on { background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; } .help-nav a.on .ic { color: var(--brand); }
.help-article { max-width: 760px; padding: 28px 32px; }
.help-article h1 { margin: 6px 0 4px; }
.help-article .lead { font-size: 17px; margin: 0 0 18px; }
.help-article h3 { margin: 22px 0 6px; font-size: 17px; }
.help-article p, .help-article li { line-height: 1.65; max-width: 70ch; }
.help-article table { margin: 10px 0; }
.help-article hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0 12px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; margin-right: 4px; }
.dot.g { background: var(--g); } .dot.y { background: var(--y); } .dot.o { background: var(--o); } .dot.r { background: var(--r); }
@media (max-width: 860px) { .help-wrap:not(.home) { grid-template-columns: 1fr; } .help-nav { position: static; flex-direction: row; overflow-x: auto; } .help-nav a span { white-space: nowrap; } .help-article { padding: 20px; } }