:root { font-family: system-ui, sans-serif; color: #1d2330; --muted: #6b7280; --line: #e5e7eb; --accent: #1f4fd6; }
body { margin: 0; }
header { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1.5rem; border-bottom: 1px solid var(--line); }
header nav { display: flex; gap: 1rem; align-items: center; }
.brand { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; text-decoration: none; color: inherit; }
main { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.stack { display: flex; flex-direction: column; gap: .5rem; max-width: 360px; }
.row { display: flex; gap: .5rem; align-items: center; margin: 1rem 0; }
input, select { padding: .5rem; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
input[type=submit], button, .button { padding: .5rem .9rem; border: 0; border-radius: 6px; background: var(--accent); color: white; font: inherit; cursor: pointer; text-decoration: none; display: inline-block; }
button.link { background: none; color: var(--accent); padding: 0; }
button.danger { background: #b42318; }
/* Fixed layout everywhere: columns keep their widths whatever the content. */
table { border-collapse: collapse; width: 100%; margin: 1rem 0; table-layout: fixed; }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
td.credit { color: #067647; } td.debit { color: #b42318; }
.flash { padding: .6rem .8rem; border-radius: 6px; }
.flash.alert { background: #fef3f2; color: #b42318; } .flash.notice { background: #ecfdf3; color: #067647; }
.status { padding: .1rem .5rem; border-radius: 99px; font-size: .85em; background: #f2f4f7; }
.status.active { background: #ecfdf3; color: #067647; } .status.failing { background: #fef3f2; color: #b42318; }
code, pre { background: #f6f8fa; padding: .3rem .5rem; border-radius: 4px; overflow-x: auto; }
/* Same column widths in every company's tables, whatever the content. */
table.accounts col.bank { width: 35%; } table.accounts col.number { width: 35%; }
table.accounts col.amount { width: auto; } table.accounts col.sync { width: 5.5rem; }
tfoot .total th { border-top: 2px solid #1d2330; border-bottom: 0; }
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin: 1rem 0; }
.tabs a { padding: .5rem 1rem; text-decoration: none; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a.active { color: #1d2330; border-bottom-color: var(--accent); }
/* Home: a company title sits on its table; companies are set apart. */
h2.company { margin: 0 0 .25rem; }
table.accounts { margin: 0 0 2.5rem; }
button.small { padding: .2rem .6rem; font-size: .85em; }
a.plain { color: inherit; text-decoration: none; }
/* Secondary actions tucked in a <details> dropdown. */
details.menu { position: relative; }
details.menu summary { list-style: none; cursor: pointer; color: var(--muted); padding: .5rem .6rem; border-radius: 6px; }
details.menu summary::-webkit-details-marker { display: none; }
details.menu summary::after { content: " ▾"; }
details.menu[open] summary { background: #f2f4f7; }
details.menu .menu-items { position: absolute; left: 0; top: 100%; z-index: 10; min-width: 12rem; margin-top: .25rem;
  background: white; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgb(0 0 0 / .08);
  display: flex; flex-direction: column; padding: .3rem 0; }
details.menu .menu-items > a, details.menu .menu-items button { display: block; width: 100%; text-align: left; padding: .45rem .8rem; text-decoration: none; }
details.menu .menu-items > a:hover, details.menu .menu-items button:hover { background: #f6f8fa; }
button.link.danger { color: #b42318; background: none; }
/* API docs */
.toc { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: .2rem 1rem; margin: 1.5rem 0; }
.toc a { text-decoration: none; font-family: ui-monospace, monospace; font-size: .9em; }
.verb { display: inline-block; min-width: 3.2rem; font-weight: 700; color: var(--accent); font-family: ui-monospace, monospace; }
section.endpoint { border-top: 1px solid var(--line); padding-top: .5rem; margin-top: 1.5rem; }
.consent { max-width: 34rem; margin: 3rem auto; }
.consent form .link { margin-left: .75rem; }