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

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 12px; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ar);
  font-size: 16px;
  line-height: var(--lh-text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
html.has-sheet body { overflow: hidden; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--gold-ink); }
h1, h2, h3, h4 { line-height: var(--lh-tight); margin: 0; }
p { margin: 0; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.view:focus-visible { outline: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
.skip { position: absolute; top: -60px; inset-inline-start: 12px; z-index: 100; background: var(--card); color: var(--ink); padding: 10px 14px; border-radius: var(--r-ctl); box-shadow: var(--shadow-2); }
.skip:focus { top: 10px; }

/* ---------- Shell: phone first (content, then the bottom tab bar) ---------- */
#app { position: relative; z-index: 1; }
.shell { min-height: 100vh; min-height: 100dvh; }
.side { display: none; }
.main-col {
  position: relative;
  max-width: var(--phone-max);
  margin: 0 auto;
  /* The top keeps clear of the iPhone status bar (this space was the test ribbon's line until 2026-10-10). */
  padding: calc(env(safe-area-inset-top) + 8px) var(--gutter) calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom));
}
.view { display: block; min-height: 40vh; }
.screen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); padding-top: var(--sp-3); animation: rise var(--dur-3) var(--ease) both; }
.screen.is-quiet { animation: none; }

.tabbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 30;
  background: var(--tabbar-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
}
.tabbar-in { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: var(--phone-max); margin: 0 auto; }
/* «تسجيل قيد» in the middle of the tab bar: a gold circle that rises above the bar, as in banking apps (Karim, 2026-10-10). */
.tab-record { border: 0; background: none; cursor: pointer; font: inherit; color: var(--ink); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.tab-record-ring { display: grid; place-items: center; width: 54px; height: 54px; margin-top: -24px; border-radius: 50%; background: var(--btn-primary-bg); color: var(--btn-primary-ink); box-shadow: 0 0 0 4px var(--tabbar-bg), var(--shadow-1); }
.tab-record:active .tab-record-ring { background: var(--btn-primary-bg-press); }
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: 2px 4px;
  border-radius: var(--r-row);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease);
}
.tab[aria-current="page"] { color: var(--gold-ink); font-weight: var(--fw-bold); }
html[data-route="login"] .tabbar, html[data-route="login"] .side { display: none; }
html[data-route="login"] .main-col { padding-bottom: 32px; }

.avatar {
  --av: 40px;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--av);
  height: var(--av);
  border-radius: 50%;
  background: var(--gold);
  color: var(--on-gold);
  font-weight: var(--fw-bold);
  font-size: calc(var(--av) * .42);
  line-height: 1;
}
.logo-mark {
  display: block;
  width: 116px;
  aspect-ratio: 600 / 263;
  background: var(--logo-tint);
  -webkit-mask: url("../assets/logo.png") center / contain no-repeat;
  mask: url("../assets/logo.png") center / contain no-repeat;
}

/* ---------- Desktop from 1024 px: sidebar 236 px on the right (inline start), main column beside it ---------- */
@media (min-width: 1024px) {
  .shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); align-items: start; }
  .side {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100vh;
    height: 100dvh;
    padding: 26px 14px 18px;
    background: var(--side-bg);
    border-inline-end: 1px solid var(--line);
  }
  /* Centred in the sidebar, the logo, the ribbon, the links and the name, so no empty strip on one side (Karim, 2026-10-09). */
  .side-logo { display: inline-flex; align-self: center; margin: 0 0 14px; border-radius: var(--r-row); }
  .side-nav { display: grid; gap: 2px; align-self: center; width: min(100%, 176px); }
  .side-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 0 12px;
    border-radius: var(--r-row);
    color: var(--muted);
    font-size: var(--fs-md);
    text-decoration: none;
    transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
  }
  .side-item:hover { background: var(--row-hover); color: var(--ink); }
  .side-item[aria-current="page"] { background: var(--nav-on-bg); color: var(--ink); font-weight: var(--fw-bold); }
  .side-badge {
    margin-inline-start: auto;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: var(--r-pill);
    background: var(--badge-bg);
    color: var(--badge-ink);
    font-size: 12px;
    font-weight: var(--fw-bold);
    line-height: 22px;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  /* «تسجيل قيد» above the name, the same size and shape as the links above it (Karim, 2026-10-10), in gold, on every page. */
  .btn.side-record {
    margin-top: auto; margin-bottom: 10px; align-self: center;
    width: min(100%, 176px); min-height: 46px; padding: 0 12px;
    justify-content: flex-start; gap: 12px;
    border-radius: var(--r-row); font-size: var(--fs-md);
  }
  .side-me {
    align-self: center;
    width: min(100%, 176px);
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 8px 10px;
    border-radius: var(--r-row);
    color: var(--ink);
    font-weight: var(--fw-medium);
    text-decoration: none;
    transition: background-color var(--dur-1) var(--ease);
  }
  .side-me .avatar { --av: 34px; }
  .side-me:hover { background: var(--row-hover); }
  .side-me[aria-current="page"] { background: var(--nav-on-bg); font-weight: var(--fw-bold); }
  .side-me-text { display: grid; min-width: 0; line-height: 1.35; }
  .side-me-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .side-me-date { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-regular, 400); white-space: nowrap; }
  .tabbar { display: none; }
  .main-col { max-width: var(--page-max); width: 100%; margin: 0; padding: 30px 36px 48px; }
  .screen { padding-top: 0; gap: var(--sp-5); }
  html[data-route="login"] .shell { grid-template-columns: minmax(0, 1fr); }
  html[data-route="login"] .main-col { justify-self: center; max-width: var(--phone-max); padding-top: 12px; }
}

/* ---------- Page pieces ---------- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; min-height: var(--touch); }
.page-title { font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.page-sub { color: var(--muted); font-size: var(--fs-sm); margin-top: 4px; display: flex; align-items: center; }
.page-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
@media (min-width: 1024px) { .page-title { font-size: var(--fs-2xl); } }
.back-bar { margin: 4px 0 -4px; }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--touch);
  padding: 0 4px 0 14px;
  border-radius: var(--r-pill);
  color: var(--ink);
  text-decoration: none;
  font-weight: var(--fw-medium);
  transition: background-color var(--dur-1) var(--ease);
}
.back-link:hover { background: var(--card-2); }
.section-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); display: flex; align-items: center; gap: 8px; }
.muted { color: var(--muted); }
.stack { display: grid; gap: var(--sp-3); }
.stack-lg { display: grid; gap: var(--sp-5); }
.row { display: flex; align-items: center; gap: var(--sp-2); }
.spacer { flex: 1; }

/* A bank section: a card with a heading line and an optional link at its end (such as the link to all rows) */
.sec { background: var(--card); border-radius: var(--r-card); padding: 4px 16px 8px; min-width: 0; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 48px; padding-top: 4px; }
.sec-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); display: flex; align-items: center; gap: 8px; }
.sec-link { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch); min-width: var(--touch); padding-inline: 8px; margin-inline-end: -8px; border-radius: var(--r-row); color: var(--gold-ink); font-size: var(--fs-md); font-weight: var(--fw-medium); text-decoration: none; }
.sec-link:hover { background: var(--row-hover); }
@media (min-width: 1024px) { .sec { padding: 6px 20px 12px; } }

/* Equal grids: balance comes from the grid itself */
.grid-eq, .grid-2, .grid-3, .grid-4, .boxes-grid, .kpis { display: grid; gap: var(--sp-3); grid-auto-rows: 1fr; }
.grid-2, .boxes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3, .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-eq { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 359px) { .grid-3, .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Cards ---------- */
.card {
  position: relative;
  background: var(--card);
  border: 0;
  border-radius: var(--r-card);
  padding: var(--sp-4);
  box-shadow: var(--shadow-1);
  min-width: 0;
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.card-title { font-size: var(--fs-md); font-weight: var(--fw-bold); display: flex; align-items: center; gap: 6px; }
.card-sub { color: var(--muted); font-size: var(--fs-sm); }
.card--flat { box-shadow: none; }
.card--notice { display: grid; justify-items: center; gap: var(--sp-2); text-align: center; padding: 28px 20px; }
.card--notice .medallion { color: var(--gold-foil); }
a.card { display: block; color: inherit; text-decoration: none; }

/* Box colours: any element with data-box gets --bx-* variables */
[data-box] { --bx-on: var(--box-on); --bx-sub: var(--box-sub); }
[data-box="NOUR_TRY"] { --bx-fill: var(--box-NOUR_TRY-fill); --bx-tint: var(--box-NOUR_TRY-tint); --bx-ink: var(--box-NOUR_TRY-ink); --bx-deep: var(--box-NOUR_TRY-deep); }
[data-box="NOUR_USD"] { --bx-fill: var(--box-NOUR_USD-fill); --bx-tint: var(--box-NOUR_USD-tint); --bx-ink: var(--box-NOUR_USD-ink); --bx-deep: var(--box-NOUR_USD-deep); }
[data-box="KARIM_TRY"] { --bx-fill: var(--box-KARIM_TRY-fill); --bx-tint: var(--box-KARIM_TRY-tint); --bx-ink: var(--box-KARIM_TRY-ink); --bx-deep: var(--box-KARIM_TRY-deep); }
[data-box="KARIM_USD"] { --bx-fill: var(--box-KARIM_USD-fill); --bx-tint: var(--box-KARIM_USD-tint); --bx-ink: var(--box-KARIM_USD-ink); --bx-deep: var(--box-KARIM_USD-deep); }

/* Box card: the bright fill of its box with dark ink, in both themes (all text pairs at least 4.5:1) */
.card--box {
  overflow: hidden;
  background: var(--bx-fill);
  color: var(--bx-on);
  border-radius: var(--r-box);
  box-shadow: none;
}
.card--box .box-label { color: var(--bx-on); font-weight: var(--fw-bold); font-size: var(--fs-md); }
.card--box .box-sub, .card--box .card-sub, .card--box .muted { color: var(--bx-sub); }
.card--box .box-balance { font-size: var(--fs-4xl); font-weight: var(--fw-bold); color: var(--bx-on); line-height: 1.1; letter-spacing: -.5px; }
/* Box balances in black on every card, and in red with the minus sign when below zero (Karim, 2026-10-09). */
.card--box .box-balance, .boxp-bal-num, .vc-card-num, .vc-boxpick-num { color: #16120f; }
.card--box .money--neg, .boxp-card .money--neg, .vc-card .money--neg, .vc-boxpick .money--neg { color: #b42318; }
.card--box :focus-visible, .card--box:focus-visible { outline-color: var(--box-on); }
.box-tint { background: var(--bx-tint); color: var(--bx-ink); }
.box-tag { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: var(--fw-medium); min-width: 0; }
.box-tag > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.box-dot { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--bx-fill); box-shadow: inset 0 0 0 1.5px var(--bx-deep); }
.lock-note { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: var(--fw-medium); }

/* ---------- One movement = one line (ui.moveRow, ui.moveList) ---------- */
/* One column that may shrink: a long sentence wraps to a second line and is cut only after it, it never widens the page (Karim [2026-10-09]). */
/* The list is a size container: a row's chip word follows the width of its own list, not the window. */
.mv-list { display: grid; grid-template-columns: minmax(0, 1fr); container-type: inline-size; }
.mv-rows { list-style: none; margin: 0; padding: 0; }
.mv-day + .mv-day { margin-top: 2px; }
.mv-day-title { padding: 10px 0 2px; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.mv-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  margin: 0;
  padding: 7px 8px;
  border: 0;
  border-radius: var(--r-row);
  background: transparent;
  color: inherit;
  text-align: start;
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease);
}
.mv-row:hover { background: var(--row-hover); }
/* Inside a bank section the hover tint reaches the section edge while the icons line up with its title. */
.sec .mv-row { width: calc(100% + 16px); margin-inline: -8px; }
.mv-dot { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--bx-tint); color: var(--bx-ink); }
.mv-text { flex: 1 1 auto; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; white-space: normal; overflow-wrap: break-word; line-height: 1.45; font-size: var(--fs-md); font-weight: var(--fw-medium); }
.mv-chip { flex: none; }
.mv-amt { flex: none; font-size: var(--fs-md); font-weight: var(--fw-bold); }
/* The other side after the sentence, quieter; and the balance after the movement under its amount (Karim, 2026-10-09/10). */
.mv-party { color: var(--muted); font-weight: var(--fw-regular, 400); }
.mv-amt:has(.mv-bal) { display: grid; justify-items: end; gap: 2px; }
.mv-bal { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); white-space: nowrap; }
.mv-bal .money { color: var(--ink); }
.mv-row.is-cancelled .mv-text, .mv-row.is-cancelled .mv-amt { color: var(--muted); }
.mv-row.is-cancelled .money { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.mv-empty { padding: 14px 0; color: var(--muted); font-size: var(--fs-sm); }
/* A row chip names its status in a short word in a narrow list (a phone, a side column); the full word stays for screen readers. */
.chip-label--short { display: none; }
@container (max-width: 520px) {
  .mv-chip .chip-label--full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mv-chip .chip-label--short { display: inline; }
}
@media (max-width: 599px) {
  .mv-row { gap: 10px; }
  .mv-dot { width: 40px; height: 40px; }
}

/* ---------- Chips and statuses ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: 2px 9px;
  border-radius: var(--r-chip);
  font-size: 12.5px;
  font-weight: var(--fw-bold);
  line-height: 1.3;
  white-space: nowrap;
  background: var(--card-2);
  color: var(--ink);
}
.chip .ico { flex: none; }
.st[data-st="recorded"] { color: var(--st-recorded-fg); background: var(--st-recorded-bg); }
.st[data-st="undoable"] { color: var(--st-undoable-fg); background: var(--st-undoable-bg); }
.st[data-st="wafeq_draft"] { color: var(--st-wafeq_draft-fg); background: var(--st-wafeq_draft-bg); }
.st[data-st="wafeq_posted"] { color: var(--st-wafeq_posted-fg); background: var(--st-wafeq_posted-bg); }
.st[data-st="wafeq_failed"] { color: var(--st-wafeq_failed-fg); background: var(--st-wafeq_failed-bg); }
.st[data-st="waiting"] { color: var(--st-waiting-fg); background: var(--st-waiting-bg); }
.st[data-st="cancelled"] { color: var(--st-cancelled-fg); background: var(--st-cancelled-bg); }
.st[data-st="cancelled"] .chip-label { text-decoration: line-through; text-decoration-thickness: 1px; }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chips-eq { display: flex; gap: var(--sp-2); }
.chips-eq > * { flex: 1 1 0; min-width: 0; justify-content: center; }
.chip-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
  padding: 8px 10px;
  border-radius: var(--r-tile);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  text-align: center;
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.chip-btn:hover { border-color: var(--line-strong); }
.chip-btn .chip-count { font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: 1.1; }
.chip-btn .chip-text { font-size: var(--fs-xs); color: var(--muted); }
.new-tag { display: inline-flex; align-items: center; min-height: 20px; padding: 0 8px; border-radius: var(--r-pill); background: var(--badge-bg); color: var(--badge-ink); font-size: 11px; font-weight: var(--fw-bold); }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--badge-bg); color: var(--badge-ink); font-size: 11.5px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.pulse-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--attn); box-shadow: 0 0 0 0 color-mix(in srgb, var(--attn) 55%, transparent); animation: pulse 2s var(--ease) infinite; }

/* Calm landing: "waiting for you now N" and equal chips */
.calm-landing { display: grid; gap: var(--sp-3); }
.calm-landing .calm-line { display: flex; align-items: center; gap: 10px; font-size: var(--fs-lg); font-weight: var(--fw-bold); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--r-ctl);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
  -webkit-user-select: none;
  user-select: none;
}
.btn--primary { min-height: var(--touch-primary); padding: 0 22px; background: var(--btn-primary-bg); color: var(--btn-primary-ink); font-size: var(--fs-lg); }
.btn--primary:active { background: var(--btn-primary-bg-press); }
.btn--secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-ink); border-color: var(--btn-secondary-line); }
.btn--secondary:hover { background: var(--card-3); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--card-2); }
.btn--danger { background: var(--btn-danger-bg); color: var(--btn-danger-ink); }
.btn--icon { width: var(--touch); min-height: var(--touch); height: var(--touch); padding: 0; border-radius: var(--r-pill); flex: none; }
.btn--block { display: flex; width: 100%; }
.btn--lg { min-height: var(--touch-primary); font-size: var(--fs-lg); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn.is-busy { cursor: progress; opacity: .8; }
.btn-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.btn-pair > .btn { width: 100%; min-width: 0; white-space: normal; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-stack { display: grid; gap: 10px; }
/* A round icon button with a soft card fill (the home bell, a header action) */
.icon-btn {
  position: relative;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--touch);
  height: var(--touch);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-1);
  text-decoration: none;
}
.icon-btn .badge { position: absolute; top: -3px; inset-inline-end: -3px; border: 2px solid var(--paper); min-width: 22px; height: 22px; }
/* The big round record button and the wide record button (screens call ctx.voice.openCapture) */
.btn-mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--mic-size);
  height: var(--mic-size);
  border: 0;
  border-radius: 50%;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-ink);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--gold) 35%, transparent), inset 0 0 0 4px rgba(255, 255, 255, .2);
  flex: none;
}
.btn-record { gap: 10px; }
.linkish { border: 0; background: none; padding: 0 4px; min-height: var(--touch); color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; font-size: inherit; }

/* Segmented control (persona switch, lab choices) */
.seg { display: inline-flex; align-items: stretch; gap: 3px; padding: 3px; border-radius: var(--r-pill); background: var(--card-2); }
.seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--touch);
  padding: 0 14px;
  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);
}
.seg-btn[aria-pressed="true"] { background: var(--card); color: var(--ink); font-weight: var(--fw-bold); box-shadow: var(--shadow-1); }
.persona-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1.5px var(--card); }
.persona-dot[data-user="nour"] { background: var(--c-pink); }
.persona-dot[data-user="karim"] { background: var(--c-aqua); }

/* ---------- The «!» explanation circle ---------- */
.tip-wrap { position: relative; display: inline-flex; vertical-align: middle; margin-inline-end: 6px; flex: none; }
.tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--tip-mark);
  background: var(--tip-bg);
  color: var(--tip-mark);
  font-size: 13px;
  font-weight: var(--fw-bold);
  line-height: 1;
}
.tip::before { content: ""; position: absolute; inset: -12px; }
.tip-bubble {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-start: -10px;
  z-index: 45;
  width: max-content;
  max-width: min(300px, calc(100vw - 32px));
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  white-space: normal;
  text-align: start;
  transform: translateX(var(--tip-shift, 0));
  animation: fade-rise var(--dur-2) var(--ease);
}

/* ---------- Money, numbers, references, links ---------- */
.money, .num { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; unicode-bidi: isolate; }
.money--in { color: var(--money-in); }
.money--out { color: var(--money-out); }
.ref { font-family: var(--font-mono); font-size: .9em; font-feature-settings: "zero" 1; letter-spacing: 0; white-space: nowrap; }
.ref-link { color: var(--gold-ink); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; padding: 4px 2px; border-radius: 6px; }
.ref-wrap, .ref-chip { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; }
.ref-chip { padding: 0 2px 0 8px; border-radius: var(--r-pill); background: var(--card-2); color: var(--ink); font-size: var(--fs-xs); min-height: 28px; }
.copy-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.copy-btn::before { content: ""; position: absolute; inset: -7px; }
.copy-btn:hover { color: var(--ink); background: var(--card-3); }
.src { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.src-link { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; color: var(--gold-ink); font-weight: var(--fw-bold); font-size: var(--fs-sm); text-decoration: none; border-bottom: 1px dashed currentColor; line-height: 1.3; }
/* A compact link keeps its text size in a line of text; its tap area still reaches 44 px. */
.src-link--compact { position: relative; min-height: 0; border-bottom: 0; }
.src-link--compact::before { content: ""; position: absolute; inset: -12px -4px; }

/* ---------- Lists of version 1 (records still use them) ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  min-height: 58px;
  padding: 10px 2px;
  border-top: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.list > li:first-child > .list-row, .list > .list-row:first-child { border-top: 0; }
a.list-row:hover { background: var(--row-hover); }
.row-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bx-tint, var(--card-2)); color: var(--bx-ink, var(--ink)); flex: none; }
.row-main { min-width: 0; display: grid; gap: 2px; }
.row-title { font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-meta { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-end { display: grid; justify-items: end; gap: 4px; text-align: end; }

/* ---------- Key-value table (facts) ---------- */
.kv { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 12px; overflow: hidden; font-size: var(--fs-sm); }
.kv caption { text-align: start; font-weight: var(--fw-bold); font-size: var(--fs-sm); padding: 0 2px 6px; caption-side: top; }
.kv th, .kv td { padding: 10px 12px; text-align: start; vertical-align: top; }
.kv th { width: 40%; color: var(--muted); font-weight: var(--fw-medium); }
.kv td { font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.kv tr:nth-child(odd) { background: var(--card-2); }

/* ---------- Timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; top: 10px; bottom: 10px; inset-inline-start: 6px; width: 2px; background: var(--line); border-radius: 2px; }
.tl-item { position: relative; padding: 6px 0 10px; padding-inline: 26px 0; }
.tl-dot { position: absolute; top: 12px; inset-inline-start: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 3px var(--muted); }
.tl-item[data-st] .tl-dot { box-shadow: inset 0 0 0 3px currentColor; }
.tl-item[data-st="recorded"] .tl-dot { color: var(--st-recorded-fg); }
.tl-item[data-st="undoable"] .tl-dot { color: var(--st-undoable-fg); }
.tl-item[data-st="wafeq_draft"] .tl-dot { color: var(--st-wafeq_draft-fg); }
.tl-item[data-st="wafeq_posted"] .tl-dot { color: var(--st-wafeq_posted-fg); }
.tl-item[data-st="wafeq_failed"] .tl-dot { color: var(--st-wafeq_failed-fg); }
.tl-item[data-st="waiting"] .tl-dot { color: var(--st-waiting-fg); }
.tl-item[data-st="cancelled"] .tl-dot { color: var(--st-cancelled-fg); }
.tl-title { font-weight: var(--fw-medium); }
.tl-meta { color: var(--muted); font-size: var(--fs-xs); }

/* ---------- Metro line ---------- */
.metro { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.metro-st { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; font-size: var(--fs-xs); color: var(--muted); padding-top: 2px; }
.metro-st::before { content: ""; position: absolute; top: 9px; inset-inline-start: 50%; width: 100%; height: 2px; background: var(--line-strong); }
.metro-st:last-child::before { display: none; }
.metro-dot { position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 2px var(--line-strong); }
.metro-st.is-past .metro-dot { background: var(--muted); box-shadow: none; }
.metro-st.is-current { color: var(--ink); font-weight: var(--fw-bold); }
.metro-st.is-current .metro-dot { background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent); animation: pulse-ring 2s var(--ease) 1; }
.metro-st.is-current[data-st="wafeq_draft"] { color: var(--st-wafeq_draft-fg); }
.metro-st.is-current[data-st="wafeq_posted"] { color: var(--st-wafeq_posted-fg); }
.metro-st.is-current[data-st="wafeq_failed"] { color: var(--st-wafeq_failed-fg); }
.metro-st.is-current[data-st="waiting"] { color: var(--st-waiting-fg); }
.metro-st.is-current[data-st="undoable"] { color: var(--st-undoable-fg); }
.metro-st.is-current[data-st="recorded"] { color: var(--st-recorded-fg); }
.metro-st.is-current[data-st="cancelled"] { color: var(--st-cancelled-fg); }
.metro-label { line-height: 1.35; }

/* ---------- Toasts: at the top on the phone; on the desktop beside the sidebar, clear of the side panel ---------- */
.toast-host {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 10px);
  inset-inline: 12px;
  z-index: 90;
  display: grid;
  gap: 8px;
  max-width: 420px;
  margin-inline: auto;
  pointer-events: none;
}
@media (min-width: 1024px) {
  .toast-host { top: 16px; inset-inline: calc(var(--sidebar-w) + 16px) auto; width: 360px; margin: 0; }
}
.toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 8px 6px 8px 14px;
  padding-inline: 14px 6px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-inline-start: 4px solid var(--gold);
  box-shadow: var(--shadow-2);
  pointer-events: auto;
  animation: toast-in var(--dur-2) var(--ease) both;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.toast--ok { border-inline-start-color: var(--st-wafeq_posted-fg); }
.toast--warn { border-inline-start-color: var(--st-wafeq_draft-fg); }
.toast--error { border-inline-start-color: var(--st-wafeq_failed-fg); }
.toast-ico { display: inline-flex; color: var(--gold-ink); flex: none; }
.toast--ok .toast-ico { color: var(--st-wafeq_posted-fg); }
.toast--warn .toast-ico { color: var(--st-wafeq_draft-fg); }
.toast--error .toast-ico { color: var(--st-wafeq_failed-fg); }
.toast-msg { flex: 1; min-width: 0; }
.toast-btn { display: inline-flex; align-items: center; gap: 4px; min-height: var(--touch); padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--card-2); color: var(--gold-ink); font-weight: var(--fw-bold); font-size: var(--fs-sm); flex: none; }
.toast-x { display: inline-flex; align-items: center; justify-content: center; width: var(--touch); height: var(--touch); border: 0; border-radius: 50%; background: transparent; color: var(--muted); flex: none; }
.toast-bar { position: absolute; bottom: 0; inset-inline: 0; height: 3px; background: var(--gold); transform-origin: right center; animation: shrink var(--toast-ms, 5000ms) linear forwards; }
.toast.is-leaving { opacity: 0; transform: translateY(-6px); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); pointer-events: none; }
/* Direction-bearing icons point the reading way in Arabic (back and forward are already drawn for RTL) */
[dir="rtl"] .ico-undo, [dir="rtl"] .ico-send { transform: scaleX(-1); }

/* ---------- Sheets ---------- */
/* Phone: a bottom sheet with a grab handle that slides up (pull it down to close). */
.sheet-layer { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.sheet-scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity var(--dur-3) var(--ease); }
.sheet {
  position: relative;
  width: 100%;
  max-width: var(--phone-max);
  max-height: calc(100dvh - 24px - env(safe-area-inset-top));
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--card);
  color: var(--ink);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  padding: 2px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow: var(--shadow-sheet);
  transform: translateY(105%);
  transition: transform var(--dur-3) var(--ease-sheet);
}
.sheet-layer.is-open .sheet-scrim { opacity: 1; }
.sheet-layer.is-open .sheet { transform: none; }
.sheet-layer.is-leaving .sheet-scrim { opacity: 0; }
.sheet-layer.is-leaving .sheet { transform: translateY(105%); }
.sheet.is-dragging { transition: none; }
.sheet:focus { outline: none; }
.sheet-grip { position: relative; width: 40px; height: 5px; margin: 8px auto 4px; border-radius: 3px; background: var(--grab); touch-action: none; }
.sheet-grip::before { content: ""; position: absolute; inset: -14px -70px; }
.sheet-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--touch);
  margin: 0 -20px var(--sp-2);
  padding: 2px 20px;
  background: var(--card);
  touch-action: pan-x;
}
.sheet-head--bare { margin-bottom: 0; }
.sheet-title { flex: 1 1 auto; min-width: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.sheet-title:empty { display: none; }
.sheet-x { margin-inline-start: auto; background: var(--card-2); color: var(--ink); }
.sheet-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.sheet-text { color: var(--ink); }
@media (min-width: 1024px) {
  /* Desktop: a 400 px side panel from the inline-end edge (the left in Arabic), as in the bank example */
  .sheet-layer--panel { justify-content: flex-end; align-items: stretch; }
  .sheet--panel {
    width: var(--panel-w);
    max-width: calc(100vw - var(--sidebar-w));
    height: 100%;
    max-height: none;
    border-radius: 0;
    border-start-start-radius: var(--r-sheet);
    border-end-start-radius: var(--r-sheet);
    padding: 0 24px 24px;
    box-shadow: var(--shadow-panel);
    transform: translateX(-104%);
  }
  .sheet--panel.sheet--lg { width: var(--panel-w-lg); }
  .sheet-layer--panel.is-leaving .sheet { transform: translateX(-104%); }
  /* The head sticks to the very top with its own 16 px above the title, so no content shows above it while scrolling. */
  .sheet--panel .sheet-head { margin-inline: -24px; padding: 16px 24px 8px; }
  .sheet-grip { display: none; }
  /* Confirmations stay a centred dialog */
  .sheet-layer--dialog { align-items: center; padding: 24px; }
  .sheet--dialog {
    max-width: 480px;
    border-radius: var(--r-sheet);
    padding: 0 24px 24px;
    max-height: calc(100vh - 48px);
    transform: translateY(var(--rise)) scale(.985);
    opacity: 0;
    transition: transform var(--dur-3) var(--ease), opacity var(--dur-2) var(--ease);
  }
  .sheet-layer--dialog.is-open .sheet { transform: none; opacity: 1; }
  .sheet-layer--dialog.is-leaving .sheet { transform: translateY(var(--rise)) scale(.985); opacity: 0; }
  .sheet--dialog .sheet-head { margin-inline: -24px; padding: 16px 24px 8px; }
}

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--sp-3); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-3); align-items: start; }
.form-grid > .field--full { grid-column: 1 / -1; }
.field { display: grid; grid-template-rows: auto auto minmax(1.5em, auto); gap: 6px; min-width: 0; }
.field-label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); min-height: 24px; }
.field-opt { color: var(--muted); font-weight: var(--fw-regular); font-size: var(--fs-xs); }
.field-control { position: relative; display: flex; align-items: center; }
.field-input {
  width: 100%;
  min-height: 50px;
  padding: 10px 12px;
  font-size: 16px;
  line-height: var(--lh-input);
  color: var(--ink);
  background: var(--card);
  border: 1.5px solid var(--line-ctl);
  border-radius: var(--r-ctl);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field-input:focus { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); outline: none; }
.field-input[dir="ltr"] { text-align: right; font-variant-numeric: tabular-nums; }
textarea.field-input { resize: vertical; min-height: 76px; }
/* The arrow in the muted ink of each theme (5.25:1 on the light field, 6.73:1 on the dark one), at the inline end (the left) */
select.field-input {
  padding-inline-end: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23646d78' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
}
:root[data-theme="dark"] select.field-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a3acb6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) select.field-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a3acb6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  }
}
.field-suffix { position: absolute; inset-inline-end: 12px; color: var(--muted); font-weight: var(--fw-bold); pointer-events: none; }
.field-control:has(.field-suffix) .field-input { padding-inline-end: 38px; }
.field-msg { margin: 0; min-height: 1.5em; font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.field--error .field-input { border-color: var(--st-wafeq_failed-fg); }
.field--error .field-msg { color: var(--st-wafeq_failed-fg); font-weight: var(--fw-bold); }
.field--voice .field-input { background-color: var(--halo-tint); box-shadow: 0 0 0 4px var(--halo); border-color: color-mix(in srgb, var(--gold-foil) 70%, var(--line-strong)); }
.voice-tag { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: auto; padding: 1px 8px 1px 4px; border-radius: var(--r-pill); background: var(--halo-tint); color: var(--gold-ink); font-size: 12px; font-weight: var(--fw-bold); }
.voice-tag .tip-wrap { margin-inline-end: 2px; }
.err-summary { padding: 10px 12px; border-radius: 12px; background: var(--st-wafeq_failed-bg); color: var(--st-wafeq_failed-fg); border: 1px solid color-mix(in srgb, var(--st-wafeq_failed-fg) 35%, transparent); font-size: var(--fs-sm); }
.err-summary-title { display: flex; align-items: center; gap: 6px; font-weight: var(--fw-bold); }
.err-summary ul { margin: 6px 0 0; padding-inline-start: 20px; }
.err-summary a { color: inherit; }
.choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.choice > button { min-height: var(--touch-primary); }

/* ---------- Odometer (old balance above, new balance rolls in below) ---------- */
.odo { display: inline-flex; direction: ltr; align-items: flex-end; font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap; }
.odo-col { display: inline-block; height: 1.15em; overflow: hidden; vertical-align: bottom; }
.odo-strip { display: flex; flex-direction: column; transition: transform var(--odo-ms, var(--dur-odo)) var(--ease); will-change: transform; }
.odo-d { display: block; height: 1.15em; text-align: center; }
.odo-ch { display: inline-block; }
.balance-old { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: color-mix(in srgb, var(--muted) 70%, transparent); }
.balance-new { font-weight: var(--fw-bold); }

/* ---------- Landing glow, empty, skeleton, medallion ---------- */
.landing { animation: landing var(--dur-glow) var(--ease); }
.empty { display: grid; justify-items: center; gap: 8px; padding: 28px 16px; text-align: center; color: var(--muted); }
.empty .medallion { color: var(--gold-foil); margin-bottom: 4px; }
.empty-title { color: var(--ink); font-weight: var(--fw-bold); }
.empty-body { font-size: var(--fs-sm); max-width: 34ch; }
.medallion .m-ring { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .55; }
.medallion .m-ring2 { fill: none; stroke: currentColor; stroke-width: 1; opacity: .4; }
.medallion .m-dots { fill: currentColor; opacity: .7; }
.medallion .m-petals { fill: none; stroke: currentColor; stroke-width: 1.4; opacity: .8; }
.medallion .m-core { fill: currentColor; opacity: .85; }
.medallion.is-turning { animation: turn 12s linear infinite; }
.skeleton { display: grid; gap: 10px; padding: 6px 0; }
.sk-line { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--card-2), var(--card-3), var(--card-2)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }

/* A calm placeholder for a screen that a module builder has not built yet */
.stub { display: grid; justify-items: center; gap: 8px; padding: 30px 20px; text-align: center; }
.stub .medallion { color: var(--gold-foil); }
.stub-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.stub-body { color: var(--muted); font-size: var(--fs-sm); max-width: 40ch; }

/* ---------- Look lab ---------- */
.lab { display: grid; gap: var(--sp-4); }
.lab-sec { display: grid; gap: 8px; }
.lab-sec-title { font-size: var(--fs-sm); font-weight: var(--fw-bold); display: flex; align-items: center; }
.seg--lab { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-radius: 16px; padding: 4px; gap: 4px; }
.seg--lab .seg-btn { flex-direction: column; min-height: 64px; padding: 8px 6px; border-radius: 12px; gap: 4px; color: var(--ink); white-space: normal; text-align: center; line-height: 1.35; }
.seg--lab .seg-btn[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 2px var(--gold), var(--shadow-1); }
.lab-swatches { display: inline-flex; gap: 3px; }
.lab-swatches i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.lab-font-sample { font-size: var(--fs-md); font-weight: var(--fw-bold); }
.lab-sample { font-size: var(--fs-xs); color: var(--muted); }

/* ---------- Keyframes ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(var(--rise)); } to { opacity: 1; transform: none; } }
@keyframes fade-rise { from { opacity: 0; transform: translateX(var(--tip-shift, 0)) translateY(4px); } to { opacity: 1; transform: translateX(var(--tip-shift, 0)); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes landing {
  0% { transform: translateY(var(--rise)); box-shadow: 0 0 0 0 transparent; }
  35% { transform: none; box-shadow: 0 0 0 6px var(--halo); }
  100% { transform: none; box-shadow: 0 0 0 0 transparent; }
}
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--attn) 55%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 40%, transparent); } 100% { box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes turn { to { transform: rotate(360deg); } }

/* ---------- Reduced motion: no movement anywhere ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .pulse-dot, .medallion.is-turning, .sk-line { animation: none !important; }
  /* The undo countdown is information, not decoration: it still shows the real time left, slowly and in place. */
  .toast-bar { animation-duration: var(--toast-ms, 5000ms) !important; }
  .rec-undo-bar { animation-duration: var(--rec-undo-ms, 5000ms) !important; }
}
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: none !important; }
html[data-motion="off"] .toast-bar { animation: shrink var(--toast-ms, 5000ms) linear forwards !important; }
html[data-motion="off"] .rec-undo-bar { animation: shrink var(--rec-undo-ms, 5000ms) linear forwards !important; }

/* ---------- Desktop layout by the toggle, and wide screens grown (js/layout.js) ---------- */
/* The page is zoomed to fit the window, so heights in vh are divided by the zoom to still reach the bottom. */
:root[data-forced="desktop"] body, :root[data-scaled] body,
:root[data-forced="desktop"] .shell, :root[data-scaled] .shell { min-height: calc(100vh / var(--zoom, 1)); }
:root[data-forced="desktop"] .side, :root[data-scaled] .side { height: calc(100vh / var(--zoom, 1)); }
:root[data-forced="desktop"] .sheet--dialog, :root[data-scaled] .sheet--dialog { max-height: calc(100vh / var(--zoom, 1) - 48px); }
:root[data-forced="desktop"] .sheet-layer, :root[data-scaled] .sheet-layer { height: calc(100vh / var(--zoom, 1)); }
/* Widths in vw too: the side panel keeps its 400 px and never covers the sidebar. */
:root[data-forced="desktop"] .sheet--panel, :root[data-scaled] .sheet--panel { max-width: calc(100vw / var(--zoom, 1) - var(--sidebar-w)); }
:root[data-forced="desktop"] .rec-rc-full, :root[data-scaled] .rec-rc-full { max-height: calc(70vh / var(--zoom, 1)); }

/* ---------- Guide v2: the patterns of the printed boxes ---------- */
/* The medallion is the lace circle of the macaron box lid, drawn in the current colour. */
span.medallion { display: inline-block; width: var(--m, 88px); height: var(--m, 88px); background: currentColor; -webkit-mask: url("../assets/patterns/lace_medallion.png") center / contain no-repeat; mask: url("../assets/patterns/lace_medallion.png") center / contain no-repeat; }
/* Empty pages: the corner flourish of the macaron box in the four corners. */
.empty { position: relative; padding: 40px 28px; }
.empty::before {
  content: "";
  position: absolute;
  inset: 8px;
  background: var(--gold);
  opacity: .7;
  pointer-events: none;
  -webkit-mask: url("../assets/patterns/corner_tl.png") top left / 34px no-repeat, url("../assets/patterns/corner_tr.png") top right / 34px no-repeat, url("../assets/patterns/corner_bl.png") bottom left / 34px no-repeat, url("../assets/patterns/corner_br.png") bottom right / 34px no-repeat;
  mask: url("../assets/patterns/corner_tl.png") top left / 34px no-repeat, url("../assets/patterns/corner_tr.png") top right / 34px no-repeat, url("../assets/patterns/corner_bl.png") bottom left / 34px no-repeat, url("../assets/patterns/corner_br.png") bottom right / 34px no-repeat;
}
/* Page titles: the vine band of the chocolate box under the title. */
.page-head { flex-wrap: wrap; }
.page-head::after {
  content: "";
  flex-basis: 100%;
  height: 18px;
  background: var(--gold);
  opacity: .55;
  -webkit-mask: url("../assets/patterns/vine_band.png") right center / auto 100% repeat-x;
  mask: url("../assets/patterns/vine_band.png") right center / auto 100% repeat-x;
}
/* Desktop sidebar: the lace band of the macaron box along its bottom edge. */
@media (min-width: 1024px) {
  .side { padding-bottom: 46px; }
  .side::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 30px;
    background: var(--gold);
    opacity: .35;
    transform: scaleY(-1);
    pointer-events: none;
    -webkit-mask: url("../assets/patterns/lace_band.png") left top / auto 100% repeat-x;
    mask: url("../assets/patterns/lace_band.png") left top / auto 100% repeat-x;
  }
}
/* Opening splash: the vine frame of the chocolate box around the logo, once per visit. */
.splash { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: var(--bg); transition: opacity var(--dur-3) var(--ease); }
.splash.is-out { opacity: 0; pointer-events: none; }
.splash-box { position: relative; width: min(64vw, 260px); aspect-ratio: 1; display: grid; place-items: center; }
.splash-frame { position: absolute; inset: 0; background: var(--c-mint); -webkit-mask: url("../assets/patterns/vine_frame.png") center / contain no-repeat; mask: url("../assets/patterns/vine_frame.png") center / contain no-repeat; }
.splash-logo { width: 58%; height: 30%; background: var(--ink); -webkit-mask: url("../assets/logo.png") center / contain no-repeat; mask: url("../assets/logo.png") center / contain no-repeat; }

/* Avatars by person (Karim 2026-10-09): Nour the botanical pattern on pink, Karim the lace circle on cream. */
.avatar--pat { position: relative; overflow: hidden; font-size: 0; }
.avatar--pat::before { content: ""; position: absolute; inset: 0; }
.avatar--pat[data-who="nour"] { background: var(--c-pink); }
.avatar--pat[data-who="nour"]::before { background: color-mix(in srgb, var(--c-pink) 55%, #5a2f36); -webkit-mask: url("../assets/patterns/botanical.png") center / 210% auto no-repeat; mask: url("../assets/patterns/botanical.png") center / 210% auto no-repeat; }
.avatar--pat[data-who="karim"] { background: var(--c-cream); }
.avatar--pat[data-who="karim"]::before { inset: 8%; background: color-mix(in srgb, var(--c-cream) 30%, #4a3f22); -webkit-mask: url("../assets/patterns/lace_medallion.png") center / contain no-repeat; mask: url("../assets/patterns/lace_medallion.png") center / contain no-repeat; }
/* 7. No vine band under the movements title (Karim 2026-10-09). */
.screen--moves .page-head::after { content: none; }
/* Empty pages, redesigned (Karim did not like the corners): a soft lace circle above the words, nothing in the corners. */
.empty::before { content: none; }
.empty { gap: 10px; padding: 26px 20px; }
.empty-mark { display: block; width: 58px; height: 58px; background: var(--gold); opacity: .55; -webkit-mask: url("../assets/patterns/lace_medallion.png") center / contain no-repeat; mask: url("../assets/patterns/lace_medallion.png") center / contain no-repeat; }
.empty-title { font-size: var(--fs-md); }

/* Opening animation (Karim 2026-10-09): the vine frame opens from the centre, the logo rises into place, then the screen fades. */
.splash-frame { animation: splash-frame 1300ms cubic-bezier(.2, .7, .2, 1) both; }
.splash-logo { animation: splash-logo 900ms cubic-bezier(.2, .7, .2, 1) 650ms both; }
@keyframes splash-frame { from { opacity: 0; transform: scale(.9) rotate(-2deg); clip-path: inset(46% 46% 46% 46% round 24px); } 60% { opacity: 1; } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 0); } }
@keyframes splash-logo { from { opacity: 0; transform: translateY(10px); filter: blur(6px); letter-spacing: 6px; } to { opacity: 1; transform: none; filter: none; letter-spacing: 0; } }
@media (prefers-reduced-motion: reduce) { .splash-frame, .splash-logo { animation: none; } }
/* Karim 2026-10-09: Arabic marks (hamza, tanween, kasra) must never be clipped. Single-line texts cut sideways only, with room above and below. */
.side-me-name, .box-tag > span, .row-title, .row-meta, .boxp-tab-name, .more-row-text, .more-links .src-label, .rec-tab-label, .rec-persona-name, .rec-pick-name, .home-card-name, .home-hello {
  overflow-x: clip;
  overflow-y: visible;
  line-height: 1.7;
  padding-block: 2px;
}