/* Net Payable value: the same green as the earnings */
.adv-t b {
  color: var(--earn);
}

/* account deletion: a clearly separate, red action */
.axdel {
  color: #ef4444;
}
/* keep the top of the screen clear of the status bar and the clock (Android draws the app edge to edge) */
body {
  padding-top: env(safe-area-inset-top, 0px);
}

/* save status: a failed save is shown in red */
#u.bad {
  background: #ef4444;
}

/* all-sheets total: same look as the first top card, placed below the top row */
.total-wrap {
  margin: calc(12*var(--u)) 0 calc(16*var(--u));
}
.total-wrap[hidden] {
  display: none;
}

/* all-sheets total: the app's own palette (navy surface, blue border), green total earnings */
.tc-card {
  display: grid;
  grid-template-columns: max-content 1ch 1fr auto;
  column-gap: calc(8*var(--u));
  row-gap: calc(6*var(--u));
  align-items: center;
  padding: calc(14*var(--u)) calc(18*var(--u));
  border-radius: calc(16*var(--u));
  background: var(--grad-cosmic);
  border: 1px solid color-mix(in srgb, var(--cosmic-bright) 60%, transparent);
  box-shadow: 0 14px 28px -10px rgba(3,2,78,.7), inset 0 1px 0 rgba(255,255,255,.12);
  color: #ffffff;
}
.tc-head {
  grid-column: 1 / -1;
  font-weight: 800;
  font-size: calc(13*var(--u));
  color: #ffffff;
  letter-spacing: .02em;
}
.tc-l {
  color: rgba(255,255,255,.78);
  font-size: calc(12*var(--u));
  white-space: nowrap;
}
.tc-c {
  font-style: normal;
  color: rgba(255,255,255,.6);
  text-align: center;
}
.tc-v {
  font-size: calc(13*var(--u));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tc-side {
  grid-column: 4;
  grid-row: 2 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: end;
}
.tc-side small {
  color: rgba(255,255,255,.78);
  font-size: calc(12*var(--u));
}
.tc-side strong {
  font-size: calc(24*var(--u));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.tc-l-earn {
  align-self: center;
}
.tc-earn {
  grid-column: 3;
  font-size: calc(16*var(--u));
  font-weight: 800;
  color: var(--cosmic-money);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* the bottom card (Monthly Hours) must really hide when it is not needed */
#monthCard[hidden] {
  display: none;
}

/* Rate and Earnings cards: label on the left, value on the right in one column; values never break */
.rc .kv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: calc(6*var(--u));
}
.rc .kv span {
  min-width: 0;
  font-size: calc(11*var(--u));
  line-height: 1.25;
}
.rc .kv b {
  white-space: nowrap;
  font-size: calc(12*var(--u));
  text-align: end;
}

/* Rate and Earnings: one card per line, so values have room */
.rates-grid {
  grid-template-columns: 1fr !important;
  gap: calc(10*var(--u)) !important;
}

/* Rate and Earnings card: one table, aligned columns (label | colon | unit | value) */
.rc.rc-tbl {
  display: grid;
  grid-template-columns: max-content 1ch minmax(0, 1fr) max-content;
  column-gap: calc(8*var(--u));
  row-gap: calc(7*var(--u));
  align-items: baseline;
}
.rc-tbl .rc-h {
  grid-column: 1 / -1;
  font-weight: 800;
  font-size: calc(14*var(--u));
  color: var(--t);
  margin-bottom: calc(4*var(--u));
}
.rc-tbl .rc-l {
  font-size: calc(12*var(--u));
  color: var(--m);
  white-space: nowrap;
}
.rc-tbl .rc-c {
  font-style: normal;
  color: var(--m);
  text-align: center;
}
.rc-tbl .rc-u {
  font-style: normal;
  font-size: calc(11*var(--u));
  color: var(--m);
  white-space: nowrap;
}
.rc-tbl .rc-v {
  font-size: calc(12*var(--u));
  font-weight: 700;
  text-align: end;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  justify-self: end;
}
.rc-tbl .rc-u {
  text-align: start;
  padding-inline-start: calc(4*var(--u));
}

/* Monthly Hours card: the title stays on one line */
.primary .label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* month name in the total card: same size as the card title, in the card's normal text colour */
.tc-month {
  font-size: calc(13*var(--u));
  font-weight: 800;
  letter-spacing: .02em;
}

/* Rate and Earnings cards: brand asset palette
   Dark Green #051650, Bangladesh Green #0a2472, Caribbean Green #123499, light text (approx.) #e4e9f7 */

.rc.rc-tbl {
  background: linear-gradient(135deg, var(--brand-bangladesh) 0%, var(--brand-dark) 100%);
  border: 1px solid var(--brand-caribbean);
  box-shadow: 0 12px 26px -12px rgba(0,7,45,.8), inset 0 1px 0 rgba(255,255,255,.06);
  color: var(--brand-text);
}
.rc-tbl .rc-h {
  color: #ffffff;
}
.rc-tbl .rc-l,
.rc-tbl .rc-c,
.rc-tbl .rc-u {
  color: var(--brand-text);
  opacity: .72;
}
.rc-tbl .rc-v {
  color: #ffffff;
}
.rc-tbl .rc-line {
  grid-column: 1 / -1;
  height: 1px;
  margin: calc(2*var(--u)) 0;
  background: var(--brand-caribbean);
}