/* ==========================================================================
   console.css — Protocol console / Payouts (site/console.html) · v2 Lights Out
   Page-only styles, prefix cn-. Built on the shared shell and components in
   nett.css; every colour, radius and duration is a nett.css token. Nothing
   here restyles a shared class outside a cn- scope.
   ========================================================================== */

/* ---------- Top bar: workspace pill, key chip, search, actions ------------- */
.cn-top { gap: 12px; }

.cn-org {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  height: var(--nt-btn-h);
  padding: 0 10px 0 4px;
  border: 1px solid var(--nt-border-strong);
  border-radius: var(--nt-r-pill);
  font-size: var(--nt-fs-ui);
  line-height: 1;
  font-weight: var(--nt-w-bold);
  color: var(--nt-text-strong);
  white-space: nowrap;
  transition: background-color var(--nt-d-hover) var(--nt-ease), border-color var(--nt-d-hover) var(--nt-ease);
}
.cn-org:hover { background: var(--nt-surface-2); }
.cn-org > .nt-avatar { --nt-av-size: 28px; font-size: 11px; }
.cn-org__env {
  font-family: var(--nt-font-mono);
  font-size: var(--nt-fs-label);
  letter-spacing: var(--nt-ls-label);
  text-transform: uppercase;
  font-weight: var(--nt-w-regular);
  color: var(--nt-muted);
}
.cn-org__chev { width: 16px; height: 16px; margin-left: -2px; color: var(--nt-muted); }

.cn-keychip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 28px;
  padding: 0 10px;
  border: var(--nt-rule-hair);
  border-radius: var(--nt-r-pill);
  font-family: var(--nt-font-mono);
  font-size: var(--nt-fs-micro);
  line-height: 1;
  color: var(--nt-muted);
  white-space: nowrap;
}
.cn-keychip > svg { width: 14px; height: 14px; }
.cn-keychip--head { display: none; }

.cn-search .nt-search__input { padding-right: 48px; }
.cn-kbd {
  position: absolute;
  top: 50%;
  right: 12px;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border: 1px solid var(--nt-border-strong);
  border-radius: 6px;
  font-family: var(--nt-font-mono);
  font-size: var(--nt-fs-micro);
  line-height: 1;
  color: var(--nt-muted);
  pointer-events: none;
  transition: opacity var(--nt-d-hover) var(--nt-ease);
}
.cn-search:focus-within .cn-kbd { opacity: 0; }

.cn-upload > svg,
.cn-new > svg { width: 18px; height: 18px; margin-left: -4px; }
.cn-new.is-away { display: none; }   /* the composer is open: its submit is the view's one white pill */

/* ---------- Sidebar extras (the Resources group is nett.css .nt-side__nav--sub) --- */
.cn-account { width: 100%; text-align: left; }
.cn-account__more { width: 20px; height: 20px; margin-left: auto; color: var(--nt-text); }

/* ---------- Page head -------------------------------------------------------- */
.cn-main:focus { outline: none; }
.cn-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  padding-top: 12px;
}
.cn-head__main { min-width: 0; }
.cn-head__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cn-h1 {
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: var(--nt-w-bold);
  color: var(--nt-text-strong);
}
.cn-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 10px;
  font-family: var(--nt-font-mono);
  font-size: var(--nt-fs-micro);
  line-height: 20px;
  color: var(--nt-muted);
  font-variant-numeric: tabular-nums;
}
.cn-head__flight { display: inline-flex; align-items: center; gap: 8px; color: var(--nt-text); }
.cn-head__marker { display: inline-flex; }
.cn-head__marker:empty { display: none; }
.cn-head__meta .cn-keychip { margin-left: 8px; }
.cn-sep { color: var(--nt-muted); }
.cn-range { flex: none; }

/* ---------- Composer: inline card, X-Money-sized amount --------------------- */
.cn-composer {
  margin-top: 24px;
  padding: 12px 20px 20px;
  border: var(--nt-rule-hair);
  border-radius: var(--nt-r-card);
  background: var(--nt-surface);
  animation: cn-open var(--nt-d-insert) var(--nt-ease);
}
.cn-composer.is-done { padding-inline: 0; padding-bottom: 0; border-color: transparent; background: transparent; }
.cn-composer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
}
.cn-composer.is-done .cn-composer__head { padding-inline: 0; }
.cn-composer__title {
  font-size: var(--nt-fs-title);
  line-height: var(--nt-lh-title);
  letter-spacing: var(--nt-ls-title);
  font-weight: var(--nt-w-bold);
  color: var(--nt-text-strong);
}
.cn-composer__title:focus { outline: none; }   /* focused by script only, to move the reading position */
.cn-composer__head .nt-iconbtn { margin-right: -8px; }

.cn-form { display: grid; grid-template-columns: var(--nt-avatar) minmax(0, 1fr); column-gap: 14px; margin-top: 8px; }
.cn-form__from { padding-top: 34px; }
.cn-form__fields { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px 20px; }

.cn-input { height: 56px; font-size: 17px; }
.cn-handle .nt-handle__at { left: 16px; font-size: 17px; }
.cn-handle .cn-input { padding-left: 34px; }

.cn-money { position: relative; display: block; min-width: 0; }
.cn-money__cur {
  position: absolute;
  top: 0; bottom: 0; left: 16px;
  display: flex;
  align-items: center;
  font-size: 26px;
  font-weight: var(--nt-w-bold);
  letter-spacing: -0.02em;
  color: var(--nt-muted);
  pointer-events: none;
}
.cn-input--amount {
  padding-left: 36px;
  font-size: 26px;
  font-weight: var(--nt-w-bold);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cn-input--amount::placeholder { font-weight: var(--nt-w-bold); }

/* Accepted @handle: a mention token with its monogram (never a photo). */
.cn-tokenfield { position: relative; min-width: 0; }
.cn-token {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--nt-field);
  border-radius: var(--nt-r-input);
  background: var(--nt-surface-2);
}
.cn-token[hidden] { display: none; }
.cn-token__av { display: inline-flex; flex: none; }
.cn-token__av .nt-avatar { --nt-av-size: 32px; font-size: 12px; }
.cn-token > .nt-at {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  font-weight: var(--nt-w-bold);
  color: var(--nt-text-strong);
}
.cn-token__x {
  flex: none;
  height: var(--nt-btn-h-sm);
  padding: 0 12px;
  border: 1px solid var(--nt-border-strong);
  border-radius: var(--nt-r-pill);
  font-size: var(--nt-fs-small);
  font-weight: var(--nt-w-bold);
  color: var(--nt-text-strong);
  transition: background-color var(--nt-d-hover) var(--nt-ease);
}
.cn-token__x:hover { background: var(--nt-surface-3); }

.cn-form__foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: var(--nt-rule-hair);
}
.cn-review { min-width: 0; }
.cn-review__line {
  font-size: var(--nt-fs-small);
  line-height: var(--nt-lh-small);
  color: var(--nt-text);
}
.cn-review__num { font-family: var(--nt-font-mono); font-size: var(--nt-fs-data); font-variant-numeric: tabular-nums; }   /* facts in mono, the sentence in Inter */
.cn-review.is-empty .cn-review__line { color: var(--nt-muted); }
.cn-review__sub { margin-top: 4px; font-size: var(--nt-fs-small); line-height: var(--nt-lh-small); color: var(--nt-muted); }
.cn-review__sub .nt-at { font-weight: var(--nt-w-bold); color: var(--nt-text-strong); }
.cn-form__submit { flex: none; }

/* In flight: the payout reads like a post while it moves through the timeline. */
.cn-flight {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: 24px 48px;
  margin-top: 8px;
}
.cn-flight[hidden], .cn-done[hidden], .cn-form[hidden] { display: none; }
.cn-flight__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; }
.cn-flight__id { font-family: var(--nt-font-mono); font-size: var(--nt-fs-micro); color: var(--nt-muted); }
.cn-flight__sentence { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.cn-flight__amount {
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: var(--nt-w-bold);
  color: var(--nt-text-strong);
  font-variant-numeric: tabular-nums;
}
.cn-flight__line { font-size: var(--nt-fs-ui); line-height: 1.4; color: var(--nt-text); text-wrap: pretty; }
.cn-flight__line .nt-at { font-weight: var(--nt-w-bold); color: var(--nt-text-strong); }
.cn-flight__kv { margin-top: 16px; border-top: var(--nt-rule-hair); }
.cn-flight__kv .nt-countdown { font-size: inherit; }

/* Settled: the receipt card, the netting mark, the next action. */
.cn-done {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  align-items: start;
  gap: 24px 40px;
  margin-top: 8px;
}
.cn-done__side { padding-top: 8px; }
.cn-done__net { display: block; width: 40px; height: 40px; color: var(--nt-text-strong); }
.cn-done__net:empty { display: none; }
.cn-done__net .nt-netting { width: 40px; height: 40px; }
.cn-done__title {
  margin-top: 16px;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: var(--nt-w-bold);
  color: var(--nt-text-strong);
  font-variant-numeric: tabular-nums;
}
.cn-done__net:empty + .cn-done__title { margin-top: 0; }
.cn-done__text { margin-top: 8px; max-width: 44ch; color: var(--nt-muted); text-wrap: pretty; }
.cn-done__link { margin-top: 16px; }
.cn-done__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.cn-done__actions .nt-btn > svg { width: 18px; height: 18px; margin-left: -4px; }

/* ---------- Overview: chart card (the money) + figures card ----------------- */
.cn-overview {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.cn-chart { padding: 20px 20px 16px; }
.cn-chart__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; }
.cn-chart__value {
  margin-top: 8px;
  font-size: clamp(40px, 4.2vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.cn-bars { --nt-bars-h: 128px; }
.cn-bars .nt-bars__plot { justify-content: space-between; }
.cn-bars .nt-bars__bar { max-width: 36px; }

.cn-stats {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  border: var(--nt-rule-hair);
  border-radius: var(--nt-r-card);
  background: var(--nt-surface);
}
.cn-stat {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 16px 20px;
}
.cn-stat + .cn-stat { border-top: var(--nt-rule-hair); }
.cn-stat__label { font-size: var(--nt-fs-small); line-height: var(--nt-lh-small); font-weight: var(--nt-w-medium); color: var(--nt-text); }
.cn-stat__value {
  margin: 4px 0 0;
  font-size: var(--nt-fs-figure-app);
  line-height: 1.1;
  letter-spacing: var(--nt-ls-figure-app);
  font-weight: var(--nt-w-bold);
  color: var(--nt-text-strong);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cn-stat__sub { margin: 4px 0 0; font-size: var(--nt-fs-micro); line-height: 1.45; color: var(--nt-muted); }
.cn-stat__sub > span { display: block; }   /* one fact per line: nothing dangles when the card narrows */
.cn-stat__act { margin: 10px 0 0; }

/* ---------- Payouts: head, status pill tabs, view toggle, filters ----------- */
.cn-ledger { margin-top: 40px; }
.cn-ledger__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.cn-ledger__head .nt-section__title { margin-right: 4px; }
.cn-view { margin-left: auto; padding: 3px; }
.cn-view .nt-seg__opt > span { height: 30px; padding: 0 14px; font-size: var(--nt-fs-small); }

.cn-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 14px 0 12px; }
.cn-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.cn-filter { position: relative; }
.cn-filter .nt-filter > svg { width: 14px; height: 14px; margin-right: -4px; color: var(--nt-muted); }
.cn-filter .nt-filter.is-on { background: var(--nt-surface-2); border-color: var(--nt-text); color: var(--nt-text-strong); }
.cn-filter .nt-filter.is-on .nt-filter__value { color: var(--nt-text); }
.cn-clear {
  height: var(--nt-pill-h-sm);
  padding: 0 12px;
  border-radius: var(--nt-r-pill);
  font-size: var(--nt-fs-small);
  font-weight: var(--nt-w-medium);
  color: var(--nt-text);
  transition: background-color var(--nt-d-hover) var(--nt-ease), color var(--nt-d-hover) var(--nt-ease);
}
.cn-clear:hover { background: var(--nt-surface-2); color: var(--nt-text-strong); }

/* Filter menu: raised dark surface, 12px radius, no shadow. */
.cn-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 248px;
  padding: 6px;
  border: 1px solid var(--nt-border-strong);
  border-radius: var(--nt-r-input);
  background: var(--nt-surface-2);
}
.cn-pop.is-right { left: auto; right: 0; }
.cn-pop__opt {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border-radius: var(--nt-r-sm);
  font-size: var(--nt-fs-table);
  color: var(--nt-text);
  white-space: nowrap;
  transition: background-color var(--nt-d-hover) var(--nt-ease);
}
.cn-pop__opt > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cn-pop__opt:hover,
.cn-pop__opt:focus-visible { background: var(--nt-surface-3); }
.cn-pop__opt:focus-visible { outline-offset: -2px; }
.cn-pop__opt[aria-checked="true"] { font-weight: var(--nt-w-bold); color: var(--nt-text-strong); }
.cn-pop__check { width: 16px; height: 16px; visibility: hidden; }
.cn-pop__opt[aria-checked="true"] .cn-pop__check { visibility: visible; }
.cn-pop__opt .nt-at { font-weight: var(--nt-w-medium); }
.cn-pop__n {
  font-family: var(--nt-font-mono);
  font-size: var(--nt-fs-micro);
  font-weight: var(--nt-w-regular);
  color: var(--nt-muted);
  font-variant-numeric: tabular-nums;
}
.cn-pop__opt:is(:hover, :focus-visible) .cn-pop__n { color: var(--nt-text); }   /* Muted never sits on Surface-3 */

/* ---------- Table view: the power-user ledger, in a card ------------------- */
.cn-tablecard {
  border: var(--nt-rule-hair);
  border-radius: var(--nt-r-card);
  background: var(--nt-surface);
  overflow: clip;                    /* rounds the rows without breaking the sticky head */
}
/* Created · Payout ID · Recipient · Amount · Status · Settled in · Tx */
.cn-table {
  --nt-row-h: 56px;
  --nt-cols: 104px 140px minmax(0, 1fr) 140px 124px 132px 116px;
  --nt-cols-md: 88px minmax(0, 1fr) 112px 116px 96px;   /* tablet: the recipient keeps its handle whole */
}
.cn-table.nt-table--sticky thead { background: var(--nt-surface); }
.cn-table thead tr { border-bottom: var(--nt-rule-hair); }
@media (min-width: 768px) {
  .cn-table :is(th, td):first-child { padding-left: 20px; }
  .cn-table :is(th, td):last-child { padding-right: 20px; }
}
.cn-table tbody tr:hover { background: var(--nt-surface-2); }
.cn-table tbody tr:last-child { border-bottom: 0; }
.cn-table td.nt-cell--lead { gap: 10px; }
.cn-table td.nt-cell--lead .nt-avatar { --nt-av-size: 28px; font-size: 11px; }
.cn-table td.nt-cell--amount { font-size: var(--nt-fs-ui); }
.cn-table td.cn-col-id { color: var(--nt-muted); }
.cn-table td.cn-col-in { font-family: var(--nt-font-mono); font-size: var(--nt-fs-data); color: var(--nt-text); }
.cn-table .cn-col-in .nt-countdown { font-size: inherit; }
.cn-table .nt-tx:focus-visible { border-radius: 4px; }
.cn-table tfoot tr { grid-template-columns: minmax(0, 1fr) 140px 372px; border-top: var(--nt-rule-ink); }
.cn-table tfoot td { height: 60px; }
.cn-table tfoot .cn-total__n { margin-left: 8px; font-weight: var(--nt-w-regular); color: var(--nt-muted); }

@media (min-width: 768px) and (max-width: 1279px) {
  .cn-table tfoot tr { grid-template-columns: minmax(0, 1fr) 140px 256px; }
}

/* A payout you just created drops in; the Signal tint waits until it settles. */
.cn-table tr.cn-in { overflow: hidden; animation: nt-row-in var(--nt-d-insert) var(--nt-ease) backwards; }
.cn-table tr.cn-lit { animation: nt-tint var(--nt-d-tint) var(--nt-ease) backwards; }

/* ---------- Card view: UsePaid payment rows ---------------------------------- */
.cn-cards { gap: 10px; }
.cn-cards .nt-post { cursor: pointer; }
.cn-cards .nt-post__line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-card__fact { color: var(--nt-muted); }
.cn-card__fact .nt-countdown { font-size: var(--nt-fs-small); color: var(--nt-text); }
.cn-card__go { width: 18px; height: 18px; color: var(--nt-muted); }
.cn-card__open {
  position: absolute;
  inset: -1px;
  z-index: 1;
  border-radius: var(--nt-r-card);
}
.cn-card__open:focus-visible { outline-offset: 2px; }
.cn-cards .nt-post.is-selected { background: var(--nt-surface-2); border-color: var(--nt-text); }
.cn-cards .nt-post.cn-in { animation: nt-post-in var(--nt-d-insert) var(--nt-ease) backwards; }
.cn-cards .nt-post.cn-lit { animation: nt-tint-card var(--nt-d-tint) var(--nt-ease) backwards; }

.cn-cardtotal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 12px;
  padding: 16px 16px 8px;
  border-top: var(--nt-rule-ink);
  font-size: var(--nt-fs-ui);
  font-weight: var(--nt-w-bold);
  color: var(--nt-text-strong);
  font-variant-numeric: tabular-nums;
}
.cn-cardtotal[hidden] { display: none; }
.cn-cardtotal .cn-total__n { margin-left: 8px; font-weight: var(--nt-w-regular); color: var(--nt-muted); }

/* ---------- Empty, pagination ----------------------------------------------- */
.cn-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 48px 16px;
  border: 1px dashed var(--nt-border-strong);
  border-radius: var(--nt-r-card);
  text-align: center;
}
.cn-empty[hidden] { display: none; }
.cn-empty__title { font-size: var(--nt-fs-ui); font-weight: var(--nt-w-medium); color: var(--nt-text); }

.cn-more { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 16px; }
.cn-count,
.cn-more__note {
  font-size: var(--nt-fs-small);
  color: var(--nt-muted);
  font-variant-numeric: tabular-nums;
}
.cn-more__note { margin-left: auto; }

/* ---------- Side sheet extras ------------------------------------------------ */
.cn-sheet__id { font-family: var(--nt-font-mono); color: var(--nt-text); }
.cn-sheet .nt-sheet__sub { gap: 6px 8px; }
.cn-sheet .nt-sheet__sub .nt-avatar { --nt-av-size: 22px; font-size: 9px; }
.cn-sheet .nt-sheet__sub .cn-sheet__who { display: inline-flex; align-items: center; gap: 6px; }
.cn-sheet__note { margin-top: 12px; font-size: var(--nt-fs-small); color: var(--nt-muted); }
.cn-sheet .nt-kv__row > dd .nt-countdown { font-size: inherit; }
.cn-sheet__receipt { padding-top: 20px; font-size: var(--nt-fs-table); }
.cn-sheet__fine { margin-top: 16px; padding-top: 12px; border-top: var(--nt-rule-hair); font-size: var(--nt-fs-micro); line-height: 1.5; color: var(--nt-muted); }

/* ---------- Mobile menu extras ---------------------------------------------- */
.cn-menu__org { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0 16px; }

/* ---------- Responsive --------------------------------------------------------- */
/* The key chip joins the top bar only where the search pill can stay centred beside it. */
@media (max-width: 1599px) {
  .cn-keychip--top { display: none; }
}
@media (min-width: 768px) and (max-width: 1599px) {
  .cn-keychip--head { display: inline-flex; }
}
@media (max-width: 1023px) {
  .cn-overview { grid-template-columns: minmax(0, 1fr); }
  .cn-stats { flex-direction: row; }
  .cn-stat { justify-content: flex-start; }
  .cn-stat + .cn-stat { border-top: 0; border-left: var(--nt-rule-hair); }
  .cn-flight { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 24px 32px; }
  .cn-done { grid-template-columns: minmax(0, 1fr); }
  .cn-done .nt-receipt { max-width: 440px; }
}
@media (max-width: 899px) {
  .cn-upload { width: var(--nt-btn-h); padding: 0; }
  .cn-upload > svg { margin: 0; }
  .cn-upload__label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  /* Top bar: brand · New payout · Menu (the workspace moves into the page) */
  /* nett.css keeps .nt-top__keep (New payout) beside Menu; the lead (workspace, key) moves into the page. */
  .cn-top .nt-top__actions > .cn-new.is-away { display: none; }
  .cn-new > svg { width: 16px; height: 16px; }

  .cn-org-m { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
  .cn-head { padding-top: 0; }
  .cn-h1 { font-size: 28px; }
  .cn-range { display: flex; width: 100%; }
  .cn-range .nt-seg__opt { flex: 1 1 0; }
  .cn-range .nt-seg__opt > span { width: 100%; }

  .cn-composer { margin-top: 20px; padding: 8px 16px 16px; }
  .cn-form { grid-template-columns: minmax(0, 1fr); }
  .cn-form__from { display: none; }
  .cn-form__fields { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cn-form__foot { flex-direction: column; align-items: stretch; }
  .cn-review__line > .nt-nowrap { display: block; white-space: normal; }   /* two facts, two lines: no dangling separator */
  .cn-review__sep { display: none; }
  .cn-form__submit .nt-btn { width: 100%; }
  .cn-flight { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .cn-flight__amount { font-size: 36px; }

  .cn-overview { margin-top: 20px; gap: 12px; }
  .cn-chart { padding: 16px 16px 14px; }
  .cn-chart__value { font-size: 40px; }
  .cn-bars { --nt-bars-h: 112px; }
  .cn-bars .nt-bars__plot { gap: 3px; }
  .cn-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cn-stat { padding: 14px 16px; }
  .cn-stat:first-child { grid-column: 1 / -1; }
  .cn-stat + .cn-stat { border-left: 0; border-top: var(--nt-rule-hair); }
  .cn-stat:nth-child(3) { border-left: var(--nt-rule-hair); }
  .cn-stat__value { font-size: 24px; }

  .cn-ledger { margin-top: 32px; }
  .cn-ledger__head { gap: 12px; }
  .cn-status { order: 3; flex: 1 0 100%; }
  .cn-toolbar { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 12px; }
  .cn-msearch { max-width: none; margin: 0; flex: none; }
  .cn-filters { gap: 6px; }
  .cn-filter .nt-filter { gap: 4px; padding: 0 10px 0 12px; }
  .cn-pop { min-width: 232px; max-width: calc(100vw - 32px); }

  .cn-tablecard .nt-table tbody { border-top: 0; }
  .cn-table tr { padding: 14px 16px; }
  .cn-table td.nt-cell--lead .nt-avatar { --nt-av-size: 24px; font-size: 10px; }
  .cn-table tfoot tr { grid-template-columns: none; }
  .cn-table tfoot td { height: auto; }
  .cn-table tfoot td.nt-cell--lead { display: block; white-space: normal; overflow: hidden; }
  .cn-table tfoot td.nt-num { flex: none; }
  .cn-table tfoot .cn-total__n,
  .cn-cardtotal .cn-total__n { display: block; margin: 2px 0 0; font-size: var(--nt-fs-small); }

  .cn-more__note { flex-basis: 100%; margin-left: 0; }
}
@media (max-width: 479px) {
  .cn-card__fact { display: none; }            /* the chip carries the state; the handle keeps the line */
  .cn-status .nt-pilltab { padding: 0 10px; }
  .cn-view .nt-seg__opt > span { padding: 0 12px; }
}

@keyframes cn-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .cn-composer { animation: none; }
  .cn-table tr.cn-in, .cn-cards .nt-post.cn-in { animation: none; }
  .cn-table tr.cn-lit,
  .cn-cards .nt-post.cn-lit { animation: nt-tint-hold var(--nt-d-tint-reduced) linear backwards; }
  .cn-pop__opt, .cn-token__x, .cn-org, .cn-clear, .cn-kbd { transition: none; }
}