/* Readable layer (UI cleanup PR 1, 2026-10-30; proposal:
   docs/ui-audit/2026-10/UI-CLEANUP-PROPOSAL.md).

   Loaded after the layout sheets and before polish.css. It adds the type scale
   (12 px floor, 14 px body on settings-style pages), raises the dim/faint text
   colours so help text is readable (ratios in the proposal, all >= 5.2:1 on
   every surface), and provides three shared patterns the page PRs use:
   status chips, the "Advanced" disclosure and the page-level save bar.
   Visual only: no selector here hides, moves or removes a control. */

.mx-next {
  --mx-fs-caption: 12px;
  --mx-fs-label: 13px;
  --mx-fs-body: 14px;
  --mx-fs-section: 16px;
  --mx-fs-title: 22px;
  --mx-lh-caption: 18px;
  --mx-lh-body: 22px;
  --mx-space-card: 20px;
  --mx-space-gap: 16px;
  --mx-row-h: 48px;
  /* #9198a1 / #848d97 were 5.9 / 5.1:1 on surface, but at 9.5 px they read as
     disabled. One step lighter keeps the hierarchy and passes at any size. */
  --mx-dim: #b7bfc8;
  --mx-faint: #9198a1;
}

/* Help and explanation text: 12 px, dim (was 9.5 px). */
.mx-next :is(.mx-help, .mx-hint, .mx-callout p) {
  font-size: var(--mx-fs-caption);
  line-height: var(--mx-lh-caption);
  color: var(--mx-dim);
}

/* Settings-style pages read at 14 px body. */
.mx-next .mx-page { font-size: var(--mx-fs-body); line-height: var(--mx-lh-body); }
.mx-next .mx-page h1 { font-size: var(--mx-fs-title); }

/* IDs in prose were painted near the background (1.4:1). */
.mx-next .mx-page code { color: var(--mx-dim); font-size: var(--mx-fs-caption); }

/* Status chips: tinted background, leading dot, AA text (7.0 / 7.0 / 5.8 / 6.9 / 8.2:1). */
.mx-next .mx-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: 999px;
  font-size: var(--mx-fs-caption); line-height: 20px; font-weight: 500; white-space: nowrap;
  color: var(--mx-dim); background: var(--mx-panel-2);
}
.mx-next .mx-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mx-next .mx-status--ok { color: #56d364; background: rgba(63, 185, 80, .15); }
.mx-next .mx-status--warn { color: #e3b341; background: rgba(210, 153, 34, .16); }
.mx-next .mx-status--danger { color: #ff7b72; background: rgba(248, 81, 73, .15); }
.mx-next .mx-status--info { color: #79c0ff; background: rgba(88, 166, 255, .15); }

/* "Advanced" disclosure: closed by default, says what is inside. */
.mx-next details.mx-advanced { border-top: 1px dashed var(--mx-line-strong); margin-top: 16px; padding-top: 12px; }
.mx-next details.mx-advanced > summary {
  cursor: pointer; list-style: none;
  color: var(--mx-dim); font-size: var(--mx-fs-label); font-weight: 600;
}
.mx-next details.mx-advanced > summary::-webkit-details-marker { display: none; }
.mx-next details.mx-advanced > summary::before { content: "▸ "; }
.mx-next details.mx-advanced[open] > summary::before { content: "▾ "; }
.mx-next details.mx-advanced > summary .mx-advanced__what { font-weight: 400; color: var(--mx-faint); }
.mx-next details.mx-advanced > .mx-advanced__body { margin-top: 12px; display: grid; gap: 12px; }

/* Page-level save bar: the page's only primary button, shown when dirty. */
.mx-next .mx-savebar {
  position: sticky; bottom: 0; z-index: 5; margin-top: 16px;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border: 1px solid var(--mx-line-strong); border-radius: var(--mx-radius);
  background: rgba(22, 27, 34, .97); box-shadow: 0 -8px 24px -16px rgba(0, 0, 0, .7);
}
.mx-next .mx-savebar[hidden] { display: none !important; }
.mx-next .mx-savebar__text { flex: 1; color: var(--mx-ink); font-size: var(--mx-fs-body); }
.mx-next .mx-savebar__text::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--mx-warn); margin-right: 8px;
}
.mx-next .mx-savebar__status { color: var(--mx-dim); font-size: var(--mx-fs-caption); }

/* An offline Device keeps a readable name: its status chip already says
   "offline", so the row is dimmed by colour (5.9:1), not by opacity (2.3:1). */
.mx-next .set-device--offline > .set-row:first-child { color: var(--mx-faint); }
.mx-next .set-device--offline > .set-row:first-child .set-row__title { opacity: 1; color: var(--mx-dim); }

/* MoneyAmount (main-flows redesign F0, PRD §12.3.1): one dollar figure, and a
   source tag beside any Credits-sourced amount. Tags: gift 9.6:1, test 7.6:1. */
.mx-next .mx-money { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.mx-next .mx-money > b { font-weight: 600; font-variant-numeric: tabular-nums; }
.mx-next .mx-money--pending > b { font-weight: 500; color: var(--mx-dim); }
.mx-next .mx-src {
  display: inline-block; padding: 0 6px; border-radius: 4px;
  font-size: var(--mx-fs-caption); line-height: var(--mx-lh-caption); font-weight: 500;
}
.mx-next .mx-src--gift { color: #f2c65a; background: rgba(242, 198, 90, .14); }
.mx-next .mx-src--test { color: #79c0ff; background: rgba(88, 166, 255, .15); }
.mx-next .mx-src--credits { color: #f2c65a; background: rgba(242, 198, 90, .14); }

/* PickerChip: a default choice shown as its value in words; opens the existing selector. */
.mx-next .mx-pick {
  display: inline-flex; align-items: center; gap: 6px; max-width: 230px; height: 30px; padding: 0 10px;
  border: 1px solid rgba(240, 246, 252, .2); border-radius: 999px; background: transparent; color: inherit;
  font: inherit; font-size: var(--mx-fs-label); white-space: nowrap; cursor: pointer;
}
.mx-next .mx-pick__k { color: var(--mx-dim); }
.mx-next .mx-pick__v { overflow: hidden; text-overflow: ellipsis; }
.mx-next .mx-pick::after { content: "▾"; color: var(--mx-dim); font-size: var(--mx-fs-caption); }
.mx-next .mx-pick:focus-visible { outline: 2px solid #1f6feb; outline-offset: 2px; }
.mx-next .mx-pick[disabled] { cursor: default; }
.mx-next .mx-pick[disabled]::after { content: none; }

/* VerdictChip: how the input will be handled, with one switch (7.4:1; was about 1.5:1). */
.mx-next .mx-verdict {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 999px;
  font-size: var(--mx-fs-label); color: #b4bdff; background: rgba(125, 141, 255, .12); border: 1px solid rgba(125, 141, 255, .45);
}
.mx-next .mx-verdict--danger { color: #ff7b72; background: rgba(248, 81, 73, .12); border-color: rgba(248, 81, 73, .45); }
.mx-next .mx-verdict__switch {
  padding: 0; border: 0; background: none; color: #e6edf3; font: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}