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

/* ---------- The movement sheet: the close button floats over the top, as in the bank example ---------- */
.sheet--mv .sheet-head--bare { margin-bottom: calc(-1 * var(--touch)); background: transparent; pointer-events: none; }
.sheet--mv .sheet-head--bare .sheet-x { pointer-events: auto; }
.rec-screen--mv { padding-top: 0; gap: 0; }
.rec-mv-host, .rec-mv { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); min-width: 0; }
/* The test-numbers ribbon on the reading side of the top line, level with the floating close button */

/* Top: kind dot, sentence, big amount, status */
.rec-top { display: grid; justify-items: center; gap: 6px; padding: 6px 0 0; text-align: center; min-width: 0; }
.rec-dot { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--bx-tint); color: var(--bx-ink); }
.rec-title { max-width: 100%; margin-top: 4px; padding-inline: 8px; font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: 1.45; overflow-wrap: anywhere; }
.rec-title:focus { outline: none; }
.rec-amt { font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: 1.15; letter-spacing: -.3px; }
.rec-amt.is-cancelled .money { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; }
.rec-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; min-height: 28px; }
.rec-status .tip-wrap { margin-inline-end: 0; }
.rec-tip-p { display: block; }
.rec-tip-p + .rec-tip-p { margin-top: 6px; }

/* The balance before and after: two equal tiles from the grid */
.rec-bal { gap: 10px; }
.rec-tile { display: grid; align-content: center; gap: 2px; min-width: 0; padding: 10px 14px; border-radius: var(--r-tile); background: var(--card-2); }
.rec-tile-label { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.rec-tile-value { font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: 1.3; text-decoration: none; }
.rec-tile-value--old { color: var(--muted); font-weight: var(--fw-medium); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.rec-bal-note { padding: 10px 14px; border-radius: var(--r-tile); background: var(--card-2); color: var(--ink); font-size: var(--fs-sm); line-height: 1.7; text-align: center; }

/* What the reader can do now */
.rec-acts { display: grid; gap: 10px; }
.rec-warn { display: flex; align-items: flex-start; gap: 6px; color: var(--st-wafeq_failed-fg); font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: 1.6; }
.rec-warn .ico { flex: none; margin-top: 3px; }
.rec-act-line { display: flex; align-items: flex-start; font-size: var(--fs-sm); line-height: 1.7; }
.rec-act-line .tip-wrap { margin-top: 2px; }
.rec-act-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.rec-undo {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  padding-inline: 14px 8px;
  border-radius: var(--r-tile);
  background: var(--st-undoable-bg);
  color: var(--st-undoable-fg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}
.rec-undo-btn { min-height: var(--touch); }
.rec-undo-bar { position: absolute; bottom: 0; inset-inline: 0; height: 3px; background: currentColor; transform-origin: right center; animation: shrink var(--rec-undo-ms, 5000ms) linear forwards; }

/* ---------- Short tabs: a segmented switch like the bank example (also the two parts of the waiting list) ---------- */
.rec-tabs-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); min-width: 0; }
.rec-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 3px;
  padding: 3px;
  border-radius: var(--r-pill);
  background: var(--card-2);
}
.rec-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: var(--touch);
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.rec-tab-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-tab[aria-selected="true"] { background: var(--card); color: var(--ink); font-weight: var(--fw-bold); box-shadow: inset 0 0 0 1.5px var(--gold), var(--shadow-1); }
.rec-tab .badge { flex: none; }
.rec-panel { min-width: 0; }
.rec-panel:focus-visible { outline-offset: 4px; border-radius: 12px; }
/* A panel rises only when the reader picks its tab, never when the sheet repaints itself */
.rec-panel.is-entering { animation: rise var(--dur-2) var(--ease) both; }

/* ---------- Facts: the label on the reading side, the value at the other end of the line ---------- */
.rec-data, .rec-wq { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); min-width: 0; }
.rec-facts { margin: 0; min-width: 0; }
.rec-fact { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--touch); padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.rec-fact:last-child { border-bottom: 0; }
.rec-fact dt { flex: none; max-width: 42%; color: var(--muted); }
.rec-fact dd { margin: 0; min-width: 0; text-align: end; font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.rec-val { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 4px 8px; min-width: 0; }
.rec-boxlink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-height: var(--touch);
  margin-block: -8px;
  margin-inline-end: -6px;
  padding-inline: 6px;
  border-radius: var(--r-row);
  color: var(--ink);
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease);
}
.rec-boxlink:hover { background: var(--row-hover); }
.rec-boxlink > .ico { flex: none; color: var(--muted); }
/* A long box name wraps inside the facts list instead of being cut */
.rec-boxlink .box-tag > span { white-space: normal; overflow: visible; text-overflow: clip; }
.rec-fact .ref-link { display: inline-flex; align-items: center; min-height: var(--touch); margin-block: -8px; }
.rec-fact .src-link { min-height: var(--touch); }
.rec-fact .src { margin-block: -8px; }

/* What was said */
.rec-said { margin: 0; display: grid; gap: 4px; padding: 10px 14px; border-radius: var(--r-tile); background: var(--card-2); }
.rec-said-label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.rec-said-text { margin: 0; font-size: var(--fs-md); line-height: 1.7; overflow-wrap: anywhere; white-space: pre-line; }

/* Receipt */
.rec-rc { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 12px; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: var(--r-tile); }
.rec-rc-thumb { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; overflow: hidden; border: 0; border-radius: 12px; background: var(--card-2); color: var(--gold-ink); }
.rec-rc-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rec-rc-thumb--none { color: var(--muted); }
.rec-rc-info { display: grid; min-width: 0; }
.rec-rc-title { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.rec-rc-meta { display: flex; align-items: center; color: var(--muted); font-size: var(--fs-xs); }
.rec-rc-act { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.rec-rc-add { width: 100%; cursor: pointer; }
.rec-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Reverse (box owner) and the read-only note (the other person) */
.rec-ro { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-sm); }
.rec-ro .tip-wrap { margin-inline-end: 0; }
.rec-ro > .ico { flex: none; }

/* History */
.rec-tl .tl-title { font-size: var(--fs-sm); }
.rec-voice-line { display: inline-flex; align-items: flex-start; gap: 6px; color: var(--gold-ink); }
.rec-voice-line .ico { flex: none; margin-top: 4px; }

/* Wafeq (Karim only) */
.rec-copyref { gap: 2px; }
.rec-wq .src-link { min-height: var(--touch); }
.rec-desc { margin: 0; display: grid; gap: 8px; }
.rec-desc-head { display: flex; align-items: center; font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.rec-desc-text {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--r-tile);
  background: var(--card-2);
  border: 1px dashed var(--line-strong);
  font-size: var(--fs-sm);
  line-height: 1.9;
  overflow-wrap: anywhere;
  -webkit-user-select: text;
  user-select: text;
}
.rec-wq-note { padding: 10px 12px; border-radius: var(--r-tile); background: var(--card-2); color: var(--ink); font-size: var(--fs-sm); line-height: 1.7; }

/* An old or wrong link */
.rec-notfound { display: grid; justify-items: center; gap: var(--sp-2); padding: 0 4px 4px; text-align: center; }
.rec-notfound .medallion { color: var(--gold-foil); }
.rec-nf-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.rec-nf-title:focus { outline: none; }
.rec-nf-body { margin-bottom: var(--sp-2); color: var(--muted); font-size: var(--fs-sm); }

/* ---------- Dialogs opened from the sheet: decline, withdraw, reverse, the receipt ---------- */
.rec-dialog .rec-bal { margin: 2px 0; }
.rec-conseq-text { line-height: 1.8; }
.rec-rc-full { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: 12px; background: var(--card-2); }
.rec-rc-big { display: grid; place-items: center; min-height: 180px; border-radius: 12px; background: var(--card-2); color: var(--muted); }
.rec-rc-sheetmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; color: var(--muted); font-size: var(--fs-xs); }
.rec-rc-name { font-family: var(--font-mono); overflow-wrap: anywhere; }

/* ---------- Waiting list ---------- */
.rec-wait { width: 100%; max-width: 760px; }
.rec-wait-head { display: flex; align-items: center; gap: 10px; min-height: var(--touch); }
.rec-wait .rec-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.rec-group .sec-title .tip-wrap { margin-inline-end: 0; }
.rec-group .sec-title { gap: 6px; }
.rec-wlist { list-style: none; margin: 0; padding: 0; }
.rec-wrow { padding-bottom: 12px; }
.rec-wrow + .rec-wrow { padding-top: 4px; border-top: 1px solid var(--line); }
/* The buttons line up under the sentence, past the round kind icon (42 px and a 12 px gap) */
.rec-wact { display: grid; gap: 8px; padding-inline-start: 54px; }
.rec-wbtn { min-height: var(--touch); }
.rec-wbtn--yes { color: var(--gold-ink); border-color: var(--gold); }
.rec-empty .empty { padding: 24px 8px; }
@media (max-width: 599px) { .rec-wact { padding-inline-start: 50px; } }
@media (min-width: 1024px) { .rec-back { display: none; } }

/* ---------- Login: four pages compared (Karim 2026-10-09: «make me four options»); he chose 1, the box. The other three stay in the look lab, in the box colours and patterns of the guide ---------- */
.rec-login { width: 100%; max-width: 440px; margin-inline: auto; display: grid; gap: var(--sp-4); align-content: start; }
.rec-logo { display: block; width: 168px; height: 74px; background: var(--logo-tint); -webkit-mask: url("../assets/logo.png") center / contain no-repeat; mask: url("../assets/logo.png") center / contain no-repeat; }
.rec-welcome { margin: 0; text-align: center; font-size: var(--fs-md); font-weight: var(--fw-medium); line-height: 1.6; color: var(--muted); text-wrap: balance; }
.rec-login-form { display: grid; gap: var(--sp-4); }
.rec-who { margin: 0; justify-self: center; text-align: center; }
.rec-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rec-pick { position: relative; min-width: 0; font: inherit; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--ink); cursor: pointer; transition: box-shadow var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.rec-pick-name { position: relative; max-width: 100%; white-space: nowrap; overflow-x: clip; overflow-y: visible; text-overflow: ellipsis; line-height: 1.6; }
.rec-pick-pat { position: absolute; inset: 0; pointer-events: none; background: var(--bx-on); opacity: .12; }
.rec-pick[data-who="nour"] .rec-pick-pat { -webkit-mask: url("../assets/patterns/botanical.png") 0 0 / 260px auto repeat; mask: url("../assets/patterns/botanical.png") 0 0 / 260px auto repeat; }
.rec-pick[data-who="karim"] .rec-pick-pat { opacity: .2; -webkit-mask: url("../assets/patterns/lace_medallion.png") center / 150px auto no-repeat; mask: url("../assets/patterns/lace_medallion.png") center / 150px auto no-repeat; }
.rec-pick-tick { position: absolute; top: 12px; inset-inline-end: 12px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--bx-on) 40%, transparent); color: transparent; }
.rec-pick[aria-pressed="true"] .rec-pick-tick { background: var(--bx-on); border-color: var(--bx-on); color: var(--bx-fill); }
.rec-go { gap: 10px; }

/* 1. The lid of the box: the box colour with its pattern, and the white label with the logo, as on the chocolate box. */
.rec-lid { position: relative; overflow: hidden; display: grid; justify-items: center; align-content: center; gap: 18px; min-height: 290px; padding: 36px 22px 30px; border-radius: var(--r-box) var(--r-box) 56px 56px; background: var(--bx-fill); box-shadow: var(--shadow-2); }
.rec-lid-pat { position: absolute; inset: 0; background: var(--bx-on); opacity: .1; -webkit-mask: url("../assets/patterns/botanical.png") 0 0 / 300px auto repeat; mask: url("../assets/patterns/botanical.png") 0 0 / 300px auto repeat; }
.rec-lid-label { position: relative; display: grid; place-items: center; padding: 22px 30px; border-radius: 10px; background: #fffaf3; box-shadow: 0 2px 12px rgba(31, 42, 51, .12); }
.rec-lid-label::after { content: ""; position: absolute; inset: 6px; border: 1px solid color-mix(in srgb, var(--c-gold) 55%, transparent); border-radius: 6px; }
.rec-lid-label .rec-logo { width: 150px; height: 66px; background: var(--c-gold); }
.rec-lid .rec-welcome { position: relative; color: var(--bx-on); }
.rec-picks--medal { grid-template-columns: auto auto; justify-content: center; gap: 40px; }
.rec-pick--medal { display: grid; justify-items: center; gap: 10px; padding: 6px; border: 0; border-radius: var(--r-tile); background: none; }
.rec-pick--medal .avatar { box-shadow: 0 0 0 4px var(--bg), 0 0 0 5.5px var(--line-ctl); transition: box-shadow var(--dur-1) var(--ease); }
.rec-pick--medal[aria-pressed="true"] .avatar { box-shadow: 0 0 0 4px var(--bg), 0 0 0 7px var(--gold); }
.rec-pick--medal[aria-pressed="false"] { color: var(--muted); }

/* 2. The seal: the lace circle of the macaron box around the logo, then a tall card in each person's box colour and pattern. */
.rec-login[data-entry="seal"] { justify-items: center; }
/* The seal and the invitation stand in the middle of the screen; the lid and the bank start at the top, like the home page. */
.rec-login[data-entry="seal"], .rec-login[data-entry="invite"] { min-height: calc(100dvh - 104px); align-content: center; }
.rec-login[data-entry="seal"] > .rec-login-form { width: 100%; }
.rec-seal { position: relative; width: 224px; aspect-ratio: 1; display: grid; place-items: center; margin-top: 6px; }
.rec-seal-ring { position: absolute; inset: 0; background: var(--gold); -webkit-mask: url("../assets/patterns/lace_medallion.png") center / contain no-repeat; mask: url("../assets/patterns/lace_medallion.png") center / contain no-repeat; }
.rec-seal .rec-logo { position: relative; width: 80px; height: 36px; }
.rec-orn { display: block; width: 168px; height: 14px; background: var(--gold); opacity: .7; -webkit-mask: url("../assets/patterns/divider.png") center / contain no-repeat; mask: url("../assets/patterns/divider.png") center / contain no-repeat; }
.rec-pick--tall { overflow: hidden; display: grid; place-items: center; min-height: 168px; padding: 20px 12px; border: 0; border-radius: var(--r-card); background: var(--bx-fill); color: var(--bx-on); font-size: var(--fs-lg); }
.rec-pick--tall[aria-pressed="true"], .rec-pick--bank[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--gold); }

/* 3. The bank: the logo at the top, the question as the title, a card for each person like the home cards. */
.rec-bank-head { display: flex; padding-top: 4px; }
.rec-bank-head .logo-mark { width: 112px; }
.rec-bank-title { margin: 4px 0 0; font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: 1.5; color: var(--ink); }
.rec-bank-sub { margin: -10px 0 4px; font-size: var(--fs-sm); line-height: 1.6; color: var(--muted); }
.rec-picks--bank { grid-template-columns: 1fr; gap: 14px; }
.rec-pick--bank { overflow: hidden; display: flex; align-items: center; gap: 14px; min-height: 124px; padding: 20px; border: 0; border-radius: var(--r-box); background: var(--bx-fill); color: var(--bx-on); font-size: var(--fs-xl); text-align: start; box-shadow: var(--shadow-1); }
.rec-pick--bank .avatar { position: relative; box-shadow: 0 0 0 3px rgba(255, 255, 255, .7); }
.rec-pick--bank .rec-pick-tick { position: relative; top: auto; inset-inline-end: auto; margin-inline-start: auto; width: 30px; height: 30px; }
.rec-pick--bank[data-who="karim"] .rec-pick-pat { opacity: .16; -webkit-mask-size: 170px auto; mask-size: 170px auto; }

/* 4. The invitation: one card with a double gold rule and the corner flourishes of the macaron box; square corners, like the pattern. */
/* Bottom padding clears the corner flourishes under the full-width button (Karim, 2026-10-10). */
.rec-invite { position: relative; justify-items: center; gap: 14px; padding: 56px 34px 84px; text-align: center; background: var(--card); border-radius: 6px; box-shadow: var(--shadow-2); }
.rec-invite-deco { position: absolute; inset: 10px; pointer-events: none; border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); }
.rec-invite-deco::before { content: ""; position: absolute; inset: 4px; border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent); }
.rec-invite-deco::after { content: ""; position: absolute; inset: 10px; background: var(--gold); opacity: .75; -webkit-mask: url("../assets/patterns/corner_tl.png") top left / 52px no-repeat, url("../assets/patterns/corner_tr.png") top right / 52px no-repeat, url("../assets/patterns/corner_bl.png") bottom left / 52px no-repeat, url("../assets/patterns/corner_br.png") bottom right / 52px no-repeat; mask: url("../assets/patterns/corner_tl.png") top left / 52px no-repeat, url("../assets/patterns/corner_tr.png") top right / 52px no-repeat, url("../assets/patterns/corner_bl.png") bottom left / 52px no-repeat, url("../assets/patterns/corner_br.png") bottom right / 52px no-repeat; }
.rec-invite > :not(.rec-invite-deco) { position: relative; }
.rec-invite .rec-logo { width: 156px; height: 68px; }
.rec-invite .rec-welcome { max-width: 15em; font-size: var(--fs-lg); color: var(--ink); }
.rec-invite .rec-who { margin-top: 8px; }
/* The Google sign-in card has no line under the welcome (Karim, 2026-10-10), so the button keeps that breathing room. */
.rec-invite .rec-welcome + .rec-go { margin-top: 10px; }
.rec-invite > .rec-picks, .rec-invite > .rec-go { justify-self: stretch; }
.rec-picks--pill { gap: 0; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card-2); }
.rec-pick--pill { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 6px 12px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted); }
.rec-pick--pill[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-1), inset 0 0 0 1.5px var(--gold); }

/* ---------- Narrow phones ---------- */
@media (max-width: 380px) {
  .rec-amt { font-size: var(--fs-2xl); }
  .rec-tile { padding: 10px 12px; }
  .rec-tile-value { font-size: var(--fs-md); }
  .rec-tab { padding: 0 6px; }
}

/* Guide v2: the scroll divider of the macaron box closes the head of the movement sheet. */
.rec-top::after {
  content: "";
  display: block;
  justify-self: center;
  width: min(240px, 78%);
  height: 12px;
  margin-top: 4px;
  background: var(--gold);
  opacity: .75;
  -webkit-mask: url("../assets/patterns/divider.png") center / contain no-repeat;
  mask: url("../assets/patterns/divider.png") center / contain no-repeat;
}
/* Karim 2026-10-09: buttons balanced in width. The action rows sit inside the same inner edge as the receipt box (12 px padding + 1 px border), with the same gap to their «!», so «أضف إيصالًا» and «اعكس الحركة» are equal and aligned. */
.rec-act-row, .rec-act-line { padding-inline: 13px; }
.rec-act-row, .rec-rc-act { column-gap: 12px; }

/* The Google sign-in card before any data (stage 6.2): the invitation card alone, centred on the page. */
.signin-page { min-height: 100dvh; display: grid; place-items: center; padding: var(--sp-4, 16px); }
.signin-page .rec-login[data-entry="invite"] { min-height: auto; }
.rec-auth-note { text-align: center; color: var(--danger, #b3261e); }
.more-account { display: grid; gap: var(--sp-3, 12px); }
.more-row--static { cursor: default; }
.more-row-sub { display: block; font-size: .85em; opacity: .7; }