/* Beside the government hero: "A named official signs", a county map where agents finish routine requests and
   anything consequential waits for a named official, who can open the document and its review, then sign or send it
   back (government-hero.js; Sam, October 25, revision 2). */
.hero.has-art-gh > .container { max-width: var(--container) !important; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(40px, 4vw, 72px); align-items: center; }
.hero.has-art-gh > .container > * { grid-column: 1; }
.hero.has-art-gh > .container > .gh-stage { grid-column: 2; grid-row: 1 / span 5; }
.hero.has-art-gh h1 { font-size: clamp(34px, 3.3vw, 50px); }
@media (max-width: 900px) { .hero.has-art-gh > .container { display: block; max-width: 900px !important; } .gh-stage { display: none; } }

.gh-stage { --gh-warm: #d8b46f; --gh-glow: 132, 181, 210; font-variant-numeric: tabular-nums; }
.gh-card { position: relative; border-radius: 18px; border: 1px solid var(--line-strong); background: var(--panel); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); overflow: hidden; outline: none; }
.gh-stage button { font: inherit; cursor: pointer; }
.gh-stage button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.gh-bar { display: flex; align-items: center; gap: 9px; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 14px; }
.gh-bar > svg { width: 18px; height: 18px; color: var(--turquoise); }
.gh-bar b { color: var(--ink); font-weight: 600; font-size: 15px; }
.gh-bar span { display: flex; align-items: center; gap: 6px; margin-left: auto; color: var(--muted); }
.gh-bar span svg { width: 15px; height: 15px; color: var(--turquoise); }

.gh-gates { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 11px 18px 0; font-size: 13.5px; }
.gh-gl { margin-right: 2px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--turquoise); }
.gh-gates span:not(.gh-gl) { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); white-space: nowrap; }
.gh-gates span svg { width: 14px; height: 14px; color: var(--gh-warm); }

/* The county map */
.gh-map { position: relative; height: 136px; margin: 11px 14px 0; border-radius: 14px; border: 1px solid var(--line); background: radial-gradient(120% 90% at 30% 20%, rgba(88, 150, 189, 0.07), rgba(88, 150, 189, 0) 70%), var(--ground); }
.gh-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gh-map > svg path { vector-effect: non-scaling-stroke; }
.gh-river { fill: none; stroke: rgba(88, 150, 189, 0.22); stroke-width: 12; stroke-linecap: round; }
.gh-roads path { fill: none; stroke: rgba(241, 238, 231, 0.09); stroke-width: 2; }
.gh-roads path.main { stroke: rgba(241, 238, 231, 0.16); stroke-width: 4; }
.gh-line { fill: none; stroke: rgba(132, 181, 210, 0.38); stroke-width: 1.5; stroke-dasharray: 6 5; }
.gh-tag { position: absolute; font-size: 13px; color: var(--faint); pointer-events: none; }

.gh-pin { position: absolute; width: 0; height: 0; opacity: 0; }
.gh-pin.in { opacity: 1; }
.gh-dot { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); border: 3px solid var(--ground); box-shadow: 0 0 0 1px var(--line-strong); transition: transform 0.2s ease; }
.gh-pin.doc .gh-dot { cursor: pointer; }
.gh-pin.doc .gh-dot:hover { transform: scale(1.3); }
.gh-pin.in .gh-dot { animation: gh-drop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.gh-pin.cur .gh-dot::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--turquoise); animation: gh-ring 1.6s ease-out infinite; }
.gh-pin.hold .gh-dot { background: var(--gh-warm); }
.gh-pin.hold .gh-dot::after { border-color: var(--gh-warm); }
.gh-pin.done .gh-dot { background: var(--turquoise); }
.gh-pin.back .gh-dot { background: var(--faint); }
.gh-pin.back .gh-dot::after { border-color: var(--muted); }
.gh-still .gh-dot::after { animation-play-state: paused; }
@keyframes gh-drop { from { transform: translateY(-16px) scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gh-ring { from { transform: scale(0.6); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

.gh-bub { position: absolute; left: 15px; top: 0; transform: translateY(-50%); z-index: 2; width: max-content; max-width: 310px; padding: 7px 11px; border-radius: 11px; border: 1px solid var(--line-strong); background: var(--raised); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s; }
.gh-pin.left .gh-bub { left: auto; right: 15px; }
.gh-pin.low .gh-bub { transform: translateY(-22%); }
.gh-pin.high .gh-bub { transform: translateY(-80%); }
.gh-pin.cur .gh-bub, .gh-pin.doc:hover .gh-bub { opacity: 1; visibility: visible; }
.gh-pin.doc:hover { z-index: 3; }
.gh-bub b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.gh-bub span { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 13.5px; line-height: 1.35; }
.gh-bub span svg { width: 14px; height: 14px; flex: none; }
.gh-bub .work { color: var(--muted); }
.gh-bub .work svg { animation: gh-spin 1.2s linear infinite; }
.gh-bub .ok { color: var(--turquoise); }
.gh-bub .hold { color: var(--gh-warm); }
.gh-bub .back { color: var(--muted); }
@keyframes gh-spin { to { transform: rotate(360deg); } }

/* The tray of documents waiting for a named official; it scrolls inside the picture */
.gh-tray { padding: 12px 18px 0; }
.gh-th { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--turquoise); }
.gh-th svg { width: 15px; height: 15px; }
.gh-n { margin-left: auto; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.gh-scroll { height: 252px; overflow-y: auto; margin-right: -12px; padding-right: 10px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(241, 238, 231, 0.2) transparent;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 30px), transparent); }
.gh-scrolled .gh-scroll { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22px, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 22px, #000 calc(100% - 30px), transparent); }
.gh-end .gh-scroll { -webkit-mask-image: none; mask-image: none; }
.gh-scrolled.gh-end .gh-scroll { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22px); mask-image: linear-gradient(to bottom, transparent, #000 22px); }
.gh-list { list-style: none; margin: 0; padding: 0; }
.gh-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "ic what sign" "ic status status" "ic chips chips"; align-items: center; column-gap: 11px; row-gap: 5px;
  padding: 10px 0; border-bottom: 1px solid var(--line); animation: gh-in 0.45s var(--ease) both; }
.gh-list li:last-child { border-bottom: 0; }
.gh-list li.still, .gh-list li.still .gh-sig path, .gh-list li.still time { animation: none; stroke-dashoffset: 0; opacity: 1; }
.gh-list li.new { animation: gh-in 0.45s var(--ease) both, gh-new 2.4s ease 0.2s; }
@keyframes gh-new { 0%, 40% { background: rgba(216, 180, 111, 0.1); } 100% { background: transparent; } }
.gh-ic { grid-area: ic; align-self: start; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--raised); }
.gh-ic svg { width: 17px; height: 17px; color: var(--gh-warm); }
.gh-list li.signed .gh-ic svg { color: var(--turquoise); }
.gh-list li.back .gh-ic svg { color: var(--faint); }
.gh-what { grid-area: what; min-width: 0; }
.gh-what b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.gh-what em { display: block; margin-top: 2px; font-style: normal; font-size: 13px; line-height: 1.35; color: var(--muted); }

/* Link-looking controls: they open the document or its review inside the picture */
.gh-link { display: inline; padding: 1px 4px; margin: -1px -4px; border: 0; border-radius: 6px; background: none; text-align: left; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--ink);
  text-decoration: underline; text-decoration-color: rgba(132, 181, 210, 0.6); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.gh-link svg { display: inline-block; width: 14px; height: 14px; margin-left: 5px; vertical-align: -2px; color: var(--turquoise); }
.gh-link:hover { color: var(--turquoise); text-decoration-color: var(--turquoise); }

.gh-status { grid-area: status; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.gh-cb { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 4px; background: var(--turquoise); flex: none; }
.gh-cb svg { width: 11px; height: 11px; color: var(--ground); stroke-width: 3.5; }
.gh-k { margin-right: 6px; color: var(--ink); }
.gh-status .gh-rev { margin-right: 4px; font-size: 13px; font-weight: 500; }
.gh-status .gh-rev svg { width: 13px; height: 13px; margin-left: 4px; }
.gh-wt { display: inline-flex; align-items: center; gap: 5px; color: var(--gh-warm); }
.gh-wt svg { width: 14px; height: 14px; flex: none; }
.gh-wt.ok { color: var(--turquoise); }
.gh-wt.back { color: var(--muted); }

.gh-sign { grid-area: sign; align-self: start; position: relative; display: flex; flex-direction: row-reverse; align-items: center; gap: 4px; min-width: 104px; min-height: 36px; }
.gh-signbtn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 10px; border: 1px solid var(--gh-warm); background: rgba(216, 180, 111, 0.1); font-size: 14px; font-weight: 600; color: var(--gh-warm); white-space: nowrap; }
.gh-signbtn:hover { background: rgba(216, 180, 111, 0.22); }
.gh-signbtn svg { width: 15px; height: 15px; }
.gh-backbtn { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px; margin-right: -2px; border: 1px solid transparent; border-radius: 8px; background: none; font-size: 13px; color: var(--muted); white-space: nowrap; }
.gh-backbtn:hover { color: var(--ink); border-color: var(--line-strong); }
.gh-backbtn svg { width: 13px; height: 13px; }
.gh-sig { position: absolute; right: 0; top: 0; pointer-events: none; width: 104px; height: 28px; overflow: visible; }
.gh-sig path { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 260; stroke-dashoffset: 260; }
.gh-sign time { position: absolute; pointer-events: none; right: 0; top: 37px; font-size: 13px; color: var(--turquoise); white-space: nowrap; opacity: 0; }
.gh-list li:not(.wait) .gh-signbtn, .gh-list li:not(.wait) .gh-backbtn { display: none; }
.gh-list li.back .gh-sig { display: none; }
.gh-list li.back time { opacity: 1; color: var(--muted); top: 9px; }
.gh-list li.signed .gh-sig path { animation: gh-write 1.1s ease-out forwards; }
.gh-list li.signed time { animation: gh-fade 0.4s ease 0.9s forwards; }
.gh-list li.signed .gh-sign::after { content: ""; position: absolute; right: 0; top: 33px; width: 104px; height: 1px; background: var(--line-strong); }
@keyframes gh-write { to { stroke-dashoffset: 0; } }
@keyframes gh-fade { to { opacity: 1; } }
@keyframes gh-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Send back: a short reason */
.gh-chips { grid-area: chips; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 3px; }
.gh-chips[hidden] { display: none; }
.gh-cl { font-size: 13px; color: var(--faint); margin-right: 2px; }
.gh-chip { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--raised); font-size: 13px; color: var(--ink); }
.gh-chip:hover { border-color: var(--turquoise); color: var(--turquoise); }
.gh-chip.gh-cancel { border-color: transparent; background: none; color: var(--muted); }

/* Glow: clickable things pulse softly until they are first used */
.gh-glow { animation: gh-glow 2.4s ease-in-out infinite; }
.gh-link.gh-glow { text-decoration-color: var(--turquoise); }
.gh-still .gh-glow { animation-play-state: paused; }
@keyframes gh-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(var(--gh-glow), 0.2), 0 0 0 0 rgba(var(--gh-glow), 0); }
  50% { box-shadow: 0 0 0 2px rgba(var(--gh-glow), 0.75), 0 0 14px 2px rgba(var(--gh-glow), 0.3); }
}

/* The record line and footer */
.gh-foot { padding: 10px 18px 12px; border-top: 1px solid var(--line); }
.gh-rec { display: flex; gap: 8px; margin: 0 0 6px; min-height: 18px; font-size: 13px; line-height: 1.4; color: var(--ink); white-space: nowrap; }
.gh-rec time { flex: none; color: var(--turquoise); }
.gh-rec span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gh-rec.flash { animation: gh-fade-in 0.5s ease; }
@keyframes gh-fade-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.gh-fl { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 13.5px; color: var(--muted); }
.gh-fl svg { width: 15px; height: 15px; color: var(--turquoise); flex: none; }

/* The document and its review, opened inside the picture */
.gh-panel { position: absolute; left: 0; right: 0; z-index: 5; display: flex; flex-direction: column; padding: 12px 14px 0; background: var(--panel); animation: gh-slide 0.32s var(--ease) both; }
.gh-panel[hidden] { display: none; }
@keyframes gh-slide { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.gh-ph { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.gh-pback { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px 5px 6px; border: 1px solid var(--line-strong); border-radius: 9px; background: none; font-size: 14px; color: var(--ink); }
.gh-pback:hover { border-color: var(--turquoise); }
.gh-pback svg { width: 15px; height: 15px; }
.gh-tabs { display: flex; gap: 3px; margin: 0 auto; padding: 3px; border-radius: 11px; border: 1px solid var(--line); background: var(--ground); }
.gh-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 0; border-radius: 8px; background: none; font-size: 13.5px; color: var(--muted); }
.gh-tabs button svg { width: 14px; height: 14px; }
.gh-tabs button[aria-pressed="true"] { background: var(--raised); color: var(--ink); box-shadow: 0 0 0 1px var(--line-strong); }
.gh-tabs button[aria-pressed="true"] svg { color: var(--turquoise); }
.gh-tabs button:hover { color: var(--ink); }
.gh-px { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line-strong); border-radius: 9px; background: none; color: var(--muted); }
.gh-px:hover { color: var(--ink); }
.gh-px svg { width: 16px; height: 16px; }
.gh-pbody { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(241, 238, 231, 0.2) transparent; }

.gh-paper { padding: 12px 18px 10px; border-radius: 6px; background: #f3f0e8; color: #2a2823; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); font-size: 13.5px; line-height: 1.45; }
.gh-pk { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #6b665c; }
.gh-pk svg { width: 15px; height: 15px; }
.gh-pk span { margin-left: auto; letter-spacing: 0; text-transform: none; font-weight: 500; }
.gh-paper h3 { margin: 3px 0 7px; font-size: 17px; font-weight: 650; line-height: 1.25; letter-spacing: -0.01em; color: #1b1a17; outline: none; }
.gh-paper dl { display: grid; gap: 1px; margin: 0; }
.gh-paper dl div { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 10px; }
.gh-paper dt { color: #6b665c; }
.gh-paper dd { margin: 0; font-weight: 600; color: #24221e; }
.gh-terms { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 12px; list-style: none; margin: 8px 0 0; padding: 6px 0 0; border-top: 1px solid #d9d4c8; }
.gh-terms li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; padding: 2px 6px; margin: 0 -6px; border-radius: 4px; }
.gh-terms li b { font-weight: 600; color: #6b665c; }
.gh-terms li.flag { background: rgba(216, 180, 111, 0.32); box-shadow: inset 3px 0 0 #b8893a; }

.gh-rv { padding: 2px 4px; }
.gh-rvh { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--muted); }
.gh-rvh svg { width: 15px; height: 15px; color: var(--turquoise); }
.gh-rvh b { color: var(--ink); font-weight: 600; }
.gh-rv h3 { margin: 6px 0 6px; font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--ink); outline: none; }
.gh-rv ul { list-style: none; margin: 0 0 10px; padding: 0; }
.gh-rv li { display: flex; align-items: flex-start; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.4; color: var(--ink); }
.gh-rv li svg { width: 17px; height: 17px; margin-top: 1px; flex: none; color: var(--turquoise); }
.gh-rv li.look { margin-top: 4px; padding: 8px 10px; border: 1px solid rgba(216, 180, 111, 0.45); border-radius: 10px; background: rgba(216, 180, 111, 0.08); }
.gh-rv li.look svg { color: var(--gh-warm); }
.gh-rvn { margin: 0 0 10px; font-size: 13.5px; color: var(--muted); }
.gh-rv .gh-link { font-size: 14px; }

.gh-pf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--panel); }
.gh-pf .gh-wt { margin-right: auto; font-size: 13.5px; }
.gh-pf .gh-backbtn { padding: 6px 10px; border-color: var(--line-strong); font-size: 14px; }
.gh-pf .gh-done { margin-left: auto; color: var(--ink); }
.gh-pf .gh-wt.ok, .gh-pf .gh-wt.back { flex: 1 1 260px; margin-right: 0; }
.gh-pchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .gh-stage *, .gh-stage *::before, .gh-stage *::after { animation: none !important; transition: none !important; }
  .gh-list li.signed .gh-sig path, .gh-sig2 path { stroke-dashoffset: 0; }
  .gh-list li.signed time { opacity: 1; }
  .gh-glow { box-shadow: 0 0 0 2px rgba(var(--gh-glow), 0.6); }
}

/* Revision 3 (Sam, October 25): Back, the tabs and Close sit inside the white sheet with the document; the signature
   line is replaced by Sign and email back; the review offers Suggest and reply; every pin leads to its line. */
.gh-sheet { flex: 1; min-height: 0; display: flex; flex-direction: column; border-radius: 10px; background: #f3f0e8; color: #2a2823; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); overflow: hidden; }
.gh-sheet .gh-ph { padding: 8px 10px; border-bottom: 1px solid #d9d4c8; }
.gh-sheet .gh-pback, .gh-sheet .gh-px { border-color: #cfc9bc; color: #2a2823; }
.gh-sheet .gh-pback:hover, .gh-sheet .gh-px:hover { border-color: #2f6f95; color: #1b1a17; }
.gh-sheet .gh-tabs { border-color: #d9d4c8; background: #e6e1d5; }
.gh-sheet .gh-tabs button { color: #6b665c; }
.gh-sheet .gh-tabs button:hover { color: #1b1a17; }
.gh-sheet .gh-tabs button[aria-pressed="true"] { background: #fffdf8; color: #1b1a17; box-shadow: 0 0 0 1px #cfc9bc; }
.gh-sheet .gh-tabs button[aria-pressed="true"] svg { color: #2f6f95; }
.gh-sheet button:focus-visible { outline-color: #1b1a17; }
.gh-sheet .gh-pbody { padding: 10px 18px 14px; scrollbar-color: rgba(0, 0, 0, 0.25) transparent; }
.gh-sheet .gh-paper { padding: 0; border-radius: 0; background: none; box-shadow: none; }

.gh-sa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #d9d4c8; font-size: 13px; color: #6b665c; }
.gh-sa > span { flex: 1 1 200px; display: flex; align-items: center; gap: 6px; }
.gh-sa > span svg { width: 15px; height: 15px; flex: none; }
.gh-sheet .gh-signbtn { padding: 8px 14px; border-color: #1f3a52; background: #1f3a52; color: #fff; }
.gh-sheet .gh-signbtn:hover { background: #2f6f95; border-color: #2f6f95; }
.gh-sa.done { font-weight: 600; color: #2f6f95; }
.gh-sa.back { color: #6b665c; }
.gh-sig2 { flex: none; width: 96px; height: 28px; overflow: visible; }
.gh-sig2 path { fill: none; stroke: #1f3a52; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 260; stroke-dashoffset: 260; animation: gh-write 1.1s ease-out 0.15s forwards; }
.gh-paper.still .gh-sig2 path { animation: none; stroke-dashoffset: 0; }

.gh-sheet .gh-rvh { color: #6b665c; }
.gh-sheet .gh-rvh b, .gh-sheet .gh-rv h3 { color: #1b1a17; }
.gh-sheet .gh-rvh svg, .gh-sheet .gh-rv li svg { color: #2f6f95; }
.gh-sheet .gh-rv li { border-bottom-color: #d9d4c8; color: #2a2823; }
.gh-sheet .gh-rv li.look { align-items: center; border-color: #c9a35a; background: rgba(216, 180, 111, 0.22); }
.gh-sheet .gh-rv li.look svg { color: #9a7130; }
.gh-rv li.look > span { flex: 1; }
.gh-rv li.look small { display: block; margin-top: 3px; font-size: 13px; font-weight: 600; color: #6b4f1f; }
.gh-suggest { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 9px; border: 1px solid #9a7130; background: #fffdf8; font-size: 13.5px; font-weight: 600; color: #6b4f1f; white-space: nowrap; }
.gh-suggest:hover { background: #9a7130; color: #fff; }
.gh-sheet .gh-rv li.look .gh-suggest svg { width: 15px; height: 15px; margin: 0; color: currentColor; }
.gh-sheet .gh-rvn { color: #6b665c; }
.gh-sheet .gh-link { color: #1b1a17; text-decoration-color: #2f6f95; }
.gh-sheet .gh-link:hover { color: #2f6f95; }
.gh-sheet .gh-link svg { color: #2f6f95; }

.gh-pin.in .gh-dot { cursor: pointer; }
.gh-pin.in .gh-dot:hover { transform: scale(1.3); }
.gh-pin.in:hover .gh-bub { opacity: 1; visibility: visible; }
.gh-pin.in:hover { z-index: 3; }
.gh-list li.auto .gh-ic svg { color: var(--turquoise); }
.gh-wt.work { color: var(--muted); }
.gh-wt.work svg { animation: gh-spin 1.2s linear infinite; }
.gh-list li.gh-hit { animation: gh-hit 1.8s ease; }
@keyframes gh-hit { 0%, 35% { background: rgba(132, 181, 210, 0.16); } 100% { background: transparent; } }
.gh-pf .gh-wt:not(.ok):not(.back) { flex: 1 1 170px; min-width: 0; margin-right: 0; }

/* Sign and Send back no longer crowd each other (Sam, October 25). */
.gh-sign { gap: 12px; }
.gh-sign .gh-backbtn { margin-right: 0; border-color: var(--line-strong); padding: 5px 9px; }