/* ================================================================ LipeLight — 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)} /* ---------- the daily piece of information ---------- Deliberately the quietest card on the home screen. It sits BELOW the buttons, and it is the one thing there that asks nothing of her — so it gets no gradient, no ring, no colour that competes with the challenge card above it. The question does the work. */ .tip-card .tip-q{font-weight:700;color:var(--plum);font-size:1rem;line-height:1.4; margin-top:2px} .tip-card .tip-a{color:var(--muted);font-size:.9rem;line-height:1.62;margin-top:7px} /* Answers arrive as stored HTML —

and the odd — so the paragraph margins have to be tamed here rather than assumed away. */ .tip-card .tip-a p{margin:0 0 8px} .tip-card .tip-a p:last-child{margin-bottom:0} .tip-card .tip-a a{color:var(--grape-d);text-decoration:underline} .tip-foot{display:flex;align-items:center;justify-content:space-between;gap:12px; margin-top:12px} .tip-more{display:inline-flex;align-items:center;gap:4px;font-weight:700; font-size:.86rem;color:var(--grape-d);text-decoration:none} .tip-more:hover{color:var(--pink-d)} .tip-x .linkish{padding:2px 4px;color:var(--faint);font-size:.78rem} .tip-src{margin-top:9px;padding-top:8px;border-top:1px solid var(--line); line-height:1.5} /* The contextual one-liner: the same content, offered on the page where the question actually comes up. A row, not a card — it belongs to the thing above it rather than being a second subject. */ .tip-inline{display:flex;align-items:center;gap:9px;margin-top:12px; padding:10px 12px;border-radius:var(--r-sm);background:var(--petal); color:var(--plum);text-decoration:none;font-size:.86rem;line-height:1.4; font-weight:600} .tip-inline:hover{background:var(--blush);color:var(--pink-d)} .tip-inline .ti-ico{flex:0 0 auto;display:grid;place-items:center;color:var(--grape-d)} .tip-inline > span[dir]{flex:1 1 auto;min-width:0} .tip-inline .ti-go{flex:0 0 auto;color:var(--faint)} /* Chevrons are directional: they must point the way reading travels. */ [dir="rtl"] .tip-more .ico, [dir="rtl"] .tip-inline .ti-go .ico{transform:scaleX(-1)} /* ---------- 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} /* ==================================================================== v4 — Moves, profile, welcome flow, daily challenge ==================================================================== */ /* ---- Move figures --------------------------------------------------- Two poses cross-fading is the instruction: an ankle pump IS the change between them. Colours come from the palette, so the drawings theme with the rest of the app instead of being flat black line art pasted in. Mirrored under RTL because every figure is a stylised person and none of them depicts a specific side of the body — so facing into the text reads as intentional and nothing anatomical is lost. */ .mfig{--fig-ink:var(--muted);--fig-accent:var(--grape);--fig-arrow:var(--pink); display:block;max-width:100%;height:auto;overflow:visible} [dir=rtl] .mfig{transform:scaleX(-1)} .mfig .fg{stroke:var(--fig-ink)} .mfig .ac{stroke:var(--fig-accent);stroke-width:5.2} .mfig .ar{stroke:var(--fig-arrow);stroke-width:3.4;color:var(--pink)} .mfig .gr{stroke:var(--line-2);stroke-width:3} @keyframes mfigA{0%,42%{opacity:1}58%,100%{opacity:0}} @keyframes mfigB{0%,42%{opacity:0}58%,100%{opacity:1}} .mfig .p1{animation:mfigA 3s ease-in-out infinite} .mfig .p2{animation:mfigB 3s ease-in-out infinite} @media(prefers-reduced-motion:reduce){ .mfig .p1{animation:none;opacity:1} .mfig .p2{animation:none;opacity:0} } /* ---- Move catalogue ---- */ .mv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:12px 0} .mv-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:14px; box-shadow:var(--shadow);text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:8px; transition:box-shadow .18s,border-color .18s,transform .18s} .mv-card:hover{box-shadow:var(--shadow-md);border-color:var(--lilac);transform:translateY(-2px)} .mv-fig{display:flex;align-items:center;justify-content:center;background:var(--grad-soft); border-radius:var(--r-sm);padding:8px;min-height:104px} .mv-body{display:flex;flex-direction:column;gap:4px} .mv-cat{display:inline-flex;align-items:center;gap:5px;color:var(--grape-d);font-size:.72rem; font-weight:800;text-transform:var(--caps);letter-spacing:var(--track-wide)} .mv-card .nm{font-family:var(--font-head);font-size:1.06rem;font-weight:600;color:var(--ink);line-height:1.3} .mv-meta{color:var(--muted);font-size:.82rem} .mv-done{color:var(--good);font-size:.76rem;font-weight:700;display:inline-flex;align-items:center;gap:4px} /* ---- One move ---- */ .mv-head-in{display:flex;gap:16px;align-items:flex-start;margin-top:10px;flex-wrap:wrap} .mv-head-fig{flex:0 0 auto;background:var(--grad-soft);border-radius:var(--r);padding:10px} .mv-head-in>div:last-child{flex:1 1 240px;min-width:0} .mv-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .mv-steps{list-style:none;counter-reset:mvstep;padding:0;margin:8px 0 0} .mv-steps li{counter-increment:mvstep;display:flex;gap:12px;align-items:flex-start; padding:13px 0;border-top:1px solid var(--line)} .mv-steps li:first-child{border-top:0} .mv-steps li::before{content:counter(mvstep);flex:0 0 auto;width:26px;height:26px;border-radius:50%; background:var(--grad);color:#fff;font-weight:800;font-size:.8rem;display:flex; align-items:center;justify-content:center;margin-top:1px} .mv-step-fig{flex:0 0 auto;background:var(--grad-soft);border-radius:var(--r-sm);padding:4px} .mv-step-h{font-weight:800;color:var(--grape-d);margin-bottom:2px} @media(max-width:520px){ .mv-step-fig{display:none} .mv-head-fig{margin-inline:auto} } /* ---- Notes with an icon beside them ---- */ .note-soft,.note-warn{display:flex;gap:11px;align-items:flex-start} .note-warn{border-inline-start-color:var(--warn);background:var(--warn-bg);color:#8a5208} .note-warn a{color:inherit} .note svg{flex:0 0 auto;margin-top:1px} ul.tight{margin:6px 0 0;padding-inline-start:20px} ul.tight li{margin:4px 0} .seg-wrap a{flex:0 1 auto} .check{display:flex;align-items:center;gap:9px;margin:12px 0 2px;cursor:pointer;font-weight:600} .check input{width:20px;height:20px;accent-color:var(--grape);flex:0 0 auto;margin:0} /* ---- References ---- */ .ref{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--line)} .ref:first-of-type{border-top:0} .ref-key{flex:0 0 auto;font-size:.68rem;font-weight:800;color:var(--grape-d);background:var(--petal); border-radius:7px;padding:5px 8px;height:fit-content;letter-spacing:.04em} .ref-body{min-width:0} .ref-body .nm{font-family:var(--font-head);font-size:1.04rem;font-weight:600;color:var(--ink)} .quoteblock{margin:10px 0;padding:12px 16px;background:var(--grad-soft);border-radius:var(--r-sm); font-family:var(--font-head);font-style:var(--quote-style);color:var(--plum);font-size:1.02rem} /* ---- Profile ---- */ .pf-head{display:flex;gap:16px;align-items:center;flex-wrap:wrap} .pf-mono{flex:0 0 auto;width:76px;height:76px;border-radius:50%;background:var(--grad);color:#fff; display:flex;align-items:center;justify-content:center;font-family:var(--font-head); font-size:2.1rem;font-weight:700;box-shadow:var(--shadow-md)} .pf-facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .pf-why{margin:12px 0 0;padding:12px 16px;background:var(--grad-soft);border-radius:var(--r-sm); font-family:var(--font-head);font-style:var(--quote-style);color:var(--plum)} .chip-pick{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0} .chip-pick input{position:absolute;opacity:0;width:0;height:0} .chip-pick label{border:1.5px solid var(--line-2);background:var(--white);color:var(--muted); border-radius:999px;padding:9px 16px;font-weight:700;font-size:.88rem;cursor:pointer; transition:all .15s;display:inline-flex;align-items:center;gap:7px} .chip-pick input:checked+label{border-color:var(--grape);background:var(--petal);color:var(--grape-d)} .chip-pick input:focus-visible+label{outline:2px solid var(--grape);outline-offset:2px} /* ---- Welcome flow --------------------------------------------------- Reads as a modal without being one: no nav chrome, dimmed backdrop, a single centred card. It is a real page so that every step is a plain form POST — it works with JS off and never touches the offline queue. */ .wc-body{background:var(--grad);min-height:100vh;min-height:100dvh;display:flex; align-items:center;justify-content:center;padding:20px 16px} .wc-card{background:var(--white);border-radius:24px;box-shadow:var(--shadow-lg); width:100%;max-width:520px;padding:30px 28px 26px} .wc-dots{display:flex;gap:6px;justify-content:center;margin-bottom:22px} .wc-dots i{width:7px;height:7px;border-radius:50%;background:var(--line-2);transition:all .25s} .wc-dots i.on{background:var(--grape);width:22px;border-radius:999px} .wc-dots i.past{background:var(--lilac)} .wc-card h1{font-size:1.72rem;margin:0 0 10px;line-height:1.25} .wc-card .sub{font-size:1rem;margin:0 0 20px} /* Was an emoji. Emoji render differently on every platform, carry tone the app has not chosen, and sit oddly beside an Arabic heading — so the mark at the top of a welcome screen is the app icon set, like everything else. */ .wc-mark{display:flex;align-items:center;justify-content:center;width:64px;height:64px; border-radius:20px;background:var(--grad);color:#fff;margin:0 0 16px;box-shadow:var(--shadow-md)} [dir=rtl] .wc-mark{margin-inline:0 auto} .wc-actions{display:flex;gap:10px;align-items:center;margin-top:22px} .wc-actions .btn{flex:1 1 auto;justify-content:center} .wc-skip{color:var(--faint);font-size:.85rem;text-decoration:none;flex:0 0 auto;padding:10px} .wc-skip:hover{color:var(--muted)} .wc-back{color:var(--muted);font-size:.85rem;text-decoration:none;display:inline-flex; align-items:center;gap:5px;margin-bottom:14px} @media(max-width:460px){ .wc-card{padding:24px 20px 20px} .wc-card h1{font-size:1.46rem} } /* ---- Daily challenge ---- */ .ch-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--shadow);padding:16px 18px;margin:12px 0} .ch-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap} .ch-day{font-family:var(--font-head);font-size:1.2rem;font-weight:600;color:var(--ink)} .ch-of{color:var(--faint);font-size:.8rem;font-weight:700} .ch-title{font-family:var(--font-head);font-size:1.34rem;color:var(--plum);margin:6px 0 0;line-height:1.3} .ch-intro{color:var(--muted);font-size:.94rem;margin:8px 0 0} .ch-bar{display:flex;gap:5px;margin:14px 0 4px} .ch-bar i{height:6px;flex:1;border-radius:999px;background:var(--line-2)} .ch-bar i.on{background:var(--grad)} .ch-tasks{display:flex;flex-direction:column;gap:9px;margin-top:14px} .ch-task{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line); border-radius:var(--r-sm);padding:12px 14px;background:var(--white);transition:all .18s} .ch-task.done{border-color:var(--good);background:var(--good-bg)} .ch-task .tick{flex:0 0 auto;width:28px;height:28px;border-radius:50%;border:2px solid var(--line-2); background:none;cursor:pointer;display:flex;align-items:center;justify-content:center; color:transparent;padding:0} .ch-task.done .tick{border-color:var(--good);background:var(--good);color:#fff} .ch-task .tick:hover{border-color:var(--grape)} .ch-body{min-width:0;flex:1} .ch-k{font-size:.7rem;font-weight:800;color:var(--grape-d);text-transform:var(--caps);letter-spacing:var(--track-wide)} .ch-t{color:var(--ink);font-size:.95rem;margin-top:2px} .ch-task.done .ch-t{color:var(--muted)} .ch-auto{color:var(--good);font-size:.76rem;font-weight:700;margin-top:3px} .ch-soft{background:var(--petal);border-radius:var(--r-sm);padding:10px 13px;margin-top:12px; color:var(--grape-d);font-size:.87rem;display:flex;gap:9px;align-items:flex-start} .ch-done-banner{background:var(--grad);color:#fff;border-radius:var(--r);padding:16px 18px; text-align:center;margin:12px 0} .ch-done-banner .t{font-family:var(--font-head);font-size:1.3rem;margin-bottom:4px} .ch-move-link{display:flex;gap:10px;align-items:center;margin-top:8px;text-decoration:none; color:var(--grape-d);font-weight:700;font-size:.86rem} .ch-move-fig{flex:0 0 auto;background:var(--grad-soft);border-radius:9px;padding:3px} .wc-main{width:100%;display:flex;justify-content:center} /* Star ratings as icons rather than the U+2605/2606 glyphs, which render as colour emoji on some platforms and bare outlines on others. */ .stars{display:inline-flex;gap:1px;vertical-align:-2px} .stars span{color:var(--line-2);display:inline-flex} .stars span.on{color:var(--rose)} /* ================================================================ * The self-check * ================================================================ */ /* Figures share moves.php's four classes so they take the same colours in light and dark, but they are static — no p1/p2 cross-fade. `color` sits on the svg itself, not on .ar, because the arrowhead marker's currentColor resolves against the element, not against the path that references it. */ .scfig{display:block;max-width:100%;height:auto;overflow:visible;color:var(--pink)} .scfig .fg{stroke:var(--muted)} .scfig .ac{stroke:var(--grape);stroke-width:5} .scfig .ar{stroke:var(--pink);stroke-width:3.2} .scfig .gr{stroke:var(--line-2);stroke-width:3} /* NOT mirrored under RTL, unlike .mfig. A move figure is a stylised person and facing into the text reads as intentional; these are anatomical, and a mirrored body map would put the answer she ticked on the wrong side. */ /* The "next" arrow in a wizard points forward, which under RTL is leftwards. Scoped to .wc-actions so it fixes welcome.php and the self-check together and cannot flip an icon in some other button that should not be mirrored. */ [dir=rtl] .wc-actions .btn .ico{transform:scaleX(-1)} .sc-card{max-width:560px} .sc-fig{display:flex;justify-content:center;margin:2px 0 18px} .sc-item{margin-top:22px} .sc-item:first-of-type{margin-top:4px} .sc-q{font-weight:600;color:var(--ink);font-size:1.02rem;margin:0 0 2px;line-height:1.4} .sc-q-sm{display:block;font-weight:600;color:var(--ink);font-size:.95rem;margin-bottom:6px} .sc-help{margin:0 0 8px} .sc-note{margin-top:20px} .sc-skip-big{margin-top:10px} .sc-leave{margin-top:16px} /* Answer options. Full-width rows rather than chips: the wording is behaviourally anchored and therefore long, and a woman reading this on a phone in pain should not be hunting for a tap target. */ .sc-opts{display:flex;flex-direction:column;gap:8px;margin-top:8px} .sc-opts input{position:absolute;opacity:0;width:0;height:0} .sc-opts label{border:1.5px solid var(--line-2);background:var(--white);color:var(--ink); border-radius:var(--r-sm);padding:12px 14px;font-size:.93rem;line-height:1.45;cursor:pointer; transition:all .15s;display:block} .sc-opts label:hover{border-color:var(--lilac);background:var(--mist)} .sc-opts input:checked+label{border-color:var(--grape);background:var(--petal);color:var(--grape-d); font-weight:600} .sc-opts input:focus-visible+label{outline:2px solid var(--grape);outline-offset:2px} /* The count. Typography and nothing else — no meter, no ring, no percentage, no colour that encodes a value. Zero of seven has to render exactly like seven of seven, because this page does not grade anybody. */ .sc-count-line{font-family:var(--font-head);font-size:1.3rem;line-height:1.45;color:var(--ink);margin:0} .sc-count-line strong{color:var(--grape-d)} .sc-count-caveat{margin:12px 0 0;font-size:.9rem} .sc-feat{display:flex;gap:11px;align-items:flex-start;padding:11px 2px;border-bottom:1px solid var(--line)} .sc-feat:last-of-type{border-bottom:0} .sc-feat .nm{font-weight:600;color:var(--ink);font-size:.94rem;line-height:1.35} .sc-feat-mark{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;margin-top:1px} .sc-feat-yes .sc-feat-mark{background:var(--petal);color:var(--grape-d)} .sc-feat-no .sc-feat-mark{background:var(--mist);color:var(--faint)} /* "Not answered" must not look like "no". If skipping a question renders the same as answering it in the negative, a woman who skipped half of this reads a page telling her she has none of the features. */ .sc-feat-unanswered .sc-feat-mark{background:var(--blush);color:var(--pink-d)} .sc-feat-unanswered .nm{color:var(--muted)} .sc-where{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap} .sc-where>div{flex:1 1 200px;min-width:0} .sc-ask{margin:10px 0 0;padding-inline-start:20px;color:var(--ink);line-height:1.6} .sc-ask li{margin-bottom:8px} .sc-ownwords{margin-top:12px} .sc-apply{margin:14px 0} .sc-disclaimer{margin-top:18px} .sc-print-only{display:none} .week-banner-wrap{margin-bottom:16px} .week-banner-wrap .week-banner{margin-bottom:4px} /* ---------------------------------------------------------------- * Print. * * The app has no print styles anywhere else; this is the first page worth * putting on paper. Two rules here are not cosmetic: * * - a[href]::after is blanked. The default "show the URL after the link" * trick would print the address of her private diary onto a sheet she is * about to hand to a receptionist. * - .sc-print-only carries the app name and the date and DELIBERATELY no * name, email, phone or nickname. A clinical summary about a body, left on * a desk, should not be attributable. The clinic already knows who she is. * ---------------------------------------------------------------- */ @media print{ .topbar,.nav,.tabbar,.lang-toggle,.flash,.quote-card,.week-banner,.week-banner-wrap, .today-strip,.btn,.btn-row,.wc-actions,.sc-actions,.sc-screen-only,.home-head, .insight-card,.ch-card{display:none !important} body{background:#fff;color:#000} main,.wrap{max-width:none;padding:0} .card{box-shadow:none;border:1px solid #ccc;break-inside:avoid;page-break-inside:avoid; margin-bottom:10px} h1,h2{break-after:avoid;page-break-after:avoid} a[href]::after{content:"" !important} a{color:#000;text-decoration:none} .sc-print-only{display:block;font-size:.8rem;color:#444;margin-bottom:10px} .sc-feat-unanswered .nm{color:#000} /* Two ruled lines under the questions, to write the answers on. */ .sc-rules span{display:block;border-bottom:1px solid #999;height:26px} } /* ---- Photographed move demos --------------------------------------- Same two-frame idea as the drawn figures and the same effect the gym app uses: hold A, cross-fade to B, hold, fade back. Timing matched to the gym app (900ms hold, ~180ms fade) because that cadence reads as a demonstration rather than a slideshow. Pure CSS, no JS: this app runs under a strict CSP, and both frames are in the markup so with animation disabled you still see the start position. NOT mirrored under RTL, unlike the drawings. These are photographs of a real person against a real wall; flipping them puts her parting on the wrong side and reverses the room for no gain. */ .mfig-photo{position:relative;display:block;aspect-ratio:var(--ar,700/768);max-width:100%; border-radius:var(--r-sm);overflow:hidden;background:var(--grad-soft)} /* The resting state IS the first frame. Everything below only adds motion on top of that, so a browser that never runs the animation shows the start pose instead of an empty box — the same trap the reveal animation fell into. */ .mfig-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0} .mfig-photo img:first-child{opacity:1} /* Each frame holds for one second, so the cycle is however many frames there are and every frame's turn starts on a whole second — which is why the delay PHP writes inline is just -1s, -2s and so on regardless of the count. The percentages still have to be per-count, because "one second" is a different share of a two-second loop than of a six-second one. */ @keyframes mvph2{0%,44%{opacity:1}50%,94%{opacity:0}100%{opacity:1}} @keyframes mvph6{0%,13.6%{opacity:1}16.6%,97%{opacity:0}100%{opacity:1}} .mfig-photo[data-frames="2"] img{animation:mvph2 2s ease-in-out infinite} .mfig-photo[data-frames="6"] img{animation:mvph6 6s ease-in-out infinite} @media(prefers-reduced-motion:reduce){ .mfig-photo img{animation:none!important} } /* The catalogue card sizes the figure box; a photo should fill it. */ .mv-fig .mfig-photo{width:100%!important} .mv-fig:has(.mfig-photo){padding:0;min-height:0} .mv-head-fig:has(.mfig-photo){padding:0;background:none;border-radius:var(--r);overflow:hidden} .ch-move-fig:has(.mfig-photo){padding:0;overflow:hidden;border-radius:9px}