/**
 * Réno intent-forms renderer styles (P4) — designer pass, 2026-07-28.
 *
 * Scoped under .reno-directive — a bot bubble inside the Réno widget, whose
 * content area is DARK (theme --primary navy over a photo, rgba(28,22,68,.8)).
 * The designer's mockups put the copy and controls DIRECTLY on that navy: there
 * is no card panel. Controls are stadium-ish pills stacked in a left-aligned
 * column, labels centred, one accent colour per intent.
 *
 * Design: ~/Downloads/Reno Intents.psd (sha256 in docs/design/reno-intents/),
 * eleven 1242x1716 px artboards of a 414pt phone at 3x: 1 design pt = 1 CSS px
 * at a 414px viewport. Measured from the PSD's layers (2026-11-06), not the PNG
 * exports: the widget's own tab row is 393.3px wide in the browser and 393.4pt
 * in the PSD. (Until 3.44.1 this sheet read the PNGs as 2x of a 621px viewport,
 * anchored on the Réno head, which the site draws larger than the PSD: every
 * "design" number below was 1.5x too big and the ratios were off.) Where a
 * literal value would break a house rule, the RULE WINS and the deviation is
 * noted inline:
 *   - pill height  20 design -> 44px  (tap target)
 * Because the height changes, GEOMETRY IS TRANSFERRED AS RATIOS TO HEIGHT, not
 * as absolute px — the PSD's pill is 104.3 x 20, radius 8.4, 3.7 apart, a
 * 1.33px stroke: width 5.2h, gap 0.185h, radius 0.42h, stroke 0.067h.
 *   - type         the PSD sets the question at 9.3px and pill labels at 7.6px.
 *                  Kept at 14px / 15px: below any legibility floor on a photo,
 *                  and the chat's own messages beside the card are 16px+ (the
 *                  PSD's whole type scale, tabs and composer too, is ~0.6x of
 *                  the live widget's). A decision for the designer, not here.
 *   - input size               -> 16px  (iOS focus-zoom)
 *   - weights      300 / 500 / 700 design -> 400 / 600 / 600 (the omnes-pro kit
 *                  serves 400 + 600 only; measured in the browser)
 *   - tracking     the PSD's 30 (0.03em) on copy, 25 (0.025em) on labels: kept.
 *   - heading      design shows ONE question line beside the mark; the build
 *                  used title + sentence. The title is now visually hidden
 *                  (.reno-di-title--sr) and stays the card's accessible name.
 *   - lead-in      26px -> 16px (--reno-pill-lead); consent line 13px / 2px up.
 *   - pending      message, Resend and its count share one wrapping line
 *                  (design 4.png); Resend keeps its 44px hit area.
 * Mobile-first; single breakpoint 782px to match the theme.
 *
 * ACCENT: every accented rule below reads var(--reno-accent*). A future intent
 * gets its own colour by overriding those three tokens on .reno-directive — no
 * rule below needs to change. (The designer's parking green is #00A886 @ .75;
 * its AA-safe opaque equivalent is #00806a / hover #006d59 / edge #8fe3d2.)
 * Declared on the parking card — see "Period picker" below (reno 3.37.0).
 */

.reno-directive {
  /* Component tokens — declared on the bubble, never on :root, so they cannot
     leak into the theme (house precedent: --lbs-* , --swt-*). */
  /* --secondary flips to navy on body.corporate / .corporateHome
     (theme style.css:38-45) while these two stay blue — which would desync the
     trio, EXCEPT the widget is `display:none` on exactly those pages
     (frontend.css:27-29, and lux_is_corporate() adds .corporate to every
     corporate page). The card can never render where the token flips. */
  --reno-accent:       var(--secondary, #0d7eac);
  --reno-accent-hover: #0a6b93;   /* darker, not lighter: lightening toward the
                                     navy panel drops the label under 4.5:1 */
  --reno-accent-edge:  #7fc7e8;   /* outlined-pill stroke. The design's literal
                                     #397ca8 is only 3.0:1 on the panel's dark
                                     region and 1.5:1 on its light region. */
  --reno-ink:          #fff;
  --reno-ink-muted:    rgba(255, 255, 255, 0.82);
  --reno-gold-ink:     #ffce7a;   /* resend link. The design's #faa21b is 4.38:1
                                     — fails AA as body-size text. */
  --reno-gold-line:    #faa21b;   /* the literal gold, non-text use only (3:1) */
  --reno-err-ink:      #ffc4c4;
  --reno-hl:           #fff;      /* highlighted values: white, bold. The 2022
                                     blue #10a0db came to 3.3-4.2:1 over the
                                     photo in the real widget (DDEV, Chromium +
                                     WebKit, 320-1280px, 2026-11-09), under AA,
                                     so decision 31's white fallback holds. No
                                     yellow: the website is on the 2022 edition */
  /* Geometry is transferred from the PSD as RATIOS TO PILL HEIGHT, not as raw
     px: the design draws a 20px-tall pill, but the house tap-target rule pins
     ours at 44px. Measured from the PSD's layers (104.3 x 20, radius 8.4, 3.7
     apart, 1.33px stroke):
       width 5.2 x h   gap 0.185 x h   radius 0.42 x h   stroke 0.067 x h
     Applied to h=44 below. */
  --reno-r-control:    18px;      /* 0.42 x 44, as round as the PSD's pill
                                     (Manos + Tom, 2026-11-09, part 5: the 8px
                                     of 3.45.1 read square at 44px) */
  --reno-gap:          8px;       /* 0.185 x 44 */
  --reno-pill-w:       229px;     /* 5.2 x 44 */
  --reno-pill-h:       36px;      /* the choice pill as drawn (Manos, 2026-11-09:
                                     "reduce button height"); it still answers
                                     a 44px tap through its ::after */
  --reno-pill-gap:     12px;      /* between two choice pills (Manos: "increase
                                     distance between them"): wider than the
                                     8px their two ::after areas reach into it */
  --reno-r-pill:       15px;      /* 0.42 x 36, the PSD's ratio on the pill as
                                     drawn (the 44px controls keep 18px) */
  --reno-stroke:       1.5px;     /* the PSD's 1.33, as drawn (Tom, 2026-11-09:
                                     the 0.067h ratio read heavy) */
  --reno-track-copy:   0.03em;    /* the PSD's tracking 30 */
  --reno-track-label:  0.025em;   /* the PSD's tracking 25 */
  --reno-pill-lead:    16px;      /* desc to first pill (was 26 = 0.6 x 44; the
                                     design's lead-in reads tighter on a phone) */

  align-self: flex-start;
  max-width: 100%;
  width: 100%;
}

/* No card panel — the design puts the content straight on the widget backdrop.
   This is also the a11y-favourable direction: the old rgba(255,255,255,.08) wash
   lightened the backdrop toward the failing end of every contrast pair. */
.reno-di {
  box-sizing: border-box;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--reno-ink);
}

.reno-di * {
  box-sizing: border-box;
}

.reno-di-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--reno-ink);
}

/* Visually hidden, still in the tree: the card's name for assistive tech. */
.reno-di-title--sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.reno-di-desc {
  margin: 0 0 var(--reno-pill-lead);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;          /* the PSD's 11.2 on 9.3 */
  letter-spacing: var(--reno-track-copy);
  color: var(--reno-ink);
}

/* --- choice radiogroup: a left-aligned column of equal-width pills ---
   The COLUMN carries the design width and the pills fill it. It used to be
   `width: fit-content` with a min-width on each pill, but a percentage
   min-width inside a fit-content parent is degenerate — it resolves against a
   container that is itself sizing to its content, so the pills collapsed to
   their label width (107px instead of 249px). A fixed column also matches the
   design better: its pills are one deliberate width, not label-driven. */
.reno-di-choices {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: var(--reno-pill-gap);
  /* The pills' width and, past it, room for the inline field's round arrow:
     the field is a pill, its arrow hangs beside it (Manos, 2026-11-09: "Make
     it pill-wide"). Every choice and slot but that field keeps the pill's
     width (below), so nothing else moves. A card too narrow for both narrows
     the field only. */
  width: min(calc(var(--reno-pill-w) + 8px + var(--reno-pill-h)), 100%);
}

.reno-di-choices > :not(.reno-di-inline) {
  max-width: var(--reno-pill-w);
}

.reno-di-choice {
  position: relative;        /* the tap area's ::after, below */
  flex: 0 0 auto;
  width: 100%;
  /* Width comes from the column; a short label must not shrink-wrap to a stub. */
  min-width: 0;
  min-height: var(--reno-pill-h); /* design 20; the tap area is 44 (::after) */
  padding: 7px 18px;         /* with the 3px stroke, one line stays 36px */
  font-size: 15px;           /* design 7.6 — LEGIBILITY WINS */
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--reno-track-label);
  text-align: center;
  cursor: pointer;
  border-radius: var(--reno-r-pill);
  border: var(--reno-stroke) solid var(--reno-accent-edge);
  background: transparent;   /* the design's outlined pills have no fill at all */
  color: var(--reno-ink);
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}

/* The tap area stays 44px (frontend-ui.md) while the pill is drawn 36px: an
   empty ::after reaches 4px past its top and bottom (insets count from the
   padding box, so the stroke is added). The column's gap is wider than the 8px
   two areas reach into it, so a tap never lands on the other pill. */
.reno-di-choice::after {
  content: "";
  position: absolute;
  top: calc(-1 * (var(--reno-stroke) + (44px - var(--reno-pill-h)) / 2));
  bottom: calc(-1 * (var(--reno-stroke) + (44px - var(--reno-pill-h)) / 2));
  left: calc(-1 * var(--reno-stroke));
  right: calc(-1 * var(--reno-stroke));
}

.reno-di-choice:hover,
.reno-di-choice:focus-visible {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

/* No selected fill (reno 3.37.0). The choices are plain buttons now — each one
   is an action (Email opens its field IN PLACE of the pill, see
   .reno-di-inline; Watch live opens the live widget) — so there is no
   persistent selection for a fill to mirror. The field that replaces the Email
   pill carries the design's filled look instead (.reno-di-sent once sent). */

.reno-di-choice:active {
  transform: scale(0.97);
}

/* --- "Watch live" slot: the live band's state in the pill's place ---
   (reno-intents.js _renderWatchSlot). Following: a line saying where the
   flight went, then Stop following (a pill). Stopped or unavailable: the pill
   and a line under it. Ended: the line alone. A column like the group's. */
.reno-di-watch {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.reno-di-watch-on,
.reno-di-watch-note {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--reno-ink);
}

.reno-di-watch-on {
  font-weight: 600;
}

/* Following: the line stands off the confirmation above it (Tom, part 5,
   2026-11-09: it read glued to it); the column's own 8px gap comes on top. */
.reno-di-watch-on:first-child {
  margin-top: var(--reno-gap);
}

/* Decoration: the words say "live". */
.reno-di-watch-dot {
  color: #4ade80;
}

/* The ended note takes focus only when the Stop the visitor stood on went. */
.reno-di-watch-note:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* --- intent mark: the design's plane / "P" beside the question --- */
.reno-di-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.reno-di-head-text {
  flex: 1 1 auto;
  min-width: 0;
}

.reno-di-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: #fff;
}

/* Tom's plane, drawn climbing (never turned: a plane pointing down reads as a
   crash). It follows the question beside it, not the pill: the PSD draws it
   15.7pt wide beside a 9.3pt question, so 1.69 x 14px = 24px (Manos,
   2026-11-09: at 0.785 x the 44px pill, 34px, "aircraft is huge"). */
.reno-di-icon--flight {
  width: 24px;
  height: 24px;
}

/* Every card ends in a light hairline, so the next card or the next Réno
   message never runs into it (Manos + Tom, part 5, 2026-11-09; until 3.46.0 a
   line was drawn only between two cards in a row). On the CARD, not on its
   bubble: the turn's pin spacer can give the bubble a pane-tall min-height
   (frontend-chatbot.js _moveTurnSpacer), and the line would sit at its foot.
   The wait line before a card (`.reno-track-wait`) is no card: no line. */
.reno-directive:not(.reno-track-wait) > .reno-di {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}

/* Two cards in a row: the first one's line parts them. */
.reno-directive + .reno-directive {
  margin-top: 2px;
  padding-top: 10px;
  border-radius: 0;
}

.reno-di-icon--parking {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;          /* omnes-pro ships 400 + 600 only */
  line-height: 1;
}

/* --- inline field: the chosen pill becomes its own input (mockups 2-4) ---
   The whole column: the field starts where its pill was and is as wide, the
   round submit past it in the room the column keeps for it. (Until 3.47.1 the
   slot was min(pill + arrow + gap, 100%) of a column no wider than a pill, so
   the field, the gap and the arrow shared one pill's width.) */
.reno-di-inline {
  width: 100%;
}

.reno-di-field.reno-di-field--inline {
  max-width: none;
}

/* The field and its arrow are drawn at the pills' 36px (Manos, 2026-11-09:
   "Match the pills") and keep their 44px tap area: the row reaches 4px past
   them above and below, giving the room back with a negative margin, so
   nothing moves. A press on that band is handed to the field by
   reno-intents.js (_renderInlineForm): a <div> does not focus its input as a
   <label> would. The band stays inside the 12px the column leaves between this
   and the next pill, whose own tap area reaches 4px into it. */
.reno-di-inline-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-block: calc((44px - var(--reno-pill-h)) / 2);
  margin-block: calc((44px - var(--reno-pill-h)) / -2);
  -webkit-tap-highlight-color: transparent;
}

/* Left-aligned while typing (the mockup's typed address starts at the pill's
   left padding); the centred pill text is for labels, not for editing. */
.reno-di .reno-di-inline-row .reno-di-input {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

/* The PSD draws this field as the pill it replaces, filled (artboard 2: the
   accent at .75, a bold white prompt; artboard 3: the typed address in white
   Regular), as tall as the pills and the arrow beside it: 36px drawn, the
   pill's corner, the 16px type kept (iOS zooms on less), one line in 36px
   with the stroke. Its 44px tap area is the row's band, above. The opaque
   accent keeps white at AA; the light edge stays, a field's boundary at 3:1 on
   the photo (1.4.11). The placeholder is full white (its only colour that
   clears 4.5:1 on the fill) and bold, as drawn, which tells it from a typed
   value. The full form's fields (the escalation card) stay 44px. */
.reno-di .reno-di-inline-row .reno-di-input {
  min-height: var(--reno-pill-h);
  padding: 6px 16px;
  border-radius: var(--reno-r-pill);
  line-height: 1.25;
  letter-spacing: var(--reno-track-label);
  border-width: var(--reno-stroke);
  background: var(--reno-accent);
  color: #fff;
  caret-color: #fff;
}

.reno-di .reno-di-inline-row .reno-di-input::placeholder {
  color: #fff;
  font-weight: 400;          /* Tom, 2026-11-09: the bold prompt read heavy */
  opacity: 1;
}

/* The PSD draws the arrow as tall as the pill (20pt beside the 20pt pill), so
   it is drawn 36px; its 44px tap area is an empty ::before, as the pills'
   is their ::after (its own ::after is the busy spinner). */
.reno-di-inline-submit {
  position: relative;
  flex: 0 0 var(--reno-pill-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--reno-pill-h);
  height: var(--reno-pill-h);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--reno-accent);
  color: #fff;
  cursor: pointer;
  transition: background .15s, transform .1s;
}

.reno-di-inline-submit::before {
  content: "";
  position: absolute;
  inset: calc((44px - var(--reno-pill-h)) / -2);
}

/* Half the circle, as at 44px (22 of 44). */
.reno-di-inline-submit .reno-di-icon {
  width: 18px;
  height: 18px;
}

.reno-di-inline-submit:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--reno-accent-hover);
}

.reno-di-inline-submit:active {
  transform: scale(0.95);
}

/* No address yet: the arrow keeps its place, unseen and out of the Tab order
   (reno-intents.js syncArrow). */
.reno-di .reno-di-inline-submit.is-waiting {
  visibility: hidden;
}

/* Two classes deep: see "DISABLED STATES" above. */
.reno-di .reno-di-inline-submit:disabled {
  background: var(--reno-accent);
  opacity: 0.6;
  cursor: default;
}

/* Held while sending or counting down (`aria-disabled`, see HELD below), and
   the visitor is usually still on it: the disabled look, dimmed part by part —
   fill, arrow, spinner — never through the button's opacity, which would dim
   its focus ring with it. */
.reno-di .reno-di-inline-submit[aria-disabled="true"] {
  background: color-mix(in srgb, var(--reno-accent) 60%, transparent);
  cursor: default;
}

.reno-di .reno-di-inline-submit[aria-disabled="true"]:not(.is-busy) .reno-di-icon,
.reno-di .reno-di-inline-submit[aria-disabled="true"]::after {
  opacity: 0.6;
}

/* Busy: the arrow gives way to the module's spinner. */
.reno-di-inline-submit.is-busy .reno-di-icon {
  opacity: 0;
}

.reno-di-inline-submit.is-busy::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: reno-di-spin 0.8s linear infinite;
}

.reno-di-inline-state {
  margin: 6px 0 0;
}

/* The address a pending/sent field went to — the mockup's filled pill, as
   text (it is not a control, so it carries no hover or pointer), drawn as the
   field it replaces: 36px, the pill's corner. */
.reno-di-sent {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--reno-pill-h);
  margin: 0 0 8px;
  padding: 7px 18px;
  border-radius: var(--reno-r-pill);
  background: var(--reno-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 400;          /* the PSD's address is Omnes Regular */
  line-height: 1.25;
  letter-spacing: var(--reno-track-label);
  overflow-wrap: anywhere;
  width: min(var(--reno-pill-w), 100%);
}

/* Visually hidden, still read (the icon-only submit's name). */
.reno-di-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- form fields --- */
.reno-di-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.reno-di-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: var(--reno-pill-w);
}

.reno-di-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--reno-ink);
}

/* The field replaces the pill it was chosen from, so it wears the same shape.
   Scoped under .reno-di on purpose: the theme styles inputs by type
   (`input[type="email"] { border-radius:3px; border:1px solid #ccc }`,
   theme style.css), which at (0,1,1) outspecifies a bare .reno-di-input class
   and silently won. Two classes (0,2,0) beat it whatever the load order. */
.reno-di .reno-di-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  font-size: 16px;           /* >=16px: no iOS focus-zoom. NON-NEGOTIABLE. */
  text-align: center;
  border-radius: var(--reno-r-control);
  border: 2px solid var(--reno-accent-edge);
  background: #fff;
  color: var(--primary, rgb(28, 22, 68));
}

.reno-di .reno-di-input::placeholder {
  color: rgba(28, 22, 68, 0.55);
}

.reno-di .reno-di-input:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}

.reno-di .reno-di-input--error {
  border-color: var(--tertiary, rgb(223, 44, 50));
  box-shadow: 0 0 0 1px var(--tertiary, rgb(223, 44, 50));
}

.reno-di-error {
  font-size: 13px;
  line-height: 1.4;
  color: var(--reno-err-ink);
}

/* --- textarea (contract v1.5, used by the InfoDesk escalation) ---------------
   The pill shape and centred text are right for a one-line answer and wrong for
   a paragraph: text must start at the left edge and the control must be a
   readable box, not a stadium. Full width too — .reno-di-field's --reno-pill-w
   cap (249px) exists to keep single-line controls pill-proportioned. */
.reno-di .reno-di-textarea {
  min-height: 96px;
  padding: 12px 16px;
  text-align: left;
  border-radius: 12px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.45;
}

.reno-di-field--textarea {
  max-width: 100%;
}

/* The escalation card's one-line fields take its message box's width and
   left-aligned text (George W10, reno 3.45.0): a 229px (300px from 782px)
   centred pill above a full-width, left-aligned box read as two forms. Their
   rounded-rect radius stays. Two classes and an attribute beat
   `.reno-di .reno-di-input`'s centre, whatever the load order. */
.reno-directive[data-intent-kind="support-escalation"] .reno-di-field {
  max-width: 100%;
}

.reno-directive[data-intent-kind="support-escalation"] .reno-di .reno-di-input {
  text-align: left;
}

.reno-di-consent {
  margin: 0;
  font-size: 13px;           /* 13-14 range; muted ink is 0.82 white = AA */
  line-height: 1.35;
  color: var(--reno-ink-muted);
}

/* The inline field's retention line stands off the field (Manos, part 5,
   2026-11-09: it read glued to the box). The full form's consent is spaced by
   its own rows. */
.reno-di-inline-form > .reno-di-consent {
  margin-top: var(--reno-gap);
}

/* --- action buttons --- */
.reno-di-actions {
  display: flex;
  gap: var(--reno-gap);
  flex-wrap: wrap;
  margin-top: 12px;
  align-items: center;
}

/* The parking card's Check availability sits centred under the calendar and
   the ends, which are centred themselves (Manos, 2026-11-09). */
.reno-directive[data-intent-kind="parking-dates"] .reno-di-actions {
  justify-content: center;
}

.reno-di-btn {
  min-height: 44px;
  padding: 10px 22px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--reno-track-label);
  cursor: pointer;
  border-radius: var(--reno-r-control);
  border: 2px solid transparent;
  transition: background .15s, border-color .15s, transform .1s, opacity .15s;
}

.reno-di-btn:active {
  transform: scale(0.97);
}

.reno-di-btn:disabled,
.reno-di-btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: default;
}

/* DISABLED STATES MUST NAME THEIR OWN BACKGROUND, two classes deep. The widget's
   `button:disabled { background: #e0e0e0 }` (frontend.css, 0,1,1) outranks every
   single-class rule here, so a disabled control went light grey: white
   "Sending…" / "Resend in 45s" on #e0e0e0 at .6 opacity, unreadable — on the
   parking and escalation submits since P4 (seen in the real widget 2026-09-27).
   A filled submit stays filled and legible when it is retired (`:disabled`):
   an inactive control's contrast exemption would not excuse hiding its words.
   One that merely waits is HELD (below) and dims its fill instead.
   HELD (reno 3.37.9): a control that waits and comes back — sending, a 429
   countdown, a month with nothing to offer — is `aria-disabled="true"`, not
   `disabled`, so the visitor keeps focus on it (reno-intents.js `_lock`). A
   held control looks like a disabled one (a filled submit dims its fill where
   the disabled one keeps it), and every hover/press rule excludes both. Where
   the disabled look is a whole-button opacity, the held one dims the parts
   instead (fill, icon, words, stroke): opacity would dim the focus ring the
   visitor is standing on. */
.reno-di .reno-di-primary:disabled,
.reno-di .reno-di-submit:disabled {
  background: var(--reno-accent);
  border-color: var(--reno-accent);
  color: #fff;
  opacity: 1;
}

/* Held (sending, or counting a 429 down) the words stay the action's
   ("Track flight") and the count ticks on the line under the row (3.37.12),
   so the fill says it waits: dimmed like the inline arrow's, never through
   opacity (the visitor's focus ring is on it). White on the darker mix only
   gains contrast. The fill stops at the padding box: the border is the same
   translucent colour, and under it the fill would be painted twice, a ring
   lighter than the button. */
.reno-di .reno-di-primary[aria-disabled="true"],
.reno-di .reno-di-submit[aria-disabled="true"] {
  background: color-mix(in srgb, var(--reno-accent) 60%, transparent);
  background-clip: padding-box;
  border-color: color-mix(in srgb, var(--reno-accent) 60%, transparent);
  color: #fff;
  opacity: 1;
}

.reno-di .reno-di-cancel:disabled,
.reno-di .reno-di-cancel[aria-disabled="true"] {
  background: transparent;
}

.reno-di .reno-di-choice:disabled {
  background: transparent;
  opacity: 0.6;
  cursor: default;
}

/* Held while the host decides, the visitor on the one they pressed: dim the
   words and the stroke, never the button (its focus ring would dim too). The
   stroke is named here, so the hover and focus wash cannot whiten it. */
.reno-di .reno-di-choice[aria-disabled="true"] {
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  border-color: color-mix(in srgb, var(--reno-accent-edge) 60%, transparent);
  cursor: default;
}

/* No color-mix() (Safari before 16.2): the held controls dim as a whole, as
   they did when disabled — their ring with them. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .reno-di .reno-di-primary[aria-disabled="true"],
  .reno-di .reno-di-submit[aria-disabled="true"] {
    background: var(--reno-accent);
    border-color: var(--reno-accent);
    opacity: 0.6;
  }
  .reno-di .reno-di-inline-submit[aria-disabled="true"] {
    background: var(--reno-accent);
    opacity: 0.6;
  }
  .reno-di .reno-di-inline-submit[aria-disabled="true"]:not(.is-busy) .reno-di-icon,
  .reno-di .reno-di-inline-submit[aria-disabled="true"]::after {
    opacity: 1;
  }
  /* The held stroke is a color-mix() over a var(): such an engine keeps the
     declaration and computes it to nothing (the stroke falls to currentcolor),
     it does not skip it. The stroke and the words are named again, or the ring
     would be drawn in the words' translucent white, then dimmed a second time
     by the opacity. */
  .reno-di .reno-di-choice[aria-disabled="true"] {
    color: var(--reno-ink);
    border-color: var(--reno-accent-edge);
    opacity: 0.6;
  }
}

/* A disabled button is never :active; a held one is, so it must not press in. */
.reno-di .reno-di-btn[aria-disabled="true"]:active,
.reno-di .reno-di-choice[aria-disabled="true"]:active,
.reno-di .reno-di-inline-submit[aria-disabled="true"]:active {
  transform: none;
}

.reno-di-primary,
.reno-di-submit {
  background: var(--reno-accent);
  border-color: var(--reno-accent);
  color: #fff;
}

.reno-di-primary:hover:not(:disabled):not([aria-disabled="true"]),
.reno-di-submit:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--reno-accent-hover);
  border-color: var(--reno-accent-hover);
}

.reno-di-cancel {
  background: transparent;
  color: var(--reno-ink);
  border-color: var(--reno-accent-edge);
}

.reno-di-cancel:hover:not(:disabled):not([aria-disabled="true"]) {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

/* The widget's own `button:focus { outline: 2px solid #000 }` (frontend.css,
   `:where(.chatbot-widget-area) button:focus`) is invisible on the navy panel, so every control in here overrides it.
   `:focus` is listed too, not just `:focus-visible` — the plugin rule matches on
   mouse/touch as well, where :focus-visible does not, so a *clicked* control was
   still getting the black ring. */
.reno-di-choice:focus,
.reno-di-btn:focus,
.reno-di-link:focus,
.reno-di-call-link:focus,
.reno-di-choice:focus-visible,
.reno-di-btn:focus-visible,
.reno-di-link:focus-visible,
.reno-di-call-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* --- result + link CTA --- */
.reno-di-result-msg {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--reno-ink);
}

/* The answer's key values (contract v1.22 `highlights`: the price, the number
   of days; Tom, 2026-11-09, decision 31): bold, in --reno-hl (white: the 2022
   blue fails 4.5:1 on the photo-backed pane, see the token). The flight card's
   flight number and address too (part 5 point 48), its "Stopped following"
   note included. */
.reno-di-watch-note .reno-di-hl,
.reno-di-result-msg .reno-di-hl {
  font-weight: 700;
  color: var(--reno-hl);
}

.reno-di-result:focus-visible {
  outline: none;
}

/* Scoped under .reno-di for the same reason as the input: the widget styles its
   own anchors (`.chatBotMainContentArea a:hover { color:#CCC }`, frontend.css:551)
   at (0,2,1), which outranks a bare `.reno-di-link:hover` (0,2,0). Unscoped, the
   CTA label went grey on hover — #CCC on the hover fill is 3.70:1, under AA. */
.reno-di .reno-di-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 22px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  border-radius: var(--reno-r-control);
  background: var(--reno-accent);
  color: #fff;
}

.reno-di .reno-di-link:hover {
  background: var(--reno-accent-hover);
  color: #fff;
}

/* --- a phone line beside the form (contract v1.20 `call`) ---
   The escalation card's Information Desk number, under the description: an
   outlined pill like the choices (a second way to reach a person, not the
   form's primary action), 44px tall, the number never broken across lines.
   Scoped under .reno-di like .reno-di-link: the widget's
   `.chatBotMainContentArea a:hover { color:#CCC }` (0,2,1) outranks a bare class. */
.reno-di-call {
  margin: 0 0 20px;
}

.reno-di-call-label {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--reno-ink-muted);
}

.reno-di .reno-di-call-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(var(--reno-pill-w), 100%);
  min-height: 44px;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  border-radius: var(--reno-r-control);
  border: 2px solid var(--reno-accent-edge);
  background: transparent;
  color: var(--reno-ink);
  transition: background .15s, border-color .15s;
}

.reno-di .reno-di-call-link:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: var(--reno-ink);
}

.reno-di-call-link .reno-di-icon {
  width: 20px;
  height: 20px;
}

.reno-di-call-number {
  white-space: nowrap;
}

/* Pending confirmation (4.png): "Check your email for confirmation | Sent again"
   — the resend reads as an inline amber link continuing the sentence. It stays a
   <button> (still 44px, still keyboard-reachable); only its chrome changes. The
   underline carries the affordance so the amber is never the only cue. */
/* One wrapping line: message | Resend | count. An error hint (not the count)
   takes a full row of its own. */
.reno-di-result--pending {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
}

.reno-di-result--pending .reno-di-result-msg {
  flex: 0 1 auto;
  margin: 0;
}

.reno-di-result--pending .reno-di-actions {
  flex: 0 0 auto;
  margin: 0;
}

.reno-di-result--pending .reno-di-wait {
  flex: 0 0 auto;
  margin: 0;
}

.reno-di-result--pending .reno-di-hint:not(.reno-di-wait) {
  flex: 0 0 100%;
  margin-top: 0;
}

.reno-di-result--pending .reno-di-cancel {
  min-height: 44px;
  padding: 10px 0;
  background: transparent;
  border-color: transparent;
  color: var(--reno-gold-ink);
  text-decoration: underline;
  text-decoration-color: var(--reno-gold-line);
  text-underline-offset: 3px;
}

/* A link, not a button (Tom, part 5, 2026-11-09): no ring on hover (the base
   .reno-di-cancel:hover's white border showed as one), no press-in. The white
   text and underline on hover stay; the keyboard focus ring stays. */
.reno-di-result--pending .reno-di-cancel:hover:not(:disabled):not([aria-disabled="true"]) {
  background: transparent;
  border-color: transparent;
  color: #fff;
  text-decoration-color: #fff;
}

.reno-di-result--pending .reno-di-cancel:active {
  transform: none;
}

/* A click focuses the button in Chromium, and `.reno-di-btn:focus` (above)
   draws its ring on a mouse or touch focus too: on this link the ring reads as
   the button Tom saw. Keyboard focus keeps it (:focus-visible). */
.reno-di-result--pending .reno-di-cancel:focus:not(:focus-visible) {
  outline: none;
}

/* Counting down / capped for the day: not a link any more, so drop the underline
   as well as the colour. opacity:.6 on muted white would fail AA — don't.
   Counting down it is held (`aria-disabled`), capped it is disabled. */
.reno-di-result--pending .reno-di-cancel:disabled,
.reno-di-result--pending .reno-di-cancel[aria-disabled="true"] {
  color: var(--reno-ink-muted);
  text-decoration: none;
  opacity: 1;
}

/* --- hints / status --- */
.reno-di-hint {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--reno-ink);
}

.reno-di-hint--error {
  color: var(--reno-err-ink);
}

.reno-di-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Busy placeholder while the directive is fetched. */
.reno-di-loading {
  opacity: 0.85;
}

.reno-di-loading::after {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-left: 8px;
  vertical-align: -0.12em;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: reno-di-spin 0.8s linear infinite;
}

@keyframes reno-di-spin {
  to { transform: rotate(360deg); }
}

/* ── Period picker (contract v1.14 `form.period`; lux-pm 3.3, mockups 6-9) ──
   Each end keeps its LABEL once it has a value — the mockup's filled pill
   dropped it, and then nothing said which end was which. Monday-first.
   PHONE (<782px): the two ends are ONE row, "Entry ▢ → ▢ Exit", two segments
   (each its own >=44px button), the duration a small line under the row, then
   the calendar below — the 56px+56px stack plus a duration line pushed the
   calendar and "Check availability" out of a 341px chat viewport.
   DESKTOP (>=782px): with the calendar open the picker is two columns, as
   drawn — the ends left, the calendar (+ its times) right — and the period card
   alone lifts the 460px cap (see the media block). Deviation: the mockup's
   arrow between the pills is kept on the phone row only; in the stacked desktop
   column there is no between to point across. */

/* Parking's accent: the designer's green (#00A886 @ .75, 3.95:1 under white
   text) at its AA-safe opaque equivalent — white on #00806a is 4.89:1. */
.reno-directive[data-intent-kind="parking-dates"] {
  --reno-accent:       #00806a;
  --reno-accent-hover: #006d59;
  --reno-accent-edge:  #8fe3d2;
}

.reno-dp {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

/* Each end is as wide as its words, never wider than the row (George W11,
   reno 3.45.0): two equal halves wrapped French at 375px ("dim. 15 nov. ·
   04:15" needs 137.6px of a 134.1px half) while the other end had room to
   spare. The ends' auto columns share the row's free space equally up to
   their words, then stretch alike; the arrow's max-content column never
   stretches. A row too narrow for both (320px) wraps each at its spaces, as
   before. The spanning rows below are contained: an error's sentence must not
   size the ends' columns (it would also widen the arrow's). */
.reno-dp-ends {
  display: grid;
  grid-template-columns: auto max-content auto;
  column-gap: 6px;
  align-items: stretch;
  width: 100%;
}

.reno-dp-ends > .reno-di-error {
  contain: inline-size;
}

/* Decorative arrow between the segments; the empty alt keeps it out of the
   accessibility tree (each button already names its own end). */
.reno-dp-ends::before {
  content: "\2192" / "";
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-size: 16px;
  line-height: 1;
  color: var(--reno-ink-muted);
}

/* Explicit placement — the markup order is end, error, end, error.
   Rows are margin-spaced, not gapped: a hidden error is no grid item but its
   row would still carry a row-gap. */
.reno-dp-ends > .reno-dp-end:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.reno-dp-ends > .reno-dp-end:nth-of-type(2) { grid-column: 3; grid-row: 1; }
.reno-dp-ends > .reno-di-error:nth-of-type(1) { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; }
.reno-dp-ends > .reno-di-error:nth-of-type(2) { grid-column: 1 / -1; grid-row: 3; margin-top: 4px; }

.reno-dp-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;        /* holds the visually hidden end name */
  min-width: 0;
  min-height: 44px;          /* one line, the value alone (Tom, 2026-11-09):
                                the 44px tap target, no taller */
  padding: 4px 10px;
  border-radius: var(--reno-r-control);
  border: var(--reno-stroke) solid transparent;
  background: var(--reno-accent);
  color: #fff;
  font: inherit;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}

/* No caption on the pill (Tom + Manos, 2026-11-09, decision 19): the end's
   name ("Entry" / "Exit") is `.reno-dp-end-label.reno-di-sr`, heard as the
   first word of the button's name, never drawn. */

.reno-dp-end-value {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: var(--reno-track-label);
  /* Wraps at its spaces only ("Thu 5 Nov ·" / "21:00" on a 320px phone, and
     German's longer weekday), never inside a word (9c20724a). */
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}

.reno-dp-end.is-empty .reno-dp-end-value {
  font-weight: 400;
}

/* A phone fits both ends on one line (George W11, measured in Chromium with
   omnes-pro, EN/FR/DE, every day of 2026-27 x every quarter hour): the widest
   value is "sam. 20 mars · 00:00" / "Mo., 20. Sept. · 00:00" at 135.4px in 14px,
   two of them, the 6px gaps, the 16px arrow and the pills' 23px of padding and
   stroke need 343px of a 295px row at 375px. 13px, 4px sides, 4px gaps and a
   12px arrow need 292px. The 44px height, the stroke and the corner stay.
   The 320/360px rows are still too narrow: they wrap at spaces (D3). */
@media (max-width: 781px) {
  .reno-dp-ends {
    column-gap: 4px;
  }
  .reno-dp-ends::before {
    font-size: 12px;
  }
  .reno-dp-end {
    padding: 4px;
  }
  .reno-dp-end-value {
    font-size: 13px;
  }
}

.reno-dp-end:hover {
  background: var(--reno-accent-hover);
}

/* The end the open calendar is choosing — a ring, not a colour change, so the
   state is not carried by colour alone (aria-expanded carries it for AT).
   The ring alone (Manos, 2026-11-10): the 3px inset bar that went with it bent
   round the 18px corners and, with the ring and a mouse click's focus ring,
   read as a heavy stroke under the pill. */
.reno-dp-end.is-active {
  border-color: #fff;
}

.reno-dp-end:active {
  transform: scale(0.97);
}

.reno-di .reno-dp-end.reno-di-input--error {
  border-color: var(--reno-err-ink);
  box-shadow: 0 0 0 1px var(--reno-err-ink);
}

/* A smaller box (Tom, 2026-11-09, decision 28): the PSD's 158 x 106 calendar
   cannot hold 44px day cells, so the box loses what is not a tap target — its
   width to seven 44px columns, its padding, and the month row's height (the
   arrows keep their 44px by reaching into the padding, below). */
.reno-dp-panel {
  box-sizing: border-box;
  align-self: center;        /* centred under the ends (Manos, 2026-11-09) */
  width: 100%;
  max-width: 292px;          /* 7 x 40 + 2 x 6; compact (Manos, 2026-11-09) */
  margin-top: 2px;
  padding: 4px 6px 6px;
  border-radius: 8px;        /* the PSD's calendar, 8.4 */
  background: var(--reno-accent);
  color: #fff;
}

.reno-dp-hint {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.reno-dp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  /* The month row draws 30px tall; each arrow keeps its 44px hit area by
     reaching 7px into the panel's padding above and the weekday row below. */
  height: 30px;
  /* Inset from the panel's edge (Tom, 2026-11-09, decision 30): the glyph sat
     flush against the side. */
  padding: 0 6px;
}

.reno-dp-month {
  flex: 1 1 auto;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.reno-dp-nav {
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -7px 0;            /* 44px of taps in the 30px row */
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  position: relative;        /* over the weekday row it reaches into */
  z-index: 1;
}

.reno-dp-nav .reno-di-icon {
  width: 22px;
  height: 22px;
}

.reno-dp-nav:hover:not(:disabled):not([aria-disabled="true"]) {
  background: rgba(255, 255, 255, 0.16);
}

/* Two classes deep: see "DISABLED STATES" above (it showed a grey disc). */
.reno-di .reno-dp-nav:disabled {
  background: transparent;
  opacity: 0.4;
  cursor: default;
}

/* Held at the first or last month (`aria-disabled`, see HELD above), and often
   focused as it gets there: dim the arrow, not the button, so the focus ring
   stays full white (the button's opacity would dim the ring with it). The icon
   names its own colour (`.reno-di-icon`), so it is dimmed itself; the colour
   dims the text fallback. */
.reno-di .reno-dp-nav[aria-disabled="true"] {
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  cursor: default;
}

.reno-di .reno-dp-nav[aria-disabled="true"] .reno-di-icon {
  opacity: 0.4;
}

/* `separate` + 0 spacing: a collapsed table drops cell radii in some engines,
   and the range band below is drawn on the cells. */
.reno-dp-grid {
  width: 100%;
  margin-top: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.reno-dp-grid th {
  padding: 0 0 2px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: #fff;
}

.reno-dp-grid td {
  /* Compact (Manos, 2026-11-09): 36px rows, under the 44px house floor by his
     call, over WCAG 2.2's 24px (2.5.8); width is 1/7 of the panel. */
  height: 36px;
  padding: 0;
  text-align: center;
  vertical-align: middle;
}

.reno-dp-day {
  cursor: pointer;
}

/* A disc that fits its cell: on a 375px phone the chat card is ~271px wide, so a
   cell is ~36px and a fixed 40px disc overlapped its neighbours. */
.reno-dp-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(32px, 100%);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
}

.reno-dp-day:not(.is-disabled):not(.is-start):not(.is-end):hover .reno-dp-num {
  background: rgba(0, 0, 0, 0.18);
}

/* The stay: a band across the days between the ends, and a half band into
   each end so it reads as one piece. DARKER than the panel, never lighter:
   a white veil (.22) put the white numerals at 3.34:1 on the parking green;
   black .22 keeps them at 7.1:1 (the hover above: .18, 6.6:1). */
.reno-dp-day.is-in-range {
  background: rgba(0, 0, 0, 0.22);
}

.reno-dp-day.is-start.has-range {
  background: linear-gradient(to right, transparent 50%, rgba(0, 0, 0, 0.22) 50%);
}

.reno-dp-day.is-end.has-range {
  background: linear-gradient(to left, transparent 50%, rgba(0, 0, 0, 0.22) 50%);
}

/* The ends: white discs, accent numerals (the same 4.89:1 pair, reversed). */
.reno-dp-day.is-start .reno-dp-num,
.reno-dp-day.is-end .reno-dp-num {
  background: #fff;
  color: var(--reno-accent);
}

/* Today: a ring — a shape cue, not a colour one. */
.reno-dp-day.is-today .reno-dp-num {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85);
}

/* Unavailable (past the lead time, before the entry): dimmed and inert. An
   inactive control is outside WCAG 1.4.3, and aria-disabled says it to AT. */
.reno-dp-day.is-disabled {
  cursor: default;
}

.reno-dp-day.is-disabled .reno-dp-num {
  opacity: 0.45;
}

.reno-dp-day:focus {
  outline: none;
}

.reno-dp-day:focus-visible .reno-dp-num {
  outline: 2px solid #fff;
  outline-offset: 1px;
}

/* Slimmer hours, less space under them (Tom, 2026-11-09, decision 29): the
   pills' stroke and corner, a tighter pad, and the panel's 8px foot. */
.reno-dp-times {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

.reno-dp-time {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.reno-dp-time .reno-di-label {
  font-size: 12px;
  color: #fff;
  text-align: center;        /* over its select (Manos, 2026-11-09) */
}

.reno-di .reno-dp-select {
  padding: 4px 10px;
  border-width: var(--reno-stroke);
  border-color: #fff;
  border-radius: var(--reno-r-control);
  text-align-last: center;
}

.reno-dp-end:focus-visible,
.reno-dp-nav:focus,
.reno-dp-nav:focus-visible,
.reno-di-inline-submit:focus,
.reno-di-inline-submit:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* A mouse or tap press draws no ring on a pill (the widget's own
   `button:focus` would draw its black one): the keyboard keeps the white
   ring above (Manos, 2026-11-10). */
.reno-di .reno-dp-end:focus:not(:focus-visible) {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .reno-di-choice,
  .reno-di-btn,
  .reno-di-inline-submit,
  .reno-dp-end {
    transition: none;
  }
  .reno-di-btn:active,
  .reno-di-choice:active,
  .reno-di-inline-submit:active,
  .reno-dp-end:active {
    transform: none;
  }
  .reno-di-loading::after,
  .reno-di-inline-submit.is-busy::after {
    animation: none;
    border-top-color: rgba(255, 255, 255, 0.35);
  }
}

/* Desktop: cap the card width so it reads as a message, not a full-width form. */
@media (min-width: 782px) {
  .reno-directive {
    --reno-pill-w: 300px;
  }
  .reno-di {
    max-width: 460px;
  }

  /* Period picker, desktop: the phone's layout, the ends one row and the
     calendar centred under them (Manos, 2026-11-09: "the dates should be next
     to each other and the date picker under them and centered"). Until then a
     desktop stacked the ends in a column beside the calendar, the card lifted
     to 720px and the submit at the calendar's foot. Only the pills grow. */
  .reno-dp-end {
    min-height: 44px;
    padding: 6px 16px;
  }
  .reno-dp-end-value {
    font-size: 15px;
  }
}

/* ── Live flight widget ("Watch live", task 1.2) ──────────────────────────
   STRUCTURAL ONLY. Tom's 1.2 designs (map, status badges, flight icons)
   restyle this; what's here just stops the default <dl> rendering from
   stacking every fact onto its own indented line and pushing the card past
   the fold on a 375px screen. Hooks are stable so the design pass can target
   them without touching the JS. */
.reno-fw-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.35;
}

.reno-fw-facts dt {
  margin: 0;
  font-weight: 600;
  color: var(--reno-ink-muted, rgba(255, 255, 255, 0.78));
}

/* The browser default indents <dd>; in a grid that reads as a broken column. */
.reno-fw-facts dd {
  margin: 0;
  color: #fff;
}

.reno-fw-status {
  margin-bottom: 0;
}

/* Forced colours (Windows contrast themes) paint a native `disabled` control in
   GrayText and draw the dimmed fills above not at all, so a HELD
   (`aria-disabled`) control would read as ready: its words, its stroke and its
   icon name GrayText instead (reno 3.37.12; the line beside the control says
   what it waits for). Each selector is the held rule's own, and this block
   comes after them all, so it wins where the UA would paint the control as
   idle. */
@media (forced-colors: active) {
  .reno-di .reno-di-btn[aria-disabled="true"],
  .reno-di .reno-di-primary[aria-disabled="true"],
  .reno-di .reno-di-submit[aria-disabled="true"],
  .reno-di .reno-di-cancel[aria-disabled="true"],
  .reno-di .reno-di-choice[aria-disabled="true"],
  .reno-di .reno-di-inline-submit[aria-disabled="true"],
  .reno-di .reno-dp-nav[aria-disabled="true"],
  .reno-di-result--pending .reno-di-cancel[aria-disabled="true"] {
    color: GrayText;
    border-color: GrayText;
  }

  .reno-di .reno-di-inline-submit[aria-disabled="true"] .reno-di-icon,
  .reno-di .reno-dp-nav[aria-disabled="true"] .reno-di-icon {
    color: GrayText;
  }
}

/* --- required / optional markers + legend (WCAG 3.3.2): words, not colour --- */
.reno-di-legend {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--reno-ink-muted);
}

.reno-di-req {
  font-weight: 600;
}

.reno-di-opt {
  font-weight: 400;
  color: var(--reno-ink-muted);
}

/* --- an off-site redirect offered as a link, never followed (44px target) --- */
.reno-di .reno-di-extlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  overflow-wrap: anywhere;
}