/*
 * Laxmi: the one stylesheet (S0 section 10). Link it with {% asset "css/laxmi.css" %}.
 *
 * R1-UI1 (D157): the new look, "bright white with deep blue" (docs/spec/R1-new-look/README.md).
 * Colours live only in the variables below. Text contrast: every text / background pair is at
 * least 4.5:1 (listed and tested in core/contrast.py). The border colours and the alert red are
 * decoration only (borders, dots, lines), never text.
 * Sizes: html is 16 px on a phone and 14 px from 768 px, so rem sizes follow; controls are 36 px
 * high on a computer and 44 px on a phone or with a coarse pointer.
 *
 * Every box that scrolls sideways also has position: relative (the method's phone-width lesson).
 */

@font-face {
  font-family: "Inter";
  src: url("../vendor/inter/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* R1-UI1 (D157): the new look's tokens (docs/spec/R1-new-look/README.md, "Tokens") */
  --page: #F6F7F9;
  --card: #FFFFFF;
  --border: #E4E7EC;
  --row-line: #EEF0F3;
  --table-head: #F9FAFB;
  --text: #101828;
  --text-secondary: #475467;
  --muted: #5D6B82;
  --primary: #1D4ED8;
  --primary-hover: #1E40AF;
  --primary-soft: #EFF4FF;
  --primary-soft-border: #C7D7FE;
  --on-primary: #FFFFFF;
  --money-in: #067647;
  --money-in-soft: #ECFDF3;
  --money-out: #B42318;
  --money-out-soft: #FEF3F2;
  --danger-border: #FDA29B;
  --waiting: #B54708;
  --waiting-soft: #FFFAEB;
  --waiting-border: #FEDF89;
  --approved: #175CD3;
  --approved-soft: #EFF8FF;
  --neutral-soft: #F2F4F7;
  --alert-dot: #D92D20;

  --radius: 12px;
  --radius-small: 8px;
  --space: 16px;
}

/* ---------- base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  background: var(--page);
  color: var(--text);
  overflow-wrap: anywhere;
}

h1,
h2,
h3 {
  margin: 0 0 8px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* The page title (22 px on a computer, 18 px on a phone). */
h1 {
  font-size: 1.125rem;
}

/* A section title inside a card: 15 px / 600. */
h2 {
  font-size: 1.0714rem;
}

h3 {
  font-size: 1rem;
}

p {
  margin: 0 0 12px;
}

a {
  color: var(--primary);
}

img,
svg {
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ---------- text colours ---------- */

.text-secondary {
  color: var(--text-secondary);
}

.text-muted {
  color: var(--muted);
}

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

/* RR14 (R14, D223): a payment made is not red; red only for a warning. */
.money-out {
  color: var(--text);
}

.warning {
  color: var(--waiting);
}

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

/* ---------- cards ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

.section-title {
  margin: 0;
  font-size: 1.0714rem;
  font-weight: 600;
}

/* A coloured line on top of a card (decoration only). */
.card-strip-gold {
  border-top: 3px solid var(--waiting-border);
}

.card-strip-in {
  border-top: 3px solid var(--money-in);
}

.card-strip-out {
  border-top: 3px solid var(--money-out);
}

.attention {
  background: var(--waiting-soft);
  color: var(--text);
  border: 1px solid var(--waiting-border);
  border-radius: 10px;
  padding: 12px 16px;
}

.attention-title {
  color: var(--waiting);
  font-weight: 600;
}

/* ---------- banners ---------- */

.banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
}

.banner-waiting {
  border-color: var(--waiting-border);
  background: var(--waiting-soft);
  color: var(--text);
}

.banner-icon {
  display: inline-flex;
  flex: none;
  color: var(--waiting);
}

.banner-body {
  flex: 1 1 240px;
  min-width: 0;
}

.banner-body p {
  margin: 0;
}

/* ---------- tags (22 px, a 6 px dot before the word) and pills ---------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border-radius: 11px;
  background: var(--neutral-soft);
  color: var(--text-secondary);
  font-size: 0.8571rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  overflow-wrap: normal;
}

.tag::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 3px;
  background: currentcolor;
}

/* A type tag: neutral, without the dot. */
.tag-neutral {
  background: var(--neutral-soft);
  color: var(--text-secondary);
}

.tag-neutral::before {
  display: none;
}

.tag-paid {
  background: var(--money-in-soft);
  color: var(--money-in);
}

.tag-waiting {
  background: var(--waiting-soft);
  color: var(--waiting);
}

.tag-approved {
  background: var(--approved-soft);
  color: var(--approved);
}

.tag-rejected {
  background: var(--money-out-soft);
  color: var(--money-out);
}

.pill {
  display: inline-block;
  white-space: nowrap;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.8571rem;
  font-weight: 600;
}

.pill-in {
  background: var(--money-in-soft);
  color: var(--money-in);
}

.pill-out {
  background: var(--money-out-soft);
  color: var(--money-out);
}

.pill-warning {
  background: var(--waiting-soft);
  color: var(--waiting);
}

/* ---------- tabs with their counts ---------- */

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

.tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin-bottom: -1px;
  padding: 8px 2px;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.tab-active {
  border-bottom-color: var(--primary);
  background: transparent;
  color: var(--primary);
  font-weight: 600;
}

.tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--neutral-soft);
  color: var(--text-secondary);
  font-size: 0.8571rem;
  font-weight: 600;
}

/* ---------- buttons (36 px on a computer; 44 px for touch, below) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.btn:hover {
  background: var(--page);
  color: var(--text);
}

.btn-secondary {
  border-color: var(--border);
  background: var(--card);
  color: var(--text);
}

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

.btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--on-primary);
}

.btn-plain {
  border-color: transparent;
  background: transparent;
  color: var(--text-secondary);
}

.btn-danger {
  border-color: var(--danger-border);
  background: var(--card);
  color: var(--money-out);
}

.btn-danger:hover {
  background: var(--money-out-soft);
  color: var(--money-out);
}

.btn .icon {
  width: 16px;
  height: 16px;
}

/* ---------- forms ---------- */

label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-secondary);
  font-size: 0.9286rem;
  font-weight: 500;
}

/* The small note after a label ("shown to …"); D161: no "optional" mark anywhere. */
.label-note {
  margin-left: 6px;
  color: var(--muted);
  font-weight: 400;
}

input,
select,
textarea {
  width: 100%;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted);
}

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  min-height: 0;
  accent-color: var(--primary);
}

.field-help,
.field-state {
  color: var(--text-secondary);
  font-size: 0.9286rem;
}

.field-error {
  color: var(--money-out);
  font-size: 0.9286rem;
}

/* ---------- tables (scroll sideways on a narrow screen) ---------- */

.table-wrap {
  position: relative;
  overflow-x: auto;
  max-width: 100%;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--row-line);
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--table-head);
  color: var(--text-secondary);
  font-size: 0.8571rem;
  font-weight: 600;
}

/* ---------- touch sizes: a phone, or any coarse pointer ---------- */

@media (max-width: 767px), (pointer: coarse) {
  .btn,
  input,
  select {
    min-height: 44px;
  }
}

/* ---------- the menu (white, D157) ---------- */

.menu {
  background: var(--card);
  color: var(--text);
}

.menu-secondary {
  background: var(--card);
  color: var(--muted);
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-small);
  background: var(--card);
  color: var(--text-secondary);
  font-weight: 500;
  text-decoration: none;
}

.menu-item .icon {
  width: 18px;
  height: 18px;
}

.menu-item-active {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}

.menu-label {
  min-width: 0;
}

/* Approvals' count, in the waiting colours. */
.menu-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: auto;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--waiting-soft);
  color: var(--waiting);
  font-size: 0.8571rem;
  font-weight: 600;
}

/* A part not in this release: it still opens "Coming soon". */
.menu-soon {
  margin-left: auto;
  background: var(--card);
  color: var(--muted);
  font-size: 0.7857rem;
  font-weight: 500;
}

/* ---------- icons (decoration: line drawings in SVG) ---------- */

.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-muted {
  stroke: var(--muted);
}

/* ---------- the screen frame (S0-005; computer 768 px and wider, phone below) ---------- */

.frame {
  min-height: 100vh;
}

.lamp {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex: none;
}

.lamp svg {
  width: 100%;
  height: 100%;
}

.lamp-small {
  width: 28px;
  height: 28px;
}

/* The side menu (computer) */

.side {
  display: none;
}

.side-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px;
  background: var(--card);
  color: var(--text);
}

.side-brand-text {
  display: flex;
  flex-direction: column;
}

.side-brand-name {
  font-size: 1.2143rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.side-brand-line {
  background: var(--card);
  color: var(--muted);
  font-size: 0.8571rem;
}

.side-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.menu-item:hover {
  background: var(--page);
  color: var(--text);
}

.menu-item-active:hover {
  background: var(--primary-soft);
  color: var(--primary);
}

.side-business {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding: 14px 6px 0;
  border-top: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  font-size: 0.8571rem;
}

.side-business-name {
  background: var(--card);
  color: var(--text);
  font-size: 0.9286rem;
  font-weight: 600;
}

/* The top bar (computer) */

.top {
  display: none;
}

.top-title {
  display: flex;
  flex: 1 1 260px;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.top-heading {
  margin: 0;
  font-size: 1.5714rem;
  font-weight: 600;
}

.top-line {
  margin: 0;
  background: var(--card);
  color: var(--text-secondary);
  font-size: 0.9286rem;
}

.top-line a {
  color: var(--primary);
  text-decoration: none;
}

/* The page's own buttons, then the bell and the initials. */
.top-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* The round initials and the account menu */

.account-menu {
  position: relative;
}

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.9286rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.avatar::-webkit-details-marker {
  display: none;
}

.account-panel {
  position: absolute;
  top: 44px;
  right: 0;
  z-index: 20;
  width: min(320px, 90vw);
  padding: 8px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  box-shadow: 0 8px 24px rgb(16 24 40 / 10%);
}

.account-who {
  display: flex;
  flex-direction: column;
  padding: 8px 16px 12px;
  border-bottom: 1px solid var(--border);
}

.account-name {
  font-weight: 600;
}

.account-line,
.account-business {
  background: var(--card);
  color: var(--text-secondary);
  font-size: 0.9286rem;
}

.account-link,
.list-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 36px;
  padding: 8px 16px;
  background: var(--card);
  color: var(--text);
  text-decoration: none;
}

.list-link + .list-link {
  border-top: 1px solid var(--row-line);
  border-top-color: var(--row-line);
}

.list-card {
  padding: 0;
  overflow: hidden;
}

/* S2-021: the bell (computer top bar and phone top bar), its count and its list. */
.bell-menu {
  position: relative;
  margin-left: auto;
}

.top-actions .bell-menu {
  margin-left: 0;
}

.bell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--card);
  color: var(--text-secondary);
  list-style: none;
  cursor: pointer;
}

.bell::-webkit-details-marker {
  display: none;
}

.bell .icon {
  width: 18px;
  height: 18px;
}

/* The count of new alerts, a small red mark on the bell's corner. */
.bell-count {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--money-out);
  color: var(--on-primary);
  font-size: 0.7857rem;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

.bell-panel {
  position: absolute;
  top: 44px;
  right: 0;
  z-index: 20;
  width: min(340px, 90vw);
  padding: 8px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  box-shadow: 0 8px 24px rgb(16 24 40 / 10%);
}

.bell-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bell-item {
  display: block;
  min-height: 36px;
  padding: 10px 16px;
  background: var(--card);
  color: var(--text);
  text-decoration: none;
  overflow-wrap: normal;
}

.bell-list li + li {
  border-top: 1px solid var(--row-line);
}

.bell-nothing {
  margin: 0;
  padding: 10px 16px;
  background: var(--card);
  color: var(--text-secondary);
}

/* The phone's top bar (white, as the computer's) */

.phone-top {
  position: sticky;
  top: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
}

.phone-title {
  min-width: 0;
  font-size: 1.125rem;
  font-weight: 600;
  overflow-wrap: normal;
}

.phone-top .bell {
  width: 44px;
  height: 44px;
}

/* Page content */

.content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  padding: 16px;
  /* Room for the phone's bottom bar, so it never covers the page. */
  padding-bottom: 112px;
}

.content-plain {
  padding-bottom: var(--space);
}

.welcome-heading {
  margin: 0;
  font-size: 1.125rem;
}

.welcome-line {
  margin: 2px 0 0;
}

/* S2-021 (S2 section 10): Home's "Needs attention", quick buttons and this month's money; the
   phone's "New" page uses the same buttons. */
.attention-list {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.attention-list li + li {
  border-top: 1px dashed var(--waiting-border);
}

.attention-item {
  display: block;
  padding: 4px 0;
  background: var(--waiting-soft);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.new-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.quick-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.quick-button {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.quick-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-small);
  background: var(--page);
}

.quick-receipt {
  background: var(--money-in-soft);
  color: var(--money-in);
}

.quick-payment {
  background: var(--money-out-soft);
  color: var(--money-out);
}

.quick-transfer {
  background: var(--primary-soft);
  color: var(--primary);
}

/* Home's four figures (KPI cards) */

.kpis {
  display: grid;
  /* One column below about 440 px, so a crore stays whole inside its card. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 16px;
}

.kpi {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
}

.kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.kpi-label {
  color: var(--text-secondary);
  font-size: 0.9286rem;
  font-weight: 500;
}

.kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--radius-small);
}

.kpi-icon .icon {
  width: 18px;
  height: 18px;
}

.kpi-in {
  background: var(--money-in-soft);
  color: var(--money-in);
}

.kpi-out {
  background: var(--money-out-soft);
  color: var(--money-out);
}

.kpi-bank {
  background: var(--primary-soft);
  color: var(--primary);
}

.kpi-waiting {
  background: var(--waiting-soft);
  color: var(--waiting);
}

.kpi-amount {
  font-size: clamp(1.25rem, 6vw, 1.7143rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.kpi-line {
  color: var(--text-secondary);
  font-size: 0.9286rem;
}

/* "Recent entries" (2 parts) beside "Accounts" (1 part) */

.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.recent,
.home-accounts {
  padding: 0;
  overflow: hidden;
}

.home-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--row-line);
}

.home-card-head a {
  background: var(--card);
  color: var(--primary);
  font-size: 0.9286rem;
  font-weight: 600;
  text-decoration: none;
}

.recent-row,
.home-account {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: var(--card);
  color: var(--text);
  text-decoration: none;
}

.recent-row + .recent-row,
.home-account + .home-account {
  border-top: 1px solid var(--row-line);
}

.recent-row:hover {
  background: var(--table-head);
  color: var(--text);
}

.recent-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--radius-small);
}

.recent-icon .icon {
  width: 16px;
  height: 16px;
}

.recent-what,
.home-account-what {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.recent-name,
.home-account-name {
  font-weight: 600;
}

.recent-line {
  color: var(--text-secondary);
  font-size: 0.9286rem;
}

.home-account-kind {
  color: var(--muted);
  font-size: 0.8571rem;
}

.recent-amount,
.home-account-amount {
  flex: none;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* On a phone the tag goes under the name, so the amount keeps its room. */
.recent-tag {
  flex: none;
}

.month-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}

.month-label {
  margin: 0;
  color: var(--text-secondary);
}

.month-amount {
  margin: 4px 0 0;
  font-size: clamp(1.25rem, 6vw, 1.5rem);
  font-weight: 700;
  white-space: nowrap;
}

.empty-books {
  margin: 0;
}

.notice h2 {
  margin-bottom: 4px;
  font-size: 1.0714rem;
}

/* The phone's bottom bar */

.bottom-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--card);
  color: var(--text-secondary);
}

.bottom-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 52px;
  padding: 4px 0;
  background: var(--card);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: none;
}

.bottom-item .icon {
  width: 22px;
  height: 22px;
}

.bottom-item-active {
  background: var(--card);
  color: var(--primary);
  font-weight: 600;
}

.bottom-new .bottom-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 4px 12px rgb(29 78 216 / 25%);
}

.bottom-new .icon {
  width: 26px;
  height: 26px;
}

@media (max-width: 767px) {
  .recent-row {
    flex-wrap: wrap;
  }

  .recent-what {
    flex-basis: calc(100% - 44px);
  }

  .recent-tag {
    margin-left: 44px;
  }

  .recent-amount {
    margin-left: auto;
  }
}

@media (min-width: 768px) {
  html {
    font-size: 14px;
  }

  h1 {
    font-size: 1.5714rem;
  }

  .frame {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .side {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100vh;
    padding: 18px 12px;
    border-right: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
  }

  .top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 32px;
    border-bottom: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
  }

  .phone-top,
  .bottom-bar {
    display: none;
  }

  .content {
    padding: 24px 32px 40px;
  }

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

/* ---------- messages ---------- */

.messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.message {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--money-in);
  border-radius: var(--radius-small);
  background: var(--card);
  color: var(--text);
}

/* UI-13 (D143): an error message looks like an error. */
.message-error {
  border-left-color: var(--money-out);
  background: var(--money-out-soft);
  color: var(--money-out);
}

.form-alert {
  padding: 12px 16px;
  border: 1px solid var(--money-out);
  border-radius: var(--radius-small);
  background: var(--money-out-soft);
  color: var(--money-out);
}

/* ---------- forms of the sign-in pages (S0-006) ---------- */

.form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.field .field-error {
  margin: 4px 0 0;
}

.password-box {
  position: relative;
}

.password-box input {
  padding-right: 52px;
}

.eye {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.field-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 400;
}

.btn-wide {
  width: 100%;
}

.account-form {
  margin: 0;
}

.account-button {
  width: 100%;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* ---------- the sign-in layout: left panel on a computer, the form alone on a phone ---------- */

.auth {
  min-height: 100vh;
}

.auth-panel {
  display: none;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.auth-brand-text {
  display: flex;
  flex-direction: column;
}

.auth-brand-name {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
}

.auth-brand-line {
  background: var(--card);
  color: var(--muted);
}

.lamp-large {
  width: 64px;
  height: 64px;
}

.auth-claim {
  max-width: 18em;
  margin: 72px 0 32px;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.25;
}

.auth-ticks {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.auth-ticks li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.auth-by {
  margin-top: auto;
  background: var(--card);
  color: var(--muted);
  font-size: 0.9375rem;
}

.auth-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 32px;
}

.auth-phone-brand {
  display: flex;
  align-self: stretch;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
}

.auth-phone-name {
  font-size: 1.5rem;
  font-weight: 700;
}

.auth-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 440px;
  padding: 24px 20px 0;
}

.auth-box h1 {
  margin: 0;
}

.auth-note {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.auth-sign-out {
  margin-top: 8px;
}

.help-box h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.0625rem;
}

.help-box p {
  margin: 0;
}

@media (min-width: 768px) {
  .auth {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .auth-panel {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 64px 56px 48px;
    border-right: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
  }

  .auth-phone-brand {
    display: none;
  }

  .auth-main {
    justify-content: center;
    padding: 48px 32px;
  }
}

/* ---------- Users (S0-007) ---------- */

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

.card-head h2 {
  margin: 0;
}

.pill-brand {
  background: var(--primary-soft);
  color: var(--primary);
}

.cell-line {
  display: block;
  font-size: 0.9375rem;
}

.nowrap {
  white-space: nowrap;
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 0.9375rem;
}

/* Table cells keep words whole (the page's "break anywhere" squeezed names to one letter per
   line); only a long email may break, and only on its own line (S0-007a). */
.users-table td,
.users-table th {
  overflow-wrap: normal;
}

.cell-email {
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .users-table .users-name {
    min-width: 14rem;
  }

  .users-table .users-last {
    white-space: nowrap;
  }

  /* The action links sit in the last column, each on its own line. */
  .row-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .row-actions a {
    white-space: nowrap;
  }
}

/* Below 768 px each person is a card: name; mobile and email; role and status side by side;
   "Last signed in"; the actions as buttons in a row that may wrap. */
@media (max-width: 767px) {
  .users-table thead {
    display: none;
  }

  .users-table,
  .users-table tbody {
    display: block;
  }

  .users-table tr {
    display: grid;
    grid-template-areas:
      "name name"
      "role status"
      "last last"
      "actions actions";
    grid-template-columns: max-content 1fr;
    gap: 8px 10px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
  }

  .users-table td {
    display: block;
    padding: 0;
    border: 0;
  }

  .users-table .users-name {
    grid-area: name;
  }

  .users-table .users-role {
    grid-area: role;
  }

  .users-table .users-status {
    grid-area: status;
  }

  .users-table .users-last {
    grid-area: last;
  }

  .users-table .users-last::before {
    content: "Last signed in ";
    font-weight: 600;
  }

  .users-table .users-actions {
    grid-area: actions;
  }

  .row-actions a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-small);
    text-decoration: none;
  }
}

.form-card {
}

.form-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  margin: 8px 0 0;
}

.choice {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  border: 0;
}

.choice legend {
  margin-bottom: 4px;
  padding: 0;
  font-weight: 600;
}

.powers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

.powers legend {
  margin-bottom: 4px;
  padding: 0;
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.9286rem;
}

.power {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-weight: 400;
}

.power input {
  margin-top: 4px;
}

.power-text {
  display: flex;
  flex-direction: column;
}

.power-label {
  font-weight: 600;
}

.once-box .otp {
  font-family: ui-monospace, monospace;
  font-size: 1.25rem;
  letter-spacing: 0.08em;
}

/* ---------- the Accounts page (S1-013) ---------- */

.card-strip-brand {
  border-top: 4px solid var(--primary);
}

.page-line {
  margin: 0;
}

/* The totals stack on a phone; side by side on a computer. */
.totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space);
}

.total p {
  margin: 0;
}

/* R1-UI2: the totals as Home's figure cards (13 px label, 24 px figure, no top strip). */
.total {
  padding: 18px 20px;
}

.totals .card-strip-brand,
.totals .card-strip-gold,
.totals .card-strip-in {
  border-top: 1px solid var(--border);
}

.total-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 0.9286rem;
  font-weight: 500;
}

.total-label .icon {
  width: 18px;
  height: 18px;
}

.total-amount {
  margin: 8px 0 2px;
  font-size: clamp(1.25rem, 6vw, 1.7143rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.total-note {
  font-size: 0.9286rem;
}

/* The cards fill their row with no empty columns (S1-013a): one card takes the whole row, two
   half each, three a third each; one per row on a phone. */
.account-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--space);
}

/* Each card is a container: when it is too narrow for a 12rem name beside the buttons, the
   buttons move under the name (the container query below). Words never break inside. */
.account-card {
  container: account-card / inline-size;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  overflow-wrap: break-word;
}

/* The buttons come last in the markup (the spec's order) and sit at the top right. */
.account-card-body {
  display: grid;
  grid-template-areas:
    "head buttons"
    "balance balance"
    "details details";
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 12px;
}

/* 27rem = the icon (2.75rem) and gap (0.75rem), a 12rem name, the gap (0.75rem), and about
   10.5rem for "Statement" and the edit button, with a little room. */
@container account-card (width < 27rem) {
  .account-card-body {
    grid-template-areas:
      "head"
      "buttons"
      "balance"
      "details";
    grid-template-columns: minmax(0, 1fr);
  }

  .account-card .account-buttons {
    justify-self: start;
    margin-top: 10px;
  }
}

.account-head {
  display: flex;
  grid-area: head;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.account-card .account-balance {
  grid-area: balance;
}

.account-card .account-details {
  grid-area: details;
}

.account-card .account-buttons {
  grid-area: buttons;
  align-self: start;
}

.account-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--radius-small);
  background: var(--primary-soft);
  color: var(--primary);
}

.account-icon-cash {
  background: var(--waiting-soft);
  color: var(--waiting);
}

.account-title {
  flex: 1 1 10rem;
  min-width: 0;
  overflow-wrap: break-word;
}

.account-title h3,
.account-title p {
  margin: 0;
}

.account-buttons {
  display: flex;
  gap: 8px;
}

.btn-small {
  min-height: 40px;
  padding: 6px 12px;
}

.account-balance {
  margin: 12px 0;
  font-size: 1.5714rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.account-details {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin: 0;
}

.account-details dt {
  background: var(--card);
  color: var(--text-secondary);
}

.account-details dd {
  margin: 0;
  font-weight: 600;
}

.closed-accounts {
  padding: 12px var(--space);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}

.closed-accounts summary {
  font-weight: 600;
  cursor: pointer;
}

.closed-list {
  margin: 8px 0 0;
  padding-left: 20px;
}

/* ---------- transfers (S1-014) ---------- */

.chip {
  flex: none;
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.account-pick {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.account-pick legend {
  margin-bottom: 4px;
  padding: 0;
  font-weight: 600;
}

/* "Bank" / "Cash" as a two-button switch (mockup 04): radio buttons, still keyboard-usable. */
.segmented {
  display: inline-flex;
  align-self: flex-start;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  overflow: hidden;
}

.segmented label {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 36px;
  margin: 0;
  padding: 0 20px;
  background: var(--card);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}

.segmented label + label {
  border-left: 1px solid var(--border);
}

.segmented input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.segmented label:has(input:checked) {
  background: var(--primary);
  color: var(--on-primary);
}

.segmented label:has(input:focus-visible) {
  outline: 3px solid var(--waiting-border);
  outline-offset: -3px;
}

/* Laxmi's date field (S1-013a): the calendar button inside at the left, "Today" at the right. */
.date-box {
  position: relative;
  display: flex;
  align-items: center;
}

/* R15-7f item 1 (b): the padding holds the calendar button (48 px) and "Today" (84 px), so the
   whole date (11ch) gets room on top of them, at 768 px too. */
.date-box input[type="text"] {
  min-width: calc(11ch + 48px);
  padding-left: 48px;
}

.date-box.has-today input[type="text"] {
  min-width: calc(11ch + 132px);
  padding-right: 84px;
}

.date-pick {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

/* The browser's own picker, opened by the calendar button: invisible, not display: none (so
   showPicker() works), and without a name (never sent). */
.date-helper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.date-box .date-today {
  position: absolute;
  right: 6px;
  min-height: 32px;
  padding: 2px 12px;
  font-size: 0.875rem;
}

/* The shared money box: "₹" inside at the left (S1-013a). */
.money-box {
  position: relative;
}

.money-box-sign {
  position: absolute;
  top: 50%;
  left: 14px;
  color: var(--text-secondary);
  font-weight: 600;
  transform: translateY(-50%);
}

.money-box input {
  padding-left: 32px;
}

/* The transfer form as mockup 04: two columns on a computer, one on a phone. */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 24px;
}

.form-grid .span-2 {
  grid-column: 1 / -1;
}

.transfer-card {
}

@media (min-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Transfers: a table on a computer, each transfer a card on a phone (S1-013a). Cells keep
   words whole. */
.transfers-table td,
.transfers-table th {
  overflow-wrap: normal;
}

@media (max-width: 767px) {
  .transfers-table thead {
    display: none;
  }

  .transfers-table,
  .transfers-table tbody {
    display: block;
  }

  .transfers-table tr {
    display: grid;
    grid-template-areas:
      "date amount"
      "from to"
      "note note"
      "edit edit";
    grid-template-columns: auto 1fr;
    gap: 4px 8px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }

  .transfers-table td {
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
  }

  .transfers-table .tr-date {
    grid-area: date;
    font-weight: 600;
  }

  .transfers-table .tr-amount {
    grid-area: amount;
    font-weight: 600;
    text-align: right;
  }

  .transfers-table .tr-from {
    grid-area: from;
  }

  .transfers-table .tr-from::after {
    content: " →";
  }

  .transfers-table .tr-to {
    grid-area: to;
  }

  .transfers-table .tr-note {
    grid-area: note;
    font-size: 0.9375rem;
  }

  .transfers-table .tr-edit {
    grid-area: edit;
  }

  .transfers-table .tr-note:empty,
  .transfers-table .tr-edit:empty {
    display: none;
  }
}

.transfer-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--waiting-soft);
  color: var(--text);
}

.money-col {
  text-align: right;
}

.all-transfers {
  margin: 12px 0 0;
}

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  color: var(--text-secondary);
  font-size: 0.9286rem;
}

/* ---------- Settings → Lists and the dialogs (S1-015) ---------- */

.search-form {
  flex: 1 1 14rem;
}

.plain-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.list-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.list-row-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.list-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.list-row-actions form,
.tile-actions form {
  margin: 0;
}

.choice-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.choice-chips legend {
  margin-bottom: 4px;
  padding: 0;
  font-weight: 600;
}

.chip-choice {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  margin: 0;
  padding: 4px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-weight: 600;
  position: relative;
  cursor: pointer;
  white-space: nowrap;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.category-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 84px;
  padding: 12px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
  text-align: center;
  cursor: pointer;
}

.tile-actions {
  display: flex;
  gap: 10px;
  font-size: 0.8125rem;
}

.link-button {
  padding: 0;
  border: 0;
  background: var(--card);
  color: var(--primary);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.icon-picker {
  margin: 0;
  padding: 0;
  border: 0;
}

.icon-picker legend {
  margin-bottom: 4px;
  padding: 0;
  font-weight: 600;
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 8px;
}

.icon-choice {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  cursor: pointer;
}

.icon-choice input {
  position: absolute;
  opacity: 0;
}

.icon-choice:has(input:checked) {
  border: 2px solid var(--primary);
  background: var(--primary-soft);
}

.icon-choice:has(input:focus-visible) {
  outline: 3px solid var(--waiting-border);
  outline-offset: 2px;
}

.dialog {
  width: min(640px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text);
}

.dialog::backdrop {
  background: rgb(16 24 40 / 45%);
}

.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.dialog-head h2 {
  margin: 0;
}

.dialog-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
}

.dialog-body {
  padding: 16px 20px 20px;
}

.dialog-add {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* ---------- install on Android and the offline page (S0-009) ---------- */

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

.install-card p {
  margin: 0 0 8px;
}

.offline {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 100vh;
  padding: 32px 20px;
  text-align: center;
}

.offline-text {
  max-width: 24em;
  margin: 0;
  font-size: 1.125rem;
}

[hidden] {
  display: none !important;
}

/* S2-019: the Payments list's status tabs and status labels. R1-UI2: the tabs and their count
   pills take the base rules (README "Lists"); they wrap on a phone, so nothing scrolls
   sideways. */
@media (max-width: 767px), (pointer: coarse) {
  .tab {
    min-height: 44px;
  }
}

/* RR14 (R14, D223): a payment made is not red; red only for a warning. */
.payments-table .en-amount {
  color: var(--text);
}

.status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--page);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.status-paid {
  color: var(--money-in);
}

.status-waiting {
  color: var(--waiting);
}

.status-rejected {
  color: var(--money-out);
}

.status-approved {
  color: var(--primary);
}

@media (max-width: 999px) {  /* R15-7 item 0 (a): cards up to 999 px */
  .entries-table .en-status,
  .entries-table .en-action {
    grid-column: 1 / -1;
  }
}

/* P1-022b1: the stale line across an Approvals card (D131); the list's paid total (D135). */
.ap-alert {
  grid-column: 1 / -1;
  margin: 0;
}

/* R15-13 item 7 (g): the total may wrap after its "·" (the only plain space), so the Amount
   column needs only its widest amount. */
/* RR14b (D234): "Paid ₹…" on its own line under the total, right-aligned, never broken. */
.en-paid-total {
  display: block;
  font-weight: 400;
  white-space: nowrap;
}

/* S2-022 item 8: the chosen account's balance under the account box, never cut. P1-022b5
   (UI-10): its own class, at the field-help size (the Accounts page's .account-balance keeps
   its own size and margins). */
.entry-balance {
  margin: 4px 0 0;
  font-size: 0.875rem;
  font-weight: 400;
}

.entry-balance:empty {
  display: none;
}

.entry-balance .money {
  white-space: nowrap;
}

/* P1-022b5 (UI-17): a whole part (an account's name, "· NEFT / RTGS / IMPS"). */
/* P1-022b5 (UI-17): the empty list's line inside the card's padding. */
.empty-list {
  padding: var(--space);
}

/* R1-UI2 (README "Lists"): one toolbar row; "Filters" opens the panel under it on every width
   (was the phone only, P1-022b5 UI-17). */
[data-filters][data-closed] {
  display: none;
}

/* P1-022b5 (UI-15): "See all" after the newest five. */
.see-all {
  display: block;
  padding: 10px 16px;
  font-weight: 600;
}

/* S2-020: the Payments list's next step ("Mark paid", "Edit and send again"), Open's buttons and
   the "Approved by" / "Rejected by" line. */
.en-action {
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 999px) {  /* R15-7 item 0 (a): cards up to 999 px */
  .entries-table .en-action {
    grid-column: 1 / -1;
    text-align: left;
  }
}

.entry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.decision-line {
  display: block;
  margin-top: 4px;
  color: var(--text-secondary);
}

.seek-block {
  display: flex;
  gap: 8px;
  flex-direction: column;
  align-items: flex-end;
}

/* S2-020: Approvals (mockups 31, 46): one card per payment, its buttons on the right; on a phone
   the buttons go under it, side by side. */
.approvals-attention {
  margin-bottom: 0;
}

.attention-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0 0;
}

.approval-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  margin-bottom: 0;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}

.ap-asked,
.ap-reason {
  margin: 0;
  color: var(--text-secondary);
}

.ap-party {
  margin: 4px 0;
  font-size: 1.125rem;
}

.ap-amount {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  white-space: nowrap;
}

.ap-details {
  display: grid;
  gap: 12px 24px;
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}

.ap-details div {
  display: flex;
  gap: 2px;
  flex-direction: column;
  min-width: 0;
}

.ap-details dt {
  min-width: 0;
  color: var(--text-secondary);
  font-size: 0.8571rem;
  font-weight: 500;
}

.ap-details dd {
  margin: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.ap-files {
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.ap-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  color: var(--text);
  text-decoration: none;
}

.ap-file-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.ap-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 170px;
}

.ap-buttons form,
.ap-buttons .btn {
  width: 100%;
}

.ap-reject summary {
  list-style: none;
}

.ap-reject summary::-webkit-details-marker {
  display: none;
}

.ap-reject-form {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.approvals-line {
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 0.9286rem;
}

@media (max-width: 767px) {
  .approval-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .ap-buttons {
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 0;
  }

  .ap-buttons > * {
    flex: 1 1 120px;
  }

  /* UI-6 (D143): Reject on the left, Approve on the right; the reason box takes the width. */
  .ap-reject {
    order: 1;
  }

  .ap-approve {
    order: 2;
  }

  .ap-open {
    order: 3;
  }

  .ap-reject[open] {
    flex-basis: 100%;
  }
}

/* UI-8 (D145): a chosen file's row: its name, its "Bill" / "Payment proof" and "Remove". */
.file-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.file-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* UI-9 (D145): "Remove" apart from the file's link, a 44 px button; the question's page. */
.file-list .btn-remove {
  min-height: 36px;
  margin-left: auto;
}

/* P1-022c1 (D150): the saved file's row and its question inside the page take the whole row;
   the question's buttons wrap under it on a phone. */
.file-list [data-file-shown],
.file-list .remove-question {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.file-list .remove-question .form-buttons {
  margin: 0;
}

.file-list .remove-question .btn {
  min-height: 36px;
}

/* D150: "Leave this page?" */
.leave-dialog .dialog-body {
  padding: 24px;
}

.leave-dialog .form-buttons {
  justify-content: flex-end;
}

/* A small label next to a name (S2-018f: "Owner"); R1-UI3: its own name, so .tag is the
   status / type tag only. */
.name-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

/* A value shown in a form where there is no choice (P0-018e: "Held by a Laxmi user"). */
.field-value {
  margin: 0;
  padding: 10px 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* ---------- receipts (S2-018; mockups 05, 06, 25) ---------- */

.entry-card {
}

.form-grid fieldset.field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.form-grid fieldset.field legend {
  margin-bottom: 6px;
  padding: 0;
  font-weight: 600;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* A chip that is a radio button: the input stays usable by keyboard, the chip shows the choice. */
.chip-choice input,
.tile-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.chip-choice:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.chip-choice:has(input:focus-visible),
.tile-choice:has(input:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.chip-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-style: dashed;
  color: var(--primary);
}

.party-search {
  margin-bottom: 6px;
}

.mode-block .chips {
  margin-bottom: 12px;
}

/* R1-UI5 (the Owner, 20:59: "align this properly"): the reference box is one cell of the grid.
   One reference field fills it; a cheque's number and date are its two halves, the bank under
   them. The label stays on one line; the help sits under the box. */
.reference-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-content: start;
}

.reference-box[hidden] {
  display: none;
}

.reference-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px 16px;
}

.reference-box .field-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reference-box .field-help {
  margin: 4px 0 0;
  font-size: 0.8571rem;
}

.files-block .file-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.file-row input[type="file"] {
  min-width: 0;
  max-width: 100%;
}

.file-list {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.file-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  overflow-wrap: anywhere;
}

.gst-block {
  padding: 16px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-small);
  background: var(--page);
}

.gst-block legend {
  padding: 0 6px !important;
}

.gst-switches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin: 12px 0;
}

.switch-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  font-weight: 600;
}

.switch-line input {
  width: 20px;
  height: 20px;
  accent-color: var(--primary);
}

.gst-parts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0;
}

.gst-parts > span {
  white-space: nowrap;
}

.category-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}

.tile-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 84px;
  padding: 10px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
  text-align: center;
  cursor: pointer;
}

.tile-choice:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.tile-more {
  border-style: dashed;
}

/* R1-UI2 (README "Lists", 02-receipts, 04-payments): one toolbar row, the Filters panel, the
   chips of the filters in use, the table in a card and the line under it; cards on a phone. */
.list-filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.toolbar-search {
  display: flex;
  flex: 1 1 280px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--card);
  color: var(--muted);
}

.toolbar-search .icon {
  width: 16px;
  height: 16px;
}

.toolbar-search input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.toolbar-search input:focus-visible {
  outline: none;
}

.toolbar-search:focus-within {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.toolbar-select {
  flex: 0 1 190px;
  width: auto;
  min-width: 0;
}

.filters-toggle .icon {
  width: 16px;
  height: 16px;
}

.filters-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}

.filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 16px 24px;
}

.filters-grid .field {
  margin: 0;
}

.filters-panel .custom-dates {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 16px 24px;
}

.filters-panel .custom-dates[hidden] {
  display: none;
}

.filters-panel-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 2px 10px;
  border: 1px solid var(--primary-soft-border);
  border-radius: 14px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.9286rem;
  font-weight: 500;
  text-decoration: none;
}

.table-card {
  padding: 0;
  overflow: hidden;
}

/* RR14 (R19, D228): every heading lines up with its column's data: text left, amounts right,
   the same side padding as the cells (16 px). */
.entries-table th {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}

.entries-table th.money-col,
.entries-table td.money-col {
  text-align: right;
}

/* RR14 (R16, R20; D225, D229): the "Pending: …" tags under the party's lines; the narration in
   its own column, wrapping between words; the row's "Add Number" and "Edit" side by side. */
.en-pending {
  display: block;
  margin-top: 4px;
}

.en-pending .tag {
  display: inline-block;
  margin: 0 4px 4px 0;
  white-space: nowrap;
}

.en-narration {
  min-width: 140px;
  color: var(--text-secondary);
  overflow-wrap: normal;
}

.en-action .btn + .btn,
.en-status-more .btn + .btn {
  margin-left: 6px;
}

.entries-table td {
  padding: 12px 16px;
  vertical-align: middle;
}

.entries-table td,
.entries-table th {
  overflow-wrap: normal;
}

.entries-table tbody tr:last-child td {
  border-bottom: 1px solid var(--border);
}

.en-date {
  color: var(--text-secondary);
  white-space: nowrap;
}

.en-party a {
  background: var(--card);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.en-party a:hover {
  color: var(--primary);
}

.en-reason {
  display: block;
  color: var(--text-secondary);
  font-size: 0.9286rem;
}

.en-account {
  white-space: nowrap;
}

.en-mode {
  color: var(--muted);
  font-size: 0.8571rem;
}

/* R15-4 item 0 (review of R15-2b): the mode under the account stays its own line; the Mode column's
   cell is a plain cell (centred in its row, the row's line through it, the mode on one line). */
.en-account .en-mode {
  display: block;
}

td.en-mode {
  white-space: nowrap;
  vertical-align: middle;
}

.en-amount {
  color: var(--money-in);
  font-weight: 600;
  white-space: nowrap;
}

.entries-table tfoot td {
  border-bottom: 0;
  background: var(--table-head);
  color: var(--text);
  font-weight: 600;
}

.list-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.list-showing {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.9286rem;
}

/* R1-UI2: the other lists in the same pattern: a card with no padding of its own; its head,
   rows and table cells carry the 16-20 px. */
.list-card-head,
.table-card .card-head {
  margin: 0;
  padding: 16px 20px;
  border-bottom: 1px solid var(--row-line);
}

.list-card-title {
  margin: 0;
  padding: 16px 20px 0;
  color: var(--text);
  font-size: 1.0714rem;
  font-weight: 600;
}

.list-card .list-row {
  padding: 12px 20px;
  border-bottom-color: var(--row-line);
}

.list-card .list-row:last-child {
  border-bottom: 0;
}

.list-card > .plain-list > li.text-secondary {
  padding: 12px 20px;
}

.table-card th,
.table-card td {
  padding-right: 16px;
  padding-left: 16px;
}

@media (max-width: 767px) {
  .table-card .users-table tr,
  .table-card .transfers-table tr {
    padding-right: 16px;
    padding-left: 16px;
  }
}

@media (max-width: 767px) {
  .toolbar-search {
    flex-basis: 100%;
  }

  .toolbar-select {
    flex: 1 1 140px;
  }
}

.paperclip {
  display: inline-flex;
  color: var(--text-secondary);
}

@media (max-width: 999px) {  /* R15-7 item 0 (a): cards up to 999 px */
  .entries-table thead {
    display: none;
  }

  .entries-table,
  .entries-table tbody,
  .entries-table tfoot {
    display: block;
  }

  .entries-table tr {
    display: grid;
    grid-template-areas:
      "date amount"
      "party party"
      "account type";
    grid-template-columns: 1fr auto;
    gap: 4px 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--row-line);
  }

  .entries-table td {
    display: block;
    padding: 0;
    border: 0;
    text-align: left;
  }

  .entries-table .en-date {
    grid-area: date;
    font-weight: 600;
  }

  .entries-table .en-amount {
    grid-area: amount;
    text-align: right;
  }

  .entries-table .en-party {
    grid-area: party;
  }

  .entries-table .en-account {
    grid-area: account;
    font-size: 0.9375rem;
  }

  .entries-table .en-type {
    grid-area: type;
    text-align: right;
  }

  .entries-table .en-account {
    white-space: normal;
  }

  .entries-table .en-account .en-mode {
    display: inline;
  }

  .entries-table .en-account .en-mode::before {
    content: " · ";
  }

  .entries-table tfoot tr {
    grid-template-areas: "label amount";
  }

  .entries-table .en-total-label {
    grid-area: label;
  }
}

/* Open: the whole receipt, its files and its history. */
.entry-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.entry-amount {
  margin: 0;
  color: var(--money-in);
  font-size: 1.5714rem;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* UI-3: money that went out (a payment's Open and Mark paid). */
/* RR14 (R14, D223): a payment made is not red; red only for a warning. */
.entry-amount-out {
  color: var(--text);
}

.entry-party {
  margin: 4px 0 0;
  font-weight: 600;
  font-size: 1.0714rem;
}

.details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 14px 24px;
  margin: 0 0 20px;
}

.details div {
  min-width: 0;
}

.details dt {
  color: var(--text-secondary);
  font-size: 0.8571rem;
  font-weight: 500;
}

.details dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
  font-weight: 500;
}

@media (min-width: 768px) {
  .details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.history {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.history li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  border-bottom-color: var(--row-line);
}

.history-line,
.history-detail {
  margin: 0;
}

.history-detail {
  color: var(--text-secondary);
  font-size: 0.9286rem;
  overflow-wrap: anywhere;
}

/* ---------- shown only on a computer or only on a phone (S0-007a) ---------- */

@media (max-width: 767px) {
  .computer-only {
    display: none;
  }
}

@media (min-width: 768px) {
  .phone-only {
    display: none;
  }
}

/* ---------- utilities ---------- */

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

/* ---------- EMI / Bills (B-006, S4 section 4, mockup 12): cards on every width ---------- */

.emi-list .card-head p {
  margin: 0;
}

.emi-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--space);
}

.emi-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: var(--space);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  overflow-wrap: break-word;
}

.emi-card-missed {
  border-color: var(--waiting);
  background: var(--waiting-soft);
}

.emi-card-stopped {
  opacity: 0.85;
}

.emi-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.emi-title {
  flex: 1 1 10rem;
  min-width: 0;
}

.emi-title h3,
.emi-title p,
.emi-progress p {
  margin: 0;
}

.emi-details {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 16px;
  margin: 0;
}

.emi-details dt {
  color: var(--text-secondary);
}

.emi-details dd {
  margin: 0;
  font-weight: 600;
}

.emi-progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.emi-bar {
  width: 100%;
  height: 8px;
  accent-color: var(--primary);
}

.emi-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.emi-buttons form {
  margin: 0;
}

/* The interest rate box: "% a year" inside the box at the right. */
.rate-box {
  position: relative;
}

.rate-box input {
  padding-right: 6.5rem;
}

.rate-box-unit {
  position: absolute;
  top: 50%;
  right: 14px;
  color: var(--text-secondary);
  white-space: nowrap;
  transform: translateY(-50%);
}

[data-emi-form] [hidden] {
  display: none;
}

/* ---------- R1-UI3: the entry forms (03-new-receipt, 06-phone-new-receipt, README "Forms") ---------- */

.entry-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-section .section-title {
  margin: 0 0 16px;
}

.form-section .form-grid {
  gap: 18px 24px;
}

.field-label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-secondary);
  font-size: 0.9286rem;
  font-weight: 500;
}

.field-link {
  margin-top: 6px;
  background: var(--card);
  color: var(--primary);
  font-size: 0.9286rem;
  font-weight: 600;
  text-decoration: none;
}

/* S11-2z: Via Representative's "+ Add New" opens the people dialog: a button that looks as the link. */
button.field-link {
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

/* ONE searchable box: the matches drop down under it. */
.combo {
  position: relative;
}

.combo-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  display: inline-flex;
  color: var(--muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.combo-icon .icon {
  width: 16px;
  height: 16px;
}

.combo-input {
  padding-left: 36px;
}

.combo-list {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  z-index: 25;
  max-height: 280px;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--card);
  list-style: none;
  box-shadow: 0 8px 24px rgb(16 24 40 / 10%);
}

.combo-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  overflow-wrap: anywhere;
}

.combo-option:hover,
.combo-active {
  background: var(--primary-soft);
  color: var(--primary);
}

.combo-option[aria-selected="true"] {
  font-weight: 600;
}

.combo-line {
  flex: none;
  color: var(--text-secondary);
  font-size: 0.8571rem;
}

.combo-add {
  margin-top: 4px;
  border-top: 1px solid var(--row-line);
  border-radius: 0 0 6px 6px;
  background: var(--card);
  color: var(--primary);
  font-weight: 600;
}

/* With the script, the select is what is sent but the box is what is seen. */
.js .combo-native {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The second card: the attachments beside "More options". */
.form-more {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px 24px;
}

.drop-zone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--table-head);
}

.drop-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--radius-small);
  background: var(--primary-soft);
  color: var(--primary);
}

.drop-words {
  display: flex;
  flex: 1 1 180px;
  flex-direction: column;
  min-width: 0;
}

.drop-title {
  font-weight: 600;
}

.form-more .file-list,
.form-more .file-rows {
  margin-top: 12px;
}

.more-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.more-title {
  margin: 0 0 4px;
  color: var(--text-secondary);
  font-size: 0.9286rem;
  font-weight: 600;
}

.more-options .switch-line {
  min-height: 36px;
  font-weight: 500;
  gap: 10px;
}

.more-options .gst-block {
  margin: 4px 0 8px;
  padding: 12px !important;
}

.form-actions {
  margin: 0;
}

@media (min-width: 768px) {
  .form-more {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* The phone (06-phone-new-receipt): a back arrow and the title at the top; the save buttons in
   a bar fixed at the bottom (48 px), where the quick menu was. */
.phone-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -10px;
  background: var(--card);
  color: var(--text);
}

@media (max-width: 767px) {
  .form-page .bottom-bar {
    display: none;
  }

  .form-page .form-actions {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 12;
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: var(--card);
  }

  .form-page .form-actions .btn {
    min-height: 48px;
    white-space: normal;
  }

  .form-page .form-actions .btn-plain {
    display: none;
  }
}

/* The payment form: its "Payment | Advance payment" switch at the top of its card (D101, D103),
   small; the seek-approval line above its buttons. */
.form-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.form-section-head .section-title {
  margin: 0;
}

.payment-kind {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.segmented-small label {
  min-height: 32px;
  padding: 0 14px;
  font-size: 0.9286rem;
}

.bill-line {
  margin: -8px 0 16px;
}

.grid-gap {
  display: none;
}

.seek-block .field-help {
  margin: 0;
}

@media (min-width: 768px) {
  .grid-gap {
    display: block;
  }
}

@media (max-width: 767px), (pointer: coarse) {
  .segmented-small label {
    min-height: 44px;
  }
}

/* ---------- R1-UI4: Approvals (05-approvals, README "Approvals") ---------- */

.ap-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.ap-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.ap-top .ap-asked {
  font-size: 0.9286rem;
}

.ap-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
}

.ap-head .ap-party {
  margin: 0;
  font-size: 1.1429rem;
  font-weight: 600;
}

.ap-head .ap-amount {
  font-size: 1.5714rem;
  font-variant-numeric: tabular-nums;
}

/* The details as small label-value pairs. */
.ap-buttons .btn {
  justify-content: flex-start;
}

.decided-row {
  flex-wrap: wrap;
}

.decided-who {
  flex: none;
  font-size: 0.9286rem;
}

.approvals-line .icon {
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

@media (max-width: 767px) {
  .approval-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .ap-buttons {
    min-width: 0;
  }

  .decided-who {
    flex-basis: 100%;
    margin-left: 0;
  }
}

.decided-recently {
  padding: 0;
  overflow: hidden;
}

.decided-recently .list-card-title {
  padding-bottom: 8px;
}

/* R1-UI4: controls are 36 px on a computer; a phone or any coarse pointer keeps 44 px touch
   sizes (README "Type and sizes"). */
@media (max-width: 767px), (pointer: coarse) {
  .chip,
  .segmented label,
  .file-list .btn-remove,
  .file-list .remove-question .btn,
  .switch-line,
  .account-link,
  .list-link,
  .bell-item {
    min-height: 44px;
  }

  .dialog-close {
    width: 44px;
    height: 44px;
  }
}

/* ---------- R1-UI4: every remaining screen in the new look (README "Type and sizes") ---------- */

/* An entry's page: the amount 22 px / 700; the details as small label-value pairs; the history
   as rows under row lines. */
.entry-open .section-title {
  margin: 8px 0 10px;
  padding-top: 16px;
  border-top: 1px solid var(--row-line);
}

.history-line {
  font-size: 0.9286rem;
}

/* Settings, More and the account menu's links: rows under row lines, the icon muted. */
.list-link {
  padding: 10px 20px;
  font-weight: 500;
}

.list-link .icon {
  width: 18px;
  height: 18px;
  color: var(--text-secondary);
}

/* Accounts: each account card as the new cards; its balance 22 px / 700. */
/* "Coming soon", the error pages and "You do not have access": a quiet card. */
/* The pages of a list. */
/* The powers' list (Add user, Change powers). */

/* ---------- R1-UI5 (D163): the full width; forms three across from 1280 px ---------- */

/* The masters' and Settings' forms: their fields in the same columns; anything that is not a
   field (a tick, a group of powers, the buttons, a message) takes the whole row. */
.form-card .form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px 24px;
}

.form-card .form > :not(.field) {
  grid-column: 1 / -1;
}

/* "More options": the ticks 16 px on a computer, in line with their words (18 px with 44 px
   touch rows on a phone, by the touch rule). */
.more-options .switch-line input {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: none;
}

/* The receipt and payment card. On a phone the page's own order (06-phone-new-receipt); from
   768 px the areas place the cells two across (today's order), from 1280 px three across
   (README, D163). */
@media (min-width: 768px) {
  .entry-grid > .field:has(#id_date) {
    grid-area: date;
  }

  .entry-grid > .field:has(#id_amount) {
    grid-area: amount;
  }

  .entry-grid > .field:has(#id_paid_date) {
    grid-area: paid;
  }

  .entry-grid > .cell-party {
    grid-area: party;
  }

  .entry-grid > .cell-account {
    grid-area: account;
  }

  .entry-grid > .cell-mode {
    grid-area: mode;
  }

  .entry-grid > .cell-reference {
    grid-area: reference;
  }

  .entry-grid > .cell-type {
    grid-area: type;
  }

  .entry-grid > .cell-category {
    grid-area: category;
  }

  .entry-grid > .cell-reason {
    grid-area: reason;
  }

  .entry-grid > .cell-invoice {
    grid-area: invoice;
  }

  .entry-grid {
    grid-template-areas:
      "date amount"
      "party account"
      "mode reference"
      "type category"
      "reason reason"
      "invoice .";
  }

  .entry-grid.has-paid {
    grid-template-areas:
      "date amount"
      "paid ."
      "party account"
      "mode reference"
      "type category"
      "reason reason"
      "invoice .";
  }

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

@media (min-width: 1280px) {
  .form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .entry-grid {
    grid-template-areas:
      "date amount mode"
      "party account reference"
      "type category invoice"
      "reason reason .";
  }

  .entry-grid.has-paid {
    grid-template-areas:
      "date amount mode"
      "party account reference"
      "type category invoice"
      "reason reason paid";
  }

  .form-card .form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px), (pointer: coarse) {
  .more-options .switch-line input {
    width: 18px;
    height: 18px;
  }
}

/* ---------- R1-UI6: the red star (D161) and "+ Add New" (D162) ---------- */

/* A field the server refuses empty: a red star after its label; any other field no mark. */
.req {
  color: var(--money-out);
  font-weight: 600;
}

/* The person search with nothing found. */
.combo-none {
  padding: 6px 10px;
  color: var(--text-secondary);
  font-size: 0.9286rem;
}

/* ---------- R1-UI7: "Not Required" (D161) and the person / firm's fields (D164, D167) ---------- */

/* "Not Required" under a reference or the Invoice No.: a small tick in line with its word. */
.not-required {
  min-height: 32px;
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 0.9286rem;
  font-weight: 500;
}

.not-required input {
  width: 16px;
  height: 16px;
  margin: 0;
}

/* The quick add "Add New Person / Firm": 720 px wide on a computer, two columns from 768 px. */
#party-dialog {
  width: min(720px, 94vw);
  max-width: 720px;
}

.party-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px 24px;
}

.party-grid .field {
  margin: 0;
}

/* Party Type: the ticks two to a row on a phone, three on a computer; 16 px boxes. */
.type-ticks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 16px;
}

.type-ticks .switch-line {
  font-weight: 500;
}

.type-ticks .switch-line input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.party-types {
  position: relative; /* RR7 (D215): "+ Add Party Type" sits beside the legend */
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* RR7 (D215): "Party Type" with "+ Add Party Type" beside it; its small dialog. */
.party-types > .party-type-add {
  position: absolute;
  top: 0;
  right: 0;
}

.dialog-small {
  width: min(420px, calc(100vw - 24px));
}

.party-type-body {
  padding: 16px 20px;
}

@media (min-width: 768px) {
  .party-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .party-grid .span-2 {
    grid-column: 1 / -1;
  }

  .type-ticks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px), (pointer: coarse) {
  .type-ticks .switch-line,
  .not-required {
    min-height: 44px;
  }

  .type-ticks .switch-line input,
  .not-required input {
    width: 18px;
    height: 18px;
  }
}

/* R1-UI8 (D165): "Print Cash Voucher" beside the saved message. */
.message-action {
  margin-left: 8px;
  vertical-align: middle;
}

/* ---------- R1-UI9 (D166): the settings pages across the width, and the review fixes ---------- */

/* Settings: a grid of cards, one across on a phone, two from 768 px, three from 1280 px. */
.settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space);
}

.settings-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.settings-card h2 {
  margin: 0;
}

.settings-line {
  flex: 1;
  margin: 0;
  color: var(--text-secondary);
}

.settings-action {
  margin: 8px 0 0;
}

.settings-form .form-buttons {
  justify-content: flex-start;
}

/* One "Actions" menu per row (a <details data-menu>: Escape and a click outside close it). */
.row-menu {
  position: relative;
  display: inline-block;
}

.row-menu-button {
  list-style: none;
  cursor: pointer;
}

.row-menu-button::-webkit-details-marker {
  display: none;
}

.row-menu-panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  /* R1-UI10: above everything (the script places it with position: fixed from its button); on a
     short screen it scrolls inside itself. */
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 14rem;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  padding: 6px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 8px 24px rgb(16 24 40 / 10%);
}

.row-menu-item {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 16px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

.row-menu-item:hover,
.row-menu-item:focus-visible {
  background: var(--primary-soft);
}

/* The users' table fits a computer; on a phone its rows are cards. So the open menu is not cut
   off by the table's box. */
.table-wrap:has(.users-table) {
  overflow: visible;
}

/* My Profile: the two forms side by side from 1280 px, the devices across under them. */
.profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space);
  margin-bottom: var(--space);
}

.profile-grid > .card {
  margin: 0;
}

/* Accounts: a cash card starts as wide as a bank card needs for its buttons at the top right
   (27rem, the container query above); on a phone the buttons go under the name on both. */
.cash-accounts .account-cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 27rem), 1fr));
}

/* Transfer: the Note across both columns from 768 px. */
.transfer-note {
  grid-column: 1 / -1;
}

/* Add User and Change Powers: the role at the top under its label, the powers across the width
   as a grid of ticks, each with its line under it. */
.form-card .form > .role-choice,
.form-card .form > .powers {
  grid-column: 1 / -1;
}

.role-choice {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.power-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px 24px;
}

@media (min-width: 768px) {
  .settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (min-width: 1280px) {
  .settings-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .power-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .form-card .form[data-transfer-form] {
    grid-template-areas:
      "from to amount"
      "date note note";
  }

  [data-transfer-form] > .field:has(#id_from_account) {
    grid-area: from;
  }

  [data-transfer-form] > .field:has(#id_to_account) {
    grid-area: to;
  }

  [data-transfer-form] > .field:has(#id_amount) {
    grid-area: amount;
  }

  [data-transfer-form] > .field:has(#id_date) {
    grid-area: date;
  }

  [data-transfer-form] > .transfer-note {
    grid-area: note;
  }
}

@media (max-width: 767px) {
  .row-menu-panel {
    right: auto;
    left: 0;
  }
}

/* ---------- R1-UI11 (D171): every box of a row the same height; the tick fields ---------- */

/* A label with "Not Required" at its right end: one line, the label's own height, so the box
   below lines up with the boxes beside it. */
.field-label-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  margin-bottom: 6px;
}

.field-label-line .field-label {
  min-width: 0;
  margin-bottom: 0;
}

.field-label-line .not-required {
  flex: none;
  gap: 6px;
  min-height: 0;
  margin: 0;
  font-size: 0.8571rem;
  line-height: 1.2;
}

.field-label-line .not-required input {
  width: 14px;
  height: 14px;
}

/* "On Behalf Of" and "Adjust Against": one under the other, the normal space between fields. */
.tick-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

/* From 1280 px a cheque's bank takes the empty third cell beside Narration: the reference box
   lets its cells join the grid (its number and date stay the reference cell). With the paid
   date in that cell (a payment marked paid), the bank stays under the cheque's fields. */
@media (min-width: 1280px) {
  .entry-grid {
    grid-template-areas:
      "date amount mode"
      "party account reference"
      "type category invoice"
      "reason reason bank";
  }

  .entry-grid:not(.has-paid) > .reference-box:not([hidden]):has(.cell-cheque-bank) {
    display: contents;
  }

  .entry-grid:not(.has-paid) > .reference-box > .reference-pair {
    grid-area: reference;
  }

  .entry-grid:not(.has-paid) > .reference-box > .cell-cheque-bank {
    grid-area: bank;
  }
}

/* ---------- R15-1 (Release 1.5): Receipt Due and Payment Due ---------- */

/* The status tags (R15-03): red overdue, amber due today and part paid, grey pending, green
   complete; the amber "Pending: Invoice No." (#B54708 on #FFFAEB, R1.5 section 5.3). */
.tag-due-overdue {
  background: var(--money-out-soft);
  color: var(--money-out);
}

.tag-due-today,
.tag-due-part,
.tag-pending {
  background: var(--waiting-soft);
  color: var(--waiting);
}

.tag-due-pending,
.tag-due-bill {
  /* R15-6v: "Waiting for Bill" as grey as "Pending" */
  background: var(--neutral-soft);
  color: var(--text-secondary);
}

.tag-due-complete {
  background: var(--money-in-soft);
  color: var(--money-in);
}

/* The four totals: one across on a phone, two from 768 px, four from 1280 px. */
.dues-totals {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space);
  margin-bottom: var(--space);
}

.dues-totals .stat {
  margin: 0;
}

.stat-label {
  margin: 0 0 4px;
  color: var(--text-secondary);
  font-size: 0.9286rem;
  font-weight: 500;
}

.stat-value {
  margin: 0;
  font-size: 1.4286rem;
  font-weight: 700;
  white-space: nowrap;
}

.stat-overdue .stat-value {
  color: var(--money-out);
}

/* The chips: the kinds, the statuses and the amber "N Pending". */
.dues-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
}

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

.dues-toolbar .chip {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.chip-active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.chip-pending {
  border-color: var(--waiting-border);
  background: var(--waiting-soft);
  color: var(--waiting);
}

.dues-table .num {
  text-align: right;
}

/* "7 Days", "15 Days", "30 Days" on the Due Date's label line (D173 (4)). */
.due-chips {
  display: inline-flex;
  flex: none;
  gap: 6px;
}

.chip-button {
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.8571rem;
  line-height: 1.6;
  cursor: pointer;
}

/* The "Kept Pending" / "Not Required" choice on the Invoice No.'s label line (R1.5 section 5). */
.pending-choice {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 2px;
}

.pending-select {
  width: auto;
  min-height: 0;
  padding: 0 4px;
  font-size: 0.8571rem;
}

.running-balance {
  font-weight: 600;
}

@media (min-width: 768px) {
  .dues-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .dues-totals {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .due-grid .cell-narration {
    grid-column: span 2;
  }
}

/* ---------- R15-1a: the dues lists' columns and cards, the names, the label lines ---------- */

/* From 1280 px the table: Person / Firm at least 200 px, an invoice number and the amounts never
   wrapped, words never broken inside, nothing cut off (CLAUDE.md rules 13 and 14). */
.dues-table td {
  overflow-wrap: normal;
  word-break: normal;
  vertical-align: top;
}

.dues-table .dues-party {
  min-width: 200px;
}

.dues-table .dues-invoice {
  white-space: nowrap;
}

/* The names as in mockup R15-03: bold dark text that opens the due's page. */
.due-name {
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}

.due-name:hover {
  text-decoration: underline;
}

.due-name:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* The Kind tag: blue with its dot ("● One-Time"). */
.tag-kind {
  background: var(--approved-soft);
  color: var(--approved);
}

/* Below 1280 px (and on a phone) each due is a card. */
.dues-cards {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.due-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.due-card:last-child {
  border-bottom: 0;
}

.due-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.due-card-line {
  margin: 0;
}

.due-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* The label line keeps a plain label's height: the chips and the small dropdown fit inside it. */
.field-label-line .chip-button {
  height: 18px;
  line-height: 16px;
  padding: 0 7px;
}

.field-label-line .pending-select {
  height: 18px;
  line-height: 16px;
  padding: 0 4px;
}

/* R15-2d (the chat's review of R15-1a): the table only where it fits whole (at 1366 and 1440 px
   with the menu it did not: Status and "Pay" went out of sight); the cards below. */
@media (max-width: 1599px) {
  .dues-table-wrap {
    display: none;
  }
}

@media (min-width: 1600px) {
  .dues-cards {
    display: none;
  }
}

/* The four totals two by two on a phone. */
@media (max-width: 767px) {
  .dues-totals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dues-totals .stat-value {
    font-size: 1.1429rem;
  }
}

/* ---------- R15-2c (R15-2 item 2; mockups R15-01, R15-07): the rows of the entry forms ---------- */

/* From 768 px two across in the order of R15-01; from 1280 px three across: Date · Amount · Mode;
   Paid To · Paid From · the reference; Payment Against · the second dropdown (two cells); Category
   · Narration (two cells; a cheque's Bank takes Narration's second cell, D175 (4)). A phone keeps
   the page's own order, one column. */
/* R15-2e (the chat's review of R15-2c): "Choose who it is paid to first." has the box's height,
   so its row lines up (D171). */
.against-first {
  display: flex;
  align-items: center;
  min-height: 36px;
  margin: 0;
  padding: 0;
}

/* R15-2e: the named areas only where a template names them (from 768 px). Outside a media query
   they made extra implicit columns: three squeezed columns at 390 px. */
@media (min-width: 768px) {
  .entry-grid > .cell-against {
    grid-area: against;
  }

  .entry-grid > .cell-against-item {
    grid-area: item;
  }

  .entry-grid {
    grid-template-areas:
      "date amount"
      "mode party"
      "account reference"
      "against item"
      "category reason";
  }

  .entry-grid.has-paid {
    grid-template-areas:
      "date amount"
      "paid ."
      "mode party"
      "account reference"
      "against item"
      "category reason";
  }
}

@media (min-width: 1280px) {
  .entry-grid {
    grid-template-areas:
      "date amount mode"
      "party account reference"
      "against item item"
      "category reason reason";
  }

  .entry-grid:has(.cell-cheque-bank) {
    grid-template-areas:
      "date amount mode"
      "party account reference"
      "against item item"
      "category reason bank";
  }

  .entry-grid.has-paid {
    grid-template-areas:
      "date amount mode"
      "paid . ."
      "party account reference"
      "against item item"
      "category reason reason";
  }
}

/* R15-4b item 0 (review of R15-3): "Split Across Invoices" gets its own row across the card, under
   "Payment Against" (which keeps its own width); the grid's columns stay minmax(0, 1fr). */
@media (min-width: 768px) {
  .entry-grid:has(.split-box) {
    grid-template-areas:
      "date amount"
      "mode party"
      "account reference"
      "against ."
      "item item"
      "category reason";
  }

  .entry-grid.has-paid:has(.split-box) {
    grid-template-areas:
      "date amount"
      "paid ."
      "mode party"
      "account reference"
      "against ."
      "item item"
      "category reason";
  }
}

@media (min-width: 1280px) {
  .entry-grid:has(.split-box) {
    grid-template-areas:
      "date amount mode"
      "party account reference"
      "against . ."
      "item item item"
      "category reason reason";
  }

  .entry-grid:has(.cell-cheque-bank):has(.split-box) {
    grid-template-areas:
      "date amount mode"
      "party account reference"
      "against . ."
      "item item item"
      "category reason bank";
  }

  .entry-grid.has-paid:has(.split-box) {
    grid-template-areas:
      "date amount mode"
      "paid . ."
      "party account reference"
      "against . ."
      "item item item"
      "category reason reason";
  }
}

.split-table th,
.split-table td[data-label="Invoice"],
.split-table td[data-label="Invoice Date"] {
  white-space: nowrap;
}

.entry-grid > .cell-against-item,
.split-box,
.split-table {
  min-width: 0;
  max-width: 100%;
}

/* R15-4b item 0 (review of R15-3): on a phone nothing is wider than the screen: the split's cards
   and their "Adjust Now" box shrink with it; the excess panel's table shows each line as one row of
   words ("Against INV-2231 · Payment Complete · ₹25,000.00"). */
@media (max-width: 767px) {
  .split-table td {
    min-width: 0;
    max-width: 100%;
  }

  .split-table td[data-label="Adjust Now"] .split-money {
    flex: 0 1 12em;
    min-width: 0;
    max-width: 100%;
  }

  .split-table td[data-label="Adjust Now"] .split-money input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .split-summary div {
    min-width: 0;
    max-width: 100%;
  }

  .excess-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .excess-table,
  .excess-table tbody {
    display: block;
    width: 100%;
  }

  .excess-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 0;
    padding: 6px 0;
    border-bottom: 1px solid var(--waiting-border);
  }

  .excess-table td {
    display: inline;
    padding: 0;
    border-bottom: 0;
  }

  .excess-table td:empty {
    display: none;
  }

  /* R15-13 item 7 (d), finished in R15-13zz: the " ·" goes after a cell, so a wrapped line
     never starts with "·". */
  .excess-table td:not(:empty):not(:last-child)::after {
    content: " ·";
  }

  .excess-table .num {
    text-align: left;
  }
}

/* R15-5 item 0 (a) (review of R15-4): Receipts and Payments from 768 to 1279 px: the Mode becomes the
   Amount's small second line and a row's numbers and buttons sit under its Status tag, so Paid To /
   Received From and Against get the room (at least 180 px); the Numbers column shows from 1280 px.
   Nothing is cut off and nothing scrolls sideways. */
@media (min-width: 1000px) and (max-width: 1279px) {
  .entries-table .en-mode,
  .entries-table .en-numbers,
  .entries-table .en-numbers-head,
  .entries-table .en-action {
    display: none;
  }

  .entries-table .en-amount-mode {
    display: block;
    color: var(--muted);
    font-size: 0.8571rem;
    font-weight: 400;
  }

  .entries-table .en-status-more {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 6px;
  }

  /* R15-7f item 1 (a): the Status column keeps the width of its widest tag or button (as after
     R15-5), so nothing is cut off at the card's edge on the Owner's 1093 px screen; Paid To /
     Received From and Against share the rest (no fixed width each). */
  .entries-table .en-status {
    width: 190px;
    min-width: 190px;
  }

  /* R15-Pf (D195 (2)): the buttons keep one line; a tag too long wraps inside itself (below). */
  .entries-table .en-status .btn {
    white-space: nowrap;
  }

  .entries-table .en-date {
    white-space: nowrap;
  }
}

.en-amount-mode,
.en-status-more {
  display: none;
}

.entries-table .en-numbers .tag,
.en-status-more .tag {
  display: inline-block;
  margin: 0 4px 4px 0;
  white-space: nowrap;
}

.entries-table .add-number {
  white-space: nowrap;
}

/* On a phone (cards) the numbers and "Add Number" sit under the Status tag; the row's own button
   keeps its place. */
@media (max-width: 999px) {  /* R15-7 item 0 (a): cards up to 999 px */
  .entries-table .en-numbers,
  .entries-table .en-numbers-head {
    display: none;
  }

  .entries-table .en-status-more {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
  }

  .entries-table .en-status-more .btn:not(.add-number) {
    display: none;
  }
}

/* R15-5 (mockup R15-05): "N Pending" and the banner above the list, amber (#B54708 on #FFFAEB). */
.pending-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0 0 12px;
}

.pending-banner {
  flex: 1 1 280px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--waiting-border);
  border-radius: var(--radius-small);
  background: var(--waiting-soft);
  color: var(--waiting);
}

.pending-chip {
  border-color: var(--waiting-border);
  background: var(--waiting-soft);
  color: var(--waiting);
}

.pending-chip.is-on {
  border-color: var(--waiting);
  font-weight: 600;
}

/* R15-5 (mockup R15-01): once chosen, "● Kept Pending ▾" in amber on the label's line. */
.pending-choice.is-chosen::before {
  content: "●";
  margin-right: 4px;
  color: var(--waiting);
}

.pending-choice.is-chosen .pending-select {
  color: var(--waiting);
  background-color: var(--waiting-soft);
  border-color: var(--waiting-border);
}

.pending-choice.is-chosen .req {
  display: none;
}

/* R15-5 item 0 (b) (review of R15-4): the advance's covering table on a phone: each line is one
   row of words joined by " · " (as the excess table, R15-4b), never a heading broken inside a word. */
@media (max-width: 767px) {
  .cover-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .cover-table,
  .cover-table tbody {
    display: block;
    width: 100%;
  }

  .cover-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--row-line);
  }

  .cover-table td {
    display: inline;
    padding: 0;
    border: 0;
  }

  /* R15-13 item 7 (d), finished in R15-13z: the " ·" goes after a cell, so a wrapped line never
     starts with "·" (the space after it lets the line wrap there). */
  .cover-table tr {
    column-gap: 0.35em;
  }

  .cover-table td:not(:last-child)::after {
    content: " ·";
  }

  .cover-table .num {
    text-align: left;
  }
}

/* R15-13 item 7 (d), finished in R15-13z (mockup R15-06): the covering table's Amount at the right;
   space under "Convert to Payment". */
.cover-table .num {
  text-align: right;
}

.convert-card > .section-title {
  margin-bottom: 16px;
}

/* R15-6 item 0 (b) (mockup R15-06): "Convert to Payment": one field a row on a phone, two from
   768 px, three from 1280 px (Paid To, Invoice, Amount); Narration across two columns; the buttons
   under the card on the right. */
.convert-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px 24px;
  align-items: start;
}

.convert-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin: 12px 0 24px;
}

.file-box {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-small);
  cursor: pointer;
}

.file-box:focus-within {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .convert-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .convert-grid > .convert-narration {
    grid-column: span 2;
  }
}

@media (min-width: 1280px) {
  .convert-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* R15-6 item 0 (c) (mockup R15-06): the advance's figures as a soft band, each label plain and its
   amount bold; Still to Cover red while above zero; the Cover by tag in the band. */
.advance-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
  margin: 8px 0 16px;
  padding: 12px 16px;
  border-radius: var(--radius-small);
  background: var(--table-head);
  color: var(--text-secondary);
}

.advance-band strong {
  margin-left: 4px;
  color: var(--text);
  white-space: nowrap;
}

.advance-band .still-left strong {
  color: var(--money-out);
}

.cover-table .cell-line {
  display: block;
}

/* R15-6 item 0 (e): the offer on a due's page in its own notice box, with space under it. */
.use-offer {
  margin-bottom: 16px;
  padding: 12px 16px;
  border: 1px solid var(--primary-soft-border);
  border-radius: var(--radius-small);
  background: var(--primary-soft);
}

.use-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.use-row + .use-row {
  margin-top: 8px;
}

/* R15-6 item 0 (d): up to 1279 px the excess panel sits in a narrow column, so its lines show as
   rows of words (the phone rule), and the split's invoices are cards (the phone rule) until its
   columns fit; on a phone a line goes under each row of words, not under each part of it. */
@media (max-width: 1279px) {
  .excess-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .excess-table,
  .excess-table tbody {
    display: block;
    width: 100%;
  }

  .excess-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--waiting-border);
  }

  .excess-table td {
    display: inline;
    padding: 0;
    border-bottom: 0;
  }

  .excess-table td:empty {
    display: none;
  }

  /* R15-13 item 7 (d), finished in R15-13zz: the " ·" goes after a cell, so a wrapped line
     never starts with "·". */
  .excess-table td:not(:empty):not(:last-child)::after {
    content: " ·";
  }

  .excess-table .num {
    text-align: left;
  }

  .split-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .split-table,
  .split-table tbody {
    display: block;
    width: 100%;
  }

  .split-table tr {
    display: block;
    margin-bottom: 12px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-small);
    background: var(--card);
  }

  .split-table td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    border-bottom: 0;
    text-align: right;
    min-width: 0;
  }

  .split-table td[data-label]::before {
    content: attr(data-label);
    color: var(--text-secondary);
    text-align: left;
  }

  .split-table td.split-tick {
    justify-content: flex-start;
  }
}

/* R15-6zzz (mockup R15-04): "Kind" as two radio pills in the form's card, the chosen one blue;
   "Fixed" inside the Amount box on its right; the band "Runs Till … · Next … · N More to Pay". */
.kind-field {
  margin-bottom: 16px;
}

.kind-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kind-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  cursor: pointer;
  white-space: nowrap;
}

.kind-pill:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}

.kind-pill input {
  accent-color: var(--primary);
}

.money-box-choice {
  display: flex;
  align-items: center;
}

.money-box-choice input {
  flex: 1 1 auto;
  min-width: 0;
}

.money-box-choice .inline-select {
  flex: 0 0 auto;
  width: auto;
  min-height: 0;
  margin-left: auto;
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0;
  background-color: transparent;
}

.runs-band {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--radius-small);
  background: var(--primary-soft);
  color: var(--primary);
}

.runs-band:has([data-runs-text]:empty) {
  display: none;
}

.recurring-grid > .span-full {
  grid-column: 1 / -1;
}

/* R15-7 item 0 (b): the entries' table fills its card; (f) a label never shrinks below its words:
   the chips or buttons on its line go under it when the line is too short, and a date box always
   shows its whole date. */
.entries-table {
  width: 100%;
}

/* S11-4z (a) (the chat's review of S11-4: New Receipt at 768 px ran 54 px sideways): a long label
   wraps inside its column at every width, between words, never inside one (min-content keeps
   R15-7's "never below its words"). */
.field-label-line > .field-label {
  flex-shrink: 1;
  min-width: min-content;
  max-width: 100%;
  white-space: normal;
}

.date-box input {
  min-width: 11ch;
}

/* R15-7f item 1 (c): a payment that moves no money (a conversion), as on Home: grey, "No Money
   Moved" under it. */
.entries-table .en-amount-none {
  color: var(--muted);
}

.en-none-line {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
}

/* R15-2d: the Kind and Invoice columns take no more than they need. */
.dues-table .dues-kind,
.dues-table .dues-invoice {
  width: 1%;
  white-space: nowrap;
}

/* R15-2d: the opening balance on a person's change page: a row of its own across the card. The
   amount, "They Owe You" / "You Owe Them" side by side, and "Balance as On"; on a phone one under
   the other. */
.form-card .form > .opening-fields {
  grid-column: 1 / -1;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.opening-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px 24px;
  align-items: start;
}

/* R15-3 item 0: a plain row (no fieldset box, no legend): a heading, then the three fields. The two
   choices may wrap under each other, so nothing touches: two columns from 768 px (the date under
   the amount), three from 1280 px. */
.opening-title {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 600;
}

.opening-fields .opening-side {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: end;
  gap: 8px 24px;
  min-height: 44px;
}

.opening-fields .opening-side .check {
  white-space: nowrap;
}

@media (min-width: 768px) {
  .opening-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .opening-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* R15-3 (R1.5 section 3; mockup R15-02): over the balance, the line's end in red, and the amber
   panel with "Allow Excess Payment", the heads and the table of what the entry settles. The table
   has three short columns and fits 390 px; amounts never break. */
.running-after.running-over {
  color: var(--money-out);
}

.excess-panel {
  margin-top: 12px;
  padding: 12px 16px;
  border: 1px solid var(--waiting-border);
  border-radius: var(--radius-small);
  background: var(--waiting-soft);
}

.excess-body {
  margin-top: 12px;
}

.excess-heads {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.excess-heads legend {
  width: 100%;
  margin-bottom: 8px;
}

.excess-heads .check {
  white-space: nowrap;
}

.excess-table {
  width: 100%;
  margin-top: 12px;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.excess-table th,
.excess-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--waiting-border);
  text-align: left;
  vertical-align: middle;
}

.excess-table th:first-child,
.excess-table td:first-child {
  padding-left: 0;
}

.excess-table th:last-child,
.excess-table td:last-child {
  padding-right: 0;
}

.excess-table .num {
  text-align: right;
  white-space: nowrap;
}

.excess-table .excess-total td {
  border-bottom: 0;
  font-weight: 600;
}

.tag-extra {
  background: var(--waiting-soft);
  color: var(--waiting);
  border: 1px solid var(--waiting-border);
}

/* R15-3z (R1.5 section 1.7; S3 mockup 33): "Split Across Invoices": the table in place of the
   Invoice dropdown; on a phone each invoice is a card (its labels before the values), the "Adjust
   Now" box full width. Amounts never break. */
.split-box {
  grid-column: 1 / -1;
  min-width: 0;
}

.split-actions {
  margin: 8px 0 12px;
}

.split-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.split-table th,
.split-table td {
  padding: 8px;
  border-bottom: 1px solid var(--row-line);
  text-align: left;
  vertical-align: middle;
}

.split-table th {
  background: var(--table-head);
  color: var(--text-secondary);
  font-weight: 600;
}

.split-table .num {
  text-align: right;
  white-space: nowrap;
}

.split-money {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.split-money input {
  width: 9em;
  min-height: 36px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  text-align: right;
  font: inherit;
}

.split-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin: 12px 0 0;
}

.split-summary div {
  display: flex;
  gap: 8px;
}

.split-summary dt {
  color: var(--text-secondary);
}

.split-summary dd {
  margin: 0;
  font-weight: 600;
}

@media (max-width: 767px) {
  .split-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .split-table,
  .split-table tbody,
  .split-table tr,
  .split-table td {
    display: block;
    width: 100%;
  }

  .split-table tr {
    margin-bottom: 12px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-small);
    background: var(--card);
  }

  .split-table td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    border-bottom: 0;
    text-align: right;
  }

  .split-table td[data-label]::before {
    content: attr(data-label);
    color: var(--text-secondary);
    text-align: left;
  }

  .split-table td.split-tick {
    justify-content: flex-start;
  }

  .split-money,
  .split-money input {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  .split-summary {
    flex-direction: column;
  }

  .split-summary div {
    justify-content: space-between;
  }
}

/* R15-2d (R15-2 item 3): the chosen invoice's running balance under the second dropdown. */
.running-line {
  margin-top: 8px;
}

.running-figures,
.running-after {
  margin: 0;
}

.running-after {
  font-weight: 600;
}

/* R15-2e: below 768 px one column, every field the card's width, in the order of mockup R15-07:
   Date, Amount (the paid date), Mode of Payment, Paid To / Received From, Paid From / Received Into,
   the reference, Payment Against, the second dropdown, Category, Narration. */
@media (max-width: 767px) {
  .entry-grid > .field:has(#id_date) {
    order: 1;
  }

  .entry-grid > .field:has(#id_amount) {
    order: 2;
  }

  .entry-grid > .field:has(#id_paid_date) {
    order: 3;
  }

  .entry-grid > .cell-mode {
    order: 4;
  }

  .entry-grid > .cell-party {
    order: 5;
  }

  .entry-grid > .cell-account {
    order: 6;
  }

  .entry-grid > .cell-reference {
    order: 7;
  }

  .entry-grid > .cell-against {
    order: 8;
  }

  .entry-grid > .cell-against-item {
    order: 9;
  }

  .entry-grid > .cell-category {
    order: 10;
  }

  .entry-grid > .cell-reason {
    order: 11;
  }
}

/* R15-7 item 0 (e): Home's recent entries: a payment that moves no money (a conversion, an office
   expense) in grey with "No Money Moved", not red like money paid out. */
.recent-amount.money-none {
  color: var(--muted);
}

.recent-none {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
}

/* R15-7 item 0 (d): "Add Number"'s box at a field's usual width. */
.field-narrow {
  max-width: 360px;
}

/* R15-Pf (D195 (2)): "Out of … · <date>" wraps inside its cell and never widens it (between words
   only); on Payments a status tag too long for its column wraps inside the tag, the buttons keep
   one line. */
.en-out-of {
  display: block;
  white-space: normal;
  overflow-wrap: normal;
}

.entries-table .en-status .tag {
  height: auto;
  min-height: 22px;
  white-space: normal;
  text-align: left;
}

.entries-table .en-status .btn {
  white-space: nowrap;
}

@media (min-width: 1280px) and (max-width: 1599px) {  /* R15-Pf: the names keep room */
  .entries-table .en-party,
  .entries-table .en-against {
    min-width: 150px;
  }
}

@media (max-width: 999px) {  /* R15-Pf: on a phone "Out of …" is its own line across the card */
  .entries-table .en-mode-out {
    grid-column: 1 / -1;
  }
}

/* R15-Pf (D195 (4)): "Spent Out of This Payment": its own table; the title, the button and the
   totals line inside the card's padding; on a phone each line a block, "Left ₹…" labelled, no rule
   under the last line. */
.spent-card > .card-head,
.spent-card > .running-balance,
.spent-card > .empty-list {
  padding: var(--space);
}

.spent-table {
  width: 100%;
  border-collapse: collapse;
}

.spent-table th,
.spent-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.spent-table .num {
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 999px) {  /* R15-13z: "Spent Out of This Payment" as cards below 1000 px (R15-Pf had 767) */
  .spent-table thead {
    display: none;
  }

  .spent-table tr {
    display: block;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
  }

  .spent-table tr:last-child {
    border-bottom: 0;
  }

  .spent-table td {
    display: block;
    padding: 2px 0;
    border-bottom: 0;
    text-align: left;
  }

  .spent-table td[data-label]::before {
    content: attr(data-label) " ";
    color: var(--text-secondary);
  }
}

@media (min-width: 1280px) {  /* R15-13 (e): the recurring form's Category and Alerts on one row (mockup R15-04) */
  .recurring-grid > .span-2 {
    grid-column: span 2;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {  /* R15-13zzz (7 a): a cheque's Bank in its own cell */
  /* R15-13's item 7 (a) (R1-UI11's review; as from 1280 px, D175): the reference box lets its cells
     join the grid, so its number and date stay beside "Paid From" and the Bank takes a row of its
     own: no gap in the left column. With a paid date (a payment marked paid) the box stays whole. */
  .entry-grid:not(.has-paid) > .reference-box:not([hidden]):has(.cell-cheque-bank) {
    display: contents;
  }

  .entry-grid:not(.has-paid) > .reference-box > .reference-pair {
    grid-area: reference;
  }

  .entry-grid:not(.has-paid) > .reference-box > .cell-cheque-bank {
    grid-area: bank;
  }

  .entry-grid:not(.has-paid):has(.cell-cheque-bank) {
    grid-template-areas:
      "date amount"
      "mode party"
      "account reference"
      "bank ."
      "against item"
      "category reason";
  }

  .entry-grid:not(.has-paid):has(.cell-cheque-bank):has(.split-box) {
    grid-template-areas:
      "date amount"
      "mode party"
      "account reference"
      "bank ."
      "against ."
      "item item"
      "category reason";
  }
}

/* S11-3 item 0 (a) (D157): New Payment's three kinds and New Receipt's two as Release 1's choice
   cards: the title in bold on its own line, the help line under it in the muted text, the chosen
   card marked, no fieldset border; one row from 1280 px, stacked below. */
.entry-kinds {
  min-width: 0;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

.kind-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.kind-option {
  display: block;
  position: relative;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-small);
  background: var(--card);
  cursor: pointer;
}

.kind-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.kind-title {
  display: block;
  font-weight: 700;
  color: var(--text);
}

.kind-option .field-help {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.kind-option:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.kind-option:has(input:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media (min-width: 1280px) {  /* S11-3: the kinds in one row */
  .kind-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kind-options.two-kinds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* S11-3: pills wrap their words inside the card (S11-2's review: Via Representative's Purpose ran
   24 px past the card at 390 px). */
.entry-form .choice-chips .chip-choice {
  white-space: normal;
  max-width: 100%;
  min-width: 0;
  height: auto;
}

/* S11-3 item 0 (c): the business transaction's row runs Final Beneficiary, Date of Transaction,
   Amount; the invoice box takes its own place only when it has something. */
.rep-txn-grid #against-box:empty {
  display: none;
}

/* S11-4 (S 1.1 R2): "Paid by Someone Else" directly under Received From, in its cell; ticked, the
   line "Paid By (on Behalf of …)" opens under it. */
.paid-by-box {
  margin-top: 10px;
  min-width: 0;
}

.paid-by-line {
  margin-top: 8px;
}

.paid-by-line select {
  width: 100%;
  max-width: 100%;
}

/* S11-4z (b): "Paid on Behalf of Others" on a phone: each receipt a card (rule 14, as the other
   lists), each value beside its label, never broken inside a word. */
@media (max-width: 767px) {  /* S11-4z (b) */
  .paid-for-table thead {
    display: none;
  }

  .paid-for-table,
  .paid-for-table tbody {
    display: block;
    width: 100%;
  }

  .paid-for-table tr {
    display: block;
    padding: 12px 16px;
    border-bottom: 1px solid var(--row-line);
  }

  .paid-for-table td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
    border: 0;
    text-align: right;
    word-break: normal;
    overflow-wrap: normal;
  }

  .paid-for-table td[data-label]::before {
    content: attr(data-label);
    color: var(--text-secondary);
    text-align: left;
  }
}

/* S11-5 (S 1.1 P5): each entry's kind in the lists, under its person or firm, wrapping inside the
   cell; the tag never breaks inside. */
.en-kind {
  display: block;
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 0.8571rem;
}

.kind-tag {
  white-space: nowrap;
}

/* S11-5 (S 1.1 P2.6, P5): his running balance and the settlements on a person's page; the position
   line in the card's padding. */
.rep-position-line {
  margin: 0;
  padding: 8px 20px 0;
  font-weight: 600;
}

@media (max-width: 767px) {  /* S11-5: the statement's lines as cards */
  .rep-table thead {
    display: none;
  }

  .rep-table,
  .rep-table tbody {
    display: block;
    width: 100%;
  }

  .rep-table tr {
    display: block;
    padding: 12px 16px;
    border-bottom: 1px solid var(--row-line);
  }

  .rep-table td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
    border: 0;
    text-align: right;
    word-break: normal;
    overflow-wrap: normal;
  }

  .rep-table td:empty {
    display: none;
  }

  .rep-table td[data-label]::before {
    content: attr(data-label);
    color: var(--text-secondary);
    text-align: left;
  }
}

/* RR12 (R12, D221): New / Change Payment and Receipt in the Owner's order: the page's own order at
   every width, three to a row from 1093 px, two on a tablet, one on a phone, no empty gaps (a hidden
   cell, such as the reference box for Cash, leaves none). The earlier named areas and phone orders
   (R1-UI3, R15-2e, R15-4b, R15-13zzz) no longer apply to this card: these rules outrank them (the
   id-weight :is(#rr12, *) matches every element). A cheque's number, date and bank stay in the
   reference cell; "Split Across Invoices" takes a row of its own inside Payment Against's cell. */
@media (max-width: 767px) {
  .form .entry-grid:is(#rr12, *) {
    grid-template-areas: none;
    grid-template-columns: minmax(0, 1fr);
  }

  .form .entry-grid.entry-grid > :is(#rr12, *) {
    grid-area: auto;
    order: 0;
  }

  .form .entry-grid > .reference-box:not([hidden]):is(#rr12, *) {
    display: grid;
  }

  .form .entry-grid > .cell-against:has(.split-box):is(#rr12, *) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 768px) and (max-width: 1092px) {
  .form .entry-grid:is(#rr12, *) {
    grid-template-areas: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form .entry-grid.entry-grid > :is(#rr12, *) {
    grid-area: auto;
    order: 0;
  }

  .form .entry-grid > .reference-box:not([hidden]):is(#rr12, *) {
    display: grid;
  }

  .form .entry-grid > .cell-against:has(.split-box):is(#rr12, *) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1093px) {
  .form .entry-grid:is(#rr12, *) {
    grid-template-areas: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .form .entry-grid.entry-grid > :is(#rr12, *) {
    grid-area: auto;
    order: 0;
  }

  .form .entry-grid > .reference-box:not([hidden]):is(#rr12, *) {
    display: grid;
  }

  .form .entry-grid > .cell-against:has(.split-box):is(#rr12, *) {
    grid-column: 1 / -1;
  }
}

/* RR14 (R16, R19, R20; D225, D228, D229): on a phone's card the narration is a line across the
   card; from 1000 to 1279 px the account's name may wrap; the copies of "Add Number" and "Edit"
   under Status show only from 1000 to 1279 px (the row's action cell has them elsewhere). */
@media (max-width: 999px) {
  .entries-table .en-narration {
    grid-column: 1 / -1;
    min-width: 0;
    font-size: 0.9286rem;
  }

  .entries-table .en-status-more .en-mid {
    display: none;
  }
}

@media (min-width: 1000px) and (max-width: 1279px) {
  .entries-table .en-account {
    white-space: normal;
  }
}

/* RR14b (D234): the Payments and Receipts lists fit at every width. From 1280 px a table: the text
   columns get room, the Mode may wrap between its words, the amount never wraps, the status tag wraps
   between words only (two lines at most at these widths), the actions column keeps Edit on one line.
   Below 1280 px each entry is a card (as Payment Due), every value beside its label (the labels come
   from here, by the cell's class), nothing cut. The
   earlier card and 1000-1279 px rules of these lists are outranked here. */
@media (min-width: 1280px) {
  .table-card .entries-table .en-party {
    min-width: 160px;
  }

  .table-card .entries-table .en-narration {
    min-width: 150px;
  }

  .table-card .entries-table .en-account {
    min-width: 100px;
    white-space: normal;
  }

  .table-card .entries-table td.en-mode {
    white-space: normal;
  }

  .table-card .entries-table .en-status {
    min-width: 160px;
  }

  .table-card .entries-table .en-status .tag {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }

  .table-card .entries-table .en-action {
    width: 1%;
    white-space: nowrap;
  }
}

@media (max-width: 1279px) {
  .table-card .entries-table.entries-table thead {
    display: none;
  }

  .table-card .entries-table.entries-table,
  .table-card .entries-table.entries-table tbody,
  .table-card .entries-table.entries-table tfoot {
    display: block;
    width: 100%;
  }

  .table-card .entries-table.entries-table tr {
    display: block;
    padding: 12px 16px;
    border-bottom: 1px solid var(--row-line);
  }

  .table-card .entries-table.entries-table td {
    display: block;
    position: relative;
    width: auto;
    min-width: 0;
    padding: 3px 0 3px 112px;
    border: 0;
    text-align: left;
    white-space: normal;
    overflow-wrap: normal;
  }

  .table-card .entries-table.entries-table tbody td::before {
    position: absolute;
    top: 3px;
    left: 0;
    width: 100px;
    color: var(--text-secondary);
    font-weight: 400;
  }

  .table-card .entries-table.entries-table tbody .en-date::before {
    content: "Date";
  }

  .table-card .payments-table.entries-table tbody .en-party::before {
    content: "Paid To";
  }

  .table-card .receipts-table.entries-table tbody .en-party::before {
    content: "Received From";
  }

  .table-card .entries-table.entries-table tbody .en-narration::before {
    content: "Narration";
  }

  .table-card .payments-table.entries-table tbody .en-account::before {
    content: "Paid From";
  }

  .table-card .receipts-table.entries-table tbody .en-account::before {
    content: "Received Into";
  }

  .table-card .entries-table.entries-table tbody .en-mode::before {
    content: "Mode";
  }

  .table-card .entries-table.entries-table tbody .en-amount::before {
    content: "Amount";
  }

  .table-card .entries-table.entries-table tbody .en-status::before {
    content: "Status";
  }

  .table-card .entries-table.entries-table tfoot td,
  .table-card .entries-table.entries-table tbody .en-action {
    padding-left: 0;
  }

  .table-card .entries-table.entries-table td:empty {
    display: none;
  }

  .table-card .entries-table.entries-table .en-amount {
    white-space: nowrap;
  }

  .table-card .entries-table.entries-table .en-amount-mode {
    display: none;
  }

  .table-card .entries-table.entries-table .en-action {
    padding-top: 8px;
  }

  .table-card .entries-table.entries-table tfoot td {
    background: none;
    padding-left: 0;
  }

  .table-card .entries-table.entries-table tfoot tr {
    background: var(--table-head);
  }

  .table-card .entries-table.entries-table tfoot .en-amount {
    text-align: right;
  }
}