@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=Public+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --ground:#EFF1EA;
  --surface:#FFFFFF;
  --surface-2:#E5E8DF;
  --border:#D3D8C9;
  --ink:#1E2620;
  --ink-soft:#5A6355;
  --accent:#2F5233;
  --accent-soft:#DCE6D9;
  --clay:#A8562C;
  --clay-soft:#F3E1D3;
  --slate:#38566A;
  --good:#3F7D53;
  --warn:#B4791F;
  --crit:#B23A2E;
  --shadow: 0 1px 2px rgba(30,38,32,.06), 0 6px 20px -8px rgba(30,38,32,.18);
  --radius: 3px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#141813; --surface:#1B211A; --surface-2:#232B21; --border:#333D30;
    --ink:#E8ECE3; --ink-soft:#9AA592; --accent:#7EB98A; --accent-soft:#243128;
    --clay:#E39A6C; --clay-soft:#31241C; --slate:#8FB4CB;
    --good:#6BBE81; --warn:#E0A94A; --crit:#E3746A;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -8px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --ground:#141813; --surface:#1B211A; --surface-2:#232B21; --border:#333D30;
  --ink:#E8ECE3; --ink-soft:#9AA592; --accent:#7EB98A; --accent-soft:#243128;
  --clay:#E39A6C; --clay-soft:#31241C; --slate:#8FB4CB;
  --good:#6BBE81; --warn:#E0A94A; --crit:#E3746A;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -8px rgba(0,0,0,.5);
}

*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; }
body{
  background:var(--ground); color:var(--ink);
  font-family:'Public Sans', system-ui, -apple-system, sans-serif;
  line-height:1.45; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:'Archivo', system-ui, sans-serif; text-wrap:balance; margin:0; letter-spacing:-0.01em; }
.mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
a{ color:var(--slate); }
button{ font-family:inherit; }
::selection{ background:var(--accent-soft); }

.wrap{ max-width:1180px; margin:0 auto; padding: 0 24px 80px; }

header.site{
  background: linear-gradient(180deg, var(--surface) 0%, var(--ground) 100%);
  border-bottom:1px solid var(--border);
}
.header-inner{
  max-width:1180px; margin:0 auto; padding:32px 24px 22px;
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;
}
.eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:6px; display:block;
}
h1.title{ font-size:30px; font-weight:800; }
.subline{ color:var(--ink-soft); font-size:13.5px; margin-top:6px; }
.status-pills{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--border); border-radius:100px;
  padding:5px 12px; font-size:12.5px; font-weight:600;
  background:var(--surface); white-space:nowrap;
}
.dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.dot.good{ background:var(--good); }
.dot.warn{ background:var(--warn); }
.dot.crit{ background:var(--crit); }
.dot.accent{ background:var(--accent); }

nav.tabs{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--border);
}
.tabs-inner{
  max-width:1180px; margin:0 auto; padding:0 24px;
  display:flex; gap:4px; overflow-x:auto;
}
.tabs-inner a{
  text-decoration:none; color:var(--ink-soft); font-weight:600; font-size:13.5px;
  padding:14px 14px 12px; border-bottom:2px solid transparent; white-space:nowrap;
  cursor:pointer;
}
.tabs-inner a:hover{ color:var(--ink); }
.tabs-inner a.active{ color:var(--accent); border-bottom-color:var(--accent); }

.page{ padding-top:32px; }
.page[hidden]{ display:none; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap;}
.section-head h2{ font-size:21px; }
.section-note{ color:var(--ink-soft); font-size:13px; max-width:50ch; }

/* overview tiles */
.tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media(max-width:860px){ .tiles{ grid-template-columns:repeat(2,1fr);} }
.tile{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow);
}
.tile .k{ font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.tile .v{ font-family:'IBM Plex Mono',monospace; font-size:24px; font-weight:600; margin-top:6px; }
.tile .v.small{ font-size:18px; }
.tile .sub{ font-size:12px; color:var(--ink-soft); margin-top:4px; }

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); margin-bottom:16px;
}
.card-pad{ padding:20px; }
.card-title{ font-size:14px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); margin-bottom:2px; }

/* budget bars */
.cat-row{ display:grid; grid-template-columns: 40px 150px 1fr 90px 90px 90px 28px; gap:12px; align-items:center; padding:10px 0; border-top:1px solid var(--border); }
.cat-row:first-child{ border-top:none; }
.cat-row input[type=text], .cat-row input[type=number]{ width:100%; }
.bar-track{ height:8px; background:var(--surface-2); border-radius:100px; overflow:hidden; position:relative; }
.bar-fill{ height:100%; background:var(--accent); border-radius:100px; }
.bar-fill.over{ background:var(--crit); }
.num{ font-family:'IBM Plex Mono',monospace; font-size:13px; text-align:right; }
.rm-btn{ background:none; border:none; color:var(--ink-soft); cursor:pointer; font-size:16px; line-height:1; padding:4px; }
.rm-btn:hover{ color:var(--crit); }

.drag-handle{
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:4px;
  color:var(--ink-soft); font-size:16px; letter-spacing:-3px;
  cursor:grab; user-select:none;
}
.drag-handle:hover{ color:var(--ink); background:var(--surface-2); }
.cat-row.dragging{ opacity:.35; }
.cat-row.drag-over-top{ box-shadow: inset 0 3px 0 0 var(--accent); }
.cat-row.drag-over-bottom{ box-shadow: inset 0 -3px 0 0 var(--accent); }

input, select, textarea{
  background:var(--surface); color:var(--ink); border:1px solid var(--border);
  border-radius:2px; padding:7px 9px; font-size:13.5px; font-family:inherit;
}
/* Linux/GTK Chrome paints native number spinners with the light system
   theme regardless of color-scheme, leaving a white box over our dark
   inputs — drop the spinner UI entirely instead of fighting it. */
input[type=number]{ -moz-appearance:textfield; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
input:focus, select:focus, textarea:focus, button:focus-visible{ outline:2px solid var(--slate); outline-offset:1px; }
label{ font-size:11.5px; color:var(--ink-soft); font-weight:600; text-transform:uppercase; letter-spacing:.04em; display:block; margin-bottom:4px; }

.btn{ background:var(--accent); color:var(--surface); border:none; border-radius:2px; padding:9px 16px; font-weight:600; font-size:13.5px; cursor:pointer; }
.btn:hover{ filter:brightness(1.08); }
.btn:disabled{ opacity:.6; cursor:default; }
.btn.ghost{ background:transparent; color:var(--accent); border:1px solid var(--accent); }
.btn.small{ padding:6px 11px; font-size:12.5px; }

.add-form{
  display:grid; grid-template-columns: 110px 140px 1fr 100px 1fr 120px auto; gap:10px; align-items:end;
  padding:16px 20px; background:var(--surface-2); border-bottom:1px solid var(--border);
}
@media(max-width:960px){ .add-form{ grid-template-columns: 1fr 1fr; } }

table.ledger{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.ledger th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink-soft); padding:10px 20px; border-bottom:1px solid var(--border); font-weight:600;
}
table.ledger td{ padding:12px 20px; border-bottom:1px solid var(--border); vertical-align:top; }
table.ledger tr:last-child td{ border-bottom:none; }
table.ledger td.amt{ font-family:'IBM Plex Mono',monospace; text-align:right; white-space:nowrap; }
tr.ledger-row{ cursor:pointer; }
tr.ledger-row:hover, tr.ledger-row:focus-visible{ background:var(--surface-2); outline:none; }
.ld-date{ color:var(--ink-soft); white-space:nowrap; }
.ld-memo{ font-weight:600; }
.ld-cat-tag{ margin-top:4px; }
.ld-paidby{ color:var(--ink-soft); }
.ld-amount{ font-family:'IBM Plex Mono',monospace; font-weight:600; }
.ld-receipt-count{ font-size:11px; color:var(--ink-soft); margin-top:4px; }
.cat-chip{ display:inline-block; font-size:11.5px; font-weight:600; padding:2px 8px; border-radius:100px; background:var(--accent-soft); color:var(--accent); }
.empty-state{ padding:40px 20px; text-align:center; color:var(--ink-soft); font-size:13.5px; }

/* ---------- roadmap timeline ---------- */
.roadmap-progress{ display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.roadmap-progress .big{ font-family:'IBM Plex Mono',monospace; font-size:15px; font-weight:600; }
.roadmap-progress .cur-title{ color:var(--ink-soft); font-size:13px; }

.timeline{ list-style:none; margin:0; padding:20px 20px 8px; }
.tl-step{ display:grid; grid-template-columns:34px 1fr; gap:16px; position:relative; }
.tl-rail{ grid-column:1; display:flex; flex-direction:column; align-items:center; }
.tl-node{
  width:32px; height:32px; border-radius:50%; border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace;
  font-size:12px; font-weight:700; color:var(--ink-soft); background:var(--surface); z-index:1; flex:none;
}
.tl-line{ width:2px; flex:1; background:var(--border); min-height:24px; }
.tl-step.done .tl-node{ background:var(--accent); border-color:var(--accent); color:var(--surface); }
.tl-step.done .tl-line{ background:var(--accent); }
.tl-step.in_progress .tl-node{ border-color:var(--warn); color:var(--warn); background:var(--surface); box-shadow:0 0 0 4px color-mix(in srgb, var(--warn) 18%, transparent); animation:tl-pulse 2.2s ease-in-out infinite; }
@keyframes tl-pulse{
  0%,100%{ box-shadow:0 0 0 4px color-mix(in srgb, var(--warn) 18%, transparent); }
  50%{ box-shadow:0 0 0 8px color-mix(in srgb, var(--warn) 8%, transparent); }
}
.tl-step.not_started .tl-node{ color:var(--ink-soft); }
.tl-body{ padding-bottom:22px; }
.tl-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; padding:5px 0; user-select:none; }
.tl-head:hover .tl-title{ color:var(--accent); }
.tl-title{ font-weight:600; font-size:14.5px; }
.tl-status-badge{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; padding:2px 9px; border-radius:100px; white-space:nowrap; }
.tl-status-badge.done{ background:var(--accent-soft); color:var(--accent); }
.tl-status-badge.in_progress{ background:color-mix(in srgb, var(--warn) 16%, transparent); color:var(--warn); }
.tl-status-badge.not_started{ background:var(--surface-2); color:var(--ink-soft); }
.tl-chevron{ color:var(--ink-soft); font-size:12px; transition:transform .15s ease; flex:none; }
.tl-step.open .tl-chevron{ transform:rotate(90deg); }
.tl-detail{ display:none; padding-top:10px; }
.tl-step.open .tl-detail{ display:block; }
.tl-desc{ font-size:13px; color:var(--ink-soft); max-width:64ch; margin-bottom:12px; }
.tl-controls{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.tl-notes{ width:min(420px,100%); }
.tl-status-select{ font-size:12px; font-weight:600; }

/* documents */
.doc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media(max-width:860px){ .doc-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .doc-grid{ grid-template-columns:1fr; } }
.doc-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:6px;
}
.doc-card .num{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--clay); text-align:left; }
.doc-card h3{ font-size:14.5px; }
.doc-card p{ font-size:12.5px; color:var(--ink-soft); margin:0; flex:1; }
.doc-card .status{ font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.doc-card .status.frozen{ color:var(--ink-soft); }
.doc-card .status.growing{ color:var(--good); }
.doc-card a.open{ font-size:12.5px; font-weight:600; text-decoration:none; }

/* ---------- files page ---------- */
.file-cat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
@media(max-width:860px){ .file-cat-grid{ grid-template-columns:1fr; } }
.file-cat-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px; display:flex; flex-direction:column; gap:10px;
}
.file-cat-card-head{ display:flex; align-items:center; gap:8px; }
.file-cat-name{ flex:1; font-weight:600; font-size:14.5px; }
.file-cat-name-input{ flex:1; font-weight:600; font-size:14.5px; }
.file-cat-icon-btn{
  background:none; border:none; color:var(--ink-soft); cursor:pointer; font-size:14px;
  line-height:1; padding:5px; border-radius:4px; flex:none;
}
.file-cat-icon-btn:hover{ color:var(--accent); background:var(--surface-2); }
.file-cat-body{ cursor:pointer; color:var(--ink-soft); font-size:13px; }
.file-cat-body:hover{ color:var(--ink); }
.file-cat-body .match-list{ margin-top:6px; display:flex; flex-direction:column; gap:3px; }
.file-cat-body .match-item{ font-size:12.5px; color:var(--ink); }
.file-cat-body .match-item .match-filename{ color:var(--ink-soft); font-size:11.5px; }

/* ---------- file category detail modal ---------- */
.file-list{ display:flex; flex-direction:column; gap:8px; margin:16px 0; max-height:50vh; overflow-y:auto; }
.file-list-row{
  cursor:pointer;
  border:1px solid var(--border); border-radius:var(--radius); padding:10px 12px;
}
.file-list-row:hover, .file-list-row:focus-visible{ background:var(--surface-2); outline:none; }
.file-row-title{ font-weight:600; font-size:14px; }
.file-row-memo{ font-size:12.5px; color:var(--ink-soft); margin-top:3px; }
.file-row-filename{ font-size:11px; color:var(--ink-soft); margin-top:5px; font-family:'IBM Plex Mono',monospace; }
.file-filename{ font-size:12.5px; color:var(--ink-soft); }
a.file-view{ cursor:pointer; font-size:12.5px; font-weight:600; }

.notes-list{ list-style:none; margin:0; padding:0; }
.note-item{ padding:12px 0; border-top:1px solid var(--border); display:flex; gap:12px; }
.note-item:first-child{ border-top:none; }
.note-date{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-soft); white-space:nowrap; padding-top:1px; }
.note-text{ font-size:13.5px; }

footer.site{ margin-top:60px; padding:24px; text-align:center; color:var(--ink-soft); font-size:12px; }
.save-hint{ font-size:11.5px; color:var(--ink-soft); }
.sync-dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--good); margin-right:5px; }
.sync-dot.off{ background:var(--ink-soft); }

/* ---------- confirm modal ---------- */
.btn.danger{ background:var(--crit); color:var(--surface); }
.btn.danger:hover{ filter:brightness(1.08); }

.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  z-index:100; padding:20px;
}
.modal-overlay[hidden]{ display:none; }
.modal-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); max-width:400px; width:100%; padding:22px 24px;
  max-height:calc(100vh - 40px); overflow-y:auto;
}
.modal-card h3{ font-size:17px; margin-bottom:10px; }
.modal-card p{ font-size:13.5px; color:var(--ink-soft); margin:0; }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.modal-card-wide{ max-width:520px; }
.modal-form{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:16px 0 4px; }
.modal-form .span-2{ grid-column:1 / -1; }
.error{ color:var(--crit); font-size:12.5px; min-height:16px; }

/* ---------- login ---------- */
.login-overlay{
  position:fixed; inset:0; background:var(--ground);
  display:flex; align-items:center; justify-content:center; z-index:200; padding:20px;
}
.login-overlay[hidden]{ display:none; }
.login-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); max-width:360px; width:100%; padding:28px 26px;
}
.login-card h2{ font-size:20px; margin-bottom:6px; }
.login-card p{ font-size:13px; color:var(--ink-soft); margin:0 0 18px; }
.login-card input{ width:100%; margin-bottom:12px; }
.login-card .error{ color:var(--crit); font-size:12.5px; margin:-4px 0 12px; min-height:16px; }
.logout-link{ cursor:pointer; color:var(--ink-soft); font-size:12.5px; text-decoration:underline; background:none; border:none; font-family:inherit; padding:0; }

/* ---------- attachments ---------- */
.attachments{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.attachment-chip{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--border); border-radius:100px; background:var(--surface-2);
  padding:3px 6px 3px 10px; font-size:12px;
}
.attachment-chip a{ cursor:pointer; color:var(--slate); }
.attachment-chip .chip-rm{
  background:none; border:none; color:var(--ink-soft); cursor:pointer; font-size:14px;
  line-height:1; padding:2px 4px; border-radius:50%;
}
.attachment-chip .chip-rm:hover{ color:var(--crit); background:var(--surface); }
.attachment-add{
  background:none; border:1px dashed var(--border); border-radius:100px; color:var(--ink-soft);
  cursor:pointer; font-size:12px; padding:3px 10px; white-space:nowrap;
}
.attachment-add:hover{ border-color:var(--accent); color:var(--accent); }

/* ---------- floating add-transaction button (mobile only) ---------- */
.fab{
  display:none; position:fixed; right:18px; bottom:18px; z-index:40;
  width:52px; height:52px; border-radius:50%; border:none;
  background:var(--accent); color:var(--surface); font-size:28px; line-height:1;
  box-shadow:var(--shadow); cursor:pointer;
}
.fab:hover{ filter:brightness(1.08); }

/* ---------- mobile ---------- */
html{ overflow-x:hidden; }
body{ overflow-x:hidden; }

@media(max-width:700px){
  .wrap{ padding:0 14px 50px; }
  .header-inner{ padding:22px 14px 16px; }
  .tabs-inner{ padding:0 14px; }
  h1.title{ font-size:23px; }
  .subline{ font-size:12.5px; }
  .page{ padding-top:20px; }
  .section-head h2{ font-size:18px; }

  /* iOS zooms the page on focusing any input under 16px — keep form
     controls at 16px on mobile so tapping a field doesn't trigger that. */
  input, select, textarea{ font-size:16px; padding:9px 10px; }
  .btn{ padding:11px 16px; }
  .rm-btn, .chip-rm{ padding:8px; font-size:17px; }
  .drag-handle{ width:36px; height:36px; }

  .tiles{ gap:8px; }
  .tile{ padding:12px 14px; }
  .tile .v{ font-size:19px; }

  /* categories: stack each row into a small card instead of a 7-column grid */
  .cat-row.cat-row-head{ display:none; }
  /* 4 equal tracks, with each row spanning different numbers of them —
     grid-template-areas forces one column size for every row, which breaks
     here since row 1 (handle/name/remove) and row 3 (budget/spent/left)
     want very different proportions; explicit column lines avoid that. */
  .cat-row{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap:8px; column-gap:10px;
    padding:12px 0;
  }
  .cat-row > *{ min-width:0; }
  .cat-row > *:nth-child(1){ grid-row:1; grid-column:1; }
  .cat-row > *:nth-child(2){ grid-row:1; grid-column:2 / 4; }
  .cat-row > *:nth-child(3){ grid-row:2; grid-column:1 / 5; }
  .cat-row > *:nth-child(4){ grid-row:3; grid-column:1 / 3; }
  .cat-row > *:nth-child(5){ grid-row:3; grid-column:3; }
  .cat-row > *:nth-child(6){ grid-row:3; grid-column:4; }
  .cat-row > *:nth-child(7){ grid-row:1; grid-column:4; justify-self:end; align-self:start; }
  .cat-row .num{ text-align:left; }
  .cat-row > *:nth-child(5)::before{ content:"Spent"; display:block; font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); font-weight:600; margin-bottom:2px; }
  .cat-row > *:nth-child(6)::before{ content:"Left"; display:block; font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); font-weight:600; margin-bottom:2px; }

  /* add-transaction form: one field per row instead of a cramped grid */
  .add-form{ grid-template-columns:1fr; padding:14px 16px; }
  .add-form button{ width:100%; }

  /* ledger: turn the table into a stack of bank-statement-style rows */
  table.ledger thead{ display:none; }
  table.ledger, table.ledger tbody{ display:block; width:100%; }
  table.ledger tr{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "date amount"
      "memo memo"
      "paidby paidby";
    row-gap:6px; column-gap:10px;
    padding:14px 16px; border-bottom:1px solid var(--border);
  }
  table.ledger td{ padding:0; border-bottom:none; display:block; }
  table.ledger td:nth-child(1){ grid-area:date; }
  table.ledger td:nth-child(2){ grid-area:memo; }
  table.ledger td:nth-child(3){ grid-area:paidby; }
  table.ledger td:nth-child(4){ grid-area:amount; }
  table.ledger td.amt{ text-align:right; }
  .ld-memo{ font-size:15px; }

  .doc-grid{ gap:10px; }
  .timeline{ padding:16px 4px 4px; }
  .tl-step{ grid-template-columns:28px 1fr; gap:12px; }

  .modal-form{ grid-template-columns:1fr; gap:12px; }
  .modal-card, .modal-card-wide{ padding:20px 18px; }

  .fab:not([hidden]){ display:flex; align-items:center; justify-content:center; }
  #openAddTransactionBtn{ display:none; }
}

/* ---------- view-only accounts ---------- */
/* The server rejects their changes anyway; this just hides controls that
   would only produce an error. Form fields are disabled in app.js. */
body.read-only .edit-only,
body.read-only #addCatBtn,
body.read-only #openAddTransactionBtn,
body.read-only #fabAddTransaction,
body.read-only #addFileCatBtn,
body.read-only #fileCategoryAddFileBtn,
body.read-only #addTransactionBtn,
body.read-only #deleteTransactionBtn,
body.read-only #saveFileDetailBtn,
body.read-only #deleteFileDetailBtn,
body.read-only .chip-rm,
body.read-only .attachment-add{ display:none !important; }
/* These sit in fixed grid/flex columns — hide them without collapsing the cell. */
body.read-only .rm-btn,
body.read-only .rename-btn,
body.read-only .drag-handle{ visibility:hidden; pointer-events:none; }
body.read-only input:disabled,
body.read-only select:disabled{ opacity:1; cursor:default; color:inherit; -webkit-text-fill-color:currentColor; }