/*
 * Project Report Generator — React wizard design system.
 * Bootstrap 5.3 (loaded globally by the theme) provides the macro grid; these
 * scoped .rw-* classes provide the premium card/stepper/field styling.
 * Attached only on /project-report-generator via techprosolutions/report_wizard.
 */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --navy:#1C3557; --navy-deep:#12253F; --ink:#0f1e33;
  --green:#1D9E75; --green-dark:#167A5B; --green-soft:#E8F5EF; --green-bright:#3CB944;
  --green-ring:rgba(29,158,117,.18);
  --muted:#64748b; --muted-2:#94a3b8;
  --line:#edf1f5; --field:#f5f7fa; --field-hover:#eef2f6;
  --shadow-sm:0 1px 2px rgba(16,32,55,.04), 0 1px 3px rgba(16,32,55,.07);
  --shadow-md:0 8px 22px -8px rgba(16,32,55,.16), 0 2px 6px rgba(16,32,55,.05);
  --shadow-lg:0 22px 48px -18px rgba(16,32,55,.30);
  --r-lg:16px; --r-md:12px; --r-sm:10px;
}

body {
  background:#f4f6f9;
  color:var(--navy);
  font-family:'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ============================================================
   PAGE HEADER
   ============================================================ */
.rw-crumbs { font-size:.78rem; color:var(--muted-2); font-weight:500; }
.rw-crumbs a { color:var(--muted); text-decoration:none; transition:color .15s; }
.rw-crumbs a:hover { color:var(--green); }
.rw-h1 { font-size:1.7rem; font-weight:800; letter-spacing:-.02em; color:var(--navy); margin:.35rem 0 .25rem; }
.rw-lead { color:var(--muted); font-size:.92rem; margin:0; }
.rw-pill {
  display:inline-flex; align-items:center; gap:.4rem; font-size:.74rem; font-weight:700;
  color:var(--green-dark); background:var(--green-soft); border:1px solid rgba(29,158,117,.16);
  padding:.35rem .7rem; border-radius:999px;
}

/* ============================================================
   CARDS
   ============================================================ */
.rw-card {
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .28s ease, border-color .28s ease;
}
.rw-card:hover { box-shadow:var(--shadow-md); border-color:#e3e9f0; }
.rw-p { padding:1.6rem; }
@media (min-width:992px){ .rw-p { padding:1.75rem; } }

.rw-hd { display:flex; align-items:center; gap:.85rem; margin-bottom:1.35rem; }
.rw-chip {
  width:42px; height:42px; border-radius:12px; flex:none;
  background:var(--green-soft); color:var(--green);
  display:flex; align-items:center; justify-content:center;
}
.rw-title { font-size:1.06rem; font-weight:700; letter-spacing:-.01em; color:var(--navy); margin:0; }
.rw-sub { font-size:.79rem; color:var(--muted); margin:.12rem 0 0; }
.rw-eyebrow { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.13em; color:var(--muted-2); }

/* ============================================================
   FORM FIELDS
   ============================================================ */
.rw-label { font-size:.82rem; font-weight:600; color:var(--navy); margin-bottom:.4rem; display:block; }
.rw-field {
  width:100%; background:var(--field); border:1.5px solid transparent; border-radius:var(--r-sm);
  padding:.72rem .9rem; font-size:.9rem; color:var(--navy); line-height:1.3; outline:none;
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.rw-field::placeholder { color:#aeb8c4; }
.rw-field:hover { background:var(--field-hover); }
.rw-field:focus { background:#fff; border-color:var(--green); box-shadow:0 0 0 4px var(--green-ring); }
select.rw-field {
  appearance:none; cursor:pointer; padding-right:2.4rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .85rem center; background-size:1rem;
}
.rw-field--upper { text-transform:uppercase; letter-spacing:.06em; }
.rw-field--upper::placeholder { text-transform:none; letter-spacing:normal; }

.rw-affix { position:relative; }
.rw-affix__pre, .rw-affix__suf {
  position:absolute; top:0; bottom:0; display:flex; align-items:center;
  color:var(--muted); font-size:.9rem; font-weight:600; pointer-events:none;
}
.rw-affix__pre { left:.9rem; }
.rw-affix__suf { right:.95rem; }
.rw-affix--pre .rw-field { padding-left:1.95rem; }
.rw-affix--suf .rw-field { padding-right:2.4rem; }

.rw-note {
  display:flex; gap:.55rem; align-items:flex-start; margin-top:1.25rem;
  background:var(--green-soft); border:1px solid rgba(29,158,117,.15); border-radius:var(--r-md);
  padding:.8rem .95rem; font-size:.78rem; color:var(--green-dark); line-height:1.55;
}
.rw-note svg { flex:none; margin-top:1px; }

.rw-total {
  display:flex; align-items:center; justify-content:space-between; margin-top:1.35rem;
  background:linear-gradient(180deg,#fbfefc,var(--green-soft));
  border:1px dashed rgba(29,158,117,.4); border-radius:var(--r-md); padding:.9rem 1.1rem;
}
.rw-total__k { font-size:.85rem; font-weight:600; color:var(--green-dark); }
.rw-total__v { font-size:1.05rem; font-weight:800; color:var(--navy); letter-spacing:-.01em; }

/* dropzone (step 1 placeholder) */
.rw-drop {
  border:2px dashed #dbe2ea; border-radius:var(--r-md); background:#fafbfd;
  padding:2.4rem 1rem; text-align:center; transition:border-color .2s, background .2s;
}
.rw-drop:hover { border-color:var(--green); background:var(--green-soft); }
.rw-drop__ic {
  width:52px; height:52px; border-radius:50%; background:#fff; color:var(--muted-2);
  display:flex; align-items:center; justify-content:center; margin:0 auto .6rem; border:1px solid var(--line);
}

/* format picker (selectable cards) */
.rw-divider { height:1px; background:var(--line); margin:1.5rem 0; border:0; }
.rw-fmt { display:grid; grid-template-columns:1fr; gap:.6rem; }
@media (min-width:576px){ .rw-fmt { grid-template-columns:repeat(3,1fr); } }
.rw-fmt__opt {
  position:relative; display:block; cursor:pointer; background:#fff;
  border:1.5px solid var(--line); border-radius:var(--r-md); padding:.85rem .9rem;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .15s ease;
}
.rw-fmt__opt:hover { border-color:#d6dee7; background:#fafbfd; transform:translateY(-1px); }
.rw-fmt__opt input { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.rw-fmt__opt:focus-within { box-shadow:0 0 0 4px var(--green-ring); border-color:var(--green); }
.rw-fmt__opt.is-on { border-color:var(--green); background:var(--green-soft); box-shadow:0 0 0 4px var(--green-ring); }
.rw-fmt__name { display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-size:.85rem; font-weight:700; color:var(--navy); }
.rw-fmt__desc { font-size:.72rem; color:var(--muted); margin-top:.25rem; line-height:1.45; }
.rw-fmt__tick {
  width:18px; height:18px; border-radius:50%; flex:none; color:#fff;
  border:1.5px solid #cfd8e3; background:#fff;
  display:flex; align-items:center; justify-content:center; transition:all .2s ease;
}
.rw-fmt__opt.is-on .rw-fmt__tick { background:var(--green); border-color:var(--green); }

/* dropzone — file selected + processing states */
.rw-dropwrap { position:relative; }
.rw-drop label, label.rw-drop { display:block; cursor:pointer; }
.rw-file {
  display:flex; align-items:center; gap:.9rem; padding:1rem 1.1rem;
  border:2px dashed rgba(29,158,117,.5); border-radius:var(--r-md); background:var(--green-soft);
}
.rw-file__ic {
  position:relative; width:46px; height:46px; border-radius:10px; flex:none;
  background:#fff; color:var(--green); display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 2px rgba(16,32,55,.06);
}
.rw-file__tick {
  position:absolute; right:-5px; bottom:-5px; width:18px; height:18px; border-radius:50%;
  background:var(--green); color:#fff; border:2px solid #fff; display:flex; align-items:center; justify-content:center;
}
.rw-file__name { font-size:.86rem; font-weight:700; color:var(--navy); word-break:break-all; }
.rw-file__meta { font-size:.72rem; color:var(--muted); margin-top:.1rem; }
.rw-linkbtn {
  display:inline-flex; align-items:center; gap:.35rem; border:none; background:transparent;
  color:var(--green); font-weight:600; font-size:.82rem; cursor:pointer; padding:.4rem .6rem; border-radius:8px;
  transition:background .15s ease, color .15s ease;
}
.rw-linkbtn:hover { background:rgba(29,158,117,.12); color:var(--green-dark); }
.rw-ovl {
  position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem;
  background:rgba(255,255,255,.8); backdrop-filter:blur(1px); border-radius:var(--r-md);
}
.rw-ovl__t { font-size:.85rem; font-weight:700; color:var(--navy); }
.rw-ovl__s { font-size:.72rem; color:var(--muted); }
.rw-ok { display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:600; color:var(--green-dark); }
.rw-baderr { font-size:.78rem; font-weight:600; color:#b42318; }

/* sidebar layout badge */
.rw-badge {
  display:inline-flex; align-items:center; gap:.3rem; font-size:.68rem; font-weight:700; white-space:nowrap;
  color:var(--green-dark); background:var(--green-soft); border:1px solid rgba(29,158,117,.18);
  padding:.25rem .55rem; border-radius:999px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.rw-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border:none; cursor:pointer; font-weight:600; font-size:.9rem; border-radius:var(--r-sm);
  padding:.72rem 1.25rem; line-height:1;
  transition:transform .14s ease, box-shadow .22s ease, background .2s ease, color .2s ease;
}
.rw-btn:focus-visible { outline:none; box-shadow:0 0 0 4px var(--green-ring); }
.rw-btn:active { transform:translateY(1px) scale(.99); }
.rw-btn--primary { background:var(--green); color:#fff; box-shadow:0 8px 16px -8px rgba(29,158,117,.6); }
.rw-btn--primary:hover { background:var(--green-dark); transform:translateY(-1px); box-shadow:0 12px 22px -10px rgba(29,158,117,.7); }
.rw-btn--ghost { background:transparent; color:var(--muted); }
.rw-btn--ghost:hover { background:#f0f3f7; color:var(--navy); }
.rw-btn.is-hidden { visibility:hidden; pointer-events:none; }

/* ============================================================
   PROGRESS STEPPER
   ============================================================ */
.rw-prog { height:6px; background:var(--line); border-radius:999px; overflow:hidden; margin-bottom:1.4rem; }
.rw-prog__fill {
  height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--green),var(--green-bright));
  transition:width .45s cubic-bezier(.4,0,.2,1);
}

.rw-steps { position:relative; list-style:none; margin:0; padding:0; }
.rw-step { position:relative; padding-bottom:1.55rem; }
.rw-step:last-child { padding-bottom:0; }
.rw-step__line {
  position:absolute; left:21px; top:40px; bottom:2px; width:2px; transform:translateX(-50%);
  background:var(--line); transition:background .3s ease;
}
.rw-step.is-complete .rw-step__line { background:linear-gradient(var(--green),rgba(29,158,117,.25)); }

.rw-step__btn {
  display:flex; gap:.9rem; align-items:flex-start; width:100%; text-align:left;
  background:transparent; border:none; padding:.4rem .55rem; border-radius:12px; cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.rw-step__btn:focus-visible { outline:none; box-shadow:0 0 0 3px var(--green-ring); }
.rw-step.is-clickable .rw-step__btn:hover { background:#f4f7fa; transform:translateX(2px); }
.rw-step.is-active .rw-step__btn { background:var(--green-soft); }
.rw-step.is-active.is-clickable .rw-step__btn:hover { background:#dcf1e8; }
.rw-step__btn:disabled { cursor:default; }

.rw-step__marker {
  width:42px; height:42px; border-radius:50%; flex:none; position:relative; z-index:1; background:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem;
  transition:all .25s ease;
}
.rw-step.is-complete .rw-step__marker { background:var(--green); color:#fff; box-shadow:0 5px 12px -4px rgba(29,158,117,.55); }
.rw-step.is-active .rw-step__marker { background:#fff; border:2px solid var(--green); box-shadow:0 0 0 5px var(--green-ring); }
.rw-step.is-upcoming .rw-step__marker { background:#fff; border:1.5px solid #dce3ec; color:var(--muted-2); }
.rw-step__dot { width:11px; height:11px; border-radius:50%; background:var(--green); animation:rw-pulse 1.9s ease-in-out infinite; }

.rw-step__meta { font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.11em; margin:0 0 .12rem; color:var(--muted-2); }
.rw-step.is-active .rw-step__meta { color:var(--green); }
.rw-step__title { font-size:.93rem; font-weight:700; color:var(--navy); margin:0; }
.rw-step.is-upcoming .rw-step__title { color:var(--muted-2); font-weight:600; }

@keyframes rw-pulse { 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(.65); opacity:.55; } }

/* ============================================================
   NAV FOOTER
   ============================================================ */
.rw-nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.rw-nav__count { font-size:.76rem; font-weight:600; color:var(--muted-2); }

/* ============================================================
   RIGHT SIDEBAR
   ============================================================ */
@media (min-width: 992px) {
  .rw-sticky { position:sticky; top:1.5rem; }
}
@media (max-width: 991.98px) {
  .rw-sticky { position:static !important; top:auto !important; }
}

/* ---- Sticky left rail ----
   position:sticky needs TWO things the theme was breaking:

   (a) NO ancestor may establish a scroll/clip context. The theme clamps page
       width with `.boxed_wrapper{overflow:hidden !important}` (style.css:117,
       reinforced in responsive.css), which silently kills position:sticky for
       the entire app. `overflow:hidden` creates a scroll container;
       `overflow-x:clip` + `overflow-y:visible` clips horizontally WITHOUT
       creating one, so vertical sticky still works. The `html body` prefix
       outranks the theme's single-class !important rules regardless of CSS
       load order (component group loads BEFORE the theme group, so a same-
       specificity !important would lose). This file loads only on the tool
       routes, so the override is page-scoped. Mirrors the theme's own fix in
       save-pay-file.css.

   (b) A content-height flex item — a Bootstrap column stretches to the row's
       height by default (align-items:stretch), leaving sticky nothing to travel
       against; align-self:flex-start shrinks the column to its content. */
html body .boxed_wrapper,
html body .page,
html body #main-wrapper,
html body .site-wrapper-reveal,
html body .layout-content,
html body .layout-content--full,
html body .etd-report-wizard,
html body #report-wizard-root,
html body #balance-sheet-root {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

@media (min-width: 992px) {
  .rw-col-sticky {
    position: sticky;
    top: 2rem;
    align-self: flex-start;
  }
}
@media (max-width: 991.98px) {
  .rw-col-sticky {
    position: static !important;
    top: auto !important;
    align-self: auto !important;
  }
}

.rw-sec { display:flex; align-items:center; gap:.75rem; padding:.5rem .55rem; border-radius:10px; transition:background .2s ease; }
.rw-sec:hover { background:#f6f8fa; }
.rw-sec__ic { width:34px; height:34px; border-radius:9px; flex:none; background:var(--green-soft); color:var(--green); display:flex; align-items:center; justify-content:center; }
.rw-sec__label { font-size:.86rem; font-weight:600; color:var(--navy); }
.rw-sec__check { margin-left:auto; color:var(--green); opacity:.65; }

.rw-link { display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem; font-weight:600; color:var(--green); text-decoration:none; transition:color .15s; }
.rw-link:hover { color:var(--green-dark); text-decoration:underline; text-underline-offset:3px; }

.rw-dl__label { font-size:.82rem; font-weight:800; text-transform:uppercase; letter-spacing:.16em; color:var(--navy); }
.rw-dl__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-top:1rem; }
.rw-dlbtn {
  display:flex; flex-direction:column; align-items:center; gap:.3rem; padding:.9rem .4rem;
  border:none; cursor:pointer; border-radius:var(--r-md); color:#fff; font-weight:700; font-size:.78rem;
  transition:transform .15s ease, box-shadow .22s ease, background .2s ease;
}
.rw-dlbtn small { font-weight:500; font-size:.64rem; opacity:.82; }
.rw-dlbtn:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.rw-dlbtn:active { transform:translateY(0); }
.rw-dlbtn:focus-visible { outline:none; box-shadow:0 0 0 4px var(--green-ring); }
.rw-dlbtn--pdf, .rw-dlbtn--excel { background:var(--green); }
.rw-dlbtn--pdf:hover, .rw-dlbtn--excel:hover { background:var(--green-dark); }
.rw-dlbtn--word { background:var(--navy); }
.rw-dlbtn--word:hover { background:var(--navy-deep); }
.rw-dl__foot { display:flex; align-items:center; gap:.45rem; margin-top:.9rem; font-size:.72rem; color:var(--muted); }
.rw-dlbtn:disabled { cursor:not-allowed; background:#eef1f5; color:#aab4c0; box-shadow:none; transform:none; }
.rw-dlbtn:disabled small { color:#c2ccd6; }
.rw-dlgate { display:flex; align-items:center; justify-content:center; gap:.35rem; margin-top:.8rem; font-size:.72rem; color:var(--muted-2); }

/* spinner + status */
.rw-spin { animation:rw-spin .7s linear infinite; }
@keyframes rw-spin { to { transform:rotate(360deg); } }
.rw-btn--primary:disabled { opacity:.85; cursor:progress; transform:none; box-shadow:0 6px 14px -8px rgba(29,158,117,.5); }
.rw-alert { display:flex; gap:.5rem; align-items:flex-start; background:#fff3f2; border:1px solid #ffd7d3; color:#b42318; border-radius:var(--r-md); padding:.75rem .95rem; font-size:.8rem; line-height:1.5; }

/* ============================================================
   STEP TRANSITION
   ============================================================ */
.rw-fade { animation:rw-fade .38s cubic-bezier(.4,0,.2,1); }
@keyframes rw-fade { from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ============================================================
   FULL-WIDTH HOST (route: /project-report-generator)
   The theme caps .container at 1170px and its content wrappers can reserve
   sidebar space, squeezing the 3-column app into a narrow left column. This
   file loads ONLY on this route, so these overrides are safe + page-scoped.
   ============================================================ */
#main-wrapper,
.site-wrapper-reveal,
.layout-content,
.layout-content--full {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.etd-report-wizard { display:block; width:100%; }

/* Lift the app's own Bootstrap .container past the theme's 1170px cap and
   re-centre it. Class-based so it covers BOTH the Project Report
   (#report-wizard-root) and Balance Sheet (#balance-sheet-root) apps, which
   share the .etd-report-wizard host class. */
.etd-report-wizard .container {
  max-width: 1280px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
/* Belt-and-braces: make sure the Bootstrap row/gutters aren't flattened by any
   theme .row override, so the columns actually sit side by side. */
.etd-report-wizard .row { display:flex; flex-wrap:wrap; }

/* ============================================================
   SINGLE-PAGE FORM — new components + theme colour accents
   ============================================================ */

/* Colour accents on the section cards (a thin top bar in the brand colours) */
.rw-card--accent-green { border-top:3px solid var(--green); }
.rw-card--accent-navy  { border-top:3px solid var(--navy); }

/* Header chip colour variants */
.rw-chip--green { background:var(--green-soft); color:var(--green-dark); }
.rw-chip--navy  { background:rgba(28,53,87,.08); color:var(--navy); }

/* Left column — table of contents / scroll-spy nav */
.rw-toc { display:flex; flex-direction:column; gap:.25rem; }
.rw-toc__item {
  display:flex; align-items:center; gap:.6rem; padding:.55rem .7rem; border-radius:var(--r-sm);
  color:var(--muted); font-size:.86rem; font-weight:600; text-decoration:none;
  border-left:3px solid transparent; transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.rw-toc__item:hover { background:#f6f8fb; color:var(--navy); }
.rw-toc__item.is-active { background:var(--green-soft); color:var(--green-dark); border-left-color:var(--green); }
.rw-toc__ic { display:flex; color:currentColor; }
.rw-tip {
  display:flex; gap:.5rem; align-items:flex-start; margin-top:1rem; padding:.7rem .8rem;
  background:rgba(28,53,87,.05); border-radius:var(--r-sm); font-size:.75rem; line-height:1.5; color:var(--muted);
}
.rw-tip svg { color:var(--green); flex:none; margin-top:1px; }

/* Multi-file list */
.rw-files { display:flex; flex-direction:column; gap:.55rem; }
.rw-iconbtn {
  border:none; background:transparent; color:var(--muted-2); cursor:pointer; padding:.4rem;
  border-radius:8px; display:inline-flex; transition:background .15s ease, color .15s ease;
}
.rw-iconbtn:hover { background:#fdeceb; color:#b42318; }
.rw-addmore {
  display:inline-flex; align-items:center; gap:.4rem; align-self:flex-start; cursor:pointer;
  font-size:.8rem; font-weight:600; color:var(--green); padding:.45rem .7rem; border-radius:8px;
  border:1px dashed rgba(29,158,117,.4); transition:background .15s ease;
}
.rw-addmore:hover { background:var(--green-soft); }
.rw-addmore input { display:none; }

/* Generate bar (bottom of the form column) */
.rw-genbar {
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:1.15rem 1.4rem;
  background:linear-gradient(120deg, var(--navy) 0%, var(--navy-deep) 100%); color:#fff;
}
.rw-genbar__txt { display:flex; flex-direction:column; }
.rw-genbar__txt strong { font-size:1rem; font-weight:700; }
.rw-genbar__txt span { font-size:.8rem; color:rgba(255,255,255,.7); }
.rw-btn--lg { padding:.8rem 1.4rem; font-size:.95rem; }

/* Download card gets a subtle green wash once the report is ready */
.rw-dl.is-ready { background:linear-gradient(180deg, var(--green-soft) 0%, #fff 55%); border-color:rgba(29,158,117,.25); }

/* Preview panel */
.rw-preview { padding:0; overflow:hidden; }
.rw-preview__hd { display:flex; align-items:center; gap:.8rem; padding:1.1rem 1.4rem; border-bottom:1px solid var(--line); }
.rw-preview__frame { display:block; width:100%; height:78vh; min-height:520px; border:0; background:#fff; }
.rw-preview__loading {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8rem;
  height:340px; color:var(--muted); font-weight:600;
}