/* The review island. Uses the theme's tokens (--site-*, --font-*). */
.gj-review { --gjr-border: rgba(255,255,255,0.1); --gjr-panel: rgba(255,255,255,0.02); font-family: var(--font-body-family, system-ui); color: var(--site-text, #f5f5f5); }
.gj-review * { box-sizing: border-box; }
.gj-review [hidden] { display: none !important; }
.gj-review .gjr-eyebrow { font-family: var(--font-display-family); font-weight: 900; font-size: 0.75rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--site-orange, #ff6b00); margin: 0 0 1.5rem; }
.gj-review .gjr-beta { font-family: var(--font-body-family); font-weight: 700; font-size: 0.875rem; color: var(--site-yellow, #ffd600); margin: -0.5rem 0 1.5rem; }
.gj-review .gjr-h1 { font-family: var(--font-display-family); font-weight: 900; font-size: clamp(2.5rem, 7vw, 4.5rem); line-height: 0.95; letter-spacing: -0.05em; margin: 0 0 1.5rem; text-wrap: balance; }
.gj-review .gjr-lead { font-family: var(--font-display-family); font-size: clamp(1.25rem, 2.5vw, 1.75rem); color: var(--site-muted, #9a9a9a); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 2rem; max-width: 46rem; }
.gj-review .gjr-intro { font-size: 1.125rem; line-height: 1.6; color: #cfcfcf; max-width: 46rem; margin: 0 0 2rem; }
.gj-review .gjr-intro p + p { margin-top: 1rem; }
.gj-review .gjr-small { font-size: 0.875rem; color: var(--site-muted); line-height: 1.5; max-width: 40rem; white-space: pre-line; margin: 1.5rem 0 0; }
.gj-review .gjr-drawing { max-width: 34rem; margin: 0 0 2.5rem; }
.gj-review .gjr-drawing svg { display: block; width: 100%; height: auto; }
.gj-review .gjr-btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display-family); font-weight: 700; background: var(--site-orange); color: var(--site-bg, #131313); border: 0; padding: 0.9rem 1.75rem; font-size: 1.05rem; cursor: pointer; transition: background-color 200ms, transform 200ms cubic-bezier(0.34,1.56,0.64,1); border-radius: 0; text-decoration: none; }
.gj-review .gjr-btn:hover { background: #fff; transform: scale(1.03); }
.gj-review .gjr-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.gj-review .gjr-btn--quiet { background: transparent; color: var(--site-text); border: 1px solid rgba(255,255,255,0.25); }
.gj-review .gjr-btn--quiet:hover { background: #fff; color: var(--site-bg); border-color: #fff; }
.gj-review .gjr-link { background: none; border: 0; color: var(--site-muted); font-family: var(--font-body-family); font-weight: 700; font-size: 1rem; cursor: pointer; padding: 0; }
.gj-review .gjr-link:hover { color: var(--site-orange); }
/* Interview layout */
.gj-review .gjr-stage { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 900px) { .gj-review .gjr-stage { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; } .gj-review .gjr-panelcol { position: sticky; top: 1.5rem; } }
@media (max-width: 899px) { .gj-review .gjr-panelcol { position: sticky; bottom: 0; z-index: 2; background: var(--site-bg, #111); padding-top: 0.5rem; } }
/* the conversation so far */
.gj-review .gjr-log .gjr-past { padding-bottom: 0.25rem; }
.gj-review .gjr-log .gjr-past .gjr-say { color: var(--site-muted, #9a9a9a); }
.gj-review .gjr-log .gjr-past .gjr-say.gjr-say--big { font-size: 1.15rem; }
.gj-review .gjr-log .gjr-past .gjr-progress { margin-top: 1rem; }
.gj-review .gjr-reader { display: flex; gap: 1rem; align-items: flex-start; margin: 0 0 1.75rem; }
.gj-review .gjr-ricon { flex: none; width: 56px; height: 56px; border-radius: 9999px; border: 2px solid var(--site-muted, #9a9a9a); display: grid; place-items: center; font-family: var(--font-body-family); font-weight: 700; font-size: 0.8rem; color: var(--site-muted, #9a9a9a); }
.gj-review .gjr-rsay { font-size: 1.125rem; line-height: 1.6; color: var(--site-text); white-space: pre-line; max-width: 42rem; padding-top: 0.9rem; }
.gj-review .gjr-spinner--inline { margin-top: 1.1rem; }
.gj-review .gjr-live { scroll-margin-top: 1.5rem; }
.gj-review .gjr-progress { font-family: var(--font-body-family); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--site-muted); margin: 0 0 1.5rem; }
.gj-review .gjr-progress b { color: var(--site-orange); }
.gj-review .gjr-geoff { display: flex; gap: 1rem; align-items: flex-start; margin: 0 0 1.5rem; }
.gj-review .gjr-head { width: 56px; height: 56px; border-radius: 9999px; object-fit: cover; border: 2px solid var(--site-orange); flex-shrink: 0; }
.gj-review .gjr-meter { display: block; height: 3px; width: 56px; margin-top: 6px; background: rgba(255,255,255,0.12); border-radius: 2px; overflow: hidden; }
.gj-review .gjr-meter i { display: block; height: 100%; width: 0; background: var(--site-orange); transition: width 120ms; }
.gj-review .gjr-say { font-size: 1.125rem; line-height: 1.6; color: var(--site-text); white-space: pre-line; max-width: 42rem; }
.gj-review .gjr-say.gjr-say--big { font-family: var(--font-display-family); font-weight: 700; font-size: 1.4rem; line-height: 1.25; letter-spacing: -0.01em; }
.gj-review .gjr-sound { display: inline-flex; align-items: center; gap: 0.5rem; background: none; border: 1px solid rgba(255,255,255,0.15); color: var(--site-muted); font-family: var(--font-body-family); font-weight: 700; font-size: 0.8rem; padding: 0.4rem 0.75rem; cursor: pointer; margin: 0 0 1.5rem; }
.gj-review .gjr-sound[data-on="1"] { color: var(--site-orange); border-color: var(--site-orange); }
.gj-review .gjr-field { margin: 0 0 1.5rem; }
.gj-review .gjr-label { display: block; font-family: var(--font-body-family); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--site-muted); margin: 0 0 0.6rem; }
.gj-review .gjr-hint { font-size: 0.875rem; color: var(--site-muted); margin: 0.5rem 0 0; }
.gj-review .gjr-input { width: 100%; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.15); color: var(--site-text); padding: 0.9rem 1rem; font-family: var(--font-body-family); font-size: 1.05rem; outline: none; border-radius: 0; }
.gj-review .gjr-input:focus { border-color: var(--site-orange); box-shadow: 0 0 0 2px rgba(255,107,0,0.4); }
.gj-review textarea.gjr-input { min-height: 7rem; resize: vertical; }
.gj-review .gjr-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gj-review .gjr-chip { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.18); color: var(--site-text); font-family: var(--font-body-family); font-weight: 700; font-size: 0.9rem; padding: 0.55rem 0.9rem; cursor: pointer; border-radius: 0; transition: border-color 150ms, background-color 150ms; }
.gj-review .gjr-chip:hover { border-color: var(--site-orange); }
.gj-review .gjr-chip[aria-pressed="true"] { background: var(--site-orange); color: var(--site-bg); border-color: var(--site-orange); }
.gj-review .gjr-chip--else { border-style: dashed; color: var(--site-muted); }
.gj-review .gjr-row { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; margin-top: 1rem; }
.gj-review .gjr-mic { display: inline-flex; align-items: center; gap: 0.4rem; background: none; border: 1px solid rgba(255,255,255,0.18); color: var(--site-muted); font-family: var(--font-body-family); font-weight: 700; font-size: 0.85rem; padding: 0.6rem 0.9rem; cursor: pointer; }
.gj-review .gjr-error { color: var(--site-magenta, #ff2d9b); font-size: 0.9rem; margin: 0.75rem 0 0; }
.gj-review .gjr-wait { color: var(--site-muted); font-size: 0.9rem; }
/* Side panel */
.gj-review .gjr-panel { border: 1px solid var(--gjr-border); background: var(--gjr-panel); padding: 1.25rem; }
.gj-review .gjr-panel h3 { font-family: var(--font-body-family); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--site-muted); margin: 0 0 0.75rem; }
.gj-review .gjr-panel .gjr-drawing { max-width: 100%; margin: 0 0 1rem; }
.gj-review .gjr-pchips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1rem; }
.gj-review .gjr-pchip { font-size: 0.8rem; font-weight: 700; padding: 0.3rem 0.6rem; border: 1px solid rgba(255,255,255,0.18); color: var(--site-text); }
.gj-review .gjr-pchip--light { color: var(--site-muted); border-style: dashed; }
.gj-review .gjr-pchip b { color: var(--site-orange); margin-left: 0.35rem; }
@media (max-width: 899px) {
  .gj-review .gjr-panel { padding: 0.75rem 1rem; }
  .gj-review .gjr-panel .gjr-drawing, .gj-review .gjr-panel h3 { display: none; }
  .gj-review .gjr-panel .gjr-pchips { margin: 0; }
}
/* Building screen */
.gj-review .gjr-building { display: grid; gap: 1.5rem; }
.gj-review .gjr-building .gjr-say { color: var(--site-muted); }
/* Report */
.gj-review .gjr-report { max-width: 46rem; }
.gj-review .gjr-s { padding: 2.5rem 0; border-top: 1px solid var(--gjr-border); }
.gj-review .gjr-s1 { border-top: 0; padding-top: 0; }
.gj-review .gjr-rung { font-family: var(--font-display-family); font-weight: 900; font-size: clamp(2.5rem, 7vw, 4.5rem); line-height: 0.95; letter-spacing: -0.05em; margin: 0 0 1rem; }
.gj-review .gjr-s h3 { font-family: var(--font-display-family); font-weight: 900; font-size: clamp(1.6rem, 3.5vw, 2.25rem); line-height: 1.05; letter-spacing: -0.04em; margin: 0 0 1.25rem; color: #fff; }
.gj-review .gjr-s h4 { font-family: var(--font-display-family); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; margin: 0 0 0.75rem; }
.gj-review .gjr-s p, .gj-review .gjr-s li, .gj-review .gjr-s dd { font-size: 1.05rem; line-height: 1.6; color: #cfcfcf; }
.gj-review .gjr-s p + p { margin-top: 1rem; }
.gj-review .gjr-item { padding: 1.5rem 0; border-top: 1px dashed var(--gjr-border); }
.gj-review .gjr-item dl { display: grid; grid-template-columns: 1fr; gap: 0.5rem 1.5rem; margin: 0; }
@media (min-width: 640px) { .gj-review .gjr-item dl { grid-template-columns: 8rem 1fr; } }
.gj-review .gjr-item dt { font-family: var(--font-body-family); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--site-muted); padding-top: 0.3rem; }
.gj-review .gjr-item dd { margin: 0; }
.gj-review .gjr-prompt { white-space: pre-wrap; word-break: break-word; background: rgba(255,255,255,0.03); border: 1px solid var(--gjr-border); padding: 1rem; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.9rem; line-height: 1.55; color: var(--site-text); margin: 0.25rem 0 0; }
.gj-review .gjr-ladder { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.gj-review .gjr-ladder li { display: grid; grid-template-columns: 2rem 1fr; gap: 0.25rem 0.75rem; align-items: baseline; padding: 0.75rem 0; border-top: 1px solid var(--gjr-border); }
.gj-review .gjr-ladder .gjr-n { font-family: var(--font-display-family); font-weight: 900; color: var(--site-muted); }
.gj-review .gjr-ladder .gjr-name { font-family: var(--font-display-family); font-weight: 900; font-size: 1.1rem; }
.gj-review .gjr-ladder .gjr-line { grid-column: 2; font-size: 0.95rem; color: var(--site-muted); }
.gj-review .gjr-ladder .gjr-chips { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.gj-review .gjr-ladder .gjr-chip { cursor: default; font-size: 0.8rem; padding: 0.3rem 0.6rem; }
.gj-review .gjr-ladder .gjr-light .gjr-chip { color: var(--site-muted); border-style: dashed; }
.gj-review .gjr-ladder .gjr-r4 .gjr-n, .gj-review .gjr-ladder .gjr-r4 .gjr-name { color: var(--site-orange); }
.gj-review .gjr-r0 { border-top: 0 !important; }
.gj-review .gjr-cols { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .gj-review .gjr-cols { grid-template-columns: repeat(3, 1fr); } }
.gj-review .gjr-col { border: 1px solid var(--gjr-border); background: var(--gjr-panel); padding: 1.25rem; }
.gj-review .gjr-col h4 { font-family: var(--font-display-family); font-weight: 700; font-size: 1.35rem; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 1rem; }
.gj-review .gjr-col-help h4 { color: var(--site-orange); }
.gj-review .gjr-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.gj-review .gjr-col li { font-size: 0.95rem; }
.gj-review .gjr-col-help { border-color: var(--site-orange); }
.gj-review .gjr-empty { color: var(--site-muted); font-style: italic; }
.gj-review .gjr-book { margin-top: 1.5rem; font-family: var(--font-display-family); font-weight: 700; color: #fff; }
.gj-review .gjr-close { border-left: 3px solid var(--site-orange); margin: 1.5rem 0 0; padding: 0 0 0 1.25rem; font-family: var(--font-display-family); font-weight: 700; font-size: 1.2rem; line-height: 1.35; color: #fff; }
.gj-review .gjr-payoff { font-family: var(--font-display-family); font-weight: 900; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; color: #fff; }
.gj-review .gjr-actions { display: grid; gap: 1.5rem; padding: 2.5rem 0; border-top: 1px solid var(--gjr-border); }
@media (min-width: 768px) { .gj-review .gjr-actions { grid-template-columns: 1fr 1fr; } }
.gj-review .gjr-action { border: 1px solid var(--gjr-border); background: var(--gjr-panel); padding: 1.5rem; }
.gj-review .gjr-action p { margin: 0 0 1rem; font-size: 0.95rem; color: var(--site-muted); }
.gj-review .gjr-fb { padding: 2rem 0; border-top: 1px solid var(--gjr-border); }
.gj-review .gjr-fb .gjr-label { margin-top: 1rem; }

/* thinking indicator (step 6 pattern, step 7 build) */
.gj-review .gjr-busy { display: flex; align-items: center; gap: .75rem; }
.gj-review .gjr-busy .gjr-wait { margin: 0; }
.gj-review .gjr-spinner { width: 1.25rem; height: 1.25rem; flex: none; border-radius: 50%; border: 2px solid var(--gjr-border); border-top-color: var(--site-orange, #ff6b00); animation: gjr-spin .9s linear infinite; }
@keyframes gjr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gj-review .gjr-spinner { animation: none; border-top-color: var(--gjr-border); } }

.gj-review .gjr-back { margin-left: auto; font-weight: 400; }
.gj-review .gjr-row { align-items: center; }
.gj-review .gjr-field--past { margin: 0 0 1.25rem; }
.gj-review .gjr-field--past .gjr-label { color: var(--site-muted); }
.gj-review .gjr-field--past .gjr-chip { cursor: default; }
.gj-review .gjr-field--past .gjr-rsay { padding-top: 0; }
.gj-review .gjr-reader--quiet .gjr-rsay { display: none; }
.gj-review .gjr-resumed { margin: 0 0 1.5rem; }
.gj-review .gjr-prompt-hint { font-size: 0.95rem; color: var(--site-muted); margin: 0.25rem 0 0.5rem; }
.gj-review .gjr-prompt-wrap { position: relative; }
.gj-review .gjr-prompt-wrap .gjr-prompt { padding-right: 4.5rem; }
.gj-review .gjr-copy { position: absolute; top: 0.6rem; right: 0.6rem; background: rgba(255,255,255,0.06); border: 1px solid var(--gjr-border); color: var(--site-text); font-family: var(--font-body-family); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.35rem 0.6rem; cursor: pointer; }
.gj-review .gjr-copy:hover { border-color: var(--site-orange); color: var(--site-orange); }
/* voice */
.gj-review .gjr-mic[data-state="on"] { color: var(--site-orange); border-color: var(--site-orange); }
.gj-review .gjr-mic[data-state="busy"] { color: var(--site-muted); }
.gj-review .gjr-micstatus { font-weight: 400; font-size: 0.85rem; color: var(--site-muted); margin-left: 0.4rem; }
.gj-review .gjr-mic[data-state="on"] .gjr-micstatus { color: var(--site-orange); }
.gj-review .gjr-row--tight { margin-top: 0.5rem; }
.gj-review .gjr-small span[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .gj-review .gjr-meter i { transition: none; } }
.gj-review .gjr-side { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; flex: none; }
.gj-review .gjr-side .gjr-sound { font-size: 0.7rem; padding: 0.25rem 0.5rem; }
.gj-review .gjr-side .gjr-meter { margin-top: 0; }
/* the mic lives inside its field */
.gj-review .gjr-inputwrap { position: relative; }
.gj-review .gjr-inputwrap .gjr-input { padding-right: 6.5rem; }
.gj-review .gjr-inputwrap .gjr-mic { position: absolute; right: 0.5rem; bottom: 0.5rem; margin: 0; color: var(--site-orange); border-color: var(--site-orange); background: rgba(255,107,0,0.08); }
.gj-review .gjr-inputwrap--line .gjr-mic { top: 50%; bottom: auto; transform: translateY(-50%); }
.gj-review .gjr-inputwrap .gjr-mic[data-state="on"] { background: var(--site-orange); color: var(--site-bg); }
.gj-review .gjr-inputwrap .gjr-mic[data-state="on"] .gjr-micstatus { color: var(--site-bg); }
.gj-review .gjr-inputwrap .gjr-mic[aria-disabled="true"] { display: none; }
.gj-review .gjr-mic[aria-disabled="true"] { cursor: not-allowed; opacity: 0.6; }
.gj-review .gjr-running { font-family: var(--font-display-family); font-weight: 700; font-size: 1.15rem; color: var(--site-text); margin: 0 0 1.25rem; }
/* reserve the island's room before it mounts, so the page does not jump (CLS on /ladder) */
.gj-review:empty { min-height: 78vh; }