/* ═══════════════════════════════════════════════════════════════
   Requests — coded controls
   Loaded AFTER css/styles.css, which owns the page shell (.req-tabs,
   .req-layout, .req-form-wrap, .req-history*). This file owns everything
   inside the forms: the searchable pickers, the attachment field, and the
   send/receipt states. All classes are .rq-* so the two never collide.

   COLOUR: one VisionOne aperture colour per tab (green / blue / red), set as
   `--rq-accent` on .req-layout by viewRequests() and read here as `--rq-a`. It
   falls back to the runtime theme, so a missing accent degrades to hub green
   rather than to nothing. Don't hardcode a colour in this file — put it on the
   tab in requests.js and it reaches every control automatically.
   ═══════════════════════════════════════════════════════════════ */

/* ── [hidden] has to win ─────────────────────────────────────────
   The `hidden` attribute only maps to display:none in the UA stylesheet, so ANY
   `display:` rule of ours outranks it. Every element below is rendered hidden
   and toggled by JS — without this the popovers, the search-clear button, the
   no-match line, and the error/status bars all sit permanently on screen.
   (Caught by the browser harness: a picker "selected and closed" correctly but
   the menu never went away, and the next field became unclickable.) */
.rq-pick-pop[hidden],
.rq-pick-clear[hidden],
.rq-pick-none[hidden],
.rq-drop-err[hidden],
.rq-status[hidden] { display: none; }

/* ── Per-tab accent ──────────────────────────────────────────────
   `--rq-accent` is set on .req-layout by viewRequests() (one VisionOne aperture
   colour per tab) and falls back to the runtime theme if it is ever missing, so
   nothing here is hardcoded to green. */
.rq-form,
.req-form-wrap,
.req-history-wrap,
.req-tab { --rq-a: var(--rq-accent, var(--accent)); }

/* The ACTIVE TAB takes its own colour too, so the tab bar tells you which form
   you're on at a glance instead of three identical green pills.
   styles.css sets .req-tab.on from the runtime theme; this wins on load order. */
.req-tab.on {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--rq-a) 84%, #fff), var(--rq-a));
  box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--rq-a) 55%, transparent),
              inset 0 1px 0 rgba(255,255,255,.2);
  /* ⚠️ The ink on a FILLED accent is per-tab, not always white. styles.css sets
     `.req-tab.on { color:#fff }`, which works on the blue and the red and
     disappears on the yellow — a tab you can't read is worse than a tab that
     doesn't match. Each tab supplies --rq-accent-on when it needs dark ink. */
  color: var(--rq-accent-on, #fff);
}
.req-tab.on i { color: var(--rq-accent-on, #fff); }
/* The count badge rides the same ink: a white pill with white digits vanished on
   yellow too. Tinted from the ink so it works either way. */
.req-tab.on .req-badge {
  color: var(--rq-accent-on, #fff);
  background: color-mix(in srgb, var(--rq-accent-on, #fff) 16%, transparent);
  border-color: color-mix(in srgb, var(--rq-accent-on, #fff) 24%, transparent);
}
/* An INACTIVE tab's count wore the theme green whatever the tab was, so a blue
   tab carried a green badge — the same "three green forms" flattening this file
   set out to fix, one element smaller. Each badge now tints from its own tab. */
.req-tab:not(.on) .req-badge {
  background: color-mix(in srgb, var(--rq-a) 13%, #fff);
  color: var(--rq-accent-ink, var(--brand));
  border-color: color-mix(in srgb, var(--rq-a) 22%, transparent);
}

.rq-form { display: flex; flex-direction: column; gap: 26px; }

/* The five logo colours as a hairline across the top of the card — the same
   spectrum rule the printed brand pieces use.
   NOTE: no `overflow:hidden` on the wrap to clip it. That would make the wrap a
   clipping ancestor and silently kill the sticky send bar below. The two end
   segments carry the card's own corner radius instead. */
.req-form-wrap { position: relative; }
.rq-spectrum {
  position: absolute; inset: 0 0 auto 0; height: 3px;
  display: flex; pointer-events: none;
}
.rq-spectrum i { flex: 1 1 0; }
.rq-spectrum i:first-child { border-top-left-radius: var(--radius); }
.rq-spectrum i:last-child  { border-top-right-radius: var(--radius); }

/* ── Form header ─────────────────────────────────────────────── */
.rq-head { display: flex; align-items: center; gap: 14px; }
.rq-head-ic {
  width: 46px; height: 46px; flex: 0 0 auto;
  display: grid; place-items: center;
  /* Same rule as the active tab: the ink on a FILLED accent is per-tab. A white
     key on the logo yellow is invisible; --rq-accent-on carries the dark ink. */
  border-radius: 14px; font-size: 18px; color: var(--rq-accent-on, #fff);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--rq-a) 82%, #fff),
    var(--rq-a));
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--rq-a) 55%, transparent),
              inset 0 1px 0 rgba(255,255,255,.25);
}
.rq-head-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rq-head-t b { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.rq-head-t small { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* Who's asking — read from the sign-in, never typed. */
.rq-who {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 15px;
  background: color-mix(in srgb, var(--rq-a) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--rq-a) 24%, transparent);
  border-radius: var(--radius-sm);
}
/* The initials sit underneath; the photo covers them when it loads, so a slow
   or missing avatar degrades to initials instead of an empty circle. */
.rq-who-av {
  position: relative; overflow: hidden;
  width: 38px; height: 38px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--rq-a) 78%, #fff), var(--rq-a));
  color: var(--rq-accent-on, #fff); font-size: 13px; font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px color-mix(in srgb, var(--rq-a) 30%, transparent);
}
.rq-who-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
  display: block;
}
.rq-who-t { display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; color: var(--ink-2); min-width: 0; }
.rq-who-t b { color: var(--ink); font-weight: 700; }
.rq-who-em { font-variant-numeric: tabular-nums; word-break: break-all; }
.rq-who-t small { font-size: 11.5px; color: var(--muted); }

/* ── Field stack ─────────────────────────────────────────────────
   ONE COLUMN, deliberately. Two columns squeezed pickers and their sub-lines
   into half-width and stacked six controls into the height of three, which read
   as a dense wall. A single column makes the form longer and each question
   easier to take one at a time — the page scrolls, so length is cheap. */
.rq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
.rq-span { grid-column: 1 / -1; }

.rq-field { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.rq-lbl {
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; font-weight: 650; color: var(--ink);
  letter-spacing: -.005em;
}
.rq-req, .rq-opt {
  font-style: normal; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 999px;
}
.rq-req {
  color: var(--rq-accent-ink, var(--brand));
  background: color-mix(in srgb, var(--rq-a) 13%, #fff);
}
.rq-opt { color: var(--muted); background: var(--surface-2); }
.rq-help { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.rq-tech {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line);
  padding: 1px 6px; border-radius: 6px; white-space: nowrap;
}

/* ── Plain inputs (the form is .rq-form, so styles.css's .form rules
      don't reach these — this is the whole ruleset) ────────────── */
.rq-form input[type="text"],
.rq-form input:not([type]),
.rq-form textarea {
  font: inherit; font-size: 13.5px;
  width: 100%; box-sizing: border-box;
  padding: 11px 14px;
  color: var(--ink);
  background: rgba(255,255,255,.9);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.rq-form textarea { min-height: 104px; resize: vertical; line-height: 1.6; }
.rq-form input:hover, .rq-form textarea:hover { border-color: var(--line-strong); }
.rq-form input:focus, .rq-form textarea:focus {
  outline: none; background: #fff;
  border-color: var(--rq-a);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rq-a) 18%, transparent);
}
.rq-form ::placeholder { color: #9aa8b8; }

/* ═══ Picker ═══════════════════════════════════════════════════ */
.rq-pick { position: relative; }
/* The open picker must paint over the fields beneath it — and over the
   *next* field's trigger, which is a later sibling in DOM order. */
.rq-pick.is-open { z-index: 40; }

.rq-pick-trig {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  min-height: 50px;
  padding: 8px 12px;
  font: inherit; text-align: left;
  color: var(--ink);
  background: rgba(255,255,255,.9);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm) !important;   /* beats the platform theme-core
      rule in dashboard-meta.js, which forces --wt-theme-btn-radius (999px, set
      for the round FAB rail) onto every <button> on the page. */
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.rq-pick-trig:hover { border-color: var(--line-strong); background: #fff; }
.rq-pick.is-open .rq-pick-trig,
.rq-pick-trig:focus-visible {
  outline: none; background: #fff;
  border-color: var(--rq-a);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rq-a) 16%, transparent);
}
.rq-pick-face { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.rq-pick-ph { font-size: 13.5px; color: #9aa8b8; }
.rq-pick-chev {
  flex: 0 0 auto; font-size: 11px; color: var(--muted);
  transition: transform var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.rq-pick.is-open .rq-pick-chev { transform: rotate(180deg); color: var(--rq-a); }
.rq-pick.has-err .rq-pick-trig {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px rgba(220,38,38,.12);
}

/* A row's body IS the trigger face — one definition, so the two can't drift. */
.rq-pick-body { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.rq-pick-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rq-pick-txt b {
  font-size: 13.5px; font-weight: 650; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rq-pick-txt small {
  font-size: 11.5px; color: var(--muted); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}

.rq-logo {
  width: 32px; height: 32px; flex: 0 0 auto;
  border-radius: 9px; object-fit: contain;
  background: #fff; border: 1px solid var(--line);
  padding: 2px;
}
.rq-logo-sm { width: 18px; height: 18px; border-radius: 5px; padding: 1px; vertical-align: -4px; margin-right: 5px; }
.rq-ico {
  width: 32px; height: 32px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 9px; font-size: 13px;
  color: var(--rq-accent-ink, var(--brand));
  background: color-mix(in srgb, var(--rq-a) 11%, #fff);
  border: 1px solid color-mix(in srgb, var(--rq-a) 22%, transparent);
}
.rq-ico-none { color: var(--muted); background: var(--surface-2); border-color: var(--line); }
.rq-dot {
  width: 12px; height: 12px; flex: 0 0 auto;
  border-radius: 50%; margin: 0 10px;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 8%, transparent);
}

.rq-badge {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 999px;
  color: var(--muted); background: var(--surface-2); border: 1px solid var(--line);
}
.rq-badge-lock { color: #b45309; background: #fffbeb; border-color: #fde68a; }

/* ── Popover ─────────────────────────────────────────────────── */
.rq-pick-pop {
  position: absolute; top: calc(100% + 7px); left: 0; right: 0;
  z-index: 60;
  display: flex; flex-direction: column;
  max-height: 372px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 48px -12px rgba(15,23,42,.28), 0 6px 14px -4px rgba(15,23,42,.10);
  animation: rqPopIn 150ms var(--ease-out);
}
/* Flips above the trigger when the field sits near the bottom of the window. */
.rq-pick-pop.is-up { top: auto; bottom: calc(100% + 7px); transform-origin: bottom center; }
@keyframes rqPopIn {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.rq-pick-search {
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 7px;
}
.rq-pick-search > i { font-size: 11.5px; color: var(--muted); flex: 0 0 auto; }
.rq-pick-search input {
  flex: 1 1 auto; min-width: 0;
  font: inherit; font-size: 13px;
  padding: 9px 0;
  border: 0; background: none; color: var(--ink);
}
.rq-pick-search input:focus { outline: none; }
.rq-pick-search:focus-within {
  background: #fff;
  border-color: var(--rq-a);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rq-a) 14%, transparent);
}
.rq-pick-clear {
  flex: 0 0 auto; width: 20px; height: 20px;
  display: grid; place-items: center;
  border: 0; background: none; cursor: pointer;
  color: var(--muted); font-size: 11px;
  border-radius: 50% !important;
}
.rq-pick-clear:hover { color: var(--ink); background: var(--line); }

/* A real, grabbable scrollbar — the list is meant to be scrolled through. */
.rq-pick-list { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.rq-pick-list::-webkit-scrollbar { width: 9px; }
.rq-pick-list::-webkit-scrollbar-thumb { background: rgba(15,23,42,.20); border-radius: 999px; border: 2px solid #fff; }
.rq-pick-list::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,.32); }
.rq-pick-list::-webkit-scrollbar-track { background: transparent; }
.rq-pick-list { scrollbar-width: thin; scrollbar-color: rgba(15,23,42,.22) transparent; }

.rq-pick-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 9px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.rq-pick-row + .rq-pick-row { margin-top: 2px; }
/* .is-cursor is keyboard position, .is-on is the selection — a person moving
   with ↓ must be able to see both at once, so they read differently. */
.rq-pick-row.is-cursor { background: var(--surface-2); border-color: var(--line); }
.rq-pick-row.is-on {
  background: color-mix(in srgb, var(--rq-a) 11%, #fff);
  border-color: color-mix(in srgb, var(--rq-a) 30%, transparent);
}
.rq-pick-row.is-on .rq-pick-txt b { color: var(--rq-accent-ink, var(--brand)); }
.rq-pick-row.is-disabled { opacity: .45; cursor: not-allowed; }
.rq-pick-tick {
  flex: 0 0 auto; margin-left: 4px;
  font-size: 12px; color: var(--rq-accent-ink, var(--brand));
  opacity: 0; transform: scale(.6);
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.rq-pick-row.is-on .rq-pick-tick { opacity: 1; transform: none; }

.rq-pick-none { padding: 22px 12px; text-align: center; font-size: 12.5px; color: var(--muted); }
.rq-pick-none b { color: var(--ink-2); }

.rq-pick-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 7px; padding-top: 8px;
  border-top: 1px solid var(--line);
}
.rq-pick-count { font-size: 11.5px; font-weight: 650; color: var(--muted); }
.rq-pick-done {
  font: inherit; font-size: 12px; font-weight: 700;
  padding: 6px 14px; border: 0; cursor: pointer;
  color: #fff; background: var(--rq-accent-ink, var(--brand));
  border-radius: 999px !important;
}
.rq-pick-done:hover { background: var(--brand-2); }

/* ── The "New …" action, pinned inside the menu ─────────────────
   Above the options and ruled off from them: it is the one thing in here that
   is not picking. It reads the search box, so it can name what it will make. */
.rq-pick-add {
  display: flex; align-items: center; gap: 9px; width: 100%;
  margin: 0 0 7px; padding: 8px 9px;
  font: inherit; text-align: left; cursor: pointer;
  background: none; border: 1px solid transparent; border-bottom: 1px solid var(--line);
  border-radius: 10px 10px 0 0;
  transition: background var(--dur-1) var(--ease-out);
}
.rq-pick-add:hover, .rq-pick-add:focus-visible {
  background: color-mix(in srgb, var(--rq-a) 9%, #fff); outline: none;
}
.rq-pick-add-ico {
  width: 26px; height: 26px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 8px; font-size: 10px;
  color: var(--rq-accent-ink, var(--brand));
  background: color-mix(in srgb, var(--rq-a) 12%, #fff);
  border: 1px dashed color-mix(in srgb, var(--rq-a) 40%, transparent);
}
.rq-pick-add-txt { display: flex; flex-direction: column; min-width: 0; }
.rq-pick-add-txt b {
  font-size: 12.5px; font-weight: 700; color: var(--rq-accent-ink, var(--brand));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rq-pick-add-txt small { font-size: 11px; color: var(--muted); }
/* Armed: a name is typed, so this is now a real action rather than a hint. */
.rq-pick-add.is-armed .rq-pick-add-ico {
  color: #fff; border-style: solid; border-color: transparent;
  background: var(--rq-accent-ink, var(--brand));
}
.rq-pick-add.is-busy { opacity: .6; pointer-events: none; }
.rq-pick-add.is-busy .rq-pick-add-ico i { animation: rqSpin 700ms linear infinite; }
/* Clicked with an empty box: point back at the box it needs. */
.rq-pick-add.is-nudge { animation: rqNudge 420ms var(--ease-out); }
@keyframes rqSpin { to { transform: rotate(360deg); } }
@keyframes rqNudge {
  0%, 100% { transform: none; }
  30% { transform: translateY(-2px); }
  65% { transform: translateY(1px); }
}

/* Multi-select face: chips, wrapping, capped so the trigger can't grow forever. */
.rq-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 0; }
.rq-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 650;
  padding: 3px 9px; border-radius: 999px;
  color: var(--rq-accent-ink, var(--brand)); background: color-mix(in srgb, var(--rq-a) 11%, #fff);
  border: 1px solid color-mix(in srgb, var(--rq-a) 26%, transparent);
}
/* A chip carrying the option's own mark (data sources — read the logo, not just
   the word). Whatever icon shape the row used is squashed to chip scale. */
.rq-chip-ico {
  width: 15px; height: 15px; min-width: 15px; flex: 0 0 auto;
  margin: 0; padding: 0; border-radius: 4px; font-size: 8px;
  box-shadow: none; overflow: hidden;
}
.rq-chip-ico img { width: 100%; height: 100%; object-fit: contain; }

/* ═══ Attachments ══════════════════════════════════════════════ */
.rq-drop { display: flex; flex-direction: column; gap: 10px; }
.rq-drop-zone {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 16px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.6);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.rq-drop-zone:hover { border-color: var(--rq-a); background: #fff; }
.rq-drop-zone:focus-visible {
  outline: none; border-color: var(--rq-a);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rq-a) 16%, transparent);
}
.rq-drop-zone.is-over {
  border-color: var(--rq-a); border-style: solid;
  background: color-mix(in srgb, var(--rq-a) 11%, #fff);
  transform: scale(1.005);
}
.rq-drop-ico {
  width: 36px; height: 36px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 11px; font-size: 14px;
  color: var(--rq-accent-ink, var(--brand)); background: color-mix(in srgb, var(--rq-a) 11%, #fff);
  border: 1px solid color-mix(in srgb, var(--rq-a) 20%, transparent);
}
.rq-drop-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rq-drop-txt b { font-size: 13px; font-weight: 650; color: var(--ink-2); }
.rq-drop-link { color: var(--rq-accent-ink, var(--brand)); text-decoration: underline; text-underline-offset: 2px; }
.rq-drop-txt small { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.rq-drop-txt kbd {
  font: inherit; font-size: 10.5px; font-weight: 700;
  padding: 1px 5px; border-radius: 5px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
}

.rq-drop-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 9px; }
.rq-drop-files:empty { display: none; }
.rq-file {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 9px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 11px;
  animation: rqFileIn 220ms var(--ease-out);
}
@keyframes rqFileIn { from { opacity: 0; transform: translateY(4px) scale(.97); } to { opacity: 1; transform: none; } }
.rq-file-thumb {
  width: 38px; height: 38px; flex: 0 0 auto;
  display: grid; place-items: center; overflow: hidden;
  border-radius: 8px; background: #fff; border: 1px solid var(--line);
}
.rq-file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rq-file-ext { font-size: 15px; color: var(--rq-accent-ink, var(--brand)); }
.rq-file-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.rq-file-meta b {
  font-size: 12px; font-weight: 650; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rq-file-meta small { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rq-file-x {
  flex: 0 0 auto; width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 0; cursor: pointer; font-size: 11px;
  color: var(--muted); background: transparent;
  border-radius: 50% !important;
  transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.rq-file-x:hover { color: var(--danger); background: #fef2f2; }
.rq-drop-err {
  margin: 0; font-size: 12px; color: var(--danger);
  display: flex; align-items: center; gap: 6px;
}

/* ═══ Footer / status / result ═════════════════════════════════ */
/* ── Send bar ────────────────────────────────────────────────────
   Sticks to the bottom of the viewport while the form is on screen, so on a
   one-column form this long the submit button is always reachable instead of
   living only at the very bottom. The button is LAST in the DOM, which puts it
   on the right where the eye finishes reading each row. */
.rq-foot {
  position: sticky; bottom: -22px; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  margin: 6px -22px -22px;
  padding: 14px 22px;
  background: color-mix(in srgb, #fff 92%, var(--rq-a));
  border-top: 1px solid color-mix(in srgb, var(--rq-a) 20%, transparent);
  backdrop-filter: blur(8px);
}
.rq-foot .rq-submit { margin-left: auto; }
/* `.btn.primary` in styles.css is 0,2,0 and paints the theme green — a bare
   `.rq-submit` (0,1,0) loses to it no matter the load order. Qualify with both
   classes to take the tab accent. */
.rq-submit { position: relative; }
.btn.primary.rq-submit {
  background: linear-gradient(135deg, color-mix(in srgb, var(--rq-a) 84%, #fff), var(--rq-a));
  box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--rq-a) 55%, transparent),
              inset 0 1px 0 rgba(255,255,255,.2);
}
.btn.primary.rq-submit:hover {
  box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--rq-a) 70%, transparent),
              inset 0 1px 0 rgba(255,255,255,.25);
}
.rq-submit[disabled] { opacity: .75; cursor: progress; }
.rq-submit.is-busy > i {
  animation: rqSpin 700ms linear infinite;
}
@keyframes rqSpin { to { transform: rotate(360deg); } }
.rq-foot-note { font-size: 11.5px; color: var(--muted); }
.rq-foot-note b { color: var(--ink-2); font-weight: 650; }

.rq-status {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 13px; border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 600;
}
.rq-status.is-err { color: var(--danger); background: #fef2f2; border: 1px solid #fecaca; }
.rq-status.is-info { color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); }

.rq-done {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 34px 22px; text-align: center;
  animation: rqPopIn 260ms var(--ease-out);
}
.rq-done-ic { font-size: 34px; line-height: 1; }
.rq-done-ic.ok { color: var(--success); }
.rq-done-ic.warn { color: var(--warn); }
.rq-done b { font-size: 16px; font-weight: 700; color: var(--ink); }
.rq-done p { margin: 0; max-width: 440px; font-size: 13px; color: var(--muted); line-height: 1.6; }
.rq-done p a { color: var(--rq-accent-ink, var(--brand)); font-weight: 650; }
.rq-done-acts { margin-top: 6px; display: flex; gap: 10px; }

/* ═══ Right rail ═══════════════════════════════════════════════ */
.rq-empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 30px 18px; text-align: center;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
  color: var(--muted);
}
.rq-empty > i { font-size: 21px; color: var(--line-strong); margin-bottom: 3px; }
.rq-empty b { font-size: 13px; color: var(--ink-2); }
.rq-empty span { font-size: 12px; line-height: 1.5; max-width: 220px; }

.rq-chip-ok   { color: var(--success) !important; background: #f0fdf4 !important; }
.rq-chip-warn { color: var(--warn)    !important; background: #fffbeb !important; }

.rq-side { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.rq-side h3 {
  margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.rq-side h3 > i { color: var(--rq-a); font-size: 12px; }
.rq-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rq-steps li { display: flex; gap: 11px; align-items: flex-start; }
.rq-step-n {
  width: 24px; height: 24px; flex: 0 0 auto; margin-top: 1px;
  display: grid; place-items: center;
  border-radius: 50%; font-size: 10px; font-weight: 700;
  color: var(--rq-accent-ink, var(--brand));
  background: color-mix(in srgb, var(--rq-a) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--rq-a) 26%, transparent);
}
.rq-steps li > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rq-steps b { font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.rq-steps small { font-size: 11.5px; color: var(--muted); line-height: 1.5; }

/* The history rail's title now carries a logo, so it needs to align. */
.req-history h3 > i { color: var(--rq-a); font-size: 12px; }
.req-history-title { display: inline-flex; align-items: center; }
.req-history-meta { display: flex; flex-wrap: wrap; gap: 6px; }