/* =========================================================================
   Home · module styles
   Only what is unique to the home screen. Anything that appears on a second
   screen has already been promoted to a shared partial.

   Laid out per DIRECTION.md §3.7 (docs/visual-v2/home.html): the hero sits
   straight on the canvas, sized rather than boxed; cards are kept for groups
   of rows. Tokens only, so the v2 palette and faces arrive through
   _variables.css without this file changing.
   ========================================================================= */

.home {
  display: flex;
  flex-direction: column;
}

/* Home runs tighter than other pages: the owner wants the month, the figure
   and the sections close together, so the page top gives up most of its
   padding (20 → 6px). */
.page.home { padding-block-start: 6px; }

/* ---- Left to spend ------------------------------------------------------ */
.home-hero {
  display: flex;
  flex-direction: column;
  padding-block: 0 6px;
}

.home-hero__label {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--text-2);
}

/* The one large figure on the screen, in the display face. */
.home-hero__figure {
  margin-block-start: var(--s-1);
  font-family: var(--font-display);
  /* 60% of the shared hero size: large enough to lead, small enough that
     the rest of the month fits beside it on a phone. */
  font-size: var(--t-hero);
  font-weight: var(--fw-semibold);
  font-stretch: var(--wd-hero);
  line-height: var(--lh-flush);
  letter-spacing: var(--track-figure);
}

/* The ৳ and any poisha are set small and quiet, so the number read is the
   whole taka. */
.home-hero__figure .money__sym,
.home-hero__figure .money__code {
  font-size: 0.5em;
  font-weight: var(--fw-medium);
  color: var(--text-3);
  margin-inline-end: 0.1em;
}

.home-hero__figure .money__minor { font-size: 0.42em; color: var(--text-3); }

.home-hero__skeleton { width: 10rem; }

/* ---- The pace bar -------------------------------------------------------
   A track, a fill for the share used, and a tick at today's share of the
   month. A fill past the tick is spending ahead of the calendar; the bar says
   so by position, with no colour change needed. */
.home-pace { margin-block-start: var(--s-4); }

.home-pace__bar {
  position: relative;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--bg-3);
}

.home-pace__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--fill, 0%);
  border-radius: inherit;
  background: var(--text-1);
  transition: width var(--t-slow) var(--ease-out);
}

.home-pace__bar.is-over .home-pace__fill { background: var(--danger); }

.home-pace__now {
  position: absolute;
  inset-block-start: -4px;
  inset-inline-start: var(--at, 0%);
  width: 2px;
  height: 14px;
  border-radius: 1px;
  background: var(--accent);
}

.home-pace__text {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  margin: var(--s-3) 0 0;
  font-size: var(--fs-13);
  color: var(--text-2);
}

.home-pace__text strong { color: var(--text-1); font-weight: var(--fw-semibold); }
.home-pace__text .is-over { color: var(--danger); }
.home-pace__used { flex: none; }

/* ---- In / Saved / Out ---------------------------------------------------
   Three labelled figures on one row, in equal thirds divided by hairlines,
   so they are compared by position and never wrap. */
.home-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-block: 1px solid var(--line-soft);
}

.home-flow__item {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
  padding: var(--s-3) 0 var(--s-3) var(--s-3);
}

.home-flow__item:first-child { padding-inline-start: 0; }
.home-flow__item + .home-flow__item { border-inline-start: 1px solid var(--line-soft); }

.home-flow__item dt {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-12);
  color: var(--text-3);
}

.home-flow__item dt::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--dot, var(--text-3));
}

.home-flow__item dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-fig);
  font-weight: var(--fw-semibold);
  font-stretch: var(--wd-fig);
  color: var(--text-1);
}

.home-flow__item--in   { --dot: var(--in); }
.home-flow__item--hold { --dot: var(--saved); }
.home-flow__item--out  { --dot: var(--out); }
.home-flow__item--in dd   { color: var(--in); }
.home-flow__item--hold dd { color: var(--saved); }
.home-flow__item--out dd  { color: var(--out); }

/* ---- Sections ------------------------------------------------------------
   Lighter than the shared .section-head: no rule under the title, and the
   title at section size, because Home has five sections in a screen and a
   half and a heavy head on each is most of the page. */
.home-sec { margin-block-start: 8px; }

.home-sec__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-block-end: var(--s-2);
}

.home-sec__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-section);
  font-weight: var(--fw-semibold);
  font-stretch: var(--wd-title);
}

.home-sec__aside { font-size: var(--fs-13); color: var(--text-3); }

.home-sec__link {
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--accent-text);
  text-decoration: none;
  padding-block: var(--s-2);
}

.home-card { border: 0; }

/* ---- Today -------------------------------------------------------------- */
.home-today__empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: var(--tap);
  padding: var(--s-3) var(--s-4);
  color: var(--text-2);
  font-size: var(--fs-14);
}

.home-today__more .row__title { color: var(--text-2); font-weight: var(--fw-regular); }

/* ---- Accounts strip ----------------------------------------------------- */
.home-accounts {
  display: flex;
  gap: var(--s-2);
  list-style: none;
  margin-block: 0;
  /* The strip bleeds to the screen edge (.scroll-x), but its first tile
     starts on the page gutter like everything else, and a swipe snaps back
     to it. Set here as well because a list reset would otherwise zero it. */
  padding: 2px var(--gutter);
  scroll-padding-inline: var(--gutter);
}

.home-account {
  flex: none;
  min-width: 7.25rem;
  max-width: 12rem;
  border-radius: var(--r-md);
  background: var(--bg-1);
}

.home-account > a {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  min-height: var(--tap);
  color: inherit;
  text-decoration: none;
  border-radius: inherit;
  transition: transform var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.home-account > a:active { transform: scale(0.97); }

.home-account__name {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  font-size: var(--fs-13);
  color: var(--text-2);
}

.home-account__name .icon { flex: none; color: var(--text-3); }
.home-account__name > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.home-account__balance {
  font-family: var(--font-display);
  font-size: var(--t-fig-sm);
  font-weight: var(--fw-semibold);
  font-stretch: var(--wd-fig);
}

/* A spendable account below zero is a missing entry in real life: the
   balance in danger, and a ring at 40%. */
.home-account.is-negative { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 40%, transparent); }
.home-account.is-negative .home-account__balance { color: var(--danger); }

.home-account--loading { padding: var(--s-4) var(--s-3); min-width: 7.25rem; }
.home-account--add > a { flex-direction: row; align-items: center; color: var(--accent-text); }

/* ---- Where it went ------------------------------------------------------ */
.home-bands {
  display: flex;
  gap: 2px;
  height: 10px;
  border-radius: var(--r-xs);
  overflow: hidden;
}

.home-bands > i {
  flex: var(--seg-share, 1) 1 0;
  min-width: 2px;
  background: var(--seg-color, var(--text-4));
}

.home-legend {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 3rem;
  align-items: baseline;
  gap: var(--s-3) var(--s-3);
  margin-block-start: var(--s-3);
  font-size: var(--fs-14);
}

.home-legend__name {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  color: var(--text-2);
}

.home-legend__name::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--seg-color, var(--text-4));
}

.home-legend__value { text-align: end; }
.home-legend__pct { text-align: end; color: var(--text-3); font-size: var(--fs-13); }

/* ---- What the numbers say ----------------------------------------------- */
.home-notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.home-note {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  border-inline-start: 3px solid var(--note-tone, var(--text-4));
  background: var(--bg-1);
  font-size: var(--fs-14);
}

.home-note__lead { font-weight: var(--fw-semibold); color: var(--text-1); }
.home-note__text { color: var(--text-3); font-size: var(--fs-13); }

.home-note--in   { --note-tone: var(--in); }
.home-note--out  { --note-tone: var(--danger); }
.home-note--hold { --note-tone: var(--saved); }
.home-note--warn { --note-tone: var(--warn); }
.home-note--info { --note-tone: var(--biz); }