/* ============================================================================
   REQUEST CARD — compound, single source of truth.
   The „Moje žádosti" card: document identity row (shared chips + code cell) +
   request id + status pill (.rstat, _status.css) + the status TIMELINE
   (Status.render) + an optional decision notice (_notices.css).

   Structure SoT = RequestCard.render (_request-card.js) — every consumer
   (prototype RequestsPage, comp-request-card.html) calls it; nobody re-types
   the tree. Import AFTER colors_and_type.css + _chips.css + _status.css +
   _notices.css (+ _buttons.css for the action button).
   ============================================================================ */

.req-card {
  background: var(--color-bg-surface, white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md, 6px);
  padding: var(--space-6, 24px);
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: var(--space-3, 12px);
  /* Slow ring fade-out; .req-flash snaps it in (rn-flash vocabulary) — used
     when arriving from a detail CTA link (#/zadosti/<id>). */
  transition: box-shadow 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.req-card.req-flash { box-shadow: var(--shadow-focus); transition: box-shadow 160ms ease-out; }

.req-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.req-card__main { min-width: 0; flex: 1 1 300px; }
.req-card__meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
/* The full display code ("STANAG 1372") contains a space — never wrap inside
   the code cell (it would overflow onto the title line). */
.req-card__meta .code-cell__num { white-space: nowrap; }
.req-card__rid { font-size: 12.5px; color: var(--color-fg-tertiary); }
.req-card__rid code { font-family: var(--font-mono); font-size: 12px; }
.req-card__title { margin: 4px 0; font-size: 17px; font-weight: 600; color: var(--color-fg-default); line-height: 1.35; }
.req-card__sub { font-size: 13px; color: var(--color-fg-secondary); }
.req-card__actions { display: flex; gap: 10px; align-items: center; flex: none; }
.req-card .notice { margin-top: 4px; }