/* The partner portal's one stylesheet (admin ADR-0015, spec
   partner-portal-polish.md §1). Tokens first; every colour below is one of
   them. Screens are built from the components here — a template that needs a
   layout rule gets a class in this file, never a style attribute. */

@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque-latin-wght.ada540c0e24a.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-latin-wght.202cfb54d4e6.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin-wght.b058178d7f30.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --ink: #16181D;
  --muted: #5E6573;
  --line: #E3E6EB;
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --surface-2: #FAFBFC;
  --orange: #EC6820;
  --orange-soft: #FDEEE4;
  --ok: #1A7046;
  --ok-bg: #E6F4EC;
  --warn: #9A5B00;
  --warn-rail: #D98A00;
  --warn-bg: #FCF1DC;
  --bad: #B42318;
  --bad-bg: #FDECEA;
  --bad-line: #F4C7C3;
  --off: #C5CAD3;
  --in: #2B59C3;
  --in-bg: #E8EEFB;
  --out: #6B3FA0;
  --out-bg: #F1EAF9;
  --ev: #4A5160;
  --ev-bg: #EEF0F3;
  --code-bg: #0F172A;
  --code-ink: #E2E8F0;
  --scrim: rgba(22, 24, 29, .42);
  --display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --radius: 10px;
  --gap: 8px;
  color-scheme: light;
  --orange-fill: #C4520E;
  --on-orange: #FFFFFF;
  --orange-text: #B4470B;
  --attention-line: #F2D3B8;
  --ok-line: #BFE3CD;
  --evidence-row: #FEF6F5;
  --shadow: rgba(22, 24, 29, .25);
}

/* The dark theme: chosen by the operator (data-theme), or the system's when
   nothing was chosen. The two blocks carry the same values. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #E7E9EE;
  --muted: #9AA2B1;
  --line: #2A2F39;
  --bg: #0E1014;
  --surface: #161920;
  --surface-2: #1B1F27;
  --orange: #F07A38;
  --orange-soft: #3A2215;
  --orange-fill: #F07A38;
  --on-orange: #1A0E07;
  --orange-text: #F59A63;
  --ok: #52C98F;
  --ok-bg: #122A1E;
  --warn: #E4A94A;
  --warn-rail: #E4A94A;
  --warn-bg: #30240F;
  --bad: #F2786D;
  --bad-bg: #361715;
  --bad-line: #5A2622;
  --off: #4A5160;
  --in: #86A6F2;
  --in-bg: #182240;
  --out: #B895E6;
  --out-bg: #2A1D3D;
  --ev: #B4BAC6;
  --ev-bg: #232833;
  --code-bg: #0A0C10;
  --code-ink: #E2E8F0;
  --scrim: rgba(0, 0, 0, .6);
  --attention-line: #5A3A1E;
  --ok-line: #1F4A33;
  --evidence-row: #2A1614;
  --shadow: rgba(0, 0, 0, .6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #E7E9EE;
    --muted: #9AA2B1;
    --line: #2A2F39;
    --bg: #0E1014;
    --surface: #161920;
    --surface-2: #1B1F27;
    --orange: #F07A38;
    --orange-soft: #3A2215;
    --orange-fill: #F07A38;
    --on-orange: #1A0E07;
    --orange-text: #F59A63;
    --ok: #52C98F;
    --ok-bg: #122A1E;
    --warn: #E4A94A;
    --warn-rail: #E4A94A;
    --warn-bg: #30240F;
    --bad: #F2786D;
    --bad-bg: #361715;
    --bad-line: #5A2622;
    --off: #4A5160;
    --in: #86A6F2;
    --in-bg: #182240;
    --out: #B895E6;
    --out-bg: #2A1D3D;
    --ev: #B4BAC6;
    --ev-bg: #232833;
    --code-bg: #0A0C10;
    --code-ink: #E2E8F0;
    --scrim: rgba(0, 0, 0, .6);
    --attention-line: #5A3A1E;
    --ok-line: #1F4A33;
    --evidence-row: #2A1614;
    --shadow: rgba(0, 0, 0, .6);
  }
}

:root[data-theme="dark"] .ec-top__logo img { filter: brightness(0) invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ec-top__logo img { filter: brightness(0) invert(1); } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 14px/1.45 var(--body); color: var(--ink); background: var(--bg); }
a { color: inherit; }
p { margin: 0 0 10px; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
code, .ec-mono { font-family: var(--mono); font-size: 12.5px; }
.ec-muted { color: var(--muted); }
.ec-small { font-size: 12.5px; }
.ec-nowrap { white-space: nowrap; }

/* ---- Chrome ------------------------------------------------------------ */
.ec-top { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 8px 20px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.ec-top__logo img { height: 26px; display: block; }
.ec-search { flex: 1; max-width: 480px; margin: 0; }
.ec-search input { width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font: inherit; }
.ec-search input:focus { background: var(--surface); }
.ec-who { margin-left: auto; display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.ec-who form { margin: 0; }
.ec-menu-toggle { display: none !important; }
.ec-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: calc(100vh - 56px); }
.ec-shell--bare { grid-template-columns: minmax(0, 1fr); }
.ec-side { background: var(--surface); border-right: 1px solid var(--line); padding: 16px 12px; }
.ec-side h2 { margin: 16px 8px 4px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.ec-side h2:first-child { margin-top: 0; }
.ec-side a { display: block; padding: 7px 10px; border-radius: 7px; border-left: 2px solid transparent; text-decoration: none; }
.ec-side a:hover { background: var(--bg); }
.ec-side a[aria-current="page"] { background: var(--orange-soft); border-left-color: var(--orange); font-weight: 600; }
.ec-side__foot { display: none; }
.ec-main { min-width: 0; padding: 20px 24px 40px; width: 100%; }

/* ---- Breadcrumbs: the separator is a slanted hairline, never a glyph ---- */
.ec-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; padding: 0; list-style: none; font-size: 12.5px; color: var(--muted); }
.ec-crumbs li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ec-crumbs li + li::before { content: ""; width: 1px; height: 12px; background: var(--off); transform: skewX(-18deg); flex: none; }
.ec-crumbs a { text-decoration: none; }
.ec-crumbs a:hover { color: var(--ink); text-decoration: underline; }
.ec-crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }

/* ---- Page header ------------------------------------------------------- */
.ec-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; margin: 0 0 16px;
}
.ec-head > div:first-child { flex: 1 1 320px; min-width: 0; }
.ec-head > .ec-actions {
  flex: 0 0 auto; flex-wrap: nowrap; margin-left: auto;
}
.ec-head h1 { margin: 0; font: 650 22px/1.2 var(--display); letter-spacing: -.015em; overflow-wrap: anywhere; }
.ec-head__lead { margin: 4px 0 0; color: var(--muted); }

/* ---- Buttons, and the group every button lives in ---------------------- */
.ec-actions { display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap; }
.ec-actions--end { justify-content: flex-end; }
.ec-actions form { margin: 0; display: contents; }
.ec-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 13px/1 var(--body); text-decoration: none; cursor: pointer; white-space: nowrap; }
.ec-btn:hover { border-color: var(--ink); }
.ec-btn.primary { background: var(--orange-fill); border-color: var(--orange-fill); color: var(--on-orange); }
.ec-btn.primary:hover { filter: brightness(.95); }
.ec-btn.danger { color: var(--bad); }
.ec-btn.danger:hover { border-color: var(--bad); }
.ec-btn.sm { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 7px; }
.ec-btn.wide { width: 100%; }
.ec-btn[disabled] { opacity: .55; cursor: default; }

/* ---- Panels and tiles -------------------------------------------------- */
.ec-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 16px; }
.ec-panel--attention { border-color: var(--attention-line); }
.ec-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--line); margin: 0; }
.ec-panel__head:last-child { border-bottom: 0; }
.ec-panel__head h2 { margin: 0; font: 650 15px/1.3 var(--display); }
.ec-panel__sub { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.ec-panel__body { padding: 16px; }
.ec-panel__body > :last-child { margin-bottom: 0; }
.ec-panel__foot { display: flex; justify-content: flex-end; gap: var(--gap); padding: 12px 16px; border-top: 1px solid var(--line); }
.ec-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin: 0 0 16px; }
.ec-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; min-width: 0; }
.ec-tile__label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ec-tile__value {
  display: block; margin-top: 4px; font: 650 clamp(18px, 1.9vw, 26px)/1.15 var(--display);
  font-variant-numeric: tabular-nums; text-decoration: none; overflow-wrap: break-word;
}
.ec-tile__value--off {
  font-size: 15px; font-weight: 500; color: var(--muted);
}
a.ec-tile__value:hover { color: var(--orange); }
.ec-tile .ec-actions { margin-top: 10px; }
/* A button that opened a dialog and is waiting for it: visibly working, not clickable. */
.ec-btn[aria-busy="true"] { opacity: .6; cursor: progress; pointer-events: none; }
/* A tile with more than one line under its figure says each on its own line. */
.ec-tile > .ec-sub { display: block; margin-top: 2px; }
.ec-tile > .ec-sig { display: flex; margin-top: 2px; white-space: normal; }
.ec-narrow { max-width: 460px; margin: 0 auto; }
.ec-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
/* The contract's products side by side: the grid's gap is their spacing. */
.ec-split--products { margin: 0 0 16px; }
.ec-split--products > .ec-panel { margin: 0; }

/* ---- Tables: fixed layout, a colgroup per table, actions last ---------- */
.ec-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ec-table th { text-align: left; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 9px 16px; border-bottom: 1px solid var(--line); }
.ec-table td { padding: 10px 16px; border-top: 1px solid var(--line); vertical-align: middle; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ec-table tbody tr:first-child td { border-top: 0; }
.ec-table .ec-cell-actions { text-align: right; }
.ec-table .ec-cell-actions .ec-actions { justify-content: flex-end; flex-wrap: nowrap; }
.ec-table .ec-cell-num { text-align: right; white-space: nowrap; }
.ec-table .ec-cell-select { width: 44px; }
.ec-table .ec-sub { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.ec-table .ec-big { font: 650 18px/1 var(--display); color: var(--warn); }
.ec-table tr.ec-rail-ok td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.ec-table tr.ec-rail-warn td:first-child { box-shadow: inset 3px 0 0 var(--warn-rail); }
.ec-table tr.ec-rail-bad td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.ec-table tr.ec-rail-off td:first-child { box-shadow: inset 3px 0 0 var(--off); }
.ec-table-wrap { overflow-x: auto; }
.ec-empty { padding: 20px 16px; color: var(--muted); }
td.ec-empty { text-align: left; }

/* ---- Signals and tags -------------------------------------------------- */
.ec-sig { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ec-sig::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: currentColor; flex: none; }
.ec-sig.ok { color: var(--ok); }
.ec-sig.warn { color: var(--warn); }
.ec-sig.bad { color: var(--bad); }
.ec-sig.off, .ec-sig.muted { color: var(--muted); }
.ec-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.ec-tag.in { background: var(--in-bg); color: var(--in); }
.ec-tag.out { background: var(--out-bg); color: var(--out); }
.ec-tag.ev { background: var(--ev-bg); color: var(--ev); }
.ec-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; color: var(--muted); font-size: 12.5px; margin: 0; }
.ec-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* ---- Tabs and pager ---------------------------------------------------- */
.ec-tabs { display: flex; gap: 4px; padding: 0 12px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.ec-tabs a { padding: 10px 10px 9px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; font-size: 13px; }
.ec-tabs a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.ec-count { font-family: var(--mono); font-size: 11px; margin-left: 4px; color: var(--muted); }
.ec-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
.ec-pager .ec-btn[aria-current="page"] { border-color: var(--ink); }

/* ---- Forms ------------------------------------------------------------- */
.ec-label { display: block; margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.ec-input { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; color: var(--ink); background: var(--surface); margin: 0 0 12px; }
textarea.ec-input { height: auto; min-height: 80px; padding: 10px 12px; }
select.ec-input { padding-right: 8px; }
.ec-input--inline { width: auto; min-width: 150px; margin: 0; }
.ec-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; align-items: end; padding: 16px; }
.ec-filters .ec-input { margin: 0; }
.ec-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 12px; margin: 0 0 12px; }
/* An event family in the address dialog: its name, "Marcar todos", its events. */
.ec-family { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 10px 0 0; min-width: 0; }
.ec-family legend { float: left; padding: 0; font-size: 13px; font-weight: 600; line-height: 32px; }
.ec-family__all { float: right; }
.ec-family .ec-checks { clear: both; padding-top: 4px; }
.ec-checks label { display: flex; gap: 8px; align-items: center; font-size: 13px; min-height: 32px; }
/* A money field: "R$" in front, digits typed from the right (money.js). */
.ec-amount { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 12px; background: var(--surface); }
.ec-amount > span { padding-left: 12px; color: var(--muted); font-size: 14px; }
.ec-amount input.ec-input { border: 0; margin-bottom: 0; text-align: right; font-variant-numeric: tabular-nums; background: transparent; }
.ec-amount:focus-within { outline: 2px solid var(--orange); outline-offset: 1px; }
.ec-amount input.ec-input:focus-visible { outline: 0; }

/* ---- Messages ---------------------------------------------------------- */
.ec-error { background: var(--bad-bg); border: 1px solid var(--bad-line); color: var(--bad); border-radius: var(--radius); padding: 12px 16px; margin: 0 0 16px; }
.ec-technical { margin-top: 6px; font-size: 12px; }
.ec-technical summary { cursor: pointer; }
.ec-notice { background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok); border-radius: var(--radius); padding: 12px 16px; margin: 0 0 16px; }
.ec-banner { background: var(--warn-bg); border: 1px solid var(--attention-line); color: var(--warn); border-radius: var(--radius); padding: 12px 16px; margin: 0 0 16px; }
.ec-panel > .ec-banner { margin: 12px 16px; }

/* ---- Code, QR, evidence ------------------------------------------------ */
.ec-code { background: var(--code-bg); color: var(--code-ink); border-radius: 8px; padding: 12px; font: 12px/1.5 var(--mono); overflow-x: auto; white-space: pre-wrap; word-break: break-word; margin: 0; }
.ec-qr { margin-top: 12px; width: 220px; max-width: 100%; padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.ec-qr svg { display: block; width: 100%; height: auto; }
.ec-evidence td { background: var(--evidence-row); }
.ec-evidence__why { margin: 0 0 8px; color: var(--bad); font-weight: 500; }
.ec-evidence__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.ec-eyebrow { margin: 0 0 6px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ec-cardlist { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.ec-cardlist li { display: flex; gap: 8px; align-items: center; min-width: 0; }
.ec-cardlist .ec-sig { margin-left: auto; }
.ec-deflist { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 6px 12px; margin: 0; }
.ec-deflist dt { color: var(--muted); }
.ec-deflist dd { margin: 0; overflow-wrap: anywhere; }
.ec-deflist dd .ec-sub { display: block; color: var(--muted); font-size: 12.5px; }

/* ---- Dialogs: forms that are not always needed, and the confirmation --- */
.ec-dialog { width: min(520px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 12px; box-shadow: 0 20px 50px var(--shadow); color: var(--ink); background: var(--surface); }
.ec-dialog::backdrop { background: var(--scrim); }
.ec-dialog form { margin: 0; }
.ec-dialog__body { padding: 18px 20px; }
.ec-dialog__body h2 { margin: 0 0 12px; font: 650 17px/1.3 var(--display); }
.ec-dialog__eyebrow { margin: 0; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ec-dialog__amount { margin: 4px 0 8px; font: 650 30px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.ec-dialog__foot { display: flex; justify-content: flex-end; gap: var(--gap); padding: 12px 20px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 12px 12px; }
.ec-dialog__error { margin: 0 0 12px; color: var(--bad); font-weight: 500; }
.ec-dialog__note { margin: 0; color: var(--muted); font-size: 12.5px; }
.ec-proof { font: 600 20px/1 var(--mono); letter-spacing: .3em; text-align: center; height: 48px; }
.ec-proof[type="password"] { letter-spacing: normal; font: 15px/1 var(--body); text-align: left; }

/* ---- Row menu ("Mais") ------------------------------------------------- */
.ec-menu { position: relative; display: inline-flex; }
.ec-menu__list { position: absolute; right: 0; top: calc(100% + 4px); min-width: 180px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px var(--shadow); padding: 4px; z-index: 5; text-align: left; }
.ec-menu__list button { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: 6px; font: inherit; color: var(--ink); cursor: pointer; }
.ec-menu__list button:hover { background: var(--bg); }
.ec-menu__list .danger { color: var(--bad); }

/* ---- The bounded wait (js/waiting.js) ---------------------------------
   The bar is TIME, not progress: the platform answers once, at the end.
   Saying how much of the wait has gone is what keeps a slow answer from
   reading as a dead page — and a dead page is what makes somebody send the
   money a second time. */
.ec-waiting { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ec-waiting__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.ec-waiting__label { font-weight: 600; font-size: 14px; }
.ec-waiting__clock { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ec-waiting__track { height: 6px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.ec-waiting__fill { display: block; height: 100%; width: 0; border-radius: inherit; background-color: var(--orange);
                    background-image: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
                    background-size: 40% 100%; background-repeat: no-repeat;
                    transition: width .9s linear; animation: ec-waiting-sheen 1.6s linear infinite; }
.ec-waiting__track[data-waiting-over] .ec-waiting__fill { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 8px, transparent 8px 16px); animation: ec-waiting-stripes 1s linear infinite; }
.ec-waiting__hint { font-size: 13px; color: var(--muted); margin: 0; }
@keyframes ec-waiting-sheen { from { background-position: -45% 0; } to { background-position: 145% 0; } }
@keyframes ec-waiting-stripes { to { background-position: 22.7px 0; } }

/* ---- The full-page confirmation (no-JavaScript fallback) --------------- */
.ec-stepup__amount { margin: 0 0 6px; font: 650 26px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.ec-stepup__form { display: flex; flex-direction: column; gap: 8px; }
.ec-stepup__foot { margin: 12px 0 0; font-size: 13px; color: var(--muted); }

/* ---- The session clock ------------------------------------------------- */
.ec-session { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px; background: var(--bg); color: var(--muted); font-size: 13px; }
.ec-session b { font-variant-numeric: tabular-nums; color: var(--ink); }
.ec-session__what { font-size: 12px; }
.ec-session[data-session-warn] { background: var(--bad-bg); color: var(--bad); }
.ec-session[data-session-warn] b { color: var(--bad); }
/* The button belongs to the warning: while there is time, the tab is
   already buying more by itself. */
.ec-session__stay { display: none !important; }
.ec-session[data-session-warn] .ec-session__stay { display: inline-flex !important; }

@media (prefers-reduced-motion: reduce) {
  .ec-waiting__fill { animation: none; transition: none; background-image: none; }
  .ec-side { transition: none !important; }
}

/* ---- Phone (spec §5) --------------------------------------------------- */
@media (max-width: 760px) {
  .ec-top { flex-wrap: wrap; padding: 8px 14px; gap: 10px; }
  .ec-menu-toggle { display: inline-flex !important; }
  .ec-search { order: 3; flex-basis: 100%; max-width: none; }
  .ec-who__id, .ec-who__out { display: none !important; }
  .ec-shell { grid-template-columns: minmax(0, 1fr); }
  .ec-side { position: fixed; inset: 0 auto 0 0; width: 280px; z-index: 20; transform: translateX(-100%); transition: transform .2s; overflow-y: auto; border-right: 0; }
  body[data-menu-open] .ec-side { transform: none; box-shadow: 0 0 0 100vmax var(--scrim); }
  .ec-side a { padding: 11px 10px; }
  .ec-side__foot { display: block; border-top: 1px solid var(--line); margin-top: 16px; padding: 12px 8px 0; color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
  .ec-side__foot .ec-btn { width: 100%; }
  .ec-main { padding: 14px 14px 32px; }
  .ec-head { flex-direction: column; align-items: stretch; }
  .ec-head > div:first-child { flex-basis: auto; }
  .ec-head > .ec-actions { flex-wrap: wrap; margin-left: 0; }
  .ec-head .ec-actions > .ec-btn, .ec-head .ec-actions > form, .ec-panel__head .ec-actions > .ec-btn, .ec-panel__head .ec-actions > form > .ec-btn { flex: 1; }
  .ec-btn { height: 40px; }
  .ec-btn.sm { height: 36px; }
  .ec-panel__head .ec-actions { width: 100%; }
  .ec-input--inline { width: 100%; min-width: 0; }
  .ec-table, .ec-table tbody, .ec-table tr, .ec-table td { display: block; width: 100%; }
  .ec-table colgroup, .ec-table thead { display: none; }
  .ec-table tr { border-top: 1px solid var(--line); padding: 10px 14px; }
  .ec-table tbody tr:first-child { border-top: 0; }
  .ec-table td { border: 0; padding: 3px 0; }
  .ec-table td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
  .ec-table tr.ec-rail-ok { box-shadow: inset 3px 0 0 var(--ok); }
  .ec-table tr.ec-rail-warn { box-shadow: inset 3px 0 0 var(--warn-rail); }
  .ec-table tr.ec-rail-bad { box-shadow: inset 3px 0 0 var(--bad); }
  .ec-table tr.ec-rail-off { box-shadow: inset 3px 0 0 var(--off); }
  .ec-table tr td:first-child { box-shadow: none !important; }
  .ec-table .ec-cell-actions { text-align: left; padding-top: 8px; }
  .ec-table .ec-cell-actions .ec-actions { justify-content: stretch; flex-wrap: wrap; }
  .ec-table .ec-cell-actions .ec-actions > .ec-btn, .ec-table .ec-cell-actions .ec-menu { flex: 1; }
  .ec-table .ec-cell-actions .ec-menu > .ec-btn { width: 100%; }
  .ec-table .ec-cell-num { text-align: left; }
  .ec-table .ec-cell-select { width: 100%; }
  .ec-filters { grid-template-columns: minmax(0, 1fr); }
  .ec-dialog { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 16px 16px 0 0; }
  .ec-dialog__foot { flex-direction: column-reverse; border-radius: 0; }
  .ec-dialog__foot .ec-btn { width: 100%; height: 44px; }
  .ec-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ec-tile__value { font-size: 19px; }
  .ec-deflist { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ec-deflist dd { margin-bottom: 8px; }
}

/* ---- Column widths: named, so a table says what its columns are -------- */
.ec-col-when { width: 130px; }
.ec-col-tag { width: 100px; }
.ec-col-status { width: 220px; }
.ec-col-short { width: 110px; }
.ec-col-mid { width: 170px; }
.ec-col-count { width: 70px; }
.ec-col-actions { width: 140px; }
.ec-col-actions-wide { width: 300px; }
.ec-col-select { width: 44px; }
.ec-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ec-code--inline { margin-top: 6px; }
.ec-deflist--headers { margin-bottom: 12px; }
.ec-input--search { min-width: 330px; }
@media (max-width: 760px) { .ec-input--search { min-width: 0; } }
.ec-step-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ev-bg); color: var(--ev); font: 700 13px/1 var(--body); }
.ec-steps tr.ec-rail-ok .ec-step-n { background: var(--ok-bg); color: var(--ok); }
.ec-steps tr.ec-rail-warn .ec-step-n { background: var(--orange-fill); color: var(--on-orange); }
.ec-secret { overflow-wrap: anywhere; flex: 1; min-width: 0; }
.ec-panel__foot { flex-wrap: wrap; align-items: center; }
.ec-foot-note { margin-right: auto; }

/* ---- Sign-in, second factor, invitation, password reset ---------------- */
.ec-auth { max-width: 400px; margin: 8vh auto; padding: 0 16px; }
.ec-auth__logo { text-align: center; margin-bottom: 24px; }
.ec-auth__logo img { height: 32px; }
.ec-auth__title { margin: 0 0 16px; font: 650 20px/1.2 var(--display); }
.ec-auth__foot { margin: 16px 0 0; text-align: center; font-size: 13px; }
.ec-field-hint { margin: -4px 0 12px; }
.ec-disclosure { margin-top: 12px; }
.ec-disclosure summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.ec-disclosure .ec-tile { margin-top: 8px; }
.ec-secret--big { font-size: 15px; letter-spacing: .04em; }
.ec-stack { margin-top: 16px; }

/* ---- Company balance (float.html) --------------------------------------- */
.ec-money { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 16px; }
.ec-money > .ec-panel { margin-bottom: 0; }
.ec-money__box { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.ec-money__box form { margin: 0; }
.ec-hint { color: var(--muted); font-size: 13px; margin: 0; }
.ec-section-title { margin: 0; font: 650 15px/1.3 var(--display); }
/* The day's top-ups (ADR-0089): one mark per window the company has, filled as
   it uses them, beside the count in words. */
.ec-money__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ec-day { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.ec-day-slots { display: inline-flex; gap: 3px; }
.ec-day-slot { width: 14px; height: 6px; border-radius: 3px; background: var(--line); }
.ec-day-slot.used { background: var(--orange); }
.ec-day.is-full { color: var(--warn); }
.ec-day.is-full .ec-day-slot.used { background: var(--warn-rail); }
.ec-money__box > .ec-banner--tight { margin: 0; }
.ec-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.ec-fieldset:disabled .ec-amount, .ec-fieldset:disabled .ec-btn { opacity: .55; cursor: not-allowed; }
.ec-float-split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }
.ec-float-split b { display: block; font-variant-numeric: tabular-nums; }
.ec-float-split span { font-size: 12px; color: var(--muted); }
.ec-deposit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 12px; }
.ec-deposit.with-qr { grid-template-columns: 200px minmax(0, 1fr); }
.ec-deposit img { width: 200px; height: 200px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ec-deposit__side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ec-field-label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.ec-keybox { display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 6px 6px 6px 11px; background: var(--surface-2); }
.ec-keybox code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.ec-inline { display: grid; grid-template-columns: minmax(0, 220px) auto; gap: 10px; align-items: end; }
.ec-inline .ec-input, .ec-inline .ec-amount { margin-bottom: 0; }
.ec-error--tight { margin: 0; }
.ec-form-narrow { max-width: 420px; }
@media (max-width: 760px) {
  .ec-deposit.with-qr, .ec-inline { grid-template-columns: minmax(0, 1fr); }
  .ec-money { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Credentials (credentials.html) ------------------------------------
   Permissions are CHOSEN, never typed: each says what it lets the credential
   do, and the locked ones say who grants them. */
.ec-dialog--wide { width: min(760px, calc(100vw - 32px)); }
.ec-perm { display: grid; grid-template-columns: 160px minmax(0, 1fr); border-top: 1px solid var(--line); }
.ec-perm:first-of-type { border-top: 0; }
.ec-perm > h3 { font-size: 14px; margin: 0; padding: 12px 0; }
.ec-perm .opts { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0; }
.ec-opt { display: flex; gap: 9px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 11px; flex: 1; min-width: 230px; cursor: pointer; background: var(--surface); }
.ec-opt input { margin-top: 3px; accent-color: var(--orange); }
.ec-opt:has(input:checked) { border-color: var(--orange); background: var(--orange-soft); }
.ec-opt.locked { background: var(--bg); cursor: not-allowed; }
.ec-opt .t { font-size: 14px; font-weight: 600; display: block; }
.ec-opt.locked .t { color: var(--muted); }
.ec-opt .d, .ec-opt .c { display: block; font-size: 12px; color: var(--muted); }
.ec-opt .c { font-family: var(--mono); font-size: 11px; }
.ec-presets { margin: 4px 0 8px; }
.ec-code--light { background: var(--bg); color: var(--ink); white-space: pre; }
textarea.ec-input.ec-mono { min-height: 96px; font-size: 12.5px; }
/* THE ADDRESS LIST. A mistyped range does not fail loudly — it locks an
   integration out of itself at the next token request, hours later. So an
   entry is a chip only once it has been read back as the range it will
   become, and the line below says what that is while it is typed. */
.ec-allow__lead { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; line-height: 1.5; }
.ec-allow-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ec-allow-chips:empty::before { content: "Qualquer endereço, sem restrição."; font-size: 12.5px; color: var(--muted); }
.ec-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 4px 3px 10px; background: var(--surface); }
.ec-chip code { font-size: 12px; }
.ec-chip__x { border: 0; background: var(--bg); color: var(--muted); border-radius: 999px; width: 24px; height: 24px; line-height: 1; cursor: pointer; font-size: 13px; }
.ec-chip__x:hover { background: var(--bad-bg); color: var(--bad); }
.ec-allow__add { display: flex; gap: 6px; align-items: flex-start; }
.ec-allow__add .ec-input { flex: 1; font-family: var(--mono); font-size: 12.5px; margin: 0; }
.ec-allow__add .ec-btn { height: 38px; }
.ec-allow__help { font-size: 12px; color: var(--muted); margin: 6px 0 0; min-height: 1.2em; }
.ec-allow__help[data-allowlist-tone="bad"] { color: var(--bad); }
.ec-allow__count { font-size: 12px; color: var(--muted); margin: 2px 0 10px; }
.ec-allow__warn { font-size: 12.5px; background: var(--warn-bg); color: var(--warn); border-radius: 8px; padding: 8px 10px; margin: 0 0 10px; line-height: 1.5; }
.ec-addr { display: inline-block; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
@media (max-width: 760px) { .ec-perm { grid-template-columns: minmax(0, 1fr); } .ec-opt { min-width: 0; } }

/* ---- Feeds on a phone (spec §5) -----------------------------------------
   The long lists — what happened to a customer, the calls, the events, the
   recent activity — read as the approved mockup drew them: what it was and the
   amount on top, when and the situation under it, the button at the foot.
   Their labels go: each line already says what it is by where it sits. */
@media (max-width: 760px) {
  .ec-table--feed tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "select select" "main amount" "tag status" "meta meta" "extra extra" "act act"; gap: 2px 10px; align-items: center; }
  .ec-table--feed td { display: block; width: auto; padding: 0; }
  .ec-table--feed td[data-label]::before { content: none; }
  .ec-table--feed .ec-c-main { grid-area: main; font-weight: 600; }
  .ec-table--feed .ec-c-main .ec-sub { font-weight: 400; }
  .ec-table--feed .ec-c-amount { grid-area: amount; text-align: right; font-weight: 600; }
  .ec-table--feed .ec-c-amount:empty { display: none; }
  .ec-table--feed .ec-c-tag { grid-area: tag; }
  .ec-table--feed .ec-c-status { grid-area: status; justify-self: end; }
  .ec-table--feed .ec-c-meta { grid-area: meta; font-size: 12px; }
  .ec-table--feed .ec-c-extra { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
  .ec-table--feed .ec-c-extra[data-label]::before { content: attr(data-label) ": "; display: inline; font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; }
  .ec-table--feed .ec-c-select { grid-area: select; }
  .ec-table--feed .ec-c-act { grid-area: act; padding-top: 6px; }
  .ec-table--feed .ec-c-act:empty { display: none; }
}

/* ---- Operations (spec partner-portal-operations.md) --------------------
   The money, operation by operation: rows under their Brasília day, an amount
   struck through when it moved nothing, and each operation's story on its own
   page. */
.ec-table td.ec-c-amount { text-align: right; white-space: nowrap; font-weight: 600; }
.ec-table td.strike, .ec-amount-big.strike { text-decoration: line-through; color: var(--muted); font-weight: 500; }
.ec-table tr.ec-dayrow td { background: var(--surface-2); padding: 7px 16px; border-top: 1px solid var(--line); font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ec-table tbody tr.ec-dayrow:first-child td { border-top: 0; }
.ec-dayrow__totals { float: right; text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ec-amount-big { display: block; margin-top: 2px; font: 650 26px/1.15 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ec-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.ec-detail > .ec-panel { margin-bottom: 0; }
/* The left column of a detail page when it holds more than one panel: they
   stack with the grid's own gap, so no row height is borrowed from the right. */
.ec-detail__main { display: grid; gap: 16px; min-width: 0; }
.ec-detail__main > .ec-panel { margin-bottom: 0; }

/* The story: the Brasília time, a square marker on a rail — the same square
   as a status signal — what happened, and under it what we told the company's
   system. */
.ec-story { list-style: none; margin: 0; padding: 16px 16px 4px; }
.ec-story__step { display: grid; grid-template-columns: 96px 18px minmax(0, 1fr); column-gap: 12px; position: relative; padding-bottom: 20px; }
.ec-story__step::before { content: ""; position: absolute; left: 116px; top: 14px; bottom: 0; width: 2px; background: var(--line); }
.ec-story__step:last-child::before { display: none; }
.ec-story__when { text-align: right; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1.3; padding-top: 1px; }
.ec-story__when b { display: block; color: var(--ink); font-weight: 600; font-size: 13px; }
.ec-story__mark { width: 18px; height: 18px; display: grid; place-items: center; position: relative; z-index: 1; }
.ec-story__mark::after { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--surface); border: 2px solid var(--off); }
.ec-story__step.ok .ec-story__mark::after { background: var(--ok); border-color: var(--ok); }
.ec-story__step.warn .ec-story__mark::after { background: var(--warn-rail); border-color: var(--warn-rail); }
.ec-story__step.bad .ec-story__mark::after { background: var(--bad); border-color: var(--bad); }
.ec-story__step.off .ec-story__mark::after { background: var(--off); border-color: var(--off); }
.ec-story__step.now .ec-story__mark::after { border-color: var(--warn-rail); box-shadow: 0 0 0 4px var(--warn-bg); }
.ec-story__step.next .ec-story__what { color: var(--muted); }
.ec-story__what { min-width: 0; }
.ec-story__what h3 { margin: 0; font: 650 14px/1.3 var(--display); }
.ec-story__what p { margin: 2px 0 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.ec-story__act { margin-top: 8px; }
.ec-story__notice { margin-top: 8px; display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 8px; padding: 6px 6px 6px 10px; background: var(--surface-2); font-size: 12.5px; }
.ec-story__notice .ec-btn { margin-left: auto; }

/* The menu button: three bars drawn here, crossed while the drawer is open.
   No word and no glyph on it; its name is its aria-label. */
.ec-menu-toggle { width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; align-items: center; justify-content: center; }
.ec-menu-toggle__bars, .ec-menu-toggle__bars::before, .ec-menu-toggle__bars::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .15s, background-color .15s; }
.ec-menu-toggle__bars { position: relative; }
.ec-menu-toggle__bars::before, .ec-menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
.ec-menu-toggle__bars::before { top: -6px; }
.ec-menu-toggle__bars::after { top: 6px; }
.ec-menu-toggle[aria-expanded="true"] .ec-menu-toggle__bars { background: transparent; }
.ec-menu-toggle[aria-expanded="true"] .ec-menu-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.ec-menu-toggle[aria-expanded="true"] .ec-menu-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .ec-menu-toggle__bars, .ec-menu-toggle__bars::before, .ec-menu-toggle__bars::after { transition: none; }
}

@media (max-width: 760px) {
  .ec-detail { grid-template-columns: minmax(0, 1fr); }
  .ec-table--feed tr.ec-dayrow { display: block; padding: 0; box-shadow: none; }
  .ec-table--feed tr.ec-dayrow td { display: block; padding: 8px 14px; }
  .ec-dayrow__totals { float: none; display: block; margin-top: 2px; }
  .ec-table--feed td.ec-c-amount { text-align: right; }
  .ec-story { padding: 12px 12px 4px; }
  .ec-story__step { grid-template-columns: 18px minmax(0, 1fr); }
  .ec-story__step::before { left: 8px; }
  .ec-story__when { grid-column: 2; grid-row: 1; text-align: left; font-size: 12px; margin-bottom: 2px; }
  .ec-story__when b { display: inline; font-size: 12px; margin-right: 4px; }
  .ec-story__mark { grid-column: 1; grid-row: 1 / span 2; }
  .ec-story__what { grid-column: 2; }
  .ec-story__notice .ec-btn { margin-left: 0; width: 100%; }
}

/* ==== Admin operations panel (admin ADR-0016): the list and record moulds ==== */
/* ---- Sidebar count badges ---------------------------------------------- */
.ec-side a { display: flex; align-items: center; gap: 8px; }
.ec-side .n { margin-left: auto; font: 600 11px/18px var(--mono); padding: 0 6px; border-radius: 5px; background: var(--bg); color: var(--muted); }
.ec-side .n.hot { background: var(--orange-fill); color: var(--on-orange); }

/* ---- List toolbar ------------------------------------------------------ */
.ec-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ec-toolbar .ec-input { margin: 0; height: 36px; }
.ec-toolbar .grow { flex: 1; min-width: 220px; }
.ec-filterchip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px dashed var(--off); border-radius: 999px; font-size: 12.5px; color: var(--muted); background: none; font-family: inherit; cursor: pointer; }
.ec-filterchip.on { border-style: solid; border-color: var(--ink); color: var(--ink); }
.ec-filterchip b { font-weight: 600; color: var(--ink); }
.ec-table tbody tr.ec-row-link { cursor: pointer; }
.ec-table tbody tr.ec-row-link:hover td { background: var(--surface-2); }
.ec-table tbody tr.is-selected td { background: var(--orange-soft); }
.ec-pan { font-family: var(--mono); font-size: 13px; letter-spacing: 0; white-space: nowrap; }
.ec-pan--big { font-size: 22px; font-weight: 600; }
.ec-btn.danger-solid { background: var(--bad); border-color: var(--bad); color: var(--surface); }
@media (max-width: 760px) { .ec-table--feed .ec-c-amount .ec-sub { text-align: right; } .ec-table--feed .ec-c-main b { font-weight: 600; } }

/* ---- Record header: identity, situation, actions ----------------------- */
/* Identity first, actions after: when the buttons do not fit beside the name they
   wrap below it, never squeeze it. */
.ec-rec { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin: 0 0 16px; position: relative; overflow: hidden; }
.ec-rec::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--ok); }
.ec-rec.warn::before { background: var(--warn-rail); }
.ec-rec.bad::before { background: var(--bad); }
.ec-rec.off::before { background: var(--off); }
.ec-rec__kind { margin: 0 0 4px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.ec-rec h1 { margin: 0; font: 650 24px/1.15 var(--display); letter-spacing: -.015em; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ec-rec__line { margin: 6px 0 0; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ec-rec__line a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--off); }
.ec-rec > div:first-child { flex: 1 1 320px; min-width: 0; }
.ec-rec > .ec-actions { flex: 0 1 auto; justify-content: flex-end; }

/* ---- Record body: facts left, history right ---------------------------- */
.ec-recbody { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.ec-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; }
.ec-facts > div { padding: 12px 16px; border-top: 1px solid var(--line); min-width: 0; }
.ec-facts > div:nth-child(-n+2) { border-top: 0; }
.ec-facts > div:nth-child(odd) { border-right: 1px solid var(--line); }
.ec-facts dt { font-size: 12px; color: var(--muted); margin: 0 0 2px; }
.ec-facts dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ec-facts dd .ec-sub { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; }
.ec-tech summary { list-style: none; cursor: pointer; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; font: 650 15px/1.3 var(--display); }
.ec-tech summary::-webkit-details-marker { display: none; }
.ec-tech summary .ec-muted { font: 400 12.5px var(--body); }
.ec-tech[open] summary { border-bottom: 1px solid var(--line); }
.ec-tech .ec-deflist { padding: 14px 16px; grid-template-columns: 170px minmax(0, 1fr); }
.ec-tech .ec-deflist dd { font-family: var(--mono); font-size: 12.5px; }

/* ---- Timeline: the record's own history (audit log + state changes) ---- */
.ec-time { list-style: none; margin: 0; padding: 14px 16px 6px; }
.ec-time li { position: relative; padding: 0 0 16px 22px; }
.ec-time li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 9px; height: 9px; border-radius: 3px; background: var(--surface); border: 2px solid var(--off); }
.ec-time li::after { content: ""; position: absolute; left: 9px; top: 19px; bottom: 0; width: 1px; background: var(--line); }
.ec-time li:last-child::after { display: none; }
.ec-time li.ok::before { border-color: var(--ok); background: var(--ok); }
.ec-time li.bad::before { border-color: var(--bad); background: var(--bad); }
.ec-time li.op::before { border-color: var(--orange); }
.ec-time b { display: block; font-weight: 600; }
.ec-time .when { display: block; font: 12px/1.4 var(--mono); color: var(--muted); margin-bottom: 2px; }
.ec-time .who { display: block; font-size: 12.5px; color: var(--muted); }

/* ---- Home: what needs the operator now --------------------------------- */
.ec-queue { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.ec-q { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; text-decoration: none; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ec-q:hover { border-color: var(--ink); }
.ec-q.hot { border-color: var(--orange); box-shadow: inset 0 3px 0 var(--orange); }
.ec-q .l { font-size: 12.5px; color: var(--muted); }
.ec-q .v { font: 650 30px/1 var(--display); font-variant-numeric: tabular-nums; }
.ec-q .s { font-size: 12.5px; color: var(--muted); }
.ec-q.hot .s { color: var(--orange); font-weight: 600; }
.ec-q.calm .v { color: var(--muted); }

@media (max-width: 1279px) {
  .ec-recbody { grid-template-columns: minmax(0, 1fr); }
  .ec-queue { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ec-rec { padding: 16px; }
  .ec-rec > .ec-actions { flex: 1 1 100%; }
  .ec-rec .ec-actions { justify-content: stretch; }
  .ec-rec .ec-actions > .ec-btn { flex: 1; }
  .ec-rec h1 { font-size: 21px; }
  .ec-facts { grid-template-columns: minmax(0, 1fr); }
  .ec-facts > div { border-right: 0 !important; }
  .ec-facts > div:nth-child(2) { border-top: 1px solid var(--line); }
  .ec-toolbar .grow { min-width: 0; flex-basis: 100%; }
  .ec-toolbar > .ec-btn { flex: 1 1 auto; }
  .ec-tech .ec-deflist { grid-template-columns: minmax(0, 1fr); }
  .ec-queue { gap: 8px; }
  .ec-q .v { font-size: 24px; }
}

.ec-btn.primary { background: var(--orange-fill); border-color: var(--orange-fill); color: var(--on-orange); }
.ec-side .n.hot { background: var(--orange-fill); color: var(--on-orange); }
.ec-q.hot .s { color: var(--orange-text); }
.ec-q.hot { border-color: var(--orange-fill); box-shadow: inset 0 3px 0 var(--orange-fill); }

.ec-facts { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1px; background: var(--line); }
.ec-facts > div { background: var(--surface); border: 0 !important; }
.ec-panel > .ec-facts:last-child { border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; }
@media (min-width: 1800px) {
  .ec-recbody { grid-template-columns: minmax(0, 1fr) 420px; }
}
@media (max-width: 760px) { .ec-facts { grid-template-columns: minmax(0, 1fr); } }

/* Facts: hairlines drawn by each cell, not by a grey grid background, so a
   short last row leaves white space instead of a grey block. */
.ec-facts { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; background: none; overflow: hidden; }
.ec-facts > div { box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); margin: 0 1px 1px 0; }
/* ---- Record tabs: a strip under the record header ----------------------- */
.ec-rectabs { margin: 0 0 16px; }
.ec-rectabs .ec-tabs { border-bottom: 0; }

/* ---- Totals strip (statement, queues) ----------------------------------- */
.ec-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.ec-totals > div { background: var(--surface); padding: 12px 16px; }
.ec-totals span { display: block; font-size: 12px; color: var(--muted); }
.ec-totals b { font: 650 18px/1.3 var(--display); font-variant-numeric: tabular-nums; }
.ec-amount-in { color: var(--ok); }
.ec-amount-out { color: var(--ink); }

/* ---- Forms laid out on a page (Horário do Pix, flag) --------------------- */
.ec-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; padding: 16px; }
.ec-form-grid .full { grid-column: 1 / -1; }
.ec-check { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; }
.ec-check input { margin-top: 3px; accent-color: var(--orange-fill); }
.ec-check small { display: block; color: var(--muted); }
.ec-radio-card { display: grid; gap: 8px; padding: 16px; }
.ec-radio-card label { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; cursor: pointer; }
.ec-radio-card label:has(input:checked) { border-color: var(--orange-fill); background: var(--orange-soft); }
.ec-radio-card input { accent-color: var(--orange-fill); margin-top: 3px; }
.ec-radio-card small { display: block; color: var(--muted); }
.ec-code--block { margin: 0 16px 16px; }
.ec-verdict { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.ec-verdict b { font: 700 13px/1 var(--body); letter-spacing: .06em; padding: 6px 10px; border-radius: 6px; }
.ec-verdict.ok b { background: var(--ok-bg); color: var(--ok); }
.ec-verdict.warn b { background: var(--warn-bg); color: var(--warn); }
.ec-verdict.bad b { background: var(--bad-bg); color: var(--bad); }

/* Actions column sizes to its buttons: a row with three actions must never
   spill over the column beside it. The other columns share what is left. */
@media (min-width: 761px) {
  .ec-table { table-layout: auto; }
  .ec-table th.ec-cell-actions, .ec-table td.ec-cell-actions { width: 1%; white-space: nowrap; }
  .ec-table td.ec-c-meta, .ec-table td.ec-c-status, .ec-table td.ec-c-amount { white-space: nowrap; }
}
/* Between phone and wide desktop, a row's buttons stack inside their cell
   rather than pushing the table past the screen. */
@media (min-width: 761px) and (max-width: 1279px) {
  .ec-table th.ec-cell-actions, .ec-table td.ec-cell-actions { white-space: normal; }
  .ec-table .ec-cell-actions .ec-actions { flex-wrap: wrap; flex-direction: column; align-items: stretch; }
  .ec-table .ec-cell-actions .ec-actions > .ec-btn { width: 100%; }
}
/* Tablet portrait: the menu folds away like on a phone, so the tables keep
   the whole width; the tables themselves stay tables. */
@media (min-width: 761px) and (max-width: 1023px) {
  .ec-menu-toggle { display: inline-flex !important; }
  .ec-shell { grid-template-columns: minmax(0, 1fr); }
  .ec-side { position: fixed; inset: 0 auto 0 0; width: 280px; z-index: 20; transform: translateX(-100%); transition: transform .2s; overflow-y: auto; }
  body[data-menu-open] .ec-side { transform: none; box-shadow: 0 0 0 100vmax var(--scrim); }
  .ec-queue { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Desktop: the menu is taller than a laptop screen. It stays under the top
   bar while the page scrolls, and scrolls on its own to its last item. */
@media (min-width: 1024px) {
  .ec-side { position: sticky; top: 56px; align-self: start; height: calc(100vh - 56px); height: calc(100dvh - 56px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}

/* ---- Integrations: a rendered document inside a panel, and a guide ---- */
.ec-embed { overflow: visible; min-height: 60vh; }
.ec-embed > .ec-empty { margin: 0; }
#asyncapi { max-width: 100%; overflow-x: auto; }
.ec-guide { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1200px) {
  .ec-guide { grid-template-columns: minmax(0, 1fr) 240px; }
  .ec-guide__toc { position: sticky; top: 72px; max-height: calc(100dvh - 88px); overflow-y: auto; }
}
.ec-guide__toc-body { padding: 8px 16px 12px; font-size: 13px; }
.ec-guide__toc-body ul { list-style: none; margin: 0; padding: 0 0 0 12px; }
.ec-guide__toc-body > div > ul, .ec-guide__toc-body > ul { padding-left: 0; }
.ec-guide__toc-body li { margin: 4px 0; }
.ec-guide__toc-body a { color: var(--muted); text-decoration: none; overflow-wrap: anywhere; }
.ec-guide__toc-body a:hover { color: var(--ink); }
.ec-prose { padding: 20px 24px; line-height: 1.6; overflow-wrap: anywhere; }
.ec-prose > :first-child { margin-top: 0; }
.ec-prose h2 { font: 650 18px/1.3 var(--display); margin: 28px 0 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.ec-prose h3 { font: 650 15px/1.3 var(--display); margin: 20px 0 6px; }
.ec-prose :is(h2, h3, h4) a { color: inherit; text-decoration: none; }
.ec-prose code { font: 12.5px/1.5 var(--mono); background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.ec-prose pre { background: var(--code-bg); color: var(--code-ink); border-radius: 8px; padding: 12px; overflow-x: auto; font: 12.5px/1.5 var(--mono); }
.ec-prose pre code { background: none; padding: 0; color: inherit; }
.ec-prose table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; margin: 12px 0; }
.ec-prose th, .ec-prose td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top; }
.ec-prose th { background: var(--surface-2); font-weight: 600; }
.ec-prose blockquote { margin: 12px 0; padding: 10px 14px; border-left: 3px solid var(--orange); background: var(--orange-soft); border-radius: 0 8px 8px 0; }
.ec-prose img { max-width: 100%; height: auto; }
@media (max-width: 760px) { .ec-prose { padding: 16px; } }

/* ---- Hoje: the queues that have work, then the day so far -------------- */
.ec-home-queues .ec-queue { padding: 16px; margin: 0; }
.ec-home-quiet { margin: 0; padding: 0 16px 14px; color: var(--muted); font-size: 12.5px; }
.ec-home-quiet a { color: inherit; }
.ec-home-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; margin: 0 0 16px; }
.ec-home-grid > .ec-panel { margin: 0; }
.ec-home-tiles { padding: 16px 16px 0; margin: 0; }
.ec-home-bad { color: var(--bad); font-weight: 600; }
.ec-home-ok { color: var(--ok); }
.ec-hours { margin: 0; padding: 12px 16px 16px; }
.ec-hours__bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 3px; height: 96px; border-bottom: 1px solid var(--line); }
.ec-hours__bar { display: block; background: var(--orange); border-radius: 3px 3px 0 0; min-height: 2px; }
.ec-hours__bar.s0 { height: 2%; background: var(--line); }
.ec-hours__bar.s1 { height: 10%; }
.ec-hours__bar.s2 { height: 20%; }
.ec-hours__bar.s3 { height: 30%; }
.ec-hours__bar.s4 { height: 40%; }
.ec-hours__bar.s5 { height: 50%; }
.ec-hours__bar.s6 { height: 60%; }
.ec-hours__bar.s7 { height: 70%; }
.ec-hours__bar.s8 { height: 80%; }
.ec-hours__bar.s9 { height: 90%; }
.ec-hours__bar.s10 { height: 100%; }
.ec-hours__axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ec-home-times .ec-sub { display: block; }
.ec-home-period { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.ec-home-period__label { font-size: 12.5px; color: var(--muted); margin-right: 4px; }
.ec-home-period .ec-filterchip { text-decoration: none; }
.ec-hours--days .ec-hours__bars { gap: 2px; }
@media (max-width: 1023px) { .ec-home-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .ec-home-times { grid-column: 1 / -1; } }

/* ---- A cell of identifiers: a label line, then the value, wrapping anywhere */
.ec-ids .ec-mono { display: block; overflow-wrap: anywhere; margin-bottom: 4px; }

/* ---- A progress bar: how far a running job got ------------------------- */
.ec-bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; margin: 8px 0; }
.ec-bar > span { display: block; width: 0; height: 100%; background: var(--orange-fill); transition: width .4s ease; }

/* ---- Forms opened over a page: options, the money's path ---------------- */
.ec-stepup__form .ec-form-grid { padding: 0; }
.ec-stepup__form .ec-fieldset { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ec-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.ec-opts--stack { flex-direction: column; margin: 0 0 12px; }
.ec-path { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0; font-size: 12px; }
.ec-path__stop { padding: 2px 8px; border-radius: 999px; background: var(--orange-soft); color: var(--orange-text); font-weight: 600; }
.ec-path__then { color: var(--muted); }
.ec-register:not(:has(#id_account_type_no_custody:checked)) [data-role="approval"] { display: none; }

/* ---- A movement told in steps ------------------------------------------- */
.ec-story__lead { margin: 0 0 8px; }
.ec-plainlist { margin: 0; padding-left: 18px; line-height: 1.7; }
.ec-radio-card { padding: 0; margin-bottom: 12px; }
.ec-table--plain th, .ec-table--plain td { padding: 4px 16px 4px 0; text-align: left; vertical-align: top; }

/* ---- A field that suggests as you type --------------------------------- */
.ec-suggest-wrap { position: relative; }
.ec-suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 20px var(--shadow); max-height: 240px; overflow: auto; }
.ec-suggest [role="option"] { padding: 8px 12px; cursor: pointer; }
.ec-suggest [role="option"].is-raw { color: var(--muted); border-bottom: 1px solid var(--line); }
.ec-suggest [role="option"].is-active { background: var(--orange-soft); }
.ec-forensics-detail { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); margin: 0 0 12px; }

/* ---- Django's own widgets, in the admin's look -------------------------- */
.ec-fields input[type=password] { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; color: var(--ink); background: var(--surface); margin: 0 0 12px; }
select[multiple].ec-input { height: auto; padding: 6px 8px; }
.ec-form-grid label:has(> input[type=checkbox]) { display: flex; gap: 8px; align-items: center; min-height: 32px; font-size: 14px; }
.ec-form-grid label > input[type=checkbox] { accent-color: var(--orange-fill); }
/* A form field that is not a model column carries Django's or Unfold's own
   widget: it reads as ours, and never pushes the grid wider than the screen. */
.ec-form-grid > * { min-width: 0; }
.ec-form-grid :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea):not(.ec-input) {
  width: 100%; max-width: 100%; min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px;
  font: inherit; color: var(--ink); background: var(--surface); margin: 0 0 12px; box-shadow: none;
}
.ec-form-grid textarea:not(.ec-input) { padding: 10px 12px; min-height: 80px; }
.ec-form-grid select:not(.ec-input) { appearance: auto; padding-right: 8px; }
/* Unfold's widgets draw icons with a symbol font this admin does not load: the
   icon's name would show as text. The related-object shortcut goes with it; a
   group is created on its own screen. */
.ec-form-grid .material-symbols-outlined,
.ec-form-grid [x-data*="openRelatedWidgetWrapper"] { display: none; }
.ec-form-grid .related-widget-wrapper { display: block; }
.ec-form-grid .ec-hint { margin: -6px 0 12px; }
/* A value drawn by Python (a live snapshot, an error) never pushes the page wider. */
.ec-form-grid pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.ec-form-grid > div > div { overflow-wrap: anywhere; }

/* ---- The platform trail (ADR-0093): Saúde's blocks, Rastrear, one request's story ---- */
.ec-mini { color: var(--muted); font-size: 12px; }
.ec-worse { color: var(--bad); font-weight: 600; }
.ec-better { color: var(--ok); }
.ec-num { font-variant-numeric: tabular-nums; }
.ec-code-inline { font: 12px/1.4 var(--mono); background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; overflow-wrap: anywhere; }
.ec-sub .ec-code-inline, .ec-ev p .ec-code-inline { display: block; width: fit-content; max-width: 100%; margin: 3px 0; }
.ec-bigsearch { display: flex; gap: 8px; padding: 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; margin: 0; }
.ec-bigsearch input { flex: 1 1 320px; min-width: 0; height: 44px; font-size: 15px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-family: var(--body); }
.ec-filterbar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); margin: 0; }
.ec-filterbar select { height: 32px; max-width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); padding: 0 8px; font: 13px var(--body); }
.ec-filterbar__sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.ec-lanes { padding: 8px 16px 16px; }
.ec-lanes__head, .ec-lane-row { display: grid; grid-template-columns: 96px repeat(4, minmax(0, 1fr)); gap: 0 12px; }
.ec-lanes__head { position: sticky; top: 56px; background: var(--surface); z-index: 1; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ec-lanes__head span { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.ec-lane-row { position: relative; padding: 10px 0; }
.ec-lane-row::before { content: ""; position: absolute; left: 96px; right: 0; top: 0; border-top: 1px dashed var(--line); }
.ec-lane-row:first-of-type::before { display: none; }
.ec-lane-row .t { font: 12px/1.4 var(--mono); color: var(--muted); padding-top: 10px; }
.ec-lane-row .t b { display: block; color: var(--ink); font-weight: 600; }
.ec-ev { border: 1px solid var(--line); border-left: 3px solid var(--off); border-radius: 8px; padding: 10px 12px; background: var(--surface); min-width: 0; }
.ec-ev.ok { border-left-color: var(--ok); }
.ec-ev.bad { border-left-color: var(--bad); background: var(--bad-bg); }
.ec-ev.warn { border-left-color: var(--warn); }
.ec-ev h3 { margin: 0 0 4px; font: 600 13.5px/1.35 var(--body); overflow-wrap: anywhere; }
.ec-ev p { margin: 0; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.ec-ev .lane { display: none; }
.lane-1 { grid-column: 2; } .lane-2 { grid-column: 3; } .lane-3 { grid-column: 4; } .lane-4 { grid-column: 5; }
@media (max-width: 760px) {
  .ec-lanes__head { display: none; }
  .ec-lane-row { grid-template-columns: 64px minmax(0, 1fr); }
  .ec-lane-row::before { left: 64px; }
  .lane-1, .lane-2, .lane-3, .lane-4 { grid-column: 2; }
  .ec-ev .lane { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 2px; font-weight: 600; }
}
.ec-why { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; margin: 0; }
.ec-why > div { padding: 14px 16px; border-right: 1px solid var(--line); }
.ec-why > div:last-child { border-right: 0; }
.ec-why dt { font-size: 12px; color: var(--muted); margin: 0 0 4px; }
.ec-why dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.ec-why__act { margin-top: 8px; }
@media (max-width: 760px) { .ec-why > div { border-right: 0; border-bottom: 1px solid var(--line); } }
.ec-why__code { display: block; width: fit-content; max-width: 100%; margin-top: 4px; }

/* ---- A movement in full, inside its row's "detalhes" (ADR-0017) ---------- */
.ec-movement { display: grid; gap: 14px; font-weight: 400; margin-top: 10px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.ec-movement__sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ec-movement__side, .ec-movement__block { min-width: 0; }
.ec-movement__side + .ec-movement__side { border-left: 1px solid var(--line); padding-left: 14px; }
.ec-movement .ec-deflist { grid-template-columns: 128px minmax(0, 1fr); font-size: 13px; }
.ec-deflist--mono dd { font-family: var(--mono); font-size: 12.5px; }
.ec-movement__provider:empty { display: none; }
@media (max-width: 720px) {
  .ec-movement { padding: 12px; }
  .ec-movement__sides { grid-template-columns: minmax(0, 1fr); }
  .ec-movement__side + .ec-movement__side { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 12px; }
  .ec-movement .ec-deflist { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ec-movement .ec-deflist dt { margin-top: 8px; font-size: 12px; }
  .ec-movement .ec-actions > .ec-btn { flex: 1; }
  /* An open movement takes the whole card: its amount moves above it. */
  .ec-table--feed tr:has(> .ec-c-main details[data-ec-load][open]) {
    grid-template-areas: "select select" "amount amount" "main main" "tag status" "meta meta" "extra extra" "act act";
  }
}