/* ═══════════════════════════════════════════════════════════════════════════
   Free Federal Opportunity Go/No-Go — page styles.

   Restraint is the whole design: white background, black text, one orange
   accent (#FF6B00, the site's own), and grey only for hierarchy. A visitor who
   has never seen this page should never have to decode what a colour means —
   the words carry the meaning, the orange marks the one thing to click next.

   Font matches the rest of bidcoreai.com ('Segoe UI'), so the page reads as
   part of the site rather than an embedded app.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --gg-orange: #FF6B00;
  --gg-orange-dark: #E35F00;
  --gg-black: #000;
  --gg-grey: #666;
  --gg-line: #E4E4E4;
  --gg-soft: #F7F7F7;
  /* The one filled surface on the page: the row whose verdict is on screen. Warm
     rather than grey so it reads as "selected" beside the orange accent instead
     of as "disabled". Black on it is ~18:1, so nothing on the row loses contrast
     by being highlighted. */
  --gg-beige: #FAF2E8;
  --gg-font: 'Segoe UI', system-ui, -apple-system, sans-serif;
  /* The only colours on the page beyond the orange, and only for the verdict:
     GO green, NO-GO red, anything undecided orange. A bid/no-bid answer is the
     one thing here worth reading across a room. */
  --gg-go: #16A34A;
  --gg-nogo: #DC2626;
  /* Note for later: pastel fills were tried and measured — as a series set
     they fail even the normal-vision floor (ΔE 12), meaning full-colour
     readers cannot tell pastel green from pastel red apart. If they come back,
     they can only be surfaces, never the thing carrying the meaning. */
  --gg-radius: 10px;
  /* Header height. Everything sticky measures from this, so one change moves
     the header, the frozen toolbar and both sidebars together. */
  --gg-head-h: 63px;
}

.gg *, .gg *::before, .gg *::after { box-sizing: border-box; }

.gg {
  font-family: var(--gg-font);
  color: var(--gg-black);
  background: #fff;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── Header ── */
.gg-head {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 24px; border-bottom: 1px solid var(--gg-line);
  position: sticky; top: 0; background: #fff; z-index: 20;
}
.gg-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--gg-black); }
.gg-brand img { height: 26px; width: auto; }
.gg-brand span { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.gg-tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gg-orange); border: 1px solid var(--gg-orange); border-radius: 999px; padding: 3px 9px;
}
.gg-head-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.gg-usage { font-size: 12.5px; color: var(--gg-grey); }

/* ── Layout ──
   Two widths on purpose. Sign-up and the setup steps stay narrow, because a
   paragraph and a single form are unreadable stretched across a wide monitor.
   The workspace does the opposite: three columns of dense data, so it takes
   the whole screen and only stops at 1800px, past which the result list's line
   lengths get uncomfortable. */
.gg-wrap { max-width: 900px; margin: 0 auto; padding: 40px 24px 80px; }
.gg-wrap--wide { max-width: 1100px; }
.gg-wrap--full { max-width: 1800px; padding: 22px 26px 60px; }

.gg-card {
  border: 1px solid var(--gg-line); border-radius: var(--gg-radius);
  padding: 28px; background: #fff;
}
.gg-card + .gg-card { margin-top: 16px; }

h1.gg-h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 14px; }
h2.gg-h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 6px; }
h3.gg-h3 { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.gg-lead { font-size: 16px; color: var(--gg-grey); margin: 0 0 26px; max-width: 56ch; }
.gg-sub { font-size: 13.5px; color: var(--gg-grey); margin: 0 0 22px; }
.gg-muted { color: var(--gg-grey); }

/* ── Buttons: exactly one filled style, so "what do I press" is never a question ── */
.gg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--gg-font); font-size: 15px; font-weight: 600; line-height: 1;
  padding: 13px 22px; border-radius: var(--gg-radius); border: 1px solid transparent;
  background: var(--gg-orange); color: #fff; cursor: pointer;
  transition: background .15s, opacity .15s;
}
.gg-btn:hover:not(:disabled) { background: var(--gg-orange-dark); }
.gg-btn:disabled { opacity: .45; cursor: not-allowed; }
.gg-btn--block { width: 100%; }
.gg-btn--ghost { background: #fff; color: var(--gg-black); border-color: var(--gg-line); }
.gg-btn--ghost:hover:not(:disabled) { background: var(--gg-soft); }
.gg-btn--small { font-size: 13px; padding: 9px 14px; }
.gg-btn--link {
  background: none; border: none; padding: 0; color: var(--gg-orange);
  font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.gg-btn--link:hover { text-decoration: underline; }

/* ── Inputs ── */
.gg-field { margin-bottom: 18px; }
.gg-label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.gg-hint { font-size: 12.5px; color: var(--gg-grey); margin-top: 6px; line-height: 1.5; }
.gg-input {
  width: 100%; font-family: var(--gg-font); font-size: 15px; color: var(--gg-black);
  padding: 12px 14px; border: 1px solid var(--gg-line); border-radius: var(--gg-radius);
  background: #fff; outline: none; transition: border-color .15s;
}
.gg-input::placeholder { color: #AAA; }
.gg-input:focus { border-color: var(--gg-orange); }
.gg-input--code { font-size: 26px; font-weight: 700; letter-spacing: 12px; text-align: center; }

/* A dollar amount. The $ sits inside the box but outside the value: it cannot be
   typed over, deleted, or posted, and the digits are indented to clear it.
   tabular-nums so a column of figures lines up digit for digit. */
.gg-money { position: relative; }
.gg-money-sign {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 15px; color: var(--gg-grey); pointer-events: none;
}
.gg-money .gg-input { padding-left: 30px; font-variant-numeric: tabular-nums; }
.gg-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }

/* ── Messages ── */
.gg-msg { font-size: 13.5px; border-radius: var(--gg-radius); padding: 12px 14px; margin-bottom: 16px; border: 1px solid var(--gg-line); }
.gg-msg--error { border-color: var(--gg-orange); }
.gg-msg--ok { background: var(--gg-soft); }

/* ── Steps ── */
.gg-steps { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; flex-wrap: wrap; }
.gg-step { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--gg-grey); }
.gg-step b { font-weight: 600; }
.gg-step-n {
  width: 24px; height: 24px; border-radius: 999px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  border: 1px solid var(--gg-line); background: #fff; color: var(--gg-grey);
}
.gg-step.is-active { color: var(--gg-black); }
.gg-step.is-active .gg-step-n { background: var(--gg-orange); border-color: var(--gg-orange); color: #fff; }
.gg-step.is-done .gg-step-n { background: var(--gg-black); border-color: var(--gg-black); color: #fff; }
.gg-step-line { width: 26px; height: 1px; background: var(--gg-line); }

/* ── Hero (signed out) ── */
.gg-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.gg-hero ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.gg-hero li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.gg-hero li svg { flex: 0 0 18px; margin-top: 3px; color: var(--gg-orange); }
@media (max-width: 860px) { .gg-hero { grid-template-columns: 1fr; gap: 36px; } }

/* Google button sits above the divider — the fastest route in, offered first. */
.gg-or { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--gg-grey); font-size: 12.5px; }
.gg-or::before, .gg-or::after { content: ''; flex: 1; height: 1px; background: var(--gg-line); }
#gg-google { display: flex; justify-content: center; min-height: 44px; }

/* ── Country choice ── */
.gg-choice {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  padding: 15px 17px; margin-bottom: 10px; cursor: pointer;
  border: 1px solid var(--gg-line); border-radius: var(--gg-radius); background: #fff;
  font-family: var(--gg-font); color: var(--gg-black); transition: border-color .15s;
}
.gg-choice:hover:not(:disabled) { border-color: var(--gg-black); }
.gg-choice.is-on { border-color: var(--gg-orange); border-width: 2px; padding: 14px 16px; }
.gg-choice:disabled { opacity: .45; cursor: not-allowed; }
.gg-choice-dot { width: 16px; height: 16px; border-radius: 999px; border: 1px solid #BBB; flex-shrink: 0; }
.gg-choice.is-on .gg-choice-dot { border: 5px solid var(--gg-orange); }
.gg-choice-name { font-size: 15px; font-weight: 600; }
.gg-choice-portal { font-size: 12.5px; color: var(--gg-grey); }
.gg-choice-soon { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--gg-grey); text-transform: uppercase; letter-spacing: .04em; }

/* ── Workspace layout: company profile at the left, work at the right ──
   The profile is reference material you adjust occasionally and read
   constantly ("why did it score that?"), so it belongs beside the results
   rather than buried under them. Sticky, so it stays put while a long list of
   opportunities scrolls. */
.gg-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
.gg-side {
  position: sticky; top: calc(var(--gg-head-h) + 16px);
  max-height: calc(100vh - var(--gg-head-h) - 32px);
  overflow-y: auto; overflow-x: hidden;
}
.gg-side .gg-field { margin-bottom: 12px; }
.gg-side .gg-input { font-size: 13.5px; padding: 9px 11px; }
/* Restated for the sidebar because the rule above resets padding wholesale and,
   at equal specificity, wins on order — the digits would print over the $. */
.gg-side .gg-money .gg-input { padding-left: 25px; }
.gg-side .gg-money-sign { left: 11px; font-size: 13.5px; }
.gg-side .gg-label { font-size: 12px; }
.gg-side-block { border-bottom: 1px solid var(--gg-line); padding-bottom: 16px; margin-bottom: 16px; }
.gg-side-block:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

/* ── The company panel's Save, pinned to the panel's own bottom edge ──
   Sticky rather than merely last: the fields, and Past performance under them,
   scroll behind it inside this box, so Save is in reach from anywhere in the
   panel and reaching it never moves the page. The white backing and the border
   are what stop scrolled content showing through it. */
/* The card gives up its bottom padding to the footer. Kept on the card, that
   padding sits BELOW the pinned footer inside the scrollport, and content scrolls
   through the strip — the lead-time select appeared under the Save button. With it
   at zero the footer's own padding does the spacing and nothing can pass beneath
   it. */
.gg-side--profile.gg-card { padding-bottom: 0; }
.gg-side-foot {
  position: sticky; bottom: 0; z-index: 2;
  background: #fff; border-top: 1px solid var(--gg-line);
  padding: 12px 0 14px;
}
/* "28 selected" under a collapsed picker looks exactly like a saved profile, so
   the one state the panel has to report is that it is NOT saved yet. Shown only
   when there are pending edits — a permanent caption would be noise. */
.gg-side-dirty {
  display: none;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--gg-orange); margin-bottom: 7px;
}
.gg-side-foot.is-dirty .gg-side-dirty { display: block; }
/* The footer draws the panel's last divider now, so the block above it stops
   drawing one — two lines 12px apart read as a mistake. Scoped: the analysis
   panel has side blocks of its own and no footer. */
.gg-side--profile .gg-side-block:nth-last-child(2) {
  border-bottom: none; padding-bottom: 0; margin-bottom: 12px;
}
.gg-side-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 12px; color: var(--gg-black);
}
/* The score panel is the one that must stay readable, so it keeps its column
   longest; the profile folds away first. */
@media (max-width: 1180px) {
  .gg-layout { grid-template-columns: minmax(0, 1fr) 320px; }
  .gg-layout > .gg-side:first-child { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .gg-layout { grid-template-columns: 1fr; }
  .gg-side { position: static; max-height: none; }
}

/* Right-hand score panel */
.gg-score-empty { font-size: 13.5px; color: var(--gg-grey); line-height: 1.6; }
.gg-score-for {
  font-size: 12.5px; font-weight: 600; line-height: 1.4; margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: 1px solid var(--gg-line);
}
.gg-side .gg-verdict { margin: 0 0 14px; }
.gg-side .gg-verdict-badge { width: 100%; }

/* ── Search + results ── */
.gg-search { display: flex; gap: 10px; align-items: center; }
.gg-search .gg-input { flex: 1; }
@media (max-width: 620px) { .gg-search { flex-direction: column; align-items: stretch; } }

.gg-result { border: 1px solid var(--gg-line); border-radius: var(--gg-radius); padding: 18px 20px; margin-bottom: 12px; }
.gg-result-top { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.gg-result-title { font-size: 15.5px; font-weight: 700; line-height: 1.35; margin-bottom: 4px; }
.gg-result-meta { font-size: 13px; color: var(--gg-grey); }
.gg-result-actions { display: flex; gap: 8px; margin-left: auto; flex-shrink: 0; }
/* The actions must be allowed to WRAP, not just to sit on their own line. Unable
   to wrap and with flex-shrink:0, the row's min-content — SAM.gov, Save, Go/No-Go,
   the dismiss × and now the verdict pill, side by side — was about 400px, and a
   grid track sized from that floor made the whole page wider than a 390px phone
   and scrollable sideways. Measured at 390: track 410px before this, 359 after. */
@media (max-width: 620px) {
  .gg-result-actions { margin-left: 0; width: 100%; flex-wrap: wrap; min-width: 0; }
}

/* ── Verdict: no colour coding beyond the one accent.
      GO is filled orange, REVIEW is outlined, NO-GO is filled black —
      three shapes, instantly distinguishable, still monochrome + orange. ── */
.gg-verdict { display: flex; align-items: center; gap: 14px; margin: 18px 0 16px; flex-wrap: wrap; }
.gg-verdict-badge {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: var(--gg-radius);
  border: 2px solid var(--gg-orange); color: var(--gg-orange);
}
.gg-verdict-badge.is-go { background: var(--gg-go); border-color: var(--gg-go); color: #fff; }
.gg-verdict-badge.is-nogo { background: var(--gg-nogo); border-color: var(--gg-nogo); color: #fff; }
/* A go with a condition attached: green, because it is a go, but outlined
   rather than filled, because it is not the clean one. */
.gg-verdict-badge.is-go-review { border-color: var(--gg-go); color: var(--gg-go); background: #fff; }
.gg-verdict-badge.is-go-review .gg-verdict-word { font-size: 14px; }
/* Undecided keeps the outline treatment: it is not a verdict, and should not
   look as settled as one. */
.gg-verdict-badge .gg-verdict-label { opacity: .75; }
.gg-verdict-score { font-size: 32px; font-weight: 800; line-height: 1; }
.gg-verdict-label { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.gg-verdict-word { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }

.gg-crit { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--gg-line); font-size: 13.5px; }
.gg-crit:last-child { border-bottom: none; }
.gg-crit-score { flex: 0 0 42px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gg-crit-name { font-weight: 600; }
.gg-crit-why { color: var(--gg-grey); }
.gg-crit.is-weak .gg-crit-score { color: var(--gg-orange); }

.gg-list-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 20px 0 8px; }

/* ── Setup checklist ── */
.gg-check { display: flex; flex-wrap: wrap; gap: 8px; }
.gg-chip {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
  padding: 7px 12px; border: 1px solid var(--gg-line); border-radius: 999px; background: #fff;
}
.gg-chip.is-done { border-color: var(--gg-black); }
.gg-chip.is-required { border-color: var(--gg-orange); color: var(--gg-orange); font-weight: 600; }
.gg-chip-box { width: 13px; height: 13px; border-radius: 3px; border: 1px solid currentColor; flex-shrink: 0; }
.gg-chip.is-done .gg-chip-box { background: var(--gg-black); border-color: var(--gg-black); }

/* ── Collapsible ── */
.gg-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; padding: 0; cursor: pointer; font-family: var(--gg-font); color: var(--gg-black);
}
.gg-toggle-caret { margin-left: auto; color: var(--gg-grey); transition: transform .18s; }
.gg-toggle[aria-expanded="true"] .gg-toggle-caret { transform: rotate(180deg); }

.gg-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border: 1px solid var(--gg-line); border-radius: var(--gg-radius); margin-bottom: 8px; font-size: 14px;
}
.gg-row-x { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--gg-grey); font-size: 18px; line-height: 1; padding: 0 4px; }
.gg-row-x:hover { color: var(--gg-black); }

/* ── CTA ── */
.gg-cta {
  margin-top: 20px; border: 1px solid var(--gg-black); border-radius: var(--gg-radius); padding: 26px;
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
}
.gg-cta div { flex: 1; min-width: 260px; }

.gg-foot { margin-top: 32px; text-align: center; font-size: 12.5px; color: var(--gg-grey); line-height: 1.7; }
.gg-foot a { color: var(--gg-grey); }

/* ── Loading ── */
@keyframes gg-spin { to { transform: rotate(360deg); } }
.gg-spin { display: inline-block; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 999px; animation: gg-spin .7s linear infinite; }
.gg-skeleton { color: var(--gg-grey); font-size: 14px; padding: 20px 0; }

/* The result the score panel is currently describing. Beige as well as the
   outline: down a list of ten white cards an outline alone is easy to lose, and
   a filled row makes "this is the one the verdict belongs to" readable at a
   glance. A surface only — the border and the panel still carry the meaning, so
   nothing here depends on seeing the tint. */
.gg-result.is-selected {
  border-color: var(--gg-orange); border-width: 2px; padding: 17px 19px;
  background: var(--gg-beige);
}

/* ── Feed / Pipeline switch ── */
.gg-views { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.gg-view-btn {
  font-family: var(--gg-font); font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 9px 16px; border-radius: var(--gg-radius);
  border: 1px solid var(--gg-line); background: #fff; color: var(--gg-grey);
}
.gg-view-btn.is-on { border-color: var(--gg-orange); color: var(--gg-orange); border-width: 2px; padding: 8px 15px; }
.gg-view-count { font-weight: 700; margin-left: 6px; }

/* ── Pipeline: one column per stage, scrolling sideways like the app's board ── */
.gg-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.gg-col { flex: 0 0 230px; border: 1px solid var(--gg-line); border-radius: var(--gg-radius); background: #fff; }
.gg-col-head {
  display: flex; align-items: center; gap: 8px; padding: 11px 13px;
  border-bottom: 1px solid var(--gg-line); font-size: 12.5px; font-weight: 700;
}
.gg-col-count {
  margin-left: auto; font-size: 11px; font-weight: 700; color: var(--gg-grey);
  border: 1px solid var(--gg-line); border-radius: 999px; padding: 1px 8px; min-width: 24px; text-align: center;
}
/* Each stage scrolls in its own box.
   A column with six cards ran off the bottom of the page — and because the board
   is one row of columns, the only way to reach the last card was to scroll the
   whole page, which took every other column's cards away with it. Bounded and
   scrolling internally, every stage stays reachable from one position, and the
   column head — stage name, count, Clear — stays put above its own cards. */
.gg-col { display: flex; flex-direction: column; max-height: calc(100vh - var(--gg-head-h) - 175px); }
.gg-col-head { flex: 0 0 auto; }
.gg-col-body {
  padding: 10px; display: grid; gap: 8px; min-height: 60px;
  overflow-y: auto; align-content: start;
}
.gg-col-empty { font-size: 12px; color: #AAA; padding: 6px 3px; }

.gg-card-mini { border: 1px solid var(--gg-line); border-radius: 8px; padding: 10px 11px; }
.gg-card-mini-title { font-size: 12.5px; font-weight: 600; line-height: 1.35; margin-bottom: 5px; }
.gg-card-mini-meta { font-size: 11.5px; color: var(--gg-grey); margin-bottom: 8px; }
.gg-card-mini-foot { display: flex; align-items: center; gap: 6px; }
.gg-move {
  font-family: var(--gg-font); font-size: 12px; line-height: 1; cursor: pointer;
  border: 1px solid var(--gg-line); background: #fff; color: var(--gg-black);
  border-radius: 6px; padding: 5px 8px;
}
.gg-move:hover:not(:disabled) { border-color: var(--gg-orange); color: var(--gg-orange); }
.gg-move:disabled { opacity: .3; cursor: not-allowed; }
.gg-score-pill {
  font-size: 11px; font-weight: 700; border: 1px solid var(--gg-orange); color: var(--gg-orange);
  border-radius: 999px; padding: 1px 7px;
}
/* Pipeline badges follow the same code, so a board can be read at a glance. */
.gg-score-pill.is-go { border-color: var(--gg-go); color: #fff; background: var(--gg-go); }
.gg-score-pill.is-nogo { border-color: var(--gg-nogo); color: #fff; background: var(--gg-nogo); }
.gg-score-pill.is-go-review { border-color: var(--gg-go); color: var(--gg-go); background: #fff; }

/* ── Who's signed in, top left of the header ── */
.gg-who { display: flex; align-items: center; gap: 9px; padding: 4px 8px 4px 12px; border-left: 1px solid var(--gg-line); }
.gg-who-avatar {
  width: 30px; height: 30px; border-radius: 999px; flex-shrink: 0;
  background: var(--gg-orange); color: #fff; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.gg-who-name { font-size: 13px; font-weight: 600; line-height: 1.25; }
.gg-who-sub { font-size: 11.5px; color: var(--gg-grey); line-height: 1.25; }
/* The name and email are what there is no room for on a phone — the BUTTON has
   to stay. `display:none` on the whole thing used to take the account menu with
   it, and that menu is the only route to Settings, the API key and Sign out: a
   phone visitor could sign in and then had no way to change or replace the key
   they had just been asked for. */
@media (max-width: 700px) {
  .gg-who-text, .gg-who-caret { display: none; }
  /* Padding, not a bigger avatar: 30px of circle inside 6px of hit area is the
     42px a fingertip needs, with the design unchanged. */
  .gg-who { border-left: none; padding: 6px; gap: 0; border-radius: 999px; }
}


/* ── Frozen toolbar: view switch + filters + search ──
   These are controls, not content: scrolling a long result list should never
   take the view switch, the filters or the search box off screen. Sits directly
   under the sticky header, with a white backing so results pass behind it rather
   than through it.
   The search hint stays in the scroll — it describes rather than does, and every
   row that freezes is a row of results that does not fit. That cost is real on a
   phone: three frozen rows there is roughly a third of the screen, which is why
   each of them is compacted at 620px rather than simply carried over. */
.gg-topbar {
  position: sticky; top: var(--gg-head-h); z-index: 15;
  background: #fff; padding: 14px 0 12px; margin-top: -14px;
  border-bottom: 1px solid var(--gg-line); margin-bottom: 16px;
  display: grid; gap: 10px;
}
.gg-topbar .gg-views { margin-bottom: 0; }
.gg-topbar .gg-check { margin-bottom: 12px; }
/* The grid's gap spaces the rows now, so the bar's own margins would double it. */
.gg-topbar .gg-feed-head { margin-bottom: 0; }
/* Grid children default to stretching; the box must be free to shrink or a long
   value in it pushes the button off the edge. */
.gg-topbar .gg-search .gg-input { min-width: 0; }
.gg-who-caret { display: flex; color: var(--gg-grey); transition: transform .18s; }
.gg-who.is-open .gg-who-caret { transform: rotate(180deg); }

/* ── Profile menu ──
   Anchored under the header button it belongs to, not centred on the screen.
   An identity card, a readable list, sign out last — the arrangement people
   already know from every other account menu, so nobody has to learn it. */
.gg-menu-backdrop { position: fixed; inset: 0; z-index: 50; }
.gg-menu {
  /* Anchored to the right edge, under the button it belongs to. */
  position: absolute; top: calc(var(--gg-head-h) + 6px); right: 24px;
  width: 300px; background: #fff; border: 1px solid var(--gg-line);
  border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.16); overflow: hidden;
}
.gg-menu-card { text-align: center; padding: 22px 20px 18px; background: var(--gg-soft); }
.gg-menu-avatar {
  width: 56px; height: 56px; border-radius: 999px; margin: 0 auto 10px;
  background: var(--gg-orange); color: #fff; font-size: 24px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.gg-menu-name { font-size: 15px; font-weight: 700; }
.gg-menu-email { font-size: 12.5px; color: var(--gg-grey); word-break: break-all; }

.gg-menu-list { padding: 8px; }
.gg-menu-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 9px 10px; border-radius: 8px; border: none; background: none;
  font-family: var(--gg-font); font-size: 13.5px; color: var(--gg-black);
}
button.gg-menu-item { cursor: pointer; }
button.gg-menu-item:hover { background: var(--gg-soft); }
.gg-menu-icon { display: flex; color: var(--gg-grey); flex-shrink: 0; }
.gg-menu-label { flex: 1; min-width: 0; }
.gg-menu-value { font-size: 12.5px; color: var(--gg-grey); flex-shrink: 0; }
.gg-menu-sep { height: 1px; background: var(--gg-line); margin: 8px 2px; }

/* The header's profile button — plain, so it reads as identity not an action. */
button.gg-who { border: none; background: none; cursor: pointer; font-family: var(--gg-font); color: var(--gg-black); }
button.gg-who:hover { background: var(--gg-soft); border-radius: 8px; }

/* ── Feed pager: frozen at the foot of the feed ──
   Previous / Next are the counterpart of the frozen search at the top: paging is
   what you want at the END of reading a page of results, and it used to be
   reachable only by scrolling past every row — then scrolling back up to read
   the new page. Sticky at the bottom, it is under the thumb the whole way down.
   White backed and bordered, so rows pass behind it rather than through it. */
.gg-pager {
  position: sticky; bottom: 0; z-index: 14;
  background: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 4px; margin-top: 4px; border-top: 1px solid var(--gg-line); flex-wrap: wrap;
}
.gg-pager-info { font-size: 13px; }
button.gg-chip { cursor: pointer; font-family: var(--gg-font); }
button.gg-chip:hover { border-color: var(--gg-black); }

/* ── Settings ── */
.gg-set-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 20px; }
.gg-set-head .gg-btn { margin-left: auto; }
.gg-set-section { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--gg-line); }
.gg-set-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
/* Sign out sits alone at the foot, separated from every other control. */
.gg-set-signout {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 4px;
}
.gg-set-signout > div { flex: 1; min-width: 220px; }
.gg-set-signout .gg-btn { flex-shrink: 0; }

/* ── Label/value rows (Settings) ──
   Lost when the old centred profile modal's styles were removed; without them
   the label and its value ran together with no gap at all. */
.gg-prof-row {
  display: flex; gap: 20px; justify-content: space-between; align-items: baseline;
  font-size: 13.5px; padding: 9px 0; border-bottom: 1px solid var(--gg-line);
}
.gg-prof-row:last-child { border-bottom: none; }
.gg-prof-row > span:first-child { flex-shrink: 0; }
.gg-prof-row > span:last-child { text-align: right; word-break: break-word; font-weight: 600; }

/* ── Tick lists (set-asides, contract types) ──
   A fixed list rather than free text: the score compares these against what a
   notice requires, so the spelling has to match exactly. */
.gg-ticks {
  /* Columns fit themselves to whatever width the panel has been dragged to, so
     widening it actually reveals more per row instead of just stretching one
     column. No max-height: an inner scrollbar inside an already-scrolling
     sidebar means two things to scroll and neither shows the whole list. */
  display: grid; gap: 2px 10px;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  border: 1px solid var(--gg-line); border-radius: var(--gg-radius); padding: 8px;
  overflow-x: hidden;
}
.gg-tick {
  display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.35;
  padding: 5px 6px; border-radius: 6px; cursor: pointer;
  /* Grid items default to min-width:auto — the width of their longest
     unbreakable word — so a long label pushed the grid wider than the panel
     and produced a horizontal scrollbar. */
  min-width: 0;
}
.gg-tick span { min-width: 0; overflow-wrap: anywhere; }
.gg-tick:hover { background: var(--gg-soft); }
.gg-tick.is-on { font-weight: 600; }
.gg-tick input { margin-top: 2px; flex-shrink: 0; accent-color: var(--gg-orange); }

/* Clear a whole pipeline stage. */
.gg-col-clear {
  background: none; border: none; padding: 2px 4px; cursor: pointer;
  font-family: var(--gg-font); font-size: 11.5px; font-weight: 600; color: var(--gg-grey);
}
.gg-col-clear:hover { color: var(--gg-orange); text-decoration: underline; }
.gg-col-head .gg-col-count { margin-left: auto; }
.gg-feed-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 10px; font-size: 13px; }
.gg-feed-head .gg-col-clear { margin-left: auto; }

/* Feed toolbar controls sit inline with the count. */
.gg-feed-ctl { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--gg-grey); }
.gg-input--inline { width: auto; padding: 6px 10px; font-size: 12.5px; }
/* Bounded, so one long option cannot stretch the toolbar. */
.gg-input--place { max-width: 150px; }

/* ── Dismiss one feed row ── */
.gg-result-x {
  background: none; border: none; cursor: pointer; color: #BBB;
  font-size: 20px; line-height: 1; padding: 0 2px; align-self: center;
}
.gg-result-x:hover { color: var(--gg-black); }

/* ── Undo, bottom left, the way mail clients do it ── */
.gg-undo {
  position: fixed; left: 24px; bottom: 24px; z-index: 60;
  display: flex; align-items: center; gap: 16px;
  background: var(--gg-black); color: #fff; border-radius: var(--gg-radius);
  padding: 12px 16px; font-size: 13.5px; box-shadow: 0 10px 30px rgba(0,0,0,.25);
  max-width: min(460px, calc(100vw - 48px));
}
.gg-undo-btn {
  background: none; border: none; cursor: pointer; font-family: var(--gg-font);
  font-size: 13.5px; font-weight: 700; color: var(--gg-orange); padding: 0;
}
.gg-undo-btn:hover { text-decoration: underline; }

/* ── Collapsible pickers ── */
.gg-picker-head {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: none; border: none; padding: 2px 0 6px; cursor: pointer; font-family: var(--gg-font);
  color: var(--gg-black);
}
/* A hairline under each category.
   Collapsed, these rows are just a label, a count and a chevron — four of them
   stacked with the text fields between read as one undifferentiated column, and
   there was no way to see that "NAICS codes you hold" and "Set-asides you hold"
   are separate things to open. The line is the lightest thing that separates
   them: --gg-line is the same grey every other divider on the page uses. */
.gg-field--pick {
  border-bottom: 1px solid var(--gg-line);
  padding-bottom: 11px;
}
.gg-side .gg-field--pick { margin-bottom: 12px; }
.gg-picker-count { margin-left: auto; font-size: 12px; color: var(--gg-grey); }
.gg-picker-head .gg-toggle-caret { color: var(--gg-grey); transition: transform .18s; display: flex; }
.gg-picker-head[aria-expanded="true"] .gg-toggle-caret { transform: rotate(180deg); }
.gg-picker-summary {
  /* Selections wrap onto as many rows as they need instead of running off the
     edge — eight state codes on one line was unreadable and clipped. */
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 8px; border: 1px solid var(--gg-line); border-radius: var(--gg-radius);
}
.gg-picker-summary span {
  font-size: 11.5px; font-weight: 600; line-height: 1.2;
  background: var(--gg-soft); border-radius: 5px; padding: 3px 7px;
}

/* 56 states: narrower cells than the default, since "Virginia (VA)" is short.
   At the sidebar's minimum width that is two columns; drag it wider and it
   becomes three or four, with no scrollbar of its own at any width. */
.gg-ticks--cols { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

/* ── How the score was arrived at ──
   The arithmetic, shown. A bid decision should not have to be taken on trust
   from a single number. */
.gg-calc-head { font-size: 12px; color: var(--gg-grey); line-height: 1.5; margin: 12px 0 8px; }
.gg-calc { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.gg-calc th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--gg-grey); font-weight: 700; padding: 0 0 6px; border-bottom: 1px solid var(--gg-line);
}
.gg-calc td { padding: 8px 0; border-bottom: 1px solid var(--gg-line); vertical-align: top; }
.gg-calc .gg-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 10px; }
.gg-calc tr.is-weak .gg-num { color: var(--gg-orange); font-weight: 700; }
.gg-calc tr.is-neutral td { color: var(--gg-grey); }
.gg-calc-total td { font-weight: 800; border-bottom: none; padding-top: 10px; }

/* ── Resizable side panels ──
   Both side columns get a drag grip in their bottom-right corner (CSS resize),
   so the split between profile, results and analysis is the reader's to set —
   a long solicitation title and a long list of states want different widths,
   and no fixed guess suits both. Bounded so neither can be dragged to nothing
   or squeeze the results out. */
.gg-side {
  /* Drag the bottom-right grip to widen. Worth doing when a long list is open:
     the tick grids reflow to more columns as the panel grows. */
  resize: horizontal;
  min-width: 210px;
  max-width: 640px;
}
/* The grip only exists where the browser can draw it, which needs a scroll
   container — .gg-side already is one. */
@media (max-width: 860px) {
  /* Stacked on a phone, a horizontal drag has nothing to give. */
  .gg-side { resize: none; max-width: none; }
}

/* ── Tips ── */
.gg-tips { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--gg-line); }
.gg-tips-head { font-size: 13px; font-weight: 700; gap: 9px; }
.gg-tips-bulb { display: flex; color: var(--gg-orange); }
.gg-tips-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.gg-tips-list li { font-size: 12.5px; line-height: 1.5; }
.gg-tips-list--wide li { font-size: 13.5px; }
.gg-steps-list { margin: 0; padding-left: 20px; display: grid; gap: 7px; font-size: 13px; line-height: 1.5; }
.gg-steps-list li { padding-left: 2px; }
.gg-move--score {
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  background: var(--gg-orange); border-color: var(--gg-orange); color: #fff;
}
.gg-move--score:hover:not(:disabled) { background: var(--gg-orange-dark); border-color: var(--gg-orange-dark); color: #fff; }
.gg-card-mini.is-selected {
  border-color: var(--gg-orange); border-width: 2px; padding: 9px 10px;
  background: var(--gg-beige);   /* same mark as the feed's selected row */
}
.gg-side-title--icon { display: flex; align-items: center; gap: 8px; }

.gg-col-ttl {
  font-size: 10px; font-weight: 700; letter-spacing: .03em; color: var(--gg-grey);
  border: 1px solid var(--gg-line); border-radius: 4px; padding: 1px 5px; margin-left: 6px;
}

/* A card's verdict, above its controls: the number alone does not say what it
   means, and "74" beside "GO, review required" is the whole point. */
.gg-card-mini-verdict { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; flex-wrap: wrap; }
.gg-card-mini-word { font-size: 11px; font-weight: 700; letter-spacing: .02em; }

/* Pipeline: no company sidebar, so the board gets the space instead. */
.gg-layout--board { grid-template-columns: minmax(0, 1fr) 330px; }
@media (max-width: 860px) { .gg-layout--board { grid-template-columns: 1fr; } }
/* Narrower columns as well — eight stages should be scannable, not a slideshow. */
.gg-col { flex: 0 0 200px; }

/* What the one search box accepts. */
/* No top margin: the frozen bar above it already ends in a border and 16px of
   its own, and the hint used to sit under a search box that scrolled with it. */
.gg-search-hint { font-size: 12.5px; color: var(--gg-grey); margin: 0 0 14px; line-height: 1.6; }
.gg-eg {
  background: none; border: none; padding: 0; cursor: pointer; font-family: var(--gg-font);
  font-size: 12.5px; font-weight: 600; color: var(--gg-orange); text-decoration: underline;
}

/* ══ Dashboard ══════════════════════════════════════════════════════════
   One series, one hue, no legend — the title says what is counted. The bars
   rank the months at a glance; the values above them and the table below
   carry the actual numbers, because the brand orange is 2.78:1 on white and a
   mark that low must not be the only thing conveying data. */
.gg-dash-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }

.gg-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.gg-tile { border: 1px solid var(--gg-line); border-radius: var(--gg-radius); padding: 16px; }
.gg-tile-value { font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
/* Status colour on the number only, and never alone: the label beneath it
   always says which state this is. */
.gg-tile.is-go .gg-tile-value { color: var(--gg-go); }
.gg-tile.is-nogo .gg-tile-value { color: var(--gg-nogo); }
.gg-tile-label { font-size: 12.5px; font-weight: 600; margin-top: 4px; }
.gg-tile-note { font-size: 11.5px; color: var(--gg-grey); margin-top: 2px; }

.gg-chart {
  display: flex; align-items: flex-end; gap: 2px;   /* 2px surface gap between bars */
  height: 200px; margin: 8px 0 4px; overflow-x: auto; padding-top: 20px;
  /* A recessive baseline, so the bars are measured from something. */
  border-bottom: 1px solid var(--gg-line);
}
.gg-bar-slot {
  position: relative; flex: 1 1 44px; min-width: 44px; max-width: 90px;
  display: flex; flex-direction: column; height: 100%; cursor: default; outline: none;
}
.gg-bar-value { font-size: 12px; font-weight: 700; text-align: center; margin-bottom: 4px; }
.gg-bar-track { flex: 1; display: flex; align-items: flex-end; }
.gg-bar {
  width: 100%; background: var(--gg-orange);
  /* Rounded data-end, square against the baseline it is measured from. */
  border-radius: 4px 4px 0 0;
  transition: opacity .12s;
}
.gg-bar-slot.is-hover .gg-bar { opacity: .75; }
.gg-bar-slot:focus-visible .gg-bar { outline: 2px solid var(--gg-black); outline-offset: 2px; }
.gg-bar-label {
  font-size: 11px; color: var(--gg-grey); text-align: center; margin-top: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gg-bar-tip {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  background: var(--gg-black); color: #fff; font-size: 12px; line-height: 1.45;
  padding: 8px 10px; border-radius: 8px; white-space: nowrap; z-index: 5;
  box-shadow: 0 6px 20px rgba(0,0,0,.2); pointer-events: none;
}

/* ══ Phones ═════════════════════════════════════════════════════════════════
   This page is a three-column workspace on a desktop and a single stacked
   column on a phone. The stacking itself is handled above, next to the layout
   it changes; what follows is everything else that a thumb on a 360px-wide
   screen needs, kept together because it is one intent rather than one
   component.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  /* Stacked, the panels are full width, so the page gutter is all that is
     between the content and the edge of the screen — 26px of it is a waste of a
     narrow screen. */
  .gg-wrap--full { padding: 16px 14px 48px; }
  .gg-wrap { padding: 28px 16px 56px; }
  .gg-layout { gap: 14px; }

  /* Stacked, the DOM order is the reading order — and the DOM puts the company
     profile first, because on a desktop it is the left column. On a phone that
     meant a screenful of NAICS codes, set-asides, states and dollar limits
     before the search box the visitor came for. Work first, then the verdict,
     then the profile that tunes it. Nothing is lost: the SETUP chips in the
     analysis panel jump straight to whichever field is still empty. */
  .gg-main { order: 1; }
  #gg-score-panel { order: 2; }
  .gg-layout > .gg-side:first-child { order: 3; }
  /* The analysis panel is the reason for the page; stacked it reads as the
     document it is, not a narrow column. */
  .gg-side.gg-card { padding: 20px 18px; }
  /* Matched to the gutter above, so the frozen bar butts against the header
     instead of leaving a strip of page for results to scroll through. */
  .gg-topbar { margin-top: -16px; }

  /* Stacked, this panel loses the bounded height its desktop column gets, and
     Save then sits at the far end of the longest thing on the page. Bounded
     again so the fields scroll inside the box with Save pinned under them.
     max-height, not height: a panel with its sections collapsed shrinks to fit
     rather than leaving dead space above the footer. */
  .gg-side--profile { max-height: 76vh; overflow-y: auto; }
}

@media (max-width: 620px) {
  /* ── Header. Compact enough that the sticky bar does not eat the screen, and
        measured at runtime (syncHeadHeight) rather than assumed: the frozen
        toolbar hangs off --gg-head-h, and a guess leaves either a gap that
        results scroll through or a toolbar hidden behind the header. ── */
  .gg-head { padding: 10px 14px; gap: 10px; }
  .gg-brand img { height: 22px; }
  .gg-brand span { font-size: 15px; }
  /* The h1 underneath says "Free Go/No-Go" — the pill is decoration, and it is
     the first thing to go when the row has to hold identity as well. */
  .gg-tag { display: none; }
  .gg-head-right { gap: 10px; }
  .gg-usage { font-size: 11.5px; line-height: 1.3; text-align: right; }

  /* Still anchored to the right edge, but it can no longer be wider than the
     screen it is anchored in. */
  .gg-menu { top: calc(var(--gg-head-h) + 4px); right: 10px; left: 10px; width: auto; }
  .gg-menu-email { font-size: 12px; }

  /* iOS Safari zooms the page in whenever a focused field is smaller than 16px,
     and does not zoom back out — one tap in the search box and the whole
     workspace is wider than the screen for the rest of the visit. Every field
     that can take focus goes to 16px, including the sidebar's smaller ones and
     the inline toolbar selects. */
  .gg-input, .gg-side .gg-input, .gg-input--inline { font-size: 16px; }
  .gg-money-sign, .gg-side .gg-money-sign { font-size: 16px; }
  .gg-side .gg-input { padding: 11px 12px; }
  .gg-side .gg-money .gg-input { padding-left: 27px; }
  /* Bounded for a toolbar it no longer shares with three other controls. */
  .gg-input--place { max-width: none; }
  .gg-feed-ctl { flex: 1 1 auto; min-width: 140px; }
  .gg-feed-ctl select { flex: 1; }

  /* Inside the frozen bar the search stays one row. Stacked — which is what
     .gg-search does on its own at this width — the box and its button would
     freeze 110px of a screen that still has to show results. The button gives up
     padding, not its label: an unlabelled magnifier beside a text box is a
     guess, and this is the one control the page cannot afford to make ambiguous. */
  .gg-topbar { padding: 10px 0 10px; gap: 8px; }
  .gg-topbar .gg-search { flex-direction: row; align-items: center; gap: 8px; }
  .gg-topbar .gg-search .gg-btn { flex-shrink: 0; padding: 12px 14px; font-size: 14px; }

  /* The filters freeze too, so their row has to earn its height: tighter gaps,
     and the count sentence — which is the tallest part of it, and the part that
     only reports — set small and given the whole width so it wraps on its own
     line instead of pushing a select onto a third row. */
  .gg-topbar .gg-feed-head { gap: 6px 10px; font-size: 12px; }
  .gg-topbar .gg-feed-head > span:first-child { flex: 1 0 100%; }
  .gg-topbar .gg-feed-ctl { min-width: 128px; font-size: 12px; }

  /* ── Touch targets. These are 12-20px icons and 5px-padded chips designed for
        a cursor; a fingertip covers about 44px. Padding grows rather than the
        glyph, so nothing about the design changes except what is hittable. ── */
  .gg-result-x, .gg-row-x {
    min-width: 40px; min-height: 40px; display: flex;
    align-items: center; justify-content: center; padding: 0;
  }
  .gg-move { padding: 9px 12px; font-size: 13px; }
  .gg-col-clear { padding: 8px 6px; font-size: 12.5px; }
  .gg-view-btn { font-size: 13px; padding: 9px 13px; }
  .gg-view-btn.is-on { padding: 8px 12px; }
  .gg-btn--small { font-size: 14px; padding: 11px 16px; }
  /* A collapsed picker is a whole row to press, not just its label. */
  .gg-picker-head { padding: 9px 0; }
  .gg-tick { padding: 9px 6px; font-size: 13.5px; }
  .gg-tick input { width: 18px; height: 18px; }

  /* ── Content ── */
  .gg-card { padding: 20px 16px; }
  .gg-result { padding: 15px 14px; }
  .gg-verdict-score { font-size: 28px; }
  /* Four columns of arithmetic in a 330px panel: the reason text needs every
     pixel the numbers are not using. */
  .gg-calc { font-size: 12px; }
  .gg-calc .gg-num { padding-left: 7px; }
  /* One card fills the screen instead of one and a sliver, so a swipe moves
     between stages rather than nudging. */
  .gg-col { flex: 0 0 78vw; }
  /* The frozen pager is three items on one line if they fit, and every pixel it
     does not take is a row of results that stays visible. */
  .gg-pager { padding: 10px 2px; gap: 8px; }
  .gg-pager-info { font-size: 12px; }
  .gg-pager .gg-btn--small { padding: 9px 12px; font-size: 13px; }

  /* Full width at the foot: 24px of inset either side leaves a strip too narrow
     for the message and its Undo. */
  .gg-undo { left: 10px; right: 10px; bottom: 12px; max-width: none; padding: 12px 14px; }
  .gg-foot { font-size: 12px; }
}