/* ──────────────────────────────────────────────────────────────────
   JET Charge brand layer for the PUBLIC contractor intake.

   Scope: every rule is nested under `.jc-intake`, the body class set by
   app/views/layouts/public_intake.html.erb. `stylesheet_link_tag :app`
   emits a <link> for every file in this directory, so this stylesheet
   loads on staff pages too — the `.jc-intake` prefix is what stops it
   restyling them. Never add an unscoped selector to this file.

   Tokens come from jetcharge.css (loaded alphabetically before this
   file, and app-wide), which also bundles GC Gambio + Figtree as base64
   @font-face. That means the brand type on this surface costs zero extra
   requests and satisfies CSP `font-src :self` / `style-src :self`
   without vendoring anything new.

   Contrast: every foreground/background pair below was checked against
   WCAG AA. The two that needed care are called out where they appear.
   ────────────────────────────────────────────────────────────── */

/* ── Page shell ─────────────────────────────────────────────────
   White/light-gray rather than the brand's warm beige (card #1045).
   Every `--jc-warm-*` consumer in this file inherits from `.jc-intake`,
   so remapping the tokens here — rather than each rule that reads them
   — retones the whole flow in one place. Mirrors the white/gray remap
   coverage_admin.css already does for the admin coverage screen
   (Tailwind gray-50/200/300/400/500); orange, ink and the logo are
   untouched, per the card — only the paper colour changes. `--jc-warm-900`
   is left alone: nothing in this file reads it. */
.jc-intake {
  --jc-warm-050: #ffffff;
  --jc-warm-100: #f9fafb;  /* gray-50 */
  --jc-warm-200: #e5e7eb;  /* gray-200 */
  --jc-warm-300: #d1d5db;  /* gray-300 */
  --jc-warm-500: #9ca3af;  /* gray-400 */
  --jc-warm-700: #6b7280;  /* gray-500 */
  background-color: var(--jc-warm-050);
  color: var(--jc-ink);
  font-family: var(--jc-font-body);
  /* Surface root for ligature suppression (see jetcharge.css): Gambio set on
     anything but h1–h4 is covered only by inheritance from this root. */
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
}

/* Headings across the whole flow take the display face. Deliberately an
   element selector: the three step screens are owned by other work and
   this picks them up without touching their markup.
   It sets font-family and NOTHING ELSE, on purpose. `.jc-intake h1` is
   (0,1,1) and every `.jc-intake-…__title` class below is (0,1,0), so any
   extra property here would silently outrank the class that looks like it
   owns the heading — adding `letter-spacing` here really did cancel the
   hero headline's tracking. Family is safe because both declare the same
   value; anything that differs belongs on the class. */
.jc-intake h1,
.jc-intake h2 {
  font-family: var(--jc-font-display);
}

/* Brand focus ring, flow-wide. Replaces the blue Tailwind rings the step
   screens carry (`focus:outline-blue-500`): Tailwind utilities sit in
   `@layer utilities`, which loses to any unlayered rule regardless of
   source order, so this wins without !important and without editing
   those files. Also gives a visible ring to controls that had none.
   No border-radius here — the outline already follows each element's own
   corners, and setting one would reshape inputs the moment they focus. */
.jc-intake :is(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--jc-orange);
  outline-offset: 2px;
}

/* ── Masthead ───────────────────────────────────────────────────
   Near-black band + the white JETCHARGE lockup. White on #262626 is
   ~14.9:1 — AAA. This is the brand's own "white-on-dark, premium
   context" lock-up, and it is the restrained choice for chrome that
   repeats on every screen: the orange stays spent on the one moment
   that earns it (the completion hero), not poured across the flow. */
.jc-intake__masthead {
  position: relative;
  background-color: var(--jc-ink);
}

/* The brand's "hairline under every header" signature, drawn in the
   power gradient. Opaque stops only, per the house rule in
   jetcharge.css. */
.jc-intake__masthead::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background-image: linear-gradient(
    90deg,
    var(--jc-amber) 0%,
    var(--jc-orange) 58%,
    var(--jc-orange-deep) 100%
  );
}

.jc-intake__masthead-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  max-width: 64rem;
  margin-inline: auto;
  padding: 0.9rem 1rem;
}

@media (min-width: 640px) {
  .jc-intake__masthead-inner {
    gap: 1rem;
    padding: 1rem 1.5rem;
  }
}

/* Lockup aspect ratio is ~4.8:1, so 24px tall reads ~116px wide — above
   the brand's 120px minimum at the desktop size below, and the wordmark
   stays legible on a phone. */
.jc-intake__logo {
  height: 22px;
  width: auto;
  display: block;
  flex: none;
}

@media (min-width: 640px) {
  .jc-intake__logo {
    height: 26px;
  }
}

/* Divider + label. #ADADAD on #262626 is ~6.2:1 — AA for body text. */
.jc-intake__masthead-label {
  font-size: 13px;
  line-height: 1.3;
  color: var(--jc-grey);
  padding-left: 0.75rem;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.jc-intake__masthead-badge {
  margin-left: auto;
}

/* ── Content column ─────────────────────────────────────────── */
.jc-intake__main {
  flex: 1 1 auto;
  padding-block: 1.75rem 2.5rem;
}

.jc-intake__column {
  max-width: 64rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 640px) {
  .jc-intake__column {
    padding-inline: 1.5rem;
  }
}

/* A page with a map in it opts out of the readable-text cap
   (`content_for :wide_column`) and fills the viewport minus the gutters.
   112rem (1792px) is the ceiling for ultrawide monitors, past which the
   map stops getting more useful and the page just drifts apart. The
   masthead and footer follow so the three edges stay aligned. */
.jc-intake--wide .jc-intake__column,
.jc-intake--wide .jc-intake__masthead-inner,
.jc-intake--wide .jc-intake__footer {
  max-width: 112rem;
}

/* ── Footer ─────────────────────────────────────────────────────
   Carries the privacy sentence and — the job the "Runway" wordmark used
   to be doing badly — the real legal entity. A contractor being asked
   for insurance certificates wants to see a company name they can look
   up, not an internal product name they have never heard of. */
.jc-intake__footer {
  max-width: 64rem;
  width: 100%;
  margin-inline: auto;
  padding: 1.5rem 1rem 2rem;
}

@media (min-width: 640px) {
  .jc-intake__footer {
    padding-inline: 1.5rem;
  }
}

.jc-intake__footer-inner {
  border-top: 1px solid var(--jc-warm-200);
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.jc-intake__footer-notes,
.jc-intake__footer-legal {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 640px) {
  .jc-intake__footer-inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
  }

  .jc-intake__footer-legal {
    align-items: flex-end;
    text-align: right;
  }
}

.jc-intake__footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: 12px;
  line-height: 1.55;
}

.jc-intake__footer-link {
  color: var(--jc-warm-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.jc-intake__footer-link:hover,
.jc-intake__footer-link:focus-visible {
  color: var(--jc-ink);
}

/* --jc-warm-700 (#6b7280, remapped above) on --jc-warm-050 (#ffffff) is
   ~4.83:1 — AA. --jc-warm-500 does not clear 4.5:1 on white, so body/secondary
   copy stops at warm-700; it stays in use for placeholders, disabled text and
   decorative icons, which WCAG doesn't hold to that ratio. */
.jc-intake__footer-note {
  font-size: 12px;
  line-height: 1.55;
  color: var(--jc-warm-700);
  max-width: 62ch;
  margin: 0;
}

.jc-intake__footer-entity {
  font-size: 12px;
  line-height: 1.55;
  color: var(--jc-warm-700);
  white-space: nowrap;
  margin: 0;
}

/* ── Cards ──────────────────────────────────────────────────── */
.jc-intake-card {
  background-color: var(--jc-white);
  border: 1px solid var(--jc-warm-200);
  border-radius: var(--jc-radius-md);
  padding: 1.5rem;
}

@media (min-width: 640px) {
  .jc-intake-card {
    padding: 1.75rem 2rem;
  }
}

.jc-intake-card__title {
  font-family: var(--jc-font-display);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--jc-ink);
  margin: 0 0 0.6rem;
}

.jc-intake-card__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--jc-warm-700);
  margin: 0 0 1rem;
  max-width: 62ch;
}

.jc-intake-card__body:last-child {
  margin-bottom: 0;
}

/* Emphasis inside body copy lifts back to full ink. Without this a <strong>
   would inherit the secondary warm grey above and read no stronger than the
   sentence around it. */
.jc-intake-card__body strong {
  color: var(--jc-ink);
  font-weight: 600;
}

.jc-intake-card__meta {
  font-size: 13px;
  line-height: 1.6;
  color: var(--jc-warm-700);
  margin: 0;
  max-width: 62ch;
}

/* An eyebrow marked up as a heading — which is what it is, structurally —
   gets caught by the `.jc-intake h2` rule above at (0,1,1), outranking
   `.jc-eyebrow`'s own (0,1,0) and silently rendering the label in the display
   face. Per the brand spec eyebrows are set in the BODY face, so restate it
   here at (0,2,0). */
.jc-intake .jc-eyebrow {
  font-family: var(--jc-font-body);
}

/* jetcharge.css ships `.jc-eyebrow` with a 0.5em bottom margin, which is too
   tight when what follows is a list rather than a headline. */
.jc-intake-card > .jc-eyebrow {
  margin-bottom: 1.1rem;
}

/* Spacing between a card's prose and its form.
   Deliberately here rather than a Tailwind `mb-*`/`mt-*` on the element:
   Tailwind utilities live in `@layer utilities` and lose to every unlayered
   rule in this file, so a margin utility written next to a `.jc-intake-card__*`
   class silently does nothing. Card spacing belongs to the card. */
.jc-intake-card > form {
  margin-top: 1.5rem;
}

/* ── Completion hero ────────────────────────────────────────────
   The one loud brand moment in the flow.

   Type on the gradient is NEAR-BLACK, not white. White on the brand
   orange is 3.3:1 — large text only, and it fails outright over the
   amber end of the ramp. Near-black clears 5:1 against every stop of
   `--jc-gradient-hero-soft` (worst case #FB6528 → 5.03:1), so the
   headline, the eyebrow and the lede are all AA on the same panel.
   Using the soft variant rather than the full hero gradient is what
   buys that margin. */
.jc-intake-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--jc-radius-lg);
  background-image: var(--jc-gradient-hero-soft);
  padding: 2rem 1.5rem;
}

@media (min-width: 640px) {
  .jc-intake-hero {
    padding: 3rem 2.5rem;
  }
}

/* The layered lightning bolt, cropped off the right edge — the brand
   hero device. White at low opacity so it reads as a light form behind
   the near-black type rather than competing with it. Hidden from
   assistive tech via aria-hidden on the element. */
.jc-intake-hero__bolt {
  position: absolute;
  top: -12%;
  right: -10%;
  width: 46%;
  height: 118%;
  z-index: -1;
  pointer-events: none;
  background-image: var(--jc-bolt-white);
  background-repeat: no-repeat;
  background-position: center right;
  background-size: contain;
  opacity: 0.38;
}

@media (min-width: 640px) {
  .jc-intake-hero__bolt {
    width: 34%;
    right: -4%;
  }
}

.jc-intake-hero__eyebrow {
  display: block;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jc-ink);
  margin: 0 0 0.9rem;
}

.jc-intake-hero__title {
  font-family: var(--jc-font-display);
  font-size: 32px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--jc-ink);
  margin: 0 0 0.85rem;
  /* `balance` lets the browser pick the break rather than a ch cap doing it
     badly — a hard cap left "done." alone on the second line. */
  max-width: 22ch;
  text-wrap: balance;
}

@media (min-width: 640px) {
  .jc-intake-hero__title {
    font-size: 44px;
  }
}

.jc-intake-hero__lede {
  font-size: 16px;
  line-height: 1.55;
  color: var(--jc-ink);
  margin: 0;
  max-width: 46ch;
}

@media (min-width: 640px) {
  .jc-intake-hero__lede {
    font-size: 17px;
  }
}

/* ── "What happens next" rail ───────────────────────────────────
   An <ol>, because the order is real information: nothing is prepared
   before the review, and nothing is sent before the agreement. The
   rail is the list's own structure made visible, not decoration. */
.jc-intake-next {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: jc-intake-step;
}

.jc-intake-next__item {
  position: relative;
  padding-left: 2.25rem;
  padding-bottom: 1.5rem;
}

.jc-intake-next__item:last-child {
  padding-bottom: 0;
}

/* The node. Brand orange on white is 3.3:1, which clears the 3:1 that WCAG
   1.4.11 asks of a meaningful graphical object — and the nodes are the
   meaningful ones. The connector below is deliberately quieter than that
   threshold because it carries no information the <ol> does not. */
.jc-intake-next__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background-color: var(--jc-orange);
}

/* The connector, drawn only between nodes. It runs to the item's bottom edge
   so the only gap is the next node's own offset — a connector that stops
   halfway reads as a stray dash rather than as a thread through the steps. */
.jc-intake-next__item::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1.25rem;
  bottom: 0;
  width: 2px;
  background-color: var(--jc-warm-300);
}

.jc-intake-next__item:last-child::after {
  content: none;
}

.jc-intake-next__heading {
  font-size: 15px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--jc-ink);
  margin: 0 0 0.2rem;
}

/* Timing sits on the step it belongs to rather than in a sentence of
   its own, so "how long" is answered where it is asked. It is an estimate,
   and it says so. */
.jc-intake-next__timing {
  display: inline-block;
  margin-top: 0.45rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--jc-radius-pill);
  background-color: var(--jc-warm-100);
  border: 1px solid var(--jc-warm-200);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--jc-warm-700);
}

/* The payoff line. Not a fifth step — it is what the four steps are
   FOR, so it sits below the rail behind a hairline rather than on it. */
.jc-intake-next__outcome {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--jc-warm-200);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 600;
  color: var(--jc-ink);
  max-width: 58ch;
}

/* ── Stepper ────────────────────────────────────────────────────
   The three-step progress bar shared by every step screen. Semantic
   classes rather than Tailwind arbitrary values (`bg-[var(--jc-…)]`) so
   the colours do not depend on a Tailwind rebuild having scanned this
   partial. Structure and behaviour are untouched — only the palette
   moved, off the Tailwind blue the brand explicitly rules out. */
.jc-intake-step {
  display: block;
  flex: 1 1 0;
  border: 1px solid var(--jc-warm-200);
  border-radius: var(--jc-radius-sm);
  padding: 0.75rem 1rem;
  background-color: var(--jc-white);
  text-decoration: none;
}

/* Current: warm surface + a brand-orange edge. The orange is a 4px rule,
   not a fill — a filled orange step would make the busiest element on
   the screen the loudest one. */
.jc-intake-step--current {
  background-color: var(--jc-warm-100);
  border-color: var(--jc-warm-300);
  box-shadow: inset 4px 0 0 0 var(--jc-orange);
}

/* Done: still white, and clickable — these are the only backwards links
   in the flow. */
.jc-intake-step--done:hover {
  border-color: var(--jc-warm-300);
}

/* The open step is ALSO the one you already finished: same white card and
   tick as any other done step, plus the current step's orange edge so
   "you are here" survives revisiting a step you'd already completed. */
.jc-intake-step--current-done {
  border-color: var(--jc-warm-300);
  box-shadow: inset 4px 0 0 0 var(--jc-orange);
}

/* Ahead: recessed. Not disabled — just not reachable yet. */
.jc-intake-step--ahead {
  background-color: var(--jc-warm-050);
  opacity: 0.7;
}

.jc-intake-step__name {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--jc-ink);
}

.jc-intake-step__sub {
  font-size: 12px;
  line-height: 1.45;
  color: var(--jc-warm-700);
  margin-top: 0.125rem;
}

/* Decorative (aria-hidden, with an sr-only "Done:" alongside), so this
   only has to clear the 3:1 non-text threshold against the white card —
   #1F8A4C does, at 4.4:1, and so does the white tick on it. */
.jc-intake-step__tick {
  display: grid;
  place-items: center;
  flex: none;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background-color: var(--jc-success);
  color: var(--jc-white);
  font-size: 10px;
  line-height: 1;
}

/* ── Coverage builder (step 2) ───────────────────────────────────
   The map sits full width across the top and ONE instance of it serves
   every service area, following whichever block is open. Each service
   area is a disclosure block that owns its own add-an-area controls and
   its own stock delivery address.

   Why these are semantic classes and not Tailwind utilities: the blocks
   are built by contractor_coverage_map_controller.js at runtime, so any
   utility they used would have to survive Tailwind's content scan of a
   .js file — and the ones that are only ever produced by string
   concatenation do not. A class defined here always exists.

   Every colour is a brand token. This step was the last surface in the
   flow still drawing its chrome in Tailwind blue, which the stepper
   above it explicitly rules out. */

/* ── The map ──────────────────────────────────────────────────── */
.jc-intake .jc-coverage__map {
  height: 320px;
  border: 1px solid var(--jc-warm-200);
  border-radius: var(--jc-radius-md);
  overflow: hidden;
  background-color: var(--jc-warm-100);
}

@media (min-width: 640px) {
  .jc-intake .jc-coverage__map {
    height: 420px;
  }
}

/* Two captions, and the split is the point: this one reports what is ON
   the map (which area it is framed on, what could not be drawn), while
   the mode hint inside the open block reports what the control you are
   using will DO. They used to be one line under the map, which put
   "click the map to drop each corner" nowhere near the thing that
   needed clicking. */
.jc-intake .jc-coverage__caption {
  display: block;
  font-size: var(--jc-text-xs);
  line-height: 1.55;
  color: var(--jc-warm-700);
  margin: 0.6rem 0 0;
  max-width: 78ch;
}

.jc-intake .jc-coverage__caption:empty {
  margin: 0;
}

.jc-intake .jc-coverage__attribution {
  font-size: var(--jc-text-eyebrow);
  color: var(--jc-warm-700);
  margin: 0.35rem 0 0;
}

/* ── Hints under a heading ─────────────────────────────────────── */
.jc-intake .jc-area__hint {
  font-size: var(--jc-text-xs);
  line-height: 1.55;
  color: var(--jc-warm-700);
  margin: 0.3rem 0 0.85rem;
  max-width: 68ch;
}

/* ── Fields ───────────────────────────────────────────────────── */
.jc-intake .jc-field__label {
  display: block;
  font-size: var(--jc-text-xs);
  font-weight: 600;
  line-height: 1.4;
  color: var(--jc-warm-700);
  margin-bottom: 0.25rem;
}

.jc-intake .jc-field__input {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--jc-warm-300);
  border-radius: var(--jc-radius-sm);
  background-color: var(--jc-white);
  color: var(--jc-ink);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.45;
}

.jc-intake .jc-field__input::placeholder {
  color: var(--jc-warm-500);
}

.jc-intake .jc-field__input:disabled {
  background-color: var(--jc-warm-100);
  color: var(--jc-warm-500);
}

/* Vertical only: a textarea a contractor can widen breaks the grid it sits
   in, and the content is rows (postcodes, delivery notes), not columns. */
.jc-intake textarea.jc-field__input {
  resize: vertical;
  min-height: 3.2rem;
}

.jc-intake .jc-field__input--narrow {
  width: 7rem;
}

/* ── Where the travel distance is measured from ─────────────────
   Radios rather than a select, because each option has to show the
   ADDRESS under it — naming the point is the entire purpose of the
   control — and a select can only render one line per option. */
.jc-intake .jc-centre {
  border: 1px solid var(--jc-warm-200);
  border-radius: var(--jc-radius-sm);
  background-color: var(--jc-warm-050);
  padding: 0.8rem 0.9rem;
  margin-bottom: 1rem;
}

.jc-intake .jc-centre > legend {
  padding: 0 0.3rem;
  margin-left: -0.3rem;
}

.jc-intake .jc-centre__option {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.35rem 0;
  cursor: pointer;
}

.jc-intake .jc-centre__option input[type="radio"] {
  margin-top: 0.2rem;
  flex: none;
  accent-color: var(--jc-orange);
}

.jc-intake .jc-centre__label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--jc-ink);
}

/* The address itself. Quieter than the option it belongs to, because the
   option is the choice and this is the evidence for it. */
.jc-intake .jc-centre__detail {
  display: block;
  font-size: var(--jc-text-xs);
  line-height: 1.45;
  color: var(--jc-warm-700);
}

/* ── The add-an-area controls ─────────────────────────────────── */

/* Styled off aria-pressed rather than a class the JavaScript toggles
   separately, so the visual state and the state announced to a screen
   reader cannot disagree — there is only one thing to set. */
.jc-intake .jc-builder__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.9rem;
}

.jc-intake .jc-builder__tab {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--jc-warm-200);
  border-radius: var(--jc-radius-pill);
  background-color: var(--jc-warm-100);
  color: var(--jc-warm-700);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}

.jc-intake .jc-builder__tab:hover {
  color: var(--jc-ink);
  border-color: var(--jc-warm-300);
}

.jc-intake .jc-builder__tab[aria-pressed="true"] {
  background-color: var(--jc-ink);
  border-color: var(--jc-ink);
  color: var(--jc-white);
}

/* The live line under the panel: what the control you are using will do,
   next to the control rather than under the map. */
.jc-intake .jc-builder__hint {
  font-size: var(--jc-text-xs);
  line-height: 1.55;
  color: var(--jc-warm-700);
  margin: 0.4rem 0 0;
  max-width: 68ch;
}

.jc-intake .jc-builder__status {
  display: block; /* <output> is inline by default */
  font-size: var(--jc-text-xs);
  line-height: 1.55;
  margin: 0.3rem 0 0;
  min-height: 1.2em;
}

.jc-intake .jc-builder__actions {
  margin-top: 0.85rem;
}

/* Sits directly above the Add button so the "entries combine" explanation
   reads as part of the same control, not a separate paragraph. */
.jc-intake .jc-builder__hint--combine {
  margin: 0 0 0.5rem;
}

.jc-intake .jc-builder__status--ok { color: var(--jc-success); }
.jc-intake .jc-builder__status--warn { color: var(--jc-orange-deep); }
.jc-intake .jc-builder__status--quiet { color: var(--jc-warm-700); }

/* Region suggestions overlay the panel instead of pushing it open as you
   type. Kept out of Tailwind because this list is built in JavaScript. */
.jc-intake .jc-builder__results {
  position: absolute;
  z-index: 20;
  inset-inline: 0;
  margin-top: 0.25rem;
  background-color: var(--jc-white);
  border: 1px solid var(--jc-warm-300);
  border-radius: var(--jc-radius-sm);
  box-shadow: var(--jc-shadow-card);
  max-height: 16rem;
  overflow-y: auto;
}

.jc-intake .jc-builder__result {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.7rem;
  border: 0;
  border-bottom: 1px solid var(--jc-warm-100);
  background: none;
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  color: var(--jc-ink);
  cursor: pointer;
}

.jc-intake .jc-builder__result:last-child {
  border-bottom: 0;
}

.jc-intake .jc-builder__result:hover {
  background-color: var(--jc-warm-100);
}

/* A region another service area already holds: visible, named, not addable. */
.jc-intake .jc-builder__result--claimed {
  opacity: 0.55;
  cursor: not-allowed;
}

.jc-intake .jc-builder__result--claimed:hover {
  background: none;
}

.jc-intake .jc-builder__result-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The TYPE badge. "Bendigo" is a suburb, a council and a postcode, so
   this is the information that makes the row a choice rather than a
   guess. */
.jc-intake .jc-builder__result-type {
  flex: none;
  padding: 0.1rem 0.45rem;
  border-radius: var(--jc-radius-pill);
  background-color: var(--jc-warm-100);
  border: 1px solid var(--jc-warm-200);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jc-warm-700);
}

/* ── Inline primary, secondary + tertiary actions ─────────────── */

/* Compact orange for the commit inside a sub-flow ("+ Add this entry",
   "Mark as not applicable"): the same weight as the step's Continue, sized
   to sit in a row. Paul, 2026-09-11 — these were being missed as outlines. */
.jc-intake .jc-button-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--jc-orange);
  border-radius: var(--jc-radius-sm);
  background-color: var(--jc-orange);
  color: var(--jc-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
}

.jc-intake .jc-button-primary:hover {
  background-color: var(--jc-orange-bright);
  border-color: var(--jc-orange-bright);
}

.jc-intake .jc-button-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--jc-ink);
  border-radius: var(--jc-radius-sm);
  background-color: var(--jc-white);
  color: var(--jc-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}

.jc-intake .jc-button-secondary:hover {
  background-color: var(--jc-ink);
  color: var(--jc-white);
}

.jc-intake .jc-button-quiet {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border: 1px dashed var(--jc-warm-300);
  border-radius: var(--jc-radius-sm);
  background-color: transparent;
  color: var(--jc-warm-700);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}

.jc-intake .jc-button-quiet:hover {
  border-color: var(--jc-orange);
  color: var(--jc-ink);
}

/* ── Coverage chips ─────────────────────────────────────────────
   `jc-coverage-chip`, NOT `jc-chip`. `.jc-chip` is already the brand's
   status badge in jetcharge.css — an 11px uppercase orange pill for
   words like RECOMMENDED — and borrowing the name silently rendered
   every coverage area in capitals ("ALL OF VIC"). These are a different
   component: a removable token holding a place name in the contractor's
   own casing, which is exactly the casing a badge destroys. */
.jc-intake .jc-coverage-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.9rem;
}

.jc-intake .jc-coverage-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.35rem 0.25rem 0.7rem;
  border: 1px solid var(--jc-warm-300);
  border-radius: var(--jc-radius-pill);
  background-color: var(--jc-warm-100);
  color: var(--jc-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

/* Text-styled, not a default <button> — clicking it drives the map (#1248),
   but the chip has to keep reading as a label first and a control second. */
.jc-intake .jc-coverage-chip__label {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.jc-intake .jc-coverage-chip__label:hover,
.jc-intake .jc-coverage-chip__label[aria-pressed="true"] {
  text-decoration: underline;
}

.jc-intake .jc-coverage-chip__remove {
  width: 1.15rem;
  height: 1.15rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--jc-radius-pill);
  background-color: var(--jc-warm-200);
  color: var(--jc-warm-700);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.jc-intake .jc-coverage-chip__remove:hover {
  background-color: var(--jc-danger);
  color: var(--jc-white);
}

/* 2rem = 32px, clearing the 24px WCAG 2.2 target-size minimum without making
   the chip itself a touch-sized object. Media queries add no specificity, so
   this has to sit AFTER the base rule above rather than with the other
   pointer-coarse overrides earlier in the file. */
@media (pointer: coarse) {
  .jc-intake .jc-coverage-chip__remove {
    width: 2rem;
    height: 2rem;
    font-size: 14px;
  }
}

.jc-intake .jc-coverage-clear {
  flex-basis: 100%;
  margin-top: 0.25rem;
}

.jc-intake .jc-coverage-clear__trigger,
.jc-intake .jc-coverage-clear__confirm-button,
.jc-intake .jc-coverage-clear__cancel {
  min-height: 44px; /* WCAG 2.5.5 / Apple HIG touch target */
  padding: 0 1rem;
  border: 1px solid var(--jc-warm-300);
  border-radius: var(--jc-radius-sm);
  background-color: transparent;
  color: var(--jc-warm-700);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.jc-intake .jc-coverage-clear__trigger:hover,
.jc-intake .jc-coverage-clear__cancel:hover {
  border-color: var(--jc-orange);
  color: var(--jc-ink);
}

.jc-intake .jc-coverage-clear__confirm-button {
  border-color: var(--jc-danger);
  background-color: var(--jc-danger);
  color: var(--jc-white);
}

.jc-intake .jc-coverage-clear__confirm-button:hover {
  border-color: color-mix(in srgb, var(--jc-danger) 80%, black);
  background-color: color-mix(in srgb, var(--jc-danger) 80%, black);
}

.jc-intake .jc-coverage-clear__confirm-button:active {
  border-color: color-mix(in srgb, var(--jc-danger) 65%, black);
  background-color: color-mix(in srgb, var(--jc-danger) 65%, black);
}

.jc-intake .jc-coverage-clear__confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.jc-intake .jc-coverage-clear__question {
  flex-basis: 100%;
  font-size: 14px;
  font-weight: 600;
  color: var(--jc-ink);
}

@media (min-width: 640px) {
  .jc-intake .jc-coverage-clear__question {
    flex-basis: auto;
  }
}

.jc-intake .jc-coverage-clear__trigger[hidden],
.jc-intake .jc-coverage-clear__confirm[hidden] {
  display: none;
}

.jc-intake .jc-coverage-chips__empty {
  font-size: var(--jc-text-xs);
  color: var(--jc-warm-700);
}

/* ── Inline validation ──────────────────────────────────────────
   A refused submit marks each control where it went wrong and lists the
   messages once, up top, as links to those controls. Danger is the brand's
   one semantic red; nothing else on the form uses it. Unlayered, so it
   beats the Tailwind `border-gray-300` the step screens carry. */
.jc-intake .jc-field--invalid {
  border-color: var(--jc-danger);
}

.jc-intake .jc-field__error {
  margin: 0.35rem 0 0;
  padding-left: 0;
  list-style: none;
  font-size: var(--jc-text-xs);
  font-weight: 600;
  line-height: 1.45;
  color: var(--jc-danger);
}

.jc-intake .jc-field__error:focus-visible {
  outline-offset: 4px;
}

.jc-intake-alert {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--jc-warm-200);
  border-left: 3px solid var(--jc-danger);
  border-radius: var(--jc-radius-sm);
  background-color: var(--jc-white);
}

.jc-intake-alert__title {
  margin: 0 0 0.35rem;
  font-size: 14px;
  font-weight: 600;
  color: var(--jc-ink);
}

.jc-intake-alert__list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: var(--jc-text-sm);
  line-height: 1.5;
  color: var(--jc-warm-700);
}

.jc-intake-alert__list a {
  color: var(--jc-danger);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Quiet note ─────────────────────────────────────────────────
   The brand's disclaimer pattern: paper surface, hairline border,
   meta size. Quiet, not amber-warning loud. */
.jc-intake-note {
  background-color: var(--jc-warm-100);
  border: 1px solid var(--jc-warm-200);
  border-radius: var(--jc-radius-sm);
  padding: 1rem 1.25rem;
}

.jc-intake-note p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--jc-warm-700);
  margin: 0;
  max-width: 62ch;
}

/* ── Stack rhythm ───────────────────────────────────────────── */
.jc-intake-stack > * + * {
  margin-top: 1.25rem;
}

.jc-intake-narrow {
  max-width: 44rem;
  margin-inline: auto;
}

/* ── Primary action ─────────────────────────────────────────────
   Near-black label on brand orange — the same rule as the hero, applied
   consistently: on the brand orange, type is near-black.

   It is a contrast decision before it is a style one. White on #FF4E17
   is 3.3:1, which AA allows for large text only, and a 15px bold button
   label is not large text. Near-black is 4.6:1 and clears it. Hover
   LIGHTENS to #FF7A3D (5.8:1) rather than deepening, because deepening
   the orange would walk the label back under the threshold. */
.jc-intake-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--jc-orange);
  border-radius: var(--jc-radius-sm);
  background-color: var(--jc-orange);
  color: var(--jc-ink);
  font-family: var(--jc-font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.jc-intake-button:hover:not(:disabled) {
  background-color: var(--jc-orange-bright);
  border-color: var(--jc-orange-bright);
}

/* Greyed but still legible: #4B5563 on #E5E7EB is 6.1:1, past the 4.5:1 WCAG AA
   minimum that applies here (15px bold is not "large text", which starts at
   18.66px bold). The point of showing it disabled is that the contractor can
   see where they are headed, so the label has to read as words. The grey fill
   and not-allowed cursor are what say "disabled", not a faded label. */
.jc-intake-button:disabled {
  border-color: #d1d5db;
  background-color: #e5e7eb;
  color: #4b5563;
  cursor: not-allowed;
}

.jc-intake-link {
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--jc-orange-deep);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.jc-intake-link:hover {
  color: var(--jc-ink);
}

/* Decorative separator between two inline actions. aria-hidden at the call
   site, so it only has to not draw attention. */
.jc-intake-divider {
  color: var(--jc-warm-300);
}

/* ── Entrance ───────────────────────────────────────────────────
   One orchestrated moment on the completion screen — the hero, then the
   next-steps, then the note. Gated behind `no-preference` so that with
   reduced motion no animation is declared at all and every element is
   simply visible: the page can never depend on an animation having run
   to show its content. */
@media (prefers-reduced-motion: no-preference) {
  .jc-intake-rise {
    animation: jc-intake-rise 480ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  .jc-intake-rise--2 {
    animation-delay: 110ms;
  }

  .jc-intake-rise--3 {
    animation-delay: 200ms;
  }
}

@keyframes jc-intake-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Service areas builder tools (#1347) ─────────────────────── */

/* Tooltips on the add-an-area tools: shown on hover and keyboard focus;
   screen readers get the same text through aria-description. Hover only where
   the device can hover — a phone keeps :hover after a tap, which would leave
   the tip covering the search box. */
.jc-intake [data-tip] {
  position: relative;
}

.jc-intake [data-tip]:focus-visible::after {
  display: block;
}

@media (hover: hover) {
  .jc-intake [data-tip]:hover::after {
    display: block;
  }
}

.jc-intake [data-tip]::after {
  content: attr(data-tip);
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: max-content;
  max-width: 15rem;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  background-color: var(--jc-ink);
  color: var(--jc-white);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  pointer-events: none;
}

/* Anchored to the tab row, not the tab, so the tip never runs off a phone's edge. */
.jc-intake .jc-builder__tabs {
  position: relative;
}

.jc-intake .jc-builder__tabs [data-tip] {
  position: static;
}

.jc-intake .jc-coverage-chip__more[data-tip]::after {
  left: auto;
  right: 0;
}

.jc-intake .jc-builder__national {
  margin-top: 0.6rem;
}

.jc-intake .jc-coverage-chip__more {
  border: 0;
  background: none;
  padding: 0 0.2rem;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--jc-warm-700);
  cursor: pointer;
}

.jc-intake .jc-coverage-chip__more:hover {
  color: var(--jc-ink);
  text-decoration: underline;
}

/* The popover a clicked outline opens (#1561). The shell class is Leaflet's
   popup; on Google the same content sits in an InfoWindow. */
/* Side margins are POPOVER_CONTENT_MARGINS in leaflet_renderer.js. */
.jc-intake .jc-map-popover-shell .leaflet-popup-content {
  margin: 0.75rem 0.9rem;
  font-family: inherit;
}

.jc-intake .jc-map-popover {
  display: grid;
  gap: 0.6rem;
  justify-items: start;
  font-family: inherit;
}

.jc-intake .jc-map-popover:focus:not(:focus-visible) {
  outline: none;
}

.jc-intake .jc-map-popover:focus-visible {
  outline: 2px solid var(--jc-orange);
  outline-offset: 2px;
}

.jc-intake .jc-map-popover__name {
  margin: 0;
  padding-right: 1.5rem; /* clear of Leaflet's 24px close button */
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--jc-ink);
}

.jc-intake .jc-map-popover__expand {
  min-height: 44px; /* WCAG 2.5.5 / Apple HIG touch target */
  text-align: left;
}

/* A surrounding-suburbs lookup is running. */
.jc-intake .jc-coverage-chip__more[aria-disabled="true"],
.jc-intake .jc-map-popover__expand[aria-disabled="true"] {
  opacity: 0.6;
  cursor: progress;
}

/* ── Where you work, and what ───────────────
   The per-area editor and the all-areas summary. Every tap target is
   44px or taller (WCAG 2.5.5) and nothing scrolls sideways at 390px:
   the editor stacks, the grid scrolls inside its own card. */
.jc-intake .jc-area-editor {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

@media (min-width: 768px) {
  .jc-intake .jc-area-editor {
    /* The left column stays readable; the map takes everything else. */
    grid-template-columns: clamp(340px, 28vw, 420px) minmax(0, 1fr);
    grid-template-areas:
      "name map"
      "work map"
      "stock map"
      "shape map"
      ". paperwork";
    align-items: start;
  }

  .jc-intake .jc-area-editor__name { grid-area: name; }
  .jc-intake .jc-area-editor__work { grid-area: work; }
  .jc-intake .jc-area-editor__shape { grid-area: shape; }
  .jc-intake .jc-area-editor__stock { grid-area: stock; }
  .jc-intake .jc-area-editor__paperwork { grid-area: paperwork; }
  .jc-intake .jc-area-editor__map { grid-area: map; align-self: stretch; }
}

/* Desktop: paperwork joins the left column and the map spans every row,
   pinned beside it while the long left column scrolls. The trailing 1fr
   row soaks up any height the map has over the cards, so the left cards
   never spread apart to fill it. */
@media (min-width: 1024px) {
  .jc-intake .jc-area-editor {
    grid-template-areas:
      "name map"
      "work map"
      "stock map"
      "shape map"
      "paperwork map"
      ". map";
    grid-template-rows: auto auto auto auto auto 1fr;
  }

  .jc-intake .jc-area-editor__map {
    align-self: start;
    position: sticky;
    top: 1rem;
    height: clamp(520px, calc(100dvh - 2rem), 960px);
  }
}

.jc-intake .jc-area-editor__card {
  min-width: 0;
  padding: 0.85rem;
  border: 1px solid var(--jc-warm-200);
  border-radius: var(--jc-radius-md);
  background-color: var(--jc-white);
}

.jc-intake .jc-area-editor__heading {
  display: block;
  margin: 0 0 0.15rem;
  font-family: var(--jc-font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--jc-ink);
}

.jc-intake .jc-area-editor__new-address {
  min-width: 0;
  margin: 0.75rem 0 0;
  padding: 0;
  border: 0;
}

.jc-intake .jc-area-editor__location-edit {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  margin: 0.5rem 0 0;
}

.jc-intake .jc-area-editor__location-edit[hidden] {
  display: none;
}

.jc-intake .jc-area-editor__location-edit > .jc-area__hint {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.jc-intake .jc-area-editor__location-edit > .jc-intake-link {
  margin-left: auto;
}

.jc-intake .jc-area-editor__location-edit > .jc-area-editor__new-address {
  flex-basis: 100%;
}

.jc-intake .jc-area-editor__name-input {
  min-height: 44px;
  font-size: 16px; /* under 16px iOS zooms the page on focus */
  font-weight: 600;
}

.jc-intake .jc-area-editor__tap,
.jc-intake .jc-area-editor .jc-builder__tab,
.jc-intake .jc-area-editor .jc-button-primary {
  min-height: 44px;
}

.jc-intake .jc-area-editor__map {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--jc-warm-200);
  border-radius: var(--jc-radius-md);
  background-color: var(--jc-white);
  overflow: hidden;
}

.jc-intake .jc-area-editor__map-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: var(--jc-text-xs);
  color: var(--jc-warm-700);
}

.jc-intake .jc-area-editor__map-park {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.jc-intake .jc-area-editor .jc-coverage__map {
  flex: 1 1 auto;
  height: clamp(300px, 52dvh, 480px);
  border: 0;
  border-radius: 0;
}

@media (min-width: 768px) {
  .jc-intake .jc-area-editor .jc-coverage__map {
    height: auto;
    min-height: clamp(480px, 70dvh, 900px);
  }

  .jc-intake .jc-area-editor__fullscreen {
    display: none;
  }
}

.jc-intake .jc-area-editor__fullscreen {
  min-height: 36px;
  padding: 0.3rem 0.7rem;
  border-style: solid;
  font-size: var(--jc-text-xs);
}

/* Phone full screen: the map card covers the viewport and the page stops scrolling. */
.jc-intake .jc-area-editor__map--full {
  position: fixed;
  inset: 0;
  z-index: 50;
  border-radius: 0;
}

.jc-intake .jc-area-editor__map--full .jc-coverage__map {
  height: auto;
}

body.jc-intake.jc-area-editor-locked {
  overflow: hidden;
}

.jc-intake .jc-area-editor .jc-coverage__caption {
  padding: 0.35rem 0.75rem 0.5rem;
}

.jc-intake .jc-area-editor__overlap {
  margin: 0.5rem 0 0;
  font-size: var(--jc-text-xs);
  line-height: 1.5;
  color: var(--jc-orange-deep);
}

.jc-intake .jc-area-editor__nudge {
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--jc-amber-300);
  border-radius: var(--jc-radius-sm);
  background-color: #FFFBF2;
  font-size: var(--jc-text-xs);
  line-height: 1.5;
  color: var(--jc-ink);
}

.jc-intake .jc-area-editor__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
}

.jc-intake .jc-area-editor__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.jc-intake .jc-area-editor__count {
  font-size: var(--jc-text-xs);
  color: var(--jc-warm-700);
}

@media (max-width: 639px) {
  .jc-intake .jc-area-editor__actions,
  .jc-intake .jc-area-editor__buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .jc-intake .jc-area-editor__buttons > * {
    width: 100%;
    justify-content: center;
  }
}

/* ── The work picker: a plain checkbox list ──────────────────── */
.jc-intake .jc-work-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.jc-intake .jc-work-group + .jc-work-group {
  margin-top: 1rem;
}

.jc-intake .jc-work-group__label {
  padding: 0;
  margin: 0 0 0.35rem;
  font-size: var(--jc-text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--jc-warm-700);
}

.jc-intake .jc-work-group__note {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.jc-intake .jc-work-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.jc-intake .jc-work-list > li + li {
  border-top: 1px solid var(--jc-warm-200);
}

.jc-intake .jc-work-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.4rem 0.25rem;
  color: var(--jc-ink);
  font-size: 15px;
  line-height: 1.35;
  cursor: pointer;
}

.jc-intake .jc-work-row input[type="checkbox"] {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--jc-orange);
}

.jc-intake .jc-work-row:has(:checked) {
  font-weight: 600;
}

.jc-intake .jc-work-row:focus-within {
  outline: 2px solid var(--jc-orange);
  outline-offset: -2px;
}

.jc-intake .jc-work-name-one {
  margin-top: 0.75rem;
}

/* ── Paperwork this area needs / we'll ask for next ───────────── */
.jc-intake .jc-paperwork__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 13px;
  line-height: 1.45;
}

.jc-intake .jc-paperwork__row {
  display: flex;
  gap: 0.5rem;
  padding: 0.15rem 0.35rem;
  margin: 0 -0.35rem;
  border-radius: var(--jc-radius-sm);
}

.jc-intake .jc-paperwork__row--new {
  background-color: #FFFBF2;
}

.jc-intake .jc-paperwork__dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 0.4rem;
  border-radius: var(--jc-radius-pill);
  background-color: var(--jc-warm-500);
}

.jc-intake .jc-paperwork__dot--mandatory {
  background-color: var(--jc-danger);
}

.jc-intake .jc-paperwork__note {
  color: var(--jc-warm-700);
}

.jc-intake .jc-paperwork__badge {
  margin-left: 0.25rem;
  font-size: 11px;
  font-weight: 600;
  color: var(--jc-orange-deep);
}

.jc-intake .jc-paperwork__empty,
.jc-intake .jc-paperwork__shared {
  margin: 0.35rem 0 0;
  font-size: var(--jc-text-xs);
  line-height: 1.5;
  color: var(--jc-warm-700);
}

.jc-intake .jc-paperwork__shared {
  color: var(--jc-success);
}

.jc-intake .jc-paperwork__more > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--jc-warm-700);
  font-size: var(--jc-text-xs);
}

/* ── The all-areas summary ────────────────────────────────────── */
.jc-intake .jc-area-cards {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .jc-intake .jc-area-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .jc-intake .jc-area-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.jc-intake .jc-area-card {
  min-width: 0;
  border: 1px solid var(--jc-warm-200);
  border-radius: var(--jc-radius-md);
  background-color: var(--jc-white);
  overflow: hidden;
}

.jc-intake .jc-area-card__map {
  position: relative;
  height: 160px;
  background-color: var(--jc-warm-100);
}

/* isolation keeps Leaflet's z-indexed panes under the badges. */
.jc-intake .jc-area-card__thumb {
  display: block;
  width: 100%;
  height: 160px;
  isolation: isolate;
}

.jc-intake .jc-area-card__thumb .leaflet-control-zoom {
  display: none;
}

.jc-intake .jc-area-card__thumb--empty {
  display: grid;
  place-items: center;
  font-size: var(--jc-text-xs);
  color: var(--jc-warm-700);
}

.jc-intake .jc-area-card__badge {
  z-index: 1;
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 2px 8px;
  border: 1px solid var(--jc-warm-200);
  border-radius: var(--jc-radius-pill);
  background-color: var(--jc-white);
  font-size: 11px;
  color: var(--jc-ink);
}

.jc-intake .jc-area-card__badge--warn {
  left: auto;
  right: 8px;
  border-color: var(--jc-amber-300);
  background-color: #FFFBF2;
  color: var(--jc-orange-deep);
}

.jc-intake .jc-area-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.65rem 0.75rem 0.75rem;
  font-size: 13px;
}

.jc-intake .jc-area-card__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 14px;
}

.jc-intake .jc-area-card__edit {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex: none;
  font-size: 13px;
}

.jc-intake .jc-area-card__line {
  margin: 0;
  color: var(--jc-warm-700);
  overflow-wrap: anywhere;
}

.jc-intake .jc-area-card__line--warn {
  color: var(--jc-orange-deep);
}

.jc-intake .jc-area-card__work {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.jc-intake .jc-area-card__chip {
  padding: 2px 8px;
  border-radius: var(--jc-radius-pill);
  background-color: var(--jc-warm-100);
  font-size: 11.5px;
  color: var(--jc-ink);
}

.jc-intake .jc-area-card--delivery {
  border-style: dashed;
}

.jc-intake .jc-area-card__chip--requested {
  border: 1px dashed var(--jc-ink);
  background-color: transparent;
}

.jc-intake .jc-area-card__remove-form {
  margin-top: 0.25rem;
}

.jc-intake .jc-area-card__remove {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--jc-text-xs);
  color: var(--jc-warm-700);
  text-decoration: underline;
  cursor: pointer;
}

.jc-intake .jc-area-card__remove:hover {
  color: var(--jc-danger);
}

.jc-intake a.jc-area-card__remove {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
}

.jc-intake .jc-areas-summary {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 1024px) {
  .jc-intake .jc-areas-summary {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

.jc-intake .jc-areas-summary__aside {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.jc-intake .jc-work-grid-card {
  min-width: 0;
  padding: 0;
  overflow: hidden;
}

.jc-intake .jc-work-grid-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 0.85rem 0.5rem;
}

.jc-intake .jc-work-grid-card__header .jc-area__hint {
  margin: 0;
}

/* The grid scrolls inside its card — never the page. */
.jc-intake .jc-work-grid__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.jc-intake .jc-work-grid {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.jc-intake .jc-work-grid th,
.jc-intake .jc-work-grid td {
  border-top: 1px solid var(--jc-warm-200);
  text-align: left;
  vertical-align: middle;
}

.jc-intake .jc-work-grid thead th {
  padding: 0.5rem 0.6rem;
  border-top: 0;
  background-color: var(--jc-warm-100);
  font-size: var(--jc-text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--jc-warm-700);
}

.jc-intake .jc-work-grid thead th + th {
  text-align: center;
  min-width: 96px;
}

.jc-intake .jc-work-grid tbody th {
  padding: 0.35rem 0.85rem;
  font-weight: 600;
  min-width: 10rem;
}

.jc-intake .jc-work-grid tbody td {
  padding: 0;
  border-left: 1px solid var(--jc-warm-200);
}

.jc-intake .jc-work-grid__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  cursor: pointer;
}

.jc-intake .jc-work-grid__cell input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--jc-orange);
}

/* The reason goes under the tick, so the tick sits where it does in every other cell. */
.jc-intake .jc-work-grid__cell--blocked {
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem 0.5rem 0.45rem;
}

.jc-intake .jc-work-grid__blocked {
  max-width: 11rem;
  font-size: 10.5px;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
  color: var(--jc-danger);
}

.jc-intake .jc-work-grid__cell--on {
  background-color: #FFFBF2;
}

.jc-intake .jc-work-grid__group {
  display: inline-block;
  white-space: nowrap;
  margin-left: 0.25rem;
  padding: 1px 6px;
  border-radius: var(--jc-radius-pill);
  background-color: var(--jc-warm-100);
  font-size: 10px;
  font-weight: 600;
  color: var(--jc-warm-700);
}

.jc-intake .jc-work-grid td.jc-work-grid__foot {
  padding: 0.5rem 0.85rem;
  font-size: var(--jc-text-xs);
  color: var(--jc-warm-700);
}

/* Native <details> toggle, no JS: its rows sit in the grid's own columns, outside it. */
.jc-intake .jc-work-grid__unrequested {
  display: none;
}

.jc-intake .jc-work-grid:has(details[data-unrequested][open]) .jc-work-grid__unrequested {
  display: table-row-group;
}

.jc-intake .jc-work-grid__unplaced-note {
  display: none;
  margin-top: 0.25rem;
  font-size: var(--jc-text-xs);
  font-weight: 500;
  color: var(--jc-ink);
}

.jc-intake .jc-work-grid__row--unplaced > th {
  box-shadow: inset 3px 0 0 var(--jc-amber-300);
  background-color: #FFFBF2;
}

.jc-intake .jc-work-grid__row--unplaced .jc-work-grid__unplaced-note {
  display: block;
}

.jc-intake .jc-work-grid__unrequested th {
  font-weight: 500;
  color: var(--jc-warm-700);
}

.jc-intake .jc-worth-a-look {
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--jc-amber-300);
  border-radius: var(--jc-radius-md);
  background-color: #FFFBF2;
  font-size: var(--jc-text-xs);
  line-height: 1.5;
  color: var(--jc-ink);
}

.jc-intake .jc-worth-a-look__title {
  margin: 0 0 0.25rem;
  font-weight: 700;
}

.jc-intake .jc-worth-a-look ul {
  margin: 0;
  padding-left: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}