/* =========================================================================
   Kafil client area.

   Standalone: does NOT load the marketing style.css. That sheet is a vendor
   template carrying a universal `* { color:#0d5152 }` rule and 900 KB of icon
   webfonts, neither of which belongs in a tool people open every day.

   The palette is a deliberate half-step from the marketing site. Ground is
   deeper (#131010 against #1b1717) so the app reads as a workspace rather
   than a page, and coral is rationed to actions. Colour carries state here,
   so it cannot also be decoration.
   ========================================================================= */

:root {
  --ground:  #131010;
  --surface: #1c1818;
  --raised:  #262121;
  --line:    rgba(242, 250, 250, .09);
  --line-2:  rgba(242, 250, 250, .16);

  --ink:   #f2fafa;
  --ink-2: #a8adb6;
  --ink-3: #8b8f96;

  /* State colours. Each means one thing and is used for nothing else. */
  --coral: #f27457;   /* an action you can take */
  --teal:  #21c7c7;   /* signed, settled, done */
  --amber: #f0b429;   /* waiting on you */
  --rose:  #ef8079;   /* disputed */

  --coral-dim: rgba(242, 116, 87, .14);
  --teal-dim:  rgba(33, 199, 199, .13);
  --amber-dim: rgba(240, 180, 41, .13);
  --rose-dim:  rgba(239, 128, 121, .13);

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;

  --rail-w: 244px;
  --tab-h: 66px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: Switzer-Variable, Switzer, system-ui, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

.skip {
  position: absolute; left: 12px; top: -100%; z-index: 100;
  background: var(--coral); color: #14100f;
  padding: 10px 18px; border-radius: 0 0 10px 10px; font-weight: 600;
}
.skip:focus { top: 0; }

.mono { font-family: var(--mono); font-size: .9em; letter-spacing: -.01em; }

/* ---------------------------------------------------------------- type ---- */
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
h1 { font-size: 26px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
p  { margin: 0; }

.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}

/* ============================================================ app shell ==== */
.rail {
  position: fixed; inset: 0 auto 0 0; width: var(--rail-w);
  display: none; flex-direction: column;
  padding: 22px 14px;
  background: var(--surface);
  border-right: 1px solid var(--line);
}
.rail__brand { display: block; padding: 4px 10px 26px; }
.rail__brand img { display: block; height: 30px; width: auto; }
.rail__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rail__link {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: var(--r-sm);
  color: var(--ink-2); font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.rail__link:hover { background: var(--raised); color: var(--ink); }
.rail__link.is-current { background: var(--raised); color: var(--ink); }
.rail__link.is-current .rail__icon { color: var(--coral); }
.rail__icon { display: grid; place-items: center; width: 20px; height: 20px; color: var(--ink-3); }
.rail__icon svg { width: 20px; height: 20px; }
.rail__badge {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--amber); color: #241c04;
  font-size: 11px; font-weight: 700;
}
.rail__foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.rail__user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); }
.rail__user:hover { background: var(--raised); }
.rail__userinfo { display: grid; min-width: 0; }
.rail__username { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail__usermeta { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A <button> inside a form, because signing out with a GET means any image tag
   on any page can end a client's session. Stripped back to link appearance, and
   ink-2 rather than ink-3: at 13px on the rail, ink-3 measured 2.85:1. */
.rail__out {
  display: flex; align-items: center; width: 100%;
  min-height: 34px; padding: 8px 10px;
  background: none; border: 0; border-radius: var(--r-sm);
  font-family: inherit; font-size: 13px; text-align: left;
  color: var(--ink-2); cursor: pointer;
}
.rail__out:hover { color: var(--ink); background: var(--raised); }

.avatar {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--coral-dim); color: var(--coral);
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top));
  background: rgba(19, 16, 16, .88);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar__brand img { display: block; height: 28px; width: auto; }

.tabbar {
  position: fixed; inset: auto 0 0 0; z-index: 20;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: rgba(19, 16, 16, .94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar__link {
  position: relative;
  display: grid; place-items: center; gap: 3px;
  min-height: var(--tab-h); padding: 8px 4px;
  color: var(--ink-3); font-size: 10.5px; font-weight: 500;
}
.tabbar__link svg { width: 21px; height: 21px; }
.tabbar__link.is-current { color: var(--coral); }
.tabbar__dot {
  position: absolute; top: 9px; left: 50%; margin-left: 8px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--amber);
}

.main { padding: 20px 16px calc(var(--tab-h) + 28px); }

@media (min-width: 1024px) {
  .topbar, .tabbar { display: none; }
  .rail { display: flex; }
  .main { margin-left: var(--rail-w); padding: 34px 40px 60px; }
}

.wrap { max-width: 1060px; margin: 0 auto; }

/* ============================================================== the trio === */
/* THE signature element. See the note in partials/app-macros.njk for why the
   first version (three plain bars) was scrapped: it read as a progress bar.
   Keys are lettered and key-shaped so three parties cannot be mistaken for
   three steps. Yours is always first and always coral. */
.trio { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.trio__keys { display: flex; gap: 5px; }
.key {
  display: grid; place-items: center;
  width: 24px; height: 24px; flex: none;
  border-radius: 7px 7px 4px 4px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink-3);
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
}
.key.is-signed { background: var(--teal); border-color: var(--teal); color: #06201f; }
.key--you { border-color: rgba(242,116,87,.55); color: #d98a72; }
.key--you.is-signed { background: var(--coral); border-color: var(--coral); color: #2a1109; }
.trio__count { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.trio__count b { color: var(--ink-2); font-weight: 600; }

/* Expanded form, deal page only. */
.keys { display: grid; gap: 10px; }
.keyrow {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--ground); border: 1px solid var(--line);
}
.keyrow .key { width: 26px; height: 26px; font-size: 11px; }
.keyrow__who { font-weight: 500; }
.keyrow__state { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }
.keyrow.is-signed .keyrow__state { color: var(--teal); }
.keyrow.is-yours.is-signed .keyrow__state { color: var(--coral); }

/* ================================================================ cards ==== */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px;
}
.card + .card { margin-top: 14px; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }

.grid { display: grid; gap: 14px; }
/* On a phone three full-width tiles filled the whole first screen and you
   saw one number and no deals. The lead tile keeps its width; the two
   reference figures share a row. */
.grid--3 { grid-template-columns: 1fr 1fr; }
.grid--3 > :first-child { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--3 > :first-child { grid-column: auto; }
}
@media (min-width: 1024px) {
  .grid--split { grid-template-columns: 1.55fr 1fr; align-items: start; gap: 18px; }
  /* The aside was ending 200px above the main column and leaving a void.
     Sticky keeps it beside what you are reading instead. */
  .grid--split > :last-child { position: sticky; top: 34px; }
}

.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; }
.stat__label { font-size: 12.5px; color: var(--ink-3); margin-bottom: 8px; }
.stat__value { font-size: clamp(21px, 5.2vw, 27px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.stat__value .cur { font-size: .58em; font-weight: 500; color: var(--ink-3); margin-left: 1px; }
.stat__foot { margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }
.stat--act { border-color: rgba(240, 180, 41, .34); background: linear-gradient(180deg, var(--amber-dim), transparent 62%), var(--surface); }
.stat--act .stat__value { color: var(--amber); }

/* ================================================================ deals ==== */
.deal {
  display: block; padding: 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color .15s ease, transform .15s ease;
}
.deal + .deal { margin-top: 12px; }
.deal:hover { border-color: var(--line-2); }
.deal:active { transform: scale(.995); }
.deal--act { border-color: rgba(240, 180, 41, .38); }

.deal__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.deal__ref { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.deal__amt { font-size: 17px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.deal__amt .cur { font-size: .74em; font-weight: 500; color: var(--ink-3); }
.deal__title { font-size: 15.5px; font-weight: 500; margin-bottom: 3px; }
.deal__meta { font-size: 13px; color: var(--ink-3); margin-bottom: 14px; }
.deal__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill--act  { background: var(--amber-dim); color: var(--amber); }
.pill--live { background: var(--teal-dim);  color: var(--teal); }
.pill--dis  { background: var(--rose-dim);  color: var(--rose); }
.pill--done { background: rgba(242,250,250,.07); color: var(--ink-3); }

/* =============================================================== buttons === */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px; border-radius: 10px;
  border: 1px solid transparent; cursor: pointer;
  font-size: 14.5px; font-weight: 600; white-space: nowrap;
  transition: filter .15s ease, background .15s ease;
}
.btn--primary { background: var(--coral); color: #14100f; }
.btn--primary:hover { filter: brightness(1.08); }
.btn--ghost { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn--ghost:hover { background: var(--raised); }
.btn--fw { width: 100%; }

/* ============================================================== timeline === */
.tl { list-style: none; margin: 0; padding: 0; }
.tl__item { position: relative; padding: 0 0 20px 26px; }
.tl__item::before {
  content: ""; position: absolute; left: 4px; top: 5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ground); border: 2px solid var(--line-2);
}
.tl__item::after {
  content: ""; position: absolute; left: 8px; top: 16px; bottom: 0; width: 1px; background: var(--line);
}
.tl__item:last-child { padding-bottom: 0; }
.tl__item:last-child::after { display: none; }
.tl__item.is-done::before { background: var(--teal); border-color: var(--teal); }
.tl__item.is-active::before { background: var(--amber); border-color: var(--amber); }
.tl__when { font-size: 11.5px; color: var(--ink-3); font-family: var(--mono); }
.tl__what { font-size: 14px; }
.tl__item.is-active .tl__what { color: var(--amber); font-weight: 500; }

/* =========================================================== definition ==== */
.dl { display: grid; gap: 0; margin: 0; }
.dl__row { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.dl__row:last-child { border-bottom: 0; }
.dl__k { flex: none; width: 132px; font-size: 13px; color: var(--ink-3); }
.dl__v { font-size: 14px; min-width: 0; overflow-wrap: anywhere; }

.addr {
  display: flex; align-items: center; gap: 10px;
  background: var(--ground); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 11px 13px;
}
.addr code { font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; color: var(--ink-2); }
.copy {
  margin-left: auto; flex: none; background: transparent; border: 1px solid var(--line-2);
  border-radius: 7px; padding: 6px 11px; font-size: 12px; font-weight: 600;
  color: var(--ink-2); cursor: pointer;
}
.copy:hover { color: var(--ink); border-color: var(--ink-3); }
.copy.is-done { color: var(--teal); border-color: var(--teal); }

/* ============================================================== activity === */
.feed { list-style: none; margin: 0; padding: 0; }
.feed__item { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.feed__item:last-child { border-bottom: 0; }
.feed__when { flex: none; width: 104px; font-size: 12px; color: var(--ink-3); font-family: var(--mono); }
.feed__what { font-size: 14px; }

/* ================================================================= login ===
   Two panels rather than one floating card. The right panel is the product's
   own mechanic at rest, so the door explains what is behind it. It collapses
   below the form on a phone, where the form is the only thing that matters. */
.signin {
  min-height: 100dvh;
  background:
    radial-gradient(1200px 700px at 88% -12%, rgba(242,116,87,.12), transparent 60%),
    radial-gradient(760px 520px at -6% 108%, rgba(33,199,199,.07), transparent 58%),
    var(--ground);
}
.signin__grid {
  min-height: 100dvh;
  display: grid;
  align-content: center;
  gap: 40px;
  padding: 40px 22px;
  max-width: 1000px; margin: 0 auto;
}
.signin__form { width: 100%; max-width: 384px; margin: 0 auto; }
.signin__brand { display: block; height: 36px; width: auto; margin-bottom: 30px; }
.signin__title { margin-bottom: 7px; }
.signin__sub { color: var(--ink-2); font-size: 14.5px; margin-bottom: 26px; }
.signin__foot { margin-top: 20px; font-size: 13px; color: var(--ink-3); line-height: 1.6; }
.signin__foot a { color: var(--coral); }

.signin__aside { display: none; }
.signin__panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 24px;
}
.signin__warn {
  margin-top: 14px; padding: 15px 17px;
  border-left: 2px solid var(--coral);
  background: rgba(242,116,87,.06);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--ink-2);
}
.signin__warn b { color: var(--ink); font-weight: 600; }

@media (min-width: 900px) {
  .signin__grid { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 40px; }
  .signin__form { margin: 0; }
  .signin__aside { display: block; }
}

.field { margin-bottom: 16px; }
.field__label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 7px; }
.input {
  width: 100%; min-height: 50px; padding: 0 15px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 10px;
  font-family: inherit; font-size: 15px;
}
.input::placeholder { color: var(--ink-3); }
.input:focus { border-color: var(--coral); outline: none; }
.field__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.field__aux { font-size: 12.5px; color: var(--ink-3); }
.field__aux:hover { color: var(--coral); }

.alert {
  display: none; align-items: flex-start; gap: 9px;
  padding: 11px 13px; margin-bottom: 16px;
  background: var(--rose-dim); border: 1px solid rgba(239,128,121,.4);
  border-radius: var(--r-sm); font-size: 13.5px; color: #f6b6b0;
}
.alert.is-on { display: flex; }

.note {
  margin-top: 18px; padding: 12px 14px;
  background: rgba(240,180,41,.07); border: 1px dashed rgba(240,180,41,.42);
  border-radius: var(--r-sm); font-size: 12.5px; color: #e8c98a;
}
.note b { color: var(--amber); }

/* ============================================================ utilities ==== */
.mb-6  { margin-bottom: 6px; }
.mb-10 { margin-bottom: 10px; }
.mb-18 { margin-bottom: 18px; }
.mb-26 { margin-bottom: 26px; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.small { font-size: 13px; }
.page-head { margin-bottom: 22px; }
.page-head p { color: var(--ink-2); margin-top: 5px; }

/* Was ink-3 at 13px, which is a link nobody sees. */
/* min-height 24px throughout: WCAG 2.2 asks for a 24px target and these were
   16 to 21px tall, which on a phone is a link you aim at rather than press. */
.link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 24px; min-width: 24px;
  /* Negative margin cancels the padding visually, so the target grows without
     the link appearing to move. "All" was a 16px-wide tap target. */
  padding: 0 5px; margin: 0 -5px;
  color: var(--ink-2); font-size: 13.5px; font-weight: 500;
}
.link:hover { color: var(--coral); }
.back { display: inline-flex; align-items: center; gap: 7px; min-height: 24px; color: var(--ink-2);
        font-size: 13.5px; font-weight: 500; margin-bottom: 18px; }
.back:hover { color: var(--coral); }
.field__aux { display: inline-flex; align-items: center; min-height: 24px; }
.feed__ref { display: inline-flex; align-items: center; min-height: 24px; }
/* Left inline on purpose. WCAG 2.5.8 exempts a target that sits inside a
   sentence, and forcing an email address in a paragraph to 24px tall would
   break the line rhythm of the prose around it to satisfy a rule that does not
   apply to it. */
.inline-link { display: inline; }

/* =========================================================================
   Everything below arrived with the Laravel backend, when the screens stopped
   being a clickable prototype and started accepting input. Forms, dialogs,
   messages and empty states are all things a static mock never needed.
   ========================================================================= */

/* ------------------------------------------------------------- messages --- */
/* In the page, not floating. A toast saying "Released. The funds are on their
   way to the seller." disappears while the reader is still deciding whether
   they believe it, and that is the most consequential sentence here. */
.msg {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 15px; margin-bottom: 18px;
  border-radius: var(--r-sm); border: 1px solid;
  font-size: 13.5px; line-height: 1.55;
}
.msg p { margin: 0; }
.msg__mark {
  flex: none; display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  font-size: 12px; font-weight: 700;
}
.msg--ok  { background: var(--teal-dim);  border-color: rgba(33,199,199,.36); color: #a7ecec; }
.msg--ok  .msg__mark { background: var(--teal); color: #06201f; }
.msg--bad { background: var(--rose-dim);  border-color: rgba(239,128,121,.4); color: #f6b6b0; }
.msg--bad .msg__mark { background: var(--rose); color: #2a0f0d; }
.msg--key { background: var(--amber-dim); border-color: rgba(240,180,41,.42); color: #e8c98a; }
.msg--key .msg__mark { background: var(--amber); color: #241c04; }
.msg--key code { font-size: 14px; letter-spacing: .04em; color: var(--ink); }
.msg__list { margin: 6px 0 0; padding-left: 18px; }

/* --------------------------------------------------------------- forms ---- */
.input--sm   { min-height: 40px; font-size: 14px; padding: 0 11px; }
.input--area { min-height: 0; padding: 11px 14px; line-height: 1.55; resize: vertical; }
select.input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}
.field__err { margin-top: 7px; font-size: 12.5px; color: #f6b6b0; }
.field2 { display: grid; gap: 0 14px; }
@media (min-width: 620px) { .field2 { grid-template-columns: 1fr 1fr; } }

.check { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--coral); flex: none; }

.btn--sm { min-height: 38px; padding: 0 14px; font-size: 13.5px; }
/* Buttons wrap on a phone instead of squeezing to unreadable widths. The
   primary action keeps full width there, so the thumb target is the whole row
   and the destructive one is never adjacent to it by accident. */
.btnrow { display: flex; gap: 10px; flex-wrap: wrap; }
.btnrow > * { flex: 1 1 auto; }
.btnrow .btn { width: 100%; }
@media (min-width: 560px) {
  .btnrow > * { flex: 0 0 auto; }
  .btnrow .btn { width: auto; }
}

/* -------------------------------------------------------------- dialogs --- */
/* Native <dialog>: focus trapping, Escape, inertness behind and the top layer
   all come free, and a hand-rolled overlay gets at least one of them wrong. */
.dlg {
  width: min(460px, calc(100vw - 32px));
  padding: 0; border: 0; background: transparent;
  color: var(--ink);
}
.dlg::backdrop { background: rgba(8, 6, 6, .72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dlg__box {
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r); padding: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.dlg__title { margin-bottom: 9px; font-size: 17px; }
.dlg__body { color: var(--ink-2); font-size: 13.5px; line-height: 1.6; margin-bottom: 16px; }
.dlg__foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }
.dlg__foot .btn { flex: 1 1 auto; }
@media (min-width: 480px) { .dlg__foot .btn { flex: 0 0 auto; } }
.dlg .field__label { margin-top: 4px; }

/* --------------------------------------------------------------- quotes --- */
.quote { padding: 14px 16px; border-radius: var(--r-sm); background: var(--ground); border: 1px solid var(--line); }
.quote + .quote { margin-top: 10px; }
.quote__who { font-size: 12.5px; font-weight: 600; margin-bottom: 7px; }
.quote__body { font-size: 14px; line-height: 1.65; color: var(--ink-2); white-space: pre-line; }
.quote--decision { border-color: rgba(33,199,199,.34); background: var(--teal-dim); }
.quote--decision .quote__body { color: var(--ink); }

/* ------------------------------------------------------------ misc bits --- */
.card--act { border-color: rgba(240, 180, 41, .38); }
.card--dis { border-color: rgba(239, 128, 121, .38); }
.empty { text-align: center; padding: 34px 22px; }
.empty p { max-width: 46ch; margin-inline: auto; }
.warn { color: var(--amber); }
.inline-link { color: var(--coral); }
.inline-link:hover { text-decoration: underline; }
.tag {
  display: inline-block; margin-left: 8px; padding: 1px 7px;
  border-radius: 5px; background: rgba(242,250,250,.08);
  font-size: 10.5px; font-weight: 600; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .06em; vertical-align: 1px;
}
.feed__ref { margin-left: 7px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.feed__ref:hover { color: var(--coral); }
.page-head--row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.section-title { font-size: 15px; color: var(--ink-3); margin: 30px 0 12px; font-weight: 600; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- pager ---- */
.pager { margin-top: 18px; }
.pager svg { width: 15px; height: 15px; }
.pager nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pager nav > p, .pager p.small { font-size: 12.5px; color: var(--ink-3); margin: 0; }
.pager__controls { display: flex; gap: 8px; }
.pager [aria-disabled] { opacity: .42; }
.pager span, .pager a {
  display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 9px;
  border-radius: 8px; border: 1px solid var(--line); font-size: 13px; color: var(--ink-2);
}
.pager a:hover { border-color: var(--line-2); color: var(--ink); }
.pager [aria-current] span, .pager span[aria-current] { background: var(--coral); border-color: var(--coral); color: #14100f; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}