/* ============================================================
   QuoTrak — app demos
   Small, animated pictures of the app, drawn in its own colours (see the
   --app-* tokens in builder.css): an app window with the navy sidebar, and
   the cards that go inside it (quotes, the Internal Workshop, time log,
   payment plan, pay screen, catalog). Used by the home page runthrough and
   the industry pages. Each demo's markup is its finished state; a script
   adds .rt-play and switches [data-at] parts on (.is-on) over time, so
   without JS or with reduced motion the finished demo shows.
   ============================================================ */

/* Line-item cost chips */
.hq-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.hq-chip {
  font-size: 10.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  padding: 0 6px;
  border: 1px solid;
  border-radius: 5px;
  white-space: nowrap;
}
.hq-chip--labour { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.hq-chip--materials { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.hq-chip--fees { background: #f8fafc; color: #475569; border-color: #e2e8f0; }


/* The demo sits in a small app window: navy sidebar, app background. */
.rt-stage { position: relative; container-type: inline-size; padding-bottom: 30px; display: flex; flex-direction: column; }
.rt-app {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  border-radius: 12px;
  overflow: hidden;
  background: #e9eef4;
  border: 1px solid #c7d2e0;
  box-shadow: 0 16px 40px rgba(0,48,71,0.16);
  flex: 1;
}
.rt-app-side {
  background: #003047;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
}
.rt-app-logo { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, #f4a825, #e07b1a); margin-bottom: 8px; }
.rt-app-side i { position: relative; width: 20px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.22); }
.rt-app-side i.is-on { background: #f4a825; }
.rt-app-side i.is-on::before { content: ""; position: absolute; left: -12px; top: -7px; width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: #f4a825; }
.rt-app-main { padding: 16px; display: flex; align-items: center; }
.rt-demo { width: 100%; color: #081a30; text-align: left; }
.rt-split { display: grid; grid-template-columns: minmax(0, 1fr) 182px; gap: 12px; align-items: start; }
.rt-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rt-split--pay { grid-template-columns: 190px minmax(0, 1fr); align-items: center; }
.rt-stack { display: flex; flex-direction: column; gap: 12px; max-width: 440px; margin: 0 auto; }
.rt-col { display: flex; flex-direction: column; gap: 10px; }
@container (max-width: 500px) {
  .rt-split, .rt-split--pay { grid-template-columns: 1fr; }
}
@container (max-width: 440px) {
  .rt-split--even { grid-template-columns: 1fr; }
}

.rt-card {
  background: #fafafa;
  border: 1px solid rgba(199,210,224,0.8);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(8,26,48,0.06);
  overflow: hidden;
}
.rt-card-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; padding: 11px 12px 8px; }
.rt-title-ico { display: inline-flex; align-items: center; gap: 6px; }
.rt-title-ico svg { width: 14px; height: 14px; color: #5b6b7f; }
.rt-doc-head { padding: 11px 12px 10px; border-bottom: 1px solid #dbe3ee; background: rgba(238,242,247,0.6); }
.rt-doc-meta { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #5b6b7f; margin-bottom: 2px; }
.rt-doc-title { display: flex; justify-content: space-between; gap: 8px; font-size: 15.5px; font-weight: 700; letter-spacing: -0.2px; }
.rt-doc-total { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 12px; border-top: 1px solid #dbe3ee; font-size: 12px; color: #5b6b7f; }
.rt-doc-total b { font-size: 15px; color: #081a30; font-variant-numeric: tabular-nums; }

.rt-pill {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border: 1px solid;
  border-radius: 5px;
  padding: 0 6px;
  white-space: nowrap;
  line-height: 1.6;
}
.rt-pill--muted { background: #eef2f7; color: #081a30; border-color: #dbe3ee; }
.rt-pill--green { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.rt-pill--blue { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.rt-green { color: #16a34a; }

.rt-btn {
  display: inline-block;
  background: #f4a825;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 7px;
  padding: 6px 11px;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(181,122,15,0.4);
}
.rt-btn--block { display: block; text-align: center; padding: 9px 10px; font-size: 13px; }

/* 1. Quote: line items with navy header bars, beside the Internal Workshop */
.rt-items { list-style: none; padding: 10px 12px 2px; display: flex; flex-direction: column; gap: 8px; }
.rt-item-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: #003047; border-radius: 6px; padding: 6px 9px; }
.rt-item-bar span { color: #f4a825; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-item-bar b { color: #fff; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rt-item .hq-chips { margin-top: 5px; padding-left: 2px; }

.rt-iw {
  position: relative;
  background: #0c1f3c;
  border-radius: 8px;
  padding: 14px 12px 12px 16px;
  color: #fff;
  box-shadow: 0 8px 22px rgba(12,31,60,0.3);
  overflow: hidden;
}
.rt-iw::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: #f4a825; }
.rt-iw-head { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #f4a825; margin-bottom: 12px; }
.rt-iw-head svg { width: 14px; height: 14px; flex-shrink: 0; }
.rt-iw-label { font-size: 9.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.rt-iw-big { font-size: 30px; font-weight: 800; color: #4ade80; font-variant-numeric: tabular-nums; line-height: 1.15; margin: 2px 0 10px; }
.rt-gauge { position: relative; height: 8px; background: rgba(255,255,255,0.14); border-radius: 99px; }
.rt-gauge-fill { position: absolute; inset: 0 auto 0 0; background: #4ade80; border-radius: 99px; transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.rt-gauge-target { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #f4a825; border-radius: 2px; }
.rt-gauge-note { font-size: 10.5px; color: rgba(255,255,255,0.6); margin-top: 6px; }
.rt-iw-rows { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.14); display: flex; flex-direction: column; gap: 6px; }
.rt-iw-rows div { display: flex; justify-content: space-between; font-size: 12px; }
.rt-iw-rows span:first-child { color: rgba(255,255,255,0.7); }
.rt-iw-rows span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.rt-iw-rows .rt-green { color: #4ade80; }
.rt-iw-note { margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,0.14); font-size: 10.5px; color: rgba(255,255,255,0.5); }

/* 2. Run the job: Field Mode's time log beside the project's numbers */
.rt-tabs { display: flex; gap: 3px; margin: 10px 10px 0; padding: 3px; background: #b7c6d8; border-radius: 7px; }
.rt-tabs span { flex: 1; text-align: center; font-size: 11px; font-weight: 500; color: #4a5b70; padding: 4px 0; border-radius: 5px; }
.rt-tabs .is-sel { background: #fff; color: #081a30; font-weight: 600; box-shadow: 0 1px 2px rgba(8,26,48,0.12); }
.rt-log-stats { display: flex; gap: 18px; padding: 10px 12px 4px; }
.rt-log-stats div { display: flex; flex-direction: column; }
.rt-log-stats small { font-size: 9.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: #5b6b7f; }
.rt-log-stats b { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rt-entries { list-style: none; padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 6px; }
.rt-entry { display: flex; align-items: center; gap: 9px; padding: 7px 9px; background: #fff; border: 1px solid #dbe3ee; border-radius: 8px; }
.rt-entry-ico { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rt-entry-ico svg { width: 14px; height: 14px; }
.rt-entry-ico--time { background: #dbeafe; color: #1d4ed8; }
.rt-entry-ico--receipt { background: #fef3c7; color: #b45309; }
.rt-entry-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rt-entry-main b { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-entry-main small { font-size: 10.5px; color: #5b6b7f; }
.rt-entry-amt { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rt-entry-amt em { font-style: normal; font-size: 10.5px; font-weight: 600; color: #d97706; }

.rt-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rt-stat { background: #fafafa; border: 1px solid rgba(199,210,224,0.8); border-top: 3px solid; border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; }
.rt-stat small { font-size: 9.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: #5b6b7f; }
.rt-stat b { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rt-stat--green { border-top-color: #10b981; }
.rt-stat--green b { color: #059669; }
.rt-stat--amber { border-top-color: #f59e0b; }
.rt-stat--amber b { color: #d97706; }
.rt-bars { padding: 2px 12px 0; display: flex; flex-direction: column; gap: 9px; }
.rt-bar-row { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 8px; }
.rt-bar-label { font-size: 11px; color: #5b6b7f; }
.rt-bar { display: flex; flex-direction: column; gap: 3px; }
.rt-bar i { display: block; height: 7px; border-radius: 4px; transform-origin: left center; }
.rt-bar-q { background: #3b82f6; }
.rt-bar-a { background: #f59e0b; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.rt-legend { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: #5b6b7f; padding: 9px 12px 0; }
.rt-key { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.rt-key--q { background: #3b82f6; }
.rt-key--a { background: #f59e0b; margin-left: 8px; }
.rt-flag { margin: 8px 12px 11px; font-size: 11.5px; font-weight: 600; color: #b45309; background: #fef3c7; border: 1px solid #fde68a; border-radius: 6px; padding: 5px 8px; }

/* 3. Invoice: the accepted quote, then the invoice with its milestones */
.rt-mini { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; }
.rt-mini-main { min-width: 0; }
.rt-mini-title { font-size: 14px; font-weight: 700; }
.rt-mini-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.rt-mini-side b { font-size: 14px; font-variant-numeric: tabular-nums; }
.rt-inv-total { font-variant-numeric: tabular-nums; }
.rt-plan { padding-bottom: 12px; }
.rt-seg { display: flex; gap: 3px; margin: 0 12px 9px; padding: 3px; background: #b7c6d8; border-radius: 8px; }
.rt-seg span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; text-align: center; font-size: 11.5px; font-weight: 500; color: #4a5b70; padding: 5px 0; border-radius: 6px; transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; }
.rt-seg .rt-seg-on { background: #fff; color: #081a30; font-weight: 600; box-shadow: 0 1px 2px rgba(8,26,48,0.12); }
.rt-seg em { font-style: normal; font-size: 10px; font-weight: 600; color: #6d28d9; background: #ede9fe; border: 1px solid #ddd6fe; border-radius: 4px; padding: 0 4px; }
.rt-play .rt-tab:not(.is-on) em { opacity: 0; }
.rt-ms { list-style: none; margin: 0 12px; border: 1px solid #c7d2e0; border-radius: 8px; background: #fff; }
.rt-ms li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid #dbe3ee; font-size: 12.5px; }
.rt-ms li:first-child { border-top: none; }
.rt-ms-ico { display: inline-flex; flex-shrink: 0; }
.rt-ms-ico svg { width: 15px; height: 15px; display: block; }
.rt-ms-ico--doc { color: #2563eb; }
.rt-ms-ico--ok { color: #16a34a; }
.rt-ms-name { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-ms-name small { font-weight: 400; color: #5b6b7f; margin-left: 4px; }
.rt-ms-amt { font-variant-numeric: tabular-nums; color: #5b6b7f; }

/* 4. Get paid: the customer's pay screen and the payment plan filling up */
.rt-payer { text-align: center; padding-bottom: 14px; }
.rt-payer-band { display: flex; align-items: center; justify-content: center; gap: 7px; background: #003047; color: #fff; font-size: 12px; font-weight: 700; padding: 10px; }
.rt-payer-logo { width: 20px; height: 20px; border-radius: 5px; background: #f4a825; color: #003047; font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.rt-payer-meta { font-size: 11px; color: #5b6b7f; margin-top: 10px; }
.rt-payer-amt { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; margin: 4px 0 12px; }
.rt-payer .rt-swap { margin: 0 14px; }
.rt-payer-foot { font-size: 10.5px; color: #5b6b7f; margin-top: 10px; }
.rt-paid-msg { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border-radius: 7px; background: #dcfce7; color: #15803d; font-size: 13px; font-weight: 700; }
.rt-paid-msg svg { width: 15px; height: 15px; }
.rt-collect { padding-bottom: 12px; }
.rt-full { font-size: 10.5px; font-weight: 700; color: #fff; background: #16a34a; border-radius: 5px; padding: 1px 7px; transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.rt-progress { height: 8px; margin: 0 12px; background: #dbe3ee; border-radius: 99px; overflow: hidden; }
.rt-progress-fill { display: block; height: 100%; background: linear-gradient(90deg, #22c55e, #16a34a); border-radius: 99px; transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.rt-progress-note { font-size: 11.5px; color: #5b6b7f; margin: 6px 12px 10px; }
.rt-progress-note b { color: #081a30; font-variant-numeric: tabular-nums; }

/* Playback states: only under .rt-play, so no-JS and reduced motion show
   the finished demo. */
.rt-in { transition: opacity 0.45s ease, transform 0.45s ease; }
.rt-play .rt-in:not(.is-on) { opacity: 0; transform: translateY(8px); }
.rt-play .rt-grow:not(.is-on) { transform: scaleX(0); }
.rt-play .rt-tab:not(.is-on) { background: transparent; color: #4a5b70; font-weight: 500; box-shadow: none; }
.rt-swap .rt-pre { display: none; }
.rt-play .rt-swap:not(.is-on) .rt-pre { display: inline-flex; }
.rt-play .rt-swap--block:not(.is-on) .rt-pre { display: block; }
.rt-play .rt-swap:not(.is-on) .rt-post { display: none; }
.rt-swap.is-on .rt-post { animation: rt-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.rt-press.is-on { animation: rt-press 0.45s ease; }
.rt-play .rt-full:not(.is-on) { opacity: 0; transform: scale(0.8); }
@keyframes rt-press {
  0% { transform: none; box-shadow: 0 0 0 0 rgba(244,168,37,0.6); }
  35% { transform: scale(0.94); }
  100% { transform: none; box-shadow: 0 0 0 10px rgba(244,168,37,0); }
}
@keyframes rt-pop {
  0% { transform: scale(0.85); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
/* Applied for a moment while a demo resets, so parts snap back unseen. */
.rt-reset, .rt-reset * { transition: none !important; animation: none !important; }

/* Below the app window, so it never covers the demo. */
.rt-replay {
  position: absolute;
  right: 2px;
  bottom: 0;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: #003047;
  background: rgba(255,255,255,0.9);
  border: 1px solid #c7d2e0;
  border-radius: 99px;
  padding: 3px 10px;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition);
}
.rt-stage:hover .rt-replay, .rt-replay.is-shown { opacity: 1; }

@media (max-width: 640px) {
  .rt-app { grid-template-columns: 30px minmax(0, 1fr); margin: 0 -4px; }
  .rt-app-side i { width: 14px; }
  .rt-app-side i.is-on::before { left: -8px; }
  .rt-app-logo { width: 16px; height: 16px; }
  .rt-app-main { padding: 10px; min-height: 0; }
}

/* ── Pieces used by the industry pages ── */

/* Per-line profit chips, coloured like the app's quote editor:
   green at 30% and over, amber from 15%, red below. */
.hq-chip--profit { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; font-weight: 600; }
.hq-chip--thin { background: #fffbeb; color: #b45309; border-color: #fde68a; font-weight: 600; }

/* A price or chip that changes (data-at on an .rt-swap) gets a brief highlight. */
.rt-item-bar .rt-swap.is-on .rt-post { animation: rt-glow 1.2s ease; border-radius: 4px; }
.hq-chips .rt-swap { display: inline-flex; }
@keyframes rt-glow {
  0% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
  30% { box-shadow: 0 0 0 4px rgba(74,222,128,0.45); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

/* The Internal Workshop as the app lays it out: profit and margin side by side. */
.rt-iw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rt-iw-right { text-align: right; }
.rt-iw-value { font-size: 18px; font-weight: 700; color: #4ade80; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rt-iw-cost { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,0.14); font-size: 12.5px; font-weight: 600; }
.rt-iw-cost span:last-child { font-variant-numeric: tabular-nums; }

/* A quote's totals as a navy strip under the card (hero demos). */
.rt-iw-strip {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: #0c1f3c;
  color: #fff;
  padding: 10px 12px 10px 16px;
}
.rt-iw-strip::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: #f4a825; }
.rt-iw-strip small { display: block; font-size: 9.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.rt-iw-strip b { font-size: 18px; font-weight: 700; color: #4ade80; font-variant-numeric: tabular-nums; }
.rt-iw-strip div:last-child { text-align: right; }

/* A note inside a card: a reminder sent, a quote built from a template. */
.rt-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 12px 0;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  padding: 5px 8px;
  border: 1px solid;
}
.rt-note svg { width: 13px; height: 13px; flex-shrink: 0; }
.rt-note--amber { color: #b45309; background: #fef3c7; border-color: #fde68a; }
.rt-note--green { color: #15803d; background: #dcfce7; border-color: #bbf7d0; }

/* Templates and cost catalog lists */
.rt-list { list-style: none; padding: 2px 10px 10px; display: flex; flex-direction: column; gap: 6px; }
.rt-list li { display: flex; align-items: center; gap: 9px; padding: 7px 9px; background: #fff; border: 1px solid #dbe3ee; border-radius: 8px; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.rt-list-ico { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #e9eef4; color: #003047; }
.rt-list-ico svg { width: 14px; height: 14px; }
.rt-list-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rt-list-main b { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-list-main small { font-size: 10.5px; color: #5b6b7f; }
.rt-list-cost { font-size: 11px; color: #5b6b7f; font-variant-numeric: tabular-nums; text-align: right; }
.rt-list-cost b { display: block; font-size: 12px; color: #081a30; }
.rt-list .rt-btn { padding: 4px 10px; font-size: 11px; }
.rt-list li.rt-pick.is-on { border-color: #f4a825; box-shadow: 0 0 0 3px rgba(244,168,37,0.2); }
.rt-sub { font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: #5b6b7f; padding: 8px 12px 4px; }

/* Target margin in the Internal Workshop: amber while a quote is under its
   target (.is-thin, held by data-off-at until the price is fixed). */
.rt-gauge--iw { margin-top: 10px; }
.rt-iw .is-thin .rt-iw-value { color: #fbbf24; }
.rt-iw .is-thin .rt-gauge-fill { background: #fbbf24; }
.rt-iw .is-low .rt-iw-value { color: #f87171; }
.rt-iw .is-low .rt-gauge-fill { background: #f87171; }
.rt-iw-hint, .rt-play .rt-swap:not(.is-on) .rt-pre.rt-iw-hint { display: block; font-size: 10.5px; line-height: 1.35; color: #fcd34d; margin-top: 6px; }
.rt-iw-hint b { font-weight: 700; font-variant-numeric: tabular-nums; }
.rt-iw-target { font-size: 10.5px; color: rgba(255,255,255,0.6); margin-top: 6px; }

/* Red profit chip (below half the target, or a loss) and a pending pill */
.hq-chip--low { background: #fef2f2; color: #b91c1c; border-color: #fecaca; font-weight: 600; }
.rt-pill--pending { background: #f1f5f9; color: #5b6b7f; border-color: #dbe3ee; }

/* The recurring-invoice form: fields, an auto-send switch, the next copy */
.rt-form { padding: 2px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.rt-form small { display: block; font-size: 10.5px; font-weight: 600; color: #5b6b7f; margin-bottom: 3px; }
.rt-input { display: block; font-size: 12.5px; padding: 6px 9px; background: #fff; border: 1px solid #c7d2e0; border-radius: 7px; }
.rt-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px solid #dbe3ee; }
.rt-switch-row b { display: block; font-size: 12px; font-weight: 600; }
.rt-switch-row small { font-weight: 400; margin: 0; }
.rt-switch { flex-shrink: 0; }
.rt-switch-off, .rt-switch-on { position: relative; display: block; width: 32px; height: 18px; border-radius: 99px; }
.rt-switch-off { background: #c7d2e0; }
.rt-switch-on { background: #f4a825; }
.rt-switch-off::after, .rt-switch-on::after { content: ""; position: absolute; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(8,26,48,0.25); }
.rt-switch-off::after { left: 2px; }
.rt-switch-on::after { right: 2px; }
.rt-form-next { font-size: 11.5px; color: #5b6b7f; }
.rt-form-next b { color: #081a30; }
.rt-list-amt { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }