/*
 * money map — application shell styling
 * -------------------------------------
 * Builds the base layout ON TOP of tokens.css. No raw colours or sizes here:
 * everything references a --mm-* token so light/dark and the design scale stay
 * in one place. This file styles the base.html shell only (header, main,
 * footer, primitives); feature chunks add their own scoped styles.
 */

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: hsl(var(--mm-bg));
  color: hsl(var(--mm-text));
  font-family: var(--mm-font-sans);
  font-size: var(--mm-text-base);
  line-height: var(--mm-leading-normal);
  font-feature-settings: "cv11", "ss01", "kern";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-bold);
  line-height: var(--mm-leading-tight);
  letter-spacing: var(--mm-tracking-tight);
  margin: 0 0 var(--mm-space-4);
}

p {
  margin: 0 0 var(--mm-space-4);
  max-width: 65ch;
}

a {
  color: hsl(var(--mm-accent));
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ---- Focus visibility (a11y — never removed) ---------------------- */
:focus-visible {
  outline: 2px solid hsl(var(--mm-ring));
  outline-offset: 2px;
  border-radius: var(--mm-radius-sm);
}

/* ---- Layout scaffolding ------------------------------------------- */
.mm-shell-header,
.mm-shell-footer {
  border-color: hsl(var(--mm-border));
  background-color: hsl(var(--mm-surface) / 0.6);
  backdrop-filter: saturate(1.4) blur(8px);
}

.mm-shell-header {
  border-bottom: var(--mm-border-width) solid hsl(var(--mm-border));
  position: sticky;
  top: 0;
  z-index: 10;
}

.mm-shell-footer {
  border-top: var(--mm-border-width) solid hsl(var(--mm-border));
  margin-top: auto;
}

.mm-container {
  width: 100%;
  max-width: var(--mm-content-width);
  margin-inline: auto;
  padding-inline: var(--mm-space-5);
}

.mm-shell-header .mm-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mm-space-4);
  min-height: 4rem;
}

main.mm-main {
  flex: 1;
  padding-block: var(--mm-space-8);
}

.mm-shell-footer .mm-container {
  padding-block: var(--mm-space-5);
  color: hsl(var(--mm-text-subtle));
  font-size: var(--mm-text-sm);
}

/* ---- Brand wordmark ----------------------------------------------- */
.mm-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15em;
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-bold);
  font-size: var(--mm-text-lg);
  letter-spacing: var(--mm-tracking-tight);
  color: hsl(var(--mm-text));
}

.mm-brand:hover {
  text-decoration: none;
}

.mm-brand-mark {
  color: hsl(var(--mm-accent));
}

/* ---- Buttons ------------------------------------------------------- */
.mm-btn {
  --_bg: var(--mm-accent);
  --_fg: var(--mm-accent-foreground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mm-space-2);
  min-height: 2.75rem; /* 44px touch target */
  padding: var(--mm-space-2) var(--mm-space-5);
  font-family: var(--mm-font-display);
  font-size: var(--mm-text-sm);
  font-weight: var(--mm-weight-medium);
  color: hsl(var(--_fg));
  background-color: hsl(var(--_bg));
  border: var(--mm-border-width) solid transparent;
  border-radius: var(--mm-radius-md);
  cursor: pointer;
  transition: background-color var(--mm-duration-fast) var(--mm-ease-out),
    transform var(--mm-duration-fast) var(--mm-ease-out);
}

.mm-btn:hover {
  text-decoration: none;
}

.mm-btn:active {
  transform: scale(0.97);
}

.mm-btn--secondary {
  --_bg: var(--mm-surface-raised);
  --_fg: var(--mm-text);
  border-color: hsl(var(--mm-border-strong));
}

/* Destructive affordance — a restrained danger ghost (not a filled alarm on
   every row). Danger is a state colour here, never a second brand accent. */
.mm-btn--danger {
  --_fg: var(--mm-danger);
  background-color: transparent;
  border-color: hsl(var(--mm-danger) / 0.45);
}

@media (hover: hover) and (pointer: fine) {
  .mm-btn:hover {
    background-color: hsl(var(--mm-accent-hover));
  }
  .mm-btn--secondary:hover {
    background-color: hsl(var(--mm-surface));
  }
  .mm-btn--danger:hover {
    background-color: hsl(var(--mm-danger) / 0.1);
    border-color: hsl(var(--mm-danger) / 0.6);
  }
}

/* Disabled/busy — suppressed opacity + blocked cursor so the button reads as
   inactive during the multi-second WebAuthn ceremony. The JS also sets
   aria-busy=true and swaps the label text to "Waiting for your device…". */
.mm-btn:disabled,
.mm-btn[aria-busy="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.mm-btn:disabled:active,
.mm-btn[aria-busy="true"]:active {
  transform: none;
}

/* ---- Card ---------------------------------------------------------- */
.mm-card {
  background-color: hsl(var(--mm-surface-raised));
  border: var(--mm-border-width) solid hsl(var(--mm-border));
  border-radius: var(--mm-radius-lg);
  padding: var(--mm-space-6);
  box-shadow: var(--mm-shadow-sm);
}

/* ---- Hero (the shell's one premium "moment") ---------------------- */
.mm-hero {
  display: grid;
  gap: var(--mm-space-6);
  padding-block: var(--mm-space-6) var(--mm-space-4);
}

.mm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--mm-space-2);
  width: fit-content;
  font-family: var(--mm-font-display);
  font-size: var(--mm-text-xs);
  font-weight: var(--mm-weight-semibold);
  letter-spacing: var(--mm-tracking-wide);
  text-transform: uppercase;
  color: hsl(var(--mm-text-muted));
}

.mm-eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background-color: hsl(var(--mm-accent));
  border-radius: var(--mm-radius-full);
}

.mm-hero h1 {
  font-size: var(--mm-text-4xl);
  max-width: 16ch;
}

/* Editorial italic emphasis (à la the matador reference craft) */
.mm-hero h1 em {
  font-family: var(--mm-font-serif);
  font-style: italic;
  font-weight: var(--mm-weight-normal);
  letter-spacing: 0;
  color: hsl(var(--mm-accent));
}

.mm-hero .mm-lede {
  font-size: var(--mm-text-lg);
  color: hsl(var(--mm-text-muted));
  max-width: 52ch;
}

.mm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mm-space-3);
}

/* ---- HTMX demo panel ---------------------------------------------- */
.mm-demo {
  margin-top: var(--mm-space-6);
  display: grid;
  gap: var(--mm-space-4);
}

.mm-demo h2 {
  font-size: var(--mm-text-xl);
  margin: 0;
}

.mm-demo-result {
  min-height: 3rem;
  display: flex;
  align-items: center;
  color: hsl(var(--mm-text-muted));
  font-size: var(--mm-text-sm);
}

.mm-pong {
  display: inline-flex;
  align-items: center;
  gap: var(--mm-space-2);
  padding: var(--mm-space-2) var(--mm-space-4);
  border-radius: var(--mm-radius-full);
  background-color: hsl(var(--mm-success) / 0.12);
  color: hsl(var(--mm-success));
  font-weight: var(--mm-weight-medium);
}

.mm-pong::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--mm-radius-full);
  background-color: hsl(var(--mm-success));
}

/* Enter animation — transform + opacity only (Emil) */
.mm-pong {
  animation: mm-fade-in var(--mm-duration-base) var(--mm-ease-out);
}

@keyframes mm-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- Theme toggle -------------------------------------------------- */
.mm-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem; /* 44px touch target */
  height: 2.75rem;
  padding: 0;
  border: var(--mm-border-width) solid hsl(var(--mm-border-strong));
  border-radius: var(--mm-radius-md);
  background-color: hsl(var(--mm-surface-raised));
  color: hsl(var(--mm-text));
  cursor: pointer;
  transition: background-color var(--mm-duration-fast) var(--mm-ease-out);
}

.mm-theme-toggle .mm-icon-dark {
  display: none;
}

.dark .mm-theme-toggle .mm-icon-light {
  display: none;
}

.dark .mm-theme-toggle .mm-icon-dark {
  display: inline;
}

@media (hover: hover) and (pointer: fine) {
  .mm-theme-toggle:hover {
    background-color: hsl(var(--mm-surface));
  }
}

/* ---- Responsive ---------------------------------------------------- */
@media (max-width: 640px) {
  .mm-hero h1 {
    font-size: var(--mm-text-3xl);
  }
}

/* ---- Buttons: full-width variant (auth forms) --------------------- */
.mm-btn--block {
  width: 100%;
}

/* ---- Auth pages (login / signup / verification / reset) [C11] ------ */
/* Structural + accessible defaults on the design tokens. A designer pass
   refines the expression; the markup underneath stays semantic. */
.mm-auth {
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
  padding-block: var(--mm-space-6);
}

.mm-auth-card {
  display: grid;
  gap: var(--mm-space-4);
}

.mm-auth-heading {
  font-size: var(--mm-text-2xl);
  margin: 0;
}

.mm-auth-sub {
  color: hsl(var(--mm-text-muted));
  margin: 0;
}

.mm-auth-alt,
.mm-auth-fineprint {
  margin: 0;
  font-size: var(--mm-text-sm);
}

.mm-auth-fineprint {
  color: hsl(var(--mm-text-subtle));
}

/* ---- Forms & fields ----------------------------------------------- */
.mm-form {
  display: grid;
  gap: var(--mm-space-4);
  margin: 0;
}

.mm-field {
  display: grid;
  gap: var(--mm-space-2);
}

.mm-label {
  font-family: var(--mm-font-display);
  font-size: var(--mm-text-sm);
  font-weight: var(--mm-weight-medium);
  color: hsl(var(--mm-text));
}

.mm-required {
  color: hsl(var(--mm-danger));
}

/* Style the widgets allauth renders (input / select) via the form scope.
   Exclude checkbox/radio so they keep native sizing; those get their own rule. */
.mm-form input:not([type=checkbox]):not([type=radio]),
.mm-form select,
.mm-form textarea {
  width: 100%;
  min-height: 2.75rem; /* 44px touch target */
  padding: var(--mm-space-2) var(--mm-space-3);
  font-family: var(--mm-font-sans);
  font-size: var(--mm-text-base);
  color: hsl(var(--mm-text));
  background-color: hsl(var(--mm-surface-raised));
  border: var(--mm-border-width) solid hsl(var(--mm-border-strong));
  border-radius: var(--mm-radius-md);
  transition: border-color var(--mm-duration-fast) var(--mm-ease-out),
    box-shadow var(--mm-duration-fast) var(--mm-ease-out);
}

/* Textareas grow vertically; keep a comfortable line rhythm and free resize. */
.mm-form textarea {
  min-height: 3.5rem;
  line-height: var(--mm-leading-snug);
  resize: vertical;
}

.mm-form input:not([type=checkbox]):not([type=radio])::placeholder,
.mm-form textarea::placeholder {
  color: hsl(var(--mm-text-subtle));
}

.mm-form input:not([type=checkbox]):not([type=radio]):focus-visible,
.mm-form select:focus-visible,
.mm-form textarea:focus-visible {
  outline: none;
  border-color: hsl(var(--mm-accent));
  box-shadow: 0 0 0 3px hsl(var(--mm-ring) / 0.28);
}

.mm-field--invalid input:not([type=checkbox]):not([type=radio]),
.mm-field--invalid select,
.mm-field--invalid textarea {
  border-color: hsl(var(--mm-danger));
}

/* Checkbox / radio — native widget, accented, inline with its label */
.mm-form input[type=checkbox],
.mm-form input[type=radio] {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  accent-color: hsl(var(--mm-accent));
  cursor: pointer;
}

.mm-field--checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--mm-space-3);
}

.mm-field--checkbox .mm-label {
  font-weight: var(--mm-weight-normal);
  cursor: pointer;
}

.mm-help {
  margin: 0;
  font-size: var(--mm-text-sm);
  color: hsl(var(--mm-text-subtle));
  max-width: none;
}

/* ---- Errors & messages -------------------------------------------- */
.mm-field-errors,
.mm-form-errors {
  margin: 0;
  padding: 0;
  list-style: none;
  color: hsl(var(--mm-danger));
  font-size: var(--mm-text-sm);
}

.mm-form-errors {
  padding: var(--mm-space-3) var(--mm-space-4);
  border: var(--mm-border-width) solid hsl(var(--mm-danger) / 0.4);
  border-radius: var(--mm-radius-md);
  background-color: hsl(var(--mm-danger) / 0.08);
}

.mm-form-error {
  margin: 0;
  max-width: none;
  color: hsl(var(--mm-danger));
}

.mm-auth-messages {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--mm-space-2);
}

.mm-msg {
  padding: var(--mm-space-3) var(--mm-space-4);
  border-radius: var(--mm-radius-md);
  font-size: var(--mm-text-sm);
  background-color: hsl(var(--mm-surface));
  border: var(--mm-border-width) solid hsl(var(--mm-border));
}

.mm-msg--error {
  color: hsl(var(--mm-danger));
  border-color: hsl(var(--mm-danger) / 0.4);
  background-color: hsl(var(--mm-danger) / 0.08);
}

.mm-msg--success {
  color: hsl(var(--mm-success-text));
  border-color: hsl(var(--mm-success) / 0.4);
  background-color: hsl(var(--mm-success) / 0.1);
}

/* ---- Session management (list + revoke) [C14] --------------------- */
/* Structural defaults on the design tokens; the markup reuses .mm-card /
   .mm-form / .mm-btn so a designer pass refines expression without touching it. */
.mm-sessions {
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
  padding-block: var(--mm-space-6);
  display: grid;
  gap: var(--mm-space-5);
}

.mm-sessions-head {
  display: grid;
  gap: var(--mm-space-2);
}

.mm-session-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--mm-space-3);
}

.mm-session {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mm-space-4);
  align-items: flex-start;
  justify-content: space-between;
  /* One calm entrance — transform + opacity only; reduced-motion disables it
     via the global guard. No stagger: a security surface stays crisp, not showy. */
  animation: mm-fade-in var(--mm-duration-base) var(--mm-ease-out) both;
}

/* The current session gets a subtle accent edge so it reads as "you are here". */
.mm-session--current {
  border-color: hsl(var(--mm-accent) / 0.5);
  box-shadow: inset 3px 0 0 0 hsl(var(--mm-accent));
}

.mm-session-info {
  display: grid;
  gap: var(--mm-space-3);
  min-width: 0;
  flex: 1 1 18rem;
}

.mm-session-device {
  margin: 0;
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-medium);
  color: hsl(var(--mm-text));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mm-space-3);
  word-break: break-word;
}

/* The device string is the row's primary label — carry the emphasis here so the
   status/badge that precedes it reads as a secondary state marker. */
.mm-session-name {
  min-width: 0;
  word-break: break-word;
}

/* Liveness marker for non-current sessions — a small success dot, not a loud
   pill. Uses the semantic success state colour, distinct from the brand accent
   that flags the current device. */
.mm-session-status {
  display: inline-flex;
  align-items: center;
  gap: var(--mm-space-2);
  flex-shrink: 0;
  font-family: var(--mm-font-sans);
  font-size: var(--mm-text-xs);
  font-weight: var(--mm-weight-medium);
  letter-spacing: var(--mm-tracking-wide);
  text-transform: uppercase;
  color: hsl(var(--mm-text-muted));
}

.mm-session-dot {
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
  border-radius: var(--mm-radius-full);
  background-color: hsl(var(--mm-success));
}

.mm-session-badge {
  font-family: var(--mm-font-sans);
  font-size: var(--mm-text-xs);
  font-weight: var(--mm-weight-medium);
  letter-spacing: var(--mm-tracking-wide);
  text-transform: uppercase;
  color: hsl(var(--mm-accent-foreground));
  background-color: hsl(var(--mm-accent));
  padding: 0.125rem var(--mm-space-2);
  border-radius: var(--mm-radius-full);
}

.mm-session-meta {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--mm-space-2) var(--mm-space-4);
}

.mm-session-meta div {
  display: grid;
  gap: 0.125rem;
}

.mm-session-meta dt {
  font-size: var(--mm-text-xs);
  letter-spacing: var(--mm-tracking-wide);
  text-transform: uppercase;
  color: hsl(var(--mm-text-subtle));
}

.mm-session-meta dd {
  margin: 0;
  font-size: var(--mm-text-sm);
  color: hsl(var(--mm-text));
  word-break: break-word;
}

.mm-session-action {
  flex: 0 0 auto;
}

/* Per-session revoke form is a bare button; drop the grid gap the .mm-form
   scope would otherwise add. */
.mm-session-action .mm-form {
  gap: 0;
}

.mm-sessions-bulk {
  margin-top: var(--mm-space-2);
  display: grid;
  gap: var(--mm-space-2);
}

.mm-sessions-bulk-note {
  margin: 0;
  text-align: center;
  font-size: var(--mm-text-sm);
  color: hsl(var(--mm-text-subtle));
}

/* Empty state — a real card, not a bare line; sensible when no sessions exist. */
.mm-session-empty {
  display: grid;
  gap: var(--mm-space-2);
  text-align: center;
}

.mm-session-empty-title {
  margin: 0;
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-medium);
  color: hsl(var(--mm-text));
}

.mm-session-empty .mm-auth-sub {
  margin-inline: auto;
}

/* Narrow screens: give the revoke control a full-width tap target so it never
   crowds the session metadata. */
@media (max-width: 560px) {
  .mm-session-action,
  .mm-session-action .mm-btn {
    width: 100%;
  }
}

/* ---- MFA / TOTP UI [C13] ------------------------------------------ */
/* .mm-code — monospace block for setup keys, provisioning URIs, and
   recovery codes. user-select:all lets a single click select the full
   string for copy; the tinted surface makes it visually distinct from
   prose. Works in both :root (light) and .dark via the semantic tokens. */
.mm-code {
  display: block;
  font-family: var(--mm-font-mono);
  font-size: var(--mm-text-sm);
  line-height: var(--mm-leading-snug);
  color: hsl(var(--mm-text));
  background-color: hsl(var(--mm-surface));
  border: var(--mm-border-width) solid hsl(var(--mm-border-strong));
  border-radius: var(--mm-radius-md);
  padding: var(--mm-space-2) var(--mm-space-3);
  word-break: break-all;
  user-select: all;
  -webkit-user-select: all;
}

/* Long otpauth:// URIs must wrap on narrow viewports without clipping
   the auth card. overflow-wrap:anywhere is the strongest safe wrap hint. */
.mm-code--wrap {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Recovery code list — two-column grid on wider auth cards, single
   column on narrow viewports. role="list" on the <ul> is preserved. */
.mm-recovery-codes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--mm-space-2);
}

/* Ensure each code fills its grid cell */
.mm-recovery-codes .mm-code {
  width: 100%;
}

/* ---- Status badges ------------------------------------------------- */
/* Inline pill used in invite list and other status displays. */
.mm-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem var(--mm-space-2);
  font-family: var(--mm-font-sans);
  font-size: var(--mm-text-xs);
  font-weight: var(--mm-weight-medium);
  letter-spacing: var(--mm-tracking-wide);
  text-transform: uppercase;
  border-radius: var(--mm-radius-full);
  border: var(--mm-border-width) solid transparent;
  background-color: hsl(var(--mm-surface));
  color: hsl(var(--mm-text-muted));
}

.mm-badge--success {
  color: hsl(var(--mm-success-text));
  background-color: hsl(var(--mm-success) / 0.1);
  border-color: hsl(var(--mm-success) / 0.35);
}

.mm-badge--danger {
  color: hsl(var(--mm-danger));
  background-color: hsl(var(--mm-danger) / 0.08);
  border-color: hsl(var(--mm-danger) / 0.35);
}

.mm-badge--warning {
  color: hsl(var(--mm-warning-text));
  background-color: hsl(var(--mm-warning) / 0.1);
  border-color: hsl(var(--mm-warning) / 0.35);
}

.mm-badge--active {
  color: hsl(var(--mm-accent-text));
  background-color: hsl(var(--mm-accent) / 0.1);
  border-color: hsl(var(--mm-accent) / 0.35);
}

/* ---- Invite pages (list / create / accept) [C21] ------------------ */
.mm-invites {
  width: 100%;
  max-width: 52rem;
  margin-inline: auto;
  padding-block: var(--mm-space-6);
  display: grid;
  gap: var(--mm-space-5);
}

.mm-invites-head {
  display: grid;
  gap: var(--mm-space-2);
}

.mm-invite-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--mm-space-3);
}

.mm-invite {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mm-space-4);
  align-items: flex-start;
  justify-content: space-between;
}

.mm-invite-info {
  display: grid;
  gap: var(--mm-space-3);
  min-width: 0;
  flex: 1 1 18rem;
}

.mm-invite-email {
  margin: 0;
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-medium);
  color: hsl(var(--mm-text));
  word-break: break-word;
}

.mm-invite-meta {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--mm-space-2) var(--mm-space-4);
}

.mm-invite-meta div {
  display: grid;
  gap: 0.125rem;
}

.mm-invite-meta dt {
  font-size: var(--mm-text-xs);
  letter-spacing: var(--mm-tracking-wide);
  text-transform: uppercase;
  color: hsl(var(--mm-text-subtle));
}

.mm-invite-meta dd {
  margin: 0;
  font-size: var(--mm-text-sm);
  color: hsl(var(--mm-text));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mm-space-2);
  word-break: break-word;
}

.mm-invite-redeemer {
  font-size: var(--mm-text-xs);
  color: hsl(var(--mm-text-subtle));
}

.mm-invite-action {
  flex: 0 0 auto;
}

.mm-invite-action .mm-form {
  gap: 0;
}

.mm-invite-empty {
  display: grid;
  gap: var(--mm-space-2);
  text-align: center;
}

.mm-invite-empty-title {
  margin: 0;
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-medium);
  color: hsl(var(--mm-text));
}

.mm-invite-empty .mm-auth-sub {
  margin-inline: auto;
}

/* Invite create form */
.mm-invite-create {
  width: 100%;
  max-width: 36rem;
  margin-inline: auto;
  padding-block: var(--mm-space-6);
  display: grid;
  gap: var(--mm-space-5);
}

.mm-invite-form-card {
  display: grid;
  gap: var(--mm-space-4);
}

/* Invite accept page */
.mm-invite-accept {
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
  padding-block: var(--mm-space-6);
}

.mm-invite-accept-card {
  display: grid;
  gap: var(--mm-space-4);
}

.mm-invite-accept-card--error {
  border-color: hsl(var(--mm-danger) / 0.4);
}

.mm-invite-expiry {
  font-size: var(--mm-text-sm);
}

.mm-invite-accept-form {
  margin-top: var(--mm-space-2);
}

.mm-invite-note {
  font-size: var(--mm-text-sm);
  border-top: var(--mm-border-width) solid hsl(var(--mm-border));
  padding-top: var(--mm-space-3);
}

@media (max-width: 560px) {
  .mm-invite-action,
  .mm-invite-action .mm-btn {
    width: 100%;
  }
}

/* ---- Income-source list (C28) -------------------------------------- */
.mm-income-sources {
  width: 100%;
  max-width: 52rem;
  margin-inline: auto;
  padding-block: var(--mm-space-6);
  display: grid;
  gap: var(--mm-space-5);
}

.mm-income-sources-head {
  display: grid;
  gap: var(--mm-space-2);
}

.mm-income-source-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--mm-space-3);
}

.mm-income-source {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mm-space-4);
  align-items: flex-start;
  justify-content: space-between;
}

.mm-income-source-info {
  display: grid;
  gap: var(--mm-space-3);
  min-width: 0;
  flex: 1 1 18rem;
}

.mm-income-source-name {
  margin: 0;
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-medium);
  color: hsl(var(--mm-text));
  word-break: break-word;
}

.mm-income-source-meta {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--mm-space-2) var(--mm-space-4);
}

.mm-income-source-meta div {
  display: grid;
  gap: 0.125rem;
}

.mm-income-source-meta dt {
  font-size: var(--mm-text-xs);
  letter-spacing: var(--mm-tracking-wide);
  text-transform: uppercase;
  color: hsl(var(--mm-text-subtle));
}

.mm-income-source-meta dd {
  margin: 0;
  font-size: var(--mm-text-sm);
  color: hsl(var(--mm-text));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mm-space-2);
  word-break: break-word;
}

.mm-income-source-action {
  flex: 0 0 auto;
}

.mm-income-source-empty {
  display: grid;
  gap: var(--mm-space-2);
  text-align: center;
}

.mm-income-source-empty-title {
  margin: 0;
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-medium);
  color: hsl(var(--mm-text));
}

.mm-income-source-empty .mm-auth-sub {
  margin-inline: auto;
}

/* ---- New paycheck initiation (C28) --------------------------------- */
.mm-new-paycheck {
  width: 100%;
  max-width: 36rem;
  margin-inline: auto;
  padding-block: var(--mm-space-6);
  display: grid;
  gap: var(--mm-space-5);
}

.mm-new-paycheck-head {
  display: grid;
  gap: var(--mm-space-2);
}

.mm-new-paycheck-prefill {
  display: grid;
  gap: var(--mm-space-2);
  background-color: hsl(var(--mm-accent) / 0.08);
  border-color: hsl(var(--mm-accent) / 0.35);
}

.mm-new-paycheck-prefill-label {
  margin: 0;
  font-size: var(--mm-text-sm);
  color: hsl(var(--mm-text-subtle));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mm-space-2);
}

.mm-new-paycheck-prefill-name {
  margin: 0;
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-medium);
  color: hsl(var(--mm-text));
}

.mm-new-paycheck-noprefill {
  border-style: dashed;
}

.mm-new-paycheck-form-card {
  display: grid;
  gap: var(--mm-space-4);
}

@media (max-width: 560px) {
  .mm-income-source-action,
  .mm-income-source-action .mm-btn {
    width: 100%;
  }
}

/* ---- Utilities ----------------------------------------------------- */
/* Muted inline text — the "not set / none / —" placeholder voice. Used by the
   income-source list and the finalization review; a tinted subtle ink, never a
   flat gray. */
.mm-text-muted {
  color: hsl(var(--mm-text-subtle));
}

/* ---- Finalization review screen (C33) ------------------------------ */
/* The read-only pre-finalize gate. Blocking errors (must-fix) and non-blocking
   warnings (surplus/overdraw) are given categorically distinct treatment —
   danger vs warning tokens — so the two can never be confused. Data-dense but
   breathable; one accent, tinted feedback surfaces, soft thin-bordered cards. */
.mm-review {
  width: 100%;
  max-width: 52rem;
  margin-inline: auto;
  padding-block: var(--mm-space-6);
  display: grid;
  gap: var(--mm-space-5);
}

.mm-review-head {
  display: grid;
  gap: var(--mm-space-2);
}

.mm-review-title {
  font-size: var(--mm-text-2xl);
  margin: 0;
}

/* ---- Verdict banner — the primary read (ready vs blocked) ---------- */
.mm-review-verdict {
  display: flex;
  align-items: flex-start;
  gap: var(--mm-space-4);
  padding: var(--mm-space-4) var(--mm-space-5);
  border: var(--mm-border-width) solid hsl(var(--mm-border));
  border-radius: var(--mm-radius-lg);
  /* One calm entrance — transform + opacity only; the global reduced-motion
     guard disables it. A money surface stays crisp, not showy. */
  animation: mm-fade-in var(--mm-duration-base) var(--mm-ease-out) both;
}

.mm-review-verdict--ready {
  border-color: hsl(var(--mm-success) / 0.4);
  background-color: hsl(var(--mm-success) / 0.08);
}

.mm-review-verdict--blocked {
  border-color: hsl(var(--mm-danger) / 0.45);
  background-color: hsl(var(--mm-danger) / 0.08);
}

.mm-review-verdict-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: var(--mm-radius-full);
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-bold);
  line-height: 1;
  color: hsl(var(--mm-accent-foreground));
}

.mm-review-verdict--ready .mm-review-verdict-mark {
  background-color: hsl(var(--mm-success));
}

.mm-review-verdict--blocked .mm-review-verdict-mark {
  background-color: hsl(var(--mm-danger));
}

.mm-review-verdict-body {
  display: grid;
  gap: 0.125rem;
}

.mm-review-verdict-title {
  margin: 0;
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-semibold);
  color: hsl(var(--mm-text));
}

.mm-review-verdict-sub {
  margin: 0;
  font-size: var(--mm-text-sm);
  color: hsl(var(--mm-text-muted));
}

/* ---- Error / warning panels — categorically distinct surfaces ------ */
.mm-review-panel {
  display: grid;
  gap: var(--mm-space-3);
  padding: var(--mm-space-5);
  border: var(--mm-border-width) solid hsl(var(--mm-border));
  border-radius: var(--mm-radius-lg);
}

.mm-review-panel--error {
  border-color: hsl(var(--mm-danger) / 0.4);
  background-color: hsl(var(--mm-danger) / 0.06);
}

.mm-review-panel--warning {
  border-color: hsl(var(--mm-warning) / 0.4);
  background-color: hsl(var(--mm-warning) / 0.08);
}

.mm-review-panel-title {
  margin: 0;
  font-size: var(--mm-text-lg);
}

.mm-review-panel--error .mm-review-panel-title {
  color: hsl(var(--mm-danger));
}

.mm-review-panel-note {
  margin: 0;
  font-size: var(--mm-text-sm);
  color: hsl(var(--mm-text-muted));
}

.mm-review-issues,
.mm-review-warnings {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--mm-space-2);
}

.mm-review-issue {
  position: relative;
  padding-left: var(--mm-space-5);
  font-size: var(--mm-text-sm);
  color: hsl(var(--mm-text));
}

/* Leading marker instead of a default disc — a small danger dot carries the
   must-fix meaning without a loud fill on every row. */
.mm-review-issue::before {
  content: "";
  position: absolute;
  left: var(--mm-space-2);
  top: 0.5em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: var(--mm-radius-full);
  background-color: hsl(var(--mm-danger));
}

.mm-review-warning {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--mm-space-2) var(--mm-space-3);
  font-size: var(--mm-text-sm);
  color: hsl(var(--mm-text));
}

.mm-review-warning-amount {
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: hsl(var(--mm-text));
}

.mm-review-warning-text {
  flex: 1 1 16rem;
  color: hsl(var(--mm-text-muted));
}

/* ---- Section headings --------------------------------------------- */
.mm-review-section-title {
  font-size: var(--mm-text-lg);
  margin: 0 0 var(--mm-space-3);
}

/* ---- Totals -------------------------------------------------------- */
.mm-review-totals {
  display: grid;
  gap: var(--mm-space-4);
}

.mm-review-totals-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--mm-space-4);
}

.mm-review-total {
  display: grid;
  gap: 0.25rem;
}

.mm-review-total dt {
  font-size: var(--mm-text-xs);
  letter-spacing: var(--mm-tracking-wide);
  text-transform: uppercase;
  color: hsl(var(--mm-text-subtle));
}

.mm-review-total-value {
  margin: 0;
  font-family: var(--mm-font-display);
  font-size: var(--mm-text-lg);
  font-weight: var(--mm-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: hsl(var(--mm-text));
}

.mm-review-total--surplus .mm-review-total-value {
  font-weight: var(--mm-weight-bold);
  color: hsl(var(--mm-success));
}

.mm-review-total--overdraw .mm-review-total-value {
  color: hsl(var(--mm-danger));
}

.mm-review-hint {
  margin: 0;
  font-size: var(--mm-text-sm);
  color: hsl(var(--mm-text-subtle));
}

/* ---- Per-line detail ---------------------------------------------- */
.mm-review-line-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--mm-space-3);
}

.mm-review-line {
  display: grid;
  gap: var(--mm-space-3);
  padding: var(--mm-space-5);
}

/* A blocked line gets a subtle danger edge so it reads as "this one needs work"
   at a glance, echoing the current-session accent-edge pattern. */
.mm-review-line--blocked {
  border-color: hsl(var(--mm-danger) / 0.4);
  box-shadow: inset 3px 0 0 0 hsl(var(--mm-danger));
}

.mm-review-line-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mm-space-3);
}

.mm-review-line-name {
  margin: 0;
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-medium);
  color: hsl(var(--mm-text));
  word-break: break-word;
}

.mm-review-line-meta {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--mm-space-2) var(--mm-space-4);
}

.mm-review-line-meta div {
  display: grid;
  gap: 0.125rem;
}

.mm-review-line-meta dt {
  font-size: var(--mm-text-xs);
  letter-spacing: var(--mm-tracking-wide);
  text-transform: uppercase;
  color: hsl(var(--mm-text-subtle));
}

.mm-review-line-meta dd {
  margin: 0;
  font-size: var(--mm-text-sm);
  font-variant-numeric: tabular-nums;
  color: hsl(var(--mm-text));
}

.mm-review-line-notes {
  margin: 0;
  max-width: none;
  padding: var(--mm-space-3) var(--mm-space-4);
  font-size: var(--mm-text-sm);
  color: hsl(var(--mm-text-muted));
  background-color: hsl(var(--mm-surface));
  border-radius: var(--mm-radius-md);
  word-break: break-word;
}

.mm-review-line-notes-label {
  display: inline;
  margin-right: var(--mm-space-2);
  font-family: var(--mm-font-display);
  font-size: var(--mm-text-xs);
  font-weight: var(--mm-weight-semibold);
  letter-spacing: var(--mm-tracking-wide);
  text-transform: uppercase;
  color: hsl(var(--mm-text-subtle));
}

.mm-review-line-flag {
  display: grid;
  gap: var(--mm-space-2);
  padding: var(--mm-space-3) var(--mm-space-4);
  border-radius: var(--mm-radius-md);
  background-color: hsl(var(--mm-danger) / 0.06);
  border: var(--mm-border-width) solid hsl(var(--mm-danger) / 0.3);
}

.mm-review-line-flag-label {
  margin: 0;
  font-family: var(--mm-font-display);
  font-size: var(--mm-text-xs);
  font-weight: var(--mm-weight-semibold);
  letter-spacing: var(--mm-tracking-wide);
  text-transform: uppercase;
  color: hsl(var(--mm-danger));
}

.mm-review-line-issues {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--mm-space-2);
}

.mm-review-empty {
  display: grid;
  gap: var(--mm-space-2);
  text-align: center;
}

.mm-review-empty-title {
  margin: 0;
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-medium);
  color: hsl(var(--mm-text));
}


/* ---- Edit finalized paycheck (C35) --------------------------------- */
.mm-edit-paycheck {
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
  padding-block: var(--mm-space-6);
  display: grid;
  gap: var(--mm-space-5);
}

.mm-edit-paycheck-head {
  display: grid;
  gap: var(--mm-space-2);
}

/* Money figures — ALWAYS high-contrast ink (never a tinted state colour), so text on
   colour never dips under WCAG AA 4.5:1 in either theme. Tabular numerals keep columns
   aligned. State (surplus/overdraw) is carried by an adjacent badge label, not by tinting
   the number. */
.mm-figure {
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: hsl(var(--mm-text));
}

.mm-figure--sm {
  font-size: var(--mm-text-sm);
  font-weight: var(--mm-weight-medium);
}

.mm-edit-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mm-space-6);
  align-items: center;
}

.mm-edit-summary-item {
  display: grid;
  gap: var(--mm-space-2);
}

.mm-edit-summary-label {
  margin: 0;
  font-size: var(--mm-text-xs);
  letter-spacing: var(--mm-tracking-wide);
  text-transform: uppercase;
  color: hsl(var(--mm-text-subtle));
}

.mm-edit-summary-item dd {
  margin: 0;
  font-size: var(--mm-text-lg);
}

.mm-edit-form {
  gap: var(--mm-space-5);
}

/* Reset native fieldset chrome — the design language uses tokens, not the UA border. */
.mm-edit-lines,
.mm-edit-line {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0; /* allow flex/grid children to shrink inside a fieldset */
}

.mm-edit-lines {
  display: grid;
  gap: var(--mm-space-3);
}

.mm-edit-lines-legend,
.mm-edit-history-title {
  font-family: var(--mm-font-display);
  font-size: var(--mm-text-lg);
  font-weight: var(--mm-weight-semibold);
  color: hsl(var(--mm-text));
  padding: 0;
  margin: 0 0 var(--mm-space-2);
}

.mm-edit-line {
  display: grid;
  gap: var(--mm-space-3);
  padding: var(--mm-space-4);
  background-color: hsl(var(--mm-surface-raised));
  border: var(--mm-border-width) solid hsl(var(--mm-border));
  border-radius: var(--mm-radius-lg);
  box-shadow: var(--mm-shadow-sm);
}

/* Invalid line — a restrained danger edge, matching the current-session accent-edge idiom. */
.mm-edit-line--invalid {
  border-color: hsl(var(--mm-danger) / 0.5);
  box-shadow: inset 3px 0 0 0 hsl(var(--mm-danger));
}

.mm-edit-line-label {
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-semibold);
  color: hsl(var(--mm-text));
  padding: 0;
}

.mm-edit-line-planned {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--mm-space-2);
  font-size: var(--mm-text-xs);
  letter-spacing: var(--mm-tracking-wide);
  text-transform: uppercase;
  color: hsl(var(--mm-text-subtle));
}

/* Status + actual side by side on wide screens; the line note spans the full width below. */
.mm-edit-line-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--mm-space-4);
}

.mm-edit-line-note {
  grid-column: 1 / -1;
}

/* Per-line field grid supplies its own gap; drop the mm-form scope's row gap here. */
.mm-edit-line .mm-field {
  gap: var(--mm-space-2);
}

.mm-edit-history {
  display: grid;
  gap: var(--mm-space-4);
}

.mm-edit-history-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--mm-space-4);
}

.mm-edit-history-item {
  display: grid;
  gap: var(--mm-space-2);
  padding-bottom: var(--mm-space-4);
  border-bottom: var(--mm-border-width) solid hsl(var(--mm-border));
}

.mm-edit-history-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.mm-edit-history-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mm-space-3);
  font-size: var(--mm-text-sm);
  color: hsl(var(--mm-text-muted));
}

.mm-edit-history-actor {
  color: hsl(var(--mm-text-subtle));
}

.mm-edit-history-note {
  margin: 0;
  color: hsl(var(--mm-text));
  max-width: none;
}

/* ---- Reduced motion (mandatory) ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .mm-btn:active {
    transform: none;
  }
}

/* ---- Buttons: small variant (line card actions) ------------------- */
.mm-btn--sm {
  min-height: 2rem;
  padding: var(--mm-space-1) var(--mm-space-3);
  font-size: var(--mm-text-sm);
}

/* ---- Extra message variants (Django messages framework) ----------- */
.mm-msg--info {
  color: hsl(var(--mm-text));
  border-color: hsl(var(--mm-border-strong));
}

.mm-msg--warning {
  color: hsl(var(--mm-warning-text));
  border-color: hsl(var(--mm-warning) / 0.4);
  background-color: hsl(var(--mm-warning) / 0.08);
}

/* ---- Utility text colours ---------------------------------------- */
.mm-text-danger {
  color: hsl(var(--mm-danger));
}

.mm-text-success {
  color: hsl(var(--mm-success-text));
}

/* ---- HTMX loading indicator --------------------------------------- */
/* HTMX sets .htmx-request on the indicator element while the request
   is in flight.  We default to opacity:0 + pointer-events:none and
   transition to visible so readers receive a polite "Saving…" hint. */
.htmx-indicator {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mm-duration-base) var(--mm-ease-out);
}

.htmx-request .htmx-indicator,
.htmx-indicator.htmx-request {
  opacity: 1;
  pointer-events: auto;
}

/* ---- Paycheck draft list [C29] ------------------------------------ */
.mm-drafts {
  width: 100%;
  max-width: 52rem;
  margin-inline: auto;
  padding-block: var(--mm-space-6);
  display: grid;
  gap: var(--mm-space-5);
}

/* ---- Paycheck draft editor [C29] ---------------------------------- */
.mm-draft {
  width: 100%;
  max-width: 52rem;
  margin-inline: auto;
  padding-block: var(--mm-space-6);
  display: grid;
  gap: var(--mm-space-6);
}

.mm-draft-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mm-space-2);
}

/* Contextual headings within cards and sections */
.mm-card-heading {
  margin: 0 0 var(--mm-space-4);
  font-family: var(--mm-font-display);
  font-size: var(--mm-text-lg);
  font-weight: var(--mm-weight-semibold);
  color: hsl(var(--mm-text));
}

.mm-section-heading {
  margin: 0 0 var(--mm-space-4);
  font-family: var(--mm-font-display);
  font-size: var(--mm-text-xl);
  font-weight: var(--mm-weight-semibold);
  color: hsl(var(--mm-text));
}

.mm-section-subheading {
  margin: var(--mm-space-4) 0 var(--mm-space-2);
  font-family: var(--mm-font-display);
  font-size: var(--mm-text-sm);
  font-weight: var(--mm-weight-semibold);
  letter-spacing: var(--mm-tracking-wide);
  text-transform: uppercase;
  color: hsl(var(--mm-text-muted));
}

.mm-draft-section {
  display: grid;
  gap: var(--mm-space-4);
}

/* Autosave status indicator */
.mm-autosave-status {
  display: flex;
  align-items: center;
  gap: var(--mm-space-2);
  font-size: var(--mm-text-sm);
  min-height: 1.5rem;
}

.mm-autosave-idle {
  color: hsl(var(--mm-text-subtle));
}

.mm-autosave-saved {
  color: hsl(var(--mm-success-text));
}

.mm-autosave-error {
  color: hsl(var(--mm-danger));
}

.mm-autosave-saving {
  color: hsl(var(--mm-text-muted));
  font-style: italic;
}

/* ---- Allocation lines list --------------------------------------- */
.mm-lines-list {
  display: grid;
  gap: var(--mm-space-3);
}

/* Add-line card — slightly less visual weight than the editor card */
.mm-add-line-card {
  border-style: dashed;
}

/* ---- Individual line card --------------------------------------- */
.mm-line-card {
  display: grid;
  gap: var(--mm-space-3);
  padding: var(--mm-space-4);
}

.mm-line-form {
  gap: var(--mm-space-3);
}

/* Inline field grid — compact row layout for line editing */
.mm-line-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mm-space-3);
}

.mm-field--inline {
  flex: 1 1 9rem;
  min-width: 0;
}

.mm-field--wide {
  flex: 2 1 18rem;
}

/* Explicit widget classes used in hand-rolled line fields */
.mm-input {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--mm-space-2) var(--mm-space-3);
  font-family: var(--mm-font-sans);
  font-size: var(--mm-text-base);
  color: hsl(var(--mm-text));
  background-color: hsl(var(--mm-surface-raised));
  border: var(--mm-border-width) solid hsl(var(--mm-border-strong));
  border-radius: var(--mm-radius-md);
  transition: border-color var(--mm-duration-fast) var(--mm-ease-out),
    box-shadow var(--mm-duration-fast) var(--mm-ease-out);
}

.mm-input::placeholder {
  color: hsl(var(--mm-text-subtle));
}

.mm-input:focus-visible {
  outline: none;
  border-color: hsl(var(--mm-accent));
  box-shadow: 0 0 0 3px hsl(var(--mm-ring) / 0.28);
}

.mm-field--invalid .mm-input {
  border-color: hsl(var(--mm-danger));
}

.mm-select {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--mm-space-2) var(--mm-space-3);
  font-family: var(--mm-font-sans);
  font-size: var(--mm-text-base);
  color: hsl(var(--mm-text));
  background-color: hsl(var(--mm-surface-raised));
  border: var(--mm-border-width) solid hsl(var(--mm-border-strong));
  border-radius: var(--mm-radius-md);
  cursor: pointer;
  transition: border-color var(--mm-duration-fast) var(--mm-ease-out),
    box-shadow var(--mm-duration-fast) var(--mm-ease-out);
}

.mm-select:focus-visible {
  outline: none;
  border-color: hsl(var(--mm-accent));
  box-shadow: 0 0 0 3px hsl(var(--mm-ring) / 0.28);
}

.mm-field--invalid .mm-select {
  border-color: hsl(var(--mm-danger));
}

.mm-line-actions {
  display: flex;
  gap: var(--mm-space-2);
}

.mm-line-delete-form {
  display: flex;
  align-items: center;
}

/* Read-only derived values row */
.mm-line-derived {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mm-space-4);
  padding-top: var(--mm-space-2);
  border-top: var(--mm-border-width) solid hsl(var(--mm-border));
  font-size: var(--mm-text-sm);
}

.mm-line-derived-item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.mm-line-derived-item .mm-label {
  font-size: var(--mm-text-xs);
  letter-spacing: var(--mm-tracking-wide);
  text-transform: uppercase;
  color: hsl(var(--mm-text-subtle));
}

/* ---- Allocation preview panel [C29] ------------------------------- */
.mm-allocation-preview {
  display: grid;
  gap: var(--mm-space-4);
}

.mm-allocation-preview--error {
  border-color: hsl(var(--mm-danger) / 0.4);
}

/* Generic error text (not in a field context) */
.mm-error {
  color: hsl(var(--mm-danger));
  font-size: var(--mm-text-sm);
  margin: 0;
}

.mm-alloc-summary {
  background-color: hsl(var(--mm-surface));
  border-radius: var(--mm-radius-md);
  padding: var(--mm-space-3);
}

.mm-alloc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--mm-space-2);
}

.mm-alloc-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mm-space-2);
  padding: var(--mm-space-2) var(--mm-space-3);
  background-color: hsl(var(--mm-surface));
  border-radius: var(--mm-radius-md);
  font-size: var(--mm-text-sm);
}

.mm-alloc-label {
  flex: 1 1 auto;
  font-weight: var(--mm-weight-medium);
  color: hsl(var(--mm-text));
}

.mm-alloc-kind {
  flex-shrink: 0;
}

.mm-alloc-pct {
  flex-shrink: 0;
  font-size: var(--mm-text-xs);
  font-weight: var(--mm-weight-medium);
  color: hsl(var(--mm-text-muted));
  min-width: 3rem;
  text-align: right;
}

.mm-alloc-amount {
  flex-shrink: 0;
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-semibold);
  color: hsl(var(--mm-text));
  min-width: 5rem;
  text-align: right;
}