:root {
  --accent: #0f766e;
  --border: #d8ddd6;
  --card-background: #fff;
  --control-background: #fff;
  --control-radius: 8px;
  --heading-font: Inter, ui-sans-serif, system-ui, sans-serif;
  --hero-color: #141a17;
  --hero-letter-spacing: normal;
  --hero-margin: 2rem;
  --ink: #141a17;
  --muted: #59645f;
  --notice-radius: 8px;
  --page-background: #f8f5ee;
  --panel-backdrop: none;
  --panel-border-width: 1px;
  --panel-padding: 1rem;
  --panel-radius: 8px;
  --primary-background: #0f766e;
  --primary-border: #0f766e;
  --primary-shadow: none;
  --red: #a32d2d;
  /* Status colours from APP_STYLE §5's colour column, needed by the §6.5 status
     pill. Values from APP_STYLE §2, contrast-verified in docs/UX_DECISIONS.md
     §4.1 against --paper (amber 5.85:1, green 4.68:1). U05 still owns the token
     file as a whole and the --accent → --green action-colour swap; these two
     exist here only because the pill cannot render §5 without them. */
  --amber: #854f0b;
  --green: #0e7a4b;
  --rust: #7a3e2f;
  --shadow: 0 24px 80px rgb(20 25 35 / 8%);
  --sky: #2f5f8f;
  --surface: #fcfbf7;
  --text-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme='mygen-signal'] {
  --accent: #1463ff;
  --border: rgb(11 11 20 / 12%);
  --card-background: rgb(255 255 255 / 76%);
  --control-background: rgb(255 255 255 / 88%);
  --control-radius: 12px;
  --heading-font: "Fraunces", Georgia, serif;
  --hero-color: #0d0d1f;
  --hero-letter-spacing: -0.035em;
  --hero-margin: 2.5rem;
  --ink: #0b0b14;
  --muted: #5f5d69;
  --notice-radius: 16px;
  --page-background:
    radial-gradient(70rem 36rem at 8% 5%, rgb(255 45 143 / 20%), transparent 62%),
    radial-gradient(58rem 32rem at 92% 8%, rgb(43 245 255 / 28%), transparent 62%),
    radial-gradient(48rem 34rem at 85% 88%, rgb(255 210 63 / 25%), transparent 68%),
    linear-gradient(125deg, #fff5e6 0%, #f7f4ff 52%, #e8f7ff 100%);
  --panel-backdrop: blur(14px);
  --panel-border-width: 2px;
  --panel-padding: clamp(1rem, 2vw, 1.4rem);
  --panel-radius: 24px;
  --primary-background:
    linear-gradient(155deg, rgb(255 255 255 / 16%), transparent 45%),
    linear-gradient(135deg, #854766 0%, #644c76 46%, #425780 100%);
  --primary-border: rgb(94 63 56 / 38%);
  --primary-shadow:
    inset 0 1px 0 rgb(255 255 255 / 12%),
    0 3px 8px rgb(30 20 35 / 22%);
  --rust: #c71f6e;
  --shadow: 0 20px 60px rgb(8 8 25 / 14%);
  --sky: #1463ff;
  --surface: rgb(255 255 255 / 82%);
  --text-font: "Space Grotesk", "Segoe UI", sans-serif;
}

:root[data-theme='civic-clean'] {
  --accent: #1b4b91;
  --border: #d5d9e0;
  --card-background: #fff;
  --control-background: #fff;
  --control-radius: 6px;
  --heading-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hero-color: #10151f;
  --hero-letter-spacing: normal;
  --hero-margin: 2rem;
  --ink: #10151f;
  --muted: #55606e;
  --notice-radius: 6px;
  --page-background: #f4f6f9;
  --panel-backdrop: none;
  --panel-border-width: 1px;
  --panel-padding: 1.25rem;
  --panel-radius: 6px;
  --primary-background: #1b4b91;
  --primary-border: #1b4b91;
  --primary-shadow: none;
  --rust: #9a2b2b;
  --shadow: 0 1px 3px rgb(16 21 31 / 8%);
  --sky: #3f6fb0;
  --surface: #fff;
  --text-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--page-background);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--text-font);
}

h1,
h2,
h3 {
  font-family: var(--heading-font);
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
select,
input,
textarea {
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
}

button {
  padding: 0.7rem 0.9rem;
  background: var(--control-background);
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

:root[data-theme='mygen-signal'] button:not(:disabled):hover {
  border-color: rgb(120 85 78 / 48%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%), 0 5px 12px rgb(20 14 24 / 20%);
  transform: translateY(-1px);
}

:root[data-theme='mygen-signal'] button:not(:disabled):active {
  transform: translateY(0);
  box-shadow: inset 0 2px 4px rgb(20 12 18 / 28%);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

input,
select,
textarea {
  width: 100%;
  padding: 0.7rem;
  background: var(--control-background);
  color: var(--ink);
}

label {
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.operator-login-form {
  display: grid;
  gap: 1rem;
}

.shell {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1rem 0 3rem;
}

.topbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-bottom: 1.5rem;
}

:root[data-theme='mygen-signal'] .topbar button {
  border-radius: 999px;
  padding-inline: 1rem;
  backdrop-filter: blur(12px);
}

:root[data-theme='mygen-signal'] .shell {
  padding: 1.25rem 0 4rem;
}

.hero {
  display: grid;
  gap: 0.8rem;
  max-width: 58rem;
  margin-bottom: var(--hero-margin);
}

.hero h1 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 0.9;
  color: var(--hero-color);
  letter-spacing: var(--hero-letter-spacing);
}

.hero p:last-child {
  max-width: 46rem;
  margin: 0;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.6;
}

.eyebrow {
  margin: 0;
  color: var(--accent);
  font-family: var(--text-font);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

:root[data-theme='mygen-signal'] .eyebrow {
  letter-spacing: 0.18em;
}

.invoice-grid,
.operator-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1rem;
  align-items: start;
}

/* The desk is not two comparable halves. The left column is a queue — a fixed
   list of short rows — and the right is where the work happens, so the queue
   takes the width its rows need and the detail takes the rest. At 0.9fr/1.1fr
   the editor and the payment cards were squeezed for no gain. */
.operator-grid {
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  gap: 1.25rem;
}

.panel {
  display: grid;
  gap: 1rem;
  border: 1px solid var(--border);
  border-width: var(--panel-border-width);
  border-radius: var(--panel-radius);
  padding: var(--panel-padding);
  background: var(--surface);
  box-shadow: var(--shadow);
  backdrop-filter: var(--panel-backdrop);
}

.payer-entry-panel {
  width: min(44rem, 100%);
}

.operator-settings-panel {
  width: min(38rem, 100%);
}

.mobile-only {
  display: none;
}

/* Keyboard focus was previously invisible: every control is custom-styled and
   nothing restored an indicator. */
:where(button, input, select, textarea, summary, a):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.destructive {
  border-color: var(--rust);
  color: var(--rust);
}

/* ---- status pill ------------------------------------------------------- */
/* APP_STYLE §6.5: text plus a 6px dot, no background fill, no border. Fills
   read as badges and badges read as decoration. The dot is a second channel
   beside the word, never a replacement for it (§9: status is never conveyed by
   colour alone). */

.status-pill {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: none;
  font-weight: 700;
}

.status-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentcolor;
}

.status-pill[data-tone='quiet'] {
  color: var(--muted);
}

.status-pill[data-tone='waiting'] {
  color: var(--amber);
}

.status-pill[data-tone='done'] {
  color: var(--green);
}

.status-pill[data-tone='attention'] {
  color: var(--red);
}

/* ---- the four route states --------------------------------------------- */

.route-state {
  display: grid;
  gap: 0.6rem;
  justify-items: start;
}

.route-state h2,
.route-state p {
  margin: 0;
}

/* Loading shows structure, not a spinner (APP_STYLE §8). Each block below is
   the shape of what replaces it, so the page does not jump when data lands. */

.route-skeleton {
  gap: 0.9rem;
}

.skeleton-line {
  height: 0.85rem;
  border-radius: 4px;
  background: var(--border);
}

.skeleton-eyebrow {
  width: 8rem;
  height: 0.6rem;
}

.skeleton-title {
  width: min(22rem, 80%);
  height: 1.8rem;
}

.skeleton-short {
  width: 60%;
}

.skeleton-title-block {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  overflow: hidden;
}

.skeleton-title-block > div {
  height: 3.2rem;
  border-right: 1px solid var(--border);
  background: var(--card-background);
}

.skeleton-title-block > div:last-child {
  border-right: none;
}

.skeleton-rows {
  display: grid;
  gap: 0.6rem;
}

.skeleton-row {
  height: 4.5rem;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background: var(--card-background);
}

.skeleton-stat {
  height: 2.2rem;
}

@keyframes skeleton-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.55;
  }
}

/* The reduced-motion block above neutralises this for anyone who asks. */
.skeleton-line,
.skeleton-row,
.skeleton-title-block > div {
  animation: skeleton-pulse 1.6s ease-in-out infinite;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* ---- payer surface ---------------------------------------------------- */
/* Comfortable density: this is the one screen a stranger reads before entering
   card details, so it gets the whitespace and the larger targets. */

.shell.payer-route {
  width: min(46rem, calc(100% - 2rem));
}

.payer-brand {
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.payer-shell {
  gap: 1.75rem;
  font-size: 1.02rem;
}

.payer-shell button,
.payer-shell input,
.payer-shell select {
  min-height: 44px;
}

.ledger-header {
  display: grid;
  gap: 0.7rem;
}

.ledger-header h1 {
  margin: 0;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1.15;
  color: var(--hero-color);
}

.ledger-byline {
  margin: 0;
  color: var(--muted);
}

/* Title block: the record's facts in a bordered grid, before any control. */
/* Four cells again as of U04, which supplies the contributor count. It was
   dropped to three when the DUE cell went (decision B4), because at four one
   quarter of the bordered box would have been empty. APP_STYLE §6.4: collapses
   to two columns below 34rem, never to one. */
.title-block {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0.4rem 0 0;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  overflow: hidden;
}

.title-block > div {
  display: grid;
  gap: 0.3rem;
  padding: 0.7rem 0.8rem;
  border-right: 1px solid var(--border);
  background: var(--card-background);
}

.title-block > div:last-child {
  border-right: none;
}

.title-block dt {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.title-block dd {
  margin: 0;
  font-weight: 700;
}

/* Tabular figures so columns of money and hours align and digits don't shift
   width as values update. */
.figure,
.money {
  font-variant-numeric: tabular-nums;
}

.money {
  color: var(--rust);
}

/* Blue is contribution history and nothing else (APP_STYLE §2's one-job rule):
   the contributor count in the title block, and the aggregate line below it. */
.count,
.contribution-history {
  color: var(--sky);
}

.contribution-history {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.model-statement {
  max-width: 42rem;
  margin: 0.4rem 0 0;
  font-size: 1.05rem;
  line-height: 1.6;
}

.payer-step {
  display: grid;
  gap: 0.85rem;
  border-top: 1px solid var(--border);
  padding-top: 1.35rem;
}

.payer-step h3 {
  margin: 0;
  font-size: 1.2rem;
}

.step-label {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: baseline;
  margin: 0;
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.step-count {
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
}

.work-row {
  align-items: start;
  padding: 0.95rem;
}

.work-row.chosen {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.work-row-body {
  display: grid;
  gap: 0.3rem;
}

.work-row-head {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
}

.work-row-hours {
  flex: none;
  color: var(--muted);
  font-weight: 700;
}

.work-row-history {
  color: var(--sky);
  font-weight: 700;
}

/* `.bit-card span` is a layout rule for card sections. Money inside this prose
   row is inline so the amount and its "at suggested rate" qualifier stay
   together visually. */
.work-row-money .money {
  display: inline;
  white-space: nowrap;
}

.rate-field {
  max-width: 14rem;
}

.rate-field input {
  font-size: 1.4rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--rust);
}

/* The field is deliberately empty on first load. A placeholder that inherits the
   input's 700 weight reads as a value the payer did not choose, which is the
   thing this field exists to avoid. */
.rate-field input::placeholder {
  color: var(--muted);
  font-weight: 400;
  opacity: 1;
}

.rate-reference {
  margin: 0;
  line-height: 1.6;
}

.payer-extra > summary,
.payer-breakdown > summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 700;
}

.payer-extra-body {
  display: grid;
  gap: 0.75rem;
  padding-top: 0.75rem;
}

.payer-breakdown {
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
}

.payer-breakdown .totals {
  padding-top: 0.75rem;
}

.payer-total {
  display: grid;
  gap: 0.85rem;
  border-top: 1px solid var(--border);
  padding-top: 1.35rem;
}

/* StatRow draws its card from `.totals div`. The grand total sits outside
   `.totals` here, so it needs its own row: without this the label and the amount
   are two inline children with no gap and render as "TotalCA$0.00 CAD". */
.payer-total > .grand {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--rust);
  border-radius: var(--control-radius);
  padding: 0.9rem 1rem;
  background: var(--card-background);
}

.payer-total > .grand strong {
  font-size: 1.35rem;
}

.payer-submit {
  padding: 0.95rem 1.1rem;
  font-size: 1.05rem;
}

/* Rust means money and nothing else (APP_STYLE section 2 names errors as the one
   misuse to avoid). A list of unmet conditions is not money, so it takes the
   state colour. --red is defined once in :root and inherits into every theme. */
/* Compound selector on purpose: `.notice` is declared later in this file, so a
   bare `.blocker-list` loses to it at equal specificity and the box renders as a
   success notice. */
.notice.blocker-list {
  border-color: #e0bcbc;
  background: #fdf5f5;
  color: var(--red);
}

.blocker-list ul {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
}

.blocker-list li {
  font-weight: 400;
}

.reference-quote {
  border-top: 1px solid var(--border);
  padding-top: 0.85rem;
}

.payment-copy {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
}

.operations-clear {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.draft-block + .draft-block {
  margin-top: 0.4rem;
}

.payer-entry-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: end;
}

.operator-entry {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: 0.8rem;
}

.operations-summary {
  display: grid;
  gap: 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  padding: 0.8rem;
  background: var(--card-background);
}

.operations-summary h3,
.operations-summary p {
  margin: 0;
}

/* A clear queue and a queue with six disputes on it used to be the same box in
   the same colours. The words already differ (§9: never colour alone); the
   border is the second channel. */
.operations-summary.needs-attention {
  border-color: var(--amber);
}

.operations-summary h3 {
  font-size: 0.95rem;
}

.operations-grid {
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.operations-grid span {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.operations-grid strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.risk-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  padding: 0.8rem;
  background: var(--card-background);
}

.risk-card.blocking-risk {
  border-color: var(--rust);
}

.risk-card h3,
.risk-card p {
  margin: 0;
}

.risk-detail {
  display: grid;
  gap: 0.25rem;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: right;
}

.risk-detail code {
  overflow-wrap: anywhere;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.8rem;
}

.section-heading h2 {
  margin: 0.25rem 0 0;
  font-size: 1.35rem;
}

.section-heading > strong {
  color: var(--rust);
  font-size: 1.35rem;
  text-align: right;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}

.stats div,
.totals div {
  display: grid;
  gap: 0.25rem;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  padding: 0.7rem;
  background: var(--card-background);
}

.stats span,
.totals span,
.quiet {
  color: var(--muted);
}

.bit-list,
.totals {
  display: grid;
  gap: 0.6rem;
}

.empty-state {
  display: grid;
  gap: 0.6rem;
  justify-items: start;
  padding: 0.4rem 0;
}

.bit-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  padding: 0.85rem;
  background: var(--card-background);
}

.bit-card.selectable {
  grid-template-columns: auto minmax(0, 1fr);
  color: var(--ink);
}

/* ---- operator work item ------------------------------------------------ */
/* Single column, like the payer's work row. The two-column `.bit-card` shell put
   a rate stack in the right-hand column whether or not it had anything to say,
   and dropped the action row underneath the left column only. */

.work-item {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.4rem;
}

.work-item-head {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
}

.work-item-head h3 {
  font-size: 1.05rem;
}

.work-item-hours {
  flex: none;
  color: var(--muted);
  font-weight: 700;
}

/* Blue is contribution history and nothing else (APP_STYLE §2's one-job rule).
   Rates that people have actually paid or committed are exactly that. */
/* Two classes on purpose: `.bit-card p` below sets the muted body colour and
   would otherwise outrank a single-class selector here. */
.work-item p.work-item-history {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  color: var(--sky);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* Withheld, not disabled — the old marker was a hard-coded beige wash that only
   belonged to the default theme. `--surface` recedes from `--card-background`
   in every theme, and the card says the word as well. */
.work-item.unreported {
  border-style: dashed;
  background: var(--surface);
}

.work-item p.work-item-flag {
  color: var(--amber);
  font-weight: 700;
}

.work-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.2rem;
}

.work-item-actions .inline-check {
  justify-content: flex-start;
}

/* ---- operator payment attempt ------------------------------------------ */
/* "The operator's desk pairs identity with amounts, deliberately" (UX north
   star, commitment 4). So the payer's name and the amount are the card, and the
   five component figures sit behind one disclosure instead of forming a wall of
   dotted paragraphs in front of them. */

.attempt-card {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
}

.attempt-head {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
}

.attempt-payer h3 {
  font-size: 1.05rem;
}

.attempt-total {
  flex: none;
  font-size: 1.25rem;
}

.attempt-total-block {
  display: grid;
  justify-items: end;
  text-align: right;
}

.attempt-currency {
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.attempt-state {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: baseline;
}

/* `.bit-card span` further down turns every span inside a card into a grid,
   which would stack the pill's dot above its own label. Two classes to outrank
   it. (The same collision affects `.work-row-head` on the payer surface, which
   is out of scope here — noted in the session log.) */
.attempt-state .status-pill {
  display: inline-flex;
  gap: 0.4rem;
  text-transform: capitalize;
}

.attempt-note {
  border-left: 2px solid var(--border);
  padding-left: 0.6rem;
}

.attempt-breakdown > summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 700;
}

.attempt-breakdown-body {
  display: grid;
  gap: 0.3rem;
  padding-top: 0.5rem;
}

.attempt-breakdown-body > div {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
}

.attempt-breakdown-body strong {
  font-variant-numeric: tabular-nums;
}

.attempt-sync {
  font-size: 0.8rem;
}

.bit-card h3,
.bit-card p {
  margin: 0;
}

.bit-card p,
small {
  color: var(--muted);
  line-height: 1.45;
}

.bit-card input[type='checkbox'] {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  accent-color: var(--accent);
}

.bit-card span {
  display: grid;
  gap: 0.25rem;
}

.rate-stack {
  display: grid;
  gap: 0.25rem;
  min-width: 9rem;
  color: var(--sky);
  font-size: 0.85rem;
  font-weight: 800;
  text-align: right;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.primary {
  border-color: var(--primary-border);
  background: var(--primary-background);
  color: #fff;
  box-shadow: var(--primary-shadow);
}

.notice {
  border: 1px solid #b8d4c6;
  border-radius: var(--notice-radius);
  padding: 0.85rem;
  background: #eef8f2;
  color: #164c37;
  font-weight: 700;
}

.notice.error {
  border-color: #dcb8a6;
  background: #fff3ee;
  color: #7a3e2f;
}

.inline-check {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  justify-content: flex-end;
  color: var(--ink);
}

.inline-check input {
  width: 1rem;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.invoice-list,
.policy-form,
.project-directory,
.draft-editor,
.share-panel,
.bit-actions {
  display: grid;
  gap: 0.6rem;
}

.invoice-list {
  max-height: min(32rem, 55vh);
  overflow-y: auto;
  padding-right: 0.2rem;
}

.invoice-list button {
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.operator-invoice-list button {
  display: grid;
  grid-template-rows: auto auto;
  row-gap: 0.2rem;
  padding: 0.6rem 0.7rem;
}

/* Selection borrows the payer surface's chosen-row idiom (`.work-row.chosen`):
   an accent rule down the edge, not a solid fill of the action colour across a
   whole list row. */
.operator-invoice-list button.selected {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.operator-invoice-list .invoice-row-recipient {
  grid-column: 1;
  grid-row: 1;
}

.operator-invoice-list .invoice-row-secondary {
  grid-column: 1;
  grid-row: 2;
}

.invoice-row-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: baseline;
  font-size: 0.85rem;
  font-weight: 400;
}

/* Only the status word wants capitalising. It used to apply to the whole line,
   which was harmless while the line held nothing else and would now render
   "4.0 H" and "Due". */
.invoice-row-secondary .status-pill {
  text-transform: capitalize;
}

.invoice-row-recipient {
  font-weight: 700;
}

/* One view is on and one is off; the pressed state says which, so the fill no
   longer has to. */
.segmented {
  display: flex;
  gap: 0.4rem;
}

.segmented button {
  flex: 1;
}

.segmented button.selected {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* Creating an invoice is a separate act from working the queue, and it reads as
   one. Stacked rather than side by side: in the old two-column form-grid the
   button aligned to the top of the label text and floated above the select
   beside it, and in a column this width the select was clipped mid-word. */
.new-invoice {
  display: grid;
  gap: 0.6rem;
  border-top: 1px solid var(--border);
  padding-top: 0.9rem;
}

.project-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: end;
}

.project-picker .project-name {
  align-self: center;
  margin: 0;
}

.project-picker .project-add {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.7rem;
  font-size: 1.15rem;
  line-height: 1;
}

.account-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-top: 1px solid var(--border);
  padding-top: 0.9rem;
}

.account-row button {
  flex: 1;
  padding-block: 0.55rem;
  font-weight: 700;
}

/* Ruled ledger lines instead of one bordered card per figure. */
.ledger-rows > div {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 0.55rem 0.15rem;
  background: none;
}

.ledger-rows > div.grand {
  border-bottom-width: 2px;
  padding-bottom: 0.7rem;
}

.ledger-rows > div strong {
  font-variant-numeric: tabular-nums;
}

/* Names a list without the weight of a full section heading. */
.list-caption {
  margin: 0.4rem 0 -0.2rem;
  color: var(--muted);
  font-family: var(--text-font);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.policy-form,
.project-directory {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.draft-editor,
.share-panel {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.draft-editor h3 {
  margin: 0.35rem 0 0;
}

.policy-form h3,
.project-directory h3 {
  margin: 0;
}

.project-create {
  display: grid;
  gap: 0.6rem;
  border-top: 1px solid var(--border);
  padding-top: 0.9rem;
}

.grand {
  border-color: var(--rust) !important;
}

.grand strong {
  color: var(--rust);
  font-size: 1.2rem;
}

.intro-panel {
  max-width: 76rem;
}

.intro-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.intro-copy {
  display: grid;
  gap: 0.85rem;
}

.intro-copy strong {
  color: var(--ink);
}

.intro-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

@media (max-width: 820px) {
  .invoice-grid,
  .operator-grid,
  .stats,
  .form-grid,
  .intro-stats,
  .payer-entry-form,
  .risk-card {
    grid-template-columns: 1fr;
  }

  .section-heading,
  .bit-card {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  /* The selectable work row keeps its checkbox column at every width; collapsing
     it to one column would stack the control above the label it belongs to. */
  .bit-card.selectable {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .title-block {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .title-block > div:nth-child(2n) {
    border-right: none;
  }

  .title-block > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--border);
  }

  .rate-stack,
  .risk-detail,
  .section-heading > strong {
    text-align: left;
  }

  .operator-grid:not(.detail-open) .operator-detail-panel {
    display: none;
  }

  .operator-grid.detail-open .operator-access-panel {
    display: none;
  }

  .mobile-only {
    display: inline-block;
  }
}