/* ===========================================================================
   THE MONEY ROOM — the room's own rules.
   ===========================================================================
   Moved out of app.css by the rebuild. Nothing here changes how the room looks;
   tests/test-room-money-unchanged.js holds it to the pixel.
   =========================================================================== */

/* ==========================================================
   MONEY — where the month went.
   ==========================================================

   THE ONE THING ON THIS PAGE THAT IS ALLOWED TO SHOUT is the month's figure,
   and only when there IS one. A month Lucid could not read draws .mn-down
   instead, which has no figure in it at all — see renderMoneyMonth(). There
   is deliberately no styling in here for "a zero we are not sure about",
   because that state is not allowed to exist.

   The bank's own text is monospace, because it is a string a person compares
   against their bank's app character by character, and a 0 and an O are
   different characters.

   A not-matched charge is NOT coloured as a fault. It is the ordinary,
   truthful state of most charges — petrol stations do not send receipts —
   and making it red would suggest something went wrong when nothing did.
   Same argument as the unzoned time on the Travel page.

   Everything that moves here moves with transform and opacity. Animating
   `left` on one list in this app cost 379 page re-layouts in six seconds. */

.mn-head-acts{ display:flex; gap:var(--space-2); align-items:center; }
.mn-step{ min-width:34px; }

.mn-top{ padding:var(--space-5) 0 var(--space-4); }
.mn-big{ margin:0; font-size:clamp(34px, 6vw, 52px); font-weight:700; letter-spacing:-.02em;
  color:var(--text); line-height:1.05; }
.mn-bigsub{ display:block; margin-top:var(--space-2); font-size:var(--type-body); color:var(--text-dim); }

/* THE SHORT LIST OF WHAT THE MONTH WAS. Not a chart: a chart of four numbers
   is decoration, and the thing worth reading is the name beside each one. */
.mn-was{ display:flex; flex-direction:column; gap:var(--space-2); margin-bottom:var(--space-4); }
.mn-line{ display:flex; align-items:center; gap:var(--space-3); width:100%; text-align:left;
  padding:var(--space-3) var(--space-4); border:1px solid var(--glass-border);
  border-radius:var(--radius-card); background:var(--glass-bg); color:var(--text);
  cursor:pointer; transition:transform var(--dur-fast, .16s) var(--ease-out, ease),
    opacity var(--dur-fast, .16s) var(--ease-out, ease); }
.mn-line:hover{ transform:translate3d(0,-1px,0); }
/* THE OPEN LINE. The charges underneath belong to exactly one of these, and
   without a mark that reads at a glance the panel below looks like it
   belongs to all four. Border and a lifted weight rather than a fill: a
   filled row at this size reads as selected-for-an-action. */
.mn-line.on{ border-color:color-mix(in srgb, var(--cat-green) 70%, var(--glass-border));
  box-shadow:inset 2px 0 0 0 var(--cat-green); }
.mn-line.on .mn-line-nm{ font-weight:750; }
.mn-bar{ flex:none; width:4px; align-self:stretch; min-height:30px; border-radius:var(--radius-pill);
  background:var(--text-faint); }
.mn-bar-trip{ background:var(--cat-violet, #6B4FBD); }
.mn-bar-recurring{ background:var(--brass, #C08A2E); }
.mn-bar-rest{ background:var(--text-faint); }
.mn-line-g{ flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--space-hair, 2px); }
.mn-line-nm{ font-size:var(--type-lead); font-weight:650; color:var(--text); }
.mn-line-sub{ font-size:var(--type-body); color:var(--text-dim); }
.mn-line-amt{ flex:none; font-size:var(--type-lead); font-weight:650; color:var(--text);
  font-variant-numeric:tabular-nums; }

.mn-panel{ border:1px solid var(--glass-border); border-radius:var(--radius-card);
  background:var(--glass-bg); padding:var(--space-4); margin-bottom:var(--space-4); }
.mn-panel h4{ margin:0 0 var(--space-3); font-size:var(--type-label); font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); }
.mn-flat{ margin:0; font-size:var(--type-body); color:var(--text-dim); }

.mn-tx{ display:flex; gap:var(--space-4); align-items:flex-start;
  border-top:1px solid var(--glass-border); padding:var(--space-3) 0; }
.mn-tx:first-of-type{ border-top:none; padding-top:0; }
.mn-tx-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--space-1);
  align-items:flex-start; }
.mn-raw{ font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size:var(--type-body); color:var(--text); word-break:break-word; }
.mn-pend{ font-size:var(--type-label); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--amber, #C08A2E); }
.mn-from{ font-size:var(--type-body); color:var(--text-dim); }
.mn-nomatch{ font-size:var(--type-body); color:var(--text-faint); }
.mn-open{ font-size:var(--type-body); padding:var(--space-1) var(--space-3); }
.mn-amt{ flex:none; text-align:right; font-size:var(--type-lead); font-weight:650;
  color:var(--text); font-variant-numeric:tabular-nums; }
.mn-tx-day{ display:block; font-size:var(--type-label); font-weight:400; color:var(--text-faint); }

.mn-new{ display:flex; gap:var(--space-4); align-items:center; flex-wrap:wrap;
  border:1px solid color-mix(in srgb, var(--cat-green) 40%, var(--glass-border));
  border-radius:var(--radius-card); background:var(--glass-bg);
  padding:var(--space-3) var(--space-4); margin-bottom:var(--space-4); }
.mn-new-g{ flex:1; min-width:200px; display:flex; flex-direction:column; gap:var(--space-hair, 2px); }
.mn-new-h{ font-size:var(--type-lead); font-weight:650; color:var(--text); }
.mn-new-sub{ font-size:var(--type-body); color:var(--text-dim); }

.mn-stale, .mn-gap{ font-size:var(--type-body); color:var(--text-dim);
  border:1px solid var(--glass-border); border-radius:var(--radius-card);
  background:var(--glass-bg); padding:var(--space-3) var(--space-4); margin-bottom:var(--space-3); }

/* THE MONTH NOBODY COULD READ. It is deliberately the LARGEST thing on the
   page in that state, because the mistake it exists to prevent — reading a
   failed month as a quiet one — is made by glancing, and a small grey note
   under a big number is exactly what a glance misses. There is no figure
   anywhere inside this block and there is no room for one. */
.mn-down{ border:1px solid color-mix(in srgb, var(--amber, #C08A2E) 45%, var(--glass-border));
  border-radius:var(--radius-card); background:var(--glass-bg);
  padding:var(--space-5); margin-bottom:var(--space-4); }
.mn-down p{ margin:0 0 var(--space-3); font-size:var(--type-body); color:var(--text-dim); }
.mn-down p:last-of-type{ margin-bottom:0; }
/* AFTER .mn-down p, AND WITH ITS OWN SPECIFICITY, and that is not a style
   preference — it was a bug found by looking at the picture. Written the
   obvious way round, `.mn-down-h` (0,1,0) lost to `.mn-down p` (0,1,1) and
   the one sentence on this page that has to be impossible to miss rendered
   at thirteen pixels, the same size as the paragraph under it. The whole
   purpose of this block is that a glance cannot mistake it for a quiet
   month, and a glance is exactly what it was failing. */
.mn-down p.mn-down-h{ margin:0 0 var(--space-3); font-size:clamp(22px, 3.4vw, 30px);
  font-weight:700; color:var(--text); line-height:1.15; }
.mn-down p.mn-down-said{ font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
.mn-acts{ display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-4); }

.mn-rules p{ margin:0 0 var(--space-3); font-size:var(--type-body); color:var(--text-dim); }
.mn-rules p:last-child{ margin-bottom:0; }
.mn-rules b{ color:var(--text); }
.mn-notmine{ border-top:1px solid var(--glass-border); padding-top:var(--space-3); }

/* THE EMAIL THAT STARTED IT — Money option B.

   A SIGN-UP AND A RECEIPT LOOK DIFFERENT ON PURPOSE. The green edge is the
   one claim this screen is proud of — "here is where it began" — and a
   receipt, which is a weaker claim, does not get it. Somebody glancing must
   not be able to mistake the second for the first, and colour is how a
   glance reads. The words say it too; this only makes the glance agree. */
.ms-total{ margin:0 0 var(--space-2); font-size:clamp(20px, 3vw, 28px); font-weight:700;
  color:var(--text); font-variant-numeric:tabular-nums; line-height:1.15; }
.ms-total-sub{ display:block; font-size:var(--type-body); font-weight:400; color:var(--text-dim);
  font-variant-numeric:normal; }
.ms-tally{ margin-bottom:var(--space-1); }
.ms-reach{ color:var(--text-faint); }
.ms-since{ font-size:var(--type-body); color:var(--text-dim); }
.ms-found{ display:flex; flex-direction:column; gap:var(--space-hair, 2px);
  border-left:2px solid var(--glass-border); padding-left:var(--space-3); margin-top:var(--space-1); }
.ms-found.is-signup{ border-left-color:var(--cat-green); }
.ms-found-h{ font-size:var(--type-label); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text-faint); }
.ms-subj{ font-size:var(--type-body); font-weight:650; color:var(--text); word-break:break-word; }
.ms-meta{ font-size:var(--type-body); color:var(--text-dim); word-break:break-word; }
.ms-caveat{ font-size:var(--type-body); color:var(--text-faint); }
.ms-none{ font-size:var(--type-body); color:var(--text-faint); margin-top:var(--space-1); }
.ms-price{ display:flex; flex-direction:column; gap:var(--space-hair, 2px);
  border-left:2px solid color-mix(in srgb, var(--amber, #C08A2E) 55%, var(--glass-border));
  padding-left:var(--space-3); margin-top:var(--space-2); }
.ms-price-h{ font-size:var(--type-label); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text-faint); }
.ms-open{ font-size:var(--type-body); padding:var(--space-1) var(--space-3); margin-top:var(--space-1); }
/* THE BLOCK WITH NO LIST IN IT, and it carries the amber edge the month
   page's unreadable state uses, so the two read as the same kind of thing:
   Lucid does not know, and is saying so rather than drawing a blank. */
.ms-quiet{ border-color:color-mix(in srgb, var(--amber, #C08A2E) 45%, var(--glass-border)); }
/* AND THE FIRST SENTENCE IN IT IS LARGE, for the reason .mn-down-h is
   large on the month above: the mistake this block exists to prevent —
   reading "Lucid does not know" as "nothing is charging you" — is made by
   glancing, and a small grey note is exactly what a glance misses. */
.ms-quiet .mn-flat:first-of-type{ font-size:clamp(17px, 2.2vw, 21px);
  font-weight:650; color:var(--text); line-height:1.3; margin-bottom:var(--space-3); }
.ms-samesay{ margin-top:var(--space-2); color:var(--text); }
.ms-tag{ font-weight:650; }

@media (max-width: 640px){
  .mn-tx{ flex-direction:column; gap:var(--space-2); }
  .mn-amt{ text-align:left; }
  .mn-tx-day{ display:inline; margin-left:var(--space-2); }
}