/* NutriLabels v2 — design system */
:root {
  --bg: #eef1f5; --bg-grad: linear-gradient(160deg, #eef2f7 0%, #e9edf4 60%, #eef0f6 100%);
  --panel: #ffffff; --panel2: #fbfcfd;
  --border: #e3e8ee; --border2: #d3dae3;
  --text: #16212c; --muted: #6b7684; --faint: #98a2b0;
  --brand: #002E5F; --brand2: #7ab300; --brand-dark: #00224a; /* NutriLabels navy+green (July 9) */
  --brand-grad: linear-gradient(135deg, #003a77 0%, #00224a 100%);
  --ink-grad: linear-gradient(180deg, #003263 0%, #00224a 100%);
  --danger: #d64541; --warn: #c98a1b; --info: #3273c6;
  --shadow-sm: 0 1px 2px rgba(22,33,44,.06), 0 1px 6px rgba(22,33,44,.05);
  --shadow-md: 0 2px 6px rgba(22,33,44,.07), 0 10px 28px rgba(22,33,44,.09);
  --shadow-lg: 0 6px 16px rgba(22,33,44,.12), 0 22px 48px rgba(22,33,44,.16);
  --r: 12px; --r-sm: 8px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  background: var(--bg-grad); color: var(--text); -webkit-font-smoothing: antialiased; }
a { color: var(--brand); text-decoration: none; }
h1 { font-size: 21px; font-weight: 700; letter-spacing: -.2px; margin: 0; }
h2 { font-size: 15px; font-weight: 700; margin: 20px 0 10px; }
h3 { font-size: 13px; font-weight: 700; margin: 0 0 8px; color: var(--text); }

/* ---------- shell ---------- */
#app { display: flex; min-height: 100vh; }
nav.side { width: 216px; flex-shrink: 0; background: var(--ink-grad); color: #b9c8dc; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
nav.side a.nav { display: flex; align-items: center; gap: 11px; margin: 2px 10px; padding: 9px 12px; border-radius: 9px; color: #b9c8dc; font-weight: 600; font-size: 13.5px; transition: background .15s, color .15s; }
nav.side a.nav:hover { background: rgba(255,255,255,.07); color: #fff; }
nav.side a.nav.active { background: var(--brand-grad); color: #fff; box-shadow: 0 2px 10px rgba(0,46,95,.35); }
nav.side a.nav svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .9; }
/* The rail's footer is the account area: who is signed in, and the way out. It is on every
   page, which is the point — signing out used to mean finding it inside Settings. (Sep 8) */
nav.side .foot { margin-top: auto; padding: 14px 14px 16px; font-size: 11.5px; color: #7189a8;
  border-top: 1px solid rgba(255,255,255,.10); }
nav.side .foot .who { padding: 0 4px 10px; line-height: 1.35; overflow: hidden; }
nav.side .foot .who b { display: block; color: #fff; font-size: 12.5px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
nav.side .foot .who span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
nav.side .foot .signout { display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; background: transparent; color: #b9c8dc; box-shadow: none; font-size: 12.5px;
  font-weight: 600; padding: 8px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 9px; }
nav.side .foot .signout:hover { background: rgba(255,255,255,.08); color: #fff; filter: none; transform: none; }
nav.side .foot .signout:focus-visible { outline: 2px solid #97D700; outline-offset: 2px; }
nav.side .foot .signout svg { width: 15px; height: 15px; opacity: .9; }
main { flex: 1; padding: 22px 30px 60px; max-width: 1340px; min-width: 0; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.topbar .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crumb { color: var(--faint); font-weight: 600; font-size: 13px; }
.crumb a { color: var(--muted); }

/* global search */
.gsearch { position: relative; width: 320px; }
.gsearch input { width: 100%; padding: 8px 12px 8px 34px; border-radius: 999px; border: 1px solid var(--border2); background: #fff 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='%2398a2b0' stroke-width='2.4'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>") 12px 50% no-repeat; box-shadow: var(--shadow-sm); }

/* ---------- panels & cards ---------- */
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); padding: 18px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.panel.tight { padding: 12px 14px; }
.cardrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.qcard { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .15s, box-shadow .15s, border-color .15s; overflow: hidden; }
.qcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #d5e8a8; }
.qcard .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 10px; background: var(--brand-grad); color: #fff; box-shadow: 0 3px 10px rgba(0,46,95,.3); }
.qcard .ic.blue { background: linear-gradient(135deg,#3d82d6,#2f5fc0); box-shadow: 0 3px 10px rgba(61,130,214,.3); }
.qcard .ic.amber { background: linear-gradient(135deg,#e8a23d,#d97e22); box-shadow: 0 3px 10px rgba(232,162,61,.3); }
.qcard .ic.violet { background: linear-gradient(135deg,#8f6ad6,#6d4dbb); box-shadow: 0 3px 10px rgba(143,106,214,.3); }
.qcard b { display: block; font-size: 14.5px; letter-spacing: -.1px; }
.qcard span { color: var(--muted); font-size: 12.5px; }
.qcard .new { position: absolute; top: 12px; right: 12px; }

.statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); padding: 13px 16px; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .15s; }
.stat:hover { transform: translateY(-1px); }
.stat b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.5px; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { font-size: 12px; color: var(--muted); font-weight: 600; }

/* ---------- forms ---------- */
label.f { display: block; font-size: 12px; color: var(--muted); margin-bottom: 10px; min-width: 0; }
label.f > span { display: block; margin-bottom: 4px; font-weight: 650; color: #4a5563; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; }
input, select, textarea { font: inherit; padding: 7px 10px; border: 1px solid var(--border2); border-radius: var(--r-sm); background: #fff; color: var(--text); width: 100%; transition: border-color .12s, box-shadow .12s; }
input:hover, select:hover, textarea:hover { border-color: #b9c3cf; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand2); box-shadow: 0 0 0 3px rgba(151,215,0,.28); }
input[disabled], select[disabled], textarea[disabled] { background: var(--panel2); color: var(--muted); }
input[type=checkbox] { width: auto; accent-color: var(--brand); }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex-shrink: 0; }
.grow { flex: 1; min-width: 140px; }
.grid2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
@media (max-width: 1100px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

button, .btn { font: inherit; font-weight: 650; font-size: 13.5px; padding: 8px 15px; border: 0; border-radius: 9px; cursor: pointer; background: var(--brand-grad); color: #fff; box-shadow: 0 1px 3px rgba(0,46,95,.35); transition: filter .12s, transform .12s, box-shadow .12s; display: inline-flex; align-items: center; gap: 6px; }
button:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 3px 9px rgba(0,46,95,.35); }
button:active { transform: none; }
button.sec { background: #fff; color: var(--text); border: 1px solid var(--border2); box-shadow: var(--shadow-sm); }
button.sec:hover { border-color: #b9c3cf; filter: none; }
button.ghost { background: transparent; color: var(--brand); box-shadow: none; }
button.ghost:hover { background: rgba(0,46,95,.08); filter: none; transform: none; }
button.danger { background: linear-gradient(135deg,#e05752,#c73b37); box-shadow: 0 1px 3px rgba(214,69,65,.35); }
button.sm { padding: 4px 10px; font-size: 12px; border-radius: 7px; }
button.icon { padding: 6px 8px; }

/* ---------- pill tabs ---------- */
.tabs { display: inline-flex; background: #e7ebf0; border-radius: 999px; padding: 3px; gap: 2px; margin-bottom: 14px; flex-wrap: wrap; }
.tabs button { background: transparent; color: var(--muted); box-shadow: none; padding: 6px 15px; border-radius: 999px; font-size: 13px; }
.tabs button:hover { filter: none; transform: none; color: var(--text); }
.tabs button.on { background: #fff; color: var(--text); box-shadow: var(--shadow-sm); }

/* filter chips */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { padding: 5px 13px; border-radius: 999px; border: 1px solid var(--border2); background: #fff; color: var(--muted); font-weight: 600; font-size: 12.5px; cursor: pointer; transition: all .12s; box-shadow: none; }
.chip:hover { border-color: var(--brand2); color: var(--brand); filter: none; transform: none; }
.chip.on { background: var(--brand-grad); border-color: transparent; color: #fff; }

/* ---------- tables ---------- */
.tablewrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--r); background: #fff; box-shadow: var(--shadow-sm); }
table.list { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.list th { position: sticky; top: 0; background: var(--panel2); text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--faint); font-weight: 700; padding: 9px 12px; border-bottom: 1px solid var(--border); z-index: 2; }
table.list th.num, table.list td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.list td { padding: 8px 12px; border-bottom: 1px solid #edf0f4; }
table.list tbody tr:last-child td { border-bottom: 0; }
table.list tr.click { cursor: pointer; }
table.list tbody tr.click:hover td { background: #f6faeb; }
table.list td input { padding: 4px 8px; }

/* ---------- badges/tags ---------- */
.tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; background: #eceff3; color: var(--muted); vertical-align: 1px; }
.tag.custom { background: #f2fadb; color: #5a8500; }
/* converter: the ingredient choices. The selected one has to be unmistakable — picking the
   wrong olive oil is a 7% error on every volume in the recipe. */
.pickrow { font-weight: 400; }
.pickrow.active { background: #eef6e3; border-color: #9cc46a; font-weight: 600; }
/* Verdict tags on the ingredient-weight review. Green means the arithmetic agrees with the
   expected batch weight, red means it does not — the colour is doing real work here, so each
   also carries a word, for anyone who cannot separate them. */
.tag.good { background: #dff3e4; color: #1a6b34; }
.tag.close { background: #fdf1d6; color: #8a5a00; }
.tag.bad { background: #fbe3e1; color: #a3231b; }
.tag.unknown { background: #eceff3; color: #5b6472; }
.tag.recipe { background: #dcebfd; color: #23539e; }
.tag.usda_foundation, .tag.usda_sr, .tag.usda_branded { background: #fcefcd; color: #8a5c10; }
.tag.legacy_ref { background: #fddede; color: #a02b28; }
.tag.origin-web { background: #dbe8f7; color: #002e5f; }   /* delivered to a website customer */
.tag.origin-local { background: #eaf6cf; color: #4c6a00; } /* client work on this Mac */
dialog.labelviewer { border: none; border-radius: 14px; padding: 0; max-width: 860px; width: 92vw; box-shadow: 0 20px 60px rgba(0,0,0,.28); }
dialog.labelviewer::backdrop { background: rgba(0,20,40,.35); }

/* issues */
.issue { display: flex; gap: 8px; align-items: baseline; padding: 8px 12px; border-radius: 9px; margin: 5px 0; font-size: 13px; border: 1px solid transparent; }
.issue.error { background: #fdecec; color: #8f2320; border-color: #f6cbca; }
.issue.warn { background: #fdf4dc; color: #7a5410; border-color: #f1dfae; }
.issue.info { background: #e8f1fd; color: #23539e; border-color: #cadefa; }
.issue.ok { background: #e2f6ec; color: #0b6e50; border-color: #bce8d4; }

/* ---------- search dropdown ---------- */
.search-drop { position: relative; }
.search-drop .opts { position: absolute; z-index: 50; top: calc(100% + 4px); left: 0; right: 0; min-width: 340px; background: #fff; border: 1px solid var(--border); border-radius: 10px; max-height: 320px; overflow: auto; box-shadow: var(--shadow-lg); }
.search-drop .opts .opt { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #f2f4f7; }
.search-drop .opts .opt:last-child { border-bottom: 0; }
.search-drop .opts .opt:hover { background: #f6faeb; }
.search-drop .opts .opt .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-drop .opts .opt .kc { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ---------- label editor layout ---------- */
.labelgrid { display: grid; grid-template-columns: minmax(420px, 1fr) minmax(340px, 460px); gap: 18px; align-items: start; }
@media (max-width: 1150px) { .labelgrid { grid-template-columns: 1fr; } }
.previewcard { position: sticky; top: 18px; }
.labelpreview { background: repeating-conic-gradient(#f2f4f7 0% 25%, #fafbfc 0% 50%) 0 0/22px 22px; border: 1px solid var(--border); border-radius: var(--r); padding: 26px; display: flex; justify-content: center; overflow: auto; max-height: 78vh; }
.labelpreview svg { background: #fff; box-shadow: var(--shadow-md); }

/* nutrient editor grid */
.nutgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 9px; }
.nutgrid label.f { margin: 0; }

/* ---------- misc ---------- */
.muted { color: var(--muted); font-size: 12.5px; }
.empty { text-align: center; color: var(--faint); padding: 40px 10px; }
.empty .big { font-size: 34px; margin-bottom: 6px; }
/* Sign-in: ONE card, centred in the viewport and comfortably wide. #app is display:flex, so the
   page is centred with margin:auto on both axes rather than fighting the flex context. */
.login-wrap { margin: auto; width: 100%; max-width: 460px; padding: 24px; }
.login-card { background: var(--panel); border: 1px solid var(--border); border-radius: 18px;
  padding: 40px 42px 32px; box-shadow: 0 10px 26px rgba(0,46,95,.10), 0 30px 70px rgba(0,46,95,.14); }
.login-hero { text-align: center; margin-bottom: 26px; }
.login-hero h1 { font-size: 27px; font-weight: 800; letter-spacing: -.4px; color: var(--brand); }
.login-hero h1 b { color: #7ab300; font-weight: 800; }
.login-hero p { margin: 6px 0 0; font-size: 13px; }
.login-card label.f { margin-bottom: 16px; }
.login-card label.f > span { font-size: 11px; letter-spacing: .5px; }
.login-card input { padding: 11px 13px; font-size: 15px; border-radius: 10px; }
.login-card button { width: 100%; justify-content: center; padding: 12px 18px; font-size: 15px; border-radius: 10px; margin-top: 4px; }
.login-foot { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border);
  text-align: center; font-size: 11.5px; color: var(--faint); }
@media (max-width: 520px) { .login-card { padding: 30px 24px 24px; } }

#toasts { position: fixed; bottom: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { background: #1d2a33; color: #fff; padding: 10px 16px; border-radius: 10px; box-shadow: var(--shadow-lg); font-size: 13.5px; animation: slidein .2s ease; max-width: 380px; }
.toast.err { background: #7e2422; }
@keyframes slidein { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

dialog { border: 0; border-radius: 14px; box-shadow: var(--shadow-lg); padding: 0; max-width: 860px; width: min(92vw, 860px); }
dialog::backdrop { background: rgba(15,25,32,.45); backdrop-filter: blur(2px); }
dialog .dhead { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); }
dialog .dbody { padding: 16px 18px; max-height: 70vh; overflow: auto; }

.kpi { display: inline-flex; flex-direction: column; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel2); min-width: 110px; }
.kpi b { font-size: 17px; font-variant-numeric: tabular-nums; }
.kpi span { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.bar { height: 7px; border-radius: 99px; background: #e7ebf0; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 99px; background: var(--brand-grad); }
.bar i.over { background: linear-gradient(135deg,#e8a23d,#d6564d); }

.statusbar { position: fixed; bottom: 0; left: 216px; right: 0; background: rgba(255,255,255,.86); backdrop-filter: blur(8px); border-top: 1px solid var(--border); padding: 5px 26px; font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; z-index: 40; }

/* ---------- reports ---------- */
.report { background: #fff; border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-sm); padding: 34px 40px; max-width: 860px; }
.report .rhead { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 3px solid var(--brand); padding-bottom: 10px; margin-bottom: 16px; }
.report .rhead h1 { font-size: 24px; }
.report .rhead .meta { text-align: right; color: var(--muted); font-size: 12px; }
/* The printed report's letterhead: the lockup above the generation details, right aligned.
   Navy on white, the same as the account cards. */
.report .rhead .meta .brandlock { justify-content: flex-end; gap: 9px; margin-bottom: 7px; }
.report .rhead .meta .brandlock .logomark { width: 19px; height: 31px; }
.report .rhead .meta .logo-word { font-size: 13px; color: var(--brand); }
.report h2 { border-bottom: 1px solid var(--border); padding-bottom: 4px; margin-top: 24px; }
.report table.list th { position: static; }
.report .disclaimer { margin-top: 22px; padding-top: 8px; border-top: 1px solid var(--border); color: var(--faint); font-size: 11px; }

@media print {
  .report { border: 0; box-shadow: none; padding: 0; max-width: none; }
  nav.side, .no-print, button, .topbar .actions, .statusbar, #toasts { display: none !important; }
  body { background: #fff; } main { padding: 0; max-width: none; }
  .panel, .tablewrap { border: 0; box-shadow: none; }
  .labelpreview { border: 0; background: #fff; max-height: none; padding: 0; }
  .labelpreview svg { box-shadow: none; }
  .labelgrid { grid-template-columns: 1fr; }
  /* Aug 31: no page-break rules existed here either, so trailing blocks orphaned onto a
     second sheet. Keep rows, KPIs and the disclaimer with their content. */
  @page { margin: 12mm; }
  tr, .kpi, .issue, .report .disclaimer { break-inside: avoid; page-break-inside: avoid; }
  thead { display: table-header-group; }
  h2, h3 { break-after: avoid; page-break-after: avoid; }
  .report .disclaimer { break-before: avoid; page-break-before: avoid; margin-top: 14px; }
}

/* ── NutriLabels rebrand (July 9): green accents to match the branded reports ── */
nav.side a.nav.active { background: #97D700; color: #00224a; box-shadow: 0 2px 10px rgba(151,215,0,.30); }
h1, h2 { color: #002E5F; }
.panel > h3 { color: #002E5F; }
.tag.rep { background: #f2fadb; color: #5a8500; border: 1px solid #dcefad; }
.tag.rep:hover { background: #e7f5c2; }
.bar i { background: linear-gradient(90deg, #97D700, #7ab300); }

/* ── product-type picker (David, Aug 31) ── */
dialog.ptpicker { width: min(94vw, 900px); }
.ptgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.ptcard { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  background: #fff; border: 1px solid var(--border2); color: var(--text); box-shadow: none;
  padding: 10px 12px; border-radius: 10px; }
.ptcard:hover { border-color: #97D700; background: #f6faeb; filter: none; transform: none; }
.ptcard b { font-size: 13px; font-weight: 650; line-height: 1.25; }
.ptcard span { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.chip.pt { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
.chip.pt-compact { max-width: 260px; font-size: 11.5px; padding: 4px 11px; }

/* Account-lifecycle screens (reset, confirmation, signup). Sep 7. */
.login-links { display:flex; justify-content:space-between; gap:12px; margin-top:14px; font-size:13px; }
.login-links a { color:var(--accent, #1f6f43); text-decoration:none; }
.login-links a:hover { text-decoration:underline; }

/* ── BRAND LOCKUP (David, Sep 8) ─────────────────────────────────────────────
   ONE asset. The mark, the wordmark and the space between them live in a single viewBox, so a
   context sets a WIDTH and nothing else. There is deliberately no `gap` anywhere below: the
   spacing used to be a CSS property here, in a different rule from the thing it spaced, and a
   rescale dropped it — the mark and the wordmark rendered touching, measured at 0px apart.
   Spacing that belongs to the logo now lives inside the logo.

   The mark is fixed brand green inside the file. The wordmark is currentColor, so `color` is the
   only thing a context changes: navy on white, white on the navy rail. */
.brandlock { display: block; line-height: 0; }
.brandlock svg { display: block; width: 100%; height: auto; }

/* Signed-out cards: navy on white. */
.login-hero .brandlock { width: 180px; margin: 0 auto 16px; color: var(--brand); }

/* The navy rail: white wordmark, and the lockup links back to the dashboard.
   The rail is 216px; 18px of side padding leaves 180px, and 131px fills 73% of it.
   The stroke is a 1px border on the brand block itself, so it runs the full width of the rail
   with no padding either side. */
nav.side .brand { display: block; padding: 20px 18px 16px; border-bottom: 1px solid #97D700; }
nav.side .brand .brandlink { display: block; color: #fff; text-decoration: none;
  border-radius: 8px; transition: opacity .12s; }
nav.side .brand .brandlink:hover { opacity: .82; }
nav.side .brand .brandlink:focus-visible { outline: 2px solid #97D700; outline-offset: 4px; }
nav.side .brand .brandlock { width: 131px; margin: 0 auto; }

/* The printed analysis report's letterhead, right aligned above the generation details. */
.report .rhead .meta .brandlock { width: 112px; margin: 0 0 7px auto; color: var(--brand); }