/* ========================================================================== Black Cambry 2026 — Payments View (Slice G) -------------------------------------------------------------------------- Per-view stylesheet for the Payments route (`#payments`). Loaded AFTER components.css AND expenses.css so view-scoped rules can layer on top of the canonical primitives (`.cambry-card`, `.cambry-input`, `.cambry-fab`, `.cambry-loading`, `.cambry-error`, `.cambry-empty`) without redeclaring any selector-and-property pair already defined in components.css (Req 15.5). Sections: - Money_Workflow_Header strip — duplicated verbatim from expenses.css (Slice C). Once both views ship we can decide whether to migrate to components.css per Req 15.5. - View shell (.payments-view) - Settle_Up_View (.settle-up + .settle-up__before-after + .settle-up__transfers + .settle-up-transfer rows) — the Simplified_Payment_Graph chassis (Req 9.1–9.5). - Mark_As_Paid_Action button — ≥ 1936 px² with no dimension below 32 px (Req 9.3 / 16.1). - Payment_Method_Hint sub-menu (.payment-method-menu) — popover with Venmo highlighted as the recommended option (Req 9.6). - Payment_Ledger (.payments-ledger) — kept as the section below the Settle_Up_View; visual chassis updated to the .cambry-card surface treatment. Tokens consumed (defined in styles.css :root): --color-bg #1f2c38 slate background --color-surface #2a3a4a card chrome, one step lighter than bg --color-primary #3a526a chip/button base --color-accent #f896ff soft pink accent --color-accent-hover #ffb1ff lighter pink for :hover --color-on-accent #1f2c38 dark text for accent fills --color-text #e8edf0 body copy on slate --color-text-muted #a6b7bf secondary text --color-error #ff8aa1 warning / "you owe" tone --color-success #7fd197 inline-success tone Typography: Yantramanav (loaded in index.html). Requirements covered: 9.1, 9.2, 9.3, 9.4, 9.5, 9.6, 9.7, 9.8, 9.11, 15.1, 15.3, 15.5, 16.1, 16.3 ========================================================================== */ /* -------------------------------------------------------------------------- Money_Workflow_Header strip (Req 15.3) -------------------------------------------------------------------------- Duplicated verbatim from expenses.css so the header renders identically on both `#expenses` and `#payments`. Per the design's "intentionally inline to expenses.css and payments.css until both ship" note in Slice C task 3.2, we keep both copies in step here. Once both stylesheets are deployed we can decide whether to migrate the rules into components.css per the two-view threshold in Req 15.5. The status-pill slot (`.money-workflow-header__status`) reuses the existing `.status-badge` rule from trip_detail.css — JS emits the element with both classes so the visual treatment carries over without redeclaring its visual properties here. -------------------------------------------------------------------------- */ .money-workflow-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 0 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); margin-bottom: 1.25rem; } .money-workflow-header__title { font-family: 'Yantramanav', sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--color-text); letter-spacing: 0.01em; margin: 0; /* Allow long trip names to truncate so the nav pill stays visible. */ flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Status-pill slot — layout glue only. Visual treatment (background, border-radius, uppercase, padding) comes from `.status-badge` in trip_detail.css; the JS emits the element with `class="money-workflow-header__status status-badge"` so the existing rule applies without re-declaring its properties here (Req 15.5). */ .money-workflow-header__status { flex-shrink: 0; } /* Test-trip pill — sits next to the status pill so admins operating in a test trip never confuse it with the real one. Soft-pink Cambry accent so it reads as a semantic flag rather than a status mutation. Layout-only here; the visual idiom (radius, padding, font sizing) matches the .status-badge from trip_detail.css for a consistent pill row. */ .money-workflow-header__test-pill { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.55rem; border-radius: 999px; background-color: var(--color-accent); color: var(--color-on-accent); font-family: 'Yantramanav', sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: help; } /* The two-button nav pill container — pill-shaped wrapper holding two nav buttons side by side. The 8 px row-gap meets Req 16.3 when the row wraps. */ .money-workflow-header__nav { display: inline-flex; align-items: center; gap: 0; /* segments share an edge; the buttons themselves carry their own borders / fills so the pair reads as one segmented control */ padding: 0.25rem; background-color: var(--color-surface); border-radius: 999px; flex-shrink: 0; } .money-workflow-header__nav-button { display: inline-flex; align-items: center; justify-content: center; /* Bounding rect ≥ 1936 px² with no dimension below 32 px (Req 16.1): min-height 44 px × default label width (~80 px) easily clears the area threshold. */ min-width: 88px; min-height: 44px; padding: 0.55rem 1.1rem; border: none; border-radius: 999px; background-color: transparent; color: var(--color-text-muted); font-family: 'Yantramanav', sans-serif; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; } .money-workflow-header__nav-button:hover:not(:disabled) { color: var(--color-text); } .money-workflow-header__nav-button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .money-workflow-header__nav-button--active { background-color: var(--color-accent); color: var(--color-on-accent); } .money-workflow-header__nav-button--active:hover:not(:disabled) { background-color: var(--color-accent-hover); color: var(--color-on-accent); } /* -------------------------------------------------------------------------- View shell -------------------------------------------------------------------------- Vertical stack of dashboard sections. No bottom Floating_Action_Pill on the Payments view (the Settle_Up_View itself drives the primary actions), so we use a smaller bottom padding than the Expenses view's 6 rem clearance. -------------------------------------------------------------------------- */ .payments-view { display: flex; flex-direction: column; gap: 1.5rem; padding: 1.25rem 1rem 2rem; max-width: 1200px; margin: 0 auto; width: 100%; } /* -------------------------------------------------------------------------- Settle_Up_View — the Simplified_Payment_Graph (Req 9.1–9.5) -------------------------------------------------------------------------- The Settle_Up_View renders as the first section of #payments, above the Payment_Ledger. Inside the section: - .settle-up__before-after — the educational callout that contrasts the un-simplified pair count against the length of the balances `details` array (Req 9.5). - .settle-up__transfers — the row list. One Simplified_Transfer row per entry in `details`. - .settle-up-transfer — a `.cambry-card` variant; each row reads `[avatar] debtor → creditor [amount] [Mark As Paid]`. -------------------------------------------------------------------------- */ .settle-up { display: flex; flex-direction: column; gap: 0.85rem; } /* Before/After Comparison callout (Req 9.5). Reads the format `Without simplification: N payments. With simplification: M.` The visual treatment is a pill-rounded card that rides the surface token rather than the soft pink accent — the callout is informational rather than a status mutation, so we keep it visually neutral. */ .settle-up__before-after { padding: 0.85rem 1.1rem; background-color: var(--color-surface); border-radius: 12px; border-left: 3px solid var(--color-accent); font-family: 'Yantramanav', sans-serif; font-size: 0.95rem; font-weight: 400; line-height: 1.4; color: var(--color-text); } /* Transfer list — a vertical stack of Simplified_Transfer rows. The 0.6 rem (≥ 8 px) gap between rows clears Req 16.3's adjacent-control spacing without crowding the rows together. */ .settle-up__transfers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; } /* One Simplified_Transfer row. Layout glue ON TOP of `.cambry-card` — does NOT redeclare the base properties (background, border-radius, padding, box-shadow) that live in components.css per Req 15.5. The card markup is `class="cambry-card settle-up-transfer"`. The cambry-card rule sets `flex-direction: column` by default; we override to row here so each row reads horizontally on every viewport, with the body column flexing between the leading avatars and the trailing action button. The row wraps gracefully on narrow viewports because flex-wrap is on. */ .settle-up-transfer { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0.75rem; } /* "It's me" treatment — when the resolved authenticated user is the debtor on this transfer, the card carries the soft pink Cambry accent ring so the user sees their actionable rows at a glance (Req 9.4). Painted via inset box-shadow so the card geometry stays identical to non-mine rows (mirrors `.cambry-card--active`'s pattern in components.css). */ .settle-up-transfer--mine { box-shadow: inset 0 0 0 2px var(--color-accent), 0 2px 8px rgba(0, 0, 0, 0.25); } @media (hover: hover) and (pointer: fine) { .settle-up-transfer--mine:hover { box-shadow: inset 0 0 0 2px var(--color-accent), 0 6px 16px rgba(0, 0, 0, 0.35); } } /* Avatar slot — layout glue ONLY for the avatar inside a transfer row. The avatar's own size, border-radius, and image-fit rules are carried by `.cambry-avatar` (or the `.member-chip__avatar` chassis already shipped in expenses.css); we do not redeclare those properties here per Req 15.5. The markup is `class="cambry-avatar settle-up-transfer__avatar"`. The 44 × 44 minimum gives the avatar a tap-target-sized footprint when the row is interacted with via the avatar itself. */ .settle-up-transfer__avatar { flex-shrink: 0; /* Belt-and-suspenders bounds in case a row mounts an avatar without the shared primitive's intrinsic size. */ min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Image variant of the settle-up avatar — rendered when the roster entry carries a non-null ``avatar_url``. The chassis still provides sizing/border-radius via the shared ``.cambry-avatar`` rule per Req 15.5; this selector only configures the 's own fill behavior. */ .settle-up-transfer__avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } /* Arrow glyph between debtor and creditor avatars (Req 9.3). Just an inline glyph — no border, no fill — sized to read at the same visual weight as the surrounding names. */ .settle-up-transfer__arrow { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-family: 'Yantramanav', sans-serif; font-size: 1.25rem; font-weight: 700; color: var(--color-text-muted); line-height: 1; /* A small minimum width keeps the arrow from collapsing to zero in constrained layouts. */ min-width: 1.5rem; text-align: center; } /* Trailing amount column — the transfer amount in the trip's `base_currency`. Tabular-nums aligns the right edge across rows so the eye can scan the column. Flex-grow pushes the action button to the trailing edge. */ .settle-up-transfer__amount { flex: 1 1 auto; min-width: 0; font-family: 'Yantramanav', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--color-text); letter-spacing: 0.01em; text-align: right; font-variant-numeric: tabular-nums; /* Long base-currency totals (e.g. JPY without decimal places) can overflow on narrow viewports; let them truncate gracefully. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Mark_As_Paid_Action button (Req 9.3 / 16.1). Bounding rect ≥ 1936 px² with no dimension below 32 px — the 44 × 88 minimum here clears both bounds with margin to spare. The pill geometry mirrors the filter strip in expenses.css so the affordance reads consistently across the rebuild. When the action is disabled (Req 9.8 — viewer is not the debtor; Req 9.11 — trip status ≠ settling), the button greys out via the :disabled rule below. The disabled-reason copy is rendered as a sibling element (`.settle-up-transfer__action-message`) so we don't redeclare any title-attribute styling here. */ .settle-up-transfer__action { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 88px; min-height: 44px; padding: 0.55rem 1.1rem; border: none; border-radius: 999px; background-color: var(--color-accent); color: var(--color-on-accent); font-family: 'Yantramanav', sans-serif; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; transition: background-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease; } .settle-up-transfer__action:hover:not(:disabled) { background-color: var(--color-accent-hover); } .settle-up-transfer__action:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; } .settle-up-transfer__action:active:not(:disabled) { transform: translateY(1px); } .settle-up-transfer__action:disabled { background-color: var(--color-primary); color: var(--color-text-muted); opacity: 0.6; cursor: not-allowed; } /* Disabled-reason inline message rendered alongside the action when the button is disabled (Req 9.8 / 9.11). Lives on a new line below the button on narrow viewports so the row doesn't blow out horizontally. Uses --color-text-muted so the message reads as informational rather than alarming. */ .settle-up-transfer__action-message { flex-basis: 100%; font-family: 'Yantramanav', sans-serif; font-size: 0.8rem; font-weight: 400; color: var(--color-text-muted); line-height: 1.3; margin: 0; } /* Inline error text rendered adjacent to the activated action when `POST /api/payments` returns a 4xx/5xx (Req 9.9). Sits below the button on its own row so the row layout doesn't shift when the error mounts/unmounts. */ .settle-up-transfer__action-error { flex-basis: 100%; font-family: 'Yantramanav', sans-serif; font-size: 0.85rem; font-weight: 500; color: var(--color-error); line-height: 1.3; margin: 0; } /* -------------------------------------------------------------------------- Payment_Method_Hint sub-menu (Req 9.6) -------------------------------------------------------------------------- The Mark_As_Paid_Action opens a small popover offering the four Payment_Method_Hint values: Venmo, Cash, Zelle, Other — with Venmo highlighted as the recommended default. The selection is frontend-only (Req 9.7 — the value is NOT persisted on the payment record); the popover's job is to label the Activity_Feed copy. Geometry: anchored absolutely below the activated action button by the JS so we only style the popover surface here (not the position). The popover is hidden by default (`hidden` attribute or `display: none` set inline by JS); when shown it reads as a pill-rounded card with one option per row. -------------------------------------------------------------------------- */ .payment-method-menu { /* Anchor: the JS positions the popover (left/top/right) inline; we keep `position: absolute` so the popover sits above the row. */ position: absolute; z-index: 50; display: flex; flex-direction: column; gap: 0.25rem; min-width: 12rem; padding: 0.4rem; background-color: var(--color-surface); border-radius: 12px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2); /* Soft accent ring so the popover reads as the active focus on the view; matches the inset-ring idiom used elsewhere in the rebuild. */ outline: 1px solid rgba(248, 150, 255, 0.25); } /* One option row inside the popover. Bounding rect ≥ 1936 px² with no dimension below 32 px (Req 16.1) — the 44 px min-height clears the bound; the popover's min-width keeps each option at least 12 rem wide so the rect easily exceeds 1936 px². 8 px gap between adjacent options (Req 16.3) is supplied by the popover's `gap`. */ .payment-method-menu__option { display: inline-flex; align-items: center; justify-content: flex-start; min-height: 44px; padding: 0.55rem 0.85rem; border: none; border-radius: 8px; background-color: transparent; color: var(--color-text); font-family: 'Yantramanav', sans-serif; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.01em; cursor: pointer; text-align: left; width: 100%; transition: background-color 0.15s ease, color 0.15s ease; } .payment-method-menu__option:hover:not(:disabled) { background-color: rgba(248, 150, 255, 0.08); color: var(--color-text); } .payment-method-menu__option:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .payment-method-menu__option:disabled { opacity: 0.6; cursor: not-allowed; } /* Recommended treatment — applied to the `Venmo` option (Req 9.6). The pink accent fill flags it as the recommended default without disabling the other options visually. */ .payment-method-menu__option--recommended { background-color: var(--color-accent); color: var(--color-on-accent); font-weight: 700; } .payment-method-menu__option--recommended:hover:not(:disabled) { background-color: var(--color-accent-hover); color: var(--color-on-accent); } /* -------------------------------------------------------------------------- Payment_Ledger -------------------------------------------------------------------------- The chronological list of recorded payments; rendered as the section below the Settle_Up_View. Visual chassis updated to ride the `.cambry-card` surface treatment; only layout glue lives here. - .payments-ledger — the