/* Global styles — Task 8. The CSS custom properties below (colors, exact hex
   values, role names) are ported verbatim from the approved static
   prototype (the original design prototype), per CLAUDE.md §9 and the
   Task 8 brief ("keep the exact hex values and role names"). Light is the
   default; dark applies via prefers-color-scheme, same as the prototype —
   this app has no manual theme toggle in v1. */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  color-scheme: light;
  --surface-1: #fcfcfb;
  --page: #f9f9f7;
  --ink-1: #0b0b0b;
  --ink-2: #52514e;
  --ink-muted: #898781;
  --grid: #e1e0d9;
  --baseline: #c3c2b7;
  --ring: rgba(11, 11, 11, 0.1);
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --good: #0ca30c;
  --good-text: #006300;
  --bad: #d1263b;
  --bad-text: #b3001f;
  --warn: #b45309;
  --warn-text: #925c0c;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --surface-1: #1a1a19;
    --page: #0d0d0d;
    --ink-1: #ffffff;
    --ink-2: #c3c2b7;
    --ink-muted: #898781;
    --grid: #2c2c2a;
    --baseline: #383835;
    --ring: rgba(255, 255, 255, 0.1);
    --series-1: #3987e5;
    --series-2: #d95926;
    --good: #0ca30c;
    --good-text: #0ca30c;
    --bad: #e5484d;
    --bad-text: #ff6369;
    --warn: #e5a134;
    --warn-text: #f0b429;
  }
}

html,
body {
  height: 100%;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--page);
  color: var(--ink-1);
}

#root {
  min-height: 100vh;
}

/* ---------------------------------------------------------------------
   App shell
--------------------------------------------------------------------- */

.shell {
  display: flex;
  min-height: 100vh;
}

.shell-sidebar {
  width: 220px;
  flex: 0 0 220px;
  background: var(--surface-1);
  border-right: 1px solid var(--ring);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.shell-brand {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 0 6px;
}

.shell-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.shell-nav button {
  all: unset;
  cursor: pointer;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink-2);
}

.shell-nav button:hover {
  background: var(--ring);
}

.shell-nav button[aria-current="page"] {
  background: var(--ring);
  color: var(--ink-1);
  font-weight: 600;
}

/* AP Task 5: "Checks to print" queue-count badge (Sidebar.tsx). */
.nav-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bad-text);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

.shell-switcher {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.shell-switcher label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  padding: 0 2px;
}

.shell-switcher select {
  width: 100%;
  font: inherit;
  font-size: 13px;
  padding: 7px 8px;
  border-radius: 8px;
  border: 1px solid var(--ring);
  background: var(--page);
  color: var(--ink-1);
}

/* Subtle badge under the switcher when the selected company is the sample
   one (Task 2 of docs/superpowers/plans/2026-08-01-launch.md) — small and
   quiet, not a scary warning; real companies never show this. */
.shell-switcher .sample-chip {
  align-self: flex-start;
  font-size: 11px;
  padding: 2px 9px;
}

.shell-main {
  flex: 1 1 auto;
  min-width: 0;
}

.shell-fullscreen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

.shell-fullscreen .msg {
  max-width: 420px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.6;
}

.placeholder-panel {
  max-width: 1060px;
  margin: 0 auto;
  padding: 48px 20px;
  color: var(--ink-muted);
  font-size: 14px;
}

/* ---------------------------------------------------------------------
   Dashboard — ported from the original design prototype
--------------------------------------------------------------------- */

.wrap {
  max-width: 1060px;
  margin: 0 auto;
  padding: 28px 20px 48px;
}

header.top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 18px;
  margin-bottom: 6px;
}

h1 {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--good-text);
  border: 1px solid var(--ring);
  background: var(--surface-1);
  border-radius: 999px;
  padding: 4px 12px;
}

.chip.chip-bad {
  color: var(--bad-text);
}

.chip.chip-info {
  color: var(--series-1);
}

/* Partly-paid invoice state (AR Task 5) — amber-ish, distinct from the
   bad/info tones already in use elsewhere. */
.chip.chip-warn {
  color: var(--warn-text);
}

/* Draft / void invoice states (AR Task 5) — deliberately quiet, neither
   good nor bad news. */
.chip.chip-muted {
  color: var(--ink-muted);
}

.chip svg {
  display: block;
}

.asof {
  font-size: 13px;
  color: var(--ink-muted);
  width: 100%;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.tile {
  background: var(--surface-1);
  border: 1px solid var(--ring);
  border-radius: 10px;
  padding: 14px 16px;
}

.tile .k {
  font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 6px;
}

.tile .v {
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.tile .s {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 4px;
}

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 860px) {
  .grid2 {
    grid-template-columns: 1fr;
  }
}

.card {
  background: var(--surface-1);
  border: 1px solid var(--ring);
  border-radius: 10px;
  padding: 16px;
}

.card h2 {
  font-size: 14px;
  font-weight: 650;
  margin-bottom: 2px;
}

.card .sub {
  font-size: 12px;
  color: var(--ink-muted);
  margin-bottom: 10px;
}

.legend {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--ink-2);
  margin-bottom: 8px;
}

.legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}

figure {
  position: relative;
}

svg.chart {
  display: block;
  width: 100%;
  height: auto;
}

.tip {
  position: absolute;
  pointer-events: none;
  background: var(--surface-1);
  border: 1px solid var(--ring);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  color: var(--ink-1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  display: none;
  min-width: 130px;
  z-index: 5;
}

.tip.visible {
  display: block;
}

.tip .t {
  color: var(--ink-muted);
  margin-bottom: 3px;
}

.tip .row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.tip .row b {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

details.tableview {
  margin-top: 8px;
}

details.tableview summary {
  font-size: 12px;
  color: var(--ink-muted);
  cursor: pointer;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 8px;
}

th {
  text-align: left;
  color: var(--ink-muted);
  font-weight: 500;
  font-size: 12px;
  border-bottom: 1px solid var(--grid);
  padding: 4px 6px;
}

td {
  padding: 5px 6px;
  border-bottom: 1px solid var(--grid);
}

td.num,
th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.rows .row {
  display: flex;
  justify-content: space-between;
  padding: 7px 2px;
  font-size: 14px;
  border-bottom: 1px solid var(--grid);
}

.rows .row:last-child {
  border-bottom: none;
}

.rows .row .n {
  color: var(--ink-2);
}

.rows .row .a {
  font-variant-numeric: tabular-nums;
  font-weight: 550;
}

.rows .total {
  border-top: 1px solid var(--baseline);
  font-weight: 650;
}

.rows .total .n {
  color: var(--ink-1);
}

.net {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--series-1) 9%, var(--surface-1));
  border-radius: 8px;
  font-weight: 650;
  font-size: 15px;
}

.act .row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--grid);
  font-size: 13.5px;
  align-items: baseline;
}

.act .row:last-child {
  border-bottom: none;
}

.act .who {
  font-weight: 550;
}

.act .when {
  color: var(--ink-muted);
  font-size: 12px;
}

.act .amt {
  font-variant-numeric: tabular-nums;
  font-weight: 550;
  white-space: nowrap;
}

footer.dash-footer {
  margin-top: 22px;
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.6;
}

/* ---------------------------------------------------------------------
   States: loading skeletons, error banner, empty ledger
--------------------------------------------------------------------- */

.skeleton {
  background: linear-gradient(90deg, var(--ring) 25%, transparent 37%, var(--ring) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: 6px;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

.error-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: color-mix(in srgb, var(--bad) 10%, var(--surface-1));
  border: 1px solid var(--ring);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 18px 0;
  color: var(--bad-text);
  font-size: 14px;
}

.error-banner button {
  all: unset;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid currentColor;
  color: inherit;
  white-space: nowrap;
}

.empty-state {
  background: var(--surface-1);
  border: 1px solid var(--ring);
  border-radius: 10px;
  padding: 32px 20px;
  text-align: center;
  color: var(--ink-2);
  font-size: 14px;
  margin: 18px 0;
}

.msg-inline {
  color: var(--ink-muted);
  font-size: 14px;
  padding: 24px 0;
}

/* ---------------------------------------------------------------------
   Reports — Task 9
--------------------------------------------------------------------- */

.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--ring);
  margin: 16px 0 20px;
}

.tabs button {
  all: unset;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--ink-2);
  padding: 9px 4px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
}

.tabs button:hover {
  color: var(--ink-1);
}

.tabs button[aria-current="page"] {
  color: var(--ink-1);
  font-weight: 600;
  border-bottom-color: var(--series-1);
}

.report-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.report-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-muted);
}

.report-toolbar input[type="date"] {
  font: inherit;
  font-size: 13px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--ring);
  background: var(--surface-1);
  color: var(--ink-1);
}

.presets {
  display: flex;
  gap: 6px;
}

.presets button {
  all: unset;
  cursor: pointer;
  font-size: 12.5px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--ring);
  color: var(--ink-2);
}

.presets button[aria-pressed="true"] {
  background: var(--ring);
  color: var(--ink-1);
  font-weight: 600;
}

.date-inputs {
  display: flex;
  gap: 12px;
}

.print-btn {
  margin-left: auto;
}

.acct-link {
  all: unset;
  cursor: pointer;
  color: inherit;
}

.acct-link:hover {
  text-decoration: underline;
}

.section-row td {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  border-bottom: none;
  padding-top: 14px;
}

.section-row:first-child td {
  padding-top: 2px;
}

.total-row td {
  font-weight: 600;
  border-top: 1px solid var(--baseline);
}

.net-row td {
  font-weight: 700;
  font-size: 14.5px;
  border-top: 1px solid var(--baseline);
  padding-top: 10px;
}

/* ---------------------------------------------------------------------
   Drill-through pages — Task 9
--------------------------------------------------------------------- */

.back-link {
  all: unset;
  cursor: pointer;
  color: var(--ink-muted);
  font-size: 13px;
  display: inline-block;
  margin-bottom: 14px;
}

.back-link:hover {
  color: var(--ink-1);
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}

.pager button {
  font: inherit;
  font-size: 13px;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--ring);
  background: var(--surface-1);
  color: var(--ink-1);
  cursor: pointer;
}

.pager button:disabled {
  color: var(--ink-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

.pager-count {
  font-size: 12.5px;
  color: var(--ink-muted);
}

.entry-memo {
  font-size: 15px;
  font-weight: 550;
  margin-bottom: 10px;
}

.badge-row {
  display: flex;
  gap: 8px;
}

.badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: var(--ink-2);
  background: var(--page);
  border: 1px solid var(--ring);
  border-radius: 999px;
  padding: 4px 12px;
}

.reversal-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.entry-lines {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  margin-top: 4px;
}

.entry-lines li {
  padding: 6px 0;
  border-bottom: 1px solid var(--grid);
}

.entry-lines li:last-child {
  border-bottom: none;
}

.btn {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid var(--ring);
  background: var(--surface-1);
  color: var(--ink-1);
  cursor: pointer;
}

.btn:disabled {
  color: var(--ink-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

/* ---------------------------------------------------------------------
   Setup wizard — Task 10
--------------------------------------------------------------------- */

.setup-standalone {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
}

.setup-wrap {
  max-width: 760px;
}

.wizard-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}

.field label {
  font-size: 12px;
  color: var(--ink-muted);
}

.text-input {
  font: inherit;
  font-size: 15px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--ring);
  background: var(--page);
  color: var(--ink-1);
  width: 100%;
  max-width: 380px;
}

.path-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.path-card {
  background: var(--surface-1);
  border: 1px solid var(--ring);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.path-card h2 {
  font-size: 16px;
  font-weight: 650;
}

.path-card p {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
}

.path-card .btn {
  align-self: flex-start;
  margin-top: 4px;
}

.menu-path-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.menu-path {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12.5px;
  background: var(--page);
  border: 1px solid var(--ring);
  border-radius: 6px;
  padding: 6px 10px;
  display: inline-block;
  color: var(--ink-1);
}

/* Industry picker cards ("What kind of work do you do?") — selectable
   buttons styled after .path-card, with a visible pressed + focus state. */
.tpl-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.tpl-card {
  font: inherit;
  text-align: left;
  background: var(--page);
  border: 1px solid var(--ring);
  border-radius: 10px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  color: var(--ink-1);
}

.tpl-card:focus-visible {
  outline: 2px solid var(--series-1);
  outline-offset: 2px;
}

.tpl-card[aria-pressed="true"] {
  border-color: var(--series-1);
  box-shadow: 0 0 0 1.5px var(--series-1);
}

.tpl-card-label {
  font-size: 14px;
  font-weight: 650;
}

.tpl-card-blurb {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.45;
}

.tpl-card-examples {
  font-size: 11.5px;
  color: var(--ink-muted);
}

.preview-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin: 14px 0;
}

.preview-group h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin-bottom: 8px;
  font-weight: 600;
}

.preview-group-count {
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}

/* Friendly one-liner under each standard heading (amended §9: plain English
   as a layer on top, never a replacement). */
.preview-group-subtitle {
  font-size: 12px;
  color: var(--ink-muted);
  margin: -4px 0 8px;
}

.preview-section + .preview-section {
  margin-top: 8px;
}

.preview-section-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-muted);
  margin-bottom: 4px;
}

.preview-group ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13.5px;
  color: var(--ink-1);
}

.dropzone {
  border: 1.5px dashed var(--ring);
  border-radius: 10px;
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  background: var(--page);
  margin: 8px 0;
}

.dropzone:hover,
.dropzone-active {
  border-color: var(--series-1);
  background: color-mix(in srgb, var(--series-1) 6%, var(--page));
}

.dropzone-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.dropzone-label {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

.dropzone-hint {
  font-size: 12.5px;
  color: var(--ink-muted);
  margin-bottom: 6px;
}

.dropzone-file {
  font-size: 13px;
  color: var(--ink-2);
}

.year-report-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0;
}

.year-row {
  border: 1px solid var(--ring);
  border-radius: 10px;
  padding: 12px 14px;
}

.year-row-clean {
  border-color: color-mix(in srgb, var(--good) 35%, var(--ring));
}

.year-row-dirty {
  border-color: color-mix(in srgb, var(--bad) 45%, var(--ring));
  background: color-mix(in srgb, var(--bad) 5%, var(--surface-1));
}

.year-row-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.year-row-label {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.year-row-year {
  font-size: 16px;
  font-weight: 650;
}

.year-row-stat {
  font-size: 12.5px;
  color: var(--ink-muted);
}

.year-row-void {
  font-size: 12.5px;
  color: var(--ink-muted);
  margin-top: 8px;
}

.year-row-errors {
  margin-top: 8px;
}

.year-row-toggle {
  all: unset;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bad-text);
}

.error-groups {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  font-size: 13px;
}

.error-groups li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px;
  background: var(--page);
  border-radius: 6px;
}

.error-groups-count {
  color: var(--ink-muted);
  white-space: nowrap;
}

.success-screen h2 {
  font-size: 18px;
  margin-bottom: 8px;
}

.success-screen p {
  font-size: 14px;
  color: var(--ink-2);
  margin-bottom: 14px;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------
   Record — Task 11
--------------------------------------------------------------------- */

.verb-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 8px;
}

.verb-card {
  all: unset;
  cursor: pointer;
  background: var(--surface-1);
  border: 1px solid var(--ring);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.verb-card:hover {
  border-color: var(--series-1);
  background: color-mix(in srgb, var(--series-1) 6%, var(--surface-1));
}

.verb-card h2 {
  font-size: 16px;
  font-weight: 650;
}

.verb-card p {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
}

.record-form {
  max-width: 480px;
  margin-top: 8px;
}

.record-form .field {
  margin-bottom: 14px;
}

.field-error {
  font-size: 12.5px;
  color: var(--bad-text);
  margin-top: 2px;
}

.record-preview {
  font-size: 14px;
  color: var(--ink-1);
  background: color-mix(in srgb, var(--series-1) 9%, var(--surface-1));
  border-radius: 8px;
  padding: 10px 12px;
  margin: 4px 0 16px;
  line-height: 1.5;
}

.picker-wrap {
  position: relative;
}

.picker-menu {
  list-style: none;
  position: absolute;
  z-index: 10;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface-1);
  border: 1px solid var(--ring);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  padding: 6px;
}

.picker-group + .picker-group {
  margin-top: 4px;
}

.picker-group-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  padding: 6px 8px 2px;
}

.picker-group ul {
  list-style: none;
}

.picker-option {
  font-size: 14px;
  color: var(--ink-1);
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.picker-option-active {
  background: var(--ring);
}

.picker-empty {
  font-size: 13px;
  color: var(--ink-muted);
  padding: 10px;
}

.confirm-panel {
  background: var(--page);
  border: 1px solid var(--ring);
  border-radius: 10px;
  padding: 14px 16px;
}

.confirm-panel p {
  font-size: 14px;
  color: var(--ink-1);
  line-height: 1.5;
  margin-bottom: 12px;
}

.success-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: color-mix(in srgb, var(--good) 10%, var(--surface-1));
  border: 1px solid var(--ring);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 18px 0;
  color: var(--good-text);
  font-size: 14px;
}

.success-banner button {
  all: unset;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid currentColor;
  color: inherit;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   Health panel — Task 12
--------------------------------------------------------------------- */

.health-panel h2 {
  margin-bottom: 10px;
}

.health-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.health-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
}

.health-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: var(--good);
}

.health-item-good .health-dot {
  background: var(--good);
}

.health-item-info .health-dot {
  background: var(--series-1);
}

.health-item-warn .health-dot {
  background: var(--warn);
}

.health-item-bad .health-dot {
  background: var(--bad);
}

.health-item-good .health-text {
  color: var(--good-text);
}

.health-item-info .health-text {
  color: var(--ink-1);
}

.health-item-warn .health-text {
  color: var(--warn-text);
}

.health-item-bad .health-text {
  color: var(--bad-text);
}

/* ---------------------------------------------------------------------
   Year-end close — Task 12
--------------------------------------------------------------------- */

.close-ladder {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.close-year-row {
  border: 1px solid var(--ring);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--surface-1);
}

.close-year-row-actionable {
  border-color: color-mix(in srgb, var(--series-1) 40%, var(--ring));
}

.close-year-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.close-year-label {
  font-size: 16px;
  font-weight: 650;
}

.close-year-stat {
  font-size: 12.5px;
  color: var(--ink-muted);
  margin-left: 10px;
}

.close-year-waiting {
  font-size: 12.5px;
  color: var(--ink-muted);
  margin-top: 6px;
}

.close-workflow {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--grid);
}

.close-explain {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: 10px;
}

.diff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 8px;
}

.diff-table th {
  text-align: left;
  color: var(--ink-muted);
  font-weight: 500;
  font-size: 12px;
  border-bottom: 1px solid var(--grid);
  padding: 5px 8px;
}

.diff-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--grid);
}

.diff-table td.num,
.diff-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.diff-row-bad td {
  color: var(--bad-text);
}

.match-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 18px;
  background: color-mix(in srgb, var(--good) 10%, var(--surface-1));
  border: 1px solid var(--ring);
  border-radius: 10px;
  padding: 12px 16px;
  color: var(--good-text);
  font-size: 14px;
  margin: 10px 0;
}

.match-banner-totals {
  font-size: 12.5px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.lock-explain {
  background: var(--page);
  border: 1px solid var(--ring);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 14px;
}

.lock-explain p {
  font-size: 13.5px;
  color: var(--ink-1);
  line-height: 1.5;
  margin-bottom: 10px;
}

/* ---------------------------------------------------------------------
   Settings — Task 12
--------------------------------------------------------------------- */

.settings-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 640px;
}

/* ---------------------------------------------------------------------
   Statement print views — AR Task 4 (P&L / balance sheet to PDF via
   window.print(), no new dependencies). #reports/print/pnl and
   #reports/print/balance-sheet (App.tsx) render with no Sidebar/app chrome
   at all — just this page. On screen the statement sits on a paper-like
   card using the app's normal surface tokens (so it still honors
   light/dark, same as every other screen); the @media print block below
   strips that back down to a plain page and forces pure black-on-white
   regardless of the OS/browser color scheme, since a printed accounting
   statement should never depend on dark mode being on or off.
--------------------------------------------------------------------- */

.print-page {
  min-height: 100vh;
  padding: 32px 20px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.print-toolbar {
  width: 100%;
  max-width: 720px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.print-status {
  width: 100%;
  max-width: 720px;
}

.paper {
  width: 100%;
  max-width: 720px;
  background: var(--surface-1);
  border: 1px solid var(--ring);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14);
  padding: 56px 64px;
}

.statement-head {
  text-align: center;
  margin-bottom: 30px;
}

.statement-company {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.statement-title {
  font-size: 15px;
  font-weight: 650;
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.statement-period {
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 6px;
}

.statement-generated {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 12px;
}

.statement-section {
  margin-bottom: 24px;
}

/* Heading + first two rows travel together across a page break — see
   StatementSection.tsx's header comment for why the whole section can't
   get this treatment (a ~90-account section is taller than a page). */
.statement-section-lead {
  break-inside: avoid;
  page-break-inside: avoid;
}

.statement-section-heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 1px solid var(--grid);
  padding-bottom: 5px;
  margin-bottom: 8px;
}

.statement-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0 4px 18px;
  font-size: 13px;
}

.statement-row-amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.statement-subtotal {
  margin-top: 4px;
  padding-top: 8px;
  padding-left: 0;
  border-top: 1px solid var(--baseline);
  font-weight: 650;
}

.statement-grandtotal {
  margin-top: 16px;
  padding-top: 12px;
  padding-left: 0;
  border-top: 3px double var(--ink-1);
  font-weight: 700;
  font-size: 14.5px;
}

.statement-footer {
  margin-top: 44px;
  padding-top: 14px;
  border-top: 1px solid var(--grid);
  font-size: 11px;
  color: var(--ink-muted);
  text-align: center;
}

@media print {
  @page {
    margin: 0.75in;
  }

  .no-print {
    display: none !important;
  }

  html,
  body {
    background: #fff !important;
  }

  .print-page {
    min-height: 0;
    padding: 0;
    display: block;
  }

  .paper {
    width: auto;
    max-width: none;
    background: #fff;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }

  .statement-company,
  .statement-title,
  .statement-row,
  .statement-row-amount,
  .statement-section-heading,
  .statement-subtotal,
  .statement-grandtotal {
    color: #000 !important;
  }

  .statement-period,
  .statement-generated,
  .statement-footer {
    color: #333 !important;
  }

  .statement-section-heading {
    border-bottom-color: #000;
  }

  .statement-subtotal {
    border-top-color: #000;
  }

  .statement-grandtotal {
    border-top-color: #000;
  }

  .statement-footer {
    border-top-color: #ccc;
  }

  .statement-section {
    break-inside: auto;
    page-break-inside: auto;
  }
}

/* ---------------------------------------------------------------------
   Customers / Invoices — AR Task 5
--------------------------------------------------------------------- */

.select-input {
  font: inherit;
  font-size: 13px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--ring);
  background: var(--surface-1);
  color: var(--ink-1);
}

.invoice-due-overdue {
  color: var(--bad-text);
  font-weight: 600;
}

.invoice-form {
  max-width: 760px;
}

.invoice-form .field-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.invoice-form .field-row .field {
  flex: 1 1 180px;
}

.invoice-form-terms-hint {
  font-size: 12.5px;
  color: var(--ink-muted);
  margin: -2px 0 12px;
}

.invoice-lines-table {
  margin-top: 10px;
}

.invoice-lines-table .text-input {
  max-width: none;
  font-size: 13.5px;
  padding: 6px 8px;
}

.invoice-lines-table .line-qty {
  width: 70px;
}

.invoice-lines-table .line-price {
  width: 100px;
}

.invoice-line-amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Open-invoices checkbox picker (AR Task 6 — ReceivePayment.tsx's "I got
   paid" flow and PaymentDetail.tsx's apply-credit mini-flow both render this
   via OpenInvoiceLinesTable.tsx) — same amount-box sizing as the invoice
   line editor above, plus a checkbox column that shouldn't stretch. */
.oi-lines-table {
  margin-top: 10px;
}

.oi-lines-table th:first-child,
.oi-lines-table td:first-child {
  width: 28px;
}

.oi-lines-table .text-input {
  max-width: none;
  font-size: 13.5px;
  padding: 6px 8px;
}

.oi-lines-table .line-price {
  width: 110px;
}

.invoice-form-total {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--baseline);
  font-weight: 650;
  font-size: 15px;
}

.invoice-form-total-amount {
  font-variant-numeric: tabular-nums;
}

/* Sales tax totals block (Sales Tax Task 3): when an invoice carries a tax
   rate the single Total line becomes Subtotal / Tax / Total — one bordered
   block, with the intermediate rows lighter than the final Total. */
.invoice-form-totals-block {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--baseline);
}

.invoice-form-totals-block .invoice-form-total {
  border-top: none;
  margin-top: 0;
  padding-top: 4px;
}

.invoice-form-totals-block .invoice-form-subtotal {
  font-weight: 500;
  font-size: 14px;
}

.invoice-form-drafts-note {
  font-size: 12.5px;
  color: var(--ink-muted);
  margin-top: 12px;
}

/* Invoice print view — reuses the statement print's paper/header/row/
   @media print machinery (styles.css's "Statement print views" block
   above) and adds only the bits specific to an invoice's own layout. */

.invoice-print-titlebar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 28px 0 10px;
}

.invoice-print-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.invoice-print-no {
  font-size: 15px;
  font-weight: 650;
  color: var(--ink-2);
}

.invoice-print-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--ink-2);
  margin-bottom: 18px;
}

.invoice-print-billto {
  margin-bottom: 24px;
  font-size: 13px;
  line-height: 1.5;
}

.invoice-print-billto-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  margin-bottom: 4px;
}

.invoice-print-billto-name {
  font-weight: 650;
  font-size: 14px;
}

.invoice-print-lines {
  width: 100%;
}

.invoice-print-memo {
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--ink-2);
}

.invoice-print-totals {
  margin-top: 10px;
  max-width: 320px;
  margin-left: auto;
}

@media print {
  .invoice-print-title,
  .invoice-print-no,
  .invoice-print-billto-name {
    color: #000 !important;
  }

  .invoice-print-meta,
  .invoice-print-billto,
  .invoice-print-memo {
    color: #333 !important;
  }
}

/* ---------------------------------------------------------------------
   Pay bills / bill payment detail — AP Task 5. The one control with no
   AR analogue: a plain radio group for "how did the money leave" (PayBills.tsx)
   and "which check stock" (ChecksScreen.tsx's run setup) — same look as the
   rest of the form, just three/two mutually-exclusive options in a row
   instead of a single input.
--------------------------------------------------------------------- */

.method-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 4px;
}

.method-option {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  cursor: pointer;
}

/* ---------------------------------------------------------------------
   Checks to print — AP Task 5 (docs/superpowers/specs/2026-08-01-ap-design.md's
   check-printing section). ChecksScreen.tsx's queue table reuses the plain
   <table>/.num conventions used everywhere else; this covers only the run
   setup's offset nudger.
--------------------------------------------------------------------- */

.check-run-setup {
  max-width: 560px;
}

.offset-field {
  flex: 1 1 200px;
}

.offset-nudger {
  display: flex;
  align-items: center;
  gap: 6px;
}

.offset-nudger .text-input {
  width: 90px;
  text-align: right;
}

.offset-nudger .btn {
  padding: 4px 11px;
  line-height: 1;
}

/* ---------------------------------------------------------------------
   Check print run — AP Task 5, CheckPrintPage.tsx. Reuses print-page/
   print-toolbar/print-status/paper's @media print machinery (the
   "Statement print views" block above) for the toolbar and the no-print
   confirmation panel; everything below is the printable check/voucher
   layout itself.

   Sizing note: the shared @page rule (this file's "Statement print views"
   section) sets a 0.75in margin for every print route in this app,
   invoices and statements included — changing that globally to a zero
   margin (which real check stock alignment technically wants) would shift
   every existing printed statement/invoice too, so this deliberately reuses
   that same page box rather than overriding it. .check-page is sized to the
   resulting ~7in x 9.5in printable area (8.5x11 letter minus 0.75in on every
   side); check-offset-x/y (the company's saved alignment nudge, applied as
   a transform on the whole .check-run below) is the mechanism for fine
   alignment against a specific printer/stock, on top of that fixed margin —
   not a substitute for it.

   Layout: three_per_page stacks 3 .check-strip-check strips per
   .check-page (no stubs); voucher is 1 .check-strip-check followed by 2
   identical .check-strip-stub strips (the two stub copies the design spec
   calls for), one .check-page per payment. Either way each .check-page is a
   full physical sheet, broken onto its own printed page via page-break-
   before (skipped for the very first page).
--------------------------------------------------------------------- */

.check-run-confirm {
  margin-bottom: 20px;
}

.check-run {
  transform: translate(var(--check-offset-x, 0mm), var(--check-offset-y, 0mm));
}

.check-page {
  width: 7in;
  height: 9.5in;
  background: var(--surface-1);
  border: 1px solid var(--ring);
  margin: 0 auto 24px;
}

.check-page + .check-page {
  page-break-before: always;
  break-before: page;
}

.check-strip {
  position: relative;
  height: calc(9.5in / 3);
  border-bottom: 1px dashed var(--grid);
}

.check-strip:last-child {
  border-bottom: none;
}

.check-strip-check {
  font-size: 12.5px;
}

.check-field {
  position: absolute;
}

.check-field-date {
  top: 10mm;
  right: 15mm;
}

.check-field-payee {
  top: 30mm;
  left: 15mm;
  font-weight: 650;
}

.check-field-amount {
  top: 30mm;
  right: 15mm;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.check-field-words {
  top: 40mm;
  left: 15mm;
  right: 15mm;
}

.check-field-memo {
  bottom: 10mm;
  left: 15mm;
  font-size: 11.5px;
  color: var(--ink-2);
}

.check-field-no {
  top: 4mm;
  right: 4mm;
  font-size: 10.5px;
  color: var(--ink-muted);
}

.check-strip-stub {
  padding: 8mm 15mm;
  font-size: 11.5px;
}

.check-stub-head {
  font-weight: 650;
  margin-bottom: 6px;
}

.check-stub-table {
  width: 100%;
}

.check-stub-row {
  color: var(--ink-2);
}

@media print {
  .check-page {
    background: #fff;
    border: none;
    box-shadow: none;
  }

  .check-strip {
    border-bottom-color: #ccc;
  }

  .check-field-payee,
  .check-field-amount,
  .check-stub-head {
    color: #000 !important;
  }

  .check-field-date,
  .check-field-words,
  .check-field-memo,
  .check-stub-row,
  .check-stub-table {
    color: #000 !important;
  }
}

/* ---------------------------------------------------------------------
   Transactions register — Switch From Anywhere Task 2 (spec Part A).
   Reuses .report-toolbar/.presets/.date-inputs/.card table conventions;
   these rules only size the register's own filter inputs and lay out the
   account-mode header (name + balance + the sanctioned Dr/Cr toggle).
--------------------------------------------------------------------- */

.register-toolbar {
  align-items: flex-end;
  row-gap: 10px;
}

.register-toolbar .presets,
.register-toolbar .date-inputs {
  align-self: flex-end;
  margin-bottom: 4px;
}

.register-picker {
  min-width: 220px;
}

.register-picker .field {
  margin-bottom: 0;
}

.register-picker .text-input {
  font-size: 13px;
  padding: 6px 8px;
}

.register-filter-input {
  max-width: 170px;
  font-size: 13px;
  padding: 6px 8px;
}

.register-amount-input {
  max-width: 100px;
  font-size: 13px;
  padding: 6px 8px;
}

.register-toolbar-end {
  margin-left: auto;
  align-self: flex-end;
  margin-bottom: 2px;
}

.register-account-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  flex-wrap: wrap;
  background: var(--surface-1);
  border: 1px solid var(--ring);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.register-account-name {
  font-size: 16px;
  font-weight: 650;
}

.register-balance {
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.register-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
}

.register-ref {
  font-size: 12px;
  color: var(--ink-muted);
}

/* The memo, under the name it belongs to — quieter, so the two halves of the
   Name/Memo column stay distinguishable at a glance. */
.register-memo-sub {
  font-size: 12.5px;
  color: var(--ink-2);
}

.register-row-end {
  text-align: right;
  white-space: nowrap;
}

.register-row-end .chip {
  font-size: 11.5px;
  padding: 2px 9px;
}

.register-open-link {
  font-size: 12.5px;
  color: var(--series-1);
  margin-left: 8px;
}

/* ---------------------------------------------------------------------
   Home screen + statement import wizard — Bank Rec Task 4
   (docs/superpowers/specs/2026-08-01-bank-rec-design.md's UI section).
   Account cards mirror .path-card's look (setup wizard); the compact tiles
   strip reuses .tiles/.tile (Dashboard) at a smaller scale rather than a
   parallel set of components, per the task brief ("reuse dashboard tiles
   data... small variant").
--------------------------------------------------------------------- */

.tiles-compact {
  margin: 10px 0 22px;
}

.tiles-compact .tile {
  padding: 10px 14px;
}

.tiles-compact .tile .v {
  font-size: 19px;
}

.account-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.account-card {
  background: var(--surface-1);
  border: 1px solid var(--ring);
  border-radius: 10px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.account-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.account-card-head h2 {
  font-size: 15px;
  font-weight: 650;
}

.account-card-balance {
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.account-card-pill {
  margin-top: -2px;
}

.account-card-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}

/* Statement import wizard's CSV column-mapping preview table — reuses the
   base table/.select-input styling, just adds the horizontal-scroll-safe
   sizing a per-column dropdown-in-a-<th> needs. */
.mapping-table th {
  vertical-align: bottom;
  white-space: nowrap;
}

.mapping-table th .select-input {
  width: 100%;
  min-width: 120px;
}

.mapping-table td {
  white-space: nowrap;
  font-size: 13px;
}

/* ---------------------------------------------------------------------
   Statement review workbench — Bank Rec Task 5
--------------------------------------------------------------------- */

.rec-section {
  margin: 22px 0;
}

.rec-section h2 {
  font-size: 15px;
  font-weight: 650;
  margin-bottom: 10px;
}

.rec-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.rec-section-head h2 {
  margin-bottom: 0;
}

.rec-section-details {
  margin: 18px 0;
}

.rec-section-details summary {
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 0;
}

.rec-line {
  background: var(--surface-1);
  border: 1px solid var(--ring);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
}

.rec-line-sides {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}

@media (max-width: 640px) {
  .rec-line-sides {
    grid-template-columns: 1fr;
  }
  .rec-line-arrow {
    display: none;
  }
}

.rec-line-bank,
.rec-line-entry {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rec-line-arrow {
  color: var(--ink-muted);
  font-size: 16px;
}

.rec-line-date {
  font-size: 12px;
  color: var(--ink-muted);
}

.rec-line-desc {
  font-size: 13.5px;
  color: var(--ink-1);
}

.rec-line-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

.rec-candidates,
.rec-new-form,
.rec-exclude-form {
  background: var(--page);
  border: 1px solid var(--ring);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 12px;
}

.rec-candidate-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.rec-candidate-row {
  display: grid;
  grid-template-columns: 90px 1fr auto auto;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.rec-candidate-memo {
  color: var(--ink-2);
}

.rec-field-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.rec-field-row .field {
  flex: 1 1 180px;
}

.rec-settled-row {
  display: grid;
  grid-template-columns: 90px 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px 4px;
  font-size: 13px;
  border-bottom: 1px solid var(--grid);
}

.rec-settled-row:last-child {
  border-bottom: none;
}

@media (max-width: 640px) {
  .rec-settled-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

.rec-footer {
  position: sticky;
  bottom: 0;
  background: var(--surface-1);
  border: 1px solid var(--ring);
  border-radius: 10px;
  padding: 16px 18px;
  margin-top: 24px;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.08);
}

.rec-footer-inputs {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.rec-footer-inputs .field {
  flex: 1 1 220px;
}

.rec-footer-status {
  margin-top: 6px;
}

/* --- Chart of Accounts (Chart Management Task 2) ---------------------- */

.chart-toolbar {
  align-items: center;
}

.chart-type-section {
  margin-top: 22px;
}

.chart-type-section h2 {
  font-size: 17px;
  margin-bottom: 8px;
}

.chart-section-row td {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  padding-top: 12px;
  padding-bottom: 4px;
}

.chart-code {
  width: 70px;
  white-space: nowrap;
}

.chart-code-input {
  width: 80px;
}

.chart-actions {
  text-align: right;
}

.chart-edit-fields {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chart-edit-fields .text-input {
  flex: 1 1 180px;
}

/* Shared add-account modal (NewAccountModal.tsx) */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 16px 16px;
}

.modal-card {
  background: var(--surface-1);
  border: 1px solid var(--ring);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.24);
  padding: 20px;
  width: 100%;
  max-width: 440px;
}

.modal-card h2 {
  margin-bottom: 12px;
}

/* SearchablePicker's optional footer action ("+ New category") */
.picker-action {
  font-size: 14px;
  color: var(--series-1);
  padding: 8px 10px;
  border-top: 1px solid var(--grid);
  margin-top: 4px;
  border-radius: 6px;
  cursor: pointer;
}

.picker-action:hover {
  background: var(--ring);
}

/* ---------------------------------------------------------------------
   Universal import wizard ("Restore from other software") — Switch From
   Anywhere Task 5. Only the pieces the QB restore had no equivalent for:
   the column-mapping field grid, the source-type value-mapping table, the
   last-resort grouping callout, and the "save this setup" box. Everything
   else on those screens reuses .card / .field / .select-input /
   .mapping-table / .preview-groups / .year-report-list as-is.
--------------------------------------------------------------------- */

.uw-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 14px;
  align-items: start;
}

.uw-field-grid .field {
  margin-bottom: 0;
}

/* Source-type -> our five kinds. The unmapped rows must be impossible to
   miss: they are the one thing standing between the user and continuing. */
.uw-type-table td {
  white-space: normal;
  vertical-align: middle;
  padding-right: 14px;
}

.uw-type-table td .select-input {
  min-width: 260px;
}

.uw-type-row-unmapped td {
  background: color-mix(in srgb, var(--warn) 14%, transparent);
}

.uw-type-row-unmapped td:first-child {
  font-weight: 600;
}

/* "Group consecutive rows until they balance" — an explicit last resort,
   so it reads as a warning, not as an equal option. */
.uw-lastresort {
  border: 1px solid color-mix(in srgb, var(--warn) 55%, var(--ring));
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-1);
}

.uw-save-box {
  border-top: 1px solid var(--grid);
  margin-top: 18px;
  padding-top: 14px;
}

.uw-save-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

.uw-save-controls .text-input {
  max-width: 260px;
}

/* The picked software and the file's own headers disagree (FIX 1). An
   OFFER, not an override: both buttons stay live, so whichever set of
   guesses is in use is one click from the other. */
.uw-preset-conflict {
  border: 1px solid color-mix(in srgb, var(--warn) 55%, var(--ring));
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-1);
}

.uw-preset-conflict-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* The one mapping answer nothing downstream can verify (review F1): a
   still-unanswered "what does a positive amount mean?" must look like an
   open question, not a filled-in field. */
.uw-must-answer {
  border-left: 3px solid var(--warn);
  padding-left: 10px;
}

/* Direction sanity check on the journal preview — the counts above it are
   identical whether the amounts went in the right way round or exactly
   backwards, so this is the only thing on the screen that can catch it. */
.uw-direction-check {
  border: 1px solid color-mix(in srgb, var(--series-1) 40%, var(--ring));
  background: color-mix(in srgb, var(--series-1) 7%, transparent);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.5;
}

.uw-direction-check ul {
  margin: 8px 0;
  padding-left: 18px;
}

.uw-direction-check li {
  margin: 3px 0;
}

.uw-direction-check li.uw-direction-unusual {
  color: var(--warn-text);
  font-weight: 600;
}

.uw-direction-check .sub {
  margin-top: 8px;
}

/* ---------------------------------------------------------------------------
   Items, purchase orders and item lines — Inventory Task 4.
   Everything here is one of two things: a quiet sub-line under a table cell
   (the existing .register-memo-sub idiom, reused rather than re-invented), or
   a notice block that carries a sentence the API wrote. No new colours.
   --------------------------------------------------------------------------- */

/* The accounts an item posts to, stacked in its Items-screen cell. */
.item-accounts {
  font-size: 13px;
  color: var(--ink-2);
}

.item-account-line + .item-account-line {
  margin-top: 2px;
}

.item-account-label {
  color: var(--ink-muted);
  display: inline-block;
  min-width: 62px;
}

/* The frozen-fields explanation in the item modal, sitting directly under the
   controls it explains. */
.item-frozen-note {
  margin-top: -6px;
  margin-bottom: 12px;
}

.item-modal-section {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  margin: 16px 0 8px;
}

/* The item modal carries three pickers and two field rows, so it needs more
   room than the 440px add-account modal. */
.modal-card-wide {
  max-width: 620px;
}

/* Per-line notes under an item picker: "adds 10 to stock on hand",
   "no item — this line can't be tracked as received". */
.line-note {
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 4px;
  line-height: 1.35;
}

.line-note-stock {
  color: var(--good-text);
}

/* A stocked bill line's category isn't a choice — its inventory account is
   named as plain text where the picker would otherwise sit. */
.line-fixed-category {
  font-size: 13.5px;
  color: var(--ink-1);
  padding-top: 6px;
}

/* Notices carrying the API's own sentence: the receive prefill's "already on a
   bill you haven't entered yet", an issue/cancel summary, the over-received
   and not-tracked explanations. */
.po-receive-notice {
  background: var(--surface-1);
  border: 1px solid var(--grid);
  border-left: 3px solid var(--series-1);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 12px 0;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------
   Builds, stock adjustments and the inventory valuation report
   (Inventory Task 5)
   --------------------------------------------------------------------- */

/* .success-banner / .error-banner are single-row flex boxes (message on the
   left, one action on the right). A build confirmation, an undo confirmation
   and the valuation report's tie verdict each carry more than one line plus
   its own action row, which would otherwise sit side by side. Same override
   SettingsScreen's backup banner already applies inline — named here because
   four screens now need it. */
.banner-stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.banner-stack p {
  margin: 0;
  line-height: 1.5;
}
.banner-stack .wizard-actions {
  margin: 0;
}

/* A component row on the build preview whose part isn't on the shelf in
   sufficient quantity. Tinted, not just bolded: "you can't build this yet" has
   to be visible before the eye reaches the disabled button. */
.stock-short td {
  background: color-mix(in srgb, var(--bad) 9%, transparent);
}
.stock-short .stock-short-qty {
  color: var(--bad-text);
  font-weight: 600;
}

/* The two independently-derived numbers and the gap between them, printed on
   the face of the valuation report per inventory account. */
.tie-line {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--baseline);
}
.tie-line-bad {
  color: var(--bad-text);
  font-weight: 600;
}
.tie-explain {
  font-size: 13px;
  color: var(--bad-text);
  line-height: 1.5;
  margin-top: 6px;
}

/* The valuation report prints to the same standard as the P&L and balance
   sheet, which means its tie lines have to survive the print stylesheet's
   forced-black treatment rather than washing out to grey on paper. */
@media print {
  .tie-line {
    color: #333 !important;
  }
  .tie-line-bad,
  .tie-explain {
    color: #000 !important;
    font-weight: 600;
  }
}
