:root {
  --ge-ink: #10231f;
  --ge-muted: #5b6b66;
  --ge-green: #3e7c59;
  --ge-green-2: #2d5a40;
  --ge-soft: #edf5f1;
  --ge-line: #cedbd5;
  --ge-warn: #9a5a0a;
  --ge-danger: #a63232;
  --ge-shadow: 0 14px 36px rgba(16, 35, 31, .08);
}

* { box-sizing: border-box; }
.ge-body { margin: 0; min-height: 100vh; background: #f5f8f6; color: var(--ge-ink); font-family: Inter, sans-serif; }
.ge-header { min-height: 64px; padding: 10px max(18px, env(safe-area-inset-left)); display: flex; align-items: center; justify-content: space-between; gap: 12px; color: white; background: var(--ge-green); }
.ge-brand { display: inline-flex; align-items: center; gap: 9px; color: white; text-decoration: none; font-weight: 700; }
.ge-brand img { width: 38px; height: 38px; object-fit: contain; }
.ge-prototype-badge { padding: 5px 8px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.ge-main { min-height: calc(100vh - 170px); padding: 24px 14px 44px; }
.ge-shell { width: min(100%, 720px); margin: 0 auto; }
.ge-card { padding: clamp(20px, 5vw, 36px); background: white; border: 1px solid var(--ge-line); border-radius: 20px; box-shadow: var(--ge-shadow); }
.ge-card + .ge-card { margin-top: 16px; }
.ge-eyebrow { margin: 0 0 7px; color: var(--ge-green-2); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ge-title { margin: 0; font-size: clamp(20px, 5vw, 26px); line-height: 1.2; letter-spacing: -.015em; }
.ge-subtitle { margin: 12px 0 0; color: var(--ge-muted); font-size: 15px; line-height: 1.6; }
.ge-notice { margin: 20px 0; padding: 14px 15px; border-radius: 12px; background: var(--ge-soft); color: #294b42; font-size: 14px; line-height: 1.5; }
.ge-prototype-note { border-left: 4px solid #d39b3b; background: #fff8e9; color: #694812; }
/* ---------------------------------------------------------------------------
   THE JOURNEY RAIL. Four stages, then a bar for the stage you are in. Replaced two
   independent per-section bars that each counted only their own section, so the
   profile read as one third of the whole evaluation. See journey() in
   js/glove-evaluation.js and STAGES in js/glove-evaluation-flow.js.
   --------------------------------------------------------------------------- */
.ge-journey { margin-bottom: 16px; }
.ge-stages { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; }
.ge-stage { position: relative; flex: 1; padding: 27px 2px 0; color: #64756f; font-size: 11px; font-weight: 700; line-height: 1.25; text-align: center; }
.ge-stage::before { content: ''; position: absolute; top: 0; left: 50%; width: 22px; height: 22px; margin-left: -11px; border: 1.5px solid var(--ge-line); border-radius: 50%; background: #fff; }
.ge-stage::after { content: ''; position: absolute; top: 10px; left: calc(50% + 14px); right: calc(-50% + 14px); height: 2px; background: var(--ge-line); }
.ge-stage:last-child::after { display: none; }
.ge-stage .ge-icon { position: absolute; top: 4px; left: 50%; width: 14px; height: 14px; margin-left: -7px; color: #93a79f; }
.ge-stage.is-here { color: var(--ge-green-2); }
.ge-stage.is-here::before { border-color: var(--ge-green-2); background: var(--ge-green-2); }
.ge-stage.is-done::before, .ge-stage.is-done::after { border-color: var(--ge-green); background: var(--ge-green); }
.ge-stage.is-here .ge-icon, .ge-stage.is-done .ge-icon { color: #fff; }
.ge-stage-note { display: block; margin-top: 2px; color: var(--ge-muted); font-size: 10px; font-weight: 600; }
.ge-journey-now { display: flex; justify-content: space-between; gap: 12px; margin: 15px 0 6px; color: var(--ge-muted); font-size: 12px; font-weight: 600; }
.ge-icon { width: 16px; height: 16px; flex: 0 0 auto; }
.ge-progress-track { height: 7px; overflow: hidden; border-radius: 99px; background: #dde7e2; }
.ge-progress-fill { height: 100%; background: var(--ge-green-2); transition: width .2s ease; }
.ge-field { min-width: 0; margin: 26px 0 0; padding: 0; border: 0; }
.ge-label { display: block; margin-bottom: 6px; font-size: 16px; font-weight: 700; line-height: 1.35; }
.ge-required { margin-left: 3px; color: var(--ge-danger); }
.ge-help { margin: 0 0 10px; color: var(--ge-muted); font-size: 13px; line-height: 1.45; }
.ge-options { display: grid; gap: 9px; }
.ge-option { position: relative; display: flex; align-items: center; gap: 11px; min-height: 50px; padding: 11px 13px; border: 1px solid #c8d5cf; border-radius: 12px; background: var(--ge-option-bg, white); cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
/* Zebra striping on stacked lists only. Grids (scales, timelines, two-column compact
   lists) would read as a checkerboard. The stripe is NEUTRAL grey on purpose: the
   selected state is green, and the two must never be confusable. */
.ge-options:not(.ge-scale):not(.is-compact) > .ge-option:nth-of-type(even) { --ge-option-bg: #f3f6f5; }
.ge-option:hover { border-color: #79a18f; background: #fbfdfc; }
/* Switched off by an exclusive "none" answer. Greyed and non-interactive, so the
   exclusivity is visible instead of only being enforced when a tick vanishes. */
.ge-option.is-muted { opacity: .45; cursor: not-allowed; }
.ge-option.is-muted:hover { border-color: #c8d5cf; background: var(--ge-option-bg, white); }
.ge-option:active { transform: scale(.995); }
.ge-option.selected { border-color: var(--ge-green-2); background: var(--ge-soft); box-shadow: inset 0 0 0 1px var(--ge-green-2); }
.ge-option input { width: 20px; height: 20px; flex: 0 0 20px; accent-color: var(--ge-green-2); }
.ge-option-text { font-size: 14px; line-height: 1.4; }
/* The run is exactly the ordered options. The escape option ("Cannot assess",
   "Not sure") is rendered OUTSIDE it, in .ge-escape, so the right-hand anchor lines
   up over the top of the scale instead of over the escape. --ge-run-cols is set
   inline by renderField from the option count, so a 4-step timeline and a 5-step
   rating share one mechanism. */
.ge-scale { grid-template-columns: repeat(var(--ge-run-cols, 5), minmax(0, 1fr)); }
.ge-scale .ge-option { justify-content: center; padding: 10px 4px; text-align: center; }
/* A rating tick: the word sits above its own number, INSIDE the same option, so the
   two cannot fall out of alignment however many steps the scale has. Stacked, not
   side by side, because at 5 columns on a phone there is no horizontal room. */
.ge-scale .ge-option.has-tick { flex-direction: column; gap: 3px; min-height: 68px; padding: 9px 3px; }
.ge-tick { color: var(--ge-muted); font-size: 10.5px; font-weight: 700; line-height: 1.15; letter-spacing: .01em; }
.ge-option.selected .ge-tick { color: var(--ge-green-2); }
.ge-scale .ge-option.has-tick .ge-option-text { font-size: 15px; font-weight: 700; }
.ge-scale .ge-option input { position: absolute; opacity: 0; pointer-events: none; }
.ge-ordinal .ge-option { min-height: 62px; }
.ge-ordinal .ge-option-text { font-size: 12px; font-weight: 600; line-height: 1.25; }
.ge-escape { margin-top: 9px; }

/* Short labels in one column is a long scroll for no gain. Two up on a phone, three
   on a desktop, tap target unchanged. Opt-in per question: long labels stay stacked. */
.ge-options.is-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ge-options.is-compact .ge-option-text { font-size: 13px; }

.ge-option-icon { width: 18px; height: 18px; color: var(--ge-green); }
.ge-option.selected .ge-option-icon { color: var(--ge-green-2); }

/* A note that belongs to ONE answer, indented under it so the ownership is visible
   rather than implied. */
.ge-option-note { margin: 8px 0 2px 21px; padding-left: 13px; border-left: 2px solid var(--ge-line); }
/* ⛔ THE FOLLOW-UP BOX MUST SPAN THE WHOLE ROW.
   Owner, 2026-09-03: "The text boxes are good height but you can make them longer to
   the margin on the right, doesn't need to be half page width. Some of the text boxes
   are already fine such as for 'Poor fit'."
   That difference was the diagnosis. .ge-options is a GRID, and renderField returns
   the note as a SIBLING of the option it belongs to, so on a two-column compact list
   the note dropped into the next cell and rendered half width. On a normal stacked
   list (one column, which is where "Poor fit" lives) it already filled the row, which
   is why only some boxes looked wrong. Scales are grids too, so both are covered. */
.ge-options.is-compact > .ge-option-note,
.ge-options.ge-scale > .ge-option-note { grid-column: 1 / -1; }
.ge-note-label { display: block; margin-bottom: 5px; color: var(--ge-muted); font-size: 12px; font-weight: 600; }
.ge-note-textarea { min-height: 74px; font-size: 14px; }
.ge-textarea { width: 100%; min-height: 112px; padding: 12px; border: 1px solid #c8d5cf; border-radius: 12px; color: var(--ge-ink); background: white; font: inherit; line-height: 1.5; resize: vertical; }
.ge-text-input, .ge-other-input { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #c8d5cf; border-radius: 10px; color: var(--ge-ink); background: white; font: inherit; }
.ge-other-input { margin-top: 10px; }
.ge-title + .ge-field, .ge-subtitle + .ge-field, .ge-scale-guide + .ge-field { margin-top: 16px; }
.ge-field legend .ge-label { margin-bottom: 10px; }
.ge-textarea:focus, .ge-text-input:focus, .ge-other-input:focus, .ge-option:focus-within, .ge-button:focus-visible, .ge-link-button:focus-visible, .ge-rank-choice:focus-visible { outline: 3px solid rgba(47,122,96,.25); outline-offset: 2px; }
.ge-error { margin: 16px 0 0; color: var(--ge-danger); font-size: 14px; font-weight: 600; }
/* A note that follows the control instead of preceding it: what happens NEXT, which
   only means something once the question has been answered. See `note` in the spec. */
.ge-field-note { margin: 9px 0 0; padding: 9px 11px; border-radius: 10px; background: var(--ge-soft); color: var(--ge-green); font-size: 12.5px; line-height: 1.45; }
/* __word__ in a question. Not a link, so it must not borrow link colouring; it is a
   thicker underline on the surrounding text weight. */
.ge-emphasis { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
/* A QUANTITY: "[ 12 ] pairs per [ day ]" on one line, wrapping to two on a narrow
   phone rather than squeezing the number box to nothing. The count is deliberately
   narrow and the timeframe deliberately wide: the timeframe is the multiplier, and it
   is the half that must be read, not skimmed. */
.ge-quantity { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 4px; }
.ge-quantity-count { width: 7.5rem; flex: 0 0 auto; text-align: right; font-variant-numeric: tabular-nums; }
.ge-quantity-unit { color: var(--ge-ink); font-size: 15px; font-weight: 600; }
.ge-quantity-period { flex: 1 1 10rem; min-height: 46px; padding: 10px 12px; border: 1px solid #c8d5cf; border-radius: 10px; color: var(--ge-ink); background: white; font: inherit; }
.ge-quantity-period:focus { outline: 3px solid rgba(47,122,96,.25); outline-offset: 2px; }
/* The "I do not normally use them" toggle is a real button, not a checkbox, so it
   reads as the alternative answer it is. It borrows .ge-option so a selected one looks
   exactly like every other selected answer on the page. */
.ge-quantity-zero { width: 100%; margin-top: 9px; text-align: left; font: inherit; }

/* The referral share block. One renderer, shown on the profile hand-off question, the
   referral step and the thank-you screen, so it has to sit calmly inside all three
   rather than dominate any of them: a tinted panel, not a card. */
.ge-referral-block { margin: 18px 0 0; padding: 14px 15px; border: 1px solid #cfe0d7; border-radius: 13px; background: var(--ge-soft); }
.ge-referral-block .ge-field { margin-top: 10px; }
.ge-referral-block .ge-inline-actions { margin-top: 10px; }
.ge-referral-intro { margin: 0; color: var(--ge-green); font-size: 13px; font-weight: 600; line-height: 1.45; }
/* The thank-you line, promoted from a grey subtitle on 2026-09-03. */
.ge-thanks-line { margin: 6px 0 0; color: var(--ge-green); font-size: 16px; font-weight: 700; line-height: 1.45; }
.ge-actions { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 10px; margin: 20px -8px -8px; padding: 12px 8px calc(8px + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, rgba(255,255,255,.85), white 24%); }
/* For a one-off button in normal page flow. NOT .ge-actions, which is sticky and
   carries negative margins for the bottom of a form. */
.ge-inline-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 14px; }
.ge-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 17px; border: 1px solid var(--ge-green); border-radius: 12px; font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; }
.ge-button-primary { flex: 1; color: white; background: var(--ge-green); }
.ge-button-secondary { color: var(--ge-green); background: white; }
.ge-button-danger { border-color: #d6a6a6; color: var(--ge-danger); background: white; }
.ge-link-button { padding: 8px 0; border: 0; color: var(--ge-green-2); background: none; font: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.ge-save { margin-top: 9px; color: var(--ge-green-2); font-size: 12px; text-align: center; }
.ge-kit-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ge-kit-code { padding: 6px 9px; border-radius: 8px; color: var(--ge-green); background: var(--ge-soft); font-size: 11px; font-weight: 700; white-space: nowrap; }
.ge-samples { display: grid; gap: 11px; margin-top: 22px; }
.ge-sample-card { padding: 15px; border: 1px solid var(--ge-line); border-radius: 14px; background: #fff; }
/* The status pill is nowrap, so in the three-column desktop grid it stole the row
   and the heading broke as "Sample / A". Giving the text block a 60% basis lets the
   pill drop to its own line only when it genuinely does not fit, which keeps the
   single-column phone layout side by side. */
.ge-sample-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.ge-sample-top > div { flex: 1 1 60%; min-width: 0; }
.ge-sample-name { margin: 0; font-size: 17px; }
.ge-sample-meta { margin: 4px 0 0; color: var(--ge-muted); font-size: 12px; }
.ge-status { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.ge-status .ge-icon { width: 13px; height: 13px; }
.ge-status-not-started { background: #eef1f0; color: #5a6662; }
.ge-status-in-progress { background: #fff3d9; color: #82580e; }
.ge-status-completed { background: #e6f5eb; color: #23643f; }
.ge-status-unable { background: #f8eaea; color: #8d3737; }
.ge-sample-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 11px; }
.ge-mini-button { min-height: 40px; padding: 8px 11px; border: 1px solid #a9c2b6; border-radius: 9px; color: var(--ge-green); background: white; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.ge-mini-button.primary { color: white; border-color: var(--ge-green-2); background: var(--ge-green-2); }
/* ONE COLOUR PER ACTION, so "what is left to do" is answerable without reading four
   buttons. Owner, 2026-09-03: "The color of the box for 'Review', 'Resume' and 'Rate
   this sample' should be different."
   is-rate    solid green. The only call to action, and the default .primary look.
   is-resume  amber. Started, not finished. Amber is already this project's
              in-progress colour (.ge-status-in-progress), so it is not a new idiom.
   is-review  quiet outline. Done: nothing is owed, so it must not compete.
   is-skipped quiet outline, grey. Deliberately not amber; skipping is a resolved
              state, not an unfinished one. */
.ge-mini-button.primary.is-resume { color: #7c4a03; border-color: #d9a441; background: #fdf0d5; }
.ge-mini-button.primary.is-review { color: var(--ge-green); border-color: #a9c2b6; background: white; }
.ge-mini-button.primary.is-skipped { color: #4b5563; border-color: #cbd5e1; background: white; }
.ge-stage2-card { margin-top: 18px; padding: 17px; border-radius: 14px; background: var(--ge-green); color: white; }
.ge-stage2-card p { margin: 5px 0 13px; color: #f2f9f5; font-size: 13px; line-height: 1.45; }
.ge-stage2-card .ge-link-button { color: #fff; }
.ge-stage2-card .ge-button { border-color: white; }
.ge-stage2-card .ge-button[disabled] { opacity: .45; cursor: not-allowed; }
.ge-dialog-backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: end center; padding: 16px; background: rgba(7,26,21,.54); }
.ge-dialog { width: min(100%, 560px); padding: 22px; border-radius: 18px; background: white; box-shadow: 0 18px 60px rgba(0,0,0,.25); }
.ge-dialog h2 { margin: 0 0 8px; }
.ge-dialog .ge-actions { position: static; margin: 18px 0 0; padding: 0; background: none; }
/* The sheet spaces the first field with `.ge-subtitle + .ge-field`, an ADJACENT
   SIBLING rule. The message dialog wraps its fields in a <form>, which breaks that
   relationship, and the field's own 26px top margin then collapsed away to nothing:
   measured 0px against 15px between the fields below it. Explicit, so it cannot
   collapse again. */
.ge-dialog form { margin-top: 18px; }
.ge-dialog form > .ge-field:first-child { margin-top: 0; }
.ge-dialog .ge-help { margin-top: 14px; }
.ge-ranking-empty { margin: 18px 0 14px; padding: 15px; border: 2px dashed #bfd0c8; border-radius: 14px; color: var(--ge-muted); text-align: center; font-size: 13px; }
.ge-rank-choices { display: grid; gap: 9px; }
.ge-rank-choice { min-height: 52px; padding: 11px 14px; border: 1px solid #adc3b8; border-radius: 12px; color: var(--ge-green-2); background: white; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.ge-rank-choice[disabled] { color: #84928c; border-color: #d8dfdc; background: #edf0ef; cursor: default; }
.ge-ranking-list { display: grid; gap: 9px; margin: 15px 0; }
.ge-rank-item { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 10px; border: 1px solid #b6cabf; border-radius: 12px; background: white; touch-action: none; cursor: grab; }
.ge-rank-item.dragging { opacity: .55; box-shadow: var(--ge-shadow); }
.ge-rank-number { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: white; background: var(--ge-green-2); font-weight: 700; }
.ge-rank-controls { display: flex; gap: 5px; justify-content: flex-end; }
.ge-rank-controls button { min-width: 40px; min-height: 40px; border: 2px solid var(--ge-green); border-radius: 8px; color: var(--ge-green-2); background: white; font-size: 18px; font-weight: 800; cursor: pointer; }
.ge-rank-controls button:disabled { opacity: .35; }
/* Anchors under a 1-to-5 row. Four unanchored grids stacked on one screen was the
   monotony the owner named; these give each row its own meaning at a glance. */
.ge-scale-anchors { display: flex; justify-content: space-between; gap: 12px; margin: 0 2px 7px; color: var(--ge-muted); font-size: 11.5px; font-weight: 700; }

/* Sample identity. `.ge-sample-photo.is-empty` is what shows until piece 3 of the
   build plan supplies a generic product image. */
.ge-sample-head { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--ge-line); }
.ge-sample-photo { flex: 0 0 66px; width: 66px; height: 66px; border: 1px solid var(--ge-line); border-radius: 14px; background: var(--ge-soft); object-fit: cover; }
.ge-sample-photo.is-empty { display: grid; place-items: center; color: var(--ge-green); font-size: 23px; font-weight: 800; }
.ge-sample-head .ge-eyebrow { margin-bottom: 3px; }
.ge-sample-head .ge-title { font-size: clamp(19px, 4.6vw, 23px); }
.ge-sample-head .ge-sample-meta { margin-top: 3px; }
.ge-step-title { margin: 0 0 2px; font-size: 17px; line-height: 1.3; letter-spacing: -.01em; }

/* The evaluator's own details. Was a green card whose link failed contrast; a
   summary block should not compete with the primary action anyway. */
.ge-detail-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; padding: 14px 15px; border: 1px solid var(--ge-line); border-radius: 14px; background: #fbfdfc; }
.ge-detail-card strong { display: block; font-size: 14px; }
.ge-detail-card p { margin: 3px 0 0; color: var(--ge-muted); font-size: 13px; line-height: 1.45; }
.ge-detail-card .ge-mini-button { flex: 0 0 auto; }
.ge-review-section { padding: 15px 0; border-bottom: 1px solid #e2e9e5; }
.ge-review-section:last-child { border-bottom: 0; }
.ge-review-section h3 { margin: 0 0 8px; font-size: 16px; }
.ge-review-section p, .ge-review-section li { color: var(--ge-muted); font-size: 13px; line-height: 1.5; }
.ge-confirmation { margin-top: 18px; padding: 15px; border: 1px solid var(--ge-line); border-radius: 12px; background: var(--ge-soft); }
.ge-confirmation p { margin: 0 0 10px; color: var(--ge-muted); font-size: 14px; line-height: 1.45; }
.ge-confirmation p:last-of-type { margin-bottom: 4px; }
.ge-referrals { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ge-line); }
.ge-referrals > h2 { margin: 0 0 6px; font-size: 20px; }
.ge-referral-card { margin-top: 16px; padding: 16px; border: 1px solid var(--ge-line); border-radius: 14px; background: #fbfdfc; }
.ge-referral-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ge-referral-heading h2 { margin: 0; font-size: 17px; }
.ge-referral-card .ge-field { margin-top: 18px; }
.ge-contact-methods { margin-top: 20px; padding: 14px; border: 1px solid #b8cdc3; border-radius: 12px; background: white; }
.ge-contact-methods:focus { outline: 3px solid rgba(166,50,50,.2); outline-offset: 2px; }
.ge-contact-methods > .ge-label { margin: 0 0 4px; }
.ge-contact-methods .ge-field { margin-top: 14px; }
.gr-form { margin-top: 24px; }
.gr-section { margin-top: 34px; padding-top: 30px; border-top: 1px solid #dbe6df; }
.gr-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.gr-section-title { margin: 0; color: var(--ge-ink); font-size: 19px; line-height: 1.3; }
.gr-section-optional { margin-left: 8px; padding: 3px 8px; border-radius: 999px; background: var(--ge-soft); color: var(--ge-green-2); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; vertical-align: middle; }
.gr-section-description { margin: 6px 0 0; color: var(--ge-muted); font-size: 14px; line-height: 1.5; }
.gr-section > .ge-field, .gr-section > .ge-contact-methods { margin-top: 18px; }
.gr-section > .ge-field-jobTitle, .gr-section > .ge-field-organization { margin-top: 28px; }
.gr-section .ge-contact-methods { padding: 0; border: 0; background: transparent; }
.gr-section .ge-contact-methods > .ge-label { margin-bottom: 4px; }
.gr-consent { margin-top: 32px; }
.gr-submit { display: flex; margin-top: 28px; }
.gr-submit .ge-button { width: 100%; }
.ge-add-referral { width: 100%; margin-top: 14px; }
.ge-remove-referral { color: var(--ge-danger); }
.ge-success { text-align: center; }
.ge-success-mark { display: grid; place-items: center; width: 66px; height: 66px; margin: 0 auto 16px; border-radius: 50%; color: white; background: var(--ge-green-2); font-size: 30px; font-weight: 700; }
.ge-success-mark .ge-icon { width: 32px; height: 32px; stroke-width: 2.2; }
/* The reference is the one thing on this screen an evaluator may need to write
   down or read out, so it gets the weight and the letter spacing to be read aloud. */
.ge-reference { display: grid; gap: 3px; margin: 20px 0 6px; padding: 15px; border: 1px solid var(--ge-line); border-radius: 14px; background: var(--ge-soft); }
.ge-reference-label { color: var(--ge-green-2); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ge-reference-code { font-size: clamp(20px, 5.5vw, 25px); font-weight: 800; letter-spacing: .06em; }
.ge-reference-help { color: var(--ge-muted); font-size: 12px; }
.ge-success-actions { justify-content: center; }
.ge-success-actions .ge-button { flex: 1 1 auto; }
.ge-demo-links { display: grid; gap: 10px; margin-top: 18px; }
.ge-demo-links a { padding: 13px; border: 1px solid #a9c2b6; border-radius: 11px; color: var(--ge-green); text-decoration: none; font-weight: 700; }
.ge-footer { padding: 22px 16px calc(22px + env(safe-area-inset-bottom)); color: #eef7f2; background: var(--ge-green); font-size: 12px; text-align: center; }
.ge-footer p { margin: 4px; }
.ge-footer a { color: white; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (min-width: 620px) {
  .ge-main { padding-top: 42px; }
  .ge-options.is-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ge-ordinal .ge-option-text { font-size: 13px; }
  .ge-samples { grid-template-columns: repeat(3, 1fr); }
  .ge-sample-card { display: flex; min-height: 180px; flex-direction: column; }
  .ge-sample-actions { margin-top: auto; }
  .ge-dialog-backdrop { place-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* The sample being placed, on the one-at-a-time ranking screen. Amber, because this
   project already uses amber for "in progress, your attention is needed here": the
   evaluator's in-progress sample card and the portal's in-progress kit pill. A third
   meaning for a colour is how a colour stops meaning anything. */
.ge-rank-item.is-current {
  border-color: #b45309;
  background: #fffbeb;
  box-shadow: 0 0 0 1px #b45309 inset;
}