/* assets/proposal-comments.css — PROPOSAL VIEW, the read-only + comment layer.
 *
 * ══ IT BORROWS EVERYTHING IT CAN AND OWNS AS LITTLE AS POSSIBLE ══════════
 *
 * Bea, on the first mockups: "the UI elements and components and almost
 * everything is the same as the normal calculator when its being used. So
 * you're not working on anything from scratch."
 *
 * So the controls in here are NOT new. The index overlay is the house
 * .bdwn-modal shell verbatim, the one every calculator overlay already uses,
 * down to its backdrop, panel, close button, title, body and empty state.
 * Buttons are .btn with .btn--amber and .btn--ghost. The composer's box is
 * .si-modal__textarea and its name field is .checkout-form__input. None of
 * those are restyled here; they arrive already painted by app.v2.css.
 *
 * WHAT THIS FILE ACTUALLY ADDS is only the four things the calculator has
 * never had: a mode bar, a comment cursor, a pin, and an anchored popover.
 *
 * ⏹️ ~~.hover-portal-tip as the popover shell.~~ It was the obvious reuse and
 * it cannot work: app.v2.css sets `pointer-events: none !important` on it, so
 * a textarea inside one could never be typed into. The popover therefore has
 * its own positioning but borrows .bdwn-modal__panel's SKIN, to the same
 * border, radius and shadow, so the two read as one family.
 *
 * SCOPED TO .gg-scope, like every other sheet here. The popover and the index
 * render into a host that carries the class, the way quote-share.js does with
 * #gg-share-scope, so they stay styled outside the mount element.
 *
 * NO EM DASH IN RENDERED COPY. The strings live in src/proposal-comments.js.
 */

/* ══ 1 · THE MODE BAR ════════════════════════════════════════════════════
   Not dismissible, on purpose. A closed banner means somebody presses a tier,
   watches nothing happen and concludes the page is broken.

   IT FOLLOWS THE READER, AND IT IS INSET. 14 Sept 2026, Bea. It sat flush to the
   window edges and scrolled away with the rest of the page, so a prospect three
   screens down had nothing left telling them the page is read-only and that a
   click leaves a comment. Sticky keeps the instruction where the instruction is
   needed.

   ⏹️ ~~z-index 40 is chosen, not arbitrary. The page content it rides over carries
   no z-index of its own (.step-indicator is position relative, z auto), so 40 is
   enough to clear it, and .mobile-bar is fixed at 90, so the phone call-to-action
   still wins. Anything higher would put this banner over that bar.~~

   Bea, 15 September 2026: "the sticky notice bar at the top should be the top most
   layer of the UI. Right now, opened comments are on top of it, it should be under
   the proposal view notice." 40 put it under both comment surfaces, so the one
   sentence telling a reader the page is read-only was covered by the threads.

   z-index 9995, and each neighbour was read rather than assumed. It now clears the
   comment cards at 9990 and the anchored popover, which comes down to 9991 in the
   same change for this to be possible at all. It stays UNDER .bdwn-modal at 9999,
   because a modal the reader opened should cover the notice, and under the comments
   panel, launcher and strip at 2147483644 and above, which are deliberate overlays
   and not page furniture.

   The struck-through note above was right that this must not cover the phone
   call-to-action. That bar is .mobile-bar, which is z-index 60 and not 90, so 9995
   does now outrank it. It is safe because the two cannot meet: this bar is sticky
   at the top of the document flow and .mobile-bar is fixed to the bottom of the
   window. Checked at 390px wide before shipping, not reasoned about alone.

   The fade is on the SCROLLED state only, and hover or keyboard focus takes it
   back to full, so a reader who wants to re-read it can. No backdrop-filter here
   deliberately: it would make this element a containing block for fixed
   descendants, which is the trap this estate has been bitten by before. */
.gg-scope .gg-pc-bar {
  position: sticky;
  top: 12px;
  z-index: 9995;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 1rem;
  margin: 12px 16px 1rem;
  border: 1px solid rgba(0, 42, 191, 0.18);
  /* 14px, ⏹️ ~~12px~~, 16 September 2026, Bea, and it is 14 because the frame is.
     .thin-glass-frame's corner art is drawn to FILL its 14px slice, so the curve
     it paints is a 14px curve. At 12px the bar cut that curve off square and left
     the notch in the report. Slice equals radius is the rule every other user of
     this frame follows; these two numbers move together or not at all. */
  border-radius: 14px;
  background: #eef2ff;
  color: #1a2c6b;
  box-shadow: 0 1px 2px rgba(15, 28, 53, 0.06);
  transition:
    opacity 160ms ease,
    box-shadow 160ms ease;
}

.gg-scope .gg-pc-bar--scrolled {
  opacity: 0.82;
  box-shadow: 0 6px 18px rgba(15, 28, 53, 0.12);
}

.gg-scope .gg-pc-bar--scrolled:hover,
.gg-scope .gg-pc-bar--scrolled:focus-within {
  opacity: 1;
}

/* ⏹️ ~~THE GLASS PANEL'S SLICE. The 9-slice component defaults to a 25px slice,
   which is cut for a card, so this bar took 16px.~~ Bea, 16 September: "the corners
   doesnt match the corners of the glass panel component."

   THE SLICE IS NOT SET HERE ANY MORE BECAUSE THE FRAME IS NOT THAT COMPONENT ANY
   MORE. The bar wears .thin-glass-frame, the frame the tier cards, role tiles,
   qualifier cards and decision cards all wear, at its own native 14px. A number
   set here would be the start of the same drift that caused the report: the
   corner art is drawn to fill its slice, so the moment the slice and the radius
   disagree the curve lands in the wrong place. The radius below is 14px for that
   reason and the two must move together or not at all. */

@media (prefers-reduced-motion: reduce) {
  .gg-scope .gg-pc-bar {
    transition: none;
  }
}

.gg-scope .gg-pc-bar__icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--gg-blue, #002abf);
  color: #fff;
}

.gg-scope .gg-pc-bar__txt {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.gg-scope .gg-pc-bar__lede {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gg-blue, #002abf);
  margin-bottom: 1px;
}

/* ══ THE COMMENT / ADJUST SWITCH ════════════════════════════════════
   Bea, 16 September 2026: make this match the estate's segmented control, the Build /
   Proposals / Contracts pill. That look is the portal's GGTabs, and this repo already
   carries the port in assets/referral-mode-tabs.css: a recessed grey well, neumorphic
   grey pills, and a glossy brand-blue pill for the selected one. The gradients and the
   two shadow stacks below are that file's, verbatim, so the switch and the referral tabs
   cannot drift; only the scale is smaller, because this sits inside the sticky notice bar
   rather than under a page title, which is the compact case that file's own --sm note
   describes. */
.gg-scope .gg-pc-seg {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(120, 130, 160, 0.3);
  border-radius: 11px;
  background: linear-gradient(180deg, #ececee 0%, #e2e3e8 100%);
  box-shadow:
    inset 0 1px 2px rgba(20, 28, 60, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.9);
}

.gg-scope .gg-pc-seg__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  appearance: none;
  -webkit-appearance: none;
  padding: 0.42rem 0.8rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: linear-gradient(109deg, #e6e6e6 13%, #e6e6e6 100%);
  color: #111111;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.005em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    -2px -2px 2px -1px rgba(255, 255, 255, 0.36),
    inset 1px 1.5px 2px rgba(255, 255, 255, 0.6),
    inset -2px -2px 2px rgba(140, 139, 137, 0.29),
    -2px -2px 8px rgba(224, 223, 222, 0.5),
    2px 2px 8px rgba(84, 84, 84, 0.14),
    inset -1px -4px 20px rgba(179, 179, 179, 0.36);
  transition:
    background 150ms ease,
    box-shadow 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

.gg-scope .gg-pc-seg__btn:hover:not([aria-pressed='true']) {
  background: linear-gradient(109deg, #eeeeee 13%, #eaeaea 100%);
  transform: translateY(-1px);
}

.gg-scope .gg-pc-seg__btn:active:not([aria-pressed='true']) {
  transform: translateY(0);
}

.gg-scope .gg-pc-seg__btn[aria-pressed='true'] {
  background: linear-gradient(109deg, #2e5dff 0%, #002abf 60%, #001b82 100%);
  color: #ffffff;
  box-shadow:
    -2px -2px 2px -1px rgba(255, 255, 255, 0.5),
    inset 1px 1.5px 2px rgba(219, 227, 255, 0.69),
    inset -2.5px -2px 2px rgba(123, 145, 227, 0.63),
    2px 2px 8px rgba(84, 84, 84, 0.35),
    inset -1px -4px 20px rgba(0, 31, 145, 0.8);
}

.gg-scope .gg-pc-seg__btn:focus-visible {
  outline: 2px solid var(--gg-blue, #002abf);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .gg-scope .gg-pc-seg__btn {
    transition:
      background 150ms ease,
      color 150ms ease;
  }
  .gg-scope .gg-pc-seg__btn:hover:not([aria-pressed='true']) {
    transform: none;
  }
}

/* ══ 2 · THE COMMENT CURSOR AND THE HOVER STATE ══════════════════════
   The cursor answers "what happens if I click" before anything is clicked.
   It is deliberately NOT on the step indicator, the help button or any real
   link: navigating the proposal must stay ordinary.

   THE CHIP IS NOT DECORATION. A cursor does not exist on a tablet, and a
   finance director reviews on a tablet, so the hovered card also says the
   word. Touch users get the chip; mouse users get both. */
.gg-scope.gg-pc-on .svc,
.gg-scope.gg-pc-on .addon,
.gg-scope.gg-pc-on .tier {
  position: relative;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'%3E%3Cpath d='M3 5.2A2.2 2.2 0 0 1 5.2 3h13.6A2.2 2.2 0 0 1 21 5.2v9.6a2.2 2.2 0 0 1-2.2 2.2H10l-5.1 3.9a.6.6 0 0 1-.96-.48V17A2.2 2.2 0 0 1 3 14.8V5.2Z' fill='%23c77800' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E")
      3 3,
    pointer;
}

.gg-scope.gg-pc-on .svc:hover,
.gg-scope.gg-pc-on .addon:hover,
.gg-scope.gg-pc-on .tier:hover {
  border-color: #fc9d2b !important;
  box-shadow: 0 0 0 3px rgba(252, 157, 43, 0.22) !important;
}

/* ══ 2b · THE LABELLED BLOCKS ══════════════════════════════════════════════
   Every selector in BLOCKS (src/proposal-comments.js) is a comment target,
   so it gets the same cursor, a hover ring and a positioned box for its pin.
   OUTLINES, NOT BORDERS: most of these have no border of their own and a
   border would move the layout under the reader. Each selector below is
   pinned against sections.v2.jsx by the guard test. */
.gg-scope.gg-pc-on .lead-vol,
.gg-scope.gg-pc-on .team-cap__list,
.gg-scope.gg-pc-on .team-cap__reps,
.gg-scope.gg-pc-on .lead-vol__slider-wrap,
.gg-scope.gg-pc-on .lead-vol__breakdown,
.gg-scope.gg-pc-on .gm-strip,
.gg-scope.gg-pc-on .gm-item,
.gg-scope.gg-pc-on .channels-panel,
.gg-scope.gg-pc-on .svc__commit-wrap,
.gg-scope.gg-pc-on .svc__upfront-toggle,
.gg-scope.gg-pc-on .svc__addons {
  position: relative;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24'%3E%3Cpath d='M3 5.2A2.2 2.2 0 0 1 5.2 3h13.6A2.2 2.2 0 0 1 21 5.2v9.6a2.2 2.2 0 0 1-2.2 2.2H10l-5.1 3.9a.6.6 0 0 1-.96-.48V17A2.2 2.2 0 0 1 3 14.8V5.2Z' fill='%23c77800' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E")
      3 3,
    pointer;
}

.gg-scope.gg-pc-on .lead-vol:hover,
.gg-scope.gg-pc-on .team-cap__list:hover,
.gg-scope.gg-pc-on .team-cap__reps:hover,
.gg-scope.gg-pc-on .lead-vol__slider-wrap:hover,
.gg-scope.gg-pc-on .lead-vol__breakdown:hover,
.gg-scope.gg-pc-on .gm-strip:hover,
.gg-scope.gg-pc-on .gm-item:hover,
.gg-scope.gg-pc-on .channels-panel:hover,
.gg-scope.gg-pc-on .svc__commit-wrap:hover,
.gg-scope.gg-pc-on .svc__upfront-toggle:hover,
.gg-scope.gg-pc-on .svc__addons:hover {
  outline: 2px solid #fc9d2b;
  outline-offset: 3px;
  border-radius: 10px;
}

/* ══ 2c · WHAT A PROPOSAL DOES NOT SHOW ════════════════════════════════════════
   Bea, 15 September 2026: the "Referring another business?" strip is for
   somebody building a quote, and on a proposal it is clutter. gg-pv is the
   class the layer puts on the root the moment it boots, in either mode, and
   never removes, so this holds in Comment and in Adjust alike; an ordinary
   visit never carries it. The strip has no name of its own, so it is found by
   the toggle only it contains, .fl-refer-toggle, which the guard test pins to
   sections.v2.jsx. */
.gg-scope.gg-pv .alert:has(.fl-refer-toggle) {
  display: none;
}

/* READ-ONLY MEANS READ-ONLY. In comment mode the lead-volume slider, the
   source radios and any field inside a card cannot be dragged or typed into,
   and a click on one falls through to the block around it, which is the
   anchor that click belongs to. The click capture in the script swallows
   buttons; this is what swallows a drag. */
.gg-scope.gg-pc-on [data-svc-id] input,
.gg-scope.gg-pc-on [data-svc-id] select,
.gg-scope.gg-pc-on [data-svc-id] textarea {
  pointer-events: none;
}

/* The word, for the reader with no cursor. Sits on the card, not the tier or
   the add-on, because those are too small to carry it without covering their
   own price. */
.gg-scope .gg-pc-chip {
  position: absolute;
  top: 0.55rem;
  right: 0.7rem;
  z-index: 3;
  display: none;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  background: #c77800;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  pointer-events: none;
}

.gg-scope.gg-pc-on .svc:hover > .gg-pc-chip {
  display: inline-flex;
}

/* ══ 3 · THE PIN ══════════════════════════════════════════════════════════
   Figma's pin, anchored INTO the card's own box rather than dropped at a
   canvas coordinate. The calculator reflows responsively and its steps change
   with client type, so a coordinate pin would drift onto the wrong thing.

   IT IS A SPAN AND CARRIES NO HANDLER. A tier is a button and an add-on has
   role="button", so a nested control would be invalid inside the first and
   wrong inside the second. The card is already the click target.

   A RESOLVED PIN GOES GREY AND STAYS. Never removed: a thread that vanishes
   because somebody answered it is a record nobody can audit. */
.gg-scope .gg-pc-pin {
  position: absolute;
  top: -9px;
  right: -9px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 12px 12px 12px 3px;
  background: #fc9d2b;
  color: #3a2400;
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 7px rgba(199, 120, 0, 0.35);
  pointer-events: none;
}

.gg-scope .gg-pc-pin--sm {
  top: -8px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  font-size: 0.65rem;
  border-radius: 10px 10px 10px 3px;
}

.gg-scope .gg-pc-pin--resolved {
  background: #e4e7ec;
  color: #6b6b6b;
  box-shadow: none;
}

/* Somebody replied and they have not read it yet. */
.gg-scope .gg-pc-pin--unread::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d92d20;
  border: 2px solid #fff;
}

/* ══ 3b · THE RING THAT STAYS ═══════════════════════════════════════════════
   Bea, on the first live comment: "when there's a comment on a certain
   section, it should be highlighted with a border to be more obvious what
   part to click for the comment." The hover rings above show on hover only;
   this one stays. A target that carries a pin keeps the ring: amber while a
   thread on it is open, grey once every thread on it is resolved.

   NO SCRIPT CHANGE. addPin() appends the pin as the target's own child and
   nothing else on the page has a pin child, so :has(> .gg-pc-pin) IS the set
   of commented targets, kept in step by the same decorate() pass that places
   the pins. Cards, tiers and add-ons keep their own corner radius; the
   labelled blocks take the same 10px the hover ring gives them. */
.gg-scope.gg-pc-on :has(> .gg-pc-pin) {
  outline: 2px solid #fc9d2b;
  outline-offset: 3px;
}

.gg-scope.gg-pc-on :has(> .gg-pc-pin):not(.svc):not(.tier):not(.addon) {
  border-radius: 10px;
}

/* ⏹️ THE RESOLVED RING MOVED BELOW, 16 September 2026, Joshua, and it changed colour.
   ~~.gg-scope.gg-pc-on :has(> .gg-pc-pin--resolved) { outline-color: #d3d6dc; }~~ stood
   here and was right about everything except where it sat. A selected tier or add-on is
   given the amber ring again further down by "what is in the plan wears the ring", a rule
   that is both later in the file and one class more specific, so on exactly the targets a
   reader is most likely to have commented on, the ring stayed amber after the thread was
   resolved and the grey tick was the only thing that changed. Seen live on a resolved
   thread on the Native CRM Sync add-on. The rule now sits after that one and names the
   selected cases itself. */

/* ══ 3c · THE PLAN IS LIT AND THE REST STEPS BACK ═══════════════════════════
   Bea, 15 September 2026: in comment mode the selected options are
   highlighted and everything that is not selected is greyed out, add-ons and
   every other selection included.

   THE SELECTED STATE IS THE CALCULATOR'S OWN. .tier--active, .addon--on,
   .svc--active, aria-pressed and aria-checked are what sections.v2.jsx
   already writes, read off app.gogorilla.com on 15 September, so nothing
   here is a second copy of the plan that could disagree with it. The guard
   test pins each hook to the JSX.

   CHILDREN ARE DIMMED, NOT THE TARGET, on a tier and an add-on, because the
   pin is the target's own child and a dimmed pin is a comment nobody sees;
   the target itself only loses its colour. A card outside the plan dims as a
   whole, and its own tiers and add-ons are then left alone so they do not
   dim twice. The cursor, the hover ring and the standing comment ring above
   still apply, so a greyed option can still be asked about. filter is safe
   here: every tooltip is portalled to document.body, so no fixed element
   sits inside a dimmed one. */
.gg-scope.gg-pc-on .tier:not(.tier--active) > :not(.gg-pc-pin),
.gg-scope.gg-pc-on [data-addon-id]:not(.addon--on):not([aria-pressed='true']) > :not(.gg-pc-pin) {
  opacity: 0.42;
  filter: grayscale(1);
}

.gg-scope.gg-pc-on .tier:not(.tier--active),
.gg-scope.gg-pc-on [data-addon-id]:not(.addon--on):not([aria-pressed='true']) {
  background: #f6f7f9;
  border-color: #e4e7ec;
  box-shadow: none;
}

.gg-scope.gg-pc-on .channel-tile[aria-pressed='false'],
/* 2026-09-17: .lead-vol__src[aria-checked='false'] left this list with the lead-source cards. */
.gg-scope.gg-pc-on .svc__commit-bar-btn[aria-pressed='false'],
.gg-scope.gg-pc-on .svc__upfront-toggle[aria-checked='false'],
.gg-scope.gg-pc-on .svc:not(.svc--active) > :not(.gg-pc-pin):not(.gg-pc-chip) {
  opacity: 0.42;
  filter: grayscale(1);
}

.gg-scope.gg-pc-on .svc:not(.svc--active) .tier > :not(.gg-pc-pin),
.gg-scope.gg-pc-on .svc:not(.svc--active) [data-addon-id] > :not(.gg-pc-pin) {
  opacity: 1;
  filter: none;
}

/* What is in the plan wears the ring the comment cursor already wears. */
.gg-scope.gg-pc-on .tier--active,
.gg-scope.gg-pc-on [data-addon-id].addon--on,
.gg-scope.gg-pc-on [data-addon-id][aria-pressed='true'] {
  outline: 2px solid #fc9d2b;
  outline-offset: 3px;
}

/* RESOLVED OUTRANKS SELECTED, 16 September 2026, Joshua. A resolved thread turns its pin
   grey, and the ring around the thing it is pinned to has to follow, or the loudest signal
   on the target still says there is something to answer.

   THE GREY IS THE PIN's OWN FILL, #e4e7ec, taken from .gg-pc-pin--resolved rather than
   chosen. ~~#d3d6dc~~ was the older ring grey and it was close but not the same colour, so
   the tick and the ring read as two different states of grey instead of one resolved state.
   One value, used twice, is the whole point of the change.

   IT SITS HERE AND NOT WITH THE OTHER RING RULES, and it names the three selected
   selectors itself, because outline-color alone loses twice to the rule directly above:
   later in the file and one class more specific. A reader who moves this rule up will
   silently restore the defect it was written to fix. */
.gg-scope.gg-pc-on :has(> .gg-pc-pin--resolved),
.gg-scope.gg-pc-on .tier--active:has(> .gg-pc-pin--resolved),
.gg-scope.gg-pc-on [data-addon-id].addon--on:has(> .gg-pc-pin--resolved),
.gg-scope.gg-pc-on [data-addon-id][aria-pressed='true']:has(> .gg-pc-pin--resolved) {
  outline-color: #e4e7ec;
}

/* ══ 4 · THE ANCHORED POPOVER ═════════════════════════════════════════════
   A popover and not a modal, because a modal covers the thing being
   discussed, and the whole point of an anchored comment is seeing the price
   and the sentence about the price at once.

   Its skin is .bdwn-modal__panel's, to the same border, radius and shadow. */
/* z-index 9991, ⏹️ ~~2147483646~~, Bea 15 September 2026. It has to come below the
   sticky notice at 9995, and the maximum-integer value made that arithmetically
   impossible. 9991 keeps every relationship the old value was actually relied on
   for: still above the cards at 9990, so a clicked thread covers a resting one,
   and still below .bdwn-modal at 9999. It is now below the comments panel and
   launcher at 2147483644 and 2147483645, which costs nothing, because the panel
   closes before a row opens a popover and the popover closes before the panel
   opens, so the two are never on screen together. */
.gg-scope .gg-pc-pop {
  position: fixed;
  z-index: 9991;
  width: 320px;
  max-width: calc(100vw - 1.5rem);
  background: #fff;
  border: 1px solid rgba(15, 28, 53, 0.08);
  border-radius: 14px;
  box-shadow:
    0 30px 60px -16px rgba(15, 28, 53, 0.4),
    0 12px 24px -10px rgba(15, 28, 53, 0.18);
  overflow: hidden;
  animation: ggPcPopIn 160ms ease-out;
}

@keyframes ggPcPopIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gg-scope .gg-pc-pop {
    animation: none;
  }
}

/* The strip that names what you are commenting on, so nobody posts and then
   wonders what it attached to. */
.gg-scope .gg-pc-pop__on {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  background: #ffe8d3;
  border-bottom: 1px solid #f3d9b8;
  color: #6b4400;
  font-size: 0.6875rem;
}

.gg-scope .gg-pc-pop__on b {
  color: #3a2400;
  font-weight: 700;
}

/* The way out, top right, on every popover. Bea, 15 September 2026. The
   strip is the popover's own head, so the control sits in it rather than
   floating over the first message. */
.gg-scope .gg-pc-pop__on {
  position: relative;
  padding-right: 2.4rem;
}

.gg-scope .gg-pc-pop__close {
  position: absolute;
  top: 50%;
  right: 0.45rem;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #6b4400;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
}

.gg-scope .gg-pc-pop__close:hover {
  background: rgba(58, 36, 0, 0.1);
  color: #3a2400;
}

/* ══ 4b · THE CARDS ═══════════════════════════════════════════════════════
   A thread on a tier or an add-on is open by default, as a card under its
   anchor (src/proposal-comments.js, syncCards). Same skin as the popover.
   z-index 9990 is chosen: above the page and the sticky bar (40) and the
   phone bar (90), BELOW the house .bdwn-modal at 9999, so the comments
   index and the walkthrough still cover them. The click-opened popover
   keeps its own higher value and closes before either overlay opens. No
   entrance animation: these are the resting state of the page, not an
   event, and they are rebuilt after every write. */
.gg-scope .gg-pc-pop--open {
  z-index: 9990;
  animation: none;
}

.gg-scope .gg-pc-pop__in {
  padding: 0.8rem 0.85rem;
}

.gg-scope .gg-pc-pop__who {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  font-size: 0.72rem;
  color: #6b6b6b;
}

.gg-scope .gg-pc-pop__who b {
  color: #111;
  font-weight: 600;
  font-size: 0.78rem;
}

.gg-scope .gg-pc-pop__notyou {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.72rem;
  color: var(--gg-blue, #002abf);
  border-bottom: 1px solid rgba(0, 42, 191, 0.3);
  cursor: pointer;
}

.gg-scope .gg-pc-av {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gg-blue, #002abf);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
}

.gg-scope .gg-pc-av--staff {
  background: #111;
}

.gg-scope .gg-pc-pop__act {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

/* A save that failed says so where the words were typed, and leaves them. */
.gg-scope .gg-pc-pop__err {
  margin: 0.5rem 0.85rem 0.6rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  background: #fee4e2;
  color: #912018;
  font-size: 0.72rem;
  line-height: 1.4;
}

.gg-scope .gg-pc-pop__in .gg-pc-pop__err {
  margin-left: 0;
  margin-right: 0;
}

/* The composer's own controls are house classes and are not restyled. These
   three only trim the sizes down for a 320px popover. */
.gg-scope .gg-pc-pop .si-modal__textarea {
  min-height: 62px;
  font-size: 0.8125rem;
  border: 1px solid #d4d7de;
}

.gg-scope .gg-pc-pop .checkout-form__input {
  margin-bottom: 0.5rem;
}

.gg-scope .gg-pc-pop .btn {
  min-height: 34px;
  padding: 0.3rem 0.8rem;
  font-size: 0.78rem;
  border-radius: 9px;
}

/* ══ 5 · THE THREAD ═══════════════════════════════════════════════════════ */
.gg-scope .gg-pc-msg {
  display: flex;
  gap: 0.55rem;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid #ececec;
}

.gg-scope .gg-pc-msg:last-of-type {
  border-bottom: 0;
}

.gg-scope .gg-pc-msg__b {
  flex: 1 1 auto;
  min-width: 0;
}

.gg-scope .gg-pc-msg__h {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 2px;
}

.gg-scope .gg-pc-msg__h b {
  font-size: 0.78rem;
  color: #111;
  font-weight: 600;
}

.gg-scope .gg-pc-msg__h time {
  font-size: 0.6875rem;
  color: #6b6b6b;
}

.gg-scope .gg-pc-msg__tag {
  font-size: 0.58rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  background: #111;
  border-radius: 3px;
  padding: 1px 5px;
}

.gg-scope .gg-pc-msg p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #3a3a3a;
  overflow-wrap: anywhere;
}

.gg-scope .gg-pc-pop__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  background: #fafafa;
  border-top: 1px solid #ececec;
}

.gg-scope .gg-pc-pop__foot .gg-pc-pop__err {
  flex: 1 1 100%;
  margin: 0;
}

.gg-scope .gg-pc-pop__foot .btn {
  min-height: 30px;
  padding: 0.25rem 0.6rem;
  font-size: 0.72rem;
  border-radius: 8px;
  white-space: nowrap;
}

/* THE TICK SITS BESIDE THE WORD, NOT ON ITS BASELINE, which is where an inline
   SVG in a house .btn would otherwise land. inline-flex and a gap, the same
   arrangement .gg-pc-launch and .gg-pc-seg__btn already use for an icon and a
   label. The gap is why the script appends the label with no leading space. */
.gg-scope .gg-pc-pop__foot .gg-pc-resolve {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* ══ 5b · THE SEND CONTROL IN THE REPLY FIELD ══════════════════════════════
   Bea, 15 September 2026, with the empty right-hand end of the reply box
   circled: a send icon, like the reports thread's.

   THE WRAPPER CARRIES THE FLEX, NOT THE INPUT. Those two declarations used to
   be written onto the input from the script, because the input wears a shared
   house class with nowhere to hang them. The wrapper has a class of its own,
   so they belong here.

   AND THE INPUT'S BOTTOM MARGIN COMES OFF. The rule above sets 0.5rem on every
   .checkout-form__input inside a popover, for the composer's name field, and it
   reaches this input too. Left on, the wrapper is half a rem taller than the box
   inside it and the button centres against the wrong edge. */
.gg-scope .gg-pc-send-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

/* AND IT MUST FILL THE WRAPPER, which is not automatic. The wrapper is the flex
   item now, and an input has an intrinsic width of its own: left to itself it
   renders 245px wide inside a 211px wrapper, spills 20px past the popover's right
   edge, and strands the button 39px short of the edge it is supposed to sit on.
   Measured on the preview before this line existed. The input used to be the flex
   item, which is why nothing had to say this before. */
.gg-scope .gg-pc-send-wrap .checkout-form__input {
  display: block;
  width: 100%;
  margin-bottom: 0;
  padding-right: 2.25rem;
}

.gg-scope .gg-pc-send {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  /* ⏹️ ~~#c77800~~, the chip's amber, shipped earlier the same day. Bea: the
     icon should be the primary blue on the palette. Same var(--gg-blue) the mode
     bar's icon and the avatars wear, so the round marks on a proposal are one
     colour. The amber stays on the cursor, the chip, the pins and the rings,
     which say where a comment can go rather than send one. */
  background: var(--gg-blue, #002abf);
  color: #fff;
  cursor: pointer;
  transition:
    background 150ms ease,
    box-shadow 150ms ease;
}

/* House rule 4: everything clickable gets a hover state with a shadow
   transition. NO LIFT ON THIS ONE, deliberately. It is centred against the
   field by a transform, and a translate on hover would replace that transform
   and drop the button by its own half height. */
.gg-scope .gg-pc-send:hover:not(:disabled) {
  background: #002299;
  box-shadow: 0 2px 6px rgba(0, 42, 191, 0.4);
}

.gg-scope .gg-pc-send:disabled {
  opacity: 0.4;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .gg-scope .gg-pc-send {
    transition: none;
  }
}

/* ══ 5c · THE SENDING SPINNER ══════════════════════════════════
   Bea, 16 September 2026: a clear indicator that a comment is sending, and a loading
   animation on the actions that take time. ONE spinner, currentColor so it takes the
   colour of whatever it sits in: white on the blue send button, the ghost button's ink
   on Resolve, grey in the provisional row. */
@keyframes ggPcSpin {
  to {
    transform: rotate(360deg);
  }
}

.gg-scope .gg-pc-spin {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ggPcSpin 0.6s linear infinite;
  vertical-align: -2px;
  flex: 0 0 auto;
}

/* The send button swaps its paper plane for a spinner and stays solid whilst it spins:
   the busy state is not the disabled state, so the disabled dim above is cancelled. */
.gg-scope .gg-pc-send--busy > svg {
  display: none;
}

.gg-scope .gg-pc-send--busy::after {
  content: '';
  width: 13px;
  height: 13px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ggPcSpin 0.6s linear infinite;
}

.gg-scope .gg-pc-send--busy:disabled {
  opacity: 1;
  cursor: default;
}

/* The provisional row: the words on their way, dimmed and labelled Sending, never
   mistaken for a saved comment, and gone when the thread rebuilds on the re-read. */
.gg-scope .gg-pc-msg--pending {
  opacity: 0.65;
}

.gg-scope .gg-pc-msg__sending {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.6875rem;
  color: #6b6b6b;
}

@media (prefers-reduced-motion: reduce) {
  .gg-scope .gg-pc-spin,
  .gg-scope .gg-pc-send--busy::after {
    animation: none;
  }
}

/* A locked proposal keeps every word and accepts no new ones. Bea: "It stays
   but no one can edit it anymore." */
.gg-scope .gg-pc-pop__locked {
  padding: 0.6rem 0.85rem;
  background: #fafafa;
  border-top: 1px solid #ececec;
  font-size: 0.72rem;
  color: #6b6b6b;
}

/* ══ 6 · THE LAUNCHER AND THE INDEX ═════════════════════════════════════════
   A thread you have to hunt for is a thread nobody answers.

   IT IS A LAUNCHER AND AN OVERLAY, NOT A SECOND RAIL. Google Docs puts its
   comment list down the right-hand side; that side of the calculator already
   belongs to the plan summary, and two rails would fight over the same
   260 pixels. The overlay is the house .bdwn-modal, unmodified. */
/* THE LAUNCHER IS THE HOUSE AMBER, IN RELIEF, 15 September 2026, Joshua. Flat
   #111 was the one control on the page with no material to it whilst every
   other button in the calculator is bevelled, so it read as a browser widget
   sitting on top of the product rather than part of it.

   THE GRADIENT AND THE FIVE SHADOW LAYERS ARE .btn--amber's, VALUE FOR VALUE,
   and this is a copy rather than the class, which is the weaker choice and is
   taken deliberately. .btn--amber forces border-radius 12px with !important
   and this control is a pill, and adding the class means editing the markup in
   proposal-comments.js, which another lane is rewriting this week. A copy in
   one stylesheet beats a collision in a file two hands are holding. If the two
   ever drift, .btn--amber in app.v2.css is the original and this follows it.

   THE SIXTH LAYER IS NOT FROM THE BUTTON. It is the drop shadow the launcher
   already had, kept because this one floats over the page and has to lift off
   it, but warmed from black to the amber's own brown so the halo does not go
   muddy against the gradient.

   IT STAYS A PILL. Only the colour and the material change. */
.gg-scope .gg-pc-launch {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 2147483645;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(109deg, #ff962e 0%, #bf6000 60%, #824100 100%);
  color: #fff;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow:
    rgba(255, 255, 255, 0.5) -2px -2px 2px -1px,
    rgba(255, 237, 219, 0.69) 1px 1.5px 2px 0px inset,
    rgba(227, 176, 125, 0.63) -2.5px -2px 2px 0px inset,
    rgba(84, 84, 84, 0.35) 2px 2px 8px 0px,
    rgba(145, 72, 0, 0.8) -1px -4px 20px 0px inset,
    0 6px 20px rgba(130, 65, 0, 0.32);
  transition:
    background 150ms ease-out,
    box-shadow 150ms ease-out,
    transform 150ms ease-out;
}

.gg-scope .gg-pc-launch:hover {
  background: linear-gradient(109deg, #ffa852 0%, #bf6000 100%);
  transform: translateY(-1px);
  box-shadow:
    rgba(255, 255, 255, 0.5) -2px -2px 2px -1px,
    rgba(255, 237, 219, 0.69) 2px 1.5px 2px 0px inset,
    rgba(227, 176, 125, 0.63) -3.5px -3.5px 2px 0px inset,
    rgba(84, 84, 84, 0.35) 2px 10px 8px 0px,
    rgba(145, 72, 0, 0.8) -1px -4px 20px 0px inset,
    0 10px 26px rgba(130, 65, 0, 0.36);
}

.gg-scope .gg-pc-launch:active {
  transform: translateY(0);
}

.gg-scope .gg-pc-launch:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(191, 96, 0, 0.35),
    rgba(255, 255, 255, 0.5) -2px -2px 2px -1px,
    rgba(255, 237, 219, 0.69) 1px 1.5px 2px 0px inset,
    rgba(227, 176, 125, 0.63) -2.5px -2px 2px 0px inset,
    rgba(84, 84, 84, 0.35) 2px 2px 8px 0px,
    rgba(145, 72, 0, 0.8) -1px -4px 20px 0px inset,
    0 6px 20px rgba(130, 65, 0, 0.32);
}

/* THE COUNT IS A WHITE CHIP, 15 September 2026, Joshua. It was #fc9d2b on
   #3a2400, which was a second amber sitting on the first one and lost most of
   its edge now that the button itself is amber. White gives it the separation
   the old pairing was trying for, and #8a4b00 keeps the digit inside the
   button's own colour family rather than making it a foreign sticker. The
   inset line is what makes the chip read as pressed into the button rather
   than laid on top of it, which is the same relief the button wears. */
.gg-scope .gg-pc-launch__n {
  padding: 1px 7px;
  border-radius: 999px;
  background: #fff;
  color: #8a4b00;
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow:
    inset 0 1px 1px rgba(122, 63, 0, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.45);
}

.gg-scope .gg-pc-idx__grp {
  padding: 0.6rem 0 0.3rem;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: #6b6b6b;
}

.gg-scope .gg-pc-idx__row {
  display: flex;
  gap: 0.55rem;
  width: 100%;
  padding: 0.6rem 0.2rem;
  border: 0;
  border-bottom: 1px solid #ececec;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.gg-scope .gg-pc-idx__row:hover {
  background: #fafafa;
}

.gg-scope .gg-pc-idx__dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 50%;
  background: #fc9d2b;
}

.gg-scope .gg-pc-idx__row--done .gg-pc-idx__dot {
  background: #d3d6dc;
}

.gg-scope .gg-pc-idx__meta {
  font-size: 0.6875rem;
  color: #6b6b6b;
  margin-bottom: 2px;
}

.gg-scope .gg-pc-idx__meta b {
  color: #111;
  font-weight: 600;
}

.gg-scope .gg-pc-idx__txt {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #3a3a3a;
  overflow-wrap: anywhere;
}

.gg-scope .gg-pc-idx__row--done .gg-pc-idx__txt {
  color: #9aa0ab;
}

.gg-scope .gg-pc-idx__tabs {
  display: flex;
  gap: 4px;
  padding: 2px;
  border-radius: 9px;
  background: #f2f3f6;
  margin-bottom: 0.3rem;
}

.gg-scope .gg-pc-idx__tab {
  border: 0;
  background: none;
  padding: 0.25rem 0.7rem;
  border-radius: 7px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  color: #6b6b6b;
  cursor: pointer;
}

.gg-scope .gg-pc-idx__tab[aria-pressed='true'] {
  background: #fff;
  color: #111;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* ══ 6b · THE PANEL ═══════════════════════════════════════════════════════════
   ⏹️ ~~The overlay is the house .bdwn-modal, unmodified.~~ Bea, 15 September
   2026: the Comments button opens a PANEL like the site's own messenger, a
   tall card pinned to the bottom right above the launcher, with no backdrop,
   so the proposal stays readable and scrollable beside it. Same skin as the
   popover. One below the launcher's z-index, so the launcher stays pressable
   over it and toggles it; the click-opened popover keeps its own higher value
   and the panel closes before a row opens one. Full width on a phone. */
.gg-scope .gg-pc-panel {
  position: fixed;
  right: 1.25rem;
  bottom: 4.75rem;
  z-index: 2147483644;
  display: flex;
  flex-direction: column;
  width: 400px;
  max-width: calc(100vw - 2.5rem);
  max-height: min(640px, calc(100vh - 6.5rem));
  background: #fff;
  border: 1px solid rgba(15, 28, 53, 0.08);
  border-radius: 16px;
  box-shadow:
    0 30px 60px -16px rgba(15, 28, 53, 0.4),
    0 12px 24px -10px rgba(15, 28, 53, 0.18);
  overflow: hidden;
  animation: ggPcPopIn 160ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .gg-scope .gg-pc-panel {
    animation: none;
  }
}

.gg-scope .gg-pc-panel__head {
  position: relative;
  flex: 0 0 auto;
  padding: 0.9rem 2.6rem 0.65rem 1rem;
  border-bottom: 1px solid #ececec;
}

.gg-scope .gg-pc-panel__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #111;
}

/* The popover's close control, in the panel's head: grey rather than the
   strip's amber, because the head is white. */
.gg-scope .gg-pc-panel__head .gg-pc-pop__close {
  right: 0.7rem;
  color: #6b6b6b;
}

.gg-scope .gg-pc-panel__head .gg-pc-pop__close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #111;
}

.gg-scope .gg-pc-panel .gg-pc-idx__tabs {
  flex: 0 0 auto;
  margin: 0.65rem 1rem 0;
}

.gg-scope .gg-pc-panel__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.25rem 1rem 0.75rem;
}

/* ══ 7 · THE PENDING-CHANGES STRIP ══════════════════════════════════════════
   Adjust mode only, which is demo only. */
.gg-scope .gg-pc-strip {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  z-index: 2147483645;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  max-width: calc(100vw - 2rem);
  padding: 0.65rem 0.75rem 0.65rem 1.1rem;
  border-radius: 999px;
  background: #111;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  font-size: 0.8125rem;
}

.gg-scope .gg-pc-strip__n {
  font-weight: 600;
  white-space: nowrap;
}

.gg-scope .gg-pc-strip__tot {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #b9bec8;
}

.gg-scope .gg-pc-strip .btn {
  min-height: 32px;
  padding: 0.3rem 0.8rem;
  font-size: 0.75rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* ══ 8 · THE DEMO RIBBON ══════════════════════════════════════════════════
   ?pv=demo seeds example threads so the UI can be walked without a real
   proposal behind it. Saying so on the page is not optional: an unlabelled
   demo is how a fake number ends up in a screenshot in a meeting. */
.gg-scope .gg-pc-demo {
  display: block;
  margin: 0 0 0.5rem;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  background: #fff4e5;
  border: 1px dashed #e0a458;
  color: #7a4a00;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ══ 9 · THE FIRST-OPEN WALKTHROUGH ═════════════════════════════════════════
   src/proposal-tour.js. Bea, 14 September: a prospect opening the link
   should get a dialog that shows, with pictures, how commenting works. The
   shell is the house .bdwn-modal again; these rules only widen the panel for
   three drawn steps side by side and style the steps themselves. The
   drawings are inline SVG in the script, in this file's palette. */
.gg-scope .gg-pt .bdwn-modal__panel.gg-pt__panel {
  width: min(820px, calc(100vw - 2rem));
  max-width: none;
  /* THE PANEL SCROLLS RATHER THAN CLIPS, 16 September 2026, Bea. The house
     .bdwn-modal__panel is max-height calc(100vh - 3rem) with overflow hidden,
     which is right for the breakdown it was written for and silently eats
     anything taller. Adding the mode-switch section pushed this dialog past that
     cap on a 768px-tall laptop and Start reviewing was clipped off the bottom
     with no way to reach it: measured at 1366 by 768, panel height pinned to the
     720px cap and the button outside the window. The cap is shared by every
     overlay on the calculator, so it is not touched; only this panel is told to
     scroll what does not fit. overscroll-behavior keeps that scroll from
     chaining to the proposal behind the backdrop. */
  overflow-y: auto;
  overscroll-behavior: contain;
}

.gg-scope .gg-pt__eyebrow {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gg-blue, #002abf);
  margin-bottom: 0.25rem;
}

.gg-scope .gg-pt__title {
  margin-bottom: 0.35rem;
}

.gg-scope .gg-pt__lede {
  margin: 0 0 1.1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #3a3a3a;
  max-width: 62ch;
}

/* ══ THE MODE SWITCH, 16 September 2026, Bea ════════════════════════════════
   "the top section with the comment and adjust toggle should be included on the
   tutorial."

   It sits ABOVE the three numbered steps and is deliberately not one of them.
   The steps are the comment flow; this is the choice of whether to use that flow
   at all, so numbering it would say the reader must do it first, which is not
   true: Comment is already on when the dialog opens.

   Drawn as one wide band rather than a fourth column, because the bar it
   describes is itself one wide band at the top of the page, and because a
   four-column grid at this width leaves each step too narrow to read. The blue
   ground is the notice bar's own #eef2ff, so the section looks like the thing it
   is teaching rather than like another step card. */
/* ONE COLUMN, THE DRAWING ON TOP, which is the shape every step card below
   already uses. It was two columns first and the panel showed why not: the bar
   drawing is a wide, short thing and the words beside it are tall, so half the
   band was empty blue. Stacked, the drawing spans the full width, which is also
   how the bar itself spans the page. */
.gg-scope .gg-pt__modes {
  margin: 0 0 1.1rem;
  padding: 0.85rem;
  border: 1px solid rgba(0, 42, 191, 0.18);
  border-radius: 12px;
  background: #eef2ff;
}

.gg-scope .gg-pt__modes-art {
  border-radius: 9px;
  background: #fff;
  padding: 0.35rem;
  margin-bottom: 0.7rem;
}

.gg-scope .gg-pt__modes-art svg {
  display: block;
  width: 100%;
  height: auto;
}

.gg-scope .gg-pt__modes-h {
  margin: 0 0 0.3rem;
}

.gg-scope .gg-pt__modes-body .gg-pt__p {
  margin: 0 0 0.6rem;
}

.gg-scope .gg-pt__modes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.gg-scope .gg-pt__mode {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.5rem;
}

/* The two pills read as the two buttons on the bar, to the same shapes and the
   same brand blue for the one that is pressed. */
.gg-scope .gg-pt__pill {
  flex: 0 0 auto;
  padding: 0.15rem 0.5rem;
  border: 1px solid rgba(0, 42, 191, 0.18);
  border-radius: 7px;
  background: #fff;
  color: #5a6a9e;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.gg-scope .gg-pt__pill--on {
  border-color: transparent;
  background: var(--gg-blue, #002abf);
  color: #fff;
}

.gg-scope .gg-pt__mode-t {
  font-size: 0.82rem;
  line-height: 1.5;
  color: #3a3a3a;
}

.gg-scope .gg-pt__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.gg-scope .gg-pt__step {
  margin: 0;
  padding: 0.75rem;
  border: 1px solid #e4e7ec;
  border-radius: 12px;
  background: #fafafa;
}

.gg-scope .gg-pt__art {
  border-radius: 9px;
  background: #f2f3f6;
  padding: 0.35rem;
  margin-bottom: 0.65rem;
}

.gg-scope .gg-pt__art svg {
  display: block;
  width: 100%;
  height: auto;
}

.gg-scope .gg-pt__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.gg-scope .gg-pt__n {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fc9d2b;
  color: #3a2400;
  font-size: 0.72rem;
  font-weight: 700;
}

.gg-scope .gg-pt__h {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: #111;
  line-height: 1.3;
}

.gg-scope .gg-pt__p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #3a3a3a;
}

.gg-scope .gg-pt__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid #ececec;
}

.gg-scope .gg-pt__note {
  font-size: 0.75rem;
  color: #6b6b6b;
}

.gg-scope .gg-pt__go {
  min-height: 38px;
  padding: 0.4rem 1.1rem;
  font-size: 0.8125rem;
  border-radius: 9px;
}

/* The way back in, on the mode bar. */
.gg-scope .gg-pc-bar__how {
  flex: 0 0 auto;
  border: 1px solid rgba(0, 42, 191, 0.25);
  background: #fff;
  color: var(--gg-blue, #002abf);
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.gg-scope .gg-pc-bar__how:hover {
  background: #eef2ff;
}

@media (max-width: 720px) {
  .gg-scope .gg-pt__steps {
    grid-template-columns: 1fr;
  }

  .gg-scope .gg-pt__foot {
    flex-direction: column;
    align-items: stretch;
  }

  .gg-scope .gg-pt__go {
    width: 100%;
  }

  .gg-scope .gg-pc-bar__how {
    width: 100%;
  }
}

/* ══ 10 · THE DECISION PAGE ═════════════════════════════════════════════════
   src/proposal-decision.js. Bea, 14 September: on a proposal, the Schedule
   a call step is an approve or request-changes page. The script marks
   React's step-6 container with gg-pd-host and appends one .gg-pd block;
   the first rule here hides the container's own children behind the mark,
   so the qualifier, the edit bar and the "Almost there" note never show
   beside it. The mark is only ever set when there is a proposal (or the
   demo) behind the page, so an ordinary visit is untouched. The buttons
   are the house .btn; the decision itself is quote-share.js's. */
.gg-scope .gg-pd-host > :not(.gg-pd) {
  display: none;
}

.gg-scope .gg-pd {
  margin: 0 0 1.5rem;
}

.gg-scope .gg-pd--decided {
  margin-bottom: 2rem;
}

.gg-scope .gg-pd__head {
  margin-bottom: 1.25rem;
}

.gg-scope .gg-pd__eyebrow {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gg-blue, #002abf);
  margin-bottom: 0.35rem;
}

.gg-scope .gg-pd__title {
  margin: 0 0 0.5rem;
  font-size: 1.75rem;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #111;
}

.gg-scope .gg-pd__sub {
  margin: 0;
  max-width: 64ch;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #3a3a3a;
}

.gg-scope .gg-pd__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.gg-scope .gg-pd__card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.25rem;
  border: 1px solid #e4e7ec;
  border-radius: 14px;
  background: #fff;
}

/* BLUE, NOT GREEN, 15 Sept 2026, Bea. The approve card was the only green thing
   on a proposal, and green reads as a status that has already happened rather
   than as the choice still being offered. This is the same blue the PROPOSAL
   VIEW bar wears at the top of the page, #eef2ff on a rgba(0, 42, 191, 0.18)
   ring, so the two blues on the screen are one blue. The border-color is kept
   for the case where the bevel has not painted; .thin-glass-frame overrides it
   below. */
/* AND IT SITS ABOVE THE PAGE, 16 September 2026, Joshua. The accept card carried
   the house blue on its ground and its ring but no elevation at all, so the one
   card we want chosen lay flat on the paper whilst cards on the other pages of
   the calculator lift off it.

   THE LAYER IS .refer-who-card.is-on's, VALUE FOR VALUE. That is the selected
   card on the referrals page and it is the house answer to exactly this
   question: an affirmative card, blue, raised. Its offset, blur, spread and
   alpha are copied unchanged so the two surfaces cast the same light.

   ITS 1.5px BLUE RING IS DELIBERATELY NOT COPIED. The referrals card draws its
   own edge; this one wears .thin-glass-frame, which draws the edge in ::before,
   and the rule below already strips this card's 1px border for exactly that
   reason. Two edges on one card read as a mistake rather than as depth, which
   is the ruling the glass frame landed under on 15 September. So the elevation
   is taken and the edge is left to the frame.

   THE DECLINE CARD IS LEFT FLAT, which is the asked-for scope and not an
   oversight. The referrals pair does give the unselected twin the same geometry
   in neutral, 0 12px 28px -14px rgba(44,51,102,0.2), and that is the follow-up
   if the pair should lift together rather than the accept card alone. */
.gg-scope .gg-pd__card--yes {
  border-color: rgba(0, 42, 191, 0.18);
  background: #eef2ff;
  box-shadow: 0 14px 30px -14px rgba(0, 42, 191, 0.32);
}

.gg-scope .gg-pd__card--no {
  background: #fff;
}

/* THE CARD WEARS THE HOUSE BEVEL NOW, 15 Sept 2026, Bea, so its own 1px ring comes
   off. Two borders on one edge read as a mistake rather than as depth, and the
   same de-duplication is already made on .gg-help-tile where the tile drops its
   ring under .thin-glass-frame.
   TRANSPARENT rather than removed, on purpose: border-width 0 would pull both
   cards 2px narrower and 2px shorter and shift the grid, whereas a transparent
   border keeps the box exactly where it was and simply stops painting.
   This sits above both --yes and --no because three classes beat two, which is
   what stops the approve card repainting its own edge. */
.gg-scope .gg-pd__card.thin-glass-frame {
  border-color: transparent;
}

.gg-scope .gg-pd__ico {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.1rem;
  font-weight: 700;
}

/* The tick sits one step deeper than the card ground, the way the green pair
   did, so the circle still reads as a disc rather than dissolving into the
   card. #1a2c6b is the bar's own navy. */
.gg-scope .gg-pd__ico--yes {
  background: #dde5fb;
  color: #1a2c6b;
}

/* THE DECLINE DISC IS NEUTRAL, 15 September 2026, Joshua. It was #fff4e5 on
   #c77800, the only amber left on the decision step once the accept button
   went blue, which made the softer of the two answers the louder of the two
   discs. A COOL grey rather than a warm one, on purpose: the accept disc
   beside it is #dde5fb on the bar navy #1a2c6b, so a cool neutral reads as
   its twin, whilst a warm grey would just read as amber that had faded. The
   lightness relationship of the pair is kept, ground near white and glyph
   near ink, so the circle still reads as a disc rather than dissolving into
   the card. */
.gg-scope .gg-pd__ico--no {
  background: #e9eaee;
  color: #44464f;
}

.gg-scope .gg-pd__h {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #111;
}

.gg-scope .gg-pd__p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #3a3a3a;
}

.gg-scope .gg-pd__card .gg-pd__p {
  flex: 1 1 auto;
}

/* THE RADIUS IS 12px, WHICH IS WHAT THIS PAIR HAS ALWAYS RENDERED AT, 15 September 2026.
   The 9px written here never applied to either button. .gg-scope .btn--ghost in app.v2.css
   forces 12px with !important, so Decline ignored it, and .btn--amber forced 12px the same
   way, so Accept ignored it too. Moving Accept to .btn--primary, which carries no
   !important, would have woken the dead value and pulled that one button 3px rounder than
   the button beside it. Seen on the preview at 9px against Decline at 12px, not guessed.
   12px is declared here now so the written value and the rendered value are the same
   number, and so the pair holds whatever class Accept wears next. Decline is unaffected
   either way, because the !important rule outranks this one. */
.gg-scope .gg-pd__approve,
.gg-scope .gg-pd__decline {
  align-self: flex-start;
  min-height: 40px;
  padding: 0.45rem 1.1rem;
  font-size: 0.875rem;
  border-radius: 12px;
}

.gg-scope .gg-pd__foot {
  /* 15 Sept 2026: hidden unless comment mode is on (.gg-pc-on on #root, set by
     proposal-comments.js), so with FEATURE_PROPOSAL_COMMENTS off the page does
     not invite a comment nobody can leave. Was shown always under #59. */
  display: none;
  margin: 1rem 0 0;
  font-size: 0.8125rem;
  color: #6b6b6b;
}
.gg-scope.gg-pc-on .gg-pd__foot {
  display: block;
}

/* The answered state: one panel, the word, and the note if there was one. */
.gg-scope .gg-pd__state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  border-radius: 14px;
  border: 1px solid #cfe9d9;
  background: #f6fbf8;
}

.gg-scope .gg-pd__state--accepted {
  border-color: #cfe9d9;
}

.gg-scope .gg-pd__state--declined {
  border-color: #f3d9b8;
  background: #fff8ee;
}

.gg-scope .gg-pd__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
}

.gg-scope .gg-pd__badge--accepted {
  background: #14663f;
  color: #fff;
}

.gg-scope .gg-pd__badge--declined {
  background: #fc9d2b;
  color: #3a2400;
}

.gg-scope .gg-pd__note {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #ececec;
}

.gg-scope .gg-pd__note-label {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b6b6b;
}

.gg-scope .gg-pd__note-body {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #111;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .gg-scope .gg-pd__cards {
    grid-template-columns: 1fr;
  }

  .gg-scope .gg-pd__title {
    font-size: 1.4rem;
  }

  .gg-scope .gg-pd__approve,
  .gg-scope .gg-pd__decline {
    align-self: stretch;
  }
}

@media (max-width: 640px) {
  .gg-scope .gg-pc-bar {
    flex-wrap: wrap;
  }

  .gg-scope .gg-pc-seg {
    width: 100%;
  }

  .gg-scope .gg-pc-seg__btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .gg-scope .gg-pc-launch {
    right: 0.75rem;
    bottom: 0.75rem;
  }

  .gg-scope .gg-pc-panel {
    right: 0.75rem;
    left: 0.75rem;
    bottom: 4.25rem;
    width: auto;
    max-width: none;
  }
}