/* ================================================================ LipeWin — purple to pink. Headings: Playfair Display. Body: Urbanist. Arabic: Tajawal. Soft edges, generous radii, low-contrast shadows tinted violet so nothing looks like a spreadsheet. BIDIRECTIONAL. Layout uses logical properties (inset-inline-start, padding-inline, text-align:start/end) rather than left/right, so the whole app mirrors from the one dir="rtl" on with no duplicate rule set to keep in sync. The few things that genuinely cannot mirror — gradient angles, the sparkline — are pinned explicitly and marked. Typography that is wrong for Arabic (letter-spacing severs cursive joins; there is no Arabic uppercase and no Arabic italic) is expressed as custom properties and flipped once in :root:lang(ar) below, rather than as fourteen separate override rules. ================================================================ */ :root{ --plum:#3b0d4f; --grape:#7c3aed; --grape-d:#6d28d9; --orchid:#a855f7; --lilac:#c084fc; --pink:#db2777; --pink-d:#be185d; --rose:#f472b6; --blush:#fce7f3; --petal:#f5edff; --mist:#faf7ff; --white:#ffffff; --ink:#2e1038; --muted:#7a6485; --faint:#a596ae; --line:#eee3f5; --line-2:#e2d3ee; --bg:#fdfaff; --good:#0f9d76; --good-bg:#e6f7f1; --warn:#c2740a; --warn-bg:#fdf4e3; --bad:#d1345b; --bad-bg:#fdecef; --grad:linear-gradient(120deg,#7c3aed 0%,#a855f7 45%,#db2777 100%); --grad-soft:linear-gradient(120deg,#f5edff 0%,#fce7f3 100%); --shadow:0 1px 2px rgba(88,28,135,.05),0 8px 24px rgba(147,51,234,.07); --shadow-md:0 4px 14px rgba(147,51,234,.10),0 14px 40px rgba(219,39,119,.08); --shadow-lg:0 18px 60px rgba(76,5,110,.28); --r:18px; --r-sm:11px; /* ---- typography tokens: the whole Latin/Arabic switch lives here ---- */ --font-body:"Urbanist",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-head:"Playfair Display",Georgia,"Times New Roman",serif; --font-num:"Playfair Display",Georgia,serif; --track-tight:-.01em; /* headings */ --track-wide:.07em; /* small caps-y labels */ --track-label:.16em; /* .eyebrow */ --caps:uppercase; --quote-style:italic; } /* Arabic is cursive: letter-spacing pulls the joins apart and turns a word into loose glyphs. There is no Arabic uppercase, so text-transform is a no-op, and no Arabic italic — a synthesised oblique reads as a rendering fault. Tajawal covers Latin too, so "kcal" inside an Arabic sentence does not fall back mid-word. */ :root:lang(ar){ --font-body:"Tajawal","Segoe UI","Geeza Pro","Noto Naskh Arabic",Tahoma,sans-serif; --font-head:"Tajawal","Segoe UI","Geeza Pro","Noto Naskh Arabic",Tahoma,sans-serif; /* Playfair has no Arabic-Indic glyphs — leaving it here would render ٩٢٫٤ glyph-by-glyph in a visibly different face from the text beside it. */ --font-num:"Tajawal","Geeza Pro","Noto Naskh Arabic",Tahoma,sans-serif; --track-tight:0; --track-wide:0; --track-label:0; --caps:none; --quote-style:normal; } *{box-sizing:border-box} html,body{margin:0;padding:0;width:100%;overflow-x:hidden} html{-webkit-text-size-adjust:100%;text-size-adjust:100%} body{ font-family:var(--font-body); color:var(--ink);line-height:1.65;font-size:16px; background:var(--bg); background-image: radial-gradient(1100px 520px at 8% -8%,rgba(168,85,247,.16),transparent 62%), radial-gradient(900px 460px at 100% 0%,rgba(244,114,182,.15),transparent 60%); background-attachment:fixed; min-height:100vh; } img,svg{max-width:100%} a{color:var(--grape-d);text-underline-offset:3px} a:hover{color:var(--pink)} /* ---------- type ---------- */ h1,h2,h3,.brand-title,.big-num,.stat .num,.quote-body,.home-head .t{ font-family:var(--font-head); } h1,h2,h3{font-weight:600;line-height:1.2;margin:0 0 .4em;letter-spacing:var(--track-tight);color:var(--plum)} h1{font-size:1.72rem} h2{font-size:1.24rem} h3{font-size:1.04rem} .ico{flex:0 0 auto;vertical-align:-.18em} .ico-lg{vertical-align:-.25em} .wrap{width:100%;max-width:940px;margin:0 auto;padding:0 16px} .sub{color:var(--muted);margin:.1em 0 1.2em;font-size:.95rem} .muted{color:var(--muted)} .faint{color:var(--faint)} .small{font-size:.86rem} .tiny{font-size:.76rem} .nowrap{white-space:nowrap} .center{text-align:center} .eyebrow{font-size:.7rem;letter-spacing:var(--track-label);text-transform:var(--caps);color:var(--orchid);font-weight:700} /* ---------- topbar ---------- */ .topbar{background:var(--grad);color:#fff;position:sticky;top:0;z-index:50; box-shadow:0 6px 22px rgba(124,58,237,.20)} .topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:12px; flex-wrap:wrap;padding:12px 16px} .brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit} .brand:hover{color:inherit} .brand-mark{width:38px;height:38px;border-radius:12px;object-fit:cover;display:block; background:rgba(255,255,255,.16);padding:3px} .brand-title{font-weight:700;font-size:1.16rem;line-height:1.1;letter-spacing:.005em} .brand-sub{font-size:.68rem;color:rgba(255,255,255,.78);letter-spacing:var(--track-wide);text-transform:var(--caps); font-weight:700} .nav{display:flex;gap:2px;flex-wrap:wrap} .nav a{color:rgba(255,255,255,.82);text-decoration:none;padding:8px 11px;border-radius:9px; font-weight:700;font-size:.8rem;display:inline-flex;align-items:center;gap:6px} .nav a:hover{background:rgba(255,255,255,.16);color:#fff} .nav a.active{background:#fff;color:var(--grape-d)} /* ---------- layout ---------- */ main.wrap{padding-top:22px;padding-bottom:44px} .card{background:var(--white);border:1px solid var(--line);border-radius:var(--r); padding:20px;box-shadow:var(--shadow);margin-bottom:16px} .card-soft{background:var(--grad-soft);border-color:transparent} .card-tight{padding:14px} .row{display:flex;gap:14px;flex-wrap:wrap} .row>*{flex:1 1 200px} .row-3>*{flex:1 1 140px} .split{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .stack-sm{display:flex;align-items:center;gap:8px} .mt{margin-top:14px} .mb0{margin-bottom:0} hr.soft{border:0;border-top:1px solid var(--line);margin:16px 0} /* ---------- flash + the quote that follows every save ---------- */ .flash{background:var(--grad);color:#fff;padding:14px 16px;border-radius:var(--r); margin-bottom:14px;font-size:.96rem;display:flex;align-items:center;gap:11px;font-weight:700; box-shadow:var(--shadow-md)} .flash .ico{opacity:.9} .quote-card{position:relative;background:var(--white);border:1px solid var(--line); border-radius:var(--r);padding:22px 24px 20px;margin-bottom:18px;box-shadow:var(--shadow); overflow:hidden} .quote-card::before{content:"";position:absolute;inset-block:0; inset-inline-start:0;inset-inline-end:auto;width:5px;background:var(--grad)} .quote-card .qmark{position:absolute;inset-block-start:12px;inset-inline-end:16px;color:var(--lilac);opacity:.32} .quote-body{font-size:1.16rem;line-height:1.55;color:var(--plum);font-style:var(--quote-style); margin:0 0 6px;padding-inline-end:34px} .quote-author{color:var(--pink);font-size:.8rem;font-weight:700;letter-spacing:var(--track-wide); text-transform:var(--caps)} .quote-card.hero{background:var(--grad-soft);border-color:transparent} /* ---------- stat cards ---------- */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:12px;margin-bottom:16px} .stat{background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);padding:15px 16px; box-shadow:var(--shadow)} .stat .num{font-size:1.95rem;font-weight:600;color:var(--plum);line-height:1.05; font-variant-numeric:tabular-nums;unicode-bidi:plaintext} .stat .lbl{color:var(--muted);font-size:.74rem;margin-top:5px;letter-spacing:var(--track-wide); text-transform:var(--caps);font-weight:700} .stat .foot{color:var(--faint);font-size:.76rem;margin-top:3px} .stat.accent{background:var(--grad);border-color:transparent} .stat.accent .num,.stat.accent .lbl,.stat.accent .foot{color:#fff} .stat.accent .lbl,.stat.accent .foot{opacity:.86} /* ---------- forms ---------- */ label{display:block;font-weight:700;margin:13px 0 5px;font-size:.86rem;color:var(--plum)} label.inline{display:inline-block;margin:0} input,select,textarea{ width:100%;padding:11px 13px;border:1px solid var(--line-2);border-radius:var(--r-sm); font:inherit;font-family:var(--font-body);background:var(--white);color:var(--ink)} input:focus,select:focus,textarea:focus{outline:2px solid var(--orchid);outline-offset:1px; border-color:var(--orchid)} textarea{min-height:92px;resize:vertical} input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--grape)} .hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} .field-note{color:var(--faint);font-size:.78rem;margin-top:4px} .btn{display:inline-flex;align-items:center;gap:8px;justify-content:center; background:var(--grad);color:#fff;border:1px solid transparent;border-radius:var(--r-sm); padding:11px 20px;font-size:.92rem;font-weight:700;font-family:var(--font-body); cursor:pointer;text-decoration:none;min-height:47px; box-shadow:0 4px 14px rgba(168,85,247,.26);transition:transform .08s ease,box-shadow .15s ease} .btn:hover{color:#fff;box-shadow:0 6px 20px rgba(219,39,119,.32)} .btn:active{transform:translateY(1px)} .btn-ghost{background:var(--white);color:var(--grape-d);border-color:var(--line-2);box-shadow:none} .btn-ghost:hover{background:var(--petal);color:var(--grape-d);border-color:var(--lilac);box-shadow:none} .btn-soft{background:var(--petal);color:var(--grape-d);border-color:transparent;box-shadow:none} .btn-soft:hover{background:var(--blush);color:var(--pink-d);box-shadow:none} .btn-no{background:var(--white);color:var(--bad);border-color:#f3cdd6;box-shadow:none} .btn-no:hover{background:var(--bad-bg);color:var(--bad);box-shadow:none} .btn-sm{padding:7px 13px;min-height:38px;font-size:.8rem;border-radius:9px;gap:6px} .btn-block{width:100%} .btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none} .btn-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:8px;align-items:center} .linkish{background:none;border:0;color:var(--muted);font:inherit;font-family:var(--font-body); text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px;min-height:0; display:inline-flex;align-items:center;gap:5px;font-size:.84rem} .linkish:hover{color:var(--pink)} /* ---------- segmented control ---------- */ .seg{display:flex;background:var(--petal);border-radius:var(--r-sm);padding:4px;gap:4px;flex-wrap:wrap} .seg a,.seg button{flex:1 1 0;min-width:84px;text-align:center;padding:9px 10px;border:0;background:none; border-radius:9px;color:var(--muted);text-decoration:none;font-weight:700;font-size:.85rem; cursor:pointer;font-family:var(--font-body);display:inline-flex;align-items:center; justify-content:center;gap:6px} .seg a.on,.seg button.on{background:var(--white);color:var(--grape-d);box-shadow:var(--shadow)} /* ---------- tables ---------- */ table{width:100%;border-collapse:collapse} th,td{text-align:start;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle} th{color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:var(--track-wide);text-transform:var(--caps)} tr:last-child td{border-bottom:0} td.num,th.num{text-align:end;font-variant-numeric:tabular-nums;unicode-bidi:plaintext} .table-scroll{overflow-x:auto;margin:0 -4px;padding:0 4px} /* ---------- badges / pills ---------- */ .badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px; font-size:.71rem;font-weight:700;border:1px solid var(--line-2);background:var(--white);color:var(--muted)} .b-great{background:var(--good-bg);color:var(--good);border-color:#bfe8db} .b-ok{background:var(--petal);color:var(--grape-d);border-color:#e0ccf5} .b-limit{background:var(--warn-bg);color:var(--warn);border-color:#f3ddb4} .b-avoid{background:var(--bad-bg);color:var(--bad);border-color:#f5c9d3} .pill{display:inline-flex;align-items:center;gap:5px;background:var(--petal);color:var(--grape-d); border-radius:999px;padding:4px 11px;font-size:.74rem;font-weight:700} .pill-pink{background:var(--blush);color:var(--pink-d)} .note{background:var(--mist);border:1px solid var(--line);border-inline-start:4px solid var(--orchid); color:var(--muted);padding:12px 15px;border-radius:var(--r-sm);margin:12px 0;font-size:.92rem} .note.err{border-inline-start-color:var(--bad);background:var(--bad-bg);color:var(--bad)} .note.ok{border-inline-start-color:var(--good);background:var(--good-bg);color:var(--good)} .note strong{color:inherit} .empty{text-align:center;color:var(--faint);padding:28px 12px;font-size:.93rem} .footer{color:var(--faint);text-align:center;font-size:.8rem;padding:24px 0 40px} .more-link{color:var(--grape-d);text-decoration:none;font-size:.84rem;padding:11px 22px; display:inline-flex;align-items:center;gap:8px;font-weight:700;background:var(--white); border-radius:999px;border:1px solid var(--line);box-shadow:var(--shadow)} .more-link:hover{color:var(--pink);border-color:var(--rose)} /* ---------- home ---------- */ .home-main{padding-top:6px} .home-head{text-align:center;margin:6px 0 20px} .home-head img{width:64px;height:64px;border-radius:20px;box-shadow:var(--shadow-md)} .home-head .t{font-size:2rem;font-weight:700;margin-top:12px;color:var(--plum);line-height:1.1} .home-head .d{color:var(--muted);font-size:.86rem;letter-spacing:var(--track-wide);text-transform:var(--caps); font-weight:700} .hero-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} .hero-btn{display:flex;flex-direction:column;align-items:flex-start;gap:8px; min-height:126px;width:100%;border:1px solid var(--line);border-radius:var(--r);cursor:pointer; background:var(--white);color:var(--plum);text-decoration:none;text-align:start; padding:18px;box-shadow:var(--shadow);font-family:var(--font-body); transition:transform .1s ease,box-shadow .15s ease} .hero-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);color:var(--plum)} .hero-btn .ring{width:44px;height:44px;border-radius:14px;display:grid;place-items:center; background:var(--grad-soft);color:var(--grape-d);flex:0 0 auto} .hero-btn .lbl{font-size:1.05rem;font-weight:700;line-height:1.2} .hero-btn .sub{font-size:.78rem;color:var(--muted);font-weight:400;line-height:1.35} .hero-btn.wide{grid-column:1 / -1;flex-direction:row;align-items:center;min-height:84px;gap:16px} .hero-btn.wide .lbl-wrap{display:flex;flex-direction:column;gap:2px} .hero-btn.primary{background:var(--grad);border-color:transparent;color:#fff; box-shadow:0 8px 26px rgba(168,85,247,.3)} .hero-btn.primary:hover{color:#fff} .hero-btn.primary .ring{background:rgba(255,255,255,.2);color:#fff} .hero-btn.primary .sub{color:rgba(255,255,255,.82)} /* ---------- today strip on the home screen ---------- */ .today-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(94px,1fr));gap:10px; margin-bottom:16px} .tchip{background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 12px; box-shadow:var(--shadow);text-decoration:none;color:var(--ink);display:block} .tchip:hover{border-color:var(--lilac);color:var(--ink)} .tchip .v{font-weight:700;font-size:1.1rem;color:var(--plum);font-variant-numeric:tabular-nums; line-height:1.15;unicode-bidi:plaintext} .tchip .k{color:var(--faint);font-size:.68rem;letter-spacing:var(--track-wide);text-transform:var(--caps); font-weight:700;display:flex;align-items:center;gap:4px;margin-bottom:3px} /* ---------- steppers ---------- */ .stepper{display:flex;align-items:center;gap:12px;justify-content:center;margin:12px 0 6px} .stepper button{width:62px;height:62px;flex:0 0 auto;border-radius:18px;border:1px solid var(--line-2); background:var(--white);color:var(--grape-d);cursor:pointer; display:flex;align-items:center;justify-content:center;padding:0;box-shadow:var(--shadow)} .stepper button:hover{background:var(--petal);border-color:var(--lilac)} .stepper button:active{background:var(--blush)} .stepper input{width:140px;text-align:center;font-family:var(--font-num);font-size:1.9rem;direction:ltr; font-weight:600;color:var(--plum);padding:10px 4px;font-variant-numeric:tabular-nums; border-color:var(--line-2)} .stepper .unit{color:var(--muted);font-size:.8rem;flex:0 0 auto;font-weight:700;text-transform:var(--caps); letter-spacing:var(--track-wide)} .stepper-fine{display:flex;gap:10px;justify-content:center;margin-top:2px} .stepper-fine button{flex:1 1 0;max-width:140px;width:auto;height:auto} /* ---------- big numbers & trend ---------- */ .big-num{font-size:2.9rem;font-weight:600;color:var(--plum);line-height:1; font-variant-numeric:tabular-nums;unicode-bidi:plaintext} .trend{font-weight:700;display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums; font-size:.94rem;unicode-bidi:plaintext} .trend .ico{width:15px;height:15px;stroke-width:2.4} .trend.down{color:var(--good)} .trend.up{color:var(--pink)} .trend.flat{color:var(--muted)} /* ---------- sparkline ---------- */ .spark{width:100%;height:130px;display:block;margin-top:10px} .spark-line{fill:none;stroke:var(--grape);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round; vector-effect:non-scaling-stroke} .spark-dot{fill:var(--pink);stroke:#fff;stroke-width:2.5;vector-effect:non-scaling-stroke} .spark-scale{display:flex;justify-content:space-between;color:var(--faint);font-size:.74rem;margin-top:-2px} /* ---------- meters ---------- */ .meter{height:10px;border-radius:999px;background:var(--petal);overflow:hidden;margin-top:6px} .meter i{display:block;height:100%;border-radius:999px;background:var(--grad); transition:width .3s ease} .meter-green i{background:linear-gradient(90deg,#34d399,#0f9d76)} .meter-amber i{background:linear-gradient(90deg,#fbbf24,#d97706)} .meter.over i{background:linear-gradient(90deg,#fb7185,#be123c)} .macro{margin-bottom:14px} .macro:last-child{margin-bottom:0} .macro .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px} .macro .name{font-weight:700;font-size:.88rem;color:var(--plum)} .macro .val{font-variant-numeric:tabular-nums;font-size:.86rem;color:var(--muted);font-weight:700} .macro .val b{color:var(--plum)} /* ---------- 0..10 scale strips ---------- */ .scale{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px} .scale-dot{display:grid;place-items:center;flex:1 1 0;min-width:32px;height:44px;margin:0; border:1px solid var(--line-2);border-radius:10px;background:var(--white);color:var(--muted); cursor:pointer;font-weight:700;font-size:.84rem;user-select:none} .scale-dot:hover{border-color:var(--lilac);background:var(--mist)} .scale input:checked + .scale-dot{background:var(--grad);color:#fff;border-color:transparent; box-shadow:0 4px 12px rgba(168,85,247,.3)} .scale-ends{display:flex;justify-content:space-between;color:var(--faint);font-size:.74rem;margin-top:4px} /* mood/energy: 5 wide buttons */ .scale-5 .scale-dot{height:48px;min-width:52px} /* ---------- calendar ---------- */ .cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px} .cal-title{font-weight:700;font-size:1.02rem;color:var(--plum);display:inline-flex;align-items:center;gap:8px} .cal-nav{display:flex;gap:6px} .cal-nav a{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--line-2);border-radius:12px;color:var(--grape-d);text-decoration:none} .cal-nav a:hover{border-color:var(--lilac);background:var(--petal)} .cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:5px} .cal-dow span{text-align:center;color:var(--faint);font-size:.68rem;letter-spacing:var(--track-wide);padding:4px 0; font-weight:700;text-transform:var(--caps)} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px} .cal-cell{position:relative;min-height:58px;border:1px solid var(--line);border-radius:12px; background:var(--white);display:flex;flex-direction:column;align-items:center;justify-content:center; gap:2px;text-decoration:none;color:var(--ink);padding:4px 2px} .cal-cell.blank{background:transparent;border:0} .cal-cell:hover{border-color:var(--lilac);color:var(--ink)} .cal-cell .d{font-size:.78rem;color:var(--muted);line-height:1;font-weight:700} .cal-cell .v{font-size:.76rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums; color:var(--plum)} .cal-cell.has{background:var(--petal);border-color:#e6d6f6} .cal-cell.sel{background:var(--grad);border-color:transparent;box-shadow:var(--shadow-md)} .cal-cell.sel .d,.cal-cell.sel .v{color:#fff} .cal-cell.today{box-shadow:inset 0 0 0 2px var(--rose)} .cal-cell.sel.today{box-shadow:inset 0 0 0 2px #fff} .cal-cell.future{opacity:.32;pointer-events:none} .cal-cell .dots{display:flex;gap:3px;margin-top:1px} .cal-cell .dots i{width:5px;height:5px;border-radius:50%;display:block;background:var(--lilac)} .cal-cell .dots i.k{background:var(--good)} .cal-cell .dots i.m{background:var(--pink)} .cal-cell.sel .dots i{background:rgba(255,255,255,.85)} .cal-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;color:var(--faint);font-size:.76rem} .cal-legend i{width:7px;height:7px;border-radius:50%;display:inline-block;margin-inline-end:5px} /* ---------- food ---------- */ .meal-block{margin-bottom:16px} .meal-head{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:0 2px 8px;border-bottom:1px solid var(--line);margin-bottom:8px} .meal-head .t{font-weight:700;color:var(--plum);font-size:.94rem;display:flex;align-items:center;gap:7px} .meal-head .c{color:var(--faint);font-size:.78rem;font-variant-numeric:tabular-nums;font-weight:700} .food-row{display:flex;align-items:center;gap:11px;padding:9px 4px;border-bottom:1px solid var(--line)} .food-row:last-child{border-bottom:0} .food-row .body{flex:1 1 auto;min-width:0} .food-row .nm{font-weight:700;font-size:.93rem;color:var(--ink);overflow-wrap:anywhere} .food-row .meta{color:var(--faint);font-size:.76rem} .food-row .nc{font-variant-numeric:tabular-nums;font-weight:700;color:var(--grape-d); white-space:nowrap;font-size:.9rem;text-align:end;unicode-bidi:plaintext} .food-row .nc small{display:block;color:var(--faint);font-weight:400;font-size:.66rem; letter-spacing:var(--track-wide);text-transform:var(--caps)} .food-row form{display:flex;align-items:center} .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;display:inline-block} .dot-great{background:var(--good)} .dot-ok{background:var(--orchid)} .dot-limit{background:#e0a63a} .dot-avoid{background:var(--bad)} .picker{max-height:390px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r-sm); background:var(--white)} .picker .pick{display:flex;align-items:center;gap:10px;padding:11px 13px;border-bottom:1px solid var(--line); width:100%;background:none;border-inline:0;border-block-start:0;text-align:start;cursor:pointer; font:inherit;font-family:var(--font-body);color:var(--ink)} .picker .pick:last-child{border-bottom:0} .picker .pick:hover{background:var(--mist)} .picker .pick .body{flex:1 1 auto;min-width:0} .picker .pick .nm{font-weight:700;font-size:.9rem;display:block;overflow-wrap:anywhere} .picker .pick .meta{color:var(--faint);font-size:.75rem;display:block} .picker .pick .w{font-weight:700;font-variant-numeric:tabular-nums;color:var(--grape-d);font-size:.86rem; white-space:nowrap;text-align:end;unicode-bidi:plaintext} .picker .pick .w small{display:block;color:var(--faint);font-weight:400;font-size:.64rem; text-transform:var(--caps);letter-spacing:var(--track-wide)} .quick-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px} .quick-row .qb{border:1px solid var(--line-2);background:var(--white);border-radius:999px; padding:8px 14px;font:inherit;font-family:var(--font-body);font-size:.82rem;font-weight:700; color:var(--grape-d);cursor:pointer;display:inline-flex;align-items:center;gap:6px} .quick-row .qb:hover{background:var(--petal);border-color:var(--lilac)} .search-bar{display:flex;gap:8px;align-items:center} .search-bar input{flex:1 1 auto} .search-bar .btn{flex:0 0 auto} /* ---------- massage / timeline ---------- */ .tl{list-style:none;margin:0;padding:0} .tl li{position:relative;padding-block:0 18px;padding-inline:34px 0} .tl li::before{content:"";position:absolute;inset-inline-start:11px;inset-block:22px 0;width:2px;background:var(--line)} .tl li:last-child::before{display:none} .tl li:last-child{padding-bottom:0} .tl .bullet{position:absolute;inset-inline-start:0;inset-block-start:2px;width:24px;height:24px;border-radius:50%; background:var(--grad-soft);color:var(--grape-d);display:grid;place-items:center} .tl .when{color:var(--faint);font-size:.75rem;letter-spacing:var(--track-wide);text-transform:var(--caps);font-weight:700} .tl .what{font-weight:700;color:var(--plum);font-size:.96rem} .tl .detail{color:var(--muted);font-size:.85rem} .relief{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums; font-weight:700;font-size:.86rem} .relief .from{color:var(--muted)} .relief .to{color:var(--good)} /* ---------- modal ---------- */ .modal-overlay{position:fixed;inset:0;background:rgba(59,13,79,.55);backdrop-filter:blur(3px); display:flex;align-items:center;justify-content:center;padding:18px;z-index:1000} .modal-overlay[hidden]{display:none} .modal{background:var(--white);border-radius:var(--r);box-shadow:var(--shadow-lg); width:100%;max-width:430px;padding:24px;animation:modal-in .14s ease-out} @keyframes modal-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}} .modal-msg{font-size:1rem;margin:0 0 12px;line-height:1.6;color:var(--ink)} .modal-input{margin-bottom:6px} .modal-err{color:var(--bad);font-size:.83rem;margin:4px 0 0;font-weight:700} .modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px} .modal-actions .btn{min-width:98px} /* ---------- lightbox ---------- */ .zoomable{cursor:zoom-in} .lightbox{position:fixed;inset:0;background:rgba(46,16,56,.94);display:flex;align-items:center; justify-content:center;z-index:1200;cursor:zoom-out;padding:20px} .lightbox[hidden]{display:none} .lightbox img{max-width:95vw;max-height:90vh;border-radius:12px} /* ---------- gate ---------- */ .center-narrow{max-width:440px;margin:40px auto} .pin-input{letter-spacing:.6em;text-align:center;font-family:var(--font-num); font-size:1.7rem;font-weight:600} /* ---------- details/summary ---------- */ details.extras{margin-top:14px;border-top:1px solid var(--line);padding-top:4px} details.extras summary{cursor:pointer;font-weight:700;font-size:.86rem;color:var(--grape-d); padding:11px 0;min-height:44px;display:flex;align-items:center;gap:8px;list-style:none} details.extras summary::-webkit-details-marker{display:none} details.extras summary::marker{content:''} details.extras[open] summary{color:var(--pink)} @media(max-width:600px){ h1{font-size:1.44rem} .card{padding:16px} th,td{padding:9px 9px;font-size:.85rem} .stepper button{width:56px;height:56px} .stepper input{width:118px;font-size:1.6rem} .big-num{font-size:2.4rem} .home-head .t{font-size:1.68rem} .hero-btn{min-height:112px;padding:15px} .hero-btn .lbl{font-size:.96rem} .cal-cell{min-height:50px} .nav a{font-size:.74rem;padding:7px 8px} .nav a span{display:none} .nav a .ico{margin:0} .quote-body{font-size:1.05rem} .scale-dot{min-width:26px;height:40px;font-size:.78rem} /* Four chips read better as a clean 2x2 than as 3-then-1. */ .today-strip{grid-template-columns:repeat(2,1fr)} /* Let four tabs share one row rather than orphaning the last one. */ .seg a,.seg button{min-width:0;padding:9px 4px;font-size:.8rem} .spark-scale{font-size:.68rem} } /* ---------- things that must NOT mirror ---------- */ /* A time series reads left-to-right in Arabic too, and the SVG's own coordinates never mirror — so pin the caption to match the curve. */ .spark,.spark-scale{direction:ltr;unicode-bidi:plaintext} /* Gradient angles are the one thing logical properties cannot express. */ [dir="rtl"]{ --grad:linear-gradient(240deg,#7c3aed 0%,#a855f7 45%,#db2777 100%); --grad-soft:linear-gradient(240deg,#f5edff 0%,#fce7f3 100%); } /* Arabic sits lower and needs more room between lines than Latin. */ :lang(ar) body{line-height:1.8} :lang(ar) .pin-input{letter-spacing:normal} /* ?i18n=1 — anything still falling back to English. */ .i18n-miss{outline:1px dashed var(--bad);outline-offset:2px;background:var(--bad-bg)} /* ---------- language toggle ---------- */ /* Shown as the other language's own name in its own script — "العربية" is recognisable at a glance in a way a flag or an ISO code is not. */ .nav .lang-toggle{border:1px solid rgba(255,255,255,.45);font-weight:700} .nav .lang-toggle:hover{background:#fff;color:var(--grape-d);border-color:#fff} .lang-toggle-home{position:absolute;inset-block-start:14px;inset-inline-end:16px; background:var(--white);color:var(--grape-d);border:1px solid var(--line); border-radius:999px;padding:7px 15px;font-size:.82rem;font-weight:700; text-decoration:none;box-shadow:var(--shadow);z-index:5} .lang-toggle-home:hover{border-color:var(--lilac);color:var(--pink)} .home-main{position:relative} /* ---------- bidi: data-derived text ---------- Anything whose language the app does not control — a food name she typed, a custom quote, a value with a unit — gets plaintext direction so each element lays itself out by its own first strong character. Without this, an English food name inside the Arabic UI renders with its punctuation flipped to the wrong end, which reads as corruption rather than as a language mismatch. */ /* NOTE ON THE LIMIT OF THIS: plaintext fixes the ORDER of a mixed run, so "101.1 kg" stops rendering as "kg 101.1". It does NOT fix ALIGNMENT — text-align:start still resolves against the computed direction, which stays rtl. Alignment for unknown-language content needs dir="auto" in the markup, which is applied to the elements carrying HER data (food names, notes, custom quotes). UI chrome does not need it: once translated it is known to be Arabic, and RTL alignment is then correct by definition. */ div,h1,h2,h3,p,label,li,td,th,summary,figcaption, .quote-body,.quote-author,.sub,.field-note,.empty,.note,.flash span, .tchip .v,.tchip .k,.hero-btn .lbl,.hero-btn .sub, .food-row .nm,.food-row .meta,.food-row .nc, .picker .pick .nm,.picker .pick .meta,.picker .pick .w, .tl .what,.tl .detail,.tl .when, .stat .num,.stat .lbl,.stat .foot,.macro .name,.macro .val, .big-num,.trend,.modal-msg,.cal-cell .v,.badge,.pill{ unicode-bidi:plaintext; } /* Eleven dots (0..10) plus gaps overflow a phone at the old 32px minimum, and a wrapped flex item with flex:1 1 0 expands to a full-width row — so the "10" was landing on its own line looking like a separate control. Let the dots shrink instead; they stay comfortably above the 44px touch target on the cross axis. */ .scale{flex-wrap:nowrap;gap:4px} .scale-dot{min-width:0;padding:0} .scale-5{flex-wrap:wrap;gap:6px} .scale-5 .scale-dot{min-width:46px} @media(max-width:420px){ .scale{gap:3px} .scale-dot{font-size:.76rem} } /* ---------- progress photos ---------- */ .ph-day{margin-bottom:18px} .ph-day:last-child{margin-bottom:0} .ph-day-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px; padding-bottom:6px;border-bottom:1px solid var(--line);margin-bottom:8px; font-weight:700;color:var(--plum);font-size:.9rem} .ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px} .ph{margin:0} .ph img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-sm); border:1px solid var(--line);display:block;background:var(--petal)} .ph figcaption{display:flex;align-items:center;justify-content:space-between;gap:6px; color:var(--faint);font-size:.74rem;margin-top:4px} /* The before/after slider. Pinned to LTR: "then" is on the left and "now" on the right in both languages, because the widget reads as a timeline, not as text — mirroring it would put the newer photo where the older one was and quietly invert the story. */ .cmp{position:relative;direction:ltr;border-radius:var(--r);overflow:hidden; border:1px solid var(--line);background:var(--petal);line-height:0; box-shadow:var(--shadow);touch-action:pan-y} .cmp img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block} /* clip-path rather than width: the pane stays full-size and is simply masked, so its image is always exactly the container width and both halves show the SAME crop. Sizing the pane instead would rescale its image and the two sides would silently show different framings — which makes the whole comparison meaningless. It also needs no JS measurement, so nothing drifts on resize or rotation. */ .cmp-top{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)} .cmp-top img{width:100%} .cmp-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px; background:#fff;box-shadow:0 0 0 1px rgba(76,5,110,.25);pointer-events:none} .cmp-handle::after{content:"";position:absolute;top:50%;left:50%; width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%; background:#fff;box-shadow:var(--shadow-md)} .cmp-tag{position:absolute;bottom:10px;padding:4px 10px;border-radius:999px; background:rgba(46,16,56,.72);color:#fff;font-size:.72rem;font-weight:700; line-height:1.4;pointer-events:none} .cmp-tag-a{left:10px} .cmp-tag-b{right:10px} .cmp-range{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0; opacity:0;cursor:ew-resize;appearance:none;background:none} /* ---------- insights ---------- */ .ins{display:flex;align-items:flex-start;gap:11px;padding:12px 0;border-bottom:1px solid var(--line)} .ins:last-child{border-bottom:0;padding-bottom:0} .ins:first-of-type{padding-top:0} .ins-ico{flex:0 0 auto;width:34px;height:34px;border-radius:11px;display:grid;place-items:center} .ins-body{flex:1 1 auto;min-width:0} .ins-title{font-weight:700;color:var(--plum);font-size:.94rem;line-height:1.35} .ins-text{color:var(--muted);font-size:.86rem;line-height:1.5;margin-top:2px} .ins-x{flex:0 0 auto} .ins-x .linkish{padding:2px 4px;color:var(--faint)} /* Tone by icon tint only. A full-width coloured banner for "your swelling is up" would shout; this is meant to be read, not obeyed. */ .ins-ok .ins-ico{background:var(--good-bg);color:var(--good)} .ins-info .ins-ico{background:var(--petal);color:var(--grape-d)} .ins-warn .ins-ico{background:var(--warn-bg);color:var(--warn)} /* ---------- weekly check-in banner ---------- */ .week-banner{display:flex;align-items:center;gap:13px;padding:14px 16px;margin-bottom:16px; background:var(--grad);color:#fff;border-radius:var(--r);text-decoration:none; box-shadow:0 8px 26px rgba(168,85,247,.28)} .week-banner:hover{color:#fff} .week-banner .ring{width:40px;height:40px;flex:0 0 auto;border-radius:13px;display:grid; place-items:center;background:rgba(255,255,255,.2)} .week-banner .lbl-wrap{flex:1 1 auto;min-width:0;display:flex;flex-direction:column} .week-banner .lbl{font-weight:700;font-size:1rem;line-height:1.25} .week-banner .sub{font-size:.78rem;color:rgba(255,255,255,.84)} .week-banner .cta{flex:0 0 auto;font-weight:700;font-size:.82rem;display:inline-flex; align-items:center;gap:3px} /* The chevron is directional: it must point the way reading travels. */ [dir="rtl"] .week-banner .cta .ico{transform:scaleX(-1)} /* ---------- barcode scanner ---------- */ .scan-wrap{margin-bottom:10px} #scan-video{width:100%;max-height:280px;object-fit:cover;border-radius:var(--r-sm); background:#2e1038;display:block} /* ---------- PIN boxes ---------- */ /* Pinned LTR: a PIN is a sequence, not a sentence, so it fills left-to-right in both languages. */ .pin-boxes{display:flex;gap:10px;justify-content:center;direction:ltr;margin:6px 0 2px} .pin-box{width:58px;height:66px;flex:0 0 auto;text-align:center; font-family:var(--font-num);font-size:1.9rem;font-weight:600;color:var(--plum); border:1px solid var(--line-2);border-radius:14px;padding:0;background:var(--white); caret-color:var(--grape)} .pin-box:focus{outline:2px solid var(--orchid);outline-offset:1px;border-color:var(--orchid)} .pin-box.filled{border-color:var(--lilac);background:var(--mist)} @media(max-width:400px){ .pin-box{width:52px;height:60px;font-size:1.6rem} } /* ---- Accounts ------------------------------------------------------- Country + number as one control. Forced LTR at the markup level too: a phone number is a sequence, and in an RTL run the country code drifts to the wrong end of it. */ .phone-row{display:flex;gap:8px;align-items:stretch} .phone-row select{flex:0 0 auto;max-width:44%;min-width:0} .phone-row input{flex:1 1 auto;min-width:0} /* Six digits, not four. The PIN boxes were sized for a 4-digit code and six of them overflow a 440px card, so the OTP screen sizes them down instead of letting the row wrap — a code split across two lines stops reading as one number. */ .pin-boxes:has(.pin-box:nth-child(5)) .pin-box{width:46px;height:56px;font-size:1.5rem} @media(max-width:400px){ .pin-boxes:has(.pin-box:nth-child(5)){gap:6px} .pin-boxes:has(.pin-box:nth-child(5)) .pin-box{width:40px;height:50px;font-size:1.3rem} } /* Destructive. Deliberately not the primary gradient — deleting an account should not look like the same kind of action as saving a weigh-in. */ .btn-danger{background:var(--white);color:var(--bad);border-color:var(--bad);box-shadow:none} .btn-danger:hover{background:var(--bad-bg);color:var(--bad);border-color:var(--bad);box-shadow:none}