/* Chart of Accounts and the ledger roles page (ui/accounts.js). Page rules only: the tokens and the shared parts (buttons, segmented tabs, panels, status badges,
   dialogs, menus) live in app.css. Every class here carries the ca- prefix, so another page's stylesheet never meets it. Wave's look (V, 11 Oct 2026): full width grey
   bands per account type, rows with the name and "Last transaction on ..." at the left, the description in the middle and a pencil at the right, a count bubble on each
   tab, a plus link at the end of a band. Motion: press feedback .97 in 140ms, hover only where a pointer can hover, nothing animates on a keyboard action, reduced
   motion is handled in app.css. */

/* ---- Page frame: about 1040px wide, as the other Wave lists ---- */
.ca-w{width:100%;max-width:1040px;min-width:0}
.ca-head-act{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.ca-listing{display:flex;flex-direction:column;gap:12px}
.ca-tabs{display:flex;justify-content:center;padding-top:16px;border-top:1px solid var(--divider)}
.ca-tabs .seg{max-width:100%;border-radius:20px}
.ca-tabs .seg button{display:inline-flex;align-items:center}
.ca-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;margin-left:6px;border-radius:10px;background:var(--bg-panel);color:var(--text-primary);font-size:var(--type-2xs);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.seg button[aria-selected=true] .ca-count{background:var(--accent-soft);color:var(--accent)}
@media (max-width:520px){.ca-tabs .seg button{padding:0 12px}.ca-count{margin-left:4px}}

/* ---- A band per account type, then its rows ---- */
.ca-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.ca-grp{display:flex;flex-direction:column;min-width:0;margin-top:8px}
.ca-band{display:flex;align-items:center;min-height:40px;padding:0 16px;background:var(--grey-bg);border-radius:var(--radius-sm);font-size:var(--type-s);font-weight:700;color:var(--text-primary)}
.ca-list{list-style:none}
.ca-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) 48px;gap:16px;align-items:center;min-height:var(--row-h);padding:10px 16px;border-bottom:1px solid var(--divider);transition:background 120ms var(--ease)}
@media (hover:hover) and (pointer:fine){.ca-row:hover{background:var(--bg-panel-2)}}
.ca-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.ca-nm{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-weight:700;color:var(--text-primary);overflow-wrap:anywhere}
.ca-row.off .ca-nm{color:var(--text-secondary)}
.ca-last{display:block;font-size:var(--type-xs);color:var(--text-tertiary)}
.ca-desc{min-width:0;font-size:var(--type-s);color:var(--text-secondary);overflow-wrap:anywhere}
.ca-act{display:flex;justify-content:flex-end;min-width:0}
.ca-ib{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:50%;background:transparent;color:var(--accent);text-decoration:none;transition:background 120ms var(--ease),transform 140ms var(--ease)}
.ca-ib:active{transform:matrix(.97,0,0,.97,0,0)}
@media (hover:hover) and (pointer:fine){.ca-ib:hover{background:var(--accent-soft)}}
.ca-none{padding:12px 16px;font-style:italic;color:var(--text-secondary);border-bottom:1px solid var(--divider)}
.ca-addlink{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:var(--hit);padding:0 16px;border-radius:var(--radius-sm);background:transparent;color:var(--accent);font-size:var(--type-s);font-weight:700;transition:background 120ms var(--ease),transform 140ms var(--ease)}
.ca-addlink:active{transform:matrix(.97,0,0,.97,0,0)}
@media (hover:hover) and (pointer:fine){.ca-addlink:hover{background:var(--accent-soft)}}
.ca-link{align-self:flex-start;min-height:36px;padding:0 4px;background:transparent;color:var(--accent);font-size:var(--type-s);font-weight:700;text-align:left;transition:transform 140ms var(--ease)}
.ca-link:active{transform:matrix(.97,0,0,.97,0,0)}
@media (hover:hover) and (pointer:fine){.ca-link:hover{text-decoration:underline}}
@media (max-width:959px){
  .ca-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name act" "desc desc";gap:6px 12px}
  .ca-name{grid-area:name}
  .ca-desc{grid-area:desc}
  .ca-desc:empty{display:none}
  .ca-act{grid-area:act}
  .ca-act:empty{display:none}
}

/* ---- Set up your accounts ---- */
.ca-setup-box:empty{display:none}
.ca-seed{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px 24px}
.ca-seed-t{font-size:var(--type-xs);font-weight:700;color:var(--text-primary);margin-bottom:4px}
.ca-seed-l{list-style:none;display:flex;flex-direction:column;gap:2px;color:var(--text-secondary);font-size:var(--type-s)}
.ca-problems{display:flex;flex-direction:column;gap:4px;padding-left:20px;color:var(--text-secondary)}

/* ---- The edit dialog ---- */
.ca-more{display:flex;flex-direction:column;gap:14px}
.ca-arch{display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px solid var(--divider)}
.ca-arch-t{font-size:var(--type-m);font-weight:700;color:var(--text-primary)}
.ca-check{display:flex;align-items:center;gap:10px;font-weight:600}
.ca-check input{flex:none;width:22px;height:22px;min-height:0;padding:0;accent-color:var(--accent)}

/* ---- The ledger roles: the label at the left, the account at the right. The Default Payment Account is not a role: it sits under them with a rule above it (.ca-drow) ---- */
.ca-roles{gap:18px;padding:24px 20px}
.ca-rrow,.ca-drow{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;align-items:center}
.ca-drow{padding-top:18px;border-top:1px solid var(--divider)}
.ca-rlbl,.ca-dlbl{font-size:var(--type-xs);font-weight:700;color:var(--text-secondary)}
.ca-rctl,.ca-dctl{display:flex;align-items:center;gap:8px;min-width:0;max-width:460px}
.ca-rctl select,.ca-dctl select{flex:1 1 auto;min-width:0}
@media (min-width:960px){
  .ca-rrow,.ca-drow{grid-template-columns:240px minmax(0,1fr);gap:16px}
}