/*
blog-legacy-shim.css -- Wave 42 Track D.

WHAT THIS IS

The blog family's 1,110 templates were re-homed from the legacy base
(templates/website/index.html) onto Design 2.0's marketing_base.html via the
new templates/website/blog_base.html. Their BODY markup was deliberately not
rewritten -- every article keeps its exact headings, paragraphs, images,
links and structured data. That markup is written against legacy class names
(.site-breadcrumb, .blog-single-area, .blog-details, .widget, .theme-btn, ...)
which used to be styled by static/css/style.css.

style.css is NOT loaded on these pages any more, and must not be: it is the
legacy visual system, and two of its rules are actively incompatible with a
Design 2.0 surface --

    body,html{background-color:#000}
    h1,h2,h3,h4,h5,h6{color:var(--color-white)}

-- so on marketing_base's light surface every heading in every article would
have rendered white-on-white. This file takes over style.css's job for
exactly these class names, rebuilt from tokens.css so it follows
prefers-color-scheme / data-theme like the rest of the design system.

SCOPE

Loaded only by templates/website/blog_base.html, i.e. only by the blog
family. Selector names look broad (.widget, .theme-btn) because they have to
match markup this track is not rewriting; the real boundary is the page-level
load, exactly the discipline blog-patterns.css already documents for itself.

RELATIONSHIP TO blog-patterns.css

blog-patterns.css (Wave 41 Track B) styles the two templates Track B
redesigned: the index's new "Latest From RideXpress" section and the CMS
article's byline / .rx-article-body / related posts / CTA. This file styles
what the other 1,108 templates -- and the legacy scaffolding of those same
two pages -- are built from. They are complementary, not overlapping; this
file is loaded second so where both name the same element, this one is the
fallback and Track B's is the specific treatment.
*/

/* ================= Spacing utilities =================
   style.css defined these; Bootstrap does not (its scale stops at 5).
   Reproduced against the token scale rather than the original pixel values
   -- 120px of vertical padding on a phone is most of a viewport. Deliberately
   NOT defining .pb-20 or .mb-30: both appear in this family's markup but were
   never defined in style.css either, so they are no-ops today and stay
   no-ops. */
.py-120 { padding-top: var(--rx-space-16); padding-bottom: var(--rx-space-16); }
.pb-120 { padding-bottom: var(--rx-space-16); }
.pb-80  { padding-bottom: var(--rx-space-12); }
.mb-10  { margin-bottom: var(--rx-space-2); }
.mb-20  { margin-bottom: var(--rx-space-5); }
.mb-50  { margin-bottom: var(--rx-space-12); }
.mt-20  { margin-top: var(--rx-space-5); }
@media (max-width: 768px) {
  .py-120 { padding-top: var(--rx-space-10); padding-bottom: var(--rx-space-10); }
  .pb-120 { padding-bottom: var(--rx-space-10); }
}

/* The legacy <main class="main"> wrapper is now a <div class="main"> (a real
   <main> cannot be nested inside marketing_base's own <main> -- see
   blog_base.html). Nothing else depended on it. */
.main { display: block; }

/* ================= Article page header band =================
   Every legacy article opens with
     <div class="site-breadcrumb" style="background: url(...)">
   i.e. the photo is an inline style on the element, so this band is
   unavoidably dark and its text must use the on-dark tokens. The overlay
   below is what makes the (fixed, shared) photo dark enough to read on. */
.site-breadcrumb {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--rx-space-16) var(--rx-space-6);
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
}
.site-breadcrumb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--rx-color-ink) 72%, transparent),
              color-mix(in srgb, var(--rx-color-ink) 88%, transparent));
}
/* color-mix has good but not universal support; this flat fallback is what a
   browser without it gets, and it is declared first so color-mix wins where
   it is understood. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .site-breadcrumb::before { background: var(--rx-color-hero-overlay); opacity: 0.82; }
}
.site-breadcrumb .breadcrumb-title {
  font-family: var(--rx-font-display);
  font-size: var(--rx-text-4xl);
  line-height: var(--rx-leading-tight);
  font-weight: var(--rx-weight-bold);
  color: var(--rx-color-text-on-dark);
  max-width: 22ch;
  margin: 0 auto var(--rx-space-4);
}
.site-breadcrumb .breadcrumb-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--rx-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--rx-text-sm);
  color: var(--rx-color-text-on-dark-muted);
}
.site-breadcrumb .breadcrumb-menu li { display: inline-flex; align-items: center; gap: var(--rx-space-2); }
/* style.css drew this separator with a Font Awesome 6 Pro glyph (\f101).
   Replaced with the same plain "/" the Design 2.0 .rx-breadcrumb component
   uses, so the trail no longer depends on an icon font loading. */
.site-breadcrumb .breadcrumb-menu li + li::before { content: "/"; color: var(--rx-color-text-on-dark-muted); }
.site-breadcrumb .breadcrumb-menu li a { color: var(--rx-color-text-on-dark-muted); text-decoration: none; }
.site-breadcrumb .breadcrumb-menu li a:hover { color: var(--rx-color-brand); }
.site-breadcrumb .breadcrumb-menu li.active { color: var(--rx-color-text-on-dark); }
@media (max-width: 768px) {
  .site-breadcrumb { padding: var(--rx-space-12) var(--rx-space-5); }
  .site-breadcrumb .breadcrumb-title { font-size: var(--rx-text-2xl); }
}

/* ================= Index hero (blog.html) =================
   blog-patterns.css already sets the family/weight on .rx-blog-hero
   .site-title; style.css owned the size, colour and the divider. */
.site-heading { position: relative; margin-bottom: var(--rx-space-10); }
.site-title-tagline {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: var(--rx-text-sm);
  font-weight: var(--rx-weight-semibold);
  color: var(--rx-color-brand-strong);
}
.site-title {
  font-family: var(--rx-font-display);
  font-size: var(--rx-text-4xl);
  line-height: var(--rx-leading-tight);
  font-weight: var(--rx-weight-bold);
  color: var(--rx-color-text);
  margin: var(--rx-space-3) 0 0;
}
.heading-divider {
  display: inline-block;
  width: 72px;
  height: 4px;
  margin-top: var(--rx-space-5);
  border-radius: var(--rx-radius-full);
  background: var(--rx-color-brand);
}

/* blog-patterns.css's #blog-container rules deliberately rely on .blog-item's
   own margin-bottom for row spacing (its own comment explains why a flex
   row-gap breaks against the pagination script's display:none toggling).
   That margin came from style.css, so it has to be restated here or the
   ~2,000 cards collapse against each other. */
#blog-container .blog-item { margin-bottom: var(--rx-space-6); }

/* ================= Article body =================
   Same long-form treatment blog-patterns.css gives the CMS article's
   .rx-article-body, applied to the class the other 1,108 templates use.
   Colours are the theme-aware tokens, not the on-dark ones: unlike before
   this wave, this content now sits on marketing_base's light surface. */
.blog-single-content img { border-radius: var(--rx-radius-lg); max-width: 100%; height: auto; }
.blog-thumb-img { margin-bottom: var(--rx-space-6); }
/* Wave 42 Track H -- the lead image must NOT be stretched to the column.
   This rule was `width: 100%`, which forced every article's lead image to
   fill the article column whatever its real size. style.css, which this
   file replaces, never had such a rule: its only sizing declaration for
   these images was the global `img { max-width: 100%; height: auto }`,
   i.e. shrink-to-fit and never upscale. So `width: 100%` was a behaviour
   change, not a re-implementation, and the article column also got wider
   in the re-base (730px -> 856px), which compounded it.

   Measured on /the-ultimate-guide-to-airport-taxi-services: a 450x450
   source rendered at 856x856 -- a 1.9x upscale of a flat illustration,
   filling more than a full viewport height before the article text
   started. 75 of the 102 blog articles whose lead image is a local file
   have a source narrower than 856px, upscaled by up to 2.31x.

   Restoring the legacy pair keeps wide images fitting the column and
   leaves small ones at their true size, sharp. They are centred rather
   than left in the column's top-left corner, so a lead image narrower
   than the column reads as deliberate instead of as a layout accident --
   the column got 126px wider in the re-base, so this gap is wider than
   the one legacy had. */
.blog-thumb-img img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.blog-details {
  color: var(--rx-color-text);
  font-family: var(--rx-font-body);
  font-size: var(--rx-text-lg);
  line-height: var(--rx-leading-loose);
  max-width: 72ch;
}
.blog-details-title {
  font-family: var(--rx-font-display);
  font-size: var(--rx-text-3xl);
  line-height: var(--rx-leading-tight);
  font-weight: var(--rx-weight-bold);
  color: var(--rx-color-text);
}
.blog-details h2, .blog-details h3, .blog-details h4, .blog-details h5, .blog-details h6 {
  font-family: var(--rx-font-display);
  color: var(--rx-color-text);
  line-height: var(--rx-leading-tight);
  font-weight: var(--rx-weight-semibold);
}
.blog-details h2 { font-size: var(--rx-text-2xl); margin: var(--rx-space-10) 0 var(--rx-space-4); }
.blog-details h3 { font-size: var(--rx-text-xl); margin: var(--rx-space-8) 0 var(--rx-space-3); }
.blog-details h4 { font-size: var(--rx-text-lg); margin: var(--rx-space-6) 0 var(--rx-space-2); }
.blog-details h5, .blog-details h6 { font-size: var(--rx-text-base); margin: var(--rx-space-5) 0 var(--rx-space-2); }
.blog-details p { margin: 0 0 var(--rx-space-5); }
.blog-details ul, .blog-details ol { margin: 0 0 var(--rx-space-5); padding-left: 1.4em; }
.blog-details ul li { list-style: disc; }
.blog-details ol li { list-style: decimal; }
.blog-details li { margin-bottom: var(--rx-space-2); }
.blog-details strong, .blog-details b { font-weight: var(--rx-weight-bold); color: var(--rx-color-text); }
/* Prose links. Theme-aware for the same reason blog-patterns.css documents
   on .rx-article-body a: a fixed --rx-color-brand-strong measures 2.70:1 on
   the dark surface.

   :where(.blog-details) rather than .blog-details -- deliberate, and found by
   measuring, not by taste. At (0,1,1) this rule outranked the design-system
   components that live inside the article column and carry their own colour:
   the gold .rx-marketing__cta button rendered gold-on-gold (2.50:1) because
   .rx-marketing__cta is only (0,1,0). :where() contributes no specificity, so
   this lands at (0,0,1) -- exactly where style.css's own `a{color:...}` sat
   before this wave, which is why the problem did not exist there. Any
   classed link (.rx-marketing__cta, .theme-btn, .rx-cta-btn, the tag chips)
   now correctly keeps its component colour. */
:where(.blog-details) a { color: var(--rx-color-accent-strong); text-decoration: underline; text-underline-offset: 2px; }
:where(.blog-details) a:hover { color: var(--rx-color-text); }
.blog-details hr { border: 0; border-top: 1px solid var(--rx-color-border); margin: var(--rx-space-8) 0; }
/* 1,470 of this family's content <div>s carry an inline
   style="text-align: justify". Justified text at this measure, in a
   variable-width face with no hyphenation, opens visible rivers -- which is
   exactly why Wave 41 Track B dropped justify from the CMS article template.
   An inline style can only be beaten by !important, and this is scoped to
   the article column. Presentation only: no text is added, removed or
   reordered. */
.blog-details [style*="justify"] { text-align: left !important; }

@media (max-width: 640px) {
  .blog-details { font-size: var(--rx-text-base); }
  .blog-details-title { font-size: var(--rx-text-2xl); }
  .blog-details h2 { font-size: var(--rx-text-xl); }
}

/* ---------- Colours the article markup hardcoded for a black page ----------
   Found by rendering, not by reading: 721 of these templates carry
   <h5 class="text-white"> in the article body (never in the dark header band
   -- checked), and a handful more set an inline white or legacy-gold colour.
   Every one of them was correct while style.css fixed the page background to
   #000; on Design 2.0's light surface they are white-on-white, or gold at
   2.24:1. Neutralised here rather than by editing 721 article templates.

   !important is unavoidable twice over: Bootstrap's own .text-white is
   !important (so this must be both more specific AND important), and an
   inline style can otherwise only be beaten by an important declaration.
   Scoped to the article column, so nothing outside it is affected. */
.blog-single-content .text-white,
.blog-details .text-white { color: var(--rx-color-text) !important; }

.blog-single-content [style*="color: #ffffff"],
.blog-single-content [style*="color:#ffffff"],
.blog-single-content [style*="color: #fff;"],
.blog-single-content [style*="color: white"],
.blog-single-content [style*="color:white"] { color: var(--rx-color-text) !important; }

/* #dab024e7 is the legacy gold (2.24:1 on white). --rx-color-brand-strong is
   tokens.css's documented text-on-light gold, same hue, 6.05:1. */
.blog-single-content [style*="color: #dab024e7"],
.blog-single-content [style*="color:#dab024e7"] { color: var(--rx-color-brand-strong) !important; }

.blog-single-content [style*="color: gray"] { color: var(--rx-color-text-muted) !important; }

/* ---------- Service-link chips under the article ---------- */
.blog-details-tags { display: flex; align-items: center; flex-wrap: wrap; gap: var(--rx-space-3); }
.blog-details-tags h5 {
  margin: 0;
  font-family: var(--rx-font-display);
  font-size: var(--rx-text-base);
  color: var(--rx-color-text);
}
.blog-details-tags ul { display: flex; flex-wrap: wrap; gap: var(--rx-space-2); margin: 0; padding: 0; list-style: none; }
.blog-details-tags ul li { margin: 0; list-style: none; }
.blog-details-tags ul a {
  display: inline-block;
  padding: 6px 16px;
  border-radius: var(--rx-radius-full);
  background: var(--rx-color-surface-alt);
  border: 1px solid var(--rx-color-border);
  color: var(--rx-color-text);
  font-size: var(--rx-text-sm);
  text-decoration: none;
  transition: background-color var(--rx-motion-fast) var(--rx-ease-standard),
              border-color var(--rx-motion-fast) var(--rx-ease-standard);
}
.blog-details-tags ul a:hover { background: var(--rx-color-brand); border-color: var(--rx-color-brand); color: var(--rx-color-ink); }

/* ================= Comment form =================
   Pre-existing and non-functional (action="#", no backend) -- Wave 41 Track B
   deliberately neither wired it up nor removed it, and neither does this
   track. Restyled only. */
.blog-comments { margin-bottom: var(--rx-space-12); }
.blog-comments-form {
  margin-top: var(--rx-space-12);
  padding: var(--rx-space-6);
  background: var(--rx-color-surface-alt);
  border: 1px solid var(--rx-color-border);
  border-radius: var(--rx-radius-lg);
}
.blog-comments-form .main-heading,
.blog-comments h3 {
  font-family: var(--rx-font-display);
  font-size: var(--rx-text-xl);
  font-weight: var(--rx-weight-bold);
  color: var(--rx-color-text);
  margin: 0 0 var(--rx-space-5);
}
.blog-comments-form .form-group { margin-bottom: var(--rx-space-4); }

/* Form controls: Bootstrap's .form-control supplies the box model; these
   restate only the colours/edges so inputs match .rx-input's look without
   renaming a single field. */
.blog-comments-form .form-control,
.widget .form-control {
  background: var(--rx-color-surface);
  color: var(--rx-color-text);
  border: 1px solid var(--rx-color-border-strong);
  border-radius: var(--rx-radius-md);
  padding: 11px 14px;
  box-shadow: none;
}
.blog-comments-form .form-control:focus,
.widget .form-control:focus {
  border-color: var(--rx-color-brand);
  box-shadow: 0 0 0 3px var(--rx-color-focus-ring);
  outline: none;
}
.blog-comments-form .form-control::placeholder,
.widget .form-control::placeholder { color: var(--rx-color-text-muted); }

/* ================= Sidebar widgets ================= */
.sidebar { display: block; }
.widget {
  background: var(--rx-color-surface);
  border: 1px solid var(--rx-color-border);
  border-radius: var(--rx-radius-lg);
  padding: var(--rx-space-5);
  margin-bottom: var(--rx-space-5);
}
.widget .widget-title {
  font-family: var(--rx-font-display);
  font-size: var(--rx-text-lg);
  font-weight: var(--rx-weight-semibold);
  color: var(--rx-color-text);
  margin: 0 0 var(--rx-space-4);
}
/* Sidebar body links -- e.g. the "Related Blogs" widget 156 of these
   templates carry. style.css's own `a{color:var(--theme-color)}` used to
   colour them; without it they fell back to the browser's default blue,
   which is legible but off-brand. The more specific .social-share-link /
   .tag-list rules below still win for those two widgets. */
.widget a { color: var(--rx-color-accent-strong); text-decoration: underline; text-underline-offset: 2px; }
.widget a:hover { color: var(--rx-color-text); }

.widget .search-form { position: relative; display: flex; }
.widget .search-form .form-control { flex: 1; padding-right: 46px; }
.widget .search-form button {
  position: absolute;
  right: 4px;
  top: 4px;
  bottom: 4px;
  width: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--rx-radius-md);
  background: transparent;
  color: var(--rx-color-brand-strong);
  cursor: pointer;
}
.widget .search-form button:hover { background: var(--rx-color-surface-alt); }
.widget .social-share-link { display: flex; flex-wrap: wrap; gap: var(--rx-space-2); }
.widget .social-share-link a {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rx-color-brand);
  border-radius: var(--rx-radius-full);
  color: var(--rx-color-brand-strong);
  text-decoration: none;
  transition: background-color var(--rx-motion-fast) var(--rx-ease-standard),
              color var(--rx-motion-fast) var(--rx-ease-standard);
}
.widget .social-share-link a:hover { background: var(--rx-color-brand); color: var(--rx-color-ink); }
.widget .tag-list { display: flex; flex-wrap: wrap; gap: var(--rx-space-2); }
.widget .tag-list a {
  display: inline-block;
  padding: 5px 14px;
  border-radius: var(--rx-radius-full);
  background: var(--rx-color-surface-alt);
  border: 1px solid var(--rx-color-border);
  color: var(--rx-color-text);
  font-size: var(--rx-text-sm);
  text-decoration: none;
}
.widget .tag-list a:hover { background: var(--rx-color-brand); border-color: var(--rx-color-brand); color: var(--rx-color-ink); }

/* ================= .theme-btn =================
   The family's one button class, used by the comment form's submit and by
   every card's "Read More". Matches .rx-btn--primary's treatment without
   renaming markup. blog-patterns.css has its own, more specific rule for the
   index cards (#blog-container .blog-item-info .theme-btn) which still wins
   there -- intentional, that one is sized for a card footer. */
.theme-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--rx-space-2);
  padding: 11px 22px;
  border: none;
  border-radius: var(--rx-radius-md);
  background: var(--rx-color-brand);
  color: var(--rx-color-ink);
  font-family: var(--rx-font-body);
  font-size: var(--rx-text-sm);
  font-weight: var(--rx-weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--rx-motion-fast) var(--rx-ease-standard);
}
.theme-btn:hover { background: var(--rx-color-brand-strong); color: var(--rx-color-white); }
.theme-btn:focus-visible { outline: 2px solid var(--rx-color-focus-ring); outline-offset: 2px; }

/* ================= Floating lead-capture widgets =================
   Ported from templates/website/index.html (the floating call button and
   enquiry modal) so this family keeps the two contact channels it has today.
   The WhatsApp float is marketing_base's, not repeated here. Positions are
   stacked above it deliberately -- marketing_base puts WhatsApp at
   bottom:24px/right:24px. */
.rx-blog-call-float,
.rx-blog-enquiry-float {
  position: fixed;
  right: 24px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--rx-color-border);
  border-radius: var(--rx-radius-full);
  background: var(--rx-color-surface);
  box-shadow: var(--rx-shadow-md);
  cursor: pointer;
  z-index: var(--rx-z-sticky);
  transition: transform var(--rx-motion-fast) var(--rx-ease-standard);
}
.rx-blog-call-float { bottom: 152px; color: var(--rx-color-brand-strong); font-size: 22px; text-decoration: none; }
/* The enquiry icon asset is a PNG with a baked-in white background
   (static/img/icon/Quill_Paper_Icon_with_White_Background.png -- the filename
   says so). Pinning this one button to white rather than the theme surface
   stops it reading as a white tile floating on the dark theme. */
.rx-blog-enquiry-float { bottom: 88px; overflow: hidden; background: var(--rx-color-white); }
.rx-blog-enquiry-float img { width: 100%; height: 100%; object-fit: contain; }
.rx-blog-call-float:hover,
.rx-blog-enquiry-float:hover { transform: scale(1.06); }
.rx-blog-call-float:focus-visible,
.rx-blog-enquiry-float:focus-visible { outline: 2px solid var(--rx-color-focus-ring); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .rx-blog-call-float, .rx-blog-enquiry-float { transition: none; }
  .rx-blog-call-float:hover, .rx-blog-enquiry-float:hover { transform: none; }
}
/* Legacy hid the enquiry float below 1024px to stop the three buttons
   stacking into each other on a phone; same rule, same breakpoint. */
@media (max-width: 1024px) {
  .rx-blog-enquiry-float { display: none; }
  .rx-blog-call-float { bottom: 88px; }
}

.rx-blog-modal {
  position: fixed;
  inset: 0;
  z-index: var(--rx-z-modal);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--rx-space-10) var(--rx-space-4);
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.65);
}
.rx-blog-modal[hidden] { display: none; }
.rx-blog-modal__content {
  position: relative;
  width: 100%;
  max-width: 640px;
  padding: var(--rx-space-8);
  background: var(--rx-color-surface);
  border-radius: var(--rx-radius-lg);
  box-shadow: var(--rx-shadow-lg);
}
.rx-blog-modal__content h2 {
  font-family: var(--rx-font-display);
  font-size: var(--rx-text-xl);
  font-weight: var(--rx-weight-bold);
  color: var(--rx-color-text);
  margin: 0 0 var(--rx-space-5);
}
.rx-blog-modal__close {
  position: absolute;
  top: var(--rx-space-3);
  right: var(--rx-space-4);
  border: none;
  background: transparent;
  font-size: 26px;
  line-height: 1;
  color: var(--rx-color-text-muted);
  cursor: pointer;
}
.rx-blog-modal__close:hover { color: var(--rx-color-text); }
.rx-blog-modal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rx-space-4); }
@media (max-width: 640px) { .rx-blog-modal__grid { grid-template-columns: 1fr; } }
.rx-blog-modal input,
.rx-blog-modal select,
.rx-blog-modal textarea {
  width: 100%;
  padding: 11px 14px;
  background: var(--rx-color-surface);
  color: var(--rx-color-text);
  border: 1px solid var(--rx-color-border-strong);
  border-radius: var(--rx-radius-md);
  font-family: var(--rx-font-body);
  font-size: var(--rx-text-base);
}
.rx-blog-modal textarea { margin-top: var(--rx-space-4); resize: vertical; }
.rx-blog-modal input:focus,
.rx-blog-modal select:focus,
.rx-blog-modal textarea:focus {
  border-color: var(--rx-color-brand);
  box-shadow: 0 0 0 3px var(--rx-color-focus-ring);
  outline: none;
}
.rx-blog-modal__actions { margin-top: var(--rx-space-5); display: flex; justify-content: flex-end; }
.rx-blog-modal__status { margin: var(--rx-space-3) 0 0; color: var(--rx-color-text-muted); font-size: var(--rx-text-sm); min-height: 1.2em; }