/*
  تنسيق الرئيسية في النسخة الثانية بشكل البنوك: رأس الجوال، وبطاقات الصناديق الزاهية، وأزرار الحركة، وقسما ما ينتظرك وآخر الحركات.
  في الجوال تنزلق البطاقات أفقيًا وتقف واحدةٌ في الوسط وتحتها نقاط، وأزرار الحركة دوائر تحتها كلمتها.
  وفي الحاسوب أربع بطاقات متساوية حول المختارة منها حلقة، والأزرار حبوب متساوية، وآخر الحركات عمود عريض بجانبه ما ينتظرك.
  وفيه زخرفة بطاقة الصندوق وسطر صاحبها، وتستعملهما صفحة الصندوق كذلك.
  يُقرأ بعد التنسيق المشترك.
  وإن غاب ظهرت الرئيسية بالتنسيق المشترك وحده، بلا انزلاق البطاقات ولا ترتيب الأزرار.
*/

.screen--home { gap: var(--sp-4); }

/* ---------- Header (phone): avatar, greeting, bell. The desktop keeps the greeting alone. ---------- */
.home-head { display: flex; align-items: center; gap: 12px; min-height: var(--touch); padding-top: 2px; }
.home-hello { flex: 1 1 auto; min-width: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Pieces of a box card (also used by the box page) ---------- */
/* The decorative layer is clipped to the card, so the card itself can let an open «!» bubble out. */
.home-deco { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
/* Guide v2: the botanical pattern of the chocolate box, a darker tone of the card colour (it replaces the white circle). */
.home-deco::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--bx-fill) 72%, #2b2418); opacity: .22; -webkit-mask: url("../assets/patterns/botanical.png") 0 0 / 345px auto repeat; mask: url("../assets/patterns/botanical.png") 0 0 / 345px auto repeat; }
.home-mark { position: absolute; top: 20px; inset-inline-end: 20px; width: 62px; background: var(--bx-on); opacity: .4; }
.home-owner { display: flex; align-items: center; gap: 6px; min-height: 26px; color: var(--bx-sub); font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1.3; }
.home-owner .tip-wrap { margin-inline-end: 0; }

/* ---------- Box cards on the phone: a carousel that stops one card in the middle ---------- */
.home-boxes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.home-cards {
  display: flex;
  gap: 12px;
  margin-inline: calc(-1 * var(--gutter));
  padding: 2px var(--gutter) 6px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.home-cards::-webkit-scrollbar { display: none; }
.home-card {
  flex: 0 0 84%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 184px;
  padding: 18px 20px;
  overflow: visible;
  text-align: start;
}
/* One overlay button per card; the words sit above it and let taps through, except the «!» of the lock. */
.home-card-hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.home-card .home-card-hit:focus-visible { outline: 3px solid var(--bx-on); outline-offset: -6px; }
.home-card > p { position: relative; z-index: 2; margin: 0; pointer-events: none; }
.home-card .tip-wrap { pointer-events: auto; }
/* An open «!» bubble stays above the next card. */
.home-card > p:has(.tip[aria-expanded="true"]) { z-index: 20; }
.home-card .home-card-name { padding-inline-end: 74px; font-size: var(--fs-md); line-height: var(--lh-tight); }
.home-card-owner { margin-top: 2px; }
.home-card > .home-card-bal { margin-top: auto; padding-top: 14px; white-space: nowrap; }

.home-dots { display: flex; justify-content: center; gap: 6px; min-height: 6px; }
/* The dots are the only sign of four cards on the phone: the quiet ones in the muted ink (at least 3:1), the selected one wide and gold. */
.home-dots i { display: block; width: 6px; height: 6px; border-radius: 3px; background: var(--muted); transition: width var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease); }
.home-dots i.is-on { width: 18px; background: var(--gold-ink); }

/* ---------- Actions: round 56 px rings with their word under them, four equal columns ---------- */
.home-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.home-act {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0;
  min-height: var(--touch);
  margin: 0;
  padding: 4px 2px 6px;
  border: 0;
  border-radius: var(--r-tile);
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: var(--fw-medium);
  line-height: 1.3;
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
}
.home-act-ring {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--touch-primary);
  height: var(--touch-primary);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-1);
  transition: background-color var(--dur-1) var(--ease);
}
.home-act--mic .home-act-ring { background: var(--btn-primary-bg); color: var(--btn-primary-ink); }
.home-act:active .home-act-ring { background: var(--card-2); }
.home-act--mic:active .home-act-ring { background: var(--btn-primary-bg-press); }
.home-act-label { max-width: 100%; overflow-wrap: anywhere; }

/* ---------- Waiting for you, then the recent movements (one column on the phone) ---------- */
.home-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.home-pend-body, .home-recent-body { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }

/* ---------- Desktop from 1024 px ---------- */
@media (min-width: 1024px) {
  .screen--home { gap: 22px; }
  .home-head { padding-top: 0; }
  .home-head .avatar, .home-bell { display: none; }
  .home-hello { font-size: var(--fs-2xl); }

  .home-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .home-card { min-height: 158px; padding: 16px 18px; transition: box-shadow var(--dur-1) var(--ease); }
  .home-card[data-sel="yes"] { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--bx-deep); }
  .home-card .home-mark { width: 52px; top: 18px; inset-inline-end: 18px; }
  .home-card .home-card-name { padding-inline-end: 62px; }
  .home-card .home-card-bal { font-size: 26px; }
  .home-dots { display: none; }

  .home-acts { grid-template-columns: repeat(4, minmax(0, 180px)); gap: 12px; }
  .home-act {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-height: var(--touch-primary);
    padding: 0 16px;
    border-radius: var(--r-pill);
    background: var(--card);
    box-shadow: var(--shadow-1);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    white-space: nowrap;
    transition: background-color var(--dur-1) var(--ease);
  }
  .home-act-ring, .home-act--mic .home-act-ring, .home-act:active .home-act-ring, .home-act--mic:active .home-act-ring { width: auto; height: auto; background: none; box-shadow: none; color: inherit; }
  .home-act-label { overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
  .home-act:hover { background: var(--card-2); }
  .home-act--mic { background: var(--btn-primary-bg); color: var(--btn-primary-ink); }
  .home-act--mic:hover, .home-act--mic:active { background: var(--btn-primary-bg-press); }

  /*
    Below 1280 px two columns would be about 340 px each, too narrow for a row with its chip to stay one readable
    line: waiting for you sits above the recent movements, both the full width (as on the phone).
  */
  .home-cols { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pend" "moves"; gap: 20px; }
  .home-cols.is-solo { grid-template-areas: "moves"; }
  .home-pend { grid-area: pend; }
  .home-recent { grid-area: moves; }
}
@media (min-width: 1280px) {
  /* Recent movements and waiting for you side by side, in two equal columns (waiting on the left in Arabic). */
  .home-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "moves pend"; }
  .home-cols.is-solo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "moves"; }
}
/* Four cards of about 160 px: the brand mark steps aside so each name has the card's full width (equal siblings). */
@media (min-width: 1024px) and (max-width: 1279px) {
  .home-card .home-mark { display: none; }
  .home-card .home-card-name { padding-inline-end: 0; }
}
@media (min-width: 1280px) {
  .home-card .home-card-bal { font-size: 30px; }
}

/* Karim 2026-10-09: the logo once, at the top right of the page; bell and avatar at the left; the greeting below. */
.home-head { flex-wrap: wrap; row-gap: 6px; }
.home-logo { width: 104px; flex: none; }
.home-head-gap { flex: 1 1 auto; }
.home-head .home-hello { order: 5; flex-basis: 100%; font-size: var(--fs-xl); }
@media (min-width: 1024px) { .home-logo, .home-head-gap { display: none; } }
/* The day and date under the greeting, on the phone only (the sidebar shows them on the computer). */
.home-head .home-date { order: 6; flex-basis: 100%; margin: -6px 0 0; color: var(--muted); font-size: var(--fs-sm); }
@media (min-width: 1024px) { .home-head .home-date { display: none; } }
/* Karim 2026-10-09: the hamza and the tanween of «أهلًا» were clipped; room above and below the line, clipping sideways only. */
.home-hello, .home-head .home-hello { line-height: 1.7; padding-block: 4px 2px; overflow-x: clip; overflow-y: visible; }