/* Keep the final surface rules on the original brand palette defined above. */
.card,
.mini,
.panel,
.scard,
.tc-card,
.dpage,
.adv {
  box-shadow: var(--shadow);
}

:root[data-theme="light"] .card:not(.primary):not(.green),
:root[data-theme="light"] .mini,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .scard,
:root[data-theme="light"] .adv {
  background-color: var(--panel);
}

:root[data-theme="light"] .mi,
:root[data-theme="light"] .ci,
:root[data-theme="light"] .dd,
:root[data-theme="light"] .tmbtn {
  background-color: var(--in);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}
/* Today's marker on the left of the daily table: bright green in both themes */
.today td:first-child {
  box-shadow: inset 4px 0 0 #22c55e !important;
}

/* Time picker: invisible while closed (no taps caught); no snapping, so the wheel never loops */
.tp-bg { pointer-events: none; }
.tp-bg.on { pointer-events: auto; }
.tp-col { scroll-snap-type: none; }
.tp-item { scroll-snap-align: none; }

/* Lower card with several sheets: one block per sheet */
.sb-row { padding: calc(6*var(--u)) 0; border-top: 1px solid rgba(255,255,255,.14); }
.sb-row:first-child { border-top: 0; }

/* Lower card with several sheets: text size and line height of a value line
   (the position and width of the sheet list are set further below) */
.sb-l {
  font-size: calc(12*var(--u));
  opacity: .85;
  line-height: 1.45;
}

/* Keep Daily Breakdown at its original scale while letting it shrink to fit phones. */
.dsec {
  width: 100%;
  max-width: 100%;
}

.dpage .status {
  width: calc(28*var(--u));
  height: calc(28*var(--u));
  min-width: 0;
  min-height: 0;
}

.dpage .ci {
  min-height: 0;
}

/* Calendar: full month name only, one line, sized to fit the cell */
.mpm {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-inline: 4px;
}

/* Lower card: sheet number above the month hours; one value per line; advance red, earnings green */
.primary .sb-row .sb-l { display: flex; justify-content: space-between; align-items: baseline; gap: calc(8*var(--u)); padding: calc(4*var(--u)) 0; font-size: calc(13*var(--u)); }
.primary .sb-row .sb-l span { opacity: .85; }
.primary .sb-row .sb-l b { font-weight: 800; font-variant-numeric: tabular-nums; text-align: end; }
.primary .sb-row .sb-l b.sb-green { color: #4ADE80; }
.primary .sb-row .sb-l b.sb-red { color: #f87171; }

/* Lower card: the right-side list stays inside the card. It is a normal block with a fixed,
   responsive width; text wraps inside it and no line runs past the card edge. */
.primary .sheet-break {
  margin-top: 0;
  display: block;
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
  align-self: start;
  width: clamp(160px, 46%, 250px);
  max-width: 100%;
  min-width: 0;
  margin: 0 !important;
  text-align: end;
  font-size: calc(12*var(--u));
}
.primary .sheet-break .sb-l span { margin-inline-end: auto; min-width: 0; overflow-wrap: anywhere; }

.primary .sheet-break > .sb-row {
  display: block;
  width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}
.primary .sheet-break .sb-l {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(6*var(--u));
  padding: calc(1*var(--u)) 0;
  min-width: 0;
}
.primary .sheet-break .sb-l b {
  flex: 0 0 auto;
  white-space: nowrap;
  text-align: end;
}
/* Left column (month hours) takes the remaining width and never pushes the list out */
.primary .value,
.primary .label {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Lower card: the month hours label is larger */
#l1 {
  font-size: calc(16*var(--u));
  font-weight: 800;
}
/* Sheet dots: a fixed slot between the lower card and the daily table, so they never overlap the table */
.ddots:not([hidden]) {
  height: 40px;
  min-height: 40px;
  margin: calc(6*var(--u)) 0 calc(10*var(--u));
  padding: 0;
}

.ddots .ddot,
.ddots .ddot.on {
  position: relative;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
}

.ddots .ddot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(8*var(--u));
  height: calc(8*var(--u));
  border-radius: 999px;
  background: var(--b);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ddots .ddot.on::before {
  width: calc(20*var(--u));
  background: var(--p);
}

/* Scrolling fix: the page is only as tall as its content. The body no longer forces a full-screen
   minimum height on top of its bottom padding (that made short pages scroll), and nothing scrolls sideways. */
html, body {
  overflow-x: hidden;
}
body {
  min-height: 0 !important;
  box-sizing: border-box;
}

/* Lower card: the sheet number sits in the top-left corner, above the month hours; tighter spacing inside the card */
.tsno {
  display: block;
  font-weight: 800;
  font-size: calc(14*var(--u));
  opacity: .95;
  margin-bottom: calc(2*var(--u));
}
#monthCard {
  padding: calc(12*var(--u)) calc(14*var(--u));
  row-gap: calc(4*var(--u));
  align-content: start;
}
#monthCard .sheet-break {
  margin-top: 0;
  padding: 0;
  margin: 0;
}
#monthCard .sb-row .sb-l {
  padding: calc(2*var(--u)) 0;
}

/* Lower card: only the numbers are coloured (currency stays normal); darker green and red */
.primary .sb-row .sb-l .sb-green { color: #22c55e; }
.primary .sb-row .sb-l .sb-red { color: #dc2626; }
.primary .sb-row .sb-l .cur { color: inherit; }
/* Lower card: the same tight spacing as the top card (no empty space above or below) */
#month-hours-sub { display: none; }
#monthCard .label, #monthCard .value { margin: 0; }
#monthCard .value { line-height: 1.05; }
#monthCard .sb-row { padding: 0; }