/* ============================================================
   retiro.ph - the receipts calendar. JEV-021, Jev, 2026-10-09.

   One sheet for the three layout styles under /ledger/styles/:

     A  the month grid     ledger/styles/a/
     B  the ledger scroll  ledger/styles/b/
     C  the heat month     ledger/styles/c/

   Every rule is scoped to .ledger-cal, the class on the main element of
   each calendar page, so nothing here reaches another page. The scene
   that holds the calendar carries .lc-wide and takes the room a month
   needs; the head scene above it keeps the site's narrow reading panel.
   Ivory paper, aged gold and deep green are the site's own colours;
   the display serif carries the dates, mono carries every number.

   All markup for the calendar is built in assets/ledger-cal.js. No
   style attribute is used anywhere, so the sheet holds every value.
   ============================================================ */

/* ---------------------------------------------------------------
   1. the page-local palette, and a panel wide enough for a month
   --------------------------------------------------------------- */

.ledger-cal {
  --lc-ivory:      #f7f4eb;
  --lc-paper:      #fcfaf2;
  --lc-paper-deep: #ece9df;
  --lc-ink:        #26372a;
  --lc-ink-soft:   #5a6152;
  --lc-rule:       #cfd3c1;
  --lc-rule-soft:  #e4e5d9;
  --lc-green:      #284c33;
  --lc-green-soft: #dfe7dc;
  --lc-gold:       #d3a54d;
  --lc-gold-ink:   #8a6420;
  --lc-gold-soft:  #f2e6c9;
  --lc-dark:       #22261c;
  --lc-slate:      #6a7480;
  --lc-gutter:     12px;
  --gutter:        12px;
}

/* the scene that holds the calendar itself takes the room a month needs;
   the head scene keeps the site's narrow reading panel. */
.ledger-cal .lc-wide .scene-panel {
  max-width: min(100%, 1040px);
}

@media (max-width: 640px) {
  .ledger-cal .scene-panel {
    padding-inline: 14px;
  }
}

.ledger-cal .lc-body {
  width: 100%;
}

/* the quiet line under a grid, and the note that closes every page */
.lc-note,
.lc-hint,
.lc-legend-note,
.lc-run-label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--lc-ink-soft);
}

.lc-note {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--lc-rule);
}

/* a label that is read aloud but takes no room on the page */
.lc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lc-note p {
  margin: 0;
}

.lc-hint,
.lc-legend-note,
.lc-run-label {
  margin-top: var(--space-3);
}

/* ---------------------------------------------------------------
   2. the picker bar: Style A | B | C
   --------------------------------------------------------------- */

.lc-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-mono);
}

.lc-pick-label {
  color: var(--lc-ink-soft);
}

.lc-pick a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 var(--space-2);
  border: 1px solid var(--lc-rule);
  border-radius: var(--radius-md);
  background: var(--lc-paper);
  color: var(--lc-green);
  font-weight: 600;
  text-decoration: none;
}

.lc-pick a:hover {
  border-color: var(--lc-gold);
}

.lc-pick a[aria-current="page"] {
  border-color: var(--lc-green);
  background: var(--lc-green);
  color: var(--lc-ivory);
}

.lc-pick a:focus-visible {
  outline: 3px solid var(--lc-gold);
  outline-offset: 2px;
}

.lc-pick-sep {
  color: var(--lc-rule);
}

.lc-pick-names {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--lc-ink-soft);
}

/* ---------------------------------------------------------------
   3. the frame, the month head, the totals
   --------------------------------------------------------------- */

.lc-frame {
  padding: clamp(8px, 2.2vw, 16px);
  border: 1px solid var(--lc-rule);
  border-radius: var(--radius-lg);
  background: var(--lc-paper);
  box-shadow: var(--shadow-paper);
}

.lc-monthhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--lc-rule);
}

.lc-monthhead h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--lc-ink);
}

.lc-total {
  margin: 0 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--lc-ink);
  text-align: right;
}

.lc-total-php {
  font-weight: 600;
}

/* the saved CAD and USD estimates sit under the pesos, never beside them as
   though they were another peso figure */
.lc-total-cad,
.lc-total-usd {
  display: block;
  color: var(--lc-ink-soft);
}

.lc-month {
  scroll-margin-top: 96px;
}

.lc-month + .lc-month {
  margin-top: var(--space-6);
}

/* the month jump: every recorded month, one press away */
.lc-jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-mono);
}

.lc-jump-label {
  color: var(--lc-ink-soft);
}

.lc-jump a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 var(--space-2);
  border: 1px solid var(--lc-rule);
  border-radius: var(--radius-md);
  background: var(--lc-paper);
  color: var(--lc-green);
  text-decoration: none;
}

.lc-jump a:hover {
  border-color: var(--lc-gold);
}

.lc-jump a:focus-visible {
  outline: 3px solid var(--lc-gold);
  outline-offset: 2px;
}

/* the rate note: CAD and USD are saved estimates, and this names the day the
   estimate was taken, so no reader mistakes it for the rate the bank used */
.lc-rates {
  margin: var(--space-2) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--lc-ink-soft);
}

/* ---------------------------------------------------------------
   4. style A - the month grid
   --------------------------------------------------------------- */

.lc-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--space-3);
  border: 1px solid var(--lc-rule-soft);
  background: var(--lc-rule-soft);
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.lc-grid > * {
  min-width: 0;
}

.lc-wd {
  padding: 4px 0;
  background: var(--lc-paper-deep);
  color: var(--lc-ink-soft);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-align: center;
}

.lc-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: clamp(46px, 12vw, 84px);
  padding: 3px;
  border: 0;
  background: var(--lc-paper);
  color: var(--lc-ink);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-align: left;
}

.lc-cell.is-blank {
  background: var(--lc-ivory);
}

button.lc-cell {
  cursor: pointer;
}

button.lc-cell:hover {
  background: var(--lc-gold-soft);
}

.lc-cell:focus-visible {
  outline: 3px solid var(--lc-gold);
  outline-offset: -3px;
}

.lc-cell.is-today {
  box-shadow: inset 0 0 0 2px var(--lc-gold);
}

.lc-cell.is-picked {
  background: var(--lc-gold-soft);
}

.lc-cell.is-picked .lc-day {
  color: var(--lc-gold-ink);
  font-weight: 600;
}

.lc-day {
  color: var(--lc-ink-soft);
  line-height: 1.1;
}

.lc-amt {
  font-size: clamp(0.5rem, 2.1vw, 0.8125rem);
  font-weight: 600;
  line-height: 1.15;
}

/* the centavos may sit on the next line in a narrow square */
.lc-cents {
  color: var(--lc-ink-soft);
}

.lc-usd {
  color: var(--lc-ink-soft);
  font-size: clamp(0.4375rem, 1.8vw, 0.6875rem);
  line-height: 1.1;
}

.lc-dots {
  display: flex;
  gap: 2px;
  margin-top: auto;
  padding-top: 2px;
}

.lc-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lc-slate);
}

[data-bucket="care"] .lc-dot,
.lc-dot[data-bucket="care"],
.lc-swatch[data-bucket="care"] {
  background: var(--lc-gold);
}

[data-bucket="home"] .lc-dot,
.lc-dot[data-bucket="home"],
.lc-swatch[data-bucket="home"] {
  background: var(--lc-green);
}

[data-bucket="gear"] .lc-dot,
.lc-dot[data-bucket="gear"],
.lc-swatch[data-bucket="gear"] {
  background: var(--lc-dark);
}

[data-bucket="travel"] .lc-dot,
.lc-dot[data-bucket="travel"],
.lc-swatch[data-bucket="travel"] {
  background: var(--lc-slate);
}

/* the day-by-day panel under the grid, style A */
.lc-detail {
  margin-top: var(--space-5);
}

.lc-detail-head {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-mono);
  color: var(--lc-ink-soft);
}

/* ---------------------------------------------------------------
   5. the itemized card - shared by A and C, and the line inside it
   --------------------------------------------------------------- */

.lc-card {
  --lc-photo-w: 118px;
  padding: clamp(10px, 2.4vw, 18px);
  border: 1px solid var(--lc-rule);
  border-radius: var(--radius-lg);
  background: var(--lc-paper);
  box-shadow: var(--shadow-paper);
  scroll-margin-top: 96px;
}

.lc-card + .lc-card,
.lc-slip + .lc-card {
  margin-top: var(--space-4);
}

.lc-card.is-lit {
  border-color: var(--lc-gold);
  box-shadow: 0 0 0 3px var(--lc-gold-soft), var(--shadow-paper);
}

.lc-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--lc-rule);
}

.lc-card-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--lc-ink);
}

.lc-card-total {
  margin: 0 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--lc-ink);
  text-align: right;
}

.lc-card-cad,
.lc-card-usd {
  display: block;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--lc-ink-soft);
}

.lc-card-count {
  width: 100%;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--lc-ink-soft);
}

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

/* the receipt sits beside the words and the price sits beneath the receipt */
.lc-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-2) var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px dashed var(--lc-rule-soft);
}

.lc-line:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.lc-line-text {
  min-width: 0;
}

.lc-line-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--lc-ink-soft);
}

.lc-time {
  min-width: 3.2em;
}

.lc-cat {
  padding: 1px 6px;
  border: 1px solid var(--lc-rule);
  border-radius: var(--radius-pill);
  background: var(--lc-paper-deep);
  color: var(--lc-ink);
  letter-spacing: 0.02em;
}

.lc-merchant {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--lc-ink);
}

.lc-item {
  margin: 2px 0 0;
  font-size: var(--text-sm);
  color: var(--lc-ink-soft);
}

.lc-items {
  margin: 2px 0 0;
  padding-left: 1.1em;
  font-size: var(--text-sm);
  color: var(--lc-ink-soft);
}

.lc-line-money {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--lc-ink);
  text-align: right;
  white-space: nowrap;
}

.lc-line-php {
  font-weight: 600;
}

.lc-line-cad,
.lc-line-usd {
  display: block;
  color: var(--lc-ink-soft);
}

/* a charge the receipt itself prints: named as a charge, never dressed up as
   the saved estimate above it */
.lc-paid-note {
  display: block;
  margin-top: 2px;
  color: var(--lc-green);
  font-weight: 600;
}

/* the receipt slot: the photo in a frame, and the price beneath the frame.
   When the photo file is absent the frame says so in a plain sentence and
   nothing is drawn in its place. Never a broken image, never a made-up one. */
.lc-photo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: var(--lc-photo-w, 118px);
  max-width: 100%;
  margin: 0;
}

.lc-photo-frame {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--lc-rule);
  border-radius: var(--radius-sm);
  background: var(--lc-ivory);
}

.lc-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.lc-photo.is-loaded .lc-photo-img {
  opacity: 1;
}

.lc-photo.is-loaded .lc-photo-back {
  visibility: hidden;
}

/* the file is not on the site: the plain sentence stays, the image goes */
.lc-photo.is-back .lc-photo-img {
  display: none;
}

.lc-photo.is-back .lc-photo-back {
  visibility: visible;
}

.lc-photo-back {
  display: grid;
  gap: 2px;
  padding: 6px;
  text-align: center;
}

.lc-photo-note {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  line-height: 1.25;
  color: var(--lc-ink-soft);
}

/* the price beneath the receipt: the pesos, then the saved CAD and USD
   estimates, then a charge the receipt itself prints when there is one */
.lc-photo-price {
  display: grid;
  gap: 1px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--lc-ink);
  text-align: left;
}

/* the full-size view, offered only once the photo file is really there */
.lc-photo-link {
  display: block;
  margin-top: 2px;
  font-size: 0.6875rem;
  color: var(--lc-green);
}

.lc-photo-link:hover {
  color: var(--lc-gold-ink);
}

.lc-photo-link:focus-visible {
  outline: 3px solid var(--lc-gold);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------
   6. the Rumble line at the foot of a day
   --------------------------------------------------------------- */

.lc-pod,
.lc-stamp {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--lc-rule);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.lc-pod-mark,
.lc-stamp-mark {
  margin: 0 0 2px;
  letter-spacing: var(--tracking-mono);
  color: var(--lc-gold-ink);
  text-transform: uppercase;
  font-size: 0.6875rem;
}

.lc-pod-link,
.lc-stamp a {
  display: block;
  color: var(--lc-green);
  text-decoration: underline;
  text-decoration-color: var(--lc-gold);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.lc-pod-link:hover,
.lc-stamp a:hover {
  text-decoration-color: var(--lc-green);
}

.lc-stamp {
  padding: var(--space-2) var(--space-3);
  border: 2px dashed var(--lc-gold);
  border-radius: var(--radius-sm);
  background: var(--lc-gold-soft);
}

/* ---------------------------------------------------------------
   7. style B - the ledger scroll
   --------------------------------------------------------------- */

.lc-roll {
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
}

.lc-rollhead {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--lc-ink);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--lc-ink);
}

.lc-band {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin: var(--space-5) 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--lc-rule);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--lc-ink-soft);
}

.lc-band-total {
  text-transform: none;
  color: var(--lc-ink);
}

.lc-slip {
  --lc-photo-w: 76px;
  position: relative;
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: var(--lc-paper);
  border-radius: 2px;
  box-shadow: var(--shadow-paper);
  font-family: var(--font-mono);
  scroll-margin-top: 96px;
}

/* the torn edge at the foot of a slip */
.lc-slip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 7px;
  background-image:
    linear-gradient(135deg, var(--lc-paper) 7px, transparent 0),
    linear-gradient(-135deg, var(--lc-paper) 7px, transparent 0);
  background-size: 14px 7px;
  background-repeat: repeat-x;
  pointer-events: none;
}

.lc-slip + .lc-slip,
.lc-slip + .lc-quiet,
.lc-quiet + .lc-slip,
.lc-quiet + .lc-quiet {
  margin-top: var(--space-4);
}

.lc-slip-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--lc-ink);
}

.lc-slip-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 400;
  color: var(--lc-ink);
}

.lc-slip-count {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--lc-ink-soft);
}

.lc-slip .lc-merchant {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.lc-slip .lc-line-top {
  font-size: 0.75rem;
}

.lc-slip .lc-line {
  grid-template-columns: minmax(0, 1fr) auto;
}

.lc-slip-foot {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 2px solid var(--lc-ink);
}

.lc-slip-sub {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--text-sm);
  color: var(--lc-ink);
}

.lc-slip-sub .num {
  font-weight: 600;
}

.lc-slip-cad,
.lc-slip-usd {
  color: var(--lc-ink-soft);
}

.lc-quiet {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  padding: 6px var(--space-3);
  border-bottom: 1px dashed var(--lc-rule-soft);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--lc-ink-soft);
}

.lc-quiet-date {
  color: var(--lc-ink);
}

.lc-quiet-note {
  margin-left: auto;
}

.lc-rollend {
  margin-top: var(--space-5);
  padding-top: var(--space-2);
  border-top: 2px dashed var(--lc-rule);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--lc-ink-soft);
  text-align: center;
}

/* ---------------------------------------------------------------
   8. style C - the heat month
   --------------------------------------------------------------- */

.lc-heat + .lc-heat {
  margin-top: var(--space-6);
}

.lc-strip {
  margin-top: var(--space-4);
}

.lc-strip-plot {
  position: relative;
  height: clamp(64px, 22vw, 108px);
}

.lc-bars,
.lc-strip-hits {
  position: absolute;
  inset: 0;
}

.lc-bars {
  width: 100%;
  height: 100%;
  display: block;
}

.lc-bars rect {
  shape-rendering: crispEdges;
}

.lc-bars .lc-bar-care {
  fill: var(--lc-gold);
}

.lc-bars .lc-bar-home {
  fill: var(--lc-green);
}

.lc-bars .lc-bar-gear {
  fill: var(--lc-dark);
}

.lc-bars .lc-bar-travel {
  fill: var(--lc-slate);
}

.lc-bars .lc-base {
  fill: var(--lc-rule);
}

.lc-strip-hits {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

.lc-hit {
  display: block;
  min-width: 0;
  border-radius: 2px;
}

a.lc-hit:hover,
a.lc-hit:focus-visible {
  outline: 2px solid var(--lc-gold);
  outline-offset: -2px;
  background: var(--lc-gold-soft);
}

.lc-strip-days {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: clamp(0.375rem, 1.5vw, 0.625rem);
  color: var(--lc-ink-soft);
  text-align: center;
}

.lc-strip-days .is-paid {
  color: var(--lc-ink);
  font-weight: 600;
}

.lc-daynum {
  display: block;
  overflow: hidden;
}

.lc-strip-days .is-weekend {
  text-decoration: underline;
  text-decoration-color: var(--lc-rule);
}

.lc-run {
  display: block;
  width: 100%;
  height: 40px;
  margin-top: var(--space-3);
}

.lc-run .lc-run-line {
  fill: none;
  stroke: var(--lc-gold-ink);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.lc-run .lc-run-fill {
  fill: var(--lc-gold-soft);
  opacity: 0.8;
}

.lc-run .lc-run-base {
  stroke: var(--lc-rule);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.lc-legend {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--lc-rule);
}

.lc-legend-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--lc-ink-soft);
}

.lc-legend-list li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lc-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--lc-slate);
}

.lc-cards {
  margin-top: var(--space-4);
}

/* ---------------------------------------------------------------
   9. small screens: the grid stays inside the panel
   --------------------------------------------------------------- */

@media (max-width: 420px) {
  .lc-line {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .lc-photo {
    --lc-photo-w: 100%;
    width: 100%;
  }

  .lc-card {
    --lc-photo-w: 100%;
  }

  .lc-slip {
    --lc-photo-w: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ledger-cal {
    scroll-behavior: auto;
  }
}

/* ---------------------------------------------------------------
   10. the calendar pages are one long document, not a run of scenes
   --------------------------------------------------------------- */

/* scene.css snaps a scroll to the top of each scene. These three pages are a
   single long page with jumps inside it, a bar or a square opening the day
   below, and the snap pulls such a jump away from the day that was asked for.
   This sheet is loaded only by the three calendar pages, so the snap is turned
   off here and the rest of the site keeps it. */
html {
  scroll-snap-type: none;
}

/* A receipt whose photo file is not on the site shows the plain sentence. The
   sentence is a line of text, not a picture, so the frame does not hold a 4:3
   box open around it. */
.lc-photo.is-back .lc-photo-frame {
  aspect-ratio: auto;
}