/* Separator between the two escape hatches on the code step. */
.authfoot .dot {
  color: var(--ink-3);
  margin: 0 8px;
  user-select: none;
}

/* ---------------------------------------------------------------- year bar */
.yearbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}
.yearbar h2.sec { margin-bottom: var(--s3); }
.years {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
}

/* Months that have not happened yet. Still reachable, because someone will
   want to enter December's rent in November, but not competing for attention
   with the month they are actually working on. */
.mcard.future { opacity: .5; }
.mcard.future:hover { opacity: 1; }

/* The month you are almost certainly here for. */
.mcard.now {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand-ring);
}

/* ---------------------------------------------------------------- dictation */
/* While the microphone is open the button has to be unmistakable, because the
   only thing worse than dictation not starting is not knowing it did. */
#q_mic.rec {
  background: var(--bad-wash);
  border-color: var(--bad);
  color: var(--bad);
}
#q_mic.rec .i {
  animation: micpulse 1.4s ease-in-out infinite;
}
@keyframes micpulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
  #q_mic.rec .i { animation: none; }
}

/* ---------------------------------------------------------------- quick add */
/* A proposal is not a record: it reads as something still being decided,
   not something already filed. */

.proposal {
  border-top: 1px solid var(--line);
  padding: var(--s3) 0;
}
.proposal:first-child { border-top: 0; padding-top: 0; }
.proposal:last-of-type { padding-bottom: var(--s3); }

.proposal .chk { align-items: flex-start; }
.proposal .chk > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.proposal .chk b { font-weight: 650; }
.proposal .chk .mono { color: var(--ink); font-weight: 600; }
.proposal .det {
  color: var(--ink-3);
  font-size: 13.5px;
  line-height: 1.45;
}

/* Anything the reader could not fill in. Kept visually attached to its
   proposal so it is obvious which line is incomplete. */
.fillin {
  margin: var(--s3) 0 0 27px;
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--sunken);
}
.fillin .help { margin: 0 0 var(--s2); }
.fillin .field { margin-bottom: 0; }
.fillin label {
  font-size: 11.5px;
  letter-spacing: .04em;
}

@media (max-width: 560px) {
  .fillin { margin-left: 0; }
}