/* Icons — flat, single-stroke SVG sprites referenced via <use>.
 * Default size scales with surrounding font size. Specific contexts
 * (.day .tx .ico) override below. */
.ico {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--fs-base);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  background: var(--brand-teal);
  color: #fff;
  cursor: pointer;
  transition: background 120ms;
}
.btn:hover { background: var(--teal-700); color: #fff; text-decoration: none; }
.btn.secondary {
  background: var(--surface);
  color: var(--brand-teal);
  border-color: var(--brand-teal);
}
.btn.secondary:hover { background: var(--teal-100); }
.btn.ghost {
  background: transparent;
  color: var(--brand-teal);
  border: none;
  padding: 10px 12px;
}
.btn.danger { background: var(--danger); color: #fff; }
.btn.danger:hover { background: #7d1414; }
.btn.sm { padding: 6px 12px; font-size: var(--fs-sm); }

/* Inputs */
.input, .select, .textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  color: var(--ink);
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--brand-teal);
  box-shadow: 0 0 0 2px var(--teal-100);
}
.field {
  margin-bottom: var(--space-4);
}
.field label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  margin-bottom: var(--space-1);
  font-weight: 600;
}
.field .hint { font-size: var(--fs-xs); color: var(--ink-soft); margin-top: 4px; }

/* Cards/panels */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.card.tight { padding: var(--space-4); }
.card h2:first-child, .card h3:first-child { margin-top: 0; }

/* Account-header card (teal background, white text) — compact one-row layout */
.account-header {
  background: var(--teal-300);
  color: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-3);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.account-header .name { font-size: var(--fs-md); font-weight: 700; line-height: 1.2; }
.account-header .balance { font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.account-header .meta {
  font-size: 10px;
  opacity: 0.9;
  line-height: 1.1;
}
.account-header .acct-type {
  background: rgba(255,255,255,0.25);
  padding: 0 6px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  margin-left: var(--space-2);
  font-weight: 600;
  vertical-align: middle;
}

/* Chips */
.chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  background: var(--teal-100);
  color: var(--ink);
  font-weight: 600;
}
.chip.brand { background: var(--brand-teal); color: #fff; }
.chip.warn  { background: #fdf3d3; color: var(--warning); }
.chip.muted { background: var(--surface-alt); color: var(--ink-soft); }
.chip.neg   { background: #fde7e7; color: var(--negative); }

/* Tables */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.table th, .table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.table th {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  font-weight: 600;
  background: var(--surface-alt);
}
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Review queue — one card per uncategorised counterparty group.
   Layout mirrors the prototype: teal left-rail, two-column header
   (title block + amount), pick pills under the header. */
.queue-item {
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand-teal);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
.queue-item.warn       { border-left-color: var(--warning); }
.queue-item .row-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  align-items: center;
}
.queue-item h3 { margin: 0; font-size: var(--fs-md); font-weight: 600; }
.queue-item .picks {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.queue-item .picks .label {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  margin-right: 4px;
}
.queue-item .pick {
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--ink);
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.queue-item .pick:hover { background: var(--teal-100); border-color: var(--brand-teal); }
.queue-item .pick.top  { background: var(--teal-100); border-color: var(--brand-teal); font-weight: 600; }
.queue-item .pick.dim  { color: var(--ink-soft); border-style: dashed; }
.queue-item .conf      { font-size: var(--fs-xs); color: var(--ink-soft); margin-left: 4px; }

/* Resolved state — the card after the user picks a category. The
   bulk-apply prompt sits inside it for ~10 s, then the card collapses. */
.queue-item.resolved {
  background: var(--surface-alt);
  border-left-color: var(--ink-muted);
  opacity: 0.85;
}
.queue-item.resolved h3 { color: var(--ink-soft); }
.bulk-prompt {
  margin-top: var(--space-2);
  padding: 8px 12px;
  background: var(--teal-100);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.bulk-prompt b           { font-weight: 600; }
.bulk-prompt .actions    { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.bulk-prompt .countdown  { font-size: var(--fs-xs); color: var(--ink-soft); margin-left: var(--space-2); }
.bulk-prompt .countdown b { color: var(--brand-teal); }

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(31,42,42,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: var(--space-4);
}
.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  width: 540px;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-5);
}
.modal h2 { margin-top: 0; }
.modal .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  /* Stick to the bottom of the scrolling modal so the save / close
     buttons stay reachable even when the modal content is taller than
     90vh (e.g. UCS-10 link/unlink expanded, recurring-linked tx with
     Save this / Save this+following buttons). Extend the sticky band
     into the modal's outer padding so the background covers anything
     that would scroll behind it. */
  position: sticky;
  bottom: calc(-1 * var(--space-5));
  background: var(--surface);
  margin: var(--space-5) calc(-1 * var(--space-5)) calc(-1 * var(--space-5));
  padding: var(--space-3) var(--space-5) var(--space-4);
  border-top: 1px solid var(--border);
  z-index: 1;
}

/* Compact variant — for the planned-form modals so the whole form
   (including the expanded recurrence section) fits on a laptop screen
   without scrolling. Tightens default field/split/actions spacing. */
.modal.compact .field         { margin-bottom: var(--space-2); }
.modal.compact .split         { gap: var(--space-3); margin-bottom: var(--space-2); }
.modal.compact .modal-actions {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
}

/* Side-by-side meta */
.meta-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  font-size: var(--fs-sm);
}
.meta-grid dt { color: var(--ink-soft); font-weight: 600; }
.meta-grid dd { margin: 0; }

/* Toggle row */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
}
.toggle-row:first-child { border-top: none; }

/* Disclosure */
details.disclosure {
  margin-top: var(--space-4);
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
}
details.disclosure summary {
  cursor: pointer;
  color: var(--brand-teal);
  font-size: var(--fs-sm);
  font-weight: 600;
  list-style: none;
}
details.disclosure summary::-webkit-details-marker { display: none; }
details.disclosure summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 120ms;
}
details[open].disclosure summary::before { transform: rotate(90deg); }

/* Login layout */
.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-alt);
  padding: var(--space-5);
}
.login-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  width: 380px;
  max-width: 100%;
  border: 1px solid var(--border);
}
.login-card h1 {
  text-align: center;
  margin-bottom: var(--space-5);
  color: var(--brand-teal);
}

/* Two-column layout for some forms */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 720px) {
  .split { grid-template-columns: 1fr; }
}

/* Section header with action */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-4);
}

/* Banner */
.banner {
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--fs-sm);
}
.banner.info  { background: var(--teal-100); color: var(--ink); }
.banner.warn  { background: #fdf3d3; color: var(--warning); }
.banner.error { background: #fde7e7; color: var(--negative); }
.banner.ok    { background: var(--teal-100); color: var(--ink); }

/* Source-indicator chip in transaction modal */
.source-chip {
  display: inline-block;
  padding: 2px 8px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}