/* Clarté — the agent app, in daylight. The sun holds the agent's QR code; it rises with each digit of a code and bursts when a
   commission comes in. Three tabs in a white dock at the bottom: the sun rises behind the one you are on. */
body.tabbed .stage { padding-bottom: calc(118px + var(--safe-b)); }

/* the greeting on the sign-in screens stands on the horizon (.hero, ui.css) */
.greet { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.who { font-size: 15px; color: var(--body); }
.who b { font-weight: 600; font-variant-numeric: tabular-nums; }
.who .chg { border: 0; background: none; padding: 0; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line2); }
.auth { gap: 14px; }
.auth .k { margin-bottom: -4px; }
.forgot { margin-top: -6px; text-align: center; }
.forgot .link { font-size: 14px; font-weight: 500; color: var(--mute); }
@media (max-height: 720px) { .auth { gap: 10px; } .auth .keypad button { height: 52px; border-radius: 17px; } .auth .cells i { height: 52px; } .auth .cta { min-height: 52px; } .auth .msg:empty { display: none; } }
@media (max-height: 620px) { .auth .hero .sunbox { display: none; } .auth .hero { min-height: 0; padding-bottom: 4px; } .auth .keypad { gap: 6px; } .auth .keypad button { height: 46px; } }

/* ── the dock ── */
.dock { position: fixed; z-index: 30; left: 50%; bottom: calc(12px + var(--safe-b)); width: min(calc(100% - 28px), 420px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 6px; border-radius: 28px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 18px 40px -22px rgba(19, 23, 34, .45), 0 2px 6px rgba(19, 23, 34, .05); transform: translateX(-50%); transition: transform .4s var(--spring), opacity .25s; }
.dock.off { opacity: 0; transform: translate(-50%, 30px); pointer-events: none; }
.dock button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 58px; padding: 0 4px; border: 0; border-radius: 22px; background: none; color: var(--mute); font-size: 12.5px; font-weight: 600; transition: color .2s; }
.dock .ic { position: relative; display: grid; place-items: center; width: 34px; height: 30px; }
.dock .ic::before { content: ''; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: radial-gradient(circle at 50% 36%, #ffe7cc, var(--sun) 78%); transform: translateY(9px) scale(.2); opacity: 0; transition: transform .45s var(--spring), opacity .2s; }
.dock svg { position: relative; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dock button.on { color: var(--ink); }
.dock button.on .ic::before { transform: none; opacity: 1; }
html[lang=ar] .dock button { font-size: 13px; }

/* ── home: the sun holds the code ── */
.pass { position: relative; padding: 18px 18px 14px; border-radius: 30px; background: var(--card); border: 1px solid var(--line); overflow: hidden; }
/* the sea under the horizon: fine lines of light, painted once */
.pass::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 66px; background: repeating-linear-gradient(to bottom, rgba(245, 154, 69, .1) 0 1px, transparent 1px 7px); -webkit-mask: linear-gradient(to bottom, #000, transparent); mask: linear-gradient(to bottom, #000, transparent); pointer-events: none; }
.pass .sunbox { margin: 0 auto; }
.pass .sun .disc { box-shadow: inset 0 -10px 24px rgba(196, 98, 26, .22); }
.qrbtn { position: absolute; inset: 19%; z-index: 1; display: grid; place-items: center; padding: 8%; border: 0; border-radius: 22%; background: #fffdf9; box-shadow: 0 10px 26px -14px rgba(127, 63, 15, .55); transition: transform .3s var(--spring); }
.qrbtn:active { transform: scale(.96); }
.qrbtn img { display: block; width: 100%; aspect-ratio: 1; image-rendering: pixelated; }
.passfoot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.codechip { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border-radius: 999px; background: var(--sand); font-size: 14px; color: var(--body); }
.codechip b { font-family: var(--mono); font-weight: 500; font-size: 15px; letter-spacing: .1em; color: var(--ink); }
.dl { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--line); border-radius: 50%; background: var(--card); transition: transform .3s var(--spring); }
.dl:active { transform: scale(.94); }
.dl svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dl.busy { opacity: .45; pointer-events: none; }
.row2 .ghost { padding: 0 10px; font-size: 14.5px; white-space: nowrap; }
@media (max-width: 370px) { .row2 .ghost svg { display: none; } }
.stats { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px; }
.stats > div { display: flex; flex-direction: column; gap: 3px; padding: 14px; border-radius: 20px; background: var(--sand); min-width: 0; }
.stats .v { font: 760 26px/1.1 var(--disp); font-stretch: var(--wide); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stats .earn { background: var(--sun-soft); } .stats .earn .v { font-size: 19px; line-height: 1.45; }
.stats small { font-size: 12.5px; color: var(--mute); }
.ribcard { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 22px; border: 1.5px dashed var(--line2); }
.ribcard p { margin: 0; font-size: 15px; color: var(--body); }
/* the team: Clarté's night ink, the one dark card */
/* the Clarté team: a warm note at the foot of the page, the sun as the one who answers, one light button to write */
.care { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 28px; background: linear-gradient(180deg, #fff8f0 0%, #ffefde 100%); border: 1px solid #f5dfc6; color: var(--ink); }
.care .who2 { display: flex; align-items: center; gap: 12px; }
.care .sunbox { flex: none; }
.care b { display: block; font: 720 17px var(--disp); font-stretch: var(--wide); }
.care small { display: block; font-size: 13px; color: var(--mute); }
.care p { margin: 0; font-size: 15.5px; color: var(--body); }
.care p em { font-style: normal; color: var(--ink); font-weight: 600; }
.care .cta.wa { min-height: 54px; background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px #efd5b9, 0 8px 18px -12px rgba(127, 63, 15, .4); } .care .cta.wa:active { background: var(--sun-pale); }
.care .num2 { font: 500 13px var(--mono); letter-spacing: .06em; color: var(--mute); text-align: center; }
/* the code in full screen */
.fsq { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; background: var(--day); text-align: center; animation: pop .22s var(--ease); }
.fsq img { width: min(80vw, 420px); aspect-ratio: 1; image-rendering: pixelated; }
.fsq .wordmark { font-size: 30px; }
.fsq .cd { font-size: 17px; } .fsq .cd b { font-family: var(--mono); font-weight: 500; letter-spacing: .1em; }
.fsq .p { max-width: 300px; color: var(--mute); }
.fsq .cap { margin-top: 8px; }
@keyframes pop { from { opacity: 0; transform: scale(.96); } }

/* ── first time: three slides ── */
.onb { justify-content: space-between; }
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -20px; }
.slides::-webkit-scrollbar { display: none; }
.slides > div { flex: 0 0 100%; scroll-snap-align: center; display: flex; flex-direction: column; gap: 14px; padding: 6px 20px 0; }
.ill { position: relative; display: grid; place-items: end center; height: min(270px, 34vh); border-radius: 30px; background: var(--sand); overflow: hidden; margin-bottom: 6px; }
.ill .sunbox { position: absolute; left: 0; right: 0; bottom: 34px; }
.ill .sea { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; background: repeating-linear-gradient(to bottom, rgba(245, 154, 69, .16) 0 1px, transparent 1px 6px); }
.ill .badge { position: absolute; top: 34px; inset-inline-end: calc(50% - 104px); display: grid; place-items: center; width: 64px; height: 64px; border-radius: 22px 22px 22px 6px; background: var(--card); box-shadow: 0 0 0 5px var(--sand); font: 800 24px var(--disp); font-stretch: var(--wide); }
html[dir=rtl] .ill .badge { border-radius: 22px 22px 6px 22px; }
.ill .badge svg { width: 30px; height: 30px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.ill .badge.wa { background: var(--wa-soft); } .ill .badge.wa svg { fill: var(--wa); stroke: none; }
.rdots { display: flex; justify-content: center; gap: 8px; }
.rdots i { width: 8px; height: 8px; border-radius: 999px; background: var(--line2); transition: width .3s var(--ease), background-color .3s; }
.rdots i.on { width: 26px; background: var(--sun); }

/* ── a moment: a contact sent, a commission counted ── */
.celebrate { align-items: center; justify-content: center; gap: 16px; text-align: center; padding-bottom: 12px; }
.bigmoney { font: 800 54px/1 var(--disp); font-stretch: var(--wide); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.journey { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 330px; margin: 4px auto 0; text-align: start; }
.journey .st { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 14px; border-radius: 18px; background: var(--sand); }
.journey .st i { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line2); background: var(--card); }
.journey .st.done i { border: 0; background: radial-gradient(circle at 50% 36%, #fff0dd, var(--sun) 75%); }
.journey .st.miss { background: var(--err-soft); } .journey .st.miss small { color: var(--err); }
.journey b { font-size: 15.5px; } .journey small { font-size: 13.5px; color: var(--mute); }
.ribask { margin: 0; color: var(--err); font-weight: 500; }

/* ── contacts ── */
.owed { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.owed > div { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 20px; background: var(--sand); min-width: 0; }
.owed > div.hot { background: var(--sun-soft); } .owed > div.sea { background: var(--sea-soft); }
.owed .money { font-size: 22px; letter-spacing: -.01em; }
.tl { display: flex; flex-direction: column; }
.day { margin: 16px 0 4px; font-size: 13px; font-weight: 600; color: var(--mute); }
.it { display: grid; grid-template-columns: 14px 1fr auto; gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.it .dot { width: 12px; height: 12px; margin-top: 6px; border-radius: 50%; border: 2px solid var(--line2); }
.it.paid .dot { border: 0; background: radial-gradient(circle at 50% 36%, #ffe2c2, var(--sun) 75%); }
.it .mid { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.it .n { font-weight: 650; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it .s { font-size: 13.5px; color: var(--mute); }
.it .s .mono { font-size: 12.5px; }
.it .q { font-size: 14px; color: var(--body); padding-inline-start: 10px; border-inline-start: 2px solid var(--line2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.it .tag { align-self: flex-start; margin-top: 4px; padding: 3px 10px; border-radius: 999px; background: var(--sand); font-size: 12px; font-weight: 600; color: var(--mute); }
.it .tag.ok { background: var(--sun-soft); color: var(--sun-ink); } .it .tag.sea { background: var(--sea-soft); color: var(--sea); }
.it .end { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
.it .plus { font-weight: 720; font-family: var(--disp); font-stretch: var(--wide); color: var(--sun-ink); }
.it .end small { font-size: 12.5px; color: var(--mute); }
.empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 34px 10px; text-align: center; color: var(--mute); }
.empty p { margin: 0; max-width: 260px; }

/* ── profile ── */
.idcard { padding: 6px 20px; }
.mail .kv { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
.mail .mv { text-align: end; font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail .mv.none { color: var(--faint); font-weight: 500; }
.mini { flex: none; border: 0; background: var(--sand); padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.open > .fold { grid-template-rows: 1fr; }
.foldin { overflow: hidden; min-height: 0; }
.pad { display: flex; flex-direction: column; gap: 12px; padding: 12px 0 16px; }
.pair { display: grid; grid-template-columns: 1fr 1.8fr; gap: 8px; }
.pair .cta, .pair .ghost { min-height: 52px; padding: 0 12px; font-size: 15px; }
.vault { padding: 0; overflow: hidden; }
.vault .pad { padding: 0 18px 18px; }
.vhead { display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px; border: 0; background: none; text-align: start; }
.ic2 { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 16px; background: var(--sand); flex: none; }
.ic2 > svg, .vhead .chev, .act .go, .safe svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic2 .lk { position: absolute; inset-inline-end: -5px; bottom: -5px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--day); }
.ic2 .lk svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.vhead .tx, .act .tx { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vhead .tx b, .act .tx b { font-size: 16px; }
.vhead .vsum { font-size: 13.5px; color: var(--mute); }
.vhead .todo { display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px; background: var(--err-soft); color: var(--err); font-weight: 600; }
.vhead .chev { color: var(--mute); transition: transform .3s var(--ease); }
.vault.open .vhead .chev { transform: rotate(180deg); }
.vault.missing { border-style: dashed; border-color: var(--line2); }
.safe { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; background: var(--sea-soft); font-size: 13.5px; color: #0e4f46; }
.safe svg { flex: none; width: 20px; height: 20px; }
.ribin { letter-spacing: .02em; font-family: var(--mono); font-size: 15px !important; }
.ribcount { margin-top: -6px; padding: 0 4px; font: 500 12.5px var(--mono); color: var(--mute); }
.ribcount.ok { color: var(--sea); }
.rows { padding: 4px 0; }
.act { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 18px; border: 0; background: none; text-align: start; }
.act + .act { border-top: 1px solid var(--line); }
.act .ic2 { width: 42px; height: 42px; border-radius: 14px; }
.act .tx small { font-size: 13px; color: var(--mute); }
.act .go { color: var(--faint); }
html[dir=rtl] .act .go { transform: scaleX(-1); }
.out { align-self: center; color: var(--err); text-decoration-color: rgba(190, 58, 38, .3); }
.rules { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: 13.5px; color: var(--mute); }