/* Alder: the jobs board, /jobs (jobs.tpl.php) and /jobs/{slug} (job.tpl.php).
   Linked from inside the two templates; page.tpl.php hoists the link to the
   end of the head. Browse rides on alder-pages.css (finder, empty state,
   al-pager) and alder-hubs.css (head type). Mobile first, one break at 921px.
   No rules between blocks: space, a paper or sand panel, a hairline outline. */

.al-pg--jobs, .al-pg--job { overflow-x: clip; }

/* ---------- The room (partials/_jobs-art.tpl.php) ----------
   A shaded paper model lit from the upper left: four flat tones (top, left,
   right, cast shadow), thin ink lines, the brand green only on the rug, the
   lamp shade and the lamp's pool of light. No gradients, filters or blur.
   Plays on load; the resting frame is the whole picture. */
.al-jart {
  --ja-ink: rgba(14, 42, 27, .55); --ja-lit: var(--al-brand, #3D8850);
  --ja-t: #FBF7EE; --ja-m: #EEE3CF; --ja-d: #D9C9AD; --ja-x: #5E4F38;
  --ja-g1: #D5EADB; --ja-g2: #BCDCC6; --ja-g3: #A1CBAE;
  width: 100%;
}
.al-jart__svg { display: block; width: 100%; height: auto; overflow: visible; }
.al-jart polygon, .al-jart path { stroke: var(--ja-ink); stroke-width: 1px; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.al-jart .jt { fill: var(--ja-t); }
.al-jart .jm { fill: var(--ja-m); }
.al-jart .jd { fill: var(--ja-d); }
.al-jart .jq { fill: #fff; }
.al-jart .jg1 { fill: var(--ja-g1); }
.al-jart .jg2 { fill: var(--ja-g2); }
.al-jart .jg3 { fill: var(--ja-g3); }
.al-jart .jh { fill: none; stroke-width: .8px; opacity: .7; }
.al-jart .jgh { fill: none; stroke: var(--ja-lit); stroke-width: .8px; opacity: .55; }
.al-jart .jsh { opacity: .16; }
.al-jart .jx { fill: var(--ja-x); stroke: none; }
.al-jart .jpt { fill: #fff; stroke: none; opacity: .8; }
.al-jart .jp { fill: var(--ja-lit); stroke: none; opacity: .13; }
.al-jart :is(.jp, .jpt) { transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: no-preference) {
  /* One calm 10s loop, three offset beats: the lamp light breathes, the
     empty chair drifts about four floor units out and back (screen .866, .5
     per unit) with its shadow, the window light slides a little. */
  .al-jart .ja-pool .jp { animation: al-ja-pool 10s ease-in-out infinite; }
  .al-jart .ja-chair { animation: al-ja-chair 10s var(--al-ease) infinite; }
  .al-jart .ja-win .jpt { animation: al-ja-win 10s ease-in-out infinite; }
  .al-jart.is-paused :is(.jp, .ja-chair, .jpt) { animation-play-state: paused; }
}
@keyframes al-ja-pool {
  0%, 100% { opacity: .13; transform: scale(1); }
  50%      { opacity: .24; transform: scale(1.07); }
}
@keyframes al-ja-chair {
  0%, 20%   { transform: translate(0, 0); }
  45%, 65%  { transform: translate(3.5px, 2px); }
  90%, 100% { transform: translate(0, 0); }
}
@keyframes al-ja-win {
  0%, 100% { opacity: .8; transform: translate(0, 0); }
  50%      { opacity: .55; transform: translate(2.6px, -1.5px); }
}

/* ---------- Browse: head band ---------- */
.al-jhead { padding: 22px 0 0; }
.al-jhead__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 108px;
  column-gap: 12px; align-items: start;
}
.al-jhead__label { grid-column: 1; margin-bottom: 6px; font-size: 16px; }
.al-jhead__h { grid-column: 1; }
.al-jhead__art { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-top: -4px; }
.al-jhead__lede, .al-jhead__count, .al-jhead__finder { grid-column: 1 / -1; }
.al-jhead__lede { margin-top: 12px; }
.al-jhead__finder { margin-top: 18px; max-width: 760px; }

/* One row of filter pills at every width: native sideways scroll on touch,
   drag-to-scroll with a mouse or pen (js/alder-jobs.js, part 5). The JS sets
   .is-draggable when the row overflows and .is-more-start / .is-more-end for
   the edge fades; .is-dragging only while a drag is under way. */
.al-jfilters {
  display: flex; align-items: center; gap: 8px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  padding: 16px var(--al-edge) 18px; scroll-padding-inline: 56px;
}
.al-jfilters::-webkit-scrollbar { display: none; }
.al-jfilters.is-more-end { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
.al-jfilters.is-more-start { -webkit-mask-image: linear-gradient(to right, transparent, #000 56px); mask-image: linear-gradient(to right, transparent, #000 56px); }
.al-jfilters.is-more-start.is-more-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
@media (pointer: fine) {
  .al-jfilters.is-draggable { cursor: grab; -webkit-user-select: none; user-select: none; }
  .al-jfilters.is-dragging, .al-jfilters.is-dragging * { cursor: grabbing; }
}
.al-jfilters > * { flex: none; white-space: nowrap; }
.al-jfilters__sep { width: 1px; height: 22px; margin-inline: 4px; background: var(--al-line); }
.al-jchip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 16px;
  border: 1px solid var(--al-line); border-radius: 999px;
  background: var(--al-page); color: var(--al-ink);
  font: 500 13.5px/1.2 var(--al-sans);
  transition: background-color .18s, border-color .18s, color .18s;
}
.al-jchip[aria-current] { background: var(--al-pill); border-color: var(--al-pill); color: #fff; }
.al-jchip .al-ico { width: 15px; height: 15px; flex: none; }
.al-jchip__pin { color: var(--al-brand); margin-left: -3px; }
.al-jchip[aria-current] .al-jchip__pin { color: var(--al-sage); }
.al-jchip__x { margin-right: -4px; }
@media (hover: hover) {
  .al-jchip:not([aria-current]):hover { border-color: var(--al-ink); background: #fff; }
  .al-jchip[aria-current]:hover { background: var(--al-moss); border-color: var(--al-moss); }
}

@media (min-width: 921px) {
  .al-jhead { padding-top: 34px; }
  .al-jhead__grid { grid-template-columns: minmax(0, 1fr) 300px; column-gap: 56px; }
  .al-jhead__label { font-size: 18px; margin-bottom: 8px; }
  .al-jhead__art { grid-row: 1 / span 5; margin-top: 0; margin-bottom: -18px; }
  .al-jhead__lede, .al-jhead__count, .al-jhead__finder { grid-column: 1; }
  .al-jhead__finder { margin-top: 22px; max-width: 640px; }
  .al-jfilters { padding: 22px var(--al-edge) 26px; }
  .al-jchip { min-height: 38px; padding: 0 14px; }
}

/* ---------- Browse: results ---------- */
.al-jlist { padding: 22px 0 var(--al-rhythm); }
.al-jlist__line {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px;
  margin-bottom: 14px; font: 400 14px/1.4 var(--al-sans); color: var(--al-muted);
}
.al-jlist__line strong { color: var(--al-ink); font-weight: 700; }
.al-jlist__clear { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--al-ink); text-decoration: underline; text-underline-offset: 3px; }
.al-jempty__p { margin-top: 8px; max-width: 34em; }

.al-jgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.al-jgrid > li { display: flex; min-width: 0; }
@media (min-width: 640px) { .al-jgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .al-jgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }

/* Card: the whole card is the link */
.al-jcard {
  display: flex; flex-direction: column; gap: 10px; width: 100%; min-width: 0;
  padding: 20px 20px 16px;
  border: 1px solid var(--al-line); border-radius: var(--al-r);
  background: #fff; color: var(--al-body);
  transition: border-color .18s, box-shadow .18s;
}
.al-scope .al-jcard:focus-visible { outline-offset: 2px; border-radius: var(--al-r); }
.al-jcard__h { font: 700 19px/1.25 var(--al-display); letter-spacing: -.015em; color: var(--al-ink); text-wrap: balance; }
.al-jcard__who { display: block; font: 400 14px/1.45 var(--al-sans); color: var(--al-muted); }
.al-jcard__who strong { font-weight: 600; color: var(--al-ink); }
.al-jcard__dot { display: inline-block; width: 3px; height: 3px; margin: 0 8px 3px; border-radius: 50%; background: currentColor; vertical-align: middle; }
.al-jcard__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.al-jtag {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px;
  border-radius: 999px; background: var(--al-paper); color: var(--al-pill);
  font: 600 12px/1 var(--al-sans);
}
.al-jcard__pay {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  font: 600 15px/1.4 var(--al-sans); color: var(--al-ink);
}
.al-jcard__sum {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  font-size: 15px; line-height: 1.5;
}
.al-jcard__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 4px;
  font: 400 13px/1.3 var(--al-sans); color: var(--al-muted);
}
.al-jcard__go {
  display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none;
  border-radius: 50%; background: var(--al-sand); color: var(--al-ink);
  transition: background-color .18s, color .18s, transform .25s var(--al-ease);
}
.al-jcard__go .al-ico { width: 17px; height: 17px; }
@media (hover: hover) {
  .al-jcard:hover { border-color: rgba(14, 42, 27, .45); box-shadow: var(--al-raise); }
  .al-jcard:hover .al-jcard__go { background: var(--al-pill); color: #fff; transform: translateX(2px); }
}

/* "Hiring?" panel */
.al-jpost {
  display: grid; gap: 18px; margin-top: 48px; padding: 24px 20px;
  border-radius: var(--al-r); background: var(--al-sand);
}
.al-jpost__h { font: 800 24px/1.1 var(--al-display); letter-spacing: -.02em; color: var(--al-ink); }
.al-jpost__p { margin-top: 8px; max-width: 36em; }
.al-jpost__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.al-jpost__acts .al-jpost__alt { margin-top: 0; }
@media (min-width: 921px) {
  .al-jlist { padding-top: 28px; }
  .al-jcard { padding: 22px 22px 18px; }
  .al-jcard__h { font-size: 20px; }
  .al-jpost { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; margin-top: 64px; padding: 32px 36px; }
  .al-jpost__h { font-size: 28px; }
}

/* ---------- The Ask button's footprint ----------
   The Ask button (#ocd-ask-fab) is fixed 56px wide, 24px from the right
   edge on desktop and 16px on a phone. From two columns up, the card
   grids, the pager and the Hiring panel keep a right margin so nothing
   reaches into that strip: 100px (button, offset, a little air) less the
   page's own edge. It is 0 once the edge is wider (about 1480px up).
   A one-column phone cannot spare the strip, so there the button steps
   aside on both jobs pages (the detail page already hid it under the
   apply bar); Ask stays one tap away in the menu. */
@media (min-width: 640px) {
  .al-jlist > *, .al-jrel .al-wrap > * {
    margin-right: max(0px, 100px - max(var(--al-gutter, 24px), (100vw - var(--al-max, 1280px)) / 2));
  }
}
@media (max-width: 639.98px) {
  body:has(:is(.al-pg--jobs, .al-pg--job)) #ocd-ask-fab { display: none !important; }
}

/* ---------- Detail: owner bar, notice ---------- */
.al-jown { background: var(--al-deep); color: rgba(250, 250, 248, .86); }
.al-jown__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-block: 8px; }
.al-jown__s { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 500 14px/1.3 var(--al-sans); }
.al-jown__pill { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font: 700 12px/1 var(--al-sans); }
.al-jown__pill--open { background: var(--al-sage); color: var(--al-ink); }
.al-jown__pill--closed, .al-jown__pill--expired { background: var(--al-sand); color: var(--al-ink); }
.al-jown__edit { min-height: 44px; padding-block: 8px; }
.al-jnote { margin-top: 16px; padding: 14px 18px; border-radius: 12px; background: var(--al-sand); color: var(--al-ink); font-size: 15px; }

/* ---------- Detail: head band ---------- */
.al-jdhead { padding: 14px 0 26px; }
.al-jdhead__back {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-left: -6px; padding-right: 8px;
  font: 600 14px/1 var(--al-sans); color: var(--al-moss);
}
.al-jdhead__back .al-ico { width: 18px; height: 18px; }
.al-jdhead__h {
  margin-top: 6px; max-width: 24em;
  font: 800 clamp(1.8rem, 3.4vw, 2.75rem)/1.08 var(--al-display);
  letter-spacing: -.03em; color: var(--al-ink); text-wrap: balance;
}
.al-jdhead__who { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.al-jdhead__who > span { display: grid; line-height: 1.3; }
.al-jdhead__av { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; background: #fff; }
.al-jdhead__av--logo { border-radius: 12px; object-fit: contain; padding: 4px; }
.al-jdhead__by { font: italic 400 14px/1.3 var(--al-serif); color: var(--al-muted); }
.al-jdhead__name { font: 600 16px/1.3 var(--al-sans); color: var(--al-ink); }
a.al-jdhead__name { text-decoration: underline; text-decoration-color: rgba(14, 42, 27, .3); text-underline-offset: 3px; }
@media (hover: hover) { a.al-jdhead__name:hover { color: var(--al-moss); text-decoration-color: currentColor; } }
.al-jmeta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.al-jmeta__i {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px;
  border-radius: 999px; background: #fff; color: var(--al-ink);
  font: 500 13.5px/1.2 var(--al-sans);
}
.al-jmeta__i .al-ico { width: 15px; height: 15px; color: var(--al-brand); margin-left: -2px; }
.al-jmeta__i--pay { background: var(--al-pill); color: #fff; font-weight: 600; }
.al-jdhead__cta { margin-top: 22px; }
.al-jdhead__apply { width: 100%; }
.al-jwhen { margin-top: 10px; font: 400 13px/1.4 var(--al-sans); color: var(--al-muted); text-align: center; }

/* ---------- Detail: sections + the apply card ---------- */
.al-jdbody { padding: 8px 0 var(--al-rhythm); }
.al-jsec { padding-top: 30px; }
.al-jsec__h { font: 700 21px/1.2 var(--al-display); letter-spacing: -.015em; color: var(--al-ink); margin-bottom: 12px; }
.al-jsec__prose { display: grid; gap: .8em; max-width: 40em; }
.al-jlist2 { display: grid; gap: 8px; max-width: 40em; }
.al-jlist2 > li { position: relative; padding-left: 22px; }
.al-jlist2 > li::before {
  content: ""; position: absolute; left: 4px; top: .7em;
  width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg);
  border: 1.5px solid var(--al-brand);
}
.al-jfacts { display: grid; gap: 8px; max-width: 40em; }
.al-jfacts > div { display: grid; gap: 2px; padding: 12px 16px; border-radius: 12px; background: var(--al-paper); }
.al-jfacts dt { font: italic 400 14px/1.3 var(--al-serif); color: var(--al-moss); }
.al-jfacts dd { font: 600 16px/1.4 var(--al-sans); color: var(--al-ink); }
.al-jsec--apply { scroll-margin-top: calc(var(--al-hdr-h) + 16px); }
.al-jhow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 40em; padding: 18px; border: 1px solid var(--al-line); border-radius: var(--al-r); background: #fff; }
.al-jhow__row { display: grid; gap: 2px; }
.al-jhow__k { font: italic 400 14px/1.3 var(--al-serif); color: var(--al-moss); }
.al-jhow__v {
  display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere;
  font: 600 16px/1.3 var(--al-sans); color: var(--al-ink);
  text-decoration: underline; text-decoration-color: rgba(14, 42, 27, .3); text-underline-offset: 3px;
}
@media (hover: hover) { .al-jhow__v:hover { color: var(--al-moss); text-decoration-color: currentColor; } }
.al-jhow__note, .al-jdlg__note { font: 400 13.5px/1.5 var(--al-sans); color: var(--al-muted); }
.al-jside { display: none; }

@media (min-width: 921px) {
  .al-jdhead { padding: 22px 0 40px; }
  .al-jdhead__cta { display: none; }
  .al-jdbody { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 64px; align-items: start; }
  .al-jsec { padding-top: 40px; }
  .al-jsec__h { font-size: 24px; }
  .al-jside { display: block; position: sticky; top: calc(var(--al-hdr-h) + 24px); margin-top: 40px; }
  .al-jside__card {
    display: grid; gap: 6px; padding: 24px;
    border: 1px solid var(--al-line); border-radius: var(--al-r); background: #fff; box-shadow: var(--al-raise);
  }
  .al-jside__k { font: italic 400 16px/1.3 var(--al-serif); color: var(--al-moss); }
  .al-jside__t { font: 700 19px/1.25 var(--al-display); letter-spacing: -.015em; color: var(--al-ink); }
  .al-jside__w { font-size: 14.5px; color: var(--al-muted); }
  .al-jside__pay { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; font: 600 15px/1.35 var(--al-sans); color: var(--al-ink); }
  .al-jside__apply { width: 100%; margin-top: 12px; }
}

/* ---------- Detail: related openings ---------- */
.al-jrel { padding: 0 0 var(--al-rhythm); }
.al-jrel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.al-jrel__h { font: 800 clamp(1.5rem, 2.6vw, 2rem)/1.1 var(--al-display); letter-spacing: -.025em; color: var(--al-ink); }
.al-jrel__all { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 600 14px/1 var(--al-sans); color: var(--al-moss); white-space: nowrap; }
.al-jrel__all .al-ico { width: 16px; height: 16px; }
@media (min-width: 1100px) { .al-jgrid--rel { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Detail: the phone apply bar ----------
   Fixed, slides in once the head's Apply button has scrolled away, and steps
   aside again over "How to apply" and the footer (js/alder-jobs.js). It is
   the one floating object on a phone job page: the Ask launcher, back to top
   and the welcome bubble give way, as on a provider profile. */
.al-jbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--al-gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(245, 239, 230, .96);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  transition: transform .25s var(--al-ease);
}
.al-jbar.is-hidden { transform: translateY(110%); }
.al-jbar__txt { display: grid; min-width: 0; line-height: 1.2; }
.al-jbar__txt strong, .al-jbar__txt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-jbar__txt strong { font: 700 15px/1.25 var(--al-display); color: var(--al-ink); }
.al-jbar__txt span { font: 400 12.5px/1.3 var(--al-sans); color: var(--al-muted); }
.al-jbar .al-pill { flex: none; min-width: 112px; }
.al-pg--job.has-jbar { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) { .al-jbar { transition: none; } }
@media (max-width: 920px) {
  body:has(.al-jbar) #ocd-ask-fab, body:has(.al-jbar) #ocd-scroll-top, body:has(.al-jbar) .ocd-scroll-top,
  body:has(.al-jbar) #ocd-welcome-pip { display: none !important; }
}
@media (min-width: 921px) {
  .al-jbar { display: none; }
  .al-pg--job.has-jbar { padding-bottom: 0; }
}

/* ---------- Detail: the apply dialog ----------
   A bottom sheet on a phone, a centred card on desktop. The dialog element
   has no padding so a press on it (not on .al-jdlg__in) is a press on the
   backdrop. */
.al-jdlg {
  width: 100%; max-width: 100%; max-height: 92dvh; margin: auto auto 0; padding: 0;
  border: 0; border-radius: 20px 20px 0 0; background: var(--al-page); color: var(--al-body);
  box-shadow: 0 -10px 40px rgba(14, 42, 27, .18);
  font: 400 16px/1.55 var(--al-sans);
}
.al-jdlg::backdrop { background: rgba(14, 42, 27, .42); }
.al-jdlg[open] { animation: al-jdlg-up .28s var(--al-ease); }
@keyframes al-jdlg-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .al-jdlg[open] { animation: none; } }
.al-jdlg__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px var(--al-gutter) calc(24px + env(safe-area-inset-bottom)); }
.al-jdlg__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.al-jdlg__h { font: 800 22px/1.15 var(--al-display); letter-spacing: -.02em; color: var(--al-ink); padding-top: 8px; }
.al-jdlg__x { flex: none; }
.al-jdlg__x .al-ico { width: 20px; height: 20px; }
.al-jdlg__k { font: italic 400 15px/1.3 var(--al-serif); color: var(--al-moss); margin-bottom: 6px; }
.al-jdlg__mail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.al-jdlg__row {
  display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 16px;
  border: 1px solid var(--al-line); border-radius: 999px; background: #fff;
}
.al-jdlg__addr {
  flex: 1; min-width: 0; min-height: 44px; display: block; padding-block: 12px;
  word-break: normal; overflow-wrap: break-word; font: 600 15px/1.35 var(--al-sans); color: var(--al-ink);
}
.al-jdlg__copy { flex: none; min-width: 84px; padding-inline: 16px; }
/* Narrow phones: the address gets the whole first row, Copy drops below */
@media (max-width: 429.98px) {
  .al-jdlg__row { flex-wrap: wrap; gap: 4px; padding: 4px 6px 6px; border-radius: 18px; }
  .al-jdlg__addr { flex: 1 1 100%; padding-inline: 10px; padding-block: 10px 6px; }
  .al-jdlg__copy { flex: 1 1 100%; }
}
.al-jdlg__copy.is-done { background: var(--al-paper); border-color: var(--al-brand); color: var(--al-pill); }
.al-jdlg__status { min-height: 1.4em; padding-left: 16px; font: 400 13px/1.4 var(--al-sans); color: var(--al-moss); }
.al-jdlg__go { width: 100%; }
.al-jdlg__ins { padding: 14px 16px; border-radius: 12px; background: var(--al-sand); color: var(--al-ink); font-size: 15px; }
.al-jdlg__ins .al-jdlg__k { margin-bottom: 4px; }
.al-jdlg :focus-visible { outline: 2px solid var(--al-brand); outline-offset: 3px; }
@media (min-width: 921px) {
  .al-jdlg { width: min(520px, 100% - 48px); margin: auto; border-radius: 20px; box-shadow: 0 20px 60px rgba(14, 42, 27, .25); }
  .al-jdlg__in { padding: 26px 28px 28px; }
  .al-jdlg__h { font-size: 24px; }
}