/* demo-rent.css: styles for js/rent-demo.js only. */
.mr-d { display: grid; place-items: center; line-height: 1; width: 40px; height: 44px; border-radius: var(--r-sm); background: var(--recurring-soft); color: var(--recurring); font-weight: 700; font-size: var(--t-md); }
.mr-d small { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.rec { display: grid; gap: 24px; }
@media (min-width: 900px) {
  .rec { gap: 36px; }
}
.rec-sched { display: grid; gap: 10px; }
.rec-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.rec-name { display: flex; align-items: center; gap: 10px; }
.rec-name .ic { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--recurring-soft); color: var(--recurring); display: grid; place-items: center; }
.rec-name b { font-size: var(--t-lg); color: var(--ink); }
.rec-name small { display: block; color: var(--muted); font-size: var(--t-sm); }
.rec-lines { margin: 0; padding: 0; list-style: none; }
.rec-lines li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--divider); font-size: var(--t-sm); }
.rec-lines li span:nth-child(3) { grid-column: 1 / -1; color: var(--muted); font-size: var(--t-sm); }
.rec-lines b { color: var(--ink); }
.rec-edit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px; border-radius: var(--r-md); background: var(--wash); font-size: var(--t-sm); }
.rec-edit label { font-weight: 600; color: var(--ink); }
.money-in-field { background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 0 10px; }
.money-in-field input { border: 0; outline: none; width: 7.5ch; font-size: var(--t-md); font-variant-numeric: tabular-nums; background: none; }
.step-btns { display: inline-flex; gap: 6px; }
.step-btns button { width: 44px; height: 44px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--card); font-size: var(--t-lg); color: var(--ink); }
.rec-shares { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 560px) {
  .rec-shares { grid-template-columns: repeat(4, 1fr); }
}
.rec-mode { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--t-sm); font-weight: 600; color: var(--muted); }
.upcoming { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.up-row { display: grid; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--card); }
.up-row .mr-d { width: 48px; height: 50px; font-size: var(--t-lg); }
.up-row b { color: var(--ink); }
.up-row small { display: block; color: var(--muted); font-size: var(--t-sm); }
.hist { margin-top: 6px; padding: 14px 16px; border-radius: var(--r-md); background: var(--wash); }
.hist-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: var(--t-sm); color: var(--muted); }
.hist-top b { font-size: var(--t-lg); color: var(--ink); letter-spacing: -0.02em; }
.hist-bars { display: flex; align-items: flex-end; gap: 6px; height: 72px; margin-top: 10px; }
.hist-bars i { flex: 1; background: color-mix(in srgb, var(--recurring) 30%, var(--card)); border-radius: var(--r-sm) var(--r-sm) 3px 3px; height: var(--h); transition: height .5s var(--ease); position: relative; }
.hist-bars i.now { background: var(--recurring); }
.hist-lbl { display: flex; gap: 6px; margin-top: 4px; }
.hist-lbl span { flex: 1; text-align: center; font-size: var(--t-xs); color: var(--muted); }
.rec-lines li.rec-total { font-weight: 700; color: var(--ink); border-top: 1px solid var(--line); }
.rec-check { margin-top: 4px; color: var(--pos); }
.rec-sub { font-weight: 700; color: var(--ink); margin-top: 4px; }
.up-row { grid-template-columns: 48px minmax(0, 1fr) auto; }
.up-r { display: grid; justify-items: end; gap: 4px; }
.up-row span:nth-child(2) { min-width: 0; }
@media (max-width: 480px) {
  .up-r { align-items: center; }
  .up-row .mr-d { width: 44px; }
}
.rec-edit .muted { flex-basis: 100%; }
@media (min-width: 560px) {
  .rec-edit .muted { flex-basis: auto; margin-left: auto; }
}
ul.rec-shares { grid-template-columns: repeat(2, 1fr) !important; }
.rec { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .rec { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
.rec-sched { min-width: 0; }
.hist-bars i.nx { background: var(--recurring-soft); border: 1.5px dashed var(--recurring); box-sizing: border-box; }
.hist-lbl .nx { font-weight: 600; }
@media (min-width: 560px) {
  .rec-compact ul.rec-shares { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
.hist-lbl .nx { color: var(--teal-ink); }
@media (max-width: 359px) {
  .up-r { flex-wrap: wrap; }
}
.up-how { font-size: var(--t-sm); color: var(--muted); font-weight: 500; }
.money-in-field input { padding: 0 0 0 1px; margin: 0; }
.money-in-field input:focus-visible { box-shadow: none; border-radius: 0; }
.money-in-field:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.upcoming .rec-mode { display: flex; justify-content: space-between; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin: -2px 0 4px; padding: 0 2px 0 14px; font-size: var(--t-sm); }
.rec-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--accent); font-weight: 600; text-decoration: none; font-size: var(--t-sm); }
.rec-more:hover { text-decoration: underline; }
@media (min-width: 1000px) {
  .rent-card .rec-shares .sp-pa { font-size: var(--t-md); }
  .rent-card .rec-shares .av { width: 26px; height: 26px; }
  .rent-card .rec-shares .sp-person { gap: 8px; padding-inline: 10px; min-width: 0; }
}
.money-in-field:focus-within { outline: 2px solid transparent; outline-offset: 2px; }
.money-in-field { display: flex; align-items: center; min-height: 44px; cursor: text; font-weight: 500; }
.money-in-field input { align-self: stretch; min-height: 42px; padding-block: 0; }
@media (max-width: 480px) {
  .up-row { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .up-r { grid-column: 3; justify-items: end; grid-auto-flow: row; gap: 4px; }
}
@media (max-width: 359px) {
  .up-r { grid-auto-flow: row !important; justify-items: end; }
}
@media (min-width: 1000px) and (max-width: 1119px) {
  .rent-card .rec-shares .sp-person { grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; row-gap: 2px; padding-inline: 10px; }
  .rent-card .rec-shares .av { grid-row: auto; width: 22px; height: 22px; font-size: var(--t-xs); }
  .rent-card .rec-shares .sp-pa { grid-column: 1 / -1; }
}
/* E r3: one meaning per colour. Grey fill is the bank's view only, so the rent editor and the history are
   white with a hairline; the history bars are the ink ramp (this month in ink); dates are plain text. */
/* also over the dark theme's tokens (c.css), which sit at the same weight as these selectors */
:root, :root[data-theme], :root:not([data-theme='light']) { --recurring: var(--ink); --recurring-soft: var(--fill); --recurring-fill: var(--ink-fill); }
.rec-edit, .hist { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.hist-bars i { background: color-mix(in srgb, var(--ink) 18%, var(--card)); }
.hist-bars i.now { background: var(--ink); }
.hist-lbl .nx { color: var(--ink); }
.mr-d { background: none; color: var(--ink); width: auto; min-width: 40px; }
/* ---------- E r5: the rent is one row, not a form: the amount is edited in place (underlined, solid on
   focus) with its split on one sub-line under it; no stepper, no inner panel. The history is one hairline row. ---------- */
.rec-edit { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 6px 0 10px; border-radius: 0; background: none; box-shadow: none; }
.rec-edit > label:first-child { font-size: var(--t-md); font-weight: 600; color: var(--ink); }
.rec-edit .money-in-field { justify-self: end; min-height: 40px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: var(--t-md); font-weight: 600; color: var(--ink); border-bottom: 1.5px dashed var(--line-strong); }
.rec-edit .money-in-field input { width: 8ch; padding-left: 2px; min-height: 38px; text-align: right; font-size: var(--t-md); font-weight: 600; color: var(--ink); }
.rec-edit .money-in-field:hover { border-bottom-color: var(--ink); }
.rec-edit .money-in-field:focus-within { border-bottom: 1.5px solid var(--ink); box-shadow: none; }
.rec-rsub { font-size: var(--t-sm); color: var(--muted); }
.rec-help { justify-self: end; font-size: var(--t-sm); color: var(--muted); }
.rec-help.warn { color: var(--neg); }
.hist-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--t-sm); color: var(--muted); }
.hist-row b { font-size: var(--t-md); color: var(--ink); font-weight: 600; }
.rec-edit { padding-bottom: 12px; }
.rec-edit .rec-rsub { margin-top: -4px; }
.rec-edit .money-in-field { position: relative; }
/* sweep: below 360 the four rent shares ("$639.35$639.35…") ran into each other */
@media (max-width: 359px) {
  .rent-card ul.rec-shares { gap: 4px; }
  .rent-card .rec-shares .sp-pa { font-size: var(--t-sm); letter-spacing: -0.02em; }
}
/* r2 fix: the amount reads as an amount ("$2,400.00", no gap after the "$"); the field's underline shows only
   on hover (dashed) and focus (solid), never at rest */
.rec-edit .money-in-field { border-bottom-color: transparent; }
.rec-edit .money-in-field input { padding: 0; }
@media (max-width: 359px) {
  .rent-card ul.rec-shares { gap: 6px; }
  .rent-card .rec-shares .sp-person { padding-inline: 2px; }
}
@media (max-width: 339px) {
  .rent-card .rec-shares .sp-pa { font-size: var(--t-xs); }
}
.rec-edit .money-in-field input { font-variant-numeric: normal; }
.rec-edit .money-in-field input { margin-left: -2px; }