/* AlmarFit Clients: client area, journal, calendar, progress, calculator. */
/* Client area layout */
.af-account { display: grid; gap: 1.5rem; }
.af-account__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
.af-account__hello { margin: 0; font-size: var(--wp--preset--font-size--xx-large, 2.2rem); }
.af-tabs { display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.af-tabs a { text-decoration: none; font-weight: 600; }
.af-account__cols, .af-admin__cols { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 980px) { .af-account__cols, .af-admin__cols { grid-template-columns: 1fr; } }
.af-account section { scroll-margin-top: 120px; }

/* Calendar */
.af-cal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; }
.af-cal__nav { text-decoration: none; font-size: 1.6rem; line-height: 1; padding: 0 .5rem; }
.af-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.af-cal__dow { text-align: center; font-size: .75rem; color: var(--af-muted); padding-bottom: .25rem; }
.af-cal__cell {
	position: relative; aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--af-line);
	display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: inherit; font-size: .85rem; line-height: 1.1;
}
.af-cal__cell--empty { border: 0; }
.af-cal__cell--future { opacity: .35; }
.af-cal__cell.is-today { border-color: var(--af-gold); border-width: 2px; }
.af-cal__cell.is-selected { outline: 2px solid var(--af-gold-light); outline-offset: 1px; }
.af-cal__w { font-size: .68rem; opacity: .85; }
.af-cal__c { position: absolute; top: 2px; right: 5px; font-size: .6rem; color: var(--af-wine); }
.af-cal__cell.af-adh--yes { background: rgba(210, 176, 76, .55); }
.af-cal__cell.af-adh--partly { background: rgba(246, 220, 220, .6); color: #3a2a2e; }
.af-cal__cell.af-adh--no { background: rgba(140, 135, 130, .35); }
.af-cal__cell.af-adh--none { background: rgba(128, 120, 110, .12); }
.af-cal__legend { font-size: .8rem; margin-top: .75rem; display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; }
.af-dot { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; vertical-align: middle; margin-right: .25rem; }
.af-dot.af-adh--yes { background: rgba(210, 176, 76, .85); }
.af-dot.af-adh--partly { background: #F6DCDC; }
.af-dot.af-adh--no { background: rgba(140, 135, 130, .6); }

/* Progress */
.af-chart { width: 100%; height: auto; max-height: 300px; }
.af-chart__axis { stroke: var(--af-line); stroke-width: 1; }
.af-chart__line { fill: none; stroke: var(--af-gold); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.af-chart circle { fill: var(--af-gold-light); }
.af-chart__label { font-size: 22px; fill: var(--af-muted); }
.af-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin: 0; }
.af-stats div { border: 1px solid var(--af-line); border-radius: 12px; padding: .75rem; }
.af-stats dt { font-size: .8rem; color: var(--af-muted); }
.af-stats dd { margin: 0; font-size: 1.25rem; font-weight: 700; }

/* Summary and feedback */
.af-summary { display: grid; gap: .5rem; margin: 0 0 1rem; }
.af-summary div { display: grid; grid-template-columns: 9rem 1fr; gap: .75rem; border-bottom: 1px solid var(--af-line); padding-bottom: .4rem; }
.af-summary dt { font-weight: 600; }
.af-summary dd { margin: 0; }
.af-feedback blockquote, .af-comment { margin: .5rem 0; padding: .75rem 1rem; border-left: 3px solid var(--af-gold); background: rgba(210, 176, 76, .08); border-radius: 0 10px 10px 0; }
.af-feedback__item { border-bottom: 1px solid var(--af-line); padding-bottom: .5rem; }
.af-feedback__item a { text-decoration: none; }
.af-comment { position: relative; }
.af-comment__del { position: absolute; top: .5rem; right: .75rem; font-size: .8rem; color: #b32d2e; }
.af-danger { margin-top: 1rem; }
.af-danger summary { cursor: pointer; color: #E08A8A; font-weight: 600; }
.af-admin .af-cal__cell.af-adh--partly { color: inherit; }

/* ---------- v2: quick journal ---------- */
.af-field--date { max-width: 14rem; }
.af-quick { border-top: 0 !important; padding-top: 0 !important; margin-top: .5rem !important; }
.af-quick legend { font-family: var(--wp--preset--font-family--caslon, Georgia, serif); font-size: 1.35rem; text-transform: uppercase; letter-spacing: .02em; margin-bottom: .75rem; }
.af-choices--big { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.af-chip--big span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 64px; border-radius: 14px; padding: .5rem; font-weight: 600; line-height: 1.2; }
.af-adh-chip--yes input:checked + span { background: var(--af-gold); border-color: var(--af-gold); color: #1D1C1E; }
.af-adh-chip--partly input:checked + span { background: #F6DCDC; border-color: #F6DCDC; color: #3A2A2E; }
.af-adh-chip--no input:checked + span { background: #8C8782; border-color: #8C8782; color: #fff; }
.af-stepper { display: flex; align-items: center; gap: .4rem; }
.af-stepper input { text-align: center; max-width: 5.5rem; font-size: 1.15rem !important; font-weight: 700; }
.af-stepper__btn { width: 48px; height: 48px; flex: none; border-radius: 50%; border: 1.5px solid var(--af-gold); background: transparent; color: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.af-stepper__btn:active { background: rgba(210, 176, 76, .2); }
.af-stepper__unit { color: var(--af-muted); }
.af-more { margin-top: 1rem; border-top: 1px solid var(--af-line); padding-top: .75rem; }
.af-more > summary { cursor: pointer; font-weight: 600; color: var(--af-gold-light); padding: .5rem 0; }
.af-admin .af-more > summary { color: inherit; }
.af-save { margin-top: 1.25rem !important; }
.af-box .af-btn--block { width: 100%; text-align: center; padding: 1rem !important; font-size: 1.05rem; }
.af-streak { display: inline-block; margin: 0; padding: .35rem .85rem; border-radius: 999px; background: rgba(210, 176, 76, .16); border: 1px solid rgba(210, 176, 76, .45); font-weight: 700; }

/* App-style navigation and home-screen hint (phones only) */
.af-appnav, .af-install { display: none; }
@media (max-width: 781px) {
	.af-tabs { display: none; }
	.af-account { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
	.af-appnav {
		display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
		background: rgba(29, 28, 30, .98); border-top: 1px solid rgba(210, 176, 76, .3);
		padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom, 0px));
	}
	.af-appnav a { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .35rem 0; min-height: 52px; justify-content: center; text-decoration: none; color: var(--af-muted); font-size: .72rem; font-weight: 600; }
	.af-appnav a:hover, .af-appnav a:focus-visible { color: var(--af-gold-light); }
	.af-install { display: block; border: 1px dashed rgba(210, 176, 76, .45); border-radius: 14px; padding: .75rem 1rem; }
	.af-install summary { cursor: pointer; font-weight: 600; color: var(--af-gold-light); }
	.af-install p { margin: .5rem 0 0; font-size: .9rem; }
	.af-account__hello { font-size: 1.9rem; }
	.af-box { padding: 1.1rem; border-radius: 16px; }
	.af-cal__cell { font-size: .8rem; border-radius: 8px; }
}

/* ---------- Calorie and protein calculator ---------- */
.af-calc__saved { padding: .6rem .9rem; border-radius: 10px; background: rgba(210, 176, 76, .12); border: 1px solid rgba(210, 176, 76, .35); font-weight: 600; }
.af-calc__add { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem auto; gap: .75rem; align-items: end; }
.af-calc__add label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .35rem; }
.af-calc__add input { width: 100%; box-sizing: border-box; padding: .75rem .85rem; font: inherit; font-size: 1rem; border: 1px solid var(--af-line); border-radius: 10px; background: var(--af-field-bg); color: var(--af-field-text); }
.af-calc__add .af-btn { min-height: 48px; }
.af-calc__search { position: relative; }
.af-calc__list {
	position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin: .25rem 0 0; padding: .3rem; list-style: none;
	background: #fff; color: #2C2B2D; border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); max-height: 320px; overflow-y: auto;
}
.af-calc__list li { padding: .6rem .7rem; border-radius: 8px; cursor: pointer; display: flex; flex-direction: column; gap: .1rem; }
.af-calc__list li small { color: #6B666F; font-size: .8rem; }
.af-calc__list li:hover, .af-calc__list li.is-active { background: #F3EBD2; }
.af-calc__list .af-calc__none { cursor: default; color: #6B666F; }
.af-calc__preview { min-height: 1.5em; margin: .75rem 0; font-weight: 700; color: var(--af-gold-light); }
.af-admin .af-calc__preview { color: inherit; }
.af-calc__tablewrap { margin-top: .5rem; }
.af-calc__table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.af-calc__table th, .af-calc__table td { text-align: left; padding: .55rem .4rem; border-bottom: 1px solid var(--af-line); }
.af-calc__table td:nth-child(n+2), .af-calc__table th:nth-child(n+2) { text-align: right; white-space: nowrap; }
.af-calc__table tfoot th { font-size: 1.05rem; color: var(--af-gold-light); border-bottom: 0; }
.af-calc__del { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--af-line); background: transparent; color: inherit; font-size: 1.1rem; cursor: pointer; }
.af-calc__save { margin-top: 1rem; }
.af-calc__note { margin-top: 1rem; font-size: .8rem; }
@media (max-width: 781px) {
	.af-calc__add { grid-template-columns: minmax(0, 1fr) 6.5rem; }
	.af-calc__add .af-btn { grid-column: 1 / -1; width: 100%; }
	.af-calc__table { font-size: .88rem; }
	.af-appnav a { font-size: .66rem; }
}

/* ---------- Zones, profile, navigation ---------- */
.af-account__top { position: relative; }
.af-tabs a { padding: .35rem .15rem; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: .35rem; }
.af-tabs a svg { width: 18px; height: 18px; }
.af-tabs a.is-active { border-bottom-color: var(--af-gold); color: var(--af-gold-light); }
.af-profile { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(210, 176, 76, .55); color: inherit; }
.af-profile.is-active, .af-profile:hover { background: rgba(210, 176, 76, .18); color: var(--af-gold-light); }
.af-appnav a.is-active { color: var(--af-gold-light); }
.af-appnav a.is-active svg { stroke-width: 2.3; }
.af-link { color: var(--af-gold-light); font-weight: 600; }
.af-admin .af-link { color: inherit; }

/* ---------- Home ---------- */
.af-celebrate { display: flex; gap: .9rem; align-items: center; padding: 1rem 1.2rem; border-radius: 16px; background: linear-gradient(135deg, rgba(210, 176, 76, .28), rgba(235, 213, 138, .12)); border: 1px solid rgba(210, 176, 76, .6); }
.af-celebrate__icon { font-size: 2rem; }
.af-today__title { font-size: 1.25rem; font-weight: 700; margin: 0 0 .25rem; }
.af-today--done { border-color: rgba(127, 169, 127, .6); }
.af-home-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.af-stat__label { margin: 0; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--af-muted); }
.af-stat__big { margin: .25rem 0; font-size: 2.2rem; font-weight: 700; line-height: 1.1; }
.af-level { font-family: var(--wp--preset--font-family--caslon, Georgia, serif); text-transform: uppercase; letter-spacing: .04em; }
.af-level--bronze { color: #D49A6A; } .af-level--silver { color: #D6D9DE; } .af-level--gold { color: var(--af-gold-light); } .af-level--elite { color: #F6DCDC; }
.af-bar { height: 10px; border-radius: 999px; background: rgba(243, 239, 232, .15); overflow: hidden; margin: .5rem 0; }
.af-bar span { display: block; height: 100%; border-radius: inherit; background-image: linear-gradient(90deg, #C79F36, #EBD58A); }
.af-joker { font-size: .85rem; margin: .5rem 0 0; }
.af-week { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; }
.af-week a { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-decoration: none; color: inherit; }
.af-week__dot { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--af-line); display: grid; place-items: center; font-weight: 700; }
.af-week .is-done .af-week__dot { background: var(--af-gold); border-color: var(--af-gold); color: #1D1C1E; }
.af-week__day { font-size: .75rem; color: var(--af-muted); }
.af-quote { margin: 0 0 .5rem; padding: .75rem 1rem; border-left: 3px solid var(--af-gold); background: rgba(210, 176, 76, .08); border-radius: 0 10px 10px 0; }
.af-badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.af-badge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .2rem; padding: .9rem .6rem; border-radius: 14px; border: 1px dashed var(--af-line); opacity: .6; }
.af-badge.is-earned { opacity: 1; border-style: solid; border-color: rgba(210, 176, 76, .6); background: rgba(210, 176, 76, .1); }
.af-badge__medal { font-size: 1.8rem; }
.af-badge strong { font-size: .9rem; }
.af-badge span:last-child { font-size: .75rem; color: var(--af-muted); }
.af-rules { margin: .5rem 0 0; padding-left: 1.2rem; font-size: .9rem; }
.af-rules li { margin-bottom: .3rem; }
@media (max-width: 781px) {
	.af-profile { position: absolute; top: 0; right: 0; }
	.af-account__top { padding-right: 56px; }
	.af-home-stats { gap: .6rem; }
	.af-stat__big { font-size: 1.7rem; }
	.af-week__dot { width: 34px; height: 34px; }
	.af-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
	.af-badge { padding: .7rem .4rem; }
}

/* ---------- Dynamic calculator ---------- */
.af-calc__pick { margin-top: 1rem; padding: 1rem; border-radius: 14px; border: 1px solid rgba(210, 176, 76, .35); background: rgba(210, 176, 76, .06); }
.af-calc__chosen { margin: 0 0 .75rem; font-weight: 700; }
.af-calc__add { grid-template-columns: 7.5rem minmax(0, 1fr) auto; }
.af-calc__add select { width: 100%; box-sizing: border-box; padding: .75rem .6rem; font: inherit; font-size: 1rem; border: 1px solid var(--af-line); border-radius: 10px; background: var(--af-field-bg); color: var(--af-field-text); }
.af-calc__add--custom { grid-template-columns: minmax(0, 1fr) 7rem 7rem auto; }
.af-calc__custom { margin-top: 1.25rem; }
@media (max-width: 781px) {
	.af-calc__add { grid-template-columns: 6.5rem minmax(0, 1fr); }
	.af-calc__add--custom { grid-template-columns: 1fr 1fr; }
	.af-calc__add--custom .af-calc__cname { grid-column: 1 / -1; }
}

/* ---------- Calculator in three steps ---------- */
.af-calc { display: grid; gap: 1rem; }
.af-calc__step[hidden] { display: none; }
.af-calc__title { display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem; font-size: 1.25rem; text-transform: none; letter-spacing: 0; font-family: var(--wp--preset--font-family--figtree, sans-serif); font-weight: 700; }
.af-calc__num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none; background: var(--af-gold); color: #1D1C1E; font-size: 1rem; }
.af-calc__input { width: 100%; box-sizing: border-box; min-height: 52px; padding: .8rem 1rem; font: inherit; font-size: 18px !important; border: 1.5px solid var(--af-line); border-radius: 12px; background: var(--af-field-bg); color: var(--af-field-text); }
.af-calc__input:focus { outline: 3px solid var(--af-gold-light); outline-offset: 1px; }
.af-account .af-calc__input { font-size: 18px !important; }
.af-calc__label { width: 100%; margin: .75rem 0 .4rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--af-muted); }
.af-calc__recent { display: flex; flex-wrap: wrap; gap: .5rem; }
.af-chip-btn { min-height: 44px; padding: .5rem 1rem; border-radius: 999px; border: 1.5px solid var(--af-line); background: transparent; color: inherit; font: inherit; font-size: .95rem; cursor: pointer; }
.af-chip-btn.is-on, .af-chip-btn:active { background: var(--af-gold); border-color: var(--af-gold); color: #1D1C1E; }
.af-calc__results { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .5rem; }
.af-calc__item { width: 100%; text-align: left; display: flex; flex-direction: column; gap: .2rem; padding: .85rem 1rem; min-height: 60px; border-radius: 12px; border: 1px solid var(--af-line); background: rgba(243, 239, 232, .04); color: inherit; font: inherit; cursor: pointer; }
.af-calc__item:hover, .af-calc__item:focus-visible { border-color: var(--af-gold); background: rgba(210, 176, 76, .1); }
.af-calc__iname { font-weight: 700; font-size: 1rem; line-height: 1.3; }
.af-calc__imeta { font-size: .82rem; color: var(--af-muted); }
.af-calc__none { padding: .75rem 0; color: var(--af-muted); }
.af-calc__food { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: .9rem 1rem; border-radius: 12px; background: rgba(210, 176, 76, .1); border: 1px solid rgba(210, 176, 76, .4); margin-bottom: 1rem; }
.af-calc__foodname { margin: 0; font-weight: 700; font-size: 1.1rem; line-height: 1.3; }
.af-calc__food .af-hint { margin: .2rem 0 0; }
.af-calc__change { flex: none; min-height: 44px; padding: .4rem .9rem; border-radius: 999px; border: 1.5px solid currentColor; background: transparent; color: var(--af-gold-light); font: inherit; font-weight: 600; cursor: pointer; }
.af-calc__grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: .75rem; }
.af-calc__grid label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .35rem; }
.af-calc__wide { grid-column: 1 / -1; }
.af-calc__qty { font-weight: 700; text-align: center; }
.af-calc__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 1.1rem; }
.af-calc__go { min-height: 56px; font-size: 1.1rem !important; }
.af-calc__result { margin-top: 1rem; padding: 1rem; border-radius: 14px; background: rgba(243, 239, 232, .06); border: 1px solid var(--af-line); }
.af-calc__resline { margin: 0 0 .5rem; font-weight: 600; }
.af-calc__big { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1rem; }
.af-calc__big div { display: flex; flex-direction: column; align-items: center; padding: .6rem; border-radius: 12px; background: rgba(210, 176, 76, .12); }
.af-calc__big strong { font-size: 2rem; line-height: 1.1; color: var(--af-gold-light); }
.af-calc__big span { font-size: .85rem; color: var(--af-muted); }
.af-calc__meal { list-style: none; margin: 0 0 1rem; padding: 0; }
.af-calc__meal li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--af-line); }
.af-calc__meal li > div { display: flex; flex-direction: column; gap: .15rem; }
.af-calc__del { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid var(--af-line); background: transparent; color: inherit; font-size: 1.2rem; cursor: pointer; }
.af-calc__total > span { display: block; font-weight: 700; margin-bottom: .5rem; }
.af-calc__save { margin-top: .75rem; }
.af-calc__clear { display: block; margin: .9rem auto 0; background: none; border: 0; color: var(--af-muted); text-decoration: underline; font: inherit; font-size: .9rem; cursor: pointer; min-height: 44px; }
.af-calc__custom { margin-top: 1rem; }
.af-calc__custom .af-calc__grid { grid-template-columns: 1fr 1fr; }
.af-account .af-calc__step, .af-calc__step { scroll-margin-top: 100px; }
.af-home-cal { scroll-margin-top: 100px; }

/* =========================================================
   Client area as an app: clean summary cards, large title, system font on Apple devices.
   ========================================================= */
body.af-app .wp-site-blocks > main { background: #141315; }
body.af-app .wp-site-blocks > main .has-ink-background-color { background: transparent !important; }
.af-account { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--wp--preset--font-family--figtree, "Segoe UI"), Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
.af-account__top { align-items: flex-end; }
.af-account__heading { display: flex; flex-direction: column; gap: .15rem; }
.af-account__date { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--af-muted); }
.af-account .af-account__hello { font-family: inherit !important; text-transform: none !important; font-weight: 800; font-size: clamp(30px, 8vw, 38px) !important; letter-spacing: -.02em; line-height: 1.08; }
.af-card {
	display: block; background: #1F1E21; border-radius: 20px; padding: 18px; color: inherit; text-decoration: none;
	transition: transform .15s ease, background-color .15s ease;
}
a.af-card:active, .af-row:active, .af-segments a:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) { a.af-card:active, .af-row:active { transform: none; } }
.af-home { display: grid; gap: 12px; }
.af-section-label { margin: 14px 0 -2px 6px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--af-muted); }

/* New badge banner */
.af-home .af-celebrate { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, #3A2F12, #2A2416); border: 0; }
.af-home .af-celebrate > span:nth-child(2) { flex: 1; }

/* Summary with rings */
.af-summary-card__top { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 18px; align-items: center; }
.af-rings { width: 140px; height: 140px; }
.af-ring__track, .af-ring__fill { fill: none; stroke-width: 12; }
.af-ring__track { opacity: .18; }
.af-ring__fill { stroke-linecap: round; animation: af-ring-in 1.1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes af-ring-in { from { stroke-dashoffset: var(--af-len); } }
@media (prefers-reduced-motion: reduce) { .af-ring__fill { animation: none; } }
.af-ring--today { stroke: #EBD58A; } .af-ring--week { stroke: #F4B8C1; } .af-ring--level { stroke: #9DD3A8; }
.af-ringlegend { margin: 0; display: grid; gap: 10px; }
.af-ringlegend div { display: flex; flex-direction: column; }
.af-ringlegend dt { font-size: 13px; font-weight: 700; }
.af-ringlegend dd { margin: 0; font-size: 17px; font-weight: 700; color: #F3EFE8; font-variant-numeric: tabular-nums; }
.af-ringlegend--today dt { color: #EBD58A; } .af-ringlegend--week dt { color: #F4B8C1; } .af-ringlegend--level dt { color: #9DD3A8; }
.af-checklist { list-style: none; margin: 16px 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.af-checklist li { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--af-muted); }
.af-checklist li.is-done { color: #F3EFE8; }
.af-checklist__dot { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1.5px solid rgba(243, 239, 232, .3); font-size: 12px; font-weight: 800; }
.af-checklist .is-done .af-checklist__dot { background: #EBD58A; border-color: #EBD58A; color: #141315; }
.af-summary-card__done { margin: 0; text-align: center; font-weight: 700; color: #9DD3A8; }
.af-summary-card .af-btn { min-height: 52px; }

/* Tiles */
.af-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.af-tile { display: flex; flex-direction: column; gap: 4px; }
.af-tile__label { font-size: 13px; font-weight: 600; color: var(--af-muted); }
.af-tile__value { font-size: 28px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.af-tile__value small { font-size: 15px; font-weight: 600; color: var(--af-muted); }
.af-tile__sub { font-size: 13px; color: var(--af-muted); margin: 0; }

/* Calendar card */
.af-home-cal .af-cal__cell { border-color: transparent; }
.af-home-cal .af-cal__cell:not(.af-cal__cell--logged) { background: rgba(243, 239, 232, .05); }
.af-home-cal .af-cal__cell.is-today { border-color: var(--af-gold); }
.af-home-cal .af-cal__cell--empty { background: none; }
.af-home-cal .af-cal__legend { color: var(--af-muted); }

/* Rows with chevrons */
.af-rows { padding: 4px 0; }
.af-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-height: 56px; color: inherit; text-decoration: none; }
.af-row + .af-row { border-top: 1px solid rgba(255, 255, 255, .07); margin-left: 64px; padding-left: 0; }
.af-row__icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: rgba(210, 176, 76, .16); font-size: 18px; }
.af-row__icon--maria { background: #F4B8C1; color: #3A1D25; font-weight: 800; font-size: 16px; border-radius: 50%; }
.af-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.af-row__text strong { font-size: 16px; }
.af-row__text span { font-size: 14px; color: var(--af-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-row__meta { font-size: 14px; color: var(--af-muted); font-variant-numeric: tabular-nums; }
.af-chev { flex: none; color: rgba(243, 239, 232, .35); }

/* Progress | Badges switch */
.af-segments { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, .08); }
.af-segments a { text-align: center; padding: 9px 12px; border-radius: 9px; color: var(--af-muted); text-decoration: none; font-weight: 600; font-size: 15px; transition: background-color .15s ease, color .15s ease; }
.af-segments a.is-active { background: #3A393D; color: #F3EFE8; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }

/* Badges zone */
.af-levelcard .af-level { margin: 2px 0; font-size: 34px; font-weight: 800; font-family: inherit; text-transform: none; letter-spacing: -.01em; }
.af-account .af-badge { background: #1F1E21; border: 0; border-radius: 18px; opacity: .55; }
.af-account .af-badge.is-earned { opacity: 1; background: linear-gradient(160deg, #3A2F12, #1F1E21); }

/* App look for the other zones' boxes too */
body.af-app .af-account .af-box { background: #1F1E21; border: 0; border-radius: 20px; }
body.af-app .af-appnav { background: rgba(20, 19, 21, .92); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid rgba(255, 255, 255, .08); }

@media (max-width: 781px) {
	.af-summary-card__top { grid-template-columns: 124px minmax(0, 1fr); gap: 14px; }
	.af-rings { width: 124px; height: 124px; }
	.af-card { padding: 16px; }
}

/* ---------- "?" bubbles ---------- */
.af-card { position: relative; }
.af-help {
	position: absolute; top: 12px; right: 12px; z-index: 3; width: 22px; height: 22px; padding: 0; border-radius: 50%;
	border: 1px solid rgba(243, 239, 232, .28); background: rgba(243, 239, 232, .06); color: var(--af-muted);
	font: 700 12px/1 -apple-system, BlinkMacSystemFont, sans-serif; cursor: pointer;
}
.af-help::after { content: ""; position: absolute; inset: -11px; } /* 44px touch area */
.af-help[aria-expanded="true"] { background: #EBD58A; border-color: #EBD58A; color: #141315; }
.af-help__pop {
	position: absolute; top: 40px; right: 10px; z-index: 20; width: min(260px, calc(100% - 20px)); box-sizing: border-box;
	padding: 10px 12px; border-radius: 12px; background: #F3EFE8; color: #2C2B2D; font-size: 13px; line-height: 1.45;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.af-help__pop[hidden] { display: none; }
.af-rows { position: relative; }
.af-rows > .af-help { top: 50%; transform: translateY(-50%); right: 44px; }
.af-rows:not(.af-rows--single) > .af-help { top: 12px; transform: none; right: 12px; }
.af-rows:not(.af-rows--single) > .af-help ~ .af-row .af-chev { margin-right: 22px; }
.af-summary-card__top, .af-tile__label { padding-right: 26px; }

/* ---------- Reference weight range ---------- */
.af-range .af-tile__sub { margin-top: 2px; }
.af-range__bar { position: relative; height: 8px; margin: 12px 0 8px; border-radius: 999px; background: rgba(243, 239, 232, .12); }
.af-range__zone { position: absolute; left: 20%; right: 20%; top: 0; bottom: 0; border-radius: 999px; background: #9DD3A8; opacity: .8; }
.af-range__dot { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #F3EFE8; border: 3px solid #141315; box-shadow: 0 0 0 1.5px #F3EFE8; }
.af-range__bar--above .af-range__dot, .af-range__bar--below .af-range__dot { background: #F2C46D; box-shadow: 0 0 0 1.5px #F2C46D; }
.af-range__status { margin: 0; font-size: 13px; font-weight: 600; color: var(--af-muted); }
.af-range__status--in { color: #9DD3A8; }
.af-range__status--above { color: #F2C46D; }
.af-range__status--below { color: #C9C3F5; }
.af-range__cta { display: inline-flex; align-items: center; min-height: 40px; margin-top: 8px; padding: 0 14px; border-radius: 999px; background: #EBD58A; color: #141315; font-weight: 700; font-size: 14px; text-decoration: none; }
.af-tile__link { margin-top: auto; padding-top: 8px; font-size: 13px; font-weight: 600; color: var(--af-gold-light); text-decoration: none; }
.af-tiles { align-items: stretch; }

/* ---------- "Did you know?" ---------- */
.af-fact { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 14px 40px 12px 14px; touch-action: pan-y; user-select: none; will-change: transform; }
.af-fact__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 22px; }
.af-fact__eyebrow { margin: 0 0 3px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.af-fact__text { margin: 0; font-size: 15px; line-height: 1.45; color: #F3EFE8; }
.af-fact__like { display: block; margin: 6px 0 0 auto; width: 36px; height: 36px; padding: 0; border: 0; background: none; font-size: 18px; cursor: pointer; }
.af-fact__close { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: rgba(243, 239, 232, .5); font-size: 20px; line-height: 1; cursor: pointer; }
.af-fact__close::after { content: ""; position: absolute; inset: -6px; }
.af-fact--nutrition { background: #1F2A1C; } .af-fact--nutrition .af-fact__icon { background: #2E4A26; } .af-fact--nutrition .af-fact__eyebrow { color: #C0DD97; }
.af-fact--hydration { background: #172433; } .af-fact--hydration .af-fact__icon { background: #1E3A5C; } .af-fact--hydration .af-fact__eyebrow { color: #B5D4F4; }
.af-fact--sleep { background: #22203A; } .af-fact--sleep .af-fact__icon { background: #35306A; } .af-fact--sleep .af-fact__eyebrow { color: #CECBF6; }
.af-fact--movement { background: #33201A; } .af-fact--movement .af-fact__icon { background: #5A2E1F; } .af-fact--movement .af-fact__eyebrow { color: #F5C4B3; }
.af-fact--habits { background: #2E2515; } .af-fact--habits .af-fact__icon { background: #4F3A12; } .af-fact--habits .af-fact__eyebrow { color: #FAC775; }
@media (prefers-reduced-motion: no-preference) { .af-fact { animation: af-fade-in .4s ease both; } }
@keyframes af-fade-in { from { opacity: 0; transform: translateY(6px); } }

/* ---------- Profile fields ---------- */
.af-profile-fields { border: 0; padding: 0; margin: 0 0 1rem; }
.af-profile-fields legend { font-weight: 700; font-size: 1.05rem; margin-bottom: .25rem; }

/* Two tiles side by side must never widen the page. */
.af-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.af-tile { min-width: 0; overflow-wrap: anywhere; }
.af-range__cta { white-space: normal; text-align: center; line-height: 1.2; padding: 8px 12px; }
.af-rows--single > .af-help { right: 42px; }
.af-rows--single .af-chev { margin-left: 30px; }
.af-home { grid-template-columns: minmax(0, 1fr); }
.af-home > * { min-width: 0; }
.af-rows--single > .af-help { top: 12px; right: 12px; transform: none; }
.af-rows--single .af-chev { margin-left: 0; margin-right: 4px; }

/* =========================================================
   Journal, app style: week strip, grouped lists, sticky save
   ========================================================= */
.af-journal { gap: 12px; }

/* Week strip */
.af-week { padding: 12px 10px 10px; }
.af-week__head { display: flex; align-items: center; gap: 6px; padding: 0 4px 8px; }
.af-week__month { flex: 1; font-size: 17px; font-weight: 700; text-align: center; }
.af-week__nav { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #EBD58A; text-decoration: none; }
.af-week__nav.is-off { color: rgba(243, 239, 232, .2); }
.af-week__nav:active { background: rgba(255, 255, 255, .08); }
.af-week__today { padding: 6px 12px; border-radius: 999px; background: rgba(235, 213, 138, .16); color: #EBD58A; font-size: 14px; font-weight: 700; text-decoration: none; }
.af-week__days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.af-week__day { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0 8px; border-radius: 14px; color: inherit; text-decoration: none; }
.af-week__dow { font-size: 12px; font-weight: 600; color: var(--af-muted); }
.af-week__num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.af-week__day.is-today .af-week__num { color: #EBD58A; }
.af-week__day.is-selected .af-week__num { background: #EBD58A; color: #141315; font-weight: 800; }
.af-week__day.is-future { opacity: .3; }
.af-week__dot { width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.af-week__dot.af-adh--yes { background: #EBD58A; }
.af-week__dot.af-adh--partly { background: #F4B8C1; }
.af-week__dot.af-adh--no { background: #8C8782; }
.af-week__dot.af-adh--logged { background: transparent; box-shadow: inset 0 0 0 1.5px #EBD58A; }
a.af-week__day:active { background: rgba(255, 255, 255, .06); }

/* Day title */
.af-journal__day { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 6px 4px -2px; }
.af-account .af-journal__title { margin: 0; font-family: inherit; text-transform: none; letter-spacing: -.01em; font-size: 24px; font-weight: 800; }
.af-journal__saved { font-size: 14px; font-weight: 700; color: #9DD3A8; white-space: nowrap; }

/* Maria's note about the day */
.af-maria-note { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
.af-maria-note__who { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: #F4B8C1; }
.af-maria-note p { margin: 0; }

/* Card title */
.af-account .af-card__title { margin: 0 0 12px; font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 17px; font-weight: 700; }

/* How did the day go? Three big choices */
.af-adh { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.af-adh__opt { position: relative; margin: 0 !important; }
.af-adh__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.af-adh__opt span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 84px; padding: 8px 4px; border-radius: 16px; background: rgba(243, 239, 232, .06); font-size: 14px; font-weight: 600; line-height: 1.2; text-align: center; transition: background-color .15s ease, transform .15s ease; }
.af-adh__opt b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(243, 239, 232, .1); font-size: 17px; }
.af-adh__opt input:focus-visible + span { outline: 3px solid var(--af-gold-light); outline-offset: 2px; }
.af-adh__opt input:active + span { transform: scale(.97); }
.af-adh__opt--yes input:checked + span { background: rgba(235, 213, 138, .2); box-shadow: inset 0 0 0 2px #EBD58A; }
.af-adh__opt--yes input:checked + span b { background: #EBD58A; color: #141315; }
.af-adh__opt--partly input:checked + span { background: rgba(244, 184, 193, .18); box-shadow: inset 0 0 0 2px #F4B8C1; }
.af-adh__opt--partly input:checked + span b { background: #F4B8C1; color: #3A1D25; }
.af-adh__opt--no input:checked + span { background: rgba(243, 239, 232, .12); box-shadow: inset 0 0 0 2px #B4B2A9; }
.af-adh__opt--no input:checked + span b { background: #B4B2A9; color: #141315; }

/* Grouped list rows */
.af-list { padding: 0 0 0 16px; }
.af-list__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 6px 16px 6px 0; color: inherit; text-decoration: none; }
.af-list__row + .af-list__row { border-top: 1px solid rgba(255, 255, 255, .07); }
.af-list__row > label, .af-list__row > span:first-child { margin: 0 !important; font-size: 16px; font-weight: 500; }
.af-list__val { display: flex; align-items: center; gap: 6px; }
.af-list__val input { width: 88px; padding: 8px 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: #F3EFE8 !important; text-align: right; font-size: 17px !important; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: none !important; }
.af-list__val input::placeholder { color: rgba(243, 239, 232, .3); font-weight: 400; }
.af-list__val input:focus { outline: none; color: #EBD58A !important; }
.af-list__val--text input { width: 180px; font-weight: 500; }
.af-list__unit { min-width: 26px; font-size: 15px; color: var(--af-muted); }
.af-list__row--stack { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 12px; padding-bottom: 14px; }
.af-list__row--stack textarea { width: 100%; box-sizing: border-box; border: 0 !important; border-radius: 12px !important; background: rgba(243, 239, 232, .06) !important; color: #F3EFE8 !important; padding: 10px 12px !important; }
.af-list__link { color: #EBD58A; font-weight: 600; }
.af-list__link .af-chev { color: #EBD58A; opacity: .7; }
.af-list input:invalid:not(:placeholder-shown) { color: #F09595 !important; }

/* Water stepper inside the list */
.af-list .af-stepper { gap: 6px; }
.af-list .af-stepper input { width: 56px; padding: 8px 0 !important; border: 0 !important; background: transparent !important; color: #F3EFE8 !important; text-align: center; font-size: 17px !important; font-weight: 700; }
.af-list .af-stepper__btn { width: 40px; height: 40px; border: 0; background: rgba(235, 213, 138, .16); color: #EBD58A; font-size: 22px; }

/* Segmented control */
.af-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, .08); }
.af-seg__opt { position: relative; margin: 0 !important; }
.af-seg__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.af-seg__opt span { display: grid; place-items: center; min-height: 36px; padding: 0 4px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--af-muted); text-align: center; line-height: 1.1; }
.af-seg__opt input:checked + span { background: #3A393D; color: #F3EFE8; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.af-seg__opt input:focus-visible + span { outline: 2px solid var(--af-gold-light); }

/* More details */
.af-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer; }
.af-disclosure > summary::-webkit-details-marker { display: none; }
.af-disclosure > summary > span { display: flex; flex-direction: column; gap: 2px; }
.af-disclosure > summary strong { font-size: 16px; }
.af-disclosure > summary small { font-size: 13px; color: var(--af-muted); }
.af-disclosure > summary .af-chev { transition: transform .2s ease; }
.af-disclosure[open] > summary .af-chev { transform: rotate(90deg); }
.af-disclosure__body { display: grid; gap: 12px; margin-top: 2px; }

/* Save button that stays within reach */
.af-savebar { position: sticky; bottom: 16px; z-index: 40; margin-top: 16px; }
.af-savebar .af-btn { min-height: 54px; font-size: 17px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
@media (max-width: 781px) {
	.af-savebar { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
}
.af-entry--app { display: grid; gap: 12px; margin: 0; }
.af-savebar .af-btn { display: flex; align-items: center; justify-content: center; width: 100%; font-family: inherit !important; font-weight: 700; text-transform: none; letter-spacing: 0; }
.af-list__row > label { display: flex !important; align-items: baseline; gap: 4px; }
.af-list__row--stack > label { display: block !important; }
.af-list__row--text { flex-direction: column; align-items: stretch; gap: 6px; padding-top: 12px; padding-bottom: 12px; }
.af-list__row--text input { width: 100% !important; box-sizing: border-box; padding: 10px 12px !important; border: 0 !important; border-radius: 12px !important; background: rgba(243, 239, 232, .06) !important; color: #F3EFE8 !important; font-size: 16px !important; }
.af-journal { width: 100%; max-width: 720px; margin-inline: auto; }

/* ---------- Progress | Photos | Badges ---------- */
.af-segments { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Photo reminder on Home ---------- */
.af-nudge { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; background: linear-gradient(135deg, #2A2233, #1F1E21); }
.af-nudge__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(244, 184, 193, .18); font-size: 22px; }
.af-nudge__title { margin: 0 0 2px; font-size: 16px; font-weight: 700; }
.af-nudge__text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--af-muted); }
.af-nudge__actions { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.af-nudge__go { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: #EBD58A; color: #141315; font-weight: 700; font-size: 15px; text-decoration: none; }
.af-nudge__later { color: var(--af-muted); font-size: 14px; font-weight: 600; text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; }

/* ---------- Add a photo ---------- */
.af-photo-form { display: grid; gap: 12px; margin: 0; }
.af-photo-pick { position: relative; display: grid; gap: 10px; margin: 0 !important; cursor: pointer; }
.af-photo-pick input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 16px !important; }
.af-photo-pick__btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 120px; border-radius: 16px; border: 2px dashed rgba(235, 213, 138, .45); background: rgba(235, 213, 138, .06); color: #EBD58A; font-size: 16px; font-weight: 700; text-align: center; padding: 12px; }
.af-photo-pick:focus-within .af-photo-pick__btn { outline: 3px solid var(--af-gold-light); outline-offset: 2px; }
.af-photo-pick__preview { width: 100%; max-height: 360px; object-fit: contain; border-radius: 14px; background: #0E0D0F; }
.af-list--inner { background: rgba(243, 239, 232, .05); }
.af-list--inner input[type=date] { border: 0 !important; background: transparent !important; color: #F3EFE8 !important; font-size: 16px !important; text-align: right; padding: 6px 0 !important; }
.af-photo-form__privacy { margin: 0; text-align: center; }
.af-photo-form__status:empty { display: none; }

/* ---------- Before and now ---------- */
.af-compare__stage { --pos: 50%; position: relative; overflow: hidden; border-radius: 14px; background: #0E0D0F; aspect-ratio: 3 / 4; touch-action: pan-y; }
.af-compare__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.af-compare__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.af-compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #F3EFE8; box-shadow: 0 0 8px rgba(0, 0, 0, .5); pointer-events: none; }
.af-compare__handle::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #F3EFE8; color: #141315; font-weight: 800; font-size: 14px; }
.af-compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.af-compare__pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.af-compare__pick label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--af-muted); margin: 0 !important; }
.af-compare__pick select { width: 100%; min-height: 44px; border-radius: 10px; border: 0; padding: 0 10px; background: rgba(243, 239, 232, .08); color: #F3EFE8; font: inherit; font-size: 16px !important; }

/* ---------- Timeline ---------- */
.af-timeline { list-style: none; margin: 0; padding: 0 0 0 18px; display: grid; gap: 12px; position: relative; }
.af-timeline::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 2px; background: rgba(235, 213, 138, .25); }
.af-timeline__item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; }
.af-timeline__item::before { content: ""; position: absolute; left: -18px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #EBD58A; border: 3px solid #141315; }
.af-timeline__thumb img { display: block; width: 96px; height: 128px; object-fit: cover; border-radius: 12px; background: #0E0D0F; }
.af-timeline__date { margin: 0; font-size: 16px; font-weight: 700; }
.af-timeline__tag { display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 999px; background: rgba(235, 213, 138, .16); color: #EBD58A; font-size: 12px; font-weight: 700; }
.af-timeline__del { margin: 8px 0 0; }
.af-timeline__del button { padding: 0; min-height: 36px; border: 0; background: none; color: #F09595; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }

/* ---------- Full-size view ---------- */
.af-lightbox { padding: 0; border: 0; background: transparent; max-width: 96vw; max-height: 92vh; }
.af-lightbox::backdrop { background: rgba(0, 0, 0, .88); }
.af-lightbox img { display: block; max-width: 96vw; max-height: 92vh; border-radius: 12px; }
.af-lightbox__close { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(243, 239, 232, .15); color: #F3EFE8; font-size: 26px; cursor: pointer; }
.af-photo-pick:has(.af-photo-pick__preview:not([hidden])) .af-photo-pick__btn { min-height: 48px; border-style: solid; }
body.af-app .af-account .af-btn, body.af-app .af-account .wp-element-button { font-family: inherit !important; font-weight: 700; text-transform: none; letter-spacing: 0; }

/* ---------- WhatsApp to Maria ---------- */
.af-row__icon--wa { background: rgba(79, 191, 114, .18); color: #7FD89A; }
.af-wa-card { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; border: 1px solid rgba(79, 191, 114, .35); }
.af-wa-card .af-row__text span { white-space: normal; }

/* =========================================================
   Coach app (Maria) and conversations
   ========================================================= */
.af-avatar { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: #F4B8C1; color: #3A1D25; font-weight: 800; font-size: 16px; }
.af-row .af-avatar { width: 36px; height: 36px; font-size: 15px; }
.af-row--actions { gap: 8px; }
.af-inline-form { margin: 0; display: inline-flex; }
.af-pill { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 0; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; }
.af-pill--ok { background: #EBD58A; color: #141315; }
.af-pill--no { background: rgba(243, 239, 232, .1); color: #F3EFE8; min-width: 36px; padding: 0; }
.af-badge-count { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #E24B4A; color: #fff; font-size: 12px; font-weight: 800; }
.af-appnav a, .af-tabs a { position: relative; }
.af-nav-badge { position: absolute; top: 2px; left: calc(50% + 6px); display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #E24B4A; color: #fff; font-size: 11px; font-weight: 800; font-style: normal; line-height: 1; }
.af-tabs .af-nav-badge { top: -6px; left: auto; right: -10px; }
.af-coach-done { text-align: center; padding: 32px 18px; }
.af-coach-done__icon { font-size: 44px; margin: 0; }
.af-coach-done__title { margin: 8px 0 4px; font-size: 20px; font-weight: 800; }
.af-search input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 14px; border-radius: 12px; border: 0; background: rgba(243, 239, 232, .08); color: #F3EFE8; font: inherit; font-size: 16px; }
.af-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.af-filter .af-chip-btn span { opacity: .7; margin-left: 2px; }
.af-back { justify-self: start; color: #EBD58A; font-weight: 600; text-decoration: none; min-height: 36px; display: inline-flex; align-items: center; }
.af-client-head { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.af-client-head .af-avatar { width: 48px; height: 48px; font-size: 20px; }
.af-client-head__name { margin: 0; font-size: 18px; font-weight: 800; }
.af-client-head .af-tile__sub { margin: 2px 0 0; }
.af-client-head--link { grid-template-columns: 48px minmax(0, 1fr); }
.af-day__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.af-day__adh { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(243, 239, 232, .1); }
.af-day__adh.af-adh--yes { background: rgba(235, 213, 138, .2); color: #EBD58A; }
.af-day__adh.af-adh--partly { background: rgba(244, 184, 193, .2); color: #F4B8C1; }
.af-day__comment { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(235, 213, 138, .1); }
.af-day__comment span { font-size: 12px; font-weight: 700; color: #EBD58A; }
.af-day__comment p { margin: 2px 0 0; }
.af-day__reply { margin-top: 10px; }
.af-day__reply > summary { cursor: pointer; color: #EBD58A; font-weight: 600; font-size: 14px; min-height: 36px; display: flex; align-items: center; }
.af-photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.af-photo-grid a { display: grid; gap: 4px; text-decoration: none; color: var(--af-muted); font-size: 12px; }
.af-photo-grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; background: #0E0D0F; }

/* Conversation */
.af-chat { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 60vh; overflow-y: auto; }
.af-chat__day { justify-self: center; margin: 8px 0 2px; font-size: 12px; font-weight: 600; color: var(--af-muted); }
.af-chat__msg { display: grid; justify-items: start; gap: 2px; }
.af-chat__msg.is-mine { justify-items: end; }
.af-chat__bubble { max-width: 82%; padding: 9px 13px; border-radius: 18px 18px 18px 6px; background: rgba(243, 239, 232, .1); color: #F3EFE8; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.af-chat__msg.is-mine .af-chat__bubble { border-radius: 18px 18px 6px 18px; background: #EBD58A; color: #141315; }
.af-chat__time { font-size: 11px; color: var(--af-muted); padding: 0 6px; }
.af-chat__empty { margin: 0 0 12px; color: var(--af-muted); text-align: center; }
.af-compose { margin: 12px 0 0; display: grid; gap: 8px; }
.af-compose__row { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; align-items: end; }
.af-compose textarea, .af-broadcast textarea, .af-saved__add textarea { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 22px; background: rgba(243, 239, 232, .08); color: #F3EFE8; font: inherit; font-size: 16px; resize: vertical; }
.af-broadcast textarea, .af-saved__add textarea { border-radius: 14px; }
.af-compose__send { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #EBD58A; color: #141315; cursor: pointer; }
.af-replies { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.af-replies::-webkit-scrollbar { display: none; }
.af-reply-chip { flex: none; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(235, 213, 138, .45); background: transparent; color: #EBD58A; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }

/* Message to many */
.af-broadcast { display: grid; gap: 12px; }
.af-broadcast .af-card__title { margin: 4px 0 0; }
.af-broadcast__list { max-height: 45vh; overflow-y: auto; border-radius: 14px; background: rgba(243, 239, 232, .04); }
.af-row--check { cursor: pointer; margin: 0 !important; }
.af-row--check input { width: 22px; height: 22px; flex: none; accent-color: #EBD58A; }
.af-broadcast__count { margin: 0; }

/* Saved replies */
.af-saved { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 6px; }
.af-saved li { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(243, 239, 232, .06); font-size: 14px; }
.af-saved__del { width: 32px; height: 32px; flex: none; border: 0; border-radius: 50%; background: rgba(243, 239, 232, .1); color: #F3EFE8; font-size: 18px; cursor: pointer; }
.af-saved__add { display: grid; gap: 8px; margin: 0; }
.af-coach .af-btn--block { width: 100%; box-sizing: border-box; display: flex; justify-content: center; }

/* Rows: every row aligned the same; only the separator line starts after the icon (iOS inset separator). */
.af-row + .af-row { margin-left: 0 !important; padding-left: 16px !important; border-top: 0 !important; position: relative; }
.af-row + .af-row::before { content: ""; position: absolute; top: 0; left: 64px; right: 0; border-top: 1px solid rgba(255, 255, 255, .07); }
/* Maria's bar has four buttons. */
@media (max-width: 781px) { .af-appnav.af-coachnav { grid-template-columns: repeat(5, 1fr); } }

/* ---------- Notifications box and iOS-style switches ---------- */
.af-notify { display: grid; gap: 10px; }
.af-notify .af-card__title { margin-bottom: 0; }
.af-notify__state { margin: 0; }
.af-notify__state:empty { display: none; }
.af-notify__actions { display: grid; gap: 8px; }
.af-notify__off { justify-self: center; background: none; border: 0; color: var(--af-muted); text-decoration: underline; font: inherit; font-size: 14px; min-height: 40px; cursor: pointer; }
.af-notify__prefs { display: grid; gap: 10px; margin: 0; }
/* 6.87: the "Email" card under it. */
.af-mailbox { display: grid; gap: 10px; }
#af-mail { scroll-margin-top: 80px; }
.af-mailbox .af-form { display: grid; gap: 10px; margin: 0; }
.af-mailbox__row > span { display: grid; gap: 3px; min-width: 0; padding-right: 14px; }
.af-mailbox__row small { font-size: 12.5px; line-height: 1.4; font-weight: 400; color: var(--af-muted); }
.af-switch { cursor: pointer; margin: 0 !important; }
.af-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.af-switch i { position: relative; width: 51px; height: 31px; flex: none; border-radius: 999px; background: rgba(243, 239, 232, .18); transition: background-color .2s ease; }
.af-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .3); transition: transform .2s ease; }
.af-switch input:checked + i { background: #9DD3A8; }
.af-switch input:checked + i::after { transform: translateX(20px); }
.af-switch input:focus-visible + i { outline: 3px solid var(--af-gold-light); outline-offset: 2px; }
.af-list select { border: 0; background: transparent; color: #F3EFE8; font: inherit; font-size: 16px !important; text-align: right; }

/* ---------- Content zone ---------- */
.af-content .af-segments { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.af-cadd > summary { cursor: pointer; color: #EBD58A; font-weight: 700; list-style: none; min-height: 28px; display: flex; align-items: center; }
.af-cadd > summary::-webkit-details-marker, .af-citem > summary::-webkit-details-marker { display: none; }
.af-cadd[open] > summary { margin-bottom: 12px; }
.af-citem > summary { list-style: none; cursor: pointer; }
.af-citem.is-off > summary .af-row__text strong { opacity: .55; }
.af-citem[open] { background: rgba(243, 239, 232, .04); }
.af-citem .af-cform { padding: 0 16px 16px; }
.af-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600 !important; font-size: 15px !important; }
.af-cform { display: grid; gap: 10px; margin: 0; }
.af-cfield { display: grid; gap: 4px; margin: 0 !important; }
.af-cfield > span { font-size: 13px; font-weight: 600; color: var(--af-muted); }
.af-cfield input, .af-cfield textarea, .af-cfield select { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px !important; border: 0 !important; border-radius: 12px !important; background: rgba(243, 239, 232, .08) !important; color: #F3EFE8 !important; font: inherit; font-size: 16px !important; }
.af-cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.af-cform__pub { padding: 6px 0; }
.af-cform__del { display: block; margin: 4px auto 0; background: none; border: 0; color: #F09595; font: inherit; font-size: 14px; font-weight: 600; min-height: 40px; cursor: pointer; }
.af-citem .af-inline-form { display: flex; justify-content: center; padding-bottom: 8px; }
.af-cthumb { display: flex; align-items: center; gap: 10px; }
.af-cthumb img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; }

/* Switch rows stay rows inside forms (the general ".af-form label" makes labels blocks). */
.af-form .af-switch, .af-account .af-switch { display: flex !important; align-items: center; justify-content: space-between; }
.af-switch i { display: inline-block; }
/* Secondary buttons everywhere in the app (not only inside the older boxes). */
.af-account .af-btn--ghost, .af-account button.af-btn--ghost {
	display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; border-radius: 999px;
	border: 1.5px solid rgba(235, 213, 138, .6) !important; background: transparent !important; background-image: none !important;
	color: #EBD58A !important; font: inherit; font-weight: 700; font-size: 16px; text-decoration: none; box-shadow: none !important; cursor: pointer;
}
.af-account .af-btn--ghost:active { background: rgba(235, 213, 138, .12) !important; }
/* Anything marked hidden stays hidden, whatever display a component sets. */
.af-account [hidden] { display: none !important; }

/* ---------- Meals of the day ---------- */
.af-meals { display: grid; gap: 12px; }
.af-meals .af-card__title { margin-bottom: 0; }
.af-meal { padding: 12px; border-radius: 14px; background: rgba(243, 239, 232, .05); }
.af-meal__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.af-meal__head span { font-size: 14px; font-weight: 700; color: #EBD58A; font-variant-numeric: tabular-nums; }
.af-meal__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.af-meal__items li { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.af-meal__items li span:last-child { color: var(--af-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.af-meal__del { margin: 8px 0 0; text-align: right; }
.af-meal__del button { background: none; border: 0; color: #F09595; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; min-height: 32px; }
.af-mealtype { margin-bottom: 12px; }
.af-calc__meals { display: grid; gap: 8px; margin-top: 8px; }
.af-calc__mealbtn .af-calc__iname { font-size: 14px; }

/* ---------- Weekly check-in ---------- */
.af-nudge--checkin { background: linear-gradient(135deg, #1E2A33, #1F1E21); text-decoration: none; color: inherit; }
.af-nudge--checkin .af-nudge__icon { background: rgba(181, 212, 244, .16); }
.af-nudge--checkin .af-nudge__go { display: inline-flex; margin-top: 10px; }
.af-wsum { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.af-wsum__tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: rgba(243, 239, 232, .05); }
.af-wsum__value { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.af-wsum__period { margin: 0 0 8px; }
.af-wsum__plan { margin: 10px 0 0; }
.af-checkin { display: grid; gap: 12px; margin: 0; }
.af-mood { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.af-mood__opt { position: relative; margin: 0 !important; }
.af-mood__opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.af-mood__opt span { display: grid; place-items: center; height: 56px; border-radius: 14px; background: rgba(243, 239, 232, .06); font-size: 28px; transition: transform .15s ease, background-color .15s ease; }
.af-mood__opt input:checked + span { background: rgba(235, 213, 138, .22); box-shadow: inset 0 0 0 2px #EBD58A; transform: scale(1.05); }
.af-mood__opt input:focus-visible + span { outline: 3px solid var(--af-gold-light); }
.af-cans { margin: 12px 0 0; display: grid; gap: 10px; }
.af-cans dt { font-size: 13px; font-weight: 700; color: var(--af-muted); }
.af-cans dd { margin: 2px 0 0; }
.af-cans__mood { font-size: 26px; }
.af-chist > summary { display: flex; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; }
.af-chist > summary::-webkit-details-marker { display: none; }
.af-chist > summary span { font-size: 13px; color: var(--af-muted); }
.af-coach-checkin .af-compose { margin-top: 14px; }

/* ---------- Statistics ---------- */
.af-segments--2 { grid-template-columns: 1fr 1fr !important; }
.af-tiles--stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.af-bars { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; align-items: end; height: 190px; }
.af-bars__col { display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center; height: 100%; gap: 4px; }
.af-bars__val { font-size: 11px; font-weight: 700; color: var(--af-muted); }
.af-bars__bar { align-self: end; width: 100%; max-width: 30px; border-radius: 8px 8px 3px 3px; background: rgba(235, 213, 138, .35); }
.af-bars__col.is-now .af-bars__bar { background: #EBD58A; }
.af-bars__col.is-now .af-bars__val { color: #EBD58A; }
.af-bars__lbl { font-size: 10px; color: var(--af-muted); }
.af-bars__sub { font-size: 10px; font-weight: 700; }
.af-stats__msgs { margin: 4px 6px; }

/* =========================================================
   Journal as a day summary
   ========================================================= */
.af-jday { display: grid; gap: 12px; }
.af-jday__done { font-size: 14px; font-weight: 700; color: var(--af-muted); white-space: nowrap; }
.af-jday__done.is-full { color: #9DD3A8; }
.af-jday__weighthint { margin: -4px 6px 0; }

/* One row per topic */
button.af-jrow { width: 100%; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.af-jrow__icon { color: #F3EFE8; font-size: 17px; }
.af-jrow__val { max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; color: #F3EFE8; font-variant-numeric: tabular-nums; }
.af-jrow__val.is-add, .af-jrow__addlabel { color: #EBD58A !important; font-weight: 600; }
.af-jrow .af-row__text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-jadh .af-card__title { margin-bottom: 10px; }

/* Maria's words about the day, short */
.af-mbanner > summary { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; list-style: none; cursor: pointer; }
.af-mbanner > summary::-webkit-details-marker { display: none; }
.af-mbanner .af-row__icon--maria { width: 30px; height: 30px; font-size: 13px; }
.af-mbanner__txt { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-mbanner__more { color: #EBD58A; font-size: 13px; font-weight: 700; }
.af-mbanner[open] .af-mbanner__txt, .af-mbanner[open] .af-mbanner__more { display: none; }
.af-mbanner p { margin: 10px 0 0; }

/* Saved automatically */
.af-jstatus { margin: 2px 0 0; text-align: center; font-size: 13px; font-weight: 600; color: #9DD3A8; min-height: 20px; }
.af-jstatus[data-state="saving"] { color: var(--af-muted); }
.af-jstatus[data-state="fail"] { color: #F09595; }

/* Month name opens the phone's date picker */
.af-week__month { position: relative; cursor: pointer; margin: 0 !important; }
.af-week__month span { font-size: 11px; color: var(--af-muted); }
.af-week__picker { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px !important; }

/* Bottom sheets (iOS style) */
.af-sheet {
	position: fixed; inset: auto 0 0 0; top: auto; margin: 0 auto; width: 100%; max-width: 560px; max-height: 88vh; box-sizing: border-box;
	padding: 0 0 calc(16px + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: 22px 22px 0 0; background: #232226; color: #F3EFE8;
	overflow-y: auto; overscroll-behavior: contain;
}
.af-sheet::backdrop { background: rgba(0, 0, 0, .55); }
.af-sheet[open] { animation: af-sheet-up .28s cubic-bezier(.2, .8, .2, 1); }
.af-sheet[open]::backdrop { animation: af-fade .28s ease; }
@keyframes af-sheet-up { from { transform: translateY(100%); } }
@keyframes af-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .af-sheet[open], .af-sheet[open]::backdrop { animation: none; } }
@media (min-width: 782px) { .af-sheet { inset: 0; margin: auto; max-height: 80vh; border-radius: 22px; padding-bottom: 16px; } }
.af-sheet__form { margin: 0; }
.af-sheet__grab { width: 36px; height: 5px; margin: 8px auto 4px; border-radius: 3px; background: rgba(243, 239, 232, .3); }
.af-sheet__bar { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 6px 12px 10px; background: #232226; }
.af-sheet__bar h2 { margin: 0; font-family: inherit !important; font-size: 16px !important; font-weight: 700; text-transform: none; letter-spacing: 0; text-align: center; }
.af-sheet__cancel, .af-sheet__done { min-height: 44px; padding: 0 6px; border: 0; background: none; font: inherit; font-size: 16px; cursor: pointer; }
.af-sheet__cancel { justify-self: start; color: var(--af-muted); }
.af-sheet__done { justify-self: end; color: #EBD58A; font-weight: 700; }
.af-sheet__body { display: grid; gap: 12px; padding: 4px 16px 8px; }
.af-sheet__body .af-list--inner { background: rgba(243, 239, 232, .05); }
.af-sheet .af-meal__tot { margin: 8px 0 0; font-weight: 700; color: #EBD58A; }

/* ---------- Safari (iPhone): nothing may make the page wider than the screen ----------
   1. The hidden date picker under the month name: Safari gives date fields their own minimum width. */
.af-week__month { display: inline-block; max-width: 100%; overflow: hidden; }
.af-week__picker { display: block; box-sizing: border-box; min-width: 0 !important; max-width: 100%; width: 100%; -webkit-appearance: none; appearance: none; padding: 0; border: 0; }
/* 2. Maria's banner: the one-line text stays inside its card even where <summary> ignores grid. */
.af-mbanner { overflow: hidden; }
.af-mbanner > summary { width: 100%; box-sizing: border-box; }
.af-mbanner__txt { display: block; min-width: 0; max-width: 100%; }
/* 3. A general guard for the whole client area. */
.af-account { max-width: 100%; overflow-x: clip; }
.af-journal, .af-jday, .af-jday > *, .af-journal .af-card { min-width: 0; max-width: 100%; box-sizing: border-box; }
button.af-jrow { max-width: 100%; box-sizing: border-box; overflow: hidden; }

/* ---------- Journal rows on a fixed grid (Safari does not shrink flex content inside buttons) ----------
   Topic rows: the label is always whole, the value takes what is left and ends with "…".
   Meal rows: the food names shorten, the calories always show. */
button.af-jrow { display: grid !important; grid-template-columns: 36px auto minmax(0, 1fr) 18px; align-items: center; column-gap: 12px; }
button.af-jrow .af-row__text { min-width: 0; }
button.af-jrow .af-row__text strong { white-space: nowrap; }
button.af-jrow .af-jrow__val { max-width: none; min-width: 0; justify-self: stretch; width: 100%; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.af-jrow--meal { grid-template-columns: 36px minmax(0, 1fr) auto 18px; }
button.af-jrow--meal .af-row__text strong, button.af-jrow--meal .af-row__text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.af-jrow--add { grid-template-columns: 36px minmax(0, 1fr) 18px; }
/* Phones: the value goes under the label, so it always shows (6.181, the audit: up to 419px; "Adaugă" was cut to "Ada…" at 375px). */
@media (max-width: 419px) {
	button.af-jrow:not(.af-jrow--meal):not(.af-jrow--add) { grid-template-columns: 32px minmax(0, 1fr) 18px; row-gap: 2px; }
	button.af-jrow:not(.af-jrow--meal):not(.af-jrow--add) .af-row__icon { grid-row: 1 / span 2; }
	button.af-jrow:not(.af-jrow--meal):not(.af-jrow--add) .af-row__text { grid-column: 2; grid-row: 1; }
	button.af-jrow:not(.af-jrow--meal):not(.af-jrow--add) .af-jrow__val { grid-column: 2; grid-row: 2; text-align: left; font-size: 14px; }
	button.af-jrow:not(.af-jrow--meal):not(.af-jrow--add) .af-chev { grid-column: 3; grid-row: 1 / span 2; }
}

/* =========================================================
   App header: no site header or footer inside the app; large title, then a compact bar
   ========================================================= */
body.af-app .wp-site-blocks > header, body.af-app .wp-site-blocks > footer, body.af-app .wp-site-blocks > .wp-block-template-part:first-child { display: none !important; }
body.af-app .af-account { padding-top: calc(env(safe-area-inset-top, 0px) + 6px); }
body.af-app .wp-site-blocks > main, body.af-app main { padding-top: 0 !important; margin-top: 0 !important; }
body.af-app main > .wp-block-group:first-child, body.af-app .entry-content > .wp-block-group:first-child { padding-top: 12px !important; }
.af-avatar-link { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: #D2B04C; color: #141315 !important; font-weight: 800; font-size: 17px; text-decoration: none; }
.af-avatar-link.is-active { box-shadow: 0 0 0 3px rgba(235, 213, 138, .45); }
.af-avatar-link--small { width: 30px; height: 30px; font-size: 13px; }
.af-account__top .af-avatar-link { align-self: flex-end; margin-bottom: 4px; }
.af-appbar {
	position: fixed; top: 0; left: 0; right: 0; z-index: 90; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center;
	padding: calc(env(safe-area-inset-top, 0px) + 6px) 12px 8px; background: rgba(20, 19, 21, .82); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid rgba(255, 255, 255, .08); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .18s ease, transform .18s ease;
}
.af-appbar.is-on { opacity: 1; transform: none; pointer-events: auto; }
.af-appbar__title { text-align: center; font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-appbar__right { justify-self: end; }
@media (prefers-reduced-motion: reduce) { .af-appbar { transition: none; } }
@media (min-width: 782px) { .af-appbar { display: none; } }
/* Language and site links */
.af-applinks .af-list__row { padding: 4px 0; }
.af-applinks .af-lang { display: flex; gap: 6px; margin: 0; }
.af-applinks .af-lang a { padding: 6px 10px; border-radius: 8px; color: #F3EFE8; text-decoration: none; font-weight: 700; font-size: 14px; }
.af-applinks .af-lang a[aria-current], .af-applinks .af-lang .is-current a, .af-applinks .af-lang a.is-current { background: #EBD58A; color: #141315; }
/* Account request: Elite note */
.af-elite-note { margin: 0 0 1rem; padding: 12px 14px; border-radius: 12px; background: rgba(235, 213, 138, .1); border: 1px solid rgba(235, 213, 138, .35); font-size: .95rem; }
/* Notification choices save themselves */
.af-notify__prefs.is-auto .af-notify__save { display: none; }
.af-notify__saved { margin: 0; color: #9DD3A8; font-weight: 700; min-height: 1em; }
.af-notify__saved:empty { display: none; }

/* ---------- Smooth change between tabs (Safari 18.2+, Chrome); the bottom bar stays still ---------- */
@view-transition { navigation: auto; }
.af-appnav { view-transition-name: af-appnav; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
.af-account__top .af-avatar-link { margin-left: auto; }
.af-account__top { padding-right: 0 !important; }

/* =========================================================
   Maria's app, package 2
   ========================================================= */
/* Quick sheet */
.af-quick__body { gap: 12px; }
.af-quick__who { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; color: inherit; text-decoration: none; }
.af-quick__who span { display: flex; flex-direction: column; }
.af-quick__who small { color: #EBD58A; font-size: 13px; font-weight: 600; }
.af-quick__chat .af-chat { max-height: 38vh; }
.af-quick .af-compose { margin-top: 4px; }
/* Toast */
.af-toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 200; transform: translate(-50%, 10px); padding: 10px 18px; border-radius: 999px; background: #F3EFE8; color: #141315; font-weight: 700; font-size: 15px; opacity: 0; transition: opacity .2s ease, transform .2s ease; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.af-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
/* Private notes */
.af-cnote { display: grid; gap: 8px; background: #26221A; }
.af-cnote label { display: flex !important; justify-content: space-between; align-items: baseline; margin: 0 !important; font-weight: 700; font-size: 15px; }
.af-cnote label small { font-weight: 600; font-size: 12px; color: var(--af-muted); }
.af-cnote textarea { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px !important; border: 0 !important; border-radius: 12px !important; background: rgba(243, 239, 232, .06) !important; color: #F3EFE8 !important; font: inherit; font-size: 16px !important; resize: vertical; }
.af-cnote__saved { font-size: 13px; font-weight: 700; color: #9DD3A8; min-height: 1em; }
.af-cnote__saved:empty { display: none; }
/* Client page sections */
.af-segments--client { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 58px); z-index: 20; background: rgba(40, 39, 43, .96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.af-segments--client a { padding: 9px 2px; font-size: 13px; }
.af-seg-badge { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #E24B4A; color: #fff; font-size: 10px; font-weight: 800; margin-left: 2px; }
@media (min-width: 782px) { .af-segments--client { top: 12px; } }
.af-client-head { grid-template-columns: 48px minmax(0, 1fr) auto; }

/* =========================================================
   Packages 3 and 4
   ========================================================= */
/* Progress: the 7-day average is the line, single days are quiet dots */
.af-chart__day { fill: rgba(243, 239, 232, .28); stroke: none; }
.af-chart__trend { stroke-width: 4; }
.af-chart__legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 0; font-size: 13px; color: var(--af-muted); }
.af-chart__key { display: inline-block; width: 18px; height: 4px; border-radius: 2px; background: var(--af-gold, #D2B04C); margin-left: 6px; }
.af-chart__key--day { width: 8px; height: 8px; border-radius: 50%; background: rgba(243, 239, 232, .35); }
.af-progress__summary strong { font-size: 1.05em; }

/* First steps */
.af-ob { width: min(420px, calc(100% - 24px)); max-height: 92vh; box-sizing: border-box; padding: 26px 22px calc(18px + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: 26px; background: #1F1E21; color: #F3EFE8; text-align: center; }
.af-ob::backdrop { background: rgba(0, 0, 0, .72); }
.af-ob[open] { animation: af-sheet-up .3s cubic-bezier(.2, .8, .2, 1); }
.af-ob__icon { font-size: 54px; margin: 4px 0 8px; }
.af-ob h2 { margin: 0 0 8px; font-family: inherit !important; font-size: 24px !important; font-weight: 800; text-transform: none; letter-spacing: -.01em; }
.af-ob__text { margin: 0 0 16px; color: var(--af-muted); line-height: 1.5; }
.af-ob__list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 8px; text-align: left; }
.af-ob__list li { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(243, 239, 232, .06); border: 1px solid rgba(243, 239, 232, .08); }
.af-ob__list li span { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(210, 176, 76, .14); font-size: 17px; }
.af-ob__list li strong { font-size: 15px; }
.af-ob__list li small { color: var(--af-muted); font-size: 13px; line-height: 1.35; }
.af-ob__how { text-align: left; margin: 0 0 12px; padding: 12px 12px 12px 34px; border-radius: 14px; background: rgba(243, 239, 232, .06); display: grid; gap: 8px; }
.af-ob__ico { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(181, 212, 244, .18); color: #B5D4F4; vertical-align: middle; }
.af-ob__dots { display: flex; justify-content: center; gap: 6px; margin: 18px 0 14px; }
.af-ob__dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(243, 239, 232, .25); transition: width .2s ease, background-color .2s ease; }
.af-ob__dots span.is-on { width: 20px; border-radius: 4px; background: #EBD58A; }
.af-ob__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.af-ob__skip { background: none; border: 0; color: var(--af-muted); font: inherit; font-size: 15px; min-height: 44px; padding: 0 6px; cursor: pointer; }
.af-ob__next { min-height: 48px; padding: 0 26px !important; }
.af-ob .af-hint { margin: 6px 0 0; }

/* Celebrations */
.af-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 300; overflow: hidden; }
.af-confetti i { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; animation: af-confetti 1.5s cubic-bezier(.2, .6, .4, 1) forwards; }
@keyframes af-confetti { to { transform: translate(var(--dx), 105vh) rotate(var(--rot)); opacity: .9; } }

/* Maria's Today: swipe rows */
.af-coach .af-row[data-dismiss] { position: relative; overflow: hidden; }
.af-coach .af-row.is-swiping > * { transform: translateX(var(--dx, 0)); }
.af-coach .af-row > * { transition: transform .2s ease; }
.af-coach .af-row.is-swiping > * { transition: none; }
.af-coach .af-row.is-swiping[data-dir="seen"] { background: linear-gradient(270deg, rgba(157, 211, 168, .35), transparent 70%); }
.af-coach .af-row.is-swiping[data-dir="reply"] { background: linear-gradient(90deg, rgba(235, 213, 138, .35), transparent 70%); }
.af-coach .af-row.is-swiping::after { position: absolute; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 800; color: #F3EFE8; opacity: .6; }
.af-coach .af-row.is-swiping[data-dir="seen"]::after { content: "✓ " attr(data-seenl); right: 16px; }
.af-coach .af-row.is-swiping[data-dir="reply"]::after { content: attr(data-replyl) " ↩"; left: 16px; }
.af-coach .af-row.is-armed::after { opacity: 1; }
.af-coach .af-row.is-leaving { opacity: 0; transform: translateX(-30px); transition: opacity .2s ease, transform .2s ease; }
/* The whole page is dark in the app, also below short content. */
body.af-app, body.af-app .wp-site-blocks { background-color: #141315 !important; }
body.af-app .wp-site-blocks { min-height: 100vh; min-height: 100dvh; }
.af-ob__skip:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* Food requests (client) */
.af-fr-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.af-fr-list li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(243, 239, 232, .06); }
.af-fr-list small { color: var(--af-muted); white-space: nowrap; }
.af-citem > summary .af-pill { margin-left: auto; }

/* ---------- "My account" next to the initial ---------- */
.af-account-btn { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; align-self: flex-end; margin-bottom: 4px; padding: 3px 3px 3px 14px; min-height: 44px; box-sizing: border-box; border-radius: 999px; background: rgba(235, 213, 138, .12); color: #EBD58A !important; text-decoration: none; font-weight: 700; font-size: 14px; white-space: nowrap; }
.af-account-btn .af-avatar-link { width: 38px; height: 38px; font-size: 16px; }
.af-account-btn.is-active { box-shadow: 0 0 0 2px rgba(235, 213, 138, .5); }
.af-account-btn:active { transform: scale(.97); }
@media (max-width: 359px) { .af-account-btn__label { display: none; } .af-account-btn { padding: 3px; } }

/* ---------- Progress: day by day ---------- */
.af-segments--range { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.af-chartbox { position: relative; }
.af-chart--days .af-chart__grid { stroke: rgba(243, 239, 232, .1); stroke-width: 1; }
.af-chart--days .af-chart__line { stroke-width: 2.5; }
.af-chart--days .af-chart__pt { fill: #EBD58A; stroke: #1F1E21; stroke-width: 2; cursor: pointer; }
.af-chart--days .af-chart__pt.is-on { fill: #F3EFE8; stroke: #EBD58A; stroke-width: 4; }
.af-chart--days .af-chart__pt:focus { outline: none; }
.af-chart__date { font-size: 13px; }
.af-chart__tip { position: absolute; transform: translateX(-50%); margin: 0; padding: 6px 10px; border-radius: 10px; background: #F3EFE8; color: #141315; font-size: 13px; font-weight: 700; white-space: nowrap; pointer-events: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .4); }
.af-chart__tip[hidden] { display: none; }
.af-daylist { margin-top: 12px; }
.af-daylist > summary { cursor: pointer; font-weight: 700; color: #EBD58A; min-height: 36px; display: flex; align-items: center; }
.af-daylist ul { list-style: none; margin: 6px 0 0; padding: 0; }
.af-daylist li { display: grid; grid-template-columns: minmax(0, 1fr) auto 56px; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .07); font-size: 14px; }
.af-daylist li span { color: var(--af-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-daylist li strong { font-variant-numeric: tabular-nums; }
.af-daylist__d { font-style: normal; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--af-muted); }
.af-daylist__d.is-down { color: #9DD3A8; }
.af-daylist__d.is-up { color: #F2C46D; }

/* ---------- Maria: red dot for new days ---------- */
.af-avatar-wrap { position: relative; display: inline-flex; flex: none; }
.af-dot { position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%; background: #E24B4A; box-shadow: 0 0 0 2px #1F1E21; }
.af-crow.is-new .af-row__text strong { color: #F3EFE8; }
.af-crow:not(.is-new) .af-row__text strong { font-weight: 600; }
/* Chart labels readable on a phone (the chart is drawn at 640 wide and shown at about half). */
.af-chart--days .af-chart__label { font-size: 22px; fill: var(--af-muted, #A8A29B); }
.af-chart--days .af-chart__date { font-size: 21px; }
.af-chart--days .af-chart__line { stroke-width: 4; }
/* Client summary: the details may take two lines so the weight always shows. */
.af-csum .af-row__text span { white-space: normal; overflow: visible; }

/* "My account": 2 px smaller */
.af-account-btn { font-size: 12px; }

/* Add a meal: pick the meal of the day, or an extra meal */
.af-mealpick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.af-mealpick__opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 84px; border-radius: 16px; background: rgba(243, 239, 232, .06); color: #F3EFE8 !important; text-decoration: none; font-weight: 700; font-size: 15px; }
.af-mealpick__opt span { font-size: 28px; }
.af-mealpick__opt.is-suggested { box-shadow: inset 0 0 0 2px #EBD58A; background: rgba(235, 213, 138, .12); }
.af-mealpick__opt:active { transform: scale(.97); }
.af-extra { display: grid; gap: 10px; margin: 0; }
.af-jrow__val.is-muted { color: var(--af-muted) !important; font-weight: 500; font-size: 13px; }
.af-meal--extra { border: 1px dashed rgba(243, 239, 232, .2); }
.af-meal--extra .af-meal__head span { color: var(--af-muted); font-weight: 600; font-size: 12px; }
/* Calculator opened for a meal */
.af-calc__for { margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(235, 213, 138, .12); font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.af-calc__for a { margin-left: auto; color: #EBD58A; font-size: 13px; font-weight: 600; }

/* A meal category sheet: each saved meal of the category, with its own delete */
.af-mentry { padding: 10px 12px; border-radius: 14px; background: rgba(243, 239, 232, .05); }
.af-mentry__head { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--af-muted); }
.af-mentry__head span:last-child { color: #EBD58A; }
.af-mentry .af-meal__del { margin-top: 4px; }

/* =========================================================
   Touch targets: at least 44 × 44 px (Apple's guideline), without changing how things look
   ========================================================= */
/* Small visuals keep their size; an invisible area around them takes the tap. */
.af-avatar-link--small { position: relative; }
/* The "?" keeps its place in the card's top-right corner (it is already positioned); only the tap area grows. */
.af-help::before { content: ""; position: absolute; inset: -11px; border-radius: 50%; }
.af-avatar-link--small::before { content: ""; position: absolute; inset: -7px; }
/* Icon buttons */
.af-fact__like, .af-fact__close { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
.af-cal__nav, .af-week__nav { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
.af-stepper__btn { width: 44px !important; height: 44px !important; }
/* Text links and openers */
.af-tile__link { display: inline-flex; align-items: center; min-height: 44px; }
.af-account summary, .af-daylist > summary, .af-day__reply > summary { min-height: 44px; }
.af-account .af-segments a { min-height: 44px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.af-applinks .af-lang a { min-height: 44px; min-width: 44px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
.af-back, .af-pill { min-height: 44px; box-sizing: border-box; }
.af-back { display: inline-flex; align-items: center; }
.af-reply-chip { min-height: 44px; }
.af-cform__del { min-height: 44px; min-width: 44px; }
.af-feedback a, .af-box h3 a, .af-feedback__day a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Smallest phones (under 360 px, e.g. iPhone SE 1st gen) ---------- */
.af-crow__when { display: none; }
@media (max-width: 359px) {
	/* Rings on top, the three numbers underneath in three columns. */
	.af-summary-card__top { grid-template-columns: 1fr !important; justify-items: center; gap: 12px; }
	.af-rings { width: 132px !important; height: 132px !important; }
	.af-ringlegend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; margin: 0; text-align: center; }
	.af-ringlegend > div { margin: 0; }
	.af-ringlegend dt { font-size: 12px; }
	.af-ringlegend dd { font-size: 14px; margin: 2px 0 0; }
	/* Maria's client summary: the last activity moves into the details line. */
	.af-crow .af-row__meta { display: none; }
	.af-crow__when { display: inline; }
}

/* ---------- Landscape phones and small tablets: title, tabs and the account circle on one row ---------- */
@media (min-width: 782px) and (max-width: 1024px) {
	.af-account__top { flex-wrap: nowrap !important; }
	.af-account-btn__label { display: none; }
	.af-account-btn { padding: 3px; }
	.af-account__top .af-tabs { min-width: 0; flex-wrap: nowrap; gap: 2px; }
	.af-account__top .af-tabs a { padding-left: 8px; padding-right: 8px; white-space: nowrap; }
}
@media (max-width: 359px) { .af-checklist { grid-template-columns: 1fr !important; } }

/* Content: four sections, photos, three-column rows */
.af-content .af-segments { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.af-content .af-segments a { font-size: 13px; padding-left: 2px; padding-right: 2px; }
.af-row__icon--photo { overflow: hidden; padding: 0 !important; }
.af-row__icon--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.af-cgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.af-cphoto { gap: 8px; }
.af-cphoto__pick { cursor: pointer; }
.af-cphoto__name:empty { display: none; }
.af-cphoto__remove { display: inline-flex !important; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; color: var(--af-muted); }
.af-cthumb img { width: 72px; height: 72px; }
.af-citem__link { padding: 0 16px 14px; margin: 0; }
.af-citem__link a { color: #EBD58A; font-weight: 600; }
@media (max-width: 359px) { .af-cgrid--3 { grid-template-columns: 1fr 1fr; } }
.af-cform .af-cgrid--3:has(select) { grid-template-columns: 1.5fr 1fr 1fr; }

/* =========================================================
   Subscription
   ========================================================= */
.af-sub { display: grid; gap: 10px; }
.af-sub--soon { background: #2A2416; }
.af-sub--expired { background: #2E1D1F; }
.af-sub--locked { text-align: center; padding: 26px 18px; }
.af-sub__head { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; }
.af-sub__icon { font-size: 26px; line-height: 1; }
.af-sub__lock { font-size: 40px; margin: 0; }
.af-sub__title { margin: 0; font-size: 17px; font-weight: 800; }
.af-sub__text { margin: 4px 0 0; color: #C9C4BD; font-size: 14px; line-height: 1.45; }
.af-sub__price { margin: 4px 0 0; text-align: center; font-size: 22px; font-weight: 800; }
.af-sub__price span { font-size: 13px; font-weight: 500; color: var(--af-muted); }
.af-sub__wa { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 999px; background: #25D366; color: #053B1F !important; font-weight: 800; text-decoration: none; }
.af-sub__wa--big { min-height: 52px; font-size: 16px; }
.af-nav-lock { font-style: normal; font-size: 9px; margin-left: 1px; }
/* Maria: marks on avatars */
.af-submark { position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 900; font-style: normal; line-height: 1; box-shadow: 0 0 0 2px #1F1E21; }
.af-submark--active { background: #5DCAA5; color: #04342C; }
.af-submark--soon { background: #EF9F27; color: #412402; }
.af-submark--expired { background: #E24B4A; color: #fff; }
.af-subline { display: block; font-size: 12px !important; }
.af-subline--active { color: #5DCAA5 !important; }
.af-subline--soon { color: #EF9F27 !important; }
.af-subline--expired { color: #F09595 !important; }
.af-client-head .af-avatar-wrap .af-avatar { width: 48px; height: 48px; font-size: 20px; }
.af-csub { display: grid; gap: 2px; }
.af-csub__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.af-csub__head .af-submark { position: static; width: 20px; height: 20px; font-size: 12px; box-shadow: none; }
.af-csub--expired { background: #2E1D1F; }
.af-csub--soon { background: #2A2416; }
.af-csub .af-hint { margin: 6px 0 0; }

/* =========================================================
   The AlmarFit group
   ========================================================= */
.af-gjoin { text-align: left; }
.af-gjoin__icon { font-size: 40px; margin: 0; text-align: center; }
.af-gjoin .af-card__title { text-align: center; }
.af-gjoin__rules { list-style: none; margin: 12px 0 16px; padding: 0; display: grid; gap: 10px; }
.af-gjoin__rules li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; font-size: 14px; color: #C9C4BD; }
.af-group { display: grid; gap: 10px; }
.af-group__pin { display: flex; gap: 8px; padding: 10px 12px; border-radius: 14px; background: #2A2416; font-size: 14px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 58px); z-index: 5; }
.af-group__older { justify-self: center; background: none; border: 0; color: #EBD58A; font: inherit; font-weight: 600; min-height: 44px; cursor: pointer; }
.af-group__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.af-group__empty { text-align: center; color: var(--af-muted); }
.af-gm { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: start; }
.af-gm.is-mine { grid-template-columns: minmax(0, 1fr); justify-items: end; }
.af-gm__av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #2C2B2D; font-weight: 800; font-size: 13px; }
.af-gm__body { display: grid; gap: 3px; justify-items: start; min-width: 0; }
.af-gm.is-mine .af-gm__body { justify-items: end; }
.af-gm__name { font-size: 12px; font-weight: 700; color: #C9C4BD; display: flex; gap: 6px; align-items: center; }
.af-gm__tag { font-size: 10px; font-weight: 800; background: #D2B04C; color: #141315; border-radius: 6px; padding: 1px 6px; }
.af-gm__bubble { max-width: 82vw; text-align: left; padding: 9px 13px; border: 0; border-radius: 4px 18px 18px 18px; background: rgba(243, 239, 232, .09); color: #F3EFE8; font: inherit; font-size: 15px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; cursor: pointer; }
@media (min-width: 560px) { .af-gm__bubble { max-width: 440px; } }
.af-gm.is-mine .af-gm__bubble { border-radius: 18px 4px 18px 18px; background: #EBD58A; color: #141315; }
.af-gm.is-coach .af-gm__bubble { box-shadow: inset 0 0 0 1px rgba(210, 176, 76, .55); }
.af-gm__meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.af-gm__react { min-height: 28px; padding: 0 8px; border-radius: 999px; border: 0; background: rgba(243, 239, 232, .08); color: #F3EFE8; font: inherit; font-size: 12px; cursor: pointer; }
.af-gm__react.is-mine { box-shadow: inset 0 0 0 1.5px #EBD58A; }
.af-gm__time { font-size: 11px; color: var(--af-muted); padding: 0 4px; }
.af-group__compose { position: sticky; bottom: calc(env(safe-area-inset-bottom, 0px) + 86px); background: #141315; padding: 8px 0; margin: 0; z-index: 4; }
@media (min-width: 782px) { .af-group__compose { bottom: 0; } }
.af-group__leave { text-align: center; margin: 6px 0 0; }
.af-group__leave button { background: none; border: 0; color: var(--af-muted); text-decoration: underline; font: inherit; font-size: 13px; min-height: 44px; cursor: pointer; }
.af-gact__emojis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.af-gact__emojis button { min-height: 56px; border: 0; border-radius: 16px; background: rgba(243, 239, 232, .08); font-size: 26px; cursor: pointer; }
.af-gact__list button.af-row { width: 100%; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.af-gact__del strong { color: #F09595; }
.af-gmembers > summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.af-row--report { border-top: 0 !important; }
.af-report__act { justify-content: flex-end; }
.af-pill--text { min-width: 0 !important; padding: 0 12px !important; }

/* =========================================================
   Profile details, reference photos, the profile card
   ========================================================= */
.af-choices--stack { display: grid !important; grid-template-columns: 1fr; gap: 8px; }
.af-choices--stack .af-chip { justify-content: flex-start; }
.af-activity { display: grid; gap: 8px; margin: 6px 0 12px; }
.af-activity__opt { position: relative; display: block; margin: 0 !important; cursor: pointer; }
.af-activity__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.af-activity__opt span { display: grid; gap: 3px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid rgba(243, 239, 232, .15); background: rgba(243, 239, 232, .04); }
.af-activity__opt strong { font-size: 15px; }
.af-activity__opt small { font-size: 13px; line-height: 1.45; color: var(--af-muted, #A8A29B); }
.af-activity__opt input:checked + span { border-color: #EBD58A; background: rgba(235, 213, 138, .1); }
.af-activity__opt input:focus-visible + span { outline: 3px solid var(--af-gold-light, #EBD58A); outline-offset: 2px; }
.af-signup__photo { display: flex !important; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.af-refgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.af-refphoto-form { margin: 0; }
.af-refslot { position: relative; display: grid !important; place-items: center; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: rgba(243, 239, 232, .06); border: 1.5px dashed rgba(243, 239, 232, .25); cursor: pointer; margin: 0 !important; }
.af-refslot.has-photo { border-style: solid; border-color: rgba(157, 211, 168, .6); }
.af-refslot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.af-refslot__plus { font-size: 30px; color: #EBD58A; }
.af-refslot__label { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 4px; text-align: center; font-size: 12px; font-weight: 700; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); color: #fff; }
.af-refslot.is-busy { opacity: .5; }
.af-check label.is-needed { outline: 2px solid #EF9F27; outline-offset: 4px; border-radius: 8px; }
.af-pcard { display: grid; gap: 8px; background: #2A2416; }
.af-pcard__head { display: flex; justify-content: space-between; align-items: center; }
.af-pcard__title { margin: 0; font-size: 16px; font-weight: 800; }
.af-pcard__head span { font-size: 13px; font-weight: 700; color: #EBD58A; }
.af-pcard__bar { height: 6px; border-radius: 3px; background: rgba(243, 239, 232, .1); overflow: hidden; }
.af-pcard__bar i { display: block; height: 100%; background: #EBD58A; border-radius: 3px; }
.af-pcard__why { margin: 0; color: #C9C4BD; font-size: 13px; }
.af-pcard__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 14px; }
.af-pcard__list li { display: flex; gap: 8px; }
.af-pcard__list li.is-done { color: var(--af-muted, #A8A29B); }
.af-pcard__list li span { width: 16px; color: #EBD58A; }
.af-range__note { margin-top: 6px !important; }
.af-heart-badge { position: absolute; right: 6px; top: 6px; font-size: 16px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
.af-timeline__thumb { position: relative; }

/* =========================================================
   Maria: the client's page
   ========================================================= */
.af-client-head { grid-template-columns: 48px minmax(0, 1fr) auto; align-items: start !important; }
.af-client-head__info { display: grid; gap: 4px; min-width: 0; }
.af-client-head__facts { margin: 0; font-size: 14px; }
.af-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
.af-chip { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.af-chip--goal { background: rgba(235, 213, 138, .16); color: #EBD58A; }
.af-chip--act { background: rgba(181, 212, 244, .14); color: #B5D4F4; }
.af-chip--preg { background: rgba(244, 184, 193, .16); color: #F4B8C1; }
.af-client-head__phone { margin: 0; font-size: 13px; color: var(--af-muted, #A8A29B); }
.af-client-head__phone a { color: #F3EFE8; text-decoration: none; }
.af-client-head__phone .af-client-head__wa { color: #25D366; font-weight: 700; }
.af-client-head__sub { font-weight: 700; text-decoration: none; min-height: 28px; display: inline-flex !important; align-items: center; }
/* Tabs that scroll sideways */
.af-ctabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 2px -2px 0; padding: 2px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 58px); z-index: 20; background: #141315; }
.af-ctabs::-webkit-scrollbar { display: none; }
.af-ctabs a { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: rgba(243, 239, 232, .07); color: #C9C4BD; text-decoration: none; font-size: 14px; font-weight: 600; }
.af-ctabs a.is-active { background: #EBD58A; color: #141315; }
@media (min-width: 782px) { .af-ctabs { top: 12px; } }
/* Weight: start → now → goal */
.af-pw__cols { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; text-align: center; gap: 4px; }
.af-pw__cols > div { display: grid; gap: 2px; }
.af-pw__cols strong { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.af-pw__now { color: #9DD3A8; }
.af-pw__goal { color: #EBD58A; }
.af-pw__arrow { color: var(--af-muted, #A8A29B); }
.af-pw__line { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 13px; font-weight: 700; }
.af-pw__line .is-down { color: #9DD3A8; }
.af-pw__line .is-up { color: #F2C46D; }
.af-pw__best { margin: 8px 0 0 !important; }
.af-pw__best strong { color: #F3EFE8; }
.af-pw__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; }
.af-pw__row strong { font-size: 16px; }
.af-range--coach .af-range__bar { margin: 12px 0 6px; }
.af-bmr__num { font-size: 22px !important; font-weight: 800; }
.af-bmr__num small { font-size: 12px; font-weight: 500; color: var(--af-muted, #A8A29B); }
.af-bmr__for { margin: 8px 0 0; padding: 7px 10px; border-radius: 10px; background: rgba(157, 211, 168, .12); color: #9DD3A8; font-size: 13px; font-weight: 600; }
.af-bmr__tdee { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .07); }
.af-food-card p { margin: 0; }
.af-food-card__t { font-size: 13px; font-weight: 800; color: var(--af-muted, #A8A29B); margin-bottom: 4px !important; }
.af-food-card.is-alert { background: #2E1D1F; }
.af-food-card.is-alert .af-food-card__t { color: #F09595; }
.af-wtl .af-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto 56px; align-items: center; }
.af-wtl__kg { font-weight: 800; font-variant-numeric: tabular-nums; }
.af-wtl__d { text-align: right; font-size: 13px; font-weight: 700; color: var(--af-muted, #A8A29B); font-variant-numeric: tabular-nums; }
.af-wtl__d.is-down { color: #9DD3A8; }
.af-wtl__d.is-up { color: #F2C46D; }
.af-wtl__tag { display: inline-block !important; margin-top: 2px; padding: 1px 8px; border-radius: 999px; background: rgba(235, 213, 138, .14); color: #EBD58A !important; font-size: 11px !important; }
.af-wtl small { font-weight: 500; color: var(--af-muted, #A8A29B); }
/* Photos with hearts */
.af-refgrid--coach { margin: 0; }
.af-refcell { position: relative; display: grid; gap: 4px; }
.af-refcell .af-timeline__thumb img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; display: block; }
.af-refcell__empty { display: grid; place-items: center; aspect-ratio: 3 / 4; border-radius: 10px; background: rgba(243, 239, 232, .05); color: var(--af-muted, #A8A29B); font-size: 12px; }
.af-refcell__lbl { text-align: center; font-size: 12px; color: var(--af-muted, #A8A29B); }
.af-photo-grid--2 { grid-template-columns: 1fr 1fr !important; }
.af-pcell { position: relative; }
.af-heart { position: absolute; right: 6px; bottom: 30px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(20, 19, 21, .78); font-size: 20px; cursor: pointer; display: grid; place-items: center; }
.af-refcell .af-heart { bottom: 26px; width: 38px; height: 38px; font-size: 17px; }
.af-heart.is-pop { animation: af-heart .35s ease; }
@keyframes af-heart { 50% { transform: scale(1.3); } }
@media (prefers-reduced-motion: reduce) { .af-heart.is-pop { animation: none; } }
/* Subscription: progress through the month */
.af-csub__bar { height: 6px; border-radius: 3px; background: rgba(243, 239, 232, .1); overflow: hidden; margin: 6px 0 4px; }
.af-csub__bar i { display: block; height: 100%; background: #5DCAA5; border-radius: 3px; }
.af-csub--soon .af-csub__bar i { background: #EF9F27; }
.af-csub__barlbl { display: flex; justify-content: space-between; font-size: 12px; color: var(--af-muted, #A8A29B); margin-bottom: 6px; }
.af-client-head__sub { min-height: 44px !important; }
/* Narrow phones: "Write" becomes a round ✉️ button, so the client's details get the width. */
@media (max-width: 419px) {
	.af-client-head__write { width: 44px; min-width: 44px; height: 44px; padding: 0 !important; border-radius: 50% !important; justify-content: center; }
	.af-client-head__wlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.af-client-head { grid-template-columns: 44px minmax(0, 1fr) 44px !important; gap: 10px !important; }
}

/* =========================================================
   The plan
   ========================================================= */
/* Home: "Your plan", right under the greeting */
.af-planbtn { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 14px; border-radius: 20px; background: #1F1E21; color: #F3EFE8 !important; text-decoration: none; min-height: 72px; }
.af-planbtn__icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: rgba(235, 213, 138, .14); }
.af-planbtn__text { display: grid; gap: 2px; min-width: 0; }
.af-planbtn__text strong { font-size: 16px; font-weight: 800; }
.af-planbtn__text span { font-size: 13px; color: var(--af-muted, #A8A29B); }
.af-planbtn__new { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 6px; background: #E24B4A; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .06em; vertical-align: 2px; }
.af-planbtn--new { background: linear-gradient(135deg, #3A2F14, #2A2416); box-shadow: inset 0 0 0 1.5px #D2B04C; }
.af-planbtn--new .af-planbtn__icon { background: #D2B04C; }
.af-planbtn--new .af-planbtn__text span { color: #EBD58A; }
.af-planbtn--soon { box-shadow: inset 0 0 0 1px rgba(243, 239, 232, .12); }
.af-planbtn--soon .af-planbtn__icon, .af-planbtn--locked .af-planbtn__icon { background: rgba(243, 239, 232, .06); }
.af-planbtn--locked .af-planbtn__text strong { color: #C9C4BD; }
.af-planbtn:active { transform: scale(.99); }
/* The plan's page */
.af-plan__from { margin: 0 0 2px; color: var(--af-muted, #A8A29B); font-size: 14px; }
.af-plan__new { background: #2A2416 !important; margin: 0; font-size: 14px; }
.af-plan__body { font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.af-plan__body > :first-child { margin-top: 0; }
.af-plan__body > :last-child { margin-bottom: 0; }
.af-plan__body h3 { margin: 18px 0 6px; font-size: 17px; font-weight: 800; color: #EBD58A; font-family: inherit; text-transform: none; letter-spacing: 0; }
.af-plan__body p { margin: 0 0 8px; }
.af-plan__body ul, .af-plan__body ol { margin: 0 0 10px; padding-left: 0; list-style: none; }
.af-plan__body ol { counter-reset: n; }
.af-plan__body li { position: relative; padding: 3px 0 3px 18px; }
.af-plan__body ul li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: #D2B04C; }
.af-plan__body ol li { counter-increment: n; }
.af-plan__body ol li::before { content: counter(n) "."; position: absolute; left: 0; color: #EBD58A; font-weight: 800; }
.af-plan__body strong { color: #fff; }
.af-plan__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.af-plan__actions .af-btn { justify-content: center; text-align: center; min-height: 48px; display: inline-flex; align-items: center; }
@media (max-width: 359px) { .af-plan__actions { grid-template-columns: 1fr; } }
.af-plan-empty { text-align: center; display: grid; gap: 10px; padding: 24px 18px; }
/* Maria: tab "Plan" */
.af-plansum { font-size: 14px; line-height: 1.8; color: #C9C4BD; }
.af-plansum strong { color: #F3EFE8; }
.af-plansum__alert { color: #F09595; }
.af-planstate { display: grid; gap: 3px; }
.af-planstate strong { font-size: 15px; }
.af-planstate span { font-size: 13px; color: var(--af-muted, #A8A29B); }
.af-planstate.is-seen, .af-planstate:not(.af-planstate--none) { background: rgba(93, 202, 165, .1); }
.af-planstate:not(.af-planstate--none) strong { color: #5DCAA5; }
.af-planstate__lock { color: #F2C46D !important; }
.af-planed { display: grid; gap: 8px; }
.af-planed__tools { display: flex; gap: 6px; flex-wrap: wrap; }
.af-planed__tools button { min-height: 40px; min-width: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: rgba(243, 239, 232, .08); color: #F3EFE8; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.af-planed__tools .af-planed__tpl { margin-left: auto; }
.af-planed__area { min-height: 260px; padding: 14px; border-radius: 16px; background: #1F1E21; box-shadow: inset 0 0 0 1.5px rgba(235, 213, 138, .35); font-size: 16px; line-height: 1.6; outline: none; overflow-wrap: anywhere; }
.af-planed__area:focus { box-shadow: inset 0 0 0 2px #EBD58A; }
.af-planed__area:empty::before { content: attr(data-placeholder); color: var(--af-muted, #A8A29B); }
.af-planed__area h3 { margin: 14px 0 4px; font-size: 17px; font-weight: 800; color: #EBD58A; text-transform: none; letter-spacing: 0; font-family: inherit; }
.af-planed__area h3:first-child { margin-top: 0; }
.af-planed__area p { margin: 0 0 6px; }
.af-planed__area ul, .af-planed__area ol { margin: 0 0 8px; padding-left: 22px; }
.af-planed__status { margin: 0; min-height: 18px; font-size: 13px; color: var(--af-muted, #A8A29B); }
.af-planed__more { display: flex; flex-wrap: wrap; gap: 8px; }
.af-planed__more .af-btn { flex: 1 1 160px; justify-content: center; }
.af-planhist__row { width: 100%; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.af-planhist small { font-weight: 500; color: var(--af-muted, #A8A29B); }
.af-plantpl__row { display: grid !important; grid-template-columns: minmax(0, 1fr) 44px; gap: 6px; padding: 0 !important; }
.af-plantpl__use, .af-plantpl__copy { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 50px; padding: 0 14px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.af-plantpl__del { width: 44px; height: 44px; align-self: center; border: 0; border-radius: 50%; background: none; color: var(--af-muted, #A8A29B); font-size: 22px; cursor: pointer; }
/* While Maria writes a long plan, the formatting buttons stay in reach, just under the tabs. */
.af-planed__tools { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 104px); z-index: 15; background: #141315; padding: 6px 0; margin: -6px 0 0; }
@media (min-width: 782px) { .af-planed__tools { top: 58px; } }

/* =========================================================
   Messages, WhatsApp style
   ========================================================= */
/* List of conversations */
.af-chatlock { margin: 0 0 14px; padding: 22px 20px 20px; text-align: center; border: 1px solid rgba(210, 176, 76, .35); background: radial-gradient(120% 80% at 50% 0%, rgba(210, 176, 76, .16), rgba(30, 29, 32, 0) 70%), #1E1D20; }
.af-chatlock__icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(210, 176, 76, .14); border: 1px solid rgba(210, 176, 76, .35); font-size: 26px; }
.af-chatlock__t { margin: 12px 0 6px; font-size: 19px; font-weight: 700; color: var(--af-cream, #F3EFE8); }
.af-chatlock__p { margin: 0 0 16px; color: var(--af-muted); line-height: 1.5; }
.af-inbox { display: grid; background: #1F1E21; border-radius: 20px; overflow: hidden; }
.af-inbox__row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; min-height: 72px; color: #F3EFE8 !important; text-decoration: none; }
.af-inbox__row + .af-inbox__row { border-top: 1px solid rgba(255, 255, 255, .06); }
.af-inbox__row:active { background: rgba(243, 239, 232, .05); }
.af-inbox__row .af-wa__av, .af-inbox__row .af-avatar { width: 48px; height: 48px; font-size: 18px; }
.af-inbox__text { display: grid; gap: 3px; min-width: 0; }
.af-inbox__text strong { font-size: 16px; font-weight: 700; }
.af-inbox__prev { font-size: 14px; color: var(--af-muted, #A8A29B); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-inbox__prev.is-unread { color: #F3EFE8; font-weight: 600; }
.af-inbox__meta { display: grid; justify-items: end; gap: 6px; align-self: start; padding-top: 3px; }
.af-inbox__when { font-size: 12px; color: var(--af-muted, #A8A29B); white-space: nowrap; }
.af-inbox__when.is-unread { color: #EBD58A; font-weight: 700; }
.af-inbox__n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #D2B04C; color: #141315; font-size: 12px; font-weight: 800; display: grid; place-items: center; font-style: normal; }
.af-inbox__wa { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; color: #25D366 !important; font-weight: 700; text-decoration: none; font-size: 14px; }
.af-inbox__wa svg { width: 20px; height: 20px; }
.af-coach .af-inbox + .af-btn { margin-top: 2px; }
.af-wa__avwrap { position: relative; display: inline-flex; }

/* The conversation, full screen */
html.af-wa-open, html.af-wa-open body { overflow: hidden !important; }
html.af-wa-open .af-appnav, html.af-wa-open .af-appbar { display: none !important; }
.af-wa { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100dvh; z-index: 1000; display: flex; flex-direction: column; background: #141315; color: #F3EFE8; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--wp--preset--font-family--figtree, "Segoe UI"), Roboto, sans-serif; }
@media (min-width: 782px) { .af-wa { left: 50%; right: auto; width: min(760px, 100vw); transform: translateX(-50%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); } }
.af-wa__head { flex: none; display: grid; grid-template-columns: 40px 40px minmax(0, 1fr) 44px; gap: 8px; align-items: center; padding: calc(env(safe-area-inset-top, 0px) + 6px) 8px 8px 4px; background: #1F1E21; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.af-wa__back { display: grid; place-items: center; width: 40px; height: 44px; color: #EBD58A !important; }
.af-wa__av, .af-wa__head .af-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 16px; }
.af-wa__av.is-emoji { font-size: 20px; }
.af-wa__title { display: grid; min-width: 0; }
.af-wa__who { font-size: 16px; font-weight: 700; color: #F3EFE8 !important; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-wa__who span { color: var(--af-muted, #A8A29B); }
.af-wa__sub { font-size: 12px; color: var(--af-muted, #A8A29B); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-wa__sub.is-green { color: #9DD3A8; }
.af-wa__info { width: 44px; height: 44px; border: 0; background: none; color: #EBD58A; font-size: 20px; cursor: pointer; }
.af-wa__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 8px 10px 12px; background-color: #141315; background-image: radial-gradient(rgba(235, 213, 138, .045) 1px, transparent 1px); background-size: 16px 16px; }
.af-wa__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.af-wa__day { position: sticky; top: 0; z-index: 2; align-self: center; margin: 8px 0 6px; padding: 4px 12px; border-radius: 9px; background: #2A292C; color: #C9C4BD; font-size: 12px; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.af-wa__msg { display: flex; }
.af-wa__msg.is-mine { justify-content: flex-end; }
.af-wa__msg + .af-wa__msg:not(.is-mine), .af-wa__msg.is-mine + .af-wa__msg.is-mine { margin-top: 0; }
.af-wa__bubble { max-width: min(80%, 480px); padding: 6px 9px 6px 10px; border-radius: 4px 14px 14px 14px; background: #2A292C; font-size: 15.5px; line-height: 1.38; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
.af-wa__msg.is-mine .af-wa__bubble { border-radius: 14px 4px 14px 14px; background: #4B3D15; }
.af-wa__text { white-space: pre-wrap; }
.af-wa__meta { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 6px 0 -3px 10px; font-size: 11px; color: rgba(243, 239, 232, .6); white-space: nowrap; }
.af-wa__tick { font-size: 12px; letter-spacing: -2px; color: rgba(243, 239, 232, .6); }
.af-wa__tick.is-read { color: #53BDEB; }
.af-wa__q { display: grid; gap: 2px; margin: 0 0 5px; padding: 5px 8px; border-left: 3px solid #EBD58A; border-radius: 6px; background: rgba(0, 0, 0, .22); font-size: 13px; color: #C9C4BD; }
.af-wa__q strong { color: #EBD58A; font-size: 12px; }
.af-wa__empty { margin: 30px auto; max-width: 280px; text-align: center; color: var(--af-muted, #A8A29B); font-size: 14px; background: rgba(20, 19, 21, .8); padding: 10px 14px; border-radius: 12px; }
.af-wa__jump { position: absolute; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 78px); z-index: 5; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 20px; background: #EBD58A; color: #141315; font: inherit; font-weight: 800; font-size: 13px; box-shadow: 0 4px 12px rgba(0, 0, 0, .4); cursor: pointer; }
/* The write box, fixed at the bottom */
.af-wa__compose { flex: none; margin: 0; padding: 6px 8px calc(env(safe-area-inset-bottom, 0px) + 8px); background: #141315; border-top: 1px solid rgba(255, 255, 255, .05); }
.af-wa__row { display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 8px; align-items: end; }
.af-wa__row textarea, .af-wa .af-group__compose textarea { width: 100%; min-height: 46px; max-height: 140px; padding: 11px 16px; border: 0; border-radius: 23px; background: #2A292C; color: #F3EFE8; font: inherit; font-size: 16px; line-height: 1.4; resize: none; box-sizing: border-box; }
.af-wa__row textarea:focus { outline: 2px solid rgba(235, 213, 138, .5); }
.af-wa__send { width: 46px; height: 46px; border: 0; border-radius: 50%; background: #D2B04C; color: #141315; display: grid; place-items: center; cursor: pointer; }
.af-wa__send:disabled { opacity: .5; }
.af-wa__chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 0 0 6px; }
.af-wa__chips::-webkit-scrollbar { display: none; }
.af-wa__chips .af-replies { display: flex; flex-wrap: nowrap; gap: 6px; margin: 0; }
.af-wa__quote { display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: center; gap: 4px; margin: 0 0 6px; padding: 6px 4px 6px 10px; border-left: 3px solid #EBD58A; border-radius: 10px; background: #2A292C; }
.af-wa__quote[hidden] { display: none; }
.af-wa__quote div { display: grid; gap: 1px; min-width: 0; }
.af-wa__quote strong { font-size: 12px; color: #EBD58A; }
.af-wa__qtext { font-size: 13px; color: #C9C4BD; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-wa__qx { width: 40px; height: 40px; border: 0; background: none; color: var(--af-muted, #A8A29B); font-size: 22px; cursor: pointer; }
/* The group inside the conversation screen */
.af-wa .af-group { gap: 3px; }
.af-wa .af-group__pin { position: sticky; top: -8px; margin: -8px -10px 6px; border-radius: 0; background: #2A2416; z-index: 3; }
.af-wa .af-group__list { gap: 4px; }
.af-wa .af-gm { grid-template-columns: 30px minmax(0, 1fr); gap: 6px; }
.af-wa .af-gm__bubble { display: block; max-width: min(82%, 480px); border-radius: 4px 14px 14px 14px; padding: 6px 9px 6px 10px; background: #2A292C; font-size: 15.5px; box-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
.af-wa .af-gm.is-mine .af-gm__bubble { border-radius: 14px 4px 14px 14px; background: #4B3D15; color: #F3EFE8; }
.af-wa .af-gm__name { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; margin-bottom: 1px; }
.af-wa .af-gm__text { white-space: pre-wrap; }
.af-wa .af-gm__time { float: right; margin: 6px 0 -3px 10px; font-size: 11px; color: rgba(243, 239, 232, .6); padding: 0; }
.af-wa .af-gm__body { gap: 2px; }
.af-wa .af-gm__meta { margin-top: -2px; }
.af-wa .af-gm__react { min-height: 26px; background: #2A292C; box-shadow: 0 0 0 2px #141315; }
.af-wa .af-group__compose { position: sticky; bottom: -12px; margin: 8px -10px -12px; padding: 6px 8px calc(env(safe-area-inset-bottom, 0px) + 8px); background: #141315; border-top: 1px solid rgba(255, 255, 255, .05); }
.af-wa .af-group__compose .af-compose__row { grid-template-columns: minmax(0, 1fr) 46px; gap: 8px; align-items: end; }
.af-wa .af-group__compose .af-compose__send { width: 46px; height: 46px; border-radius: 50%; }
.af-wa .af-gjoin { margin: 8px 0; }
/* Maria's comments */
.af-comments { display: grid; gap: 10px; padding-top: 4px; }
.af-comment { padding: 12px 14px; border-radius: 16px; background: #1F1E21; }
.af-comment.is-new { box-shadow: inset 0 0 0 1.5px #D2B04C; }
.af-comment__head { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 13px; color: var(--af-muted, #A8A29B); margin-bottom: 4px; }
.af-comment.is-new .af-comment__head span { color: #EBD58A; }
.af-comment__head a { color: #EBD58A; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: 36px; }
.af-comment p { margin: 0 0 6px; font-size: 15px; line-height: 1.5; }
.af-comment__reply { display: inline-flex; align-items: center; min-height: 40px; color: #EBD58A !important; font-weight: 700; text-decoration: none; font-size: 14px; }
.af-wa .af-gm.is-mine { grid-template-columns: minmax(0, 1fr); justify-items: end; }
.af-wa .af-gm.is-mine .af-gm__body { justify-items: end; }
/* The group: the write box sits at the bottom even with few messages; day labels like in the chat */
.af-wa--group .af-wa__body { display: flex; flex-direction: column; }
.af-wa--group .af-group { flex: 1 0 auto; display: flex; flex-direction: column; }
.af-wa--group .af-group__list { flex: 1 0 auto; align-content: start; }
.af-wa .af-group .af-chat__day { position: sticky; top: 38px; z-index: 2; justify-self: center; align-self: center; margin: 8px auto 6px; padding: 4px 12px; border-radius: 9px; background: #2A292C; color: #C9C4BD; font-size: 12px; font-weight: 600; list-style: none; width: max-content; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
a.af-wa__who { display: block; padding: 9px 0; margin: -9px 0; }
/* Client page tabs: stuck exactly under the compact title bar, full width, with a thin line below. */
.af-ctabs { top: var(--af-stick, calc(env(safe-area-inset-top, 0px) + 59px)) !important; margin: 0 !important; padding: 8px 2px !important; background: #141315; box-shadow: 0 1px 0 100vmax rgba(255, 255, 255, .07), 0 0 0 100vmax #141315; clip-path: inset(0 -100vmax -1px); }
@media (min-width: 782px) { .af-ctabs { top: 0 !important; } }
.af-planed__tools { top: calc(var(--af-stick, calc(env(safe-area-inset-top, 0px) + 59px)) + 57px) !important; box-shadow: 0 0 0 100vmax #141315; clip-path: inset(0 -100vmax); }
@media (min-width: 782px) { .af-planed__tools { top: 57px !important; } }
.af-appbar[style*="translateY"] { transition: opacity .18s ease; }

/* =========================================================
   Messages in powder pink (Maria's choice) instead of the olive gold
   ========================================================= */
.af-wa, .af-inbox, .af-chat, .af-quick { --af-pink: #F2CDD3; --af-pink-strong: #E6AEB8; --af-pink-ink: #2C2B2D; }
/* My bubbles: powder pink with dark text; ticks that read well on pink */
.af-wa__msg.is-mine .af-wa__bubble, .af-wa .af-gm.is-mine .af-gm__bubble, .af-chat__msg.is-mine .af-chat__bubble { background: var(--af-pink) !important; color: var(--af-pink-ink) !important; }
.af-wa__msg.is-mine .af-wa__meta, .af-wa .af-gm.is-mine .af-gm__time { color: rgba(44, 43, 45, .58) !important; }
.af-wa__msg.is-mine .af-wa__tick { color: rgba(44, 43, 45, .5); }
.af-wa__msg.is-mine .af-wa__tick.is-read { color: #1B7FC4; }
.af-wa__msg.is-mine .af-wa__q { background: rgba(44, 43, 45, .08); border-left-color: #C9828E; color: #4A3F42; }
.af-wa__msg.is-mine .af-wa__q strong { color: #9E4D5C; }
/* Accents in the conversation screens */
.af-wa__send, .af-wa .af-group__compose .af-compose__send { background: var(--af-pink-strong) !important; color: var(--af-pink-ink) !important; }
.af-wa__row textarea:focus, .af-wa .af-group__compose textarea:focus { outline-color: rgba(242, 205, 211, .55) !important; }
.af-wa__chips .af-reply-chip { border-color: rgba(242, 205, 211, .55) !important; color: var(--af-pink) !important; background: transparent !important; }
.af-wa__jump { background: var(--af-pink) !important; color: var(--af-pink-ink) !important; }
.af-wa__quote { border-left-color: var(--af-pink) !important; }
.af-wa__quote strong { color: var(--af-pink) !important; }
.af-wa__back, .af-wa__info { color: var(--af-pink) !important; }
.af-wa .af-gm__react.is-mine { box-shadow: inset 0 0 0 1.5px var(--af-pink), 0 0 0 2px #141315 !important; }
.af-comment.is-new { box-shadow: inset 0 0 0 1.5px var(--af-pink) !important; }
.af-comment.is-new .af-comment__head span, .af-comment__head a, .af-comment__reply { color: var(--af-pink) !important; }
/* The list of conversations */
.af-inbox__n { background: var(--af-pink) !important; color: var(--af-pink-ink) !important; }
.af-inbox__when.is-unread { color: var(--af-pink) !important; }
/* The last touches of gold in the message screens, in pink too */
.af-wa__q { border-left-color: var(--af-pink) !important; }
.af-wa__q strong { color: var(--af-pink) !important; }
.af-wa__msg.is-mine .af-wa__q { border-left-color: #C9828E !important; }
.af-wa__msg.is-mine .af-wa__q strong { color: #9E4D5C !important; }
.af-wa .af-group__pin { background: #2E2427 !important; }
.af-wa .af-gm.is-coach .af-gm__name { color: var(--af-pink) !important; }
.af-wa .af-gm__tag { background: var(--af-pink-strong) !important; color: var(--af-pink-ink) !important; }
.af-wa .af-gm.is-coach .af-gm__bubble { box-shadow: inset 0 0 0 1px rgba(242, 205, 211, .45), 0 1px 1px rgba(0, 0, 0, .25) !important; }

/* Inactive accounts (Maria) */
.af-inactive-row { color: #F3EFE8 !important; text-decoration: none; }
.af-inactive-row__n { background: #E24B4A !important; color: #fff !important; }
.af-inactive .af-row__text span { font-size: 13px; }
.af-inactive__phone a { color: #F3EFE8; text-decoration: none; }
.af-inactive__phone .af-client-head__wa { color: #25D366; font-weight: 700; }
/* 6.183: the proof kept after a paid account is deleted. */
.af-proof__form { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.af-proof__form input[type="email"] { flex: 1 1 220px; min-height: 44px; }
.af-proof__rec { border-top: 1px solid rgba(255,255,255,.08); margin-top: 12px; padding-top: 12px; overflow-wrap: anywhere; }
.af-proof__rec dt { font-weight: 700; margin-top: 8px; }
.af-proof__rec dd { margin: 2px 0 0; }
.af-proof__rec pre { white-space: pre-wrap; font-size: 12px; max-height: 260px; overflow: auto; margin: 4px 0 0; }
/* 6.184: the store buttons, once the plans are sold only in the app. */
.af-app-only { display: grid; gap: 8px; margin-top: 10px; }
.af-inactive__soonlbl { color: #F09595 !important; }
.af-inactive__soon { background: #2E1D1F; }

/* Header: date and greeting on the left, "My account" centred beside them, one aligned row */
@media (max-width: 781px) {
	.af-account__top { flex-wrap: nowrap !important; align-items: center !important; gap: 12px !important; }
	.af-account__heading { flex: 1 1 auto; min-width: 0; }
	.af-account__top .af-account-btn { flex: none; align-self: center; }
}
.af-account__hello { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 26px !important; line-height: 1.15; }
.af-account__hello-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-hello-badge { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(243, 239, 232, .08); font-size: 15px; text-decoration: none; position: relative; }
.af-hello-badge::before { content: ""; position: absolute; inset: -9px; }
.af-account-btn { font-size: 10px !important; }
@media (max-width: 781px) {
	.af-account__top .af-account-btn { position: static !important; inset: auto !important; transform: none !important; margin: 0 !important; }
	.af-account__heading, .af-account__hello { max-width: 100%; overflow: hidden; }
}
/* The header row never grows wider than the screen: a long name shortens instead */
.af-account { min-width: 0; max-width: 100%; }
.af-account__top { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.af-content__tabs { margin-bottom: 4px; }
.af-faqimgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.af-faqimgs__one { display: grid !important; gap: 4px; margin: 0 !important; font-size: 12px; color: var(--af-muted); }
.af-faqimgs__one img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.af-faqimgs__one span { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }

/* =========================================================
   Images in the chat
   ========================================================= */
.af-wa__head { grid-template-columns: 40px 40px minmax(0, 1fr) auto !important; }
.af-wa__acts { display: flex; gap: 2px; }
.af-wa__row--clip { grid-template-columns: 44px minmax(0, 1fr) 46px !important; }
.af-wa__clip { width: 44px; height: 46px; display: grid !important; place-items: center; color: var(--af-pink, #F2CDD3); cursor: pointer; margin: 0 !important; }
.af-wa__pic { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; padding: 6px; border-radius: 12px; background: #2A292C; }
.af-wa__pic[hidden] { display: none; }
.af-wa__pic img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; background: #1F1E21; }
.af-wa__pic span { flex: 1; font-size: 13px; color: #C9C4BD; }
.af-wa__pic.is-busy span { opacity: .5; }
.af-wa__picx { width: 40px; height: 40px; border: 0; background: none; color: var(--af-muted, #A8A29B); font-size: 22px; cursor: pointer; }
.af-wa__bubble.has-img, .af-wa .af-gm__bubble.has-img { padding: 4px 4px 6px !important; }
.af-wa__bubble.has-img .af-wa__text, .af-wa .af-gm__bubble.has-img .af-gm__text { display: block; padding: 4px 6px 0; }
.af-wa__bubble.has-img .af-wa__meta { margin-right: 6px; }
.af-wa .af-gm__bubble.has-img .af-gm__name { padding: 2px 6px 4px; }
.af-wa .af-gm__bubble.has-img .af-gm__time { margin-right: 6px; }
.af-wa__img, .af-gm__img { display: block; padding: 0; border: 0; background: #1F1E21; border-radius: 10px; overflow: hidden; cursor: zoom-in; width: min(62vw, 260px); }
.af-wa__img img, .af-gm__img img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: cover; }
.af-wa__gone { display: block; margin: 2px 0 4px; padding: 10px 12px; border-radius: 8px; background: rgba(0, 0, 0, .22); color: var(--af-muted, #A8A29B); font-size: 13px; }
.af-wa__msg.is-mine .af-wa__gone { background: rgba(44, 43, 45, .1); color: rgba(44, 43, 45, .7); }
.af-wa-gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin-bottom: 12px; }
.af-wa-gallery__one { padding: 0; border: 0; background: #2A292C; aspect-ratio: 1; overflow: hidden; border-radius: 4px; cursor: zoom-in; }
.af-wa-gallery__one img { width: 100%; height: 100%; object-fit: cover; display: block; }
.af-wa-view { max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; margin: 0; padding: 0; border: 0; background: rgba(0, 0, 0, .94); }
.af-wa-view::backdrop { background: rgba(0, 0, 0, .94); }
.af-wa-view img { width: 100%; height: 100%; object-fit: contain; }
.af-wa-view__x { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .15); color: #fff; font-size: 24px; cursor: pointer; }
/* Group bubbles with a photo stay inside the screen */
.af-wa .af-gm__bubble { box-sizing: border-box; max-width: calc(100% - 4px) !important; }
.af-wa .af-gm.is-mine .af-gm__body { max-width: 100%; min-width: 0; }
.af-wa .af-gm__img { width: min(60vw, 250px); max-width: 100%; }

/* =========================================================
   My account, as a menu of sections (like iPhone Settings)
   ========================================================= */
.af-acc__head { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 14px; align-items: center; padding: 4px 4px 8px; }
.af-acc__head .af-avatar { width: 60px; height: 60px; font-size: 24px; }
.af-acc__name { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 19px; font-weight: 800; min-width: 0; }
.af-acc__mail { margin: 2px 0 0; font-size: 13px; color: var(--af-muted, #A8A29B); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-acc__head .af-subline { margin: 3px 0 0; font-weight: 700; }
.af-accmenu .af-row { color: #F3EFE8 !important; text-decoration: none; }
.af-acc__ic { width: 36px !important; height: 36px !important; border-radius: 10px !important; font-size: 17px; }
.af-acc__ic--profile { background: #3A2F14 !important; }
.af-acc__ic--forplan { background: #2A2416 !important; }
.af-acc__ic--refphotos { background: #2E1D1F !important; }
.af-acc__ic--notify { background: #1D2A36 !important; }
.af-acc__ic--site { background: #232A1D !important; }
.af-acc__ic--privacy { background: #2A292C !important; }
.af-acc__ok { color: #9DD3A8; font-weight: 800; margin-left: auto; }
.af-acc__warn { color: #EF9F27; font-size: 13px; font-weight: 700; margin-left: auto; white-space: nowrap; }
.af-acc__muted { color: var(--af-muted, #A8A29B); font-size: 13px; margin-left: auto; white-space: nowrap; }
.af-acc__logout { display: flex; align-items: center; justify-content: center; min-height: 48px; color: #F09595 !important; font-weight: 700; text-decoration: none; }
.af-acc-sec__title { margin: 4px 4px 4px; font-size: 22px; }
.af-acc-sec__title ~ .af-box > .af-box__title:first-child, .af-acc-sec__title ~ .af-card > .af-card__title:first-child { display: none; }
.af-danger-card { background: #2E1D1F; }
.af-danger-card summary { display: flex; align-items: center; gap: 10px; min-height: 44px; color: #F09595; font-weight: 700; cursor: pointer; }

/* =========================================================
   Login and password pages
   ========================================================= */
.af-auth-wrap { display: flex; justify-content: center; }
.af-auth { max-width: 440px; width: 100%; box-sizing: border-box; padding: 28px 22px; border-radius: 24px; background: #1F1E21; color: #F3EFE8; display: grid; gap: 4px; }
.af-auth--login { align-self: start; }
.af-auth__logo { width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 50%; border: 1.5px solid #D2B04C; display: grid; place-items: center; font-family: var(--wp--preset--font-family--caslon, Georgia, serif); font-size: 12px; color: #EBD58A; }
.af-auth__h { margin: 0; text-align: center; font-size: 24px; }
.af-auth__s { margin: 4px 0 14px; text-align: center; color: var(--af-muted, #A8A29B); font-size: 15px; line-height: 1.5; }
.af-auth__err { display: flex; gap: 8px; margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: #2E1D1F; font-size: 14px; line-height: 1.45; }
.af-auth input[aria-invalid="true"], .af-auth__err ~ form #af-pwd { box-shadow: inset 0 0 0 1.5px #E24B4A; }
.af-auth__pwrow { position: relative; display: block; }
.af-auth__pwrow input { width: 100%; padding-right: 52px !important; box-sizing: border-box; }
.af-auth__eye { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; background: none; font-size: 18px; opacity: .6; cursor: pointer; }
.af-auth__eye.is-on { opacity: 1; }
/* 6.170: under the date of birth of the sign-up form: one short line */
.af-bd-hint { display: block; margin-top: 6px; font-size: 12.5px !important; line-height: 1.35 !important; opacity: .8; }
.af-auth__meter { height: 6px; margin: -4px 0 4px; border-radius: 3px; background: rgba(243, 239, 232, .1); overflow: hidden; }
.af-auth__meter i { display: block; height: 100%; width: 0; border-radius: 3px; background: #E24B4A; transition: width .2s ease, background .2s ease; }
.af-auth__meter.is-ok i { background: #EF9F27; }
.af-auth__meter.is-strong i { background: #9DD3A8; }
.af-auth__strength { margin: 0 0 12px; min-height: 18px; font-size: 13px; color: var(--af-muted, #A8A29B); }
.af-auth__forgot { margin-top: 10px; }
.af-auth__link { display: flex; justify-content: center; align-items: center; min-height: 44px; margin-top: 6px; color: #EBD58A !important; font-weight: 600; text-decoration: none; }
.af-auth__back { display: inline-flex; align-items: center; min-height: 44px; color: #EBD58A !important; font-weight: 600; text-decoration: none; }
.af-auth__tips { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: rgba(243, 239, 232, .05); font-size: 14px; color: #C9C4BD; }
.af-auth__tips p { margin: 0 0 4px; }
.af-auth__tips ul { margin: 0; padding-left: 18px; }
.af-pwchange > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .af-auth__meter i { transition: none; } }
/* Section titles in My account wrap like the rest of the app; the login buttons fill the card */
.af-acc-sec__title { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--wp--preset--font-family--figtree, "Segoe UI"), Roboto, sans-serif !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 24px !important; font-weight: 800 !important; line-height: 1.2; overflow-wrap: anywhere; max-width: 100%; }
.af-auth .af-btn--block, .af-auth .wp-element-button { width: 100%; box-sizing: border-box; justify-content: center; text-align: center; }

/* New account requests: the client on top, the start date and the buttons below */
.af-row.af-req { display: grid !important; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px 10px; align-items: center; }
.af-req__who { grid-column: 2 / -1; min-width: 0; }
.af-req__mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-req > .af-req > form:not(.af-approve) { grid-column: 3; align-self: end; margin: 0; }
.af-req > form:not(.af-approve) .af-pill { min-width: 44px; min-height: 44px; }
/* Rows never grow wider than the screen: long lines wrap (iPhone Safari keeps flex text at its full width otherwise) */
.af-row { min-width: 0; max-width: 100%; box-sizing: border-box; }
.af-row .af-row__text { min-width: 0; flex: 1 1 auto; }
.af-row .af-row__text > span { overflow-wrap: anywhere; white-space: normal; }
.af-accmenu, .af-danger-card, .af-pwchange { max-width: 100%; box-sizing: border-box; overflow: hidden; }
/* The greeting, a little smaller */
.af-tab--home .af-account__hello { font-size: 20px !important; }

/* News on Home */
.af-news { padding: 0 !important; overflow: hidden; }
.af-news__item { position: relative; overflow: hidden; transition: height .25s ease, opacity .25s ease; }
.af-news__item + .af-news__item { border-top: 1px solid rgba(255, 255, 255, .06); }
.af-news__item.is-gone { opacity: 0; }
.af-news__seen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 20px; background: #3A393D; color: #F3EFE8; font-size: 14px; font-weight: 700; }
.af-news__item.is-armed .af-news__seen { background: #5DCAA5; color: #0B3B2B; }
.af-news__row { position: relative; z-index: 1; background: #1F1E21; padding: 12px 52px 12px 14px !important; transition: transform .2s ease; color: #F3EFE8 !important; text-decoration: none; }
.af-news__row .af-row__meta { align-self: start; margin-top: 2px; }
.af-news__ok { position: absolute; z-index: 2; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(243, 239, 232, .06); color: var(--af-muted, #A8A29B); font-size: 15px; cursor: pointer; }
.af-news__ic { border-radius: 10px !important; font-size: 16px; }
.af-news__ic--plan { background: #2A2416 !important; }
.af-news__ic--heart { background: #2E1D1F !important; }
.af-news__ic--comment { background: #2A292C !important; }
.af-news__ic--food { background: #232A1D !important; }
.af-news__ic--group { background: #3A2F14 !important; }
.af-news__hint { margin: 6px 0 0; text-align: center; font-size: 12px; color: var(--af-muted, #A8A29B); }
@media (hover: hover) { .af-news__hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .af-news__item, .af-news__row { transition: none; } }

/* My account → Subscription */
.af-mysub { display: grid; gap: 6px; }
.af-mysub__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.af-mysub__top strong { font-size: 17px; }
.af-mysub__chip { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.af-mysub__chip--ok { background: rgba(93, 202, 165, .14); color: #5DCAA5; }
.af-mysub__chip--soon { background: rgba(239, 159, 39, .14); color: #EF9F27; }
.af-mysub__chip--off { background: rgba(240, 149, 149, .14); color: #F09595; }
.af-mysub__price { margin: 0; font-size: 13px; color: var(--af-muted, #A8A29B); }
.af-mysub__bar { height: 8px; margin-top: 8px; border-radius: 4px; background: rgba(243, 239, 232, .1); overflow: hidden; }
.af-mysub__bar i { display: block; height: 100%; border-radius: 4px; background: #5DCAA5; }
.af-mysub__bar--soon i { background: #EF9F27; }
.af-mysub__bar--expired i { background: #F09595; }
.af-mysub__dates { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--af-muted, #A8A29B); }
.af-mysub__note { margin: 4px 0 0; font-size: 13px; color: #9DD3A8; }
.af-timeline { list-style: none; margin: 0; padding: 6px 14px !important; }
.af-timeline li { position: relative; display: grid; gap: 2px; padding: 10px 0 10px 24px; }
.af-timeline li + li { border-top: 1px solid rgba(255, 255, 255, .07); }
.af-timeline li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: #6B6A70; }
.af-timeline li.is-now::before { background: #5DCAA5; box-shadow: 0 0 0 4px rgba(93, 202, 165, .18); }
.af-timeline strong { font-size: 15px; }
.af-timeline span { font-size: 13px; color: var(--af-muted, #A8A29B); }
.af-mysub__hint { text-align: center; }
.af-acc__sub { max-width: 46%; overflow: hidden; text-overflow: ellipsis; }
.af-acc__sub.af-subline--active { color: #9DD3A8; }
.af-acc__sub.af-subline--soon { color: #EF9F27; }
.af-acc__sub.af-subline--expired { color: #F09595; }
.af-set__ic--notify { background: #1D2A36 !important; } .af-set__ic--checkin { background: #2A2416 !important; } .af-set__ic--sub { background: #232A1D !important; } .af-set__ic--replies { background: #2E2427 !important; } .af-set__ic--inactive, .af-set__ic--security { background: #2A292C !important; } .af-set__ic--site { background: #232A1D !important; }
.af-set-sec > .af-card, .af-set-sec > form, .af-set-sec > section { max-width: 100%; box-sizing: border-box; }

/* Hearts in the chat (double tap) */
.af-wa__bubble, .af-gm__bubble { position: relative; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.af-wa__msg.is-liked { margin-bottom: 12px; }
.af-wa__liked { position: absolute; bottom: -12px; left: -6px; padding: 1px 6px; border-radius: 999px; background: #2A292C; box-shadow: 0 0 0 2px #141315; font-size: 12px; line-height: 1.5; animation: af-like-in .25s ease-out; }
.af-wa__msg:not(.is-mine) .af-wa__liked { left: auto; right: -6px; }
.af-heartpop { position: fixed; z-index: 100000; font-size: 44px; line-height: 1; pointer-events: none; transform: translate(-50%, -50%) scale(.3); opacity: 0; animation: af-heartpop .7s ease-out forwards; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); }
@keyframes af-heartpop { 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 40% { transform: translate(-50%, -50%) scale(.95); } 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1); } }
@keyframes af-like-in { from { transform: scale(0); } 70% { transform: scale(1.2); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .af-heartpop { animation-duration: .01s; } .af-wa__liked { animation: none; } }
/* Wide screens (landscape phone, tablet): when a long page title leaves no room, the tabs go to the next line */
@media (min-width: 782px) and (max-width: 1099px) {
	.af-account .af-account__top { flex-wrap: wrap !important; row-gap: 12px !important; }
	.af-account__top > .af-tabs { order: 3; flex: 1 0 100%; max-width: 100%; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
}

.af-news__item.is-drag .af-news__ok, .af-news__item.is-armed .af-news__ok, .af-news__item.is-gone .af-news__ok { opacity: 0; pointer-events: none; }
.af-news__ok { transition: opacity .15s ease; }

/* The site logo on the login and password pages */
.af-auth__brand { display: block; width: 96px; height: 96px; margin: 0 auto 14px; object-fit: contain; }

/* Signup: messages under the fields */
.af-signup .is-invalid input:not([type=radio]):not([type=checkbox]), .af-signup input[aria-invalid="true"]:not([type=radio]):not([type=checkbox]) { border-color: #F09595 !important; box-shadow: 0 0 0 3px rgba(240, 149, 149, .2) !important; }
.af-signup .af-choices[aria-invalid], .af-signup .is-invalid .af-choices, .af-signup .is-invalid .af-activity { outline: 1.5px solid rgba(240, 149, 149, .7); outline-offset: 4px; border-radius: 12px; }
.af-ferr { display: block; margin: 6px 0 2px; color: #F4A9A9; font-size: 14px; line-height: 1.4; font-weight: 600; }
.af-ferr::before { content: "⚠ "; }
.af-check.is-invalid > label { color: #F4C5C5; }
.af-check.is-invalid input[type=checkbox] { outline: 2px solid #F09595; outline-offset: 2px; }
.af-signup__sum p { margin: 0; }
.af-signup__sum .af-errlist { margin: 6px 0 0; padding-left: 18px; }

/* Approving an account: paid or not, start and expiry */
.af-req > .af-req > form:not(.af-approve) { grid-column: 3; grid-row: 1; align-self: start; }
.af-approve__pay { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(243, 239, 232, .06); }
.af-seg { position: relative; display: block; margin: 0; cursor: pointer; }
.af-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.af-seg span { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 8px; border-radius: 11px; font-size: 14px; font-weight: 700; color: var(--af-muted, #A8A29B); text-align: center; transition: background .15s ease, color .15s ease; }
.af-seg input:checked + span { background: #2E2D31; color: #F3EFE8; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.af-seg input:first-child:checked + span { color: #9DD3A8; }
.af-seg input:focus-visible + span { outline: 2px solid #EBD58A; outline-offset: 1px; }
.af-approve__when { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: end; }
.af-approve__when[hidden] { display: none; }
.af-approve__end { margin: 0; display: grid; gap: 4px; }
.af-approve__end span, .af-approve__date span { font-size: 12px; color: var(--af-muted, #A8A29B); }
.af-approve__end strong { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 12px; background: rgba(243, 239, 232, .05); font-size: 15px; }
.af-approve__unpaid { margin: 0; }
.af-approve__go { width: 100%; justify-content: center; min-height: 46px; }

/* @mentions in the group */
.af-group__compose { position: relative; }
.af-at { position: absolute; left: 8px; right: 8px; bottom: calc(100% + 6px); z-index: 30; max-height: 264px; overflow-y: auto; padding: 6px; border-radius: 16px; background: #2A292C; box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06); }
.af-at[hidden] { display: none; }
.af-at__opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 11px; background: transparent; color: #F3EFE8; font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.af-at__opt.is-sel, .af-at__opt:hover { background: rgba(243, 239, 232, .08); }
.af-at__av { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #141315; font-size: 13px; font-weight: 800; }
.af-at__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.af-at__none { margin: 0; padding: 10px; font-size: 14px; color: var(--af-muted, #A8A29B); }
.af-at__btn { flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--af-muted, #A8A29B); font-size: 20px; font-weight: 700; cursor: pointer; }
.af-at__btn:active { background: rgba(243, 239, 232, .08); }
.af-at__tag { color: #EBD58A; font-weight: 700; }
.af-gm.is-mine .af-at__tag { color: #7A4A1F; }
.af-gm.is-mentioned .af-gm__bubble { box-shadow: inset 3px 0 0 #D2B04C; }
.af-req > .af-avatar, .af-req > .af-row__avatar, .af-req > span:first-child { grid-column: 1; grid-row: 1; }
.af-req .af-req__who { grid-column: 2 !important; grid-row: 1; }
/* Paid / Not paid yet: the chosen one is clearly lit */
.af-approve__pay .af-seg span { background: transparent !important; box-shadow: none !important; color: var(--af-muted, #A8A29B) !important; border: 0 !important; }
.af-approve__pay .af-seg input:checked + span { background: #F3EFE8 !important; color: #1D1C1E !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .35) !important; }
.af-approve__when { align-items: start !important; }
.af-approve__date span, .af-approve__end span { display: block; margin: 0; line-height: 1.3; }
.af-approve__end strong { white-space: nowrap; min-height: 48px; box-sizing: border-box; }
.af-approve__when { grid-template-columns: 1fr !important; gap: 8px !important; }
.af-approve__end { display: flex !important; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.af-approve__end span { font-size: 14px !important; }
.af-approve__end strong { display: inline !important; min-height: 0 !important; padding: 0 !important; background: none !important; font-size: 15px; color: #9DD3A8; }
/* Group compose bar: attach, @, text, send */
.af-group__compose .af-wa__row--clip { grid-template-columns: 40px 34px minmax(0, 1fr) 46px !important; gap: 4px !important; }
.af-group__compose .af-at__btn { width: 34px; height: 44px; border-radius: 12px; align-self: end; }

/* =========================================================================
 * Structured plans (6.0): Maria's editor (.af-pb) and the read-only view (.af-pv)
 * ====================================================================== */
.af-pb { display: grid; gap: 10px; }
.af-pb__loading { color: var(--af-muted); text-align: center; }
.af-pb__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.af-pb__status { color: var(--af-muted); font-size: 13px; flex: 1; text-align: right; }
.af-pb__notebtn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid rgba(243, 239, 232, .14); border-radius: 999px; background: transparent; color: #F3EFE8; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; position: relative; }
.af-pb__notebtn.has-note { border-color: #D2B04C; color: #EBD58A; }
.af-pb__notebtn.has-note::after { content: ""; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: #D2B04C; }
.af-pb__sec { padding: 0; overflow: hidden; }
.af-pb__sechead { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 4px; }
.af-pb__toggle { flex: 1; min-width: 0; display: grid; gap: 2px; text-align: left; padding: 8px 12px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.af-pb__toggle::before { content: "›"; position: absolute; right: -9999px; }
.af-pb__sectitle { font-weight: 700; font-size: 17px; }
.af-pb__sectitle::after { content: " ▾"; color: var(--af-muted); font-size: 13px; }
.af-pb__sec.is-open .af-pb__sectitle::after { content: " ▴"; }
.af-pb__sectot { color: #EBD58A; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.af-pb__meals { display: grid; gap: 2px; padding: 0 10px 12px; }
.af-pb__meal { background: rgba(243, 239, 232, .04); border-radius: 14px; padding: 10px 12px; display: grid; gap: 8px; }
.af-pb__mhead { display: flex; align-items: center; gap: 8px; }
.af-pb__mhead strong { font-size: 15px; }
.af-pb__mtot { flex: 1; color: var(--af-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.af-pb__mhead .af-pb__notebtn { min-height: 32px; padding: 0 10px; }
.af-pb__mhead .af-pb__notebtn span { display: none; }
.af-pb__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.af-pb__item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid rgba(243, 239, 232, .07); }
.af-pb__item:first-child { border-top: 0; }
.af-pb__iname { flex: 1; min-width: 0; display: grid; font-size: 15px; line-height: 1.3; }
.af-pb__iname small { color: var(--af-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.af-pb__rtag { font-size: 13px; }
.af-pb__grams { display: inline-flex; align-items: center; gap: 4px; color: var(--af-muted); font-size: 13px; }
.af-pb__grams input { width: 64px; min-height: 38px; padding: 6px 8px; border: 1px solid rgba(243, 239, 232, .14); border-radius: 10px; background: #141315; color: #F3EFE8; font: inherit; font-size: 16px; text-align: right; font-variant-numeric: tabular-nums; }
.af-pb__rm { width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(243, 239, 232, .06); color: var(--af-muted); font-size: 14px; cursor: pointer; flex: none; }
.af-pb__add { justify-self: start; min-height: 38px; padding: 0 14px; border: 1px dashed rgba(210, 176, 76, .6); border-radius: 999px; background: transparent; color: #EBD58A; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.af-pb__send { margin-top: 4px; }
.af-pblegacy { display: grid; gap: 6px; }
.af-pblegacy span { color: var(--af-muted); font-size: 14px; }
.af-pblegacy .af-btn { justify-self: start; }
.af-pbadd .af-pbadd__q, .af-pbnote textarea { width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px 14px; border: 1px solid rgba(243, 239, 232, .14); border-radius: 14px; background: #141315; color: #F3EFE8; font: inherit; font-size: 16px; }
.af-pbnote textarea { min-height: 120px; resize: vertical; }
.af-pbadd__res { list-style: none; margin: 0; padding: 0; }
.af-pbadd__res .af-hint { padding: 14px 16px; }
.af-pbadd__hit { width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.af-pbadd__last { margin: 0; min-height: 18px; color: #9DB39A; font-size: 13px; font-weight: 600; }
.af-pbadd__pick { display: grid; gap: 6px; }
.af-pbadd__pick > span { color: var(--af-muted); font-size: 14px; }
.af-pbadd__g { display: grid; gap: 6px; margin-top: 8px; font-size: 14px; color: var(--af-muted); }
.af-pbadd__g input { min-height: 52px; padding: 10px 14px; border: 1px solid rgba(210, 176, 76, .6); border-radius: 14px; background: #141315; color: #F3EFE8; font: inherit; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.af-pbadd__calc { margin: 0; color: #EBD58A; font-weight: 700; font-variant-numeric: tabular-nums; }
.af-cadd--link { color: #EBD58A; font-weight: 700; text-decoration: none; }
.af-pbold > summary { cursor: pointer; font-weight: 600; color: var(--af-muted); }

.af-pv { display: grid; gap: 10px; }
.af-pv__sec { padding: 0; overflow: hidden; }
.af-pv__sec.is-today { box-shadow: inset 0 0 0 1.5px #D2B04C; }
.af-pv__head { list-style: none; display: grid; gap: 2px; padding: 16px 18px; cursor: pointer; }
.af-pv__head::-webkit-details-marker { display: none; }
.af-pv__title { font-weight: 700; font-size: 17px; }
.af-pv__title::after { content: " ▾"; color: var(--af-muted); font-size: 13px; }
.af-pv__sec[open] .af-pv__title::after { content: " ▴"; }
.af-pv__todaytag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #D2B04C; color: #141315; font-size: 12px; vertical-align: 2px; }
.af-pv__tot { color: #EBD58A; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.af-pv__meal { margin: 0 10px 10px; padding: 12px 14px; border-radius: 14px; background: rgba(243, 239, 232, .04); display: grid; gap: 8px; }
.af-pv__mhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.af-pv__mhead span { color: var(--af-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.af-pv__items { list-style: none; margin: 0; padding: 0; display: grid; }
.af-pv__items li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 8px 0; border-top: 1px solid rgba(243, 239, 232, .07); }
.af-pv__items li:first-child { border-top: 0; }
.af-pv__name { font-size: 15px; }
.af-pv__qty { font-weight: 700; font-variant-numeric: tabular-nums; }
.af-pv__kc { grid-column: 1 / -1; color: var(--af-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.af-pv__recipe { color: #EBD58A; font-weight: 600; text-decoration: none; }
.af-pv__open { font-size: 12px; opacity: .8; white-space: nowrap; }
.af-pv__note { margin: 0; color: #C9C4BD; font-size: 14px; line-height: 1.45; }
.af-pv__note--sec { margin: -6px 18px 12px; }
.af-pv__note--plan { font-size: 15px; }
button.af-back { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }

/* Plan of the day in the journal (.af-pj) and shopping list (.af-shop) — 6.1 */
.af-pj { display: grid; gap: 10px; padding: 14px; }
.af-pj__sum { margin: 0 4px; color: #EBD58A; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.af-pj__meal { display: grid; gap: 10px; padding: 12px; border-radius: 16px; background: rgba(243, 239, 232, .04); transition: opacity .2s; }
.af-pj__meal.is-saving { opacity: .75; }
.af-pj__head { display: flex; align-items: center; gap: 10px; }
.af-pj__head strong { font-size: 16px; flex: none; white-space: nowrap; } /* 6.181: "Mic dejun" no longer broken in two; the calories wrap instead. */
.af-pj__mtot { margin-left: auto; color: var(--af-muted); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.af-pj__st { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 14px; font-weight: 800; color: #141315; }
.af-pj__st--all { background: #7FC08A; }
.af-pj__st--part { background: #E8C35A; }
.af-pj__st--none { background: #E07A7A; }
.af-pj__st--other { background: #8FA6C9; }
.af-pj__mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border-radius: 12px; background: #141315; }
.af-pj__mode button { min-height: 36px; border: 0; border-radius: 9px; background: transparent; color: var(--af-muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.af-pj__mode button[aria-checked="true"] { background: #2C2B2D; color: #F3EFE8; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.af-pj__items, .af-shop__list { list-style: none; margin: 0; padding: 0; display: grid; }
.af-pj__items li, .af-shop__list li { display: flex; align-items: center; gap: 8px; border-top: 1px solid rgba(243, 239, 232, .07); }
.af-pj__items li:first-child, .af-shop__list li:first-child { border-top: 0; }
.af-pj__item { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 0; cursor: pointer; }
.af-pj__item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.af-pj__box { flex: none; width: 24px; height: 24px; border-radius: 7px; border: 2px solid rgba(243, 239, 232, .35); display: grid; place-items: center; transition: background-color .15s, border-color .15s; }
.af-pj__item input:checked + .af-pj__box { background: #D2B04C; border-color: #D2B04C; }
.af-pj__item input:checked + .af-pj__box::after { content: "✓"; color: #141315; font-weight: 900; font-size: 15px; }
.af-pj__item input:focus-visible + .af-pj__box { outline: 2px solid #EBD58A; outline-offset: 2px; }
.af-pj__txt { display: grid; min-width: 0; }
.af-pj__name { font-size: 15px; line-height: 1.3; }
.af-pj__item input:checked ~ .af-pj__txt .af-pj__name { color: var(--af-muted); }
.af-pj__txt small { color: var(--af-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.af-pj__recipe { flex: none; padding: 6px 10px; border-radius: 999px; background: rgba(210, 176, 76, .15); color: #EBD58A; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.af-pj__other textarea { width: 100%; box-sizing: border-box; min-height: 64px; padding: 10px 12px; border: 1px solid rgba(243, 239, 232, .14); border-radius: 12px; background: #141315; color: #F3EFE8; font: inherit; font-size: 16px; resize: vertical; }
.af-pj__note summary { cursor: pointer; color: var(--af-muted); font-size: 13px; }
.af-pj__note p { margin: 6px 0 0; color: #C9C4BD; font-size: 14px; line-height: 1.45; }
.af-pj__hint { margin: 0 4px; color: var(--af-muted); font-size: 12px; }
.af-pj [hidden] { display: none !important; }
button.af-shopbtn { width: 100%; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.af-shop__list { padding: 4px 16px; }
.af-shop__reset { justify-self: start; border: 0; background: none; color: #EBD58A; font: inherit; font-size: 14px; cursor: pointer; padding: 0; }

/* Free plan (6.3) */
.af-free__why { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 8px; text-align: left; }
.af-free__why li { position: relative; padding-left: 28px; color: #F3EFE8; font-size: 15px; line-height: 1.4; }
.af-free__why li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: rgba(210, 176, 76, .2); color: #EBD58A; font-size: 12px; font-weight: 900; display: grid; place-items: center; }
.af-free__cta { display: grid; gap: 10px; margin-top: 6px; }
.af-free .af-sub__wa { justify-content: center; }

/* 6.4: folded meals — editor (.af-pb), plan (.af-pv), journal (.af-pj) */
.af-pb__mtoggle { flex: 1; min-width: 0; display: grid; gap: 2px; padding: 4px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.af-pb__mtoggle strong { font-size: 15px; }
.af-pb__mtoggle strong::after { content: " ▾"; color: var(--af-muted); font-size: 12px; }
.af-pb__meal.is-open .af-pb__mtoggle strong::after { content: " ▴"; }
.af-pb__mcount { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: rgba(210, 176, 76, .18); color: #EBD58A; font-size: 12px; text-align: center; vertical-align: 1px; }
.af-pb__mhead .af-pb__mtot { flex: none; }
.af-pb__mtoggle .af-pb__mtot { color: var(--af-muted); font-size: 12px; }
.af-pv__meal > summary, .af-pj__meal > summary { list-style: none; cursor: pointer; }
.af-pv__meal > summary::-webkit-details-marker, .af-pj__meal > summary::-webkit-details-marker { display: none; }
.af-pv__chev, .af-pj__chev { margin-left: 6px; color: var(--af-muted); font-size: 18px; line-height: 1; transition: transform .2s; }
.af-pv__meal[open] .af-pv__chev, .af-pj__meal[open] .af-pj__chev { transform: rotate(90deg); }
.af-pv__mhead { align-items: center; }
.af-pv__mhead span:not(.af-pv__chev) { margin-left: auto; }
.af-pv__mbody, .af-pj__body { display: grid; gap: 10px; margin-top: 10px; }
.af-pj__meal { gap: 0; }
.af-pj__meal[open] { gap: 10px; }
@media (prefers-reduced-motion: reduce) { .af-pv__chev, .af-pj__chev { transition: none; } }

/* 6.5 — Maria: client journal by month (.af-cj), statistics, plan timeline (.af-tl); recipe sheet (.af-rsheet) */
.af-cj__intro { margin: 0 6px; }
.af-cj__month { padding: 0; overflow: hidden; }
.af-cj__month > summary { list-style: none; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 16px 18px; cursor: pointer; }
.af-cj__month > summary::-webkit-details-marker, .af-cj__day > summary::-webkit-details-marker { display: none; }
.af-cj__month > summary strong { font-size: 17px; }
.af-cj__month > summary strong::after { content: " ▾"; color: var(--af-muted); font-size: 12px; }
.af-cj__month[open] > summary strong::after { content: " ▴"; }
.af-cj__month > summary span { color: var(--af-muted); font-size: 13px; }
.af-cj__day { margin: 0 10px 8px; border-radius: 14px; background: rgba(243, 239, 232, .04); }
.af-cj__day > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; cursor: pointer; }
.af-cj__day > summary strong { font-size: 15px; white-space: nowrap; }
.af-cj__meta { margin-left: auto; color: var(--af-muted); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.af-cj__body { display: grid; gap: 10px; padding: 0 12px 12px; }
.af-cj__body .af-card { background: rgba(243, 239, 232, .04); }
.af-cj__plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.af-cj__plan li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; }
.af-cj__plan li small { color: var(--af-muted); }
.af-cj__h { margin: 0 0 6px; color: var(--af-muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.af-cj__grid { stroke: rgba(243, 239, 232, .08); stroke-width: 1; }
.af-cj__axis { fill: var(--af-muted); font-size: 9px; }
.af-cj__bar { fill: #8FA6C9; }
.af-cj__bar.is-good { fill: #7FC08A; }
.af-cj__avg { stroke: #D2B04C; stroke-width: 1.5; stroke-dasharray: 4 3; }
.af-cj__strip { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.af-cj__cell { display: inline-grid; place-items: center; min-width: 14px; min-height: 14px; aspect-ratio: 1; border-radius: 6px; font-size: 11px; font-weight: 700; color: #141315; vertical-align: -2px; }
.af-cj__cell--yes { background: #7FC08A; }
.af-cj__cell--partly { background: #E8C35A; }
.af-cj__cell--no { background: #E07A7A; }
.af-cj__cell--logged { background: #5A5860; color: #F3EFE8; }
.af-cj__cell--none { background: rgba(243, 239, 232, .08); color: var(--af-muted); }
.af-cj__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 0; color: var(--af-muted); font-size: 12px; }
.af-cj__legend .af-cj__cell { min-width: 12px; min-height: 12px; }
.af-tl { list-style: none; margin: 0; padding: 16px 16px 16px 10px; display: grid; gap: 4px; }
.af-tl__item { position: relative; padding-left: 26px; }
.af-tl__item::before { content: ""; position: absolute; left: 8px; top: 0; bottom: -4px; width: 2px; background: rgba(243, 239, 232, .1); }
.af-tl__item:first-child::before { top: 18px; }
.af-tl__item:last-child::before { bottom: calc(100% - 18px); }
.af-tl__dot { position: absolute; left: 3px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: #3A393D; border: 2px solid #1F1E21; }
.af-tl__item.is-current .af-tl__dot { background: #D2B04C; box-shadow: 0 0 0 4px rgba(210, 176, 76, .2); }
.af-tl__card { width: 100%; display: grid; gap: 2px; padding: 8px 10px; border: 0; border-radius: 12px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.af-tl__card:hover, .af-tl__card:focus-visible { background: rgba(243, 239, 232, .05); }
.af-tl__date { color: var(--af-muted); font-size: 12px; }
.af-tl__card strong { font-size: 15px; }
.af-tl__item.is-current .af-tl__card strong { color: #EBD58A; }
.af-tl__meta { color: var(--af-muted); font-size: 12px; }
.af-rsheet__close { justify-self: start; border: 0; background: none; color: #EBD58A; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; padding: 0; }
.af-rsheet__body { gap: 8px; padding-bottom: 24px; }
.af-rsheet__img { width: 100%; height: 150px; object-fit: cover; border-radius: 16px; }
.af-rsheet__title { margin: 6px 0 0; font-size: 20px; }
.af-rsheet__meta { margin: 0; color: var(--af-muted); font-size: 13px; }
.af-rsheet__body h4 { margin: 12px 0 2px; color: #EBD58A; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.af-rsheet__ing, .af-rsheet__steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; line-height: 1.45; }
.af-rsheet__steps li::marker { color: #D2B04C; font-weight: 700; }
.af-rsheet__body h3, .af-rsheet__body h4 { font-family: inherit !important; letter-spacing: normal; }
.af-rsheet__title { text-transform: none !important; font-weight: 800; line-height: 1.25; }
.af-rsheet__body h4 { letter-spacing: .04em; }
.af-rsheet__close { white-space: nowrap; }

/* 6.6 — folded blocks (Last 7 days) and the day-by-day list */
.af-fold { padding: 0; overflow: hidden; }
.af-fold > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; cursor: pointer; font-weight: 700; font-size: 16px; }
.af-fold > summary::-webkit-details-marker { display: none; }
.af-fold > summary::after { content: "›"; color: var(--af-muted); font-size: 20px; transition: transform .2s; }
.af-fold[open] > summary::after { transform: rotate(90deg); }
.af-fold > .af-stats { margin: 0; padding: 0 18px 18px; }
.af-daylist > summary { font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .af-fold > summary::after { transition: none; } }
.af-cj__axis--y { paint-order: stroke; stroke: #1F1E21; stroke-width: 3px; }

/* 6.7 — alternatives (editor, plan, journal) */
.af-pb__item { flex-wrap: wrap; }
.af-pb__altadd { width: 36px; height: 36px; border: 1px solid rgba(210, 176, 76, .45); border-radius: 50%; background: transparent; color: #EBD58A; font-size: 15px; cursor: pointer; flex: none; }
.af-pb__alts { flex-basis: 100%; display: grid; gap: 4px; padding-left: 8px; }
.af-pb__alt { display: flex; align-items: center; gap: 6px; color: var(--af-muted); font-size: 12px; line-height: 1.4; }
.af-pb__alt strong { color: #F3EFE8; font-weight: 600; }
.af-pb__altrm { margin-left: auto; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(243, 239, 232, .06); color: var(--af-muted); font-size: 12px; cursor: pointer; flex: none; }
.af-pv__alt { grid-column: 1 / -1; color: #EBD58A; font-size: 12px; opacity: .9; }
.af-pj__items li { flex-wrap: wrap; }
.af-pj__alts { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 8px 36px; }
.af-pj__chip { min-height: 32px; padding: 0 12px; border: 1px solid rgba(243, 239, 232, .16); border-radius: 999px; background: transparent; color: var(--af-muted); font: inherit; font-size: 13px; cursor: pointer; }
.af-pj__chip[aria-checked="true"] { border-color: #D2B04C; background: rgba(210, 176, 76, .16); color: #F3EFE8; font-weight: 600; }
.af-check--optional { opacity: .9; }

/* 6.8 — "Your week" card and the Stories picture */
.af-week-card { display: grid; gap: 14px; background: linear-gradient(160deg, #2A2620 0%, #1F1E21 60%); box-shadow: inset 0 0 0 1.5px rgba(210, 176, 76, .45); }
.af-week-card__head { display: grid; gap: 4px; }
.af-week-card__kicker { color: #EBD58A; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.af-week-card__head strong { font-size: 18px; line-height: 1.3; }
.af-week-card__tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.af-week-card__tiles li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(243, 239, 232, .05); }
.af-week-card__tiles li span { grid-row: 1 / 3; font-size: 22px; }
.af-week-card__tiles li b { font-size: 18px; font-variant-numeric: tabular-nums; }
.af-week-card__tiles li small { color: var(--af-muted); font-size: 12px; }
.af-weeksheet__canvas { width: 100%; max-width: 300px; height: auto; justify-self: center; border-radius: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.af-weeksheet__close { justify-self: start; border: 0; background: none; color: #EBD58A; font: inherit; font-weight: 600; cursor: pointer; padding: 0; white-space: nowrap; }
.af-weeksheet__kg { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; }
.af-weeksheet__kg input { width: 22px; height: 22px; accent-color: #D2B04C; }

/* 6.9 — client reviews (tab "My review") and Maria's list */
.af-segments a { min-width: 0; }
.af-myreview { display: grid; gap: 12px; }
.af-myreview__st { margin: 0; font-weight: 700; font-size: 16px; }
.af-myreview__st--publish { color: #7FC08A; }
.af-myreview__st--pending { color: #E8C35A; }
.af-myreview__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.af-myreview__photos figure { margin: 0; position: relative; }
.af-myreview__photos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; }
.af-myreview__photos figcaption { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(20, 19, 21, .75); color: #EBD58A; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.af-myreview__text { margin: 0; padding: 12px 14px; border-left: 3px solid #D2B04C; background: rgba(243, 239, 232, .04); border-radius: 0 12px 12px 0; line-height: 1.5; }
.af-myreview__text cite { display: block; margin-top: 8px; color: #EBD58A; font-style: normal; font-weight: 700; }
.af-myreview__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.af-reviewform { display: grid; gap: 14px; }
.af-reviewform__photos { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; }
.af-reviewform__photos legend { font-weight: 700; margin-bottom: 6px; }
.af-reviewform__pick p { margin: 0 0 6px; }
.af-reviewform__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.af-reviewform__grid label { position: relative; display: grid; gap: 2px; cursor: pointer; text-align: center; }
.af-reviewform__grid input { position: absolute; opacity: 0; }
.af-reviewform__grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; border: 2px solid transparent; }
.af-reviewform__grid input:checked + img { border-color: #D2B04C; box-shadow: 0 0 0 2px rgba(210, 176, 76, .35); }
.af-reviewform__grid input:focus-visible + img { outline: 2px solid #EBD58A; }
.af-reviewform__grid small { color: var(--af-muted); font-size: 11px; }
.af-reviewform__upload { justify-self: start; }
.af-crev__body { display: grid; gap: 10px; padding: 0 16px 16px; }
.af-crev__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.af-crev--pending > summary { box-shadow: inset 3px 0 0 #E8C35A; }
.af-segments:has(> a:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.af-segments:has(> a:nth-child(4)) a { padding-left: 4px; padding-right: 4px; font-size: 13px; white-space: nowrap; }
.af-tag--free { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: rgba(157, 179, 154, .2); color: #9DB39A; font-size: 11px; font-weight: 700; vertical-align: 1px; }
.af-row__meta { white-space: nowrap; }

/* 6.10 — water and sleep: the same line chart as the weight, own colours */
.af-chart--water .af-chart__line { stroke: #6FA8DC; }
.af-chart--water .af-chart__pt { fill: #6FA8DC; }
.af-chart--sleep .af-chart__line { stroke: #B39DDB; }
.af-chart--sleep .af-chart__pt { fill: #B39DDB; }
.af-chart__avg { stroke: rgba(243, 239, 232, .45); stroke-width: 2; stroke-dasharray: 8 6; }

/* 6.10 — sign-up consents: short and light */
.af-consents { display: grid; gap: 10px; margin: 6px 0 4px; }
.af-consents .af-check { margin: 0; }
.af-consents .af-check label { display: flex; align-items: flex-start; gap: 10px; }
.af-consents .af-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: #D2B04C; }
.af-consents .af-check span { font-size: 14px; line-height: 1.45; color: var(--af-muted, #C9C4BD); }
.af-consents .af-check a { color: #EBD58A; }
.af-consents .af-req { display: inline; color: #D2B04C; }
.af-consents .af-check--optional span { font-size: 13px; }
.af-cform .af-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.af-cform .af-chip input:checked + span { background: rgba(210, 176, 76, .18); border-color: #D2B04C; color: #F3EFE8; font-weight: 600; }
.af-chip input:focus-visible + span { outline: 2px solid #EBD58A; outline-offset: 2px; }

/* 6.12 — Maria's business panel */
.af-segments--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.af-biz__intro { margin: 0 6px; }
.af-biz__kpis .af-stats dd small { display: block; margin-top: 2px; color: var(--af-muted); font-size: 11px; font-weight: 500; }
.af-biz__bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; height: 190px; padding: 16px 14px 12px; }
.af-biz__bar { display: grid; grid-template-rows: auto 1fr auto; align-items: end; justify-items: center; height: 100%; gap: 4px; min-width: 0; }
.af-biz__col { width: 70%; max-width: 34px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #EBD58A, #D2B04C); align-self: end; }
.af-biz__val { font-size: 10px; color: var(--af-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.af-biz__m { font-size: 12px; color: var(--af-muted); text-transform: capitalize; }
.af-biz__price > summary { cursor: pointer; }
.af-biz__bar { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.af-biz__col { flex: none; }
.af-pb[data-mode="calc"] .af-pb__notebtn { display: none; }
.af-pb[data-mode="calc"] .af-pb__altadd { display: none; }
.af-pb[data-mode="calc"] .af-pb__top { min-height: 0; }
.af-biz__bars { height: 200px; overflow: hidden; }
.af-biz__bar { height: 100%; min-height: 0; }
.af-biz__track { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.af-biz__col { width: 70%; max-width: 34px; }
.af-week-card__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.af-week-card__tiles li { grid-template-columns: 1fr; grid-template-rows: auto auto auto; row-gap: 2px; text-align: left; }
.af-week-card__tiles li span { grid-row: auto; font-size: 20px; }
.af-week-card__tiles li b { font-size: 17px; }

/* 6.13 — shopping list: aisles, period, progress; ticked items sink to the bottom */
.af-shop__head { position: sticky; top: 0; z-index: 2; display: grid; gap: 8px; padding: 4px 0 10px; background: inherit; }
.af-shop__period { grid-template-columns: 1fr 1fr; }
.af-shop__period button { border: 0; background: transparent; color: var(--af-muted); font: inherit; font-weight: 600; font-size: 14px; padding: 9px 8px; border-radius: 9px; cursor: pointer; }
.af-shop__period button.is-active { background: #3A393D; color: #F3EFE8; }
.af-shop__progress { margin: 0; color: #EBD58A; font-size: 13px; font-weight: 700; }
.af-shop__for { margin: 0; color: #F3EFE8; font-size: 14px; font-weight: 600; } /* 6.107: which plan this list is for */
.af-shop__newplan { margin: 12px 0 0; }
.af-shop__bar { height: 6px; border-radius: 999px; background: rgba(243, 239, 232, .1); overflow: hidden; }
.af-shop__bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #D2B04C, #EBD58A); transition: width .25s ease; }
.af-shop__aisle { margin: 14px 4px 6px; font-size: 13px; font-weight: 700; color: var(--af-muted); letter-spacing: .02em; }
.af-shop__group { list-style: none; margin: 0; padding: 4px 16px; display: flex; flex-direction: column; }
.af-shop__group li { display: flex; align-items: center; gap: 8px; border-top: 1px solid rgba(243, 239, 232, .07); }
.af-shop__group li:first-child { border-top: 0; }
.af-shop__group li:has(input:checked) { order: 1; opacity: .55; }
.af-shop__group li:has(input:checked) .af-pj__name { text-decoration: line-through; }
.af-shop__send { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .af-shop__bar span { transition: none; } }

/* 6.14 — voice messages (conversation with Maria) */
.af-wa__mic { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--af-muted, #C9C4BD); display: grid; place-items: center; cursor: pointer; }
.af-wa__mic:active { background: rgba(243, 239, 232, .08); }
.af-wa__voice { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 6px; border-radius: 16px; background: rgba(242, 205, 211, .12); }
.af-wa__vdot { width: 12px; height: 12px; border-radius: 50%; background: #E07A7A; animation: af-vpulse 1s ease-in-out infinite; }
@keyframes af-vpulse { 50% { opacity: .35; } }
.af-wa__vhint { flex: 1; color: var(--af-muted, #C9C4BD); font-size: 12px; }
.af-wa__voice .af-wa__vtime { font-variant-numeric: tabular-nums; font-weight: 700; }
.af-wa__voice button { min-height: 38px; padding: 0 12px; border: 0; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.af-wa__vcancel { background: transparent; color: var(--af-muted, #C9C4BD); margin-left: auto; }
.af-wa__vstop { background: #E07A7A; color: #141315; }
.af-wa__vsend { background: #E6AEB8; color: #2C2B2D; }
.af-wa__vsend:disabled { opacity: .6; }
.af-wa__vprev { width: 38px; padding: 0 !important; background: rgba(243, 239, 232, .12); color: inherit; }
form.is-voice .af-wa__row { display: none; }
.af-wa__voice-msg { display: flex; align-items: center; gap: 10px; min-width: 190px; padding: 2px 0 4px; }
.af-wa__vplay { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(44, 43, 45, .12); color: inherit; font-size: 13px; cursor: pointer; }
.af-wa__vbar { flex: 1; height: 4px; border-radius: 999px; background: rgba(44, 43, 45, .18); overflow: hidden; }
.af-wa__vfill { display: block; height: 100%; width: 0; background: currentColor; }
.af-wa__vtime { font-size: 12px; font-variant-numeric: tabular-nums; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .af-wa__vdot { animation: none; } }

/* 6.14 — protein calculator (Maria's calculator) */
.af-prot { display: grid; gap: 12px; }
.af-prot .af-chips { display: flex; gap: 8px; }
.af-prot .af-chip input:checked + span { background: rgba(210, 176, 76, .18); border-color: #D2B04C; color: #F3EFE8; font-weight: 600; }
.af-prot input[type="text"], .af-prot select { width: 100%; box-sizing: border-box; min-height: 46px; padding: 10px 12px; border: 1px solid rgba(243, 239, 232, .14); border-radius: 12px; background: #141315; color: #F3EFE8; font: inherit; font-size: 16px; }
.af-prot__out { padding: 14px 16px; border-radius: 16px; background: rgba(210, 176, 76, .1); box-shadow: inset 0 0 0 1px rgba(210, 176, 76, .35); }
.af-prot__out p { margin: 0; }
.af-prot__main { font-size: 22px; font-weight: 800; color: #EBD58A; }
.af-prot__range, .af-prot__meal { margin-top: 4px !important; font-size: 14px; }
.af-prot__how { margin-top: 6px !important; font-size: 12px; color: var(--af-muted); }
.af-prot__src { font-size: 11px; }

/* 6.15 — reactions in the conversation with Maria */
.af-wa__picker { position: absolute; z-index: 1000; display: flex; gap: 2px; padding: 6px 8px; border-radius: 999px; background: #2C2B2E; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.af-wa__pick { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; transition: transform .12s; }
.af-wa__pick:hover, .af-wa__pick:focus-visible { transform: scale(1.18); background: rgba(243, 239, 232, .08); }
.af-wa__pick.is-on { background: rgba(210, 176, 76, .25); }
.af-wa__bubble { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media (prefers-reduced-motion: reduce) { .af-wa__pick { transition: none; } }
.af-pc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.af-pc li { display: grid; grid-template-columns: 52px 1fr; gap: 8px; font-size: 14px; line-height: 1.4; }
.af-pc__when { color: var(--af-muted); font-size: 12px; padding-top: 2px; }

/* 6.16 — conversation: one action button (🎤 when empty, ➤ when there is something to send), one floating date */
.af-wa__row--clip:has(> .af-wa__mic) .af-wa__mic,
.af-wa__row--clip:has(> .af-wa__mic) .af-wa__send { grid-column: 3; grid-row: 1; }
.af-wa__row--clip:has(> .af-wa__mic:not([hidden])) .af-wa__send { display: none; }
form.has-content .af-wa__row--clip:has(> .af-wa__mic) .af-wa__send { display: grid; } /* Beats the rule that hides it while the box is empty. */
form.has-content .af-wa__row--clip .af-wa__mic { display: none; }
.af-wa__mic { width: 46px; height: 46px; background: var(--af-pink-strong, #E6AEB8) !important; color: var(--af-pink-ink, #2C2B2D) !important; }
.af-wa__day { position: static !important; }
.af-wa__floatwrap { position: sticky; top: 8px; height: 0; z-index: 3; display: flex; justify-content: center; pointer-events: none; }
.af-wa__float { padding: 4px 12px; border-radius: 9px; background: rgba(42, 41, 44, .95); color: #C9C4BD; font-size: 12px; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .2s; }
.af-wa__float.is-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .af-wa__float { transition: none; } }
.af-wa__floatwrap { align-items: flex-start; }
.af-wa__float { flex: none; display: inline-block; line-height: 1.4; white-space: nowrap; }

/* 6.15.2 — shopping list: the period and progress stick right under the sheet's bar, on the sheet's own colour */
.af-shop .af-shop__head { top: var(--af-bar-h, 58px); z-index: 1; margin: 0 -16px; padding: 6px 16px 10px; background: #232226; box-shadow: 0 6px 10px -8px rgba(0, 0, 0, .6); }
.af-shop .af-sheet__bar h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* 6.16 — recipe categories under the search (Maria's calculator and plan editor) */
.af-pbadd__cats { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; margin: 0 -2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.af-pbadd__cats::-webkit-scrollbar { display: none; }
.af-pbadd__cat { flex: none; min-height: 36px; padding: 0 14px; border: 1px solid rgba(243, 239, 232, .16); border-radius: 999px; background: transparent; color: #F3EFE8; font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer; }
.af-pbadd__cat[aria-pressed="true"] { border-color: #D2B04C; background: rgba(210, 176, 76, .18); font-weight: 700; }

/* 6.16.1 — rows that are buttons look like the app's rows (no grey system button on iPhone) */
button.af-row { -webkit-appearance: none; appearance: none; width: 100%; margin: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.af-rows > button.af-row + button.af-row, .af-rows > button.af-row + .af-row, .af-rows > .af-row + button.af-row { border-top: 1px solid rgba(243, 239, 232, .07); }
button.af-row:active { background: rgba(243, 239, 232, .05); }
button.af-row:focus-visible { outline: 2px solid #EBD58A; outline-offset: -2px; }
.af-pbsrc__row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px; }
.af-pbsrc__row .af-row__text strong { color: #F3EFE8; font-weight: 600; }

/* ================= New interface (beta) ================= */
.af-beta.af-tab--home .af-account__top { display: none; } /* Home has its own big header; the top bar appears on scroll, as in the old view. */
.af-bh { position: relative; }
.af-bh__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin: 4px 2px 0; }
.af-bh__date { margin: 0; font-family: var(--wp--preset--font-family--caslon, Georgia, serif); font-size: 15px; color: #EBD58A; }
.af-bh__hi { margin: 2px 0 0; font-size: 28px; font-weight: 700; letter-spacing: 0; text-transform: none; font-family: inherit; }
.af-bh__icons { display: flex; gap: 10px; }
.af-bh__ib { position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(243, 239, 232, .07); border: 1px solid rgba(243, 239, 232, .08); color: #F3EFE8; }
.af-bh__badge { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #E6AEB8; color: #2C2B2D; font-size: 11.5px; font-weight: 800; display: grid; place-items: center; border: 2px solid #16151A; }
.af-bh__arcbox { position: relative; margin: 0 -16px; aspect-ratio: 393 / 290; }
.af-bh__arc { position: absolute; inset: 0; width: 100%; height: 100%; font-family: inherit; overflow: visible; }
.af-bh__in { position: absolute; left: 0; right: 0; top: 36%; text-align: center; }
.af-bh__now { margin: 0; font-size: 12.5px; color: #EBD58A; font-weight: 700; }
.af-bh__name { margin: 2px 0 0; font-family: var(--wp--preset--font-family--caslon, Georgia, serif); font-size: 34px; line-height: 1.1; }
.af-bh__kc { margin: 2px 0 0; font-size: 13px; color: #A8A2AE; }
.af-bh__btns { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.af-bh__btns button, .af-bh__done { height: 40px; padding: 0 16px; border: 0; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; display: inline-grid; place-items: center; }
.af-bh__all { background: linear-gradient(135deg, #F0DA92, #D2B04C); color: #1A1814; }
.af-bh__other { background: rgba(243, 239, 232, .08); color: #F3EFE8; }
.af-bh__done { background: rgba(111, 191, 115, .16); color: #8FD493; }
.af-bh__tot { margin: 6px 4px 0; }
.af-bh__totrow { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; color: #A8A2AE; }
.af-bh__totrow b { font-size: 15px; color: #F3EFE8; }
.af-bh__bar { display: flex; height: 6px; border-radius: 4px; background: rgba(243, 239, 232, .1); overflow: hidden; margin-top: 8px; }
.af-bh__bar i { display: block; height: 100%; background: linear-gradient(90deg, #C9A544, #EBD58A); }
.af-bh__bar i.p { background: #E6AEB8; }
.af-bh__leg { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; font-size: 11.5px; color: #8F8996; }
.af-bh__leg span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.af-bh__leg .g::before { background: #D9B550; } .af-bh__leg .p::before { background: #E6AEB8; }
.af-bh__meal { margin-top: 14px; }
.af-bh__meal .af-section-label, .af-bh__meal .af-pj > p:first-child { display: none; }
.af-bh__extra { margin-top: 14px; padding: 12px 14px; border-radius: 20px; background: rgba(230, 174, 184, .08); border: 1px solid rgba(230, 174, 184, .18); }
.af-bh__xh { margin: 0; font-size: 13px; color: #E6AEB8; font-weight: 700; }
.af-bh__extra ul { list-style: none; margin: 6px 0 0; padding: 0; }
.af-bh__extra li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(243, 239, 232, .06); font-size: 14px; }
.af-bh__extra li:first-child { border-top: 0; }
.af-bh__extra li span:first-child { display: grid; }
.af-bh__extra small { font-size: 12px; color: #8F8996; }
.af-bh__xk { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #C9C4BD; }
.af-bh__xdel { width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(243, 239, 232, .06); color: #A8A2AE; cursor: pointer; }
.af-bh__add { width: 100%; margin-top: 10px; height: 44px; border-radius: 14px; border: 1px dashed rgba(230, 174, 184, .45); background: transparent; color: #E6AEB8; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.af-bh__cancel { justify-self: start; border: 0; background: none; color: #EBD58A; font: inherit; font-weight: 600; cursor: pointer; }
.af-bh__sheet input { width: 100%; box-sizing: border-box; min-height: 46px; padding: 10px 12px; border: 1px solid rgba(243, 239, 232, .14); border-radius: 12px; background: #141315; color: #F3EFE8; font: inherit; font-size: 16px; }
.af-beta-jtabs { margin-bottom: 12px; }
.af-beta-toggle { margin-bottom: 12px; }
.af-beta-toggle__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; }
.af-beta-toggle__row span { display: grid; gap: 3px; }
.af-beta-toggle__row small { color: var(--af-muted); font-size: 13px; line-height: 1.4; }
.af-beta-toggle .af-switch-input { flex: none; width: 50px; height: 30px; accent-color: #D2B04C; }
/* Plan in the middle of the bottom bar: raised, gold */
.af-beta .af-appnav a.af-nav-plan { position: relative; color: #EBD58A; font-weight: 700; }
.af-beta .af-appnav a.af-nav-plan svg { box-sizing: content-box; width: 26px; height: 26px; padding: 16px; margin-top: -30px; border-radius: 50%; background: linear-gradient(135deg, #F0DA92, #D2B04C); color: #1A1814; box-shadow: 0 0 0 6px #16151A, 0 8px 22px rgba(210, 176, 76, .35); }
.af-bh__arcbox { aspect-ratio: 449 / 290; }
/* The same colours and symbols in the meal card as on the arc: ✓ all · ½ partly · ✕ something else · ○ not yet */
.af-bh .af-pj__st b { display: none; }
.af-bh .af-pj__st { display: inline-grid; place-items: center; background: rgba(243, 239, 232, .08); color: #A8A2AE; }
.af-bh .af-pj__st::after { font-weight: 800; font-size: 14px; line-height: 1; }
.af-bh .af-pj__st--none::after { content: "○"; }
.af-bh .af-pj__st--all { background: #6FBF73; color: #16151A; } .af-bh .af-pj__st--all::after { content: "✓"; }
.af-bh .af-pj__st--part { background: #5B9BD5; color: #16151A; } .af-bh .af-pj__st--part::after { content: "½"; }
.af-bh .af-pj__st--other { background: #D46A6A; color: #16151A; } .af-bh .af-pj__st--other::after { content: "✕"; }
/* Journal (beta): the arc of the chosen day */
.af-bj { margin: 0 0 12px; }
.af-bj__in { top: 40%; }
/* Progress (beta) */
.af-bp__months { display: flex; gap: 18px; margin: 2px 4px 14px; font-size: 15px; }
.af-bp__months a { color: #8F8996; text-decoration: none; padding-bottom: 4px; }
.af-bp__months a.is-on { color: #F3EFE8; font-weight: 700; border-bottom: 2px solid #EBD58A; }
.af-bp__big { margin: 0 4px; font-family: var(--wp--preset--font-family--caslon, Georgia, serif); font-size: 44px; line-height: 1.1; color: #EBD58A; }
.af-bp__sub { margin: 4px 4px 0; font-size: 13px; color: #A8A2AE; }
.af-bp__chart { display: block; width: 100%; height: auto; margin-top: 14px; font-family: inherit; }
.af-bp__scrub { margin-top: 10px; padding: 14px 16px; border-radius: 22px; background: rgba(38, 36, 44, .72); border: 1px solid rgba(243, 239, 232, .08); }
.af-bp__scrub input { width: 100%; accent-color: #EBD58A; min-height: 32px; }
.af-bp__lbl { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 12px; color: #A8A2AE; }
.af-bp__day { color: #EBD58A; font-weight: 600; text-align: center; }
.af-bp__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.af-bp__tiles div { display: grid; gap: 6px; padding: 14px 12px; border-radius: 20px; background: rgba(38, 36, 44, .72); border: 1px solid rgba(243, 239, 232, .08); font-size: 11.5px; color: #A8A2AE; }
.af-bp__tiles b { font-family: var(--wp--preset--font-family--caslon, Georgia, serif); font-weight: 400; font-size: 22px; color: #F3EFE8; }
.af-bp__more { margin-top: 14px; }
/* Plan (beta) */
.af-bpl { display: grid; gap: 12px; }
.af-bpl__from { margin: 0 4px; font-size: 12.5px; color: #A8A2AE; }
.af-bpl__note { border-radius: 18px; padding: 12px 14px; background: rgba(38, 36, 44, .72); border: 1px solid rgba(243, 239, 232, .08); }
.af-bpl__note summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.af-bpl__note p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: #D8D3CC; }
.af-bpl__days { display: flex; justify-content: space-between; gap: 4px; }
.af-bpl__days a { flex: 1; display: grid; justify-items: center; gap: 2px; padding: 8px 0; border-radius: 16px; text-decoration: none; color: #A8A2AE; font-size: 11.5px; }
.af-bpl__days a b { font-size: 15px; color: #C9C4BD; }
.af-bpl__days a.is-today b { color: #EBD58A; }
.af-bpl__days a.is-on { background: rgba(243, 239, 232, .08); outline: 1px solid rgba(235, 213, 138, .45); color: #F3EFE8; }
.af-bpl__dayhead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 4px 4px 0; }
.af-bpl__dname { margin: 0; font-family: var(--wp--preset--font-family--caslon, Georgia, serif); font-size: 22px; }
.af-bpl__dtot { margin: 0; font-size: 13px; color: #EBD58A; font-weight: 600; white-space: nowrap; }
.af-bpl__snote { margin: 0 4px; font-size: 13px; color: #C9C4BD; }
.af-bpl__meal { border-radius: 20px; background: rgba(38, 36, 44, .72); border: 1px solid rgba(243, 239, 232, .08); }
.af-bpl__meal > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; }
.af-bpl__meal > summary::-webkit-details-marker { display: none; }
.af-bpl__time { flex: none; width: 46px; font-size: 12.5px; color: #EBD58A; font-weight: 700; }
.af-bpl__mname { flex: 1; display: grid; }
.af-bpl__mname strong { font-size: 16px; }
.af-bpl__mname small { font-size: 12.5px; color: #A8A2AE; }
.af-bpl__chev { color: #8F8996; font-size: 20px; transition: transform .2s; }
.af-bpl__meal[open] .af-bpl__chev { transform: rotate(90deg); }
.af-bpl__meal ul { list-style: none; margin: 0; padding: 0 14px 8px 72px; }
.af-bpl__meal li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(243, 239, 232, .06); }
.af-bpl__iname { display: grid; font-size: 14.5px; }
.af-bpl__iname small { font-size: 12px; color: #A8A2AE; }
.af-bpl__meal .af-pv__recipe { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(235, 213, 138, .12); text-decoration: none; }
.af-bpl__mnote { margin: 0; padding: 0 14px 12px 72px; font-size: 13px; color: #C9C4BD; }
@media (prefers-reduced-motion: reduce) { .af-bpl__chev { transition: none; } }
.af-bpl__note { padding: 0 14px; }
.af-bpl__note > summary { display: flex; align-items: center; gap: 6px; min-height: 46px; }
.af-bpl__note[open] { padding-bottom: 12px; }
.af-bpl__note p { margin-top: 2px; }

/* Activity (notification history) */
.af-feed-bell { cursor: pointer; padding: 0; font: inherit; }
.af-feed-wrap { margin-left: auto; margin-right: 10px; display: flex; align-items: center; }
.af-feed-wrap .af-bh__ib { position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(243, 239, 232, .07); border: 1px solid rgba(243, 239, 232, .08); color: #F3EFE8; }
.af-feed-wrap .af-bh__badge, .af-bh__icons .af-bh__badge { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #E6AEB8; color: #2C2B2D; font-size: 11.5px; font-weight: 800; display: grid; place-items: center; border: 2px solid #16151A; }
.af-feed__grp { margin: 10px 4px 6px; font-size: 12.5px; font-weight: 700; color: #8F8996; }
.af-feed__list { list-style: none; margin: 0; padding: 0; }
.af-feed__list a { position: relative; display: grid; gap: 2px; padding: 11px 26px 11px 4px; border-top: 1px solid rgba(243, 239, 232, .06); color: inherit; text-decoration: none; }
.af-feed__list li:first-child a { border-top: 0; }
.af-feed__t { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.af-feed__b { font-size: 13.5px; color: #C9C4BD; line-height: 1.35; }
.af-feed__w { font-size: 12px; color: #8F8996; }
.af-feed__list a.is-new::after { content: ""; position: absolute; right: 6px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: #E6AEB8; }
.af-feed__empty { margin: 12px 4px; }
/* Food panel (beta): write it short / calculate */
.af-bh__food .af-sheet__body { display: grid; gap: 12px; }
.af-bh__fmode { grid-template-columns: 1fr 1fr; }
.af-bh__fmode button { border: 0; background: transparent; color: var(--af-muted); font: inherit; font-weight: 600; font-size: 14px; padding: 9px 8px; border-radius: 9px; cursor: pointer; }
.af-bh__fmode button.is-active { background: #3A393D; color: #F3EFE8; }
.af-bh__fshort, .af-bh__fcalc { display: grid; gap: 10px; }
.af-bh__fshort[hidden], .af-bh__fcalc[hidden] { display: none; }
.af-bh__fq, .af-bh__fname { width: 100%; box-sizing: border-box; min-height: 46px; padding: 10px 12px; border: 1px solid rgba(243, 239, 232, .14); border-radius: 12px; background: #141315; color: #F3EFE8; font: inherit; font-size: 16px; }
.af-bh__fh { margin: 4px 2px 0; font-size: 12.5px; font-weight: 700; color: #8F8996; }
.af-bh__fchips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.af-bh__fchips button { flex: none; min-height: 36px; padding: 0 14px; border: 1px solid rgba(243, 239, 232, .16); border-radius: 999px; background: transparent; color: #F3EFE8; font: inherit; font-size: 13.5px; white-space: nowrap; cursor: pointer; }
.af-bh__fres, .af-bh__fsel { list-style: none; margin: 0; padding: 0; }
.af-bh__fres button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 48px; padding: 8px 4px; border: 0; border-top: 1px solid rgba(243, 239, 232, .06); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.af-bh__fres button span { display: grid; font-size: 14.5px; }
.af-bh__fres small { font-size: 12px; color: #8F8996; }
.af-bh__fres b { flex: none; font-size: 12px; color: #EBD58A; font-weight: 600; }
.af-bh__fsel li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(243, 239, 232, .06); }
.af-bh__fn { flex: 1; display: grid; font-size: 14.5px; }
.af-bh__fn small { font-size: 12px; color: #A8A2AE; }
.af-bh__fg { display: flex; align-items: center; gap: 4px; color: #A8A2AE; font-size: 13px; }
.af-bh__fg input { width: 74px; min-height: 40px; padding: 6px 8px; border: 1px solid rgba(243, 239, 232, .14); border-radius: 10px; background: #141315; color: #F3EFE8; font: inherit; font-size: 16px; text-align: right; }
.af-bh__fdel { width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(243, 239, 232, .06); color: #A8A2AE; cursor: pointer; }
.af-bh__fempty { color: #8F8996; font-size: 13.5px; padding: 8px 2px; }
.af-bh__ftot { margin: 0 2px; font-size: 14px; font-weight: 700; color: #EBD58A; }
.af-bh__fsave { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.af-bh__fsave input { width: 20px; height: 20px; accent-color: #D2B04C; }

/* 6.23 — header (beta): logo, calculator + bell, gear, round back button */
.af-bh__brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.af-bh__logo { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(243, 239, 232, .05); border: 1px solid rgba(235, 213, 138, .25); }
.af-bh__logo img { width: 38px; height: 38px; object-fit: contain; }
.af-beta .af-account__top .af-bh__icons { display: flex; gap: 10px; margin-left: auto; }
.af-beta .af-account__top .af-bh__ib, .af-beta .af-appbar .af-bh__ib { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(243, 239, 232, .07); border: 1px solid rgba(243, 239, 232, .08); color: #F3EFE8; }
.af-beta .af-appbar .af-bh__icons { display: flex; gap: 8px; }
.af-beta .af-appbar .af-bh__ib { width: 38px; height: 38px; }
.af-backbtn { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: 10px; border-radius: 50%; background: #1E1D21; border: 1px solid rgba(243, 239, 232, .14); color: #F3EFE8; text-decoration: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); vertical-align: middle; }
.af-backbtn:active { background: #2A292E; }
.af-backbtn svg { width: 22px; height: 22px; }
.af-beta .af-account__heading { display: flex; align-items: center; flex-wrap: wrap; }
.af-beta .af-account__heading .af-account__date { flex-basis: 100%; }
.af-beta .af-appbar .af-backbtn { width: 38px; height: 38px; margin: 0; }
.af-beta .af-back { display: none; }
.af-bset__lang { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.af-bset__langs { display: flex; gap: 6px; }
.af-bset__langs a { min-width: 44px; min-height: 36px; display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(243, 239, 232, .16); color: #F3EFE8; text-decoration: none; font-weight: 600; font-size: 14px; }
.af-bset__langs a.is-on { background: rgba(210, 176, 76, .18); border-color: #D2B04C; color: #EBD58A; }

/* 6.24 — logo left of the calculator; back button on the title's row; Journal tabs; weight card; instant nav */
.af-bh__icons .af-bh__logo { width: 44px; height: 44px; }
.af-beta .af-appbar .af-bh__logo { width: 38px; height: 38px; }
.af-beta .af-appbar .af-bh__logo img { width: 32px; height: 32px; }
.af-beta .af-account__heading:has(> .af-backbtn) { position: relative; padding: 0 54px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.af-beta .af-account__heading > .af-backbtn { position: absolute; left: 0; top: 50%; transform: translateY(-50%); margin: 0; }
.af-beta .af-appbar > span:first-child { display: flex; align-items: center; }
.af-beta-jtabs { grid-template-columns: 1fr 1fr !important; }
.af-bw { display: grid; gap: 6px; margin-bottom: 14px; }
.af-bw__lbl { margin: 0; font-size: 12.5px; font-weight: 700; color: #A8A2AE; }
.af-bw__kg { margin: 0; font-family: var(--wp--preset--font-family--caslon, Georgia, serif); font-size: 40px; line-height: 1.1; color: #F3EFE8; }
.af-bw__kg span { font-size: 18px; color: #A8A2AE; }
.af-bw__meta { margin: 0; font-size: 13px; color: #A8A2AE; }
.af-bw__bar { position: relative; height: 10px; margin: 14px 2px 4px; border-radius: 999px; background: rgba(243, 239, 232, .1); }
.af-bw__zone { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: rgba(111, 191, 115, .45); }
.af-bw__you { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #F6E6AE; border: 3px solid #16151A; box-shadow: 0 0 0 2px #EBD58A; }
.af-bw__target { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: #EBD58A; border-radius: 2px; }
.af-bw__leg { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 0; font-size: 12px; color: #A8A2AE; }
.af-bw__leg span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.af-bw__leg .z::before { background: rgba(111, 191, 115, .6); } .af-bw__leg .t::before { width: 3px; background: #EBD58A; }
.af-bw__hint { margin: 2px 0 0; font-size: 11.5px; }
.af-appnav a, .af-tabs a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* 6.25 — new interface polish */
/* Back: just the white arrow. */
.af-backbtn { width: 36px; height: 44px; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0; color: #F3EFE8; justify-content: start; }
.af-backbtn svg { width: 26px; height: 26px; stroke-width: 2.2; }
/* Home: smaller greeting, and a header that stays on top when scrolling. */
.af-bh__hi { font-size: 23px; }
/* The bar on top: a long title moves left instead of running under the icons. */
.af-beta .af-appbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.af-beta .af-appbar__title { text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.af-beta .af-appbar.is-left .af-appbar__title { text-align: left; }
/* My account: the state of each section, the subscription's state. */
.af-secst, .af-subst { flex: none; margin-left: auto; margin-right: 6px; }
/* 6.181 (the audit): the subscription's state may shrink and wrap, so "Abonament" keeps its room on phones. */
.af-subst { flex: 0 1 auto; min-width: 0; max-width: 52%; white-space: normal; text-align: center; line-height: 1.25; border-radius: 12px !important; }
.af-row:has(.af-subst) .af-row__text { min-width: 6.5em; }
.af-secst { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #16151A; }
.af-secst--ok { background: #6FBF73; } .af-secst--part { background: #E8C35A; } .af-secst--none { background: #D46A6A; }
.af-subst { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.af-subst--on { background: rgba(111, 191, 115, .18); color: #8FD493; }
.af-subst--free { background: rgba(230, 174, 184, .16); color: #E6AEB8; }
.af-subst--off { background: rgba(212, 106, 106, .16); color: #E59090; }
/* Progress: the story card, small; no Progress/Photos/Badges/Review bar in the new interface. */
.af-bp__story .af-week-card { padding: 12px 14px; }
.af-bp__story .af-week-card__tiles, .af-bp__story .af-week-card p:not(.af-week-card__title) { display: none; }
.af-bp__story .af-week-card__share { width: auto; min-height: 40px; padding: 0 16px; font-size: 14px; margin: 6px 0 0; }
.af-bp__story { margin-top: 12px; }
.af-bp__charts { margin-top: 0; }
.af-beta .af-psegs { display: none; }
.af-bh__todo { margin-top: 12px; }
.af-bh h1.af-bh__hi { font-size: 23px !important; line-height: 1.15; } 
/* The bottom bar above the page, so nothing covers the Plan circle. */
.af-beta .af-appnav { z-index: 70; overflow: visible; }
.af-beta .af-appnav a.af-nav-plan { position: relative; z-index: 2; }


/* 6.26.1 — no frosted glass on the bars: on iPhone (WebKit) backdrop-filter clips what sticks out of the bar
   (the top of the Plan circle) and re-blurs the Plan glow while a page loads. A solid background instead. */
.af-appnav { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: #141315 !important; }

/* 6.26.4 — back to the old view's behaviour: titles, top bar, transitions. Look only. */
.af-bh h1.af-bh__hi { font-size: 23px !important; line-height: 1.15; }
.af-backbtn { margin-right: 6px; }
/* Journal: the day's arc, smaller */
.af-bj .af-bh__arcbox { max-width: 330px; margin: 0 auto; }
.af-bj .af-bh__name { font-size: 26px; }
.af-bj .af-bh__arcbox { max-width: 300px !important; margin: 0 auto !important; }

/* 6.27 — long titles fit; the whole week; "Did you know?" on Home */
/* Pages with the back arrow: arrow, title and icons on one row, the title in the middle of the arrow's height. */
.af-beta .af-account__heading:has(> .af-backbtn) { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; }
.af-beta .af-account__heading:has(> .af-backbtn) .af-account__hello { min-width: 0; max-width: 100%; }
/* A title too long to stay centred: it starts right after the arrow (the space kept on the right for centring is used). */
.af-beta .af-account__heading.af-fit-left:has(> .af-backbtn) { justify-content: flex-start; padding-right: 0; padding-left: 44px; }
/* Still too long: the small logo steps aside on that page, so the title has the room. */
.af-beta .af-account__top.af-fit-nologo > .af-bh__icons .af-bh__logo { display: none; }
.af-bpl__weekbtn { text-decoration: none; }
.af-bh__factslot:empty { display: none; }
.af-bh__factslot .af-fact { margin: 12px 0 0; }
/* Main pages (Jurnal, Plan, Progres…): the big title on the left, like "Bună, Ana" on Home. */
.af-beta .af-account__heading:not(:has(> .af-backbtn)) { align-items: flex-start; }
/* "Did you know?" in the new interface: small and compact, 👍 / 👎 on the right */
.af-fact.af-fact--compact { grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 8px 10px 12px; border-radius: 18px; }
.af-fact--compact .af-fact__icon { width: 30px; height: 30px; border-radius: 9px; font-size: 16px; align-self: start; margin-top: 2px; }
.af-fact--compact .af-fact__eyebrow { margin: 0 0 1px; font-size: 10px; letter-spacing: .06em; }
.af-fact--compact .af-fact__text { font-size: 13.5px; line-height: 1.38; }
.af-fact__vote { display: flex; flex-direction: column; gap: 4px; }
.af-fact--compact .af-fact__like, .af-fact--compact .af-fact__dislike { min-width: 0; min-height: 0; width: 38px; height: 34px; margin: 0; padding: 0; display: grid; place-items: center; border: 0; border-radius: 12px; background: rgba(243, 239, 232, .06); color: rgba(243, 239, 232, .62); cursor: pointer; transition: background .15s ease, color .15s ease; }
.af-fact--compact .af-fact__like.is-on { background: rgba(210, 176, 76, .22); color: #EBD58A; }
.af-fact--compact .af-fact__dislike.is-on { background: rgba(212, 106, 106, .2); color: #E59090; }
.af-fact--compact .af-fact__like.is-on svg { fill: currentColor; fill-opacity: .25; }
/* Maria: "My panel" | "As a client", on top of both views */
.af-viewswitch { display: flex; width: max-content; max-width: 100%; margin: 0 auto 10px; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(243, 239, 232, .06); border: 1px solid rgba(235, 213, 138, .22); }
.af-viewswitch a { padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #A8A2AE; text-decoration: none; white-space: nowrap; touch-action: manipulation; }
.af-viewswitch a.is-on { background: linear-gradient(135deg, #EBD58A, #D2B04C); color: #16151A; }

/* 6.28 — Maria's new interface (beta) */
.af-cbarc { position: relative; max-width: 360px; margin: 4px auto 0; }
.af-cbarc__svg { display: block; width: 100%; height: auto; }
.af-cbarc__in { position: absolute; left: 0; right: 0; top: 34%; text-align: center; }
.af-cbarc__now { margin: 0; font-size: 13px; font-weight: 700; color: #EBD58A; }
.af-cbarc__big { margin: 2px 0 0; font-family: var(--wp--preset--font-family--caslon, Georgia, serif); font-size: 40px; line-height: 1.1; color: #F3EFE8; }
.af-cbarc__sub { margin: 0; font-size: 13.5px; color: #A8A2AE; }
.af-cbarc__leg { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 14px; margin: 2px 0 0; font-size: 12px; color: #A8A2AE; }
.af-cbarc__leg span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: rgba(243, 239, 232, .3); }
.af-cbarc__leg .g::before { background: #6FBF73; } .af-cbarc__leg .b::before { background: #5B9BD5; }
.af-cbtiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.af-cbtile { display: block; padding: 12px 14px; border-radius: 18px; background: #1F1E23; text-decoration: none; color: #F3EFE8; }
.af-cbtile b { display: block; font-size: 24px; line-height: 1.15; color: #C9C4BD; }
.af-cbtile.is-hot b { color: #EBD58A; }
.af-cbtile span { display: block; font-size: 12.5px; color: #A8A2AE; line-height: 1.3; }
.af-cbdots { flex: none; display: inline-flex; gap: 4px; margin-left: auto; margin-right: 6px; }
.af-cbdots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(243, 239, 232, .16); }
.af-cbdots i.g { background: #6FBF73; } .af-cbdots i.b { background: #5B9BD5; } .af-cbdots i.r { background: #D46A6A; }
.af-cbqa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.af-cbqa a { display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border-radius: 16px; background: #1F1E23; color: #F3EFE8; text-decoration: none; font-size: 12.5px; font-weight: 700; text-align: center; }
.af-cbqa a span { font-size: 18px; }
.af-coach-beta .af-cj__today .af-section-label { display: none; }
.af-coach-beta .af-appnav.af-coachnav a.af-nav-plan { position: relative; z-index: 2; }
/* Maria's Home keeps the usual header (date, greeting, logo and bell); the clients' Home draws its own. */
.af-coach-beta.af-tab--home .af-account__top { display: flex; }
.af-coach-beta .af-account__date { margin: 0; font-family: var(--wp--preset--font-family--caslon, Georgia, serif); font-size: 15px; letter-spacing: 0; text-transform: none; color: #EBD58A; }
.af-coach-beta.af-tab--home .af-account .af-account__hello, .af-coach-beta.af-tab--home .af-account__hello { font-size: 23px !important; }
.af-coach-beta [id^="af-cb-"] { scroll-margin-top: 84px; }

/* 6.29 — the group: who is active */
.af-wa__sub.is-active { display: inline-flex; align-items: center; gap: 6px; color: #8FD493; }
.af-gpres__dot { width: 8px; height: 8px; border-radius: 50%; background: #6FBF73; box-shadow: 0 0 0 2px rgba(111, 191, 115, .25); }
.af-gpres { display: flex; align-items: center; gap: 10px; padding: 5px 14px; background: #18171C; border-bottom: 1px solid rgba(255, 255, 255, .06); overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.af-gpres::-webkit-scrollbar { display: none; }
.af-gpres[hidden] { display: none; }
.af-gpres__lbl { flex: none; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8F8996; }
.af-gpres__p { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #C9C4BD; }
.af-gpres__av { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #2C2B2D; }
.af-gpres__av--big { width: 38px; height: 38px; font-size: 15px; }
.af-gpres__av.is-on::after, .af-gm__av.is-on::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%; background: #6FBF73; border: 2px solid #16151A; }
.af-gpres__av--big.is-on::after { width: 12px; height: 12px; border-width: 2.5px; }
.af-gm__av { position: relative; }
.af-gm__av.is-on::after { width: 11px; height: 11px; }
.af-gpres-list { margin-bottom: 10px; }
.af-gpres__row { gap: 12px; }
.af-gpres__row .af-row__text span { font-size: 12.5px; color: #A8A2AE; }
.af-gpres__row .af-row__text span.is-on { color: #8FD493; }
.af-gpres-tog { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 12px 14px; border-radius: 16px; background: #26252B; color: #F3EFE8; font-size: 14px; font-weight: 600; cursor: pointer; }
.af-gpres-tog small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: #A8A2AE; }

/* 6.31 — a client's activity log (Maria) */
.af-act { padding: 4px 16px; }
.af-act__row { display: grid; grid-template-columns: 44px 22px minmax(0, 1fr); align-items: baseline; gap: 6px; padding: 9px 0; border-bottom: 1px solid rgba(243, 239, 232, .07); font-size: 14px; }
.af-act__row:last-child { border-bottom: 0; }
.af-act__row time { font-variant-numeric: tabular-nums; font-size: 12.5px; color: #A8A2AE; }
.af-act__text { color: #F3EFE8; line-height: 1.35; }
.af-act__filter { margin: 4px 0 8px; }
.af-act__filter a { text-decoration: none; }
.af-act__csv { margin-top: 14px; }

/* 6.32 — Progress (new interface): "Weight" with her target and "Reference weight", wide */
.af-bp__wtiles { display: grid; gap: 12px; margin: 0 0 14px; }
.af-tile--wide { position: relative; }
.af-bp__wnow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.af-bp__wcol { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.af-bp__wtarget { padding-left: 14px; border-left: 1px solid rgba(243, 239, 232, .1); }
.af-bp__wleft { color: #EBD58A !important; font-weight: 600; }
.af-bp__wset { color: #EBD58A !important; text-decoration: none; font-weight: 600; }
.af-range.af-tile--wide { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-items: end; }
.af-range.af-tile--wide > .af-tile__label { grid-column: 1 / -1; }
.af-range.af-tile--wide > .af-tile__value { grid-column: 1; white-space: nowrap; }
.af-range.af-tile--wide > .af-tile__sub { grid-column: 2; align-self: center; margin: 0; }
.af-range.af-tile--wide > .af-range__bar, .af-range.af-tile--wide > .af-range__status, .af-range.af-tile--wide > .af-range__note, .af-range.af-tile--wide > .af-range__cta { grid-column: 1 / -1; }
.af-range.af-tile--wide > .af-range__cta { justify-self: start; }

/* 6.33 — Progress (new interface): Week | Month */
.af-pw { margin: 0 0 14px; }
.af-pw__seg { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 14px; background: rgba(243, 239, 232, .06); margin-bottom: 12px; }
.af-pw__seg a { text-align: center; padding: 8px 0; border-radius: 11px; font-size: 14px; font-weight: 700; color: #A8A2AE; text-decoration: none; touch-action: manipulation; }
.af-pw__seg a.is-on { background: #2A292F; color: #F3EFE8; }
.af-pw__card { padding: 14px 16px; }
.af-pw__nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.af-pw__nav b { font-size: 15px; color: #F3EFE8; text-align: center; }
.af-pw__arr { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(243, 239, 232, .06); color: #EBD58A; font-size: 20px; line-height: 1; text-decoration: none; }
.af-pw__arr.is-off { opacity: .25; }
.af-pw__big { display: flex; align-items: center; gap: 12px; margin: 6px 0 0; }
.af-pw__big b { flex: none; font-family: var(--wp--preset--font-family--caslon, Georgia, serif); font-size: 38px; font-weight: 400; line-height: 1; color: #F3EFE8; }
.af-pw__big span { font-size: 13px; color: #A8A2AE; line-height: 1.35; }
.af-pw .g { color: #8FD493 !important; } .af-pw .a { color: #E8C35A !important; }
.af-pw__note { margin: 6px 0 4px; font-size: 12.5px; color: #A8A2AE; }
.af-pw__empty { margin: 8px 0; }
.af-pw__svg { display: block; width: 100%; height: 52px; margin: 6px 0 4px; }
.af-pw__days { margin-top: 4px; }
.af-pw__day { display: grid; grid-template-columns: 42px minmax(0, 1fr) 64px 26px; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid rgba(243, 239, 232, .07); color: inherit; text-decoration: none; }
.af-pw__day.is-today { background: linear-gradient(90deg, rgba(210, 176, 76, .09), transparent); margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.af-pw__day.is-future { pointer-events: none; opacity: .45; }
.af-pw__d { font-size: 12px; color: #A8A2AE; line-height: 1.15; }
.af-pw__d b { display: block; font-size: 15px; color: #F3EFE8; }
.af-pw__w { font-size: 15px; font-weight: 700; color: #F3EFE8; font-variant-numeric: tabular-nums; }
.af-pw__w.is-none { font-weight: 400; font-size: 13.5px; color: #6E6975; }
.af-pw__dl { font-size: 12.5px; color: #8F8996; text-align: right; font-variant-numeric: tabular-nums; }
.af-pw__p { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #16151A; }
.af-pw__p--all { background: #6FBF73; } .af-pw__p--part { background: #5B9BD5; } .af-pw__p--no { background: #D46A6A; } .af-pw__p--na { background: rgba(243, 239, 232, .08); color: #8F8996; }
.af-pw__sum { display: grid; gap: 12px; margin-top: 12px; padding: 14px 16px; }
.af-pw__m { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; font-size: 14px; color: #F3EFE8; }
.af-pw__m small { font-size: 12.5px; color: #A8A2AE; text-align: right; }
.af-pw__m em { grid-column: 1 / -1; font-style: normal; font-size: 12px; color: #8F8996; }
.af-pw__bar { grid-column: 1 / -1; height: 7px; border-radius: 999px; background: rgba(243, 239, 232, .1); overflow: hidden; }
.af-pw__bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #D2B04C, #EBD58A); }
.af-pw__share { margin-top: 2px; }
.af-pw__wk { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(243, 239, 232, .07); color: inherit; text-decoration: none; }
.af-pw__wk.is-cur { background: linear-gradient(90deg, rgba(210, 176, 76, .09), transparent); margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.af-pw__wn { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: rgba(210, 176, 76, .14); color: #EBD58A; font-weight: 800; font-size: 13px; }
.af-pw__wt strong { display: block; font-size: 14.5px; color: #F3EFE8; }
.af-pw__wt small { font-size: 12.5px; color: #A8A2AE; }
.af-pw__wd { text-align: right; font-weight: 800; font-size: 15px; color: #C9C4BD; font-variant-numeric: tabular-nums; }
.af-pw__wd small { display: block; font-size: 11px; font-weight: 500; color: #8F8996; }
.af-pw__hint { margin-top: 10px; }
.af-pw__tform { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.af-pw__tform label { display: grid; gap: 4px; font-size: 13px; color: #A8A2AE; flex: 1 1 110px; }
.af-pw__tform .af-hint { flex-basis: 100%; margin: 0; }

/* 6.34: try the new look, the profile one step at a time, Progress with the long charts folded */
.af-betanudge { position: relative; display: grid; gap: 8px; background: linear-gradient(160deg, #2A2416 0%, #1F1E21 70%); border: 1px solid rgba(235, 213, 138, .25); }
.af-betanudge__icon { margin: 0; font-size: 26px; line-height: 1; }
.af-betanudge__title { margin: 0; font-size: 17px; font-weight: 800; padding-right: 30px; }
.af-betanudge__text { margin: 0 0 4px; color: #C9C4BD; font-size: 14px; line-height: 1.45; }
.af-betanudge form { margin: 0; }
.af-betanudge__close { position: absolute; top: 10px; right: 10px; }
.af-betanudge__x { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: rgba(243, 239, 232, .08); color: #C9C4BD; font-size: 20px; line-height: 30px; cursor: pointer; }
.af-pcard__next { display: grid; gap: 2px; margin: 2px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(235, 213, 138, .08); }
.af-pcard__next small { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #EBD58A; }
.af-pcard__next strong { font-size: 15px; }
.af-pcard__all summary { cursor: pointer; font-size: 13px; color: var(--af-muted, #A8A29B); text-align: center; list-style: none; padding: 4px 0; }
.af-pcard__all summary::-webkit-details-marker { display: none; }
.af-pcard__all summary::after { content: ' ▾'; }
.af-pcard__all[open] summary::after { content: ' ▴'; }
.af-pcard__all .af-pcard__list { margin-top: 6px; }
.af-bp__all { margin-top: 4px; }
.af-bp__allbtn { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 16px 18px; border-radius: 20px; background: #1F1E21; cursor: pointer; list-style: none; }
.af-bp__allbtn::-webkit-details-marker { display: none; }
.af-bp__allbtn > span:first-child { grid-row: span 2; font-size: 22px; }
.af-bp__allbtn > span:nth-child(2) { font-weight: 700; }
.af-bp__allbtn > span:nth-child(2)::after { content: ' ▾'; color: var(--af-muted, #A8A29B); }
.af-bp__all[open] .af-bp__allbtn > span:nth-child(2)::after { content: ' ▴'; }
.af-bp__allbtn small { color: var(--af-muted, #A8A29B); font-size: 13px; }
.af-bp__all[open] .af-bp__allbtn { margin-bottom: 8px; }

/* 6.36: Maria's new panel — Messages and Content */
.af-cbm { display: grid; gap: 10px; }
.af-cbm__bar { display: flex; gap: 10px; align-items: center; }
.af-cbm__search { flex: 1; display: flex; align-items: center; gap: 8px; background: #1F1E21; border-radius: 14px; padding: 0 14px; min-height: 46px; }
.af-cbm__search input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; color: #F3EFE8; font-size: 15px; padding: 10px 0 !important; box-shadow: none !important; outline: none; }
.af-cbm__new { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #EBD58A, #D2B04C); color: #16151A !important; }
.af-cbm__chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.af-cbm__chips::-webkit-scrollbar { display: none; }
.af-cbm__chips button { flex: none; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(243, 239, 232, .1); background: #1F1E21; color: var(--af-muted, #A8A29B); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.af-cbm__chips button b { color: #F3EFE8; margin-left: 2px; }
.af-cbm__chips button.is-on { background: rgba(235, 213, 138, .16); border-color: rgba(235, 213, 138, .45); color: #EBD58A; }
.af-cbm__chips button.is-on b { color: #EBD58A; }
.af-cbm .af-wa__avwrap { position: relative; }
.af-cbm__on { position: absolute; right: 0; bottom: 0; width: 13px; height: 13px; border-radius: 50%; background: #6FBF73; border: 2px solid #1F1E21; }
.af-cbm .af-inbox__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.af-cbm__wait { font-size: 11.5px; font-weight: 700; color: #E6AEB8; background: rgba(230, 174, 184, .12); padding: 2px 7px; border-radius: 7px; white-space: nowrap; }
.af-cbm__gact { font-size: 12.5px; color: #6FBF73; }
.af-cbm__row.is-unread strong { color: #fff; }
.af-cbm__none { margin: 6px; color: var(--af-muted, #A8A29B); text-align: center; }
.af-cbm__silent > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; padding: 12px 6px; color: var(--af-muted, #A8A29B); font-size: 14px; }
.af-cbm__silent > summary::-webkit-details-marker { display: none; }
.af-cbm__silent > summary::after { content: '›'; transition: transform .15s; }
.af-cbm__silent[open] > summary::after { transform: rotate(90deg); }
.af-cbm [hidden] { display: none !important; }
/* A conversation: her day and shortcuts, under the header */
.af-cbm__dm { padding: 8px 12px 6px; border-bottom: 1px solid rgba(243, 239, 232, .06); background: #1A191D; display: grid; gap: 8px; }
.af-cbm__today { display: flex; gap: 16px; align-items: center; background: #232227; border-radius: 14px; padding: 8px 12px; color: var(--af-muted, #A8A29B) !important; text-decoration: none; font-size: 12px; }
.af-cbm__today b { display: block; color: #F3EFE8; font-size: 14.5px; }
.af-cbm__today em { margin-left: auto; font-style: normal; color: #EBD58A; font-weight: 700; font-size: 13px; white-space: nowrap; }
.af-cbm__nothing { font-size: 13px; }
.af-cbm__quick { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.af-cbm__quick::-webkit-scrollbar { display: none; }
.af-cbm__quick a { flex: none; display: flex; gap: 5px; align-items: center; padding: 6px 11px; border-radius: 999px; background: #232227; color: #F3EFE8 !important; text-decoration: none; font-size: 13px; font-weight: 600; }
/* Content: To do and tiles */
.af-cbc { display: grid; gap: 10px; }
.af-cbc .af-section-label { margin-bottom: -4px; }
.af-cbc__todo { display: grid; padding: 4px 16px !important; }
.af-cbc__todo a { display: flex; align-items: center; gap: 10px; padding: 12px 0; color: #F3EFE8 !important; text-decoration: none; font-size: 15px; }
.af-cbc__todo a + a { border-top: 1px solid rgba(243, 239, 232, .06); }
.af-cbc__todo a span:nth-child(2) { flex: 1; }
.af-cbc__todo b { color: #EBD58A; }
.af-cbc__done { margin: 0; color: var(--af-muted, #A8A29B); }
/* 6.88: three small tiles on a row, in groups. */
.af-cbc__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.af-cbc__tile { position: relative; box-sizing: border-box; display: grid; align-content: start; justify-items: center; gap: 2px; padding: 12px 8px 11px; border-radius: 16px; background: #1F1E21; color: #F3EFE8 !important; text-decoration: none; text-align: center; min-width: 0; }
.af-cbc__tile i { font-style: normal; font-size: 24px; line-height: 1.2; margin-bottom: 4px; }
.af-cbc__tile strong { font-size: 13px; line-height: 1.2; font-weight: 600; overflow-wrap: anywhere; }
.af-cbc__tile small { color: var(--af-muted, #A8A29B); font-size: 11.5px; line-height: 1.25; }
.af-cbc__tile em { position: absolute; top: 8px; right: 8px; font-style: normal; background: #E6AEB8; color: #2C2B2D; font-weight: 800; font-size: 11.5px; border-radius: 9px; padding: 2px 7px; }
.af-cbc__tile.is-hot { background: linear-gradient(160deg, #2A2416, #1F1E21); border: 1px solid rgba(235, 213, 138, .25); }
.af-cbc .af-cbc__tiles + .af-section-label { margin-top: 18px; }
@media (max-width: 340px) { .af-cbc__tile { padding: 10px 5px; } .af-cbc__tile strong { font-size: 12px; } .af-cbc__tile small { font-size: 11px; } .af-cbc__tile em { top: 5px; right: 5px; } }
@media (min-width: 700px) { .af-cbc__tile { padding: 16px 12px; } .af-cbc__tile strong { font-size: 14.5px; } .af-cbc__tile small { font-size: 12.5px; } }
.af-cbc__tile:active { transform: scale(.98); }
/* Content: Did you know? */
.af-cbf__seg { display: flex; gap: 6px; background: #1F1E21; border-radius: 14px; padding: 4px; overflow-x: auto; scrollbar-width: none; }
.af-cbf__seg a { flex: 1 0 auto; text-align: center; padding: 8px 10px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--af-muted, #A8A29B) !important; text-decoration: none; white-space: nowrap; }
.af-cbf__seg a.is-on { background: rgba(235, 213, 138, .16); color: #EBD58A !important; }
.af-cbf__list { display: grid; gap: 9px; }
.af-cbf__item { position: relative; background: #1F1E21; border-radius: 16px; border: 1px solid transparent; }
.af-cbf__item.is-bad { border-color: rgba(212, 106, 106, .45); }
.af-cbf__item.is-bad .af-cbf__dl { color: #E07B7B; font-weight: 700; }
.af-cbf__item.is-off .af-cbf__t { color: var(--af-muted, #A8A29B); }
.af-cbf__item > details > summary { list-style: none; cursor: pointer; display: flex; gap: 11px; align-items: flex-start; padding: 12px 70px 12px 14px; }
.af-cbf__item > details > summary::-webkit-details-marker { display: none; }
.af-cbf__item > details[open] > summary { border-bottom: 1px solid rgba(243, 239, 232, .06); }
.af-cbf__item > details > .af-cform { padding: 12px 14px 14px; }
.af-cbf__ic { flex: none; width: 36px; height: 36px; border-radius: 11px; background: #2A2A20; display: grid; place-items: center; }
.af-cbf__tx { display: grid; gap: 6px; min-width: 0; }
.af-cbf__t { font-size: 14.5px; line-height: 1.35; }
.af-cbf__st { display: flex; gap: 12px; font-size: 12.5px; color: var(--af-muted, #A8A29B); }
.af-cbf__ed { margin-left: auto; color: #EBD58A; }
.af-cbf__sw { position: absolute; top: 12px; right: 12px; margin: 0; }
.af-cbf__sw .af-switch-input { width: 46px; height: 28px; accent-color: #D2B04C; margin: 0; }
.af-content--one { display: grid; gap: 10px; }
.af-cbf__sw .af-switch-input { -webkit-appearance: none; appearance: none; position: relative; display: block; width: 46px; height: 28px; margin: 0; border-radius: 14px; background: #3A3940; cursor: pointer; transition: background .15s; }
.af-cbf__sw .af-switch-input::before { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #8F8996; transition: transform .15s, background .15s; }
.af-cbf__sw .af-switch-input:checked { background: #D2B04C; }
.af-cbf__sw .af-switch-input:checked::before { transform: translateX(18px); background: #16151A; }
.af-cbf__sw .af-switch-input:focus-visible { outline: 2px solid #EBD58A; outline-offset: 2px; }
.af-cbf .af-search { margin: 0; }

/* 6.37: notifications — swipe or × to remove one, "Clear all" */
.af-feed__tools { display: flex; justify-content: flex-end; margin: 2px 0 -4px; }
.af-feed__clear { border: 0; background: none; color: #EBD58A; font: inherit; font-size: 13.5px; font-weight: 700; padding: 6px 4px; cursor: pointer; }
.af-feed__list li { position: relative; overflow: hidden; transition: transform .2s ease, opacity .2s ease, height .22s ease; touch-action: pan-y; }
.af-feed__list li.is-swiping { transition: none; }
.af-feed__list li.is-gone { opacity: 0; }
.af-feed__list li a { padding-right: 44px; }
.af-feed__list a.is-new::after { right: 38px; }
.af-feed__x { position: absolute; top: 8px; right: 0; z-index: 2; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: rgba(243, 239, 232, .06); color: #8F8996; font-size: 18px; line-height: 32px; cursor: pointer; }
.af-feed__x:active { background: rgba(243, 239, 232, .14); }

/* 6.38: with the keyboard open, no empty band under the write box (the home-bar space is behind the keyboard) */
.af-wa.is-kb .af-wa__compose, .af-wa.is-kb .af-group__compose { padding-bottom: 6px !important; }
.af-wa.is-kb .af-wa__jump { bottom: 70px; }

/* 6.39: voice messages — white play button; while playing: gold on dark bubbles, grey on pink ones */
.af-wa__voice-msg { min-width: 210px; }
.af-wa__vplay { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; background: #F3EFE8 !important; color: #141315 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: background .15s, color .15s; }
.af-wa__vplay svg { display: block; }
.af-wa__vbar { height: 4px; background: rgba(243, 239, 232, .22); }
.af-wa__vfill { background: #EBD58A; border-radius: 999px; transition: width .2s linear; }
.af-wa__voice-msg.is-playing .af-wa__vplay { background: #D2B04C !important; color: #141315 !important; }
.af-wa__msg.is-mine .af-wa__vplay { background: #FFFFFF !important; }
.af-wa__msg.is-mine .af-wa__vbar { background: rgba(44, 43, 45, .18); }
.af-wa__msg.is-mine .af-wa__vfill { background: #5E5A60; }
.af-wa__msg.is-mine .af-wa__voice-msg.is-playing .af-wa__vplay { background: #5E5A60 !important; color: #FFFFFF !important; }

/* 6.41: the sky behind the arc of the day — follows the real sunrise and sunset; kept dark and soft */
.af-sky { position: absolute; inset: -6% 0 0; z-index: 0; pointer-events: none; opacity: .62; transition: background 1.2s linear;
	-webkit-mask-image: radial-gradient(120% 95% at 50% 38%, #000 52%, transparent 88%); mask-image: radial-gradient(120% 95% at 50% 38%, #000 52%, transparent 88%); }
.af-sky::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(to bottom, rgba(20, 19, 21, 0), #141315); }
.af-sky__sun { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #FFF1C2; box-shadow: 0 0 0 10px rgba(255, 241, 194, .12), 0 0 34px 14px rgba(255, 230, 160, .25); transition: left 1s linear, top 1s linear; }
.af-sky__sun.is-warm { background: #FFB46E; box-shadow: 0 0 0 10px rgba(255, 180, 110, .14), 0 0 34px 16px rgba(255, 150, 90, .3); }
.af-sky__stars, .af-sky__moon { opacity: 0; transition: opacity 2s; }
.af-sky.is-night .af-sky__stars, .af-sky.is-night .af-sky__moon { opacity: 1; }
.af-sky__stars i { position: absolute; width: 1.4px; height: 1.4px; border-radius: 50%; background: #fff; }
.af-sky__moon { position: absolute; right: 16%; top: 12%; width: 18px; height: 18px; border-radius: 50%; box-shadow: -5px 3px 0 0 #E9E4D8; transform: rotate(-20deg); }
.af-bh__arcbox.has-sky > :not(.af-sky), .af-cbarc.has-sky > :not(.af-sky) { position: relative; z-index: 1; }
.af-bh__arcbox.has-sky > .af-bh__arc, .af-bh__arcbox.has-sky > .af-bh__in { position: absolute; }
.af-cbarc.has-sky > .af-cbarc__in { position: absolute; }
@media (prefers-reduced-motion: reduce) { .af-sky, .af-sky__sun, .af-sky__stars, .af-sky__moon { transition: none; } }

/* 6.42: the sky fades out on every side (no rectangle edges) and stays inside the arc area (never over the greeting) */
.af-sky { inset: 0 !important;
	-webkit-mask-image: radial-gradient(closest-side at 50% 52%, #000 45%, rgba(0, 0, 0, .55) 72%, transparent 100%) !important;
	mask-image: radial-gradient(closest-side at 50% 52%, #000 45%, rgba(0, 0, 0, .55) 72%, transparent 100%) !important; }
.af-sky::after { display: none; }
/* The soft fade is on the sky colours only: the sun and the moon stay clear, even near the horizon. */
.af-sky { -webkit-mask-image: none !important; mask-image: none !important; opacity: 1 !important; }
.af-sky__bg { position: absolute; inset: 0; opacity: .62; transition: background 1.2s linear;
	-webkit-mask-image: radial-gradient(closest-side at 50% 52%, #000 45%, rgba(0, 0, 0, .55) 72%, transparent 100%);
	mask-image: radial-gradient(closest-side at 50% 52%, #000 45%, rgba(0, 0, 0, .55) 72%, transparent 100%); }
.af-sky__sun { opacity: .85; }
.af-sky__moon { opacity: 0; }
.af-sky.is-night .af-sky__moon { opacity: .85; }
@media (prefers-reduced-motion: reduce) { .af-sky__bg { transition: none; } }

/* 6.44: "Close your day" (from 21:00) and "From yesterday" (until 12:00) */
.af-cd { position: relative; display: grid; gap: 8px; margin: 12px 0; padding: 14px; border-radius: 22px; background: linear-gradient(160deg, #2A2416, #1F1E21 70%); border: 1px solid rgba(235, 213, 138, .28); }
.af-cd__title { margin: 0; font-size: 16px; font-weight: 800; }
.af-cd__s { margin: -3px 0 2px; color: #C9C4BD; font-size: 13.5px; line-height: 1.4; }
.af-cd__prog { height: 5px; border-radius: 3px; background: rgba(243, 239, 232, .1); overflow: hidden; }
.af-cd__prog i { display: block; height: 100%; background: #EBD58A; border-radius: 3px; transition: width .3s; }
.af-cd__row { background: #1A191C; border-radius: 16px; padding: 10px 12px; }
.af-cd__t { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 15px; }
.af-cd__t span { color: var(--af-muted, #A8A29B); font-size: 12.5px; }
.af-cd__k { margin: 1px 0 0; color: var(--af-muted, #A8A29B); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-cd__bt { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 6px; margin-top: 8px; }
.af-cd__bt button, .af-cd__rest { min-height: 40px; padding: 6px 6px; border: 0; border-radius: 999px; background: #2A292C; color: #F3EFE8; font: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.15; cursor: pointer; }
.af-cd__bt .af-cd__all { background: linear-gradient(135deg, #EBD58A, #D2B04C); color: #141315; }
.af-cd__bt button:disabled, .af-cd__rest:disabled { opacity: .5; }
.af-cd__minis { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; }
.af-cd__mini { display: grid; gap: 3px; align-content: start; background: #1A191C; border-radius: 14px; padding: 9px 10px; font-size: 12.5px; color: var(--af-muted, #A8A29B) !important; text-decoration: none; }
.af-cd__mini b { color: #F3EFE8; font-size: 14.5px; white-space: nowrap; }
.af-cd__mini.is-ok b { color: #A8DDA9; }
a.af-cd__mini b { color: #EBD58A; font-size: 13.5px; }
.af-cd__step { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.af-cd__step button { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: #2A292C; color: #F3EFE8; font-size: 18px; line-height: 1; cursor: pointer; }
.af-cd__rest { margin-top: 2px; background: transparent; border: 1px dashed rgba(235, 213, 138, .5); color: #EBD58A; font-size: 14px; }
.af-cd--done { background: #1E2A1F; border-color: rgba(111, 191, 115, .35); text-align: center; }
.af-cd--done .af-cd__minis { text-align: left; margin-top: 4px; }
.af-cd__moon { margin: 0; font-size: 22px; line-height: 1; }
.af-cd--yday { background: linear-gradient(160deg, #1F2733, #1F1E21 70%); border-color: rgba(120, 160, 210, .3); }
.af-cd__x { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: rgba(243, 239, 232, .08); color: #C9C4BD; font-size: 19px; line-height: 30px; cursor: pointer; }
.af-cd--yday .af-cd__title { padding-right: 34px; }
.af-cbdots i.s { background: transparent; box-shadow: inset 0 0 0 2px #8F8996; }
.af-pj__st--skip { background: rgba(143, 137, 150, .2); color: #C9C4BD; }
/* The card never grows wider than the phone: its columns shrink with it. */
.af-cd { grid-template-columns: minmax(0, 1fr); }
.af-cd__bt { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); }
.af-cd__minis { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); }
.af-cd__mini { min-width: 0; }
.af-cd__step { gap: 2px; }
.af-cd__step button { width: 28px; height: 28px; flex: none; }
.af-cd__step b { font-size: 13.5px; }
/* 6.46: "What's new" — the list of changes (My account for clients, Settings for Maria) */
.af-cl__intro { margin: 0 0 12px; color: var(--af-muted, #A8A29B); font-size: 14px; line-height: 1.45; }
.af-cl__filter { margin: 0 0 6px; }
.af-cl__date { margin-top: 18px; }
.af-cl__list { list-style: none; margin: 0; padding: 4px 14px; }
.af-cl__item { margin: 0; padding: 12px 0; border-top: 1px solid rgba(243, 239, 232, .08); }
.af-cl__item:first-child { border-top: 0; }
.af-cl__top { display: flex; align-items: center; gap: 6px; margin: 0 0 5px; }
.af-cl__kind, .af-cl__who { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.af-cl__kind--new { background: rgba(235, 213, 138, .16); color: #EBD58A; }
.af-cl__kind--better { background: rgba(181, 212, 244, .14); color: #B5D4F4; }
.af-cl__kind--fixed { background: rgba(111, 191, 115, .16); color: #A8DDA9; }
.af-cl__who { background: transparent; box-shadow: inset 0 0 0 1px rgba(243, 239, 232, .18); color: var(--af-muted, #A8A29B); font-weight: 600; }
.af-cl__who--client { box-shadow: inset 0 0 0 1px rgba(242, 205, 211, .4); color: #F2CDD3; }
.af-cl__v { margin-left: auto; color: var(--af-muted, #A8A29B); font-size: 11.5px; white-space: nowrap; opacity: .8; }
.af-cl__text { margin: 0; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.af-cl__imgs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 10px; }
.af-cl__fig { margin: 0; position: relative; }
.af-cl__fig img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid rgba(243, 239, 232, .1); background: #141315; }
.af-cl__fig figcaption { position: absolute; top: 8px; left: 8px; padding: 2px 9px; border-radius: 999px; background: rgba(20, 19, 21, .82); color: #C9C4BD; font-size: 11.5px; font-weight: 700; }
.af-cl__fig.is-after figcaption { background: linear-gradient(135deg, #EBD58A, #D2B04C); color: #141315; }
.af-cl__note { margin-top: 14px; }
@media (min-width: 620px) {
	.af-cl__imgs--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.af-cl__filter .af-chip-btn { display: inline-flex; align-items: center; min-height: 38px; padding: .35rem .95rem; font-size: 14px; text-decoration: none; }
.af-cl__fig { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 6px; }
.af-cl__fig figcaption { position: static; background: rgba(243, 239, 232, .08); }

/* 6.46.5 Maria's conversation: with the keyboard open the ready replies step aside (more room for the chat);
   her day card on top folds up with a swipe up and opens again with a swipe down (or a tap). */
.af-wa.is-kb .af-wa__chips { display: none !important; }
.af-cbm__dm { position: relative; padding-bottom: 16px; gap: 0; }
.af-cbm__body { display: grid; gap: 8px; overflow: hidden; max-height: 220px; opacity: 1; transition: max-height .24s ease, opacity .18s ease; }
.af-cbm__grab { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 72px; height: 16px; padding: 0; border: 0; background: none; cursor: pointer; }
.af-cbm__grab::before { content: ""; position: absolute; left: 18px; right: 18px; top: 6px; height: 4px; border-radius: 2px; background: rgba(243, 239, 232, .22); }
.af-cbm__mini { display: none; width: 100%; align-items: center; gap: 8px; padding: 2px 4px; border: 0; background: none; color: var(--af-muted, #A8A29B); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.af-cbm__mini span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-cbm__mini i { font-style: normal; color: #EBD58A; font-size: 15px; line-height: 1; }
.af-cbm__dm.is-min { padding-top: 6px; padding-bottom: 14px; }
.af-cbm__dm.is-min .af-cbm__body { max-height: 0; opacity: 0; pointer-events: none; }
.af-cbm__dm.is-min .af-cbm__mini { display: flex; }

/* 6.46.7 The sky behind the arc, brighter and more real: the sun and the moon cross the whole arc, stars of every size and colour,
   realistic clouds lit from above, rain with depth, soft snow, fog, lightning. The meals' names keep a soft shade under them. */
.af-sky { overflow: hidden; }
.af-sky__in { position: absolute; inset: 0; /* The fade of 6.46.5. */
	-webkit-mask-image: radial-gradient(closest-side at 50% 52%, #000 45%, rgba(0, 0, 0, .55) 72%, transparent 100%);
	mask-image: radial-gradient(closest-side at 50% 52%, #000 45%, rgba(0, 0, 0, .55) 72%, transparent 100%); }
.af-sky__in > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.af-sky__base { transition: background 1.5s linear; }
.af-sky__scrim { background: radial-gradient(42% 30% at 50% 66%, rgba(20, 19, 21, .55), rgba(20, 19, 21, 0) 100%); }
.af-sky__glow { opacity: 0; transition: opacity 2s; --gx: 12%;
	background: radial-gradient(55% 40% at var(--gx) 100%, rgba(255, 190, 120, .75), rgba(255, 140, 100, .25) 50%, transparent 75%); }
.af-sky__hope { opacity: 0; transition: opacity 2s; background: radial-gradient(60% 30% at 50% 100%, rgba(255, 226, 150, .55), transparent 70%); }
.af-sky > .af-sky__sun { position: absolute; inset: auto; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; box-shadow: none; opacity: 0; transition: left .8s ease, top .8s ease, opacity 1.5s; }
.af-sky__sun::before { content: ""; position: absolute; inset: -26px; border-radius: 50%; background: radial-gradient(circle, var(--sc, rgba(255, 236, 180, .55)) 0%, transparent 65%); }
.af-sky > .af-sky__moon { position: absolute; inset: auto; width: 26px; height: 26px; margin: -13px 0 0 -13px; box-shadow: none; transform: none; opacity: 0; transition: left .8s ease, top .8s ease, opacity 1.5s; filter: drop-shadow(0 0 12px rgba(230, 236, 255, .45)); }
.af-sky__flash { opacity: 0; background: radial-gradient(70% 60% at 60% 20%, rgba(235, 240, 255, .85), rgba(200, 215, 255, .2) 60%, transparent); }
.af-sky__flash.is-on { animation: af-flash2 1.1s ease-out 1; }
@keyframes af-flash2 { 0% { opacity: 0; } 8% { opacity: .9; } 16% { opacity: .15; } 26% { opacity: .7; } 100% { opacity: 0; } }
.af-sky__time { position: absolute; top: 4px; z-index: 2; display: grid; grid-template-columns: auto auto; column-gap: 4px; align-items: center; line-height: 1.15; text-shadow: 0 1px 4px rgba(0, 0, 0, .45); }
.af-sky__time svg { display: block; }
.af-sky__time b { font-size: 12.5px; font-weight: 700; color: #F3EFE8; }
.af-sky__time small { grid-column: 1 / -1; font-size: 10px; font-weight: 600; letter-spacing: .03em; color: rgba(243, 239, 232, .62); }
.af-sky__time.is-rise { left: 30px; justify-items: start; } /* The box reaches past the screen edge (margin -16px): the times stay inside. */
.af-sky__time.is-set { right: 30px; justify-items: end; }
.af-cbarc .af-sky__time.is-rise { left: 8px; }
.af-cbarc .af-sky__time.is-set { right: 8px; }
.af-sky__time.is-set small { text-align: right; }
/* Readable on a bright sky: a soft shade under the meals' names and the text in the middle. */
.af-bh__arcbox.has-sky .af-bh__arc text, .af-cbarc.has-sky svg text { paint-order: stroke; stroke: rgba(20, 19, 21, .55); stroke-width: 3px; stroke-linejoin: round; }
.af-bh__arcbox.has-sky .af-bh__in p, .af-cbarc.has-sky .af-cbarc__in p { text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }
@media (prefers-reduced-motion: reduce) { .af-sky__base, .af-sky > .af-sky__sun, .af-sky > .af-sky__moon { transition: none; } .af-sky__flash.is-on { animation: none; } }

/* 6.46.9 While the place is only approximate (time zone), the times show a small pin; a tap asks for the exact location. */
.af-sky.is-approx .af-sky__time { pointer-events: auto; cursor: pointer; padding: 4px; margin: -4px; border-radius: 8px; -webkit-tap-highlight-color: transparent; }
.af-sky.is-approx .af-sky__time small::after { content: " ⌖"; color: #F2C66D; }
.af-sky.is-approx .af-sky__time:active { background: rgba(243, 239, 232, .08); }

/* 6.46.12 Variant A: the sky is the setting, not an object. It spans the whole width at the top of Home, behind the greeting
   and the arc, and fades only downwards into the page (no shape to read, no "porthole"). */
.has-wide-sky { position: relative; isolation: isolate; } /* Its own layer: the sky sits behind its content without touching how anything else is placed. */
/* Edge to edge: the app's column no longer cuts the sky with straight sides; the page itself stops sideways scrolling instead. */
html.af-sky-wide-on, html.af-sky-wide-on body { overflow-x: clip; }
html.af-sky-wide-on .af-account { overflow-x: visible; }
.af-sky.af-sky--wide { position: absolute; inset: auto !important; top: 0; left: 50% !important; right: auto !important; width: 100vw; margin-left: -50vw; z-index: -1 !important; pointer-events: none; overflow: hidden; opacity: 1 !important; -webkit-mask-image: none !important; mask-image: none !important; }
.af-sky--wide > .af-sky__in { -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .55) calc(var(--fadeTop, 0px) * .45), #000 var(--fadeTop, 0px), #000 62%, rgba(0, 0, 0, .5) 80%, transparent 100%) !important;
	mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .55) calc(var(--fadeTop, 0px) * .45), #000 var(--fadeTop, 0px), #000 62%, rgba(0, 0, 0, .5) 80%, transparent 100%) !important; }
/* A light shade from the top (status bar, greeting) so the white text stays easy to read on a bright sky. */
.af-sky--wide .af-sky__scrim { background: linear-gradient(to bottom, rgba(20, 19, 21, .45), rgba(20, 19, 21, 0) 26%), radial-gradient(40% 22% at 50% 70%, rgba(20, 19, 21, .45), rgba(20, 19, 21, 0)); }
.af-sky--wide .af-sky__time { position: absolute; }
.af-bh.has-wide-sky .af-bh__hi, .af-bh.has-wide-sky .af-bh__date { text-shadow: 0 1px 10px rgba(0, 0, 0, .35); }
.af-bh.has-wide-sky .af-bh__ib { background: rgba(20, 19, 21, .35); }
/* The dotted part of the arc stays visible over clouds. */
.af-bh__arcbox.has-sky .af-bh__arc > path[stroke-dasharray] { stroke: rgba(243, 239, 232, .42); stroke-width: 2.4; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .45)); }

/* 6.46.14 No zoom on a double tap anywhere in the app (it zoomed in on a quick double tap on a button, a tick or a meal).
   Pinching with two fingers still zooms (photos, small text): only the double tap is off. The double tap that likes a message keeps working. */
html, body { touch-action: manipulation; }

/* 6.46.15 Free plan: the day of it, under "Now" inside the arc. */
.af-bh__freeday { display: inline-block; margin: 4px 0 0; padding: 2px 10px; border-radius: 999px; border: 1px solid rgba(235, 213, 138, .45); background: rgba(20, 19, 21, .35);
	color: #EBD58A; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; line-height: 1.5; text-shadow: none; }

/* 6.46.16 After the free plan: the finale in the arc, the feedback form; Maria's list of answers. */
.af-bh__freeday--done { border-color: rgba(111, 191, 115, .55); color: #BFE6C1; }
.af-ff__below { display: grid; gap: 14px; margin-top: 6px; }
.af-ff__card { display: grid; gap: 14px; }
.af-ff__form, .af-ff__thanks { display: grid; gap: 14px; }
.af-ff__form[hidden], .af-ff__thanks[hidden], .af-ff__why[hidden] { display: none; }
.af-ff__title { margin: 0; font-size: 18px; font-weight: 800; color: #F3EFE8; }
.af-ff__big { margin: 0; font-size: 20px; font-weight: 800; color: #F3EFE8; text-align: center; }
.af-ff__thanks .af-hint { text-align: center; }
.af-ff__q { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.af-ff__q legend, .af-ff__legend { padding: 0; margin-bottom: 8px; font-size: 14.5px; font-weight: 700; color: #F3EFE8; }
.af-ff__q textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(243, 239, 232, .14); background: #1E1D21; color: #F3EFE8; font: inherit; font-size: 16px; resize: vertical; }
.af-ff__rate { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.af-ff__rate label, .af-ff__chips label { position: relative; cursor: pointer; }
.af-ff__rate input, .af-ff__chips input { position: absolute; opacity: 0; pointer-events: none; }
.af-ff__rate span { display: grid; justify-items: center; gap: 4px; padding: 10px 2px; border-radius: 14px; background: #1E1D21; border: 1px solid rgba(243, 239, 232, .1); font-size: 11.5px; color: #A8A2AE; transition: background .15s, border-color .15s, color .15s; }
.af-ff__rate i { font-style: normal; font-size: 24px; line-height: 1; }
.af-ff__rate input:checked + span { background: rgba(235, 213, 138, .14); border-color: #EBD58A; color: #F3EFE8; }
.af-ff__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.af-ff__chips--col { display: grid; }
.af-ff__chips span { display: block; padding: 9px 14px; border-radius: 999px; background: #1E1D21; border: 1px solid rgba(243, 239, 232, .12); font-size: 14px; color: #D9D4CD; transition: background .15s, border-color .15s; }
.af-ff__chips--col span { border-radius: 14px; }
.af-ff__chips input:checked + span { background: rgba(235, 213, 138, .14); border-color: #EBD58A; color: #F3EFE8; }
.af-ff__rate input:focus-visible + span, .af-ff__chips input:focus-visible + span { outline: 2px solid #EBD58A; outline-offset: 2px; }
.af-ff__err { margin: 0; color: #E6AEB8; font-size: 14px; }
.af-ff-list { display: grid; gap: 12px; }
.af-ff-sum { margin: 0; color: #D9D4CD; }
.af-ff-item header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.af-ff-item header a { color: #F3EFE8; text-decoration: none; }
.af-ff-item time { margin-left: auto; font-size: 12.5px; color: #8F8996; }
.af-ff-new, .af-ff-tag { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #EBD58A; color: #16151A; }
.af-ff-tag { background: rgba(111, 191, 115, .2); color: #BFE6C1; }
.af-ff-item.is-new { border: 1px solid rgba(235, 213, 138, .45); }
.af-ff-rate { margin: 8px 0; font-weight: 700; color: #F3EFE8; }
.af-ff-item dl { display: grid; gap: 4px; margin: 0; }
.af-ff-item dt { margin-top: 6px; font-size: 12.5px; color: #8F8996; }
.af-ff-item dd { margin: 0; color: #E6E1DA; }

/* 6.47 The ideal plate */
.af-plate-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 14px; background: #1E1D21; }
.af-plate-switch a { padding: 9px 6px; border-radius: 11px; text-align: center; font-size: 14px; font-weight: 700; color: #A8A2AE; text-decoration: none; touch-action: manipulation; }
.af-plate-switch a.is-on { background: #2C2B30; color: #F3EFE8; }
.af-plate { display: grid; gap: 14px; }
.af-plate__who { display: grid; gap: 8px; }
.af-plate__seg, .af-plate__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: #1E1D21; }
.af-plate__seg button, .af-plate__tabs button { padding: 9px 6px; border: 0; border-radius: 11px; background: none; font: inherit; font-size: 14px; font-weight: 700; color: #A8A2AE; cursor: pointer; }
.af-plate__seg button.is-on, .af-plate__tabs button.is-on { background: #2C2B30; color: #F3EFE8; }
.af-plate__tabs b { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: #EBD58A; color: #16151A; font-size: 11px; }
.af-plate__client { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(243, 239, 232, .14); background: #1E1D21; color: #F3EFE8; font: inherit; font-size: 16px; }
.af-plate__docs { justify-self: end; font-size: 13.5px; font-weight: 700; color: #EBD58A; text-decoration: none; }
.af-plate__target label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 700; color: #F3EFE8; }
.af-plate__kin { display: flex; align-items: baseline; gap: 8px; }
.af-plate__kin input { width: 140px; padding: 8px 12px; border-radius: 14px; border: 1px solid rgba(243, 239, 232, .16); background: #1E1D21; color: #F3EFE8; font: inherit; font-size: 28px; font-weight: 800; }
.af-plate__kin span { color: #A8A2AE; font-weight: 700; }
.af-plate__need { margin: 10px 0 0; font-size: 13px; color: #A8A2AE; }
.af-plate__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.af-plate__chips button { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(243, 239, 232, .14); background: #1E1D21; color: #E6E1DA; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.af-plate__miss { margin-top: 10px; font-size: 13.5px; color: #D9D4CD; }
.af-plate__miss summary { cursor: pointer; color: #EBD58A; }
.af-plate__missf { display: grid; gap: 8px; margin-top: 8px; }
.af-plate__missf label { display: grid; gap: 4px; font-size: 13px; color: #A8A2AE; }
.af-plate__missf input, .af-plate__missf select { padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(243, 239, 232, .14); background: #1E1D21; color: #F3EFE8; font: inherit; font-size: 16px; }
.af-plate__live p { margin: 0 0 6px; color: #F3EFE8; font-size: 15px; }
.af-plate__live b { font-size: 22px; }
.af-plate__live span { color: #8F8996; font-size: 13px; }
.af-plate__bar { height: 6px; border-radius: 3px; background: rgba(243, 239, 232, .1); overflow: hidden; }
.af-plate__bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #D2B04C, #EBD58A); transition: width .3s; }
.af-plate__stage { display: grid; gap: 12px; margin: 4px -16px 0; }
.af-plate__scene { position: relative; width: 100%; max-width: 430px; margin: 0 auto; aspect-ratio: 390 / 410; background: #1A191C; }
.af-plate__svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.af-plate__fork, .af-plate__knife { position: absolute; top: 27%; width: 5.6%; height: auto; }
.af-plate__fork { left: 2.5%; }
.af-plate__knife { right: 2.5%; }
.af-plate__mk { font-size: 20px; font-weight: 800; fill: #F3EFE8; font-family: inherit; }
.af-plate__ms { font-size: 11px; fill: #BDB7C2; font-family: inherit; }
.af-plate__pill { position: absolute; display: flex; align-items: center; gap: 8px; max-width: 46%; padding: 6px 12px 6px 9px; border-radius: 999px; border: 1px solid rgba(243, 239, 232, .12); background: rgba(20, 19, 21, .82); color: #F3EFE8; font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
.af-plate__pill i { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.af-plate__pill span { display: grid; line-height: 1.15; min-width: 0; }
.af-plate__pill b { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-plate__pill small { font-size: 11px; color: #BDB7C2; }
.af-plate__pill.is-tl { top: 3%; left: 2%; }
.af-plate__pill.is-tr { top: 3%; right: 2%; }
.af-plate__pill.is-bl { bottom: 1%; left: 2%; }
.af-plate__pill.is-br { bottom: 1%; right: 2%; }
.af-plate__sides { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 0 16px; }
.af-plate__w, .af-plate__lab { cursor: pointer; transition: fill-opacity .2s; }
.af-plate__lab text { fill: #F3EFE8; font-family: inherit; }
.af-plate__pct { font-size: 15px; font-weight: 800; }
.af-plate__gr { font-size: 12px; font-weight: 700; fill: #F3EFE8; opacity: .9; }
.af-plate__plus { cursor: pointer; }
.af-plate__side { display: flex; min-height: 44px; align-items: center; gap: 6px; padding: 6px 10px 6px 8px; border-radius: 999px; border: 1px dashed rgba(243, 239, 232, .25); background: #1E1D21; color: #D9D4CD; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.af-plate__side.is-on { border-style: solid; border-color: rgba(235, 213, 138, .5); }
.af-plate__side i { font-style: normal; font-size: 16px; }
.af-plate__side b { color: #EBD58A; font-size: 15px; }
.af-plate__hint { margin: 0; text-align: center; color: #A8A2AE; font-size: 14px; }
.af-plate__sec { padding: 12px 14px; border-radius: 16px; background: #1E1D21; }
.af-plate__sec h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 14px; color: #F3EFE8; }
.af-plate__sec h4 > span { width: 10px; height: 10px; border-radius: 50%; }
.af-plate__secadd { margin-left: auto; padding: 4px 10px; border-radius: 999px; border: 0; background: rgba(235, 213, 138, .14); color: #EBD58A; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.af-plate__sec ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.af-plate__sec li { display: grid; grid-template-columns: minmax(0, 1fr) auto 48px 28px; align-items: center; gap: 8px; }
.af-plate__fn { color: #E6E1DA; font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.af-plate__g { display: flex; align-items: center; gap: 4px; color: #8F8996; font-size: 12px; }
.af-plate__g input { width: 62px; padding: 5px 6px; border-radius: 9px; border: 1px solid rgba(243, 239, 232, .14); background: #141315; color: #F3EFE8; font: inherit; font-size: 16px; text-align: right; }
.af-plate__k { text-align: right; color: #A8A2AE; font-size: 13px; }
.af-plate__rm { width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(243, 239, 232, .08); color: #A8A2AE; font-size: 17px; line-height: 1; cursor: pointer; }
.af-plate__msg p { margin: 0 0 6px; font-size: 14px; }
.af-plate__ok { color: #BFE6C1; font-weight: 700; }
.af-plate__warn { color: #E6AEB8; }
.af-plate__soft { color: #D9D4CD; }
.af-plate__actions { display: grid; gap: 8px; }
.af-plate__nut h3 { margin: 0 0 4px; font-size: 16px; color: #F3EFE8; }
.af-plate__kc { margin: 0 0 10px; color: #A8A2AE; }
.af-plate__kc b { font-size: 26px; color: #F3EFE8; }
.af-plate__m { margin-bottom: 10px; }
.af-plate__m p { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; color: #E6E1DA; font-size: 14px; }
.af-plate__m p b { margin-left: auto; color: #F3EFE8; }
.af-plate__m p small, .af-plate__vs { color: #8F8996; font-size: 12px; }
.af-plate__fib { display: grid; grid-template-columns: auto auto 1fr auto; gap: 6px 10px; margin: 4px 0 8px; font-size: 13.5px; color: #A8A2AE; }
.af-plate__fib b { color: #F3EFE8; }
.af-plate__tip { margin: 6px 0 0; color: #EBD58A; font-size: 13.5px; }
.af-plate__micro { margin-top: 10px; }
.af-plate__micro summary { cursor: pointer; font-weight: 700; color: #F3EFE8; }
.af-plate__micro summary small { font-weight: 400; color: #8F8996; }
.af-plate__micro ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.af-plate__micro li { display: grid; grid-template-columns: minmax(0, 1fr) auto 70px 40px; align-items: center; gap: 8px; font-size: 13.5px; color: #E6E1DA; }
.af-plate__micro li small { text-align: right; color: #8F8996; }
.af-plate__nrv { height: 5px; border-radius: 3px; background: rgba(243, 239, 232, .1); overflow: hidden; }
.af-plate__nrv i { display: block; height: 100%; background: #7FB2E5; }
.af-plate__notes p { margin: 0 0 6px; font-size: 12.5px; color: #8F8996; line-height: 1.45; }
.af-plate__hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.af-plate__hist li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.af-plate__hist p { margin: 0 0 2px; color: #F3EFE8; }
.af-plate__hist small { color: #8F8996; font-size: 12px; }
.af-plate__hact { display: flex; gap: 6px; align-items: center; }
.af-plate__badge { padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; background: rgba(111, 191, 115, .2); color: #BFE6C1; }
.af-plate__badge.is-inc { background: rgba(235, 213, 138, .16); color: #EBD58A; }
.af-plate__badge.is-maria { background: rgba(230, 160, 168, .18); color: #F2C4CA; }
.af-plate__pick .af-sheet__body { display: grid; gap: 10px; }
.af-plate__q { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(243, 239, 232, .14); background: #1E1D21; color: #F3EFE8; font: inherit; font-size: 16px; }
.af-plate__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 52vh; overflow-y: auto; }
.af-plate__list label { display: flex; gap: 10px; align-items: center; padding: 9px 6px; border-radius: 10px; cursor: pointer; }
.af-plate__list input { width: 20px; height: 20px; accent-color: #EBD58A; }
.af-plate__list span { display: grid; }
.af-plate__list b { color: #F3EFE8; font-weight: 600; font-size: 14.5px; }
.af-plate__list b i { font-style: normal; color: #EBD58A; }
.af-plate__list small { color: #8F8996; font-size: 12px; }
.af-plate__pickbar { position: sticky; bottom: 0; padding: 10px 0 calc(env(safe-area-inset-bottom, 0px) + 6px); background: inherit; }
.af-plate__x { justify-self: end; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(243, 239, 232, .08); color: #F3EFE8; font-size: 18px; cursor: pointer; }
.af-plate__ask { max-width: 360px; padding: 18px; border: 0; border-radius: 18px; background: #232226; color: #E6E1DA; }
.af-plate__ask::backdrop { background: rgba(0, 0, 0, .55); }
.af-plate__askt { margin: 0 0 6px; font-size: 17px; font-weight: 800; color: #F3EFE8; }
.af-plate__ask div { display: grid; gap: 8px; margin-top: 14px; }
/* Maria's documentation */
.af-pdoc { display: grid; gap: 10px; }
.af-pdoc__ch summary { cursor: pointer; font-weight: 800; color: #F3EFE8; font-size: 15.5px; }
.af-pdoc__body { margin-top: 10px; color: #D9D4CD; font-size: 14.5px; line-height: 1.55; }
.af-pdoc__body p, .af-pdoc__body ol, .af-pdoc__body ul { margin: 0 0 10px; }
.af-pdoc__body code { padding: 1px 5px; border-radius: 6px; background: #1E1D21; color: #EBD58A; font-size: 13px; }
.af-pdoc__t { width: 100%; border-collapse: collapse; margin: 6px 0 12px; font-size: 13.5px; }
.af-pdoc__t th, .af-pdoc__t td { padding: 6px 6px; border-bottom: 1px solid rgba(243, 239, 232, .08); text-align: left; vertical-align: top; }
.af-pdoc__t th { color: #8F8996; font-weight: 700; }

/* 6.47.2 The ideal plate: photos of each section (from Maria's plate) on the slices, round thumbnails for oil and extras. */
.af-plate__thumb { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid rgba(243, 239, 232, .2); }
.af-plate__side:not(.is-on) .af-plate__thumb { filter: grayscale(.6); opacity: .7; }

/* 6.47.4 History: a saved plate opens read-only; "Edit the plate" copies it into the editor. Extras: "nothing this time". */
.af-plate__hist li[data-view] { cursor: pointer; grid-template-columns: 48px minmax(0, 1fr) 20px; }
.af-plate__hist li[data-view]:active { background: #232226; }
.af-plate__go-r { color: #8F8996; font-size: 22px; line-height: 1; }
.af-plate__dhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.af-plate__dhead span { color: #A8A2AE; font-size: 13px; }
.af-plate__back { padding: 6px 2px; border: 0; background: none; color: #EBD58A; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.af-plate__dbadges { margin: -4px 0 0; }
.af-plate__scene.is-ro .af-plate__pill, .af-plate__scene.is-ro .af-plate__w { cursor: default; }
.af-plate__sec.is-ro li { grid-template-columns: minmax(0, 1fr) auto 48px; }
.af-plate__sec.is-ro b { color: #F3EFE8; font-size: 14px; }
.af-plate__dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; vertical-align: middle; }
.af-plate__nothing { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px dashed rgba(243, 239, 232, .25); background: #1E1D21; color: #E6E1DA; font: inherit; font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; }
.af-plate__nothing.is-on { border-style: solid; border-color: rgba(235, 213, 138, .55); color: #EBD58A; }
.af-plate__side.is-none b { color: #BFE6C1; }

/* 6.47.6 The plate's picker: results from the food database under the list. */
.af-plate__dbh { margin: 4px 2px 0; font-size: 12.5px; }
.af-plate__db:empty { display: none; }

/* 6.47.7 A picture next to each food: the phone's emoji, Maria's photo, the product's photo. */
.af-plate__fimg, .af-plate__femo { flex: none; width: 36px; height: 36px; border-radius: 10px; }
.af-plate__fimg { object-fit: cover; background: #F3EFE8; }
.af-plate__femo { display: grid; place-items: center; background: #26252A; font-size: 21px; line-height: 1; }
.af-plate__fn { display: flex; align-items: center; gap: 10px; min-width: 0; }
.af-plate__fn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-plate__sec li { grid-template-columns: minmax(0, 1fr) auto 44px 28px; }
.af-plate__list label { gap: 10px; }
.af-plate__credit { padding: 6px 4px 2px; font-size: 11px; color: #8F8996; list-style: none; }

/* 6.48 Pregnancy and breastfeeding: badges, the warning before adding, the question on Home. "New in the app". */
.af-pb__mom, .af-plate__mom { display: inline-block; margin-right: 4px; font-size: 13px; }
.af-pb__momsum { display: grid; gap: 4px; margin: 8px 0; border: 1px solid rgba(230, 160, 168, .35); }
.af-pb__momsum strong { color: #F3EFE8; }
.af-pb__momsum span { color: #D9D4CD; font-size: 13.5px; }
.af-pbmom { display: grid; gap: 8px; margin-top: 12px; border: 1px solid rgba(235, 213, 138, .4); }
.af-pbmom.is-avoid { border-color: rgba(230, 120, 130, .6); }
.af-pbmom__t { margin: 0; color: #F3EFE8; }
.af-pbmom__r { margin: 0; font-size: 13.5px; color: #D9D4CD; line-height: 1.45; }
.af-pbmom__r a, .af-plate__momn a { color: #EBD58A; }
.af-pbmom__act { display: grid; gap: 8px; }
.af-plate__momn { margin: 0 0 6px; font-size: 13.5px; color: #D9D4CD; line-height: 1.45; }
.af-plate__momn.is-avoid { color: #F2C4CA; }
.af-mom-ask, .af-wn { display: grid; gap: 10px; margin-bottom: 14px; border: 1px solid rgba(235, 213, 138, .35); transition: opacity .3s; }
.af-mom-ask.is-done, .af-wn.is-done { opacity: 0; }
.af-mom-ask__t, .af-wn__t { margin: 0; font-size: 16px; font-weight: 800; color: #F3EFE8; }
.af-mom-ask__opts { display: grid; gap: 8px; }
.af-mom-ask__opts label { position: relative; cursor: pointer; }
.af-mom-ask__opts input { position: absolute; opacity: 0; pointer-events: none; }
.af-mom-ask__opts span { display: block; padding: 11px 14px; border-radius: 14px; background: #1E1D21; border: 1px solid rgba(243, 239, 232, .12); color: #E6E1DA; font-weight: 700; }
.af-mom-ask__opts input:checked + span { background: rgba(235, 213, 138, .14); border-color: #EBD58A; color: #F3EFE8; }
.af-mom-ask__due { display: grid; gap: 4px; font-size: 13px; color: #A8A2AE; }
.af-mom-ask__due[hidden] { display: none; }
.af-mom-ask__due input { padding: 9px 10px; border-radius: 10px; border: 1px solid rgba(243, 239, 232, .14); background: #1E1D21; color: #F3EFE8; font: inherit; font-size: 16px; }
.af-mom-ask__foot { margin: 0; font-size: 12px; }
.af-wn ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.af-wn li p { margin: 0 0 4px; color: #E6E1DA; font-size: 14px; line-height: 1.45; }
.af-wn__go { font-weight: 700; color: #EBD58A; text-decoration: none; }
.af-wn__act { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* The due date only next to "I am pregnant". */
.af-check:has(input[name="af_mom_preg"]:not(:checked)) + .af-mom-due { display: none; }

/* 6.48.1 Maria changes pregnancy / breastfeeding in the client's file; notes in the clients' calculator. */
.af-mom-coach { display: inline-block; vertical-align: top; }
.af-mom-coach summary { cursor: pointer; list-style: none; }
.af-mom-coach summary::-webkit-details-marker { display: none; }
.af-mom-coach__f { display: grid; gap: 8px; margin-top: 8px; padding: 12px; border-radius: 14px; background: #1E1D21; font-size: 14px; color: #E6E1DA; }
.af-mom-coach__f label { display: flex; align-items: center; gap: 8px; }
.af-mom-coach__due { flex-wrap: wrap; font-size: 13px; color: #A8A2AE; }
.af-mom-coach__due[hidden] { display: none; }
.af-mom-coach__due input { padding: 7px 9px; border-radius: 9px; border: 1px solid rgba(243, 239, 232, .14); background: #141315; color: #F3EFE8; font: inherit; font-size: 16px; }
.af-calc__mom p { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: rgba(235, 213, 138, .1); font-size: 13.5px; line-height: 1.45; color: #E6E1DA; }
.af-calc__mom p.is-avoid { background: rgba(230, 120, 130, .14); }
.af-calc__mom a { color: #EBD58A; }
.af-calc__mom[hidden] { display: none; }

/* 6.49 Photograph your meal */
.af-photo-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; border: 1px dashed rgba(235, 213, 138, .5); background: rgba(235, 213, 138, .08); color: #EBD58A; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.af-plate__photo .af-photo-btn { margin-bottom: 4px; }
.af-photo .af-sheet__body { display: grid; gap: 10px; }
.af-photo__t { margin: 0; font-size: 17px; font-weight: 800; color: #F3EFE8; }
.af-photo__dish { margin: 0; color: #D9D4CD; font-style: italic; }
.af-photo__wait { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: #F3EFE8; font-weight: 700; }
.af-photo__spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(235, 213, 138, .25); border-top-color: #EBD58A; animation: af-spin .8s linear infinite; }
@keyframes af-spin { to { transform: rotate(360deg); } }
.af-photo__err { color: #F2C4CA; }
.af-photo__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.af-photo__list li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 32px; align-items: center; gap: 8px; padding: 8px; border-radius: 14px; background: #1E1D21; }
.af-photo__list li.is-low { border: 1px dashed rgba(235, 213, 138, .45); }
.af-photo__e { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #26252A; font-size: 20px; }
.af-photo__n { display: grid; min-width: 0; }
.af-photo__n b { color: #F3EFE8; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-photo__n small { color: #8F8996; font-size: 12px; }
.af-photo__g { display: flex; align-items: center; gap: 4px; color: #8F8996; font-size: 12px; }
.af-photo__g input { width: 64px; padding: 6px; border-radius: 9px; border: 1px solid rgba(243, 239, 232, .14); background: #141315; color: #F3EFE8; font: inherit; font-size: 16px; text-align: right; }
.af-photo__rm { width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(243, 239, 232, .08); color: #A8A2AE; font-size: 18px; cursor: pointer; }
.af-photo__act { display: grid; gap: 8px; }

/* 6.51 The "what is new" banner; the "notifications are off" banner; onboarding test button. */
.af-wnb { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 6px 6px 6px 12px; border-radius: 14px; background: rgba(235, 213, 138, .12); border: 1px solid rgba(235, 213, 138, .35); transition: opacity .3s; }
.af-wnb.is-done { opacity: 0; }
.af-wnb__link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 36px; color: #F3EFE8; text-decoration: none; font-size: 14px; }
.af-wnb__tag { flex: none; font-weight: 800; color: #EBD58A; }
.af-wnb__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.af-wnb__go { flex: none; margin-left: auto; font-weight: 700; color: #EBD58A; }
.af-wnb__x { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: #A8A2AE; font-size: 20px; cursor: pointer; }
/* 6.89: "put AlmarFit on your home screen" — on Home, in a browser tab on a phone. */
.af-inst { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 12px 12px 12px 14px; border-radius: 16px; background: linear-gradient(160deg, #2A2416, #1F1E21); border: 1px solid rgba(235, 213, 138, .35); }
.af-inst[hidden] { display: none; }
.af-inst img { flex: none; width: 40px; height: 40px; border-radius: 10px; background: #141316; }
.af-inst p { flex: 1; min-width: 0; margin: 0; display: grid; gap: 2px; color: #F3EFE8; }
.af-inst p strong { font-size: 14.5px; line-height: 1.25; }
.af-inst p span { font-size: 13px; line-height: 1.35; color: #D9D4CD; }
.af-inst__go { flex: none; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: #EBD58A; color: #16151A; font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; }
.af-inst__go[hidden] { display: none; }
.af-inst-sheet .af-sheet__body { gap: 10px; padding-bottom: 12px; }
.af-inst__sub { margin: 0 0 2px; font-size: 14px; line-height: 1.45; color: var(--af-muted, #A8A29B); }
.af-inst__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.af-inst__steps[hidden], .af-inst__note[hidden] { display: none; }
.af-inst__steps li { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 14px; border-radius: 16px; background: #2C2B30; font-size: 15px; line-height: 1.4; }
.af-inst__steps li em { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #EBD58A; color: #16151A; font-style: normal; font-weight: 800; font-size: 13.5px; }
.af-inst__steps li span { min-width: 0; }
.af-inst__steps li small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--af-muted, #A8A29B); }
.af-inst__ico { vertical-align: -4px; margin: 0 1px; color: #EBD58A; }
.af-inst__note { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--af-muted, #A8A29B); }
.af-pushoff { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; background: rgba(230, 120, 130, .12); border: 1px solid rgba(230, 120, 130, .35); }
.af-pushoff[hidden] { display: none; }
.af-pushoff span { font-size: 20px; }
.af-pushoff p { flex: 1; margin: 0; font-size: 13.5px; line-height: 1.4; color: #F3EFE8; }
.af-pushoff__on { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; background: #EBD58A; color: #16151A; font-weight: 800; font-size: 14px; text-decoration: none; }
.af-ob__ptest { margin-top: 8px; }

/* 6.52 Invite a friend */
.af-ref { display: grid; gap: 12px; }
.af-ref__lead { margin: 0; color: #E6E1DA; line-height: 1.5; }
.af-ref__prog { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.af-ref__prog span { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border-radius: 14px; background: #1E1D21; border: 1px dashed rgba(243, 239, 232, .18); }
.af-ref__prog span.is-on { background: rgba(235, 213, 138, .14); border: 1px solid #EBD58A; }
.af-ref__prog b { font-size: 18px; color: #F3EFE8; }
.af-ref__prog small { font-size: 11.5px; color: #A8A2AE; }
.af-ref__sum { margin: 0; text-align: center; font-weight: 800; color: #EBD58A; }
.af-ref__label { margin: 4px 0 0; font-size: 13px; font-weight: 700; color: #A8A2AE; }
.af-ref__link { display: flex; gap: 8px; }
.af-ref__link input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(243, 239, 232, .14); background: #1E1D21; color: #F3EFE8; font: inherit; font-size: 15px; }
.af-ref__code { margin: 0; color: #A8A2AE; }
.af-ref__code b { letter-spacing: .08em; color: #F3EFE8; }
.af-ref__send { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.af-ref__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.af-ref__list li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: #1E1D21; }
.af-ref__list b { color: #F3EFE8; }
.af-ref__list span { font-size: 13px; color: #A8A2AE; }
.af-ref__list li.is-rewarded span { color: #BFE6C1; }
.af-ref__list li.is-pending span { color: #EBD58A; }
.af-ref__rulesbox summary { cursor: pointer; font-weight: 700; color: #EBD58A; }
.af-ref__rules { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.5; color: #D9D4CD; }
.af-ref-field small { display: block; margin-top: 4px; }
/* Signup: confirm the email address */
.af-req__dup { color: #EF9F27; font-size: 13px; font-weight: 600; }
.af-auth--verify .af-hint { text-align: center; }
.af-verify__chg { margin-top: 14px; }
.af-verify__chg summary { cursor: pointer; text-align: center; color: var(--af-gold-light, #EBD58A); font-weight: 600; padding: 8px 0; }
/* Meal photo consent in My account → Privacy */
.af-ai-consent { display: grid; gap: 8px; }
.af-ai-consent__t { margin: 0; font-weight: 700; font-size: 15px; }
.af-ai-consent .af-hint { margin: 0; }
/* "New in the app" banner: never wider than the screen, whatever the title */
.af-wnb { min-width: 0; max-width: 100%; box-sizing: border-box; }
.af-wnb__t { flex: 1 1 auto; }
/* The Home page is a grid item: it may shrink to the screen; long one-line titles inside then end with "…" */
.af-account > .af-bh, .af-bh { min-width: 0; max-width: 100%; }
/* Pregnancy and breastfeeding rules: on a phone each food is a card instead of a 5-column table */
@media (max-width: 640px) {
	.af-pdoc__t, .af-pdoc__t tbody, .af-pdoc__t tr, .af-pdoc__t td { display: block; width: 100%; box-sizing: border-box; }
	.af-pdoc__t thead { display: none; }
	.af-pdoc__t tr { padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
	.af-pdoc__t td { padding: 2px 0 !important; border: 0 !important; overflow-wrap: anywhere; }
	.af-pdoc__t td:first-child { font-weight: 800; font-size: 15px; }
	.af-pdoc__body { overflow: hidden; }
}
.af-cl__more { margin-top: 12px; }
.af-cl__more > summary { list-style: none; cursor: pointer; }
.af-cl__more > summary::-webkit-details-marker { display: none; }
.af-cl__more[open] > summary { margin-bottom: 12px; }

/* Stripe plans (My account → Subscription) */
.af-plans { display: grid; gap: 8px; }
.af-plan { position: relative; display: block; margin: 0; cursor: pointer; }
.af-plan > input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.af-plan__box { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: #1F1E21; border: 1.5px solid rgba(255, 255, 255, .08); transition: border-color .15s ease; }
.af-plan.is-on .af-plan__box, .af-plan > input:checked + .af-plan__box { border-color: #D2B04C; }
.af-plan.is-reco .af-plan__box { border-color: rgba(210, 176, 76, .45); }
.af-plan > input:focus-visible + .af-plan__box { outline: 2px solid #EBD58A; outline-offset: 2px; }
.af-plan__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 15px; }
.af-plan__sub { font-size: 13px; color: var(--af-muted, #A8A29B); }
.af-plan__reco { font-style: normal; font-size: 11px; font-weight: 800; background: #D2B04C; color: #141315; border-radius: 6px; padding: 2px 6px; margin-left: 6px; vertical-align: 2px; }
.af-plan__seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 6px; padding: 3px; border-radius: 10px; background: rgba(243, 239, 232, .06); }
.af-plan__seg button { border: 0; border-radius: 8px; padding: 7px 4px; background: transparent; color: var(--af-muted, #A8A29B); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.af-plan__seg button.is-on { background: #F3EFE8; color: #1D1C1E; }
.af-plans__until { margin: 4px 0 0; text-align: center; font-size: 14px; color: #9DD3A8; font-weight: 600; }
.af-plans__pay.is-busy { opacity: .6; }
.af-plans__secure, .af-plans__auto { text-align: center; margin: 0; }
.af-mysub-stripe { display: grid; gap: 10px; }
.af-sub__pay { text-decoration: none; }
.af-plan > input { inset: auto; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }
.af-plans > label.af-plan, .af-plans > p { border: 0 !important; margin: 0 !important; }
.af-plans > label.af-plan { padding: 0 !important; }
/* Seats and waitlist */
.af-wait { display: grid; gap: 10px; }
.af-wait__pos { margin: 0; font-weight: 700; font-size: 15px; color: #EBD58A; }
.af-wait__form { display: grid; gap: 8px; margin: 0; }
.af-wait__form select { width: 100%; min-height: 44px; }
.af-plans__seats { background: rgba(239, 159, 39, .14) !important; color: #EF9F27 !important; border: 0 !important; }
.af-seats { display: grid; gap: 10px; }
.af-seats__now { margin: 0; font-size: 15px; }
.af-wait__form .af-field, .af-seats .af-field { display: grid; gap: 6px; margin: 0; }
.af-wait__form .af-field > span, .af-seats .af-field > span { font-size: 13px; color: var(--af-muted, #A8A29B); font-weight: 600; }
.af-wait__form select, .af-seats input[type=number] { width: 100%; min-height: 46px; box-sizing: border-box; border-radius: 12px; font-size: 16px; }
.af-seats form { display: grid; gap: 12px; margin: 0; }
.af-seats .af-check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; margin: 0; }
.af-seats .af-check input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
/* Failed automatic payment: banner on Home */
.af-payfail { display: grid; gap: 8px; background: rgba(226, 75, 74, .14) !important; border: 1px solid rgba(240, 149, 149, .5) !important; }
.af-payfail__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.af-payfail__top strong { color: #F4C5C5; font-size: 16px; }
.af-payfail__clock { font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 800; color: #F4C5C5; letter-spacing: .02em; }
.af-payfail p { margin: 0; color: #E8CFCF; font-size: 14px; line-height: 1.45; }
.af-payfail__btn { background: #F3EFE8 !important; color: #1D1C1E !important; text-decoration: none; text-align: center; }
/* Maria: payment panel on a client's page */
.af-cpay { display: grid; gap: 10px; }
.af-cpay__list { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; }
.af-cpay__btns { display: grid; gap: 8px; }
.af-cpay__btns .af-btn, .af-cpay__btns form { margin: 0; text-align: center; text-decoration: none; }
.af-cpay__form { display: grid; gap: 10px; margin: 0; }
.af-btn--danger { color: #F09595 !important; border-color: rgba(240, 149, 149, .45) !important; }
.af-seg-radio { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border-radius: 12px; background: rgba(243, 239, 232, .06); }
.af-seg-radio label { position: relative; text-align: center; padding: 9px 6px; border-radius: 9px; font-size: 14px; font-weight: 700; cursor: pointer; color: var(--af-muted, #A8A29B); }
.af-seg-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.af-seg-radio label:has(input:checked) { background: #F3EFE8; color: #1D1C1E; }
.af-gift .af-field { display: grid; gap: 6px; margin: 0; }
.af-gift .af-field > span { font-size: 13px; color: var(--af-muted, #A8A29B); font-weight: 600; }
.af-gift input[type=date] { width: 100%; min-height: 46px; box-sizing: border-box; border-radius: 12px; }
.af-gift:has(input[value=open]:checked) .af-gift__date { display: none; }
.af-cpay__now { margin: 0; font-weight: 700; }
.af-cpay .af-btn.af-btn--danger { color: #F09595 !important; border-color: rgba(240, 149, 149, .5) !important; background: transparent !important; }

/* Cycle tracker (Journal → Cycle) */
.af-cyc-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border-radius: 12px; background: rgba(243, 239, 232, .06); margin-bottom: 12px; }
.af-cyc-seg a { text-align: center; padding: 9px 6px; border-radius: 9px; font-weight: 700; font-size: 14px; color: var(--af-muted, #A8A29B); text-decoration: none; }
.af-cyc-seg a.is-on { background: #F3EFE8; color: #1D1C1E; }
.af-cyc__h { font-size: 20px; margin: 4px 0 10px; }
.af-cyc__lead { margin: 0 0 12px; line-height: 1.5; }
.af-cyc-form { display: grid; gap: 10px; margin: 0 0 8px; }
.af-cyc-form .af-card { margin: 0; }
.af-cyc-now__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.af-cyc__est { font-size: 11px; color: #AFA9EC; font-weight: 700; }
.af-cyc-now .af-hint { margin: 4px 0 0; }
.af-cyc-cal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.af-cyc-cal__head a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; text-decoration: none; color: #F3EFE8; font-size: 20px; }
.af-cyc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.af-cyc-grid b { font-size: 11px; color: #6B6A70; font-weight: 700; padding-bottom: 2px; }
.af-cyc-d { display: grid; place-items: center; aspect-ratio: 1; border-radius: 9px; font-size: 13px; color: #D9D4CC; text-decoration: none; position: relative; }
.af-cyc-d.is-m, .af-cyc-legend .is-m { background: #D4537E; color: #fff; }
.af-cyc-d.is-me, .af-cyc-legend .is-me { background: rgba(212, 83, 126, .18); box-shadow: inset 0 0 0 1px #ED93B1; }
.af-cyc-d.is-f, .af-cyc-legend .is-f { background: rgba(93, 202, 165, .16); }
.af-cyc-d.is-o, .af-cyc-legend .is-o { background: rgba(239, 159, 39, .32); }
.af-cyc-d.is-l, .af-cyc-legend .is-l { background: rgba(127, 119, 221, .22); }
.af-cyc-d.is-today { box-shadow: inset 0 0 0 2px #F3EFE8; font-weight: 800; }
.af-cyc-d.has-log::after { content: ""; position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .8; }
.af-cyc-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; font-size: 12px; color: var(--af-muted, #A8A29B); }
.af-cyc-legend span { display: inline-flex; align-items: center; gap: 5px; }
.af-cyc-legend em { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.af-cyc-btn { background: #D4537E !important; color: #fff !important; }
.af-cyc__tap { text-align: center; margin: 0 0 6px; }
.af-cyc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.af-cyc-tiles > div { background: #1F1E21; border-radius: 14px; padding: 12px; display: grid; gap: 2px; }
.af-cyc-tiles span { font-size: 12px; color: var(--af-muted, #A8A29B); }
.af-cyc-tiles strong { font-size: 18px; }
.af-cyc-reg--r_reg { color: #5DCAA5; font-size: 14px !important; }
.af-cyc-reg--r_mid { color: #EBD58A; font-size: 14px !important; }
.af-cyc-reg--r_irr { color: #F09595; font-size: 14px !important; }
.af-cyc__sub { margin: 0 0 8px; font-weight: 700; font-size: 14px; }
.af-cyc-bars { display: grid; gap: 7px; }
.af-cyc-bars > div { display: grid; grid-template-columns: 34px 1fr 24px; align-items: center; gap: 8px; font-size: 12px; color: var(--af-muted, #A8A29B); }
.af-cyc-bars i { display: block; height: 9px; border-radius: 5px; background: rgba(127, 119, 221, .4); overflow: hidden; }
.af-cyc-bars i b { display: block; height: 100%; background: #D4537E; }
.af-cyc-sym { margin: 0 0 6px; font-size: 14px; line-height: 1.45; }
.af-cyc-sym .is-m { color: #ED93B1; } .af-cyc-sym .is-f { color: #5DCAA5; } .af-cyc-sym .is-o { color: #EF9F27; } .af-cyc-sym .is-l { color: #AFA9EC; }
.af-cyc__disc { font-size: 12px; }
.af-cyc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.af-cyc-chip { position: relative; margin: 0; cursor: pointer; }
.af-cyc-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.af-cyc-chip span { display: inline-block; padding: 8px 12px; border-radius: 10px; border: 1px solid #3A393D; font-size: 14px; font-weight: 600; color: #D9D4CC; }
.af-cyc-chip input:checked + span { background: #F3EFE8; color: #1D1C1E; border-color: #F3EFE8; }
.af-cyc-chip input:focus-visible + span { outline: 2px solid #EBD58A; outline-offset: 2px; }
.af-cyc .af-check { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 14px; line-height: 1.45; }
.af-cyc .af-check input { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.af-cyc textarea { width: 100%; box-sizing: border-box; border-radius: 12px; }
.af-cyc-chart { width: 100%; height: auto; display: block; }
/* 6.205: Maria's card of a client's cycle (only when the client shares it) */
.af-cyc-coach { display: grid; gap: 8px; border: 1px solid rgba(169, 163, 238, .35); }
.af-cyc-coach--m { border-color: rgba(237, 147, 177, .4); } .af-cyc-coach--f { border-color: rgba(93, 202, 165, .35); } .af-cyc-coach--o { border-color: rgba(239, 159, 39, .35); }
.af-cyc-coach__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.af-cyc-coach__eye { margin: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; color: #A9A3EE; }
.af-cyc-coach--m .af-cyc-coach__eye { color: #ED93B1; } .af-cyc-coach--f .af-cyc-coach__eye { color: #5DCAA5; } .af-cyc-coach--o .af-cyc-coach__eye { color: #EF9F27; }
.af-cyc-coach__top span { font-size: 13px; color: var(--af-muted, #A8A29B); }
.af-cyc-coach__say { margin: 0; font-size: 15px; line-height: 1.5; }
.af-cyc-coach__bit { margin: 0; }
.af-cyc-coach__lbl { margin: 6px 0 0; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--af-muted, #A8A29B); }
.af-cyc-coach__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.af-cyc-coach__chips span { padding: 6px 12px; border-radius: 999px; background: rgba(243, 239, 232, .07); font-size: 13.5px; }
.af-cyc-coach__replies { display: grid; gap: 6px; }
.af-cyc-coach__reply { display: block; padding: 10px 12px; border-radius: 12px; background: rgba(243, 239, 232, .06); color: inherit; text-decoration: none; font-size: 14px; line-height: 1.45; }
.af-cyc-coach__more { color: #EBD58A; font-weight: 700; text-decoration: none; }
.af-cyc-coach__foot { margin: 2px 0 0; font-size: 12.5px; color: var(--af-muted, #A8A29B); }
.af-cyc-set { display: grid; gap: 8px; }
.af-beta-jtabs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.af-cyc-set .af-btn.af-btn--danger { color: #F09595 !important; border-color: rgba(240, 149, 149, .5) !important; background: transparent !important; }
/* Cycle settings: a real switch, not a box to tick */
.af-cyc-switch { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 8px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.af-cyc-switch__t { display: grid; gap: 2px; }
.af-cyc-switch__t strong { font-size: 15px; }
.af-cyc-switch__t small { font-size: 13px; color: var(--af-muted, #A8A29B); }
.af-cyc-switch__k { flex: none; width: 50px; height: 30px; border-radius: 15px; background: #3A393D; position: relative; transition: background .2s ease; }
.af-cyc-switch__k::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #F3EFE8; transition: transform .2s ease; }
.af-cyc-switch.is-on .af-cyc-switch__k { background: #5DCAA5; }
.af-cyc-switch.is-on .af-cyc-switch__k::after { transform: translateX(20px); }
.af-cyc-switch:focus-visible { outline: 2px solid #EBD58A; outline-offset: 4px; border-radius: 10px; }
.af-cyc__where { text-align: center; margin: 12px 0 4px; }
.af-cyc-set { display: grid; gap: 8px; }
.af-cyc-set .af-hint { margin: 0; }
/* Maria: pregnancy / breastfeeding panel in the client's header */
.af-mom-coach > summary.is-quiet { background: rgba(243, 239, 232, .06) !important; color: var(--af-muted, #A8A29B) !important; border-color: transparent !important; }
.af-mom-coach[open] { background: #1F1E21; border-radius: 14px; padding: 4px 0 10px; }
.af-mom-coach__f { display: grid; gap: 10px; padding: 10px 0 0; }
.af-mom-coach__q { margin: 0; font-weight: 700; font-size: 14px; }
.af-mom-coach__opts { display: grid; gap: 6px; }
.af-mom-coach__opts label { position: relative; margin: 0; cursor: pointer; }
.af-mom-coach__opts input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.af-mom-coach__opts span { display: block; padding: 9px 12px; border-radius: 10px; border: 1px solid #3A393D; font-size: 14px; font-weight: 600; color: #D9D4CC; }
.af-mom-coach__opts input:checked + span { background: #F3EFE8; color: #1D1C1E; border-color: #F3EFE8; }
.af-mom-coach__opts input:focus-visible + span { outline: 2px solid #EBD58A; outline-offset: 2px; }
.af-mom-coach__due { display: grid; gap: 6px; margin: 0; }
.af-mom-coach__due > span { font-size: 13px; color: var(--af-muted, #A8A29B); font-weight: 600; }
.af-mom-coach__due input { width: 100%; min-height: 44px; box-sizing: border-box; border-radius: 12px; }
.af-mom-coach__save:disabled { opacity: .5; }
.af-mom-coach .af-hint { margin: 0; font-size: 12px; }
/* "For your plan": what is still missing */
.af-field.is-error input, .af-field.is-error textarea { border-color: #F09595 !important; box-shadow: 0 0 0 1px #F09595 !important; }
.af-field__err { display: block; margin-top: 6px; font-size: 13px; color: #F09595; font-weight: 600; }
.af-fp-sum { margin-bottom: 12px; }
.af-mom-coach > summary { display: inline-flex !important; align-items: center; list-style: none; height: auto !important; min-height: 0 !important; }
.af-mom-coach > summary::-webkit-details-marker, .af-mom-coach > summary::marker { display: none; content: ""; }
/* Maria: the pregnancy answer, read only */
.af-mom-ro { display: inline-flex; align-items: center; }
.af-mom-ro.is-quiet { background: rgba(243, 239, 232, .06) !important; color: var(--af-muted, #A8A29B) !important; border-color: transparent !important; }
.af-mom-ro__ask { display: inline-block; margin: 6px 0 0; font-size: 13px; font-weight: 700; color: #EBD58A; text-decoration: none; }
/* Plan history: Maria's name and private note per entry */
.af-tl__note { margin: 6px 0 0; padding: 8px 10px; border-radius: 10px; background: rgba(235, 213, 138, .08); font-size: 13px; line-height: 1.45; color: #E9E3D8; }
.af-tl__edit { margin: 6px 0 0; }
.af-tl__edit > summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 700; color: #EBD58A; padding: 4px 0; }
.af-tl__edit > summary::-webkit-details-marker { display: none; }
.af-tl__form { display: grid; gap: 8px; margin: 6px 0 4px; }
.af-tl__form .af-field { display: grid; gap: 4px; margin: 0; }
.af-tl__form .af-field > span { font-size: 12px; color: var(--af-muted, #A8A29B); font-weight: 600; }
.af-tl__form input, .af-tl__form textarea { width: 100%; box-sizing: border-box; border-radius: 10px; }
.af-tl__item > .af-tl__note { margin: 0 0 6px; }
.af-tl__item > .af-tl__edit { margin: 0 0 4px; }
.af-tl__item + .af-tl__item { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(243, 239, 232, .07); }
.af-tl__item > .af-tl__edit > summary { padding: 0 0 2px; }
.af-tl__item > .af-tl__edit { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
.af-tl__item > .af-tl__edit > summary { padding: 2px 0 !important; line-height: 1.4; }
.af-tl__item > .af-tl__edit[open] { margin-bottom: 10px; }
.af-tl__item > .af-tl__edit > summary { display: flex !important; align-items: center; min-height: 40px !important; padding: 0 !important; }
.af-tl__card .af-tl__note { display: block; margin: 4px 0 2px; padding: 6px 9px; font-weight: 500; }
/* Plan history: how the weight moved with each plan */
.af-tl__kg { display: block; margin: 3px 0 1px; font-size: 13px; font-weight: 700; }
.af-tl__kg.is-good { color: #9DD3A8; }
.af-tl__kg.is-bad { color: #F09595; }
.af-tl__kg.is-flat { color: #EBD58A; }
.af-tl__kg.is-none { color: var(--af-muted, #A8A29B); font-weight: 500; }

/* ---------- Plan editor: the week grid (6.63) ---------- */
.af-pbg__layout { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 13px; color: var(--af-muted, #A8A29B); }
.af-pbg__layout > span { width: 100%; font-weight: 700; color: #F3EFE8; }
.af-pbg__lay, .af-pbg__lvl { border: 1px solid #3A393D; background: transparent; color: #D9D4CC; border-radius: 10px; padding: 7px 11px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.af-pbg__lay.is-on, .af-pbg__lvl.is-on { background: #F3EFE8; color: #1D1C1E; border-color: #F3EFE8; }
.af-pbg { padding: 12px !important; }
.af-pbg__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.af-pbg__bar > strong { font-size: 15px; margin-right: auto; }
.af-pbg__lvls { display: inline-flex; gap: 4px; }
.af-pbg__lvl { padding: 5px 9px; font-size: 12px; }
.af-pbg__tg { width: 100%; font-size: 12px; color: var(--af-muted, #A8A29B); }
.af-pbg__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.af-pbg__t { width: 100%; border-collapse: separate; border-spacing: 5px; table-layout: fixed; min-width: 640px; }
.af-pbg__t > thead th { text-align: left; vertical-align: bottom; font-weight: 700; padding: 0 4px 2px; font-size: 12px; scroll-snap-align: start; }
.af-pbg__corner { width: 78px; }
.af-pbg__sec { display: block; color: #F3EFE8; }
.af-pbg__stot { display: inline-block; margin-top: 3px; padding: 2px 6px; border-radius: 6px; font-size: 11.5px; color: #D9D4CC; background: rgba(243, 239, 232, .06); }
.af-pbg__stot.is-ok { color: #9DD3A8; background: rgba(93, 202, 165, .14); }
.af-pbg__stot.is-near { color: #EBD58A; background: rgba(239, 159, 39, .14); }
.af-pbg__stot.is-off { color: #F09595; background: rgba(226, 75, 74, .16); }
.af-pbg__slot { text-align: left; vertical-align: top; font-size: 12px; font-weight: 700; color: var(--af-muted, #A8A29B); padding: 8px 2px 0; position: sticky; left: 0; background: var(--af-card, #1F1E21); z-index: 1; }
.af-pbg__t > tbody > tr > td { vertical-align: top; padding: 0; }
.af-pbg__cell { position: relative; background: #2A292C; border-radius: 10px; padding: 7px 26px 7px 8px; min-height: 40px; }
.af-pbg__open { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: 6px; background: transparent; color: #EBD58A; font-size: 12px; cursor: pointer; padding: 0; }
.af-pbg__open:hover, .af-pbg__open:focus-visible { background: rgba(235, 213, 138, .14); }
.af-pbg__ft { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.35; }
.af-pbg__ft td { padding: 1px 0; vertical-align: middle; }
.af-pbg__fn { padding-right: 4px !important; overflow-wrap: anywhere; }
.af-pbg__fg { width: 46px; }
.af-pbg__fk, .af-pbg__fp { width: 32px; text-align: right; color: var(--af-muted, #A8A29B); font-variant-numeric: tabular-nums; }
.af-pbg__g { width: 44px; box-sizing: border-box; padding: 2px 4px; border-radius: 6px; border: 1px solid transparent; background: rgba(243, 239, 232, .08); color: #F3EFE8; font: inherit; font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.af-pbg__g:hover { border-color: #3A393D; }
.af-pbg__g:focus { outline: none; border-color: #D2B04C; background: #F3EFE8; color: #1D1C1E; }
.af-pbg__mt { display: block; margin-top: 4px; padding-top: 3px; border-top: 1px solid rgba(243, 239, 232, .08); font-size: 11.5px; font-weight: 700; color: #EBD58A; }
.lvl-tot .af-pbg__mt { border: 0; margin: 0; padding: 0; }
.af-pbg__empty { color: #6B6A70; }
.af-pbg__hint { margin: 8px 0 0; font-size: 12px; }
.af-pb__meal.is-flash { outline: 2px solid #D2B04C; outline-offset: 3px; border-radius: 12px; transition: outline-color .4s ease; }
/* Phones: one day group at a time, the meal names stay */
@media (max-width: 699px) {
	.af-pbg__t { min-width: calc(78px + 3 * 78vw); }
	.af-pbg__corner { width: 64px; }
}
/* Laptops: the grid on the left (kept in view), the meals editor on the right */
@media (min-width: 1100px) {
	.af-account:has(.af-pbg), .af-account:has(.af-pbg) .af-home { max-width: min(1320px, 96vw) !important; }
	.af-pb:has(> .af-pbg) { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(330px, 1fr); column-gap: 18px; align-items: start; }
	.af-pb:has(> .af-pbg) > * { grid-column: 2; }
	.af-pb:has(> .af-pbg) > .af-pbg__layout { grid-column: 1; grid-row: 1; }
	.af-pb:has(> .af-pbg) > .af-pbg { grid-column: 1; grid-row: 2 / span 60; position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow: auto; }
	.af-pbg__t { min-width: 0; }
}
/* The grid scrolls inside the screen instead of widening the page */
.af-pb, .af-pbg, .af-pbg__scroll { min-width: 0; max-width: 100%; }
.af-account > *:has(.af-pb), .af-home:has(.af-pb) { min-width: 0; }
/* Grid: compact weight fields (the global field styles are made for phones) */
.af-pbg .af-pbg__g { width: 46px !important; min-height: 0 !important; height: 24px !important; padding: 1px 5px !important; font-size: 12.5px !important; line-height: 1.2 !important; border-radius: 6px !important; box-shadow: none !important; }
.af-pbg__ft td.af-pbg__fg { width: 50px; }
@media (max-width: 699px) {
	/* One day group fills the visible width; scrolling stops at each one. */
	.af-pbg__t { min-width: calc(64px + 3 * (100vw - 132px)); }
	.af-pbg__t > thead th:not(.af-pbg__corner), .af-pbg__t > tbody > tr > td { scroll-snap-align: start; scroll-margin-left: 70px; }
	.af-pbg__scroll { scroll-snap-type: x mandatory; scroll-padding-left: 70px; }
}
@media (min-width: 1100px) {
	.af-pb:has(> .af-pbg) { grid-template-columns: minmax(0, 2.3fr) minmax(300px, 1fr); }
}
/* ---------- Plan grid on a phone (6.63.1): totals on top, compact cells, swipe ---------- */
.af-pbg__chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 10px; }
.af-pbg__chip { border: 0; border-radius: 10px; background: #2A292C; color: var(--af-muted, #A8A29B); font: inherit; font-size: 11px; line-height: 1.3; text-align: left; padding: 7px 8px; cursor: pointer; overflow: hidden; }
.af-pbg__chip b { display: block; font-size: 15px; color: #F3EFE8; }
.af-pbg__chip.is-ok b { color: #9DD3A8; } .af-pbg__chip.is-near b { color: #EBD58A; } .af-pbg__chip.is-off b { color: #F09595; }
.af-pbg__t.is-phone { min-width: calc(64px + 3 * 60vw) !important; }
.af-pbg__t.is-phone > thead th:not(.af-pbg__corner) .af-pbg__stot { display: none; }
.af-pbg__cellbtn { width: 100%; min-height: 52px; display: grid; gap: 3px; align-content: start; text-align: left; border: 0; border-radius: 10px; background: #2A292C; color: #F3EFE8; font: inherit; font-size: 12.5px; line-height: 1.35; padding: 8px 9px; cursor: pointer; }
.af-pbg__cellbtn:active { background: #3A393D; }
.af-pbg__names { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; }
.af-pbg__cellbtn .af-pbg__mt { margin: 0; padding: 0; border: 0; font-size: 12px; }
@media (max-width: 699px) { .af-pbg__lvls { display: none; } }
/* The meal panel from the bottom */
.af-pbms__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.af-pbms__it { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; background: #2A292C; border-radius: 12px; padding: 8px 8px 8px 11px; }
.af-pbms__n { font-weight: 600; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.af-pbms__n small { display: block; font-weight: 500; font-size: 12px; color: var(--af-muted, #A8A29B); margin-top: 2px; }
.af-pbms__step { display: inline-flex; align-items: center; gap: 4px; }
.af-pbms__step button { width: 32px; height: 32px; border: 0; border-radius: 9px; background: #141315; color: #F3EFE8; font-size: 18px; font-weight: 700; cursor: pointer; }
.af-pbms__step input { width: 54px !important; min-height: 0 !important; height: 32px !important; padding: 0 6px !important; border-radius: 9px !important; text-align: center; font-size: 15px !important; font-variant-numeric: tabular-nums; }
.af-pbms__rm { width: 30px; height: 30px; border: 0; border-radius: 9px; background: transparent; color: #6B6A70; font-size: 14px; cursor: pointer; }
.af-pbms__add { width: 100%; margin-top: 8px; padding: 10px; border: 1px dashed #3A393D; border-radius: 12px; background: transparent; color: var(--af-muted, #A8A29B); font: inherit; font-weight: 700; cursor: pointer; }
.af-pbms__tot { margin: 10px 0; font-weight: 700; color: #EBD58A; }
.af-pbg__t.is-phone { min-width: calc(64px + 3 * 50vw) !important; }
.af-pbms .af-pbms__done { font-family: inherit !important; font-weight: 800; }
.af-pbms .af-sheet__cancel { visibility: hidden; }
/* Maria: her card, with her daily needs, intolerances and preferences */
.af-client-head__needs { margin: 8px 0 4px; display: grid; gap: 6px; }
.af-client-head__needs > div { display: grid; gap: 1px; }
.af-client-head__needs dt { font-size: 12px; font-weight: 700; color: var(--af-muted, #A8A29B); }
.af-client-head__needs dd { margin: 0; font-size: 14px; line-height: 1.4; color: #F3EFE8; }
.af-client-head__needs .is-alert dd { color: #F09595; font-weight: 600; }
/* Home arc: "I skipped it" and the night */
.af-bh__btns { flex-wrap: wrap; }
.af-bh__skip { background: transparent; color: var(--af-muted, #A8A29B); border: 1px solid rgba(243, 239, 232, .14); }
.af-bh__done.is-skip { color: #C9C4BD; background: rgba(143, 137, 150, .2); }
.af-bh__moon { font-size: 26px; line-height: 1; }
/* ---------- Maria: the client's card, compact (6.63.4) ---------- */
.af-client-head.af-ch { display: block; padding: 10px 12px !important; }
.af-ch__top { display: flex; align-items: center; gap: 10px; }
.af-ch__top .af-avatar, .af-ch__top > :first-child { flex: none; width: 40px !important; height: 40px !important; font-size: 15px !important; }
.af-ch__who { flex: 1; min-width: 0; }
.af-ch__facts { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.25; }
.af-ch__seen { margin: 1px 0 0; font-size: 12px; color: var(--af-muted, #A8A29B); }
.af-ch__acts { display: flex; gap: 6px; flex: none; }
.af-ch__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #2A292C; text-decoration: none; font-size: 14px; color: #F3EFE8; font-weight: 800; }
.af-ch__ic--wa { color: #25D366; }
.af-ch__ic--msg { background: #D2B04C; color: #141315; }
.af-ch__nums { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin: 8px 0 6px; font-size: 12.5px; color: var(--af-muted, #A8A29B); }
.af-ch__nums b { color: #F3EFE8; font-size: 14px; }
.af-ch__nums i { font-style: normal; opacity: .5; }
.af-ch__chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.af-ch__chips .af-chip { margin: 0 !important; padding: 3px 8px !important; font-size: 12px !important; line-height: 1.4; }
.af-ch__sub { text-decoration: none; }
.af-ch__chips .af-mom-ro__ask { margin: 0 0 0 2px; font-size: 12px; }
.af-ch__alert { margin: 6px 0 0; font-size: 12.5px; font-weight: 700; color: #F09595; }
.af-ch__more { margin-top: 6px; }
.af-ch__more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 32px; font-size: 12.5px; font-weight: 700; color: #EBD58A; }
.af-ch__more > summary::-webkit-details-marker { display: none; }
.af-ch__more > summary::after { content: " ▾"; margin-left: 3px; }
.af-ch__more[open] > summary::after { content: " ▴"; }
.af-ch__more .af-client-head__needs { margin: 2px 0 4px; }
.af-ch__phone { margin: 4px 0 0; font-size: 13px; }
.af-ch__chips .af-ch__sub { background: rgba(93, 202, 165, .12) !important; color: #9DD3A8 !important; border-radius: 8px; }
.af-ch__chips .af-ch__sub.af-subline--soon { background: rgba(239, 159, 39, .14) !important; color: #EBD58A !important; }
.af-ch__chips .af-ch__sub.af-subline--expired, .af-ch__chips .af-ch__sub.af-subline--unpaid { background: rgba(226, 75, 74, .14) !important; color: #F09595 !important; }
.af-bh__night { line-height: 1.15; }
/* "I skipped it": a quiet link under the two main buttons */
.af-bh__alt { margin: 6px 0 0; text-align: center; }
.af-bh__alt .af-bh__skip { background: none !important; border: 0 !important; padding: 6px 10px; min-height: 32px; font: inherit; font-size: 13.5px; font-weight: 600; color: rgba(243, 239, 232, .72); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(243, 239, 232, .35); cursor: pointer; }
.af-bh__alt .af-bh__done.is-skip { font-size: 13.5px; padding: 4px 10px; border-radius: 8px; }
.af-bh__arcbox:has(.af-bh__alt) { margin-bottom: 26px; }
.af-bh__arcbox:has(.af-bh__alt) { margin-bottom: 42px; }
/* Shopping list: Maria's ingredients under each recipe */
.af-shop__ing-h { margin: 6px 0 2px 34px; font-size: 11.5px; font-weight: 700; color: var(--af-muted, #A8A29B); text-transform: none; }
.af-shop__ing { list-style: none; margin: 0 0 4px 22px; padding: 0 0 0 10px; border-left: 2px solid rgba(235, 213, 138, .25); }
.af-shop__ing > li { padding: 0; }
.af-shop__item--ing .af-pj__name { font-size: 14px; font-weight: 500; }
.af-shop__item--ing { padding-top: 5px !important; padding-bottom: 5px !important; }
.af-shop__group > li:has(.af-shop__ing) { flex-wrap: wrap; }
.af-shop__group > li > .af-shop__ing-h, .af-shop__group > li > .af-shop__ing { flex: 0 0 100%; width: 100%; box-sizing: border-box; }
.af-shop__group > li > .af-shop__ing { flex: 0 0 calc(100% - 22px); width: calc(100% - 22px); }
.af-shop__group > li > .af-shop__ing-h { flex: 0 0 calc(100% - 34px); width: calc(100% - 34px); }
/* A tick strikes only its own line: a ticked ingredient does not strike the recipe or the other ingredients */
.af-shop__group li:has(input:checked) .af-pj__name { text-decoration: none; }
.af-shop__group li:has(input:checked) { opacity: 1; }
.af-shop__group .af-shop__item:has(> input:checked) .af-pj__name { text-decoration: line-through; }
.af-shop__group .af-shop__item:has(> input:checked) .af-pj__txt { opacity: .55; }
/* A recipe moves to the bottom only when the recipe itself is ticked, not when one of its ingredients is */
.af-shop__group > li:has(.af-shop__ing):not(:has(> label input:checked)) { order: 0; }

/* ---------- Recipe labels (6.65) ---------- */
.af-rname-row { display: grid; gap: 10px; }
@media (min-width: 760px) { .af-rname-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; } }
.af-rtag { position: relative; }
.af-rtag__pick { border: 1px solid #3A393D; border-radius: 12px; background: rgba(243, 239, 232, .04); }
.af-rtag__sum { list-style: none; cursor: pointer; display: flex; align-items: center; min-height: 44px; padding: 6px 34px 6px 10px; position: relative; }
.af-rtag__sum::-webkit-details-marker { display: none; }
.af-rtag__sum::after { content: "▾"; position: absolute; right: 12px; color: var(--af-muted, #A8A29B); }
.af-rtag__pick[open] > .af-rtag__sum::after { content: "▴"; }
.af-rtag__chosen { display: flex; flex-wrap: wrap; gap: 4px; }
.af-rtag__chip, .af-pbg__tag { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 8px; background: rgba(175, 169, 236, .16); color: #CECBF6; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.af-rtag__ph { color: var(--af-muted, #A8A29B); font-size: 14px; }
.af-rtag__panel { padding: 8px 10px 10px; display: grid; gap: 8px; border-top: 1px solid #3A393D; }
.af-rtag__q, .af-pbtag__q { width: 100%; box-sizing: border-box; }
.af-rtag__new, .af-pbtag__new { justify-self: start; border: 1px dashed #6B6A70; background: transparent; color: #EBD58A; border-radius: 10px; padding: 7px 12px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.af-rtag__newrow, .af-pbtag__newrow { display: flex; gap: 6px; }
.af-rtag__newrow[hidden], .af-pbtag__newrow[hidden] { display: none; }
.af-rtag__newrow input, .af-pbtag__newrow input { flex: 1; min-width: 0; }
.af-rtag__add, .af-pbtag__add { border: 0; border-radius: 10px; background: #D2B04C; color: #141315; font: inherit; font-weight: 800; padding: 0 14px; cursor: pointer; }
.af-rtag__list, .af-pbtag__list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow: auto; display: grid; gap: 2px; }
.af-rtag__list label, .af-pbtag__list label { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px; cursor: pointer; font-size: 14.5px; }
.af-rtag__list label:hover, .af-pbtag__list label:hover { background: rgba(243, 239, 232, .05); }
.af-rtag__list input, .af-pbtag__list input { width: 20px; height: 20px; flex: none; }
.af-rtag__none { margin: 0; font-size: 13px; color: var(--af-muted, #A8A29B); }
/* Content → Labels */
.af-rtadm__add { display: grid; gap: 8px; }
.af-rtadm__row > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.af-rtadm__row > summary::-webkit-details-marker { display: none; }
.af-rtadm__n { font-weight: 700; }
.af-rtadm__c { font-size: 13px; color: var(--af-muted, #A8A29B); }
.af-rtadm__edit { display: grid; gap: 8px; padding: 6px 0 12px; }
.af-rtadm__f { display: grid; gap: 8px; margin: 0; }
/* Labels on a meal: in the grid (laptop) and the meal panel (phone) */
.af-pbg__tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 6px; }
.af-pbg__tag { font-size: 11.5px; padding: 2px 7px; }
.af-pbg__tagadd { border: 1px dashed #4A494E; background: transparent; color: #EBD58A; border-radius: 8px; padding: 2px 8px; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.af-pbms__tags { margin: 0 0 10px; }
.af-pbms__tags .af-pbg__tag { font-size: 13px; padding: 4px 9px; }
.af-pbms__tags .af-pbg__tagadd { font-size: 13px; padding: 5px 10px; }
.af-pbtag .af-sheet__body { display: grid; gap: 10px; }
.af-pbtag .af-sheet__cancel { visibility: hidden; }
.af-pbtag .af-pbtag__done { font-family: inherit !important; font-weight: 800; }
/* "+ Add a food": filters in one scrolling row; arrows on a laptop */
.af-pbadd__catwrap { position: relative; display: flex; align-items: center; gap: 4px; margin: 8px 0; }
.af-pbadd__catwrap .af-pbadd__cats { flex: 1; display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 !important; scroll-behavior: smooth; }
.af-pbadd__catwrap .af-pbadd__cats::-webkit-scrollbar { display: none; }
.af-pbadd__catwrap .af-pbadd__cat { flex: none; white-space: nowrap; }
.af-pbadd__cat--tag { border-color: rgba(175, 169, 236, .5) !important; color: #CECBF6 !important; }
.af-pbadd__cat--tag[aria-pressed="true"] { background: #CECBF6 !important; color: #1D1C1E !important; }
.af-pbadd__arrow { display: none; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #3A393D; background: #2A292C; color: #F3EFE8; font-size: 17px; line-height: 1; cursor: pointer; }
.af-pbadd__arrow:disabled { opacity: .3; cursor: default; }
@media (hover: hover) and (pointer: fine) and (min-width: 700px) {
	.af-pbadd__catwrap.is-scrollable .af-pbadd__arrow { display: inline-grid; place-items: center; }
	.af-pbadd__catwrap .af-pbadd__arrow[data-dir="-1"] { order: -1; }
}
.af-pbadd__catwrap { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.af-pbadd__catwrap .af-pbadd__cats { min-width: 0; max-width: 100%; }
.af-pbadd .af-sheet__body { min-width: 0; }
/* Grid levels: Foods = names only; Main = the meal's labels, the whole cell opens the meal */
.af-pbg__names-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 12.5px; line-height: 1.35; }
.af-pbg__cell.is-main { cursor: pointer; min-height: 52px; transition: background .15s ease; }
.af-pbg__cell.is-main:hover { background: #333236; }
.af-pbg__cell.is-main .af-pbg__tags { margin-top: 0; }
.af-pbg__cell.is-main .af-pbg__empty { display: block; font-size: 12px; margin-bottom: 4px; }
/* 6.66: the food picker of the ideal plate — quick filters (the groups of the section), one row that scrolls sideways */
.af-plate__grp { display: flex; gap: 6px; margin: 0 -16px; padding: 2px 16px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.af-plate__grp::-webkit-scrollbar { display: none; }
.af-plate__grp[hidden] { display: none; }
.af-plate__grp button { flex: none; min-height: 34px; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(243, 239, 232, .16); background: transparent; color: #E6E1DA; font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; }
.af-plate__grp button span { margin-left: 3px; color: #8F8996; font-weight: 500; font-size: 12px; }
.af-plate__grp button.is-on { background: linear-gradient(135deg, #EBD58A, #D2B04C); border-color: transparent; color: #141315; }
.af-plate__grp button.is-on span { color: rgba(20, 19, 21, .65); }
.af-plate__grp:not([hidden]) + .af-plate__list { max-height: calc(52vh - 64px); }
/* The "Add (n)" button of the picker: as wide as the sheet, like the other main buttons. */
.af-plate__pickbar { padding-left: 16px; padding-right: 16px; }
.af-plate__pickbar .af-btn--block { display: flex; justify-content: center; width: 100%; box-sizing: border-box; }

/* 6.67: FAQ in English and Spanish (Content → FAQ), the free plan form on the public page */
.af-faqtr { margin: 14px 0 4px; }
.af-faqtr > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: 8px; list-style: none; color: var(--af-gold-light, #EBD58A); }
.af-faqtr > summary::-webkit-details-marker { display: none; }
.af-faqtr > summary::before { content: "+"; font-size: 1.2rem; line-height: 1; }
.af-faqtr[open] > summary::before { content: "–"; }
.af-faqtr .af-cfield { margin-top: 12px; }

/* 6.68: the plan for next week (tabs, band, Home card, mark on the Plan button) and closed days in the journal */
.af-plantabs { grid-template-columns: 1fr 1fr !important; margin: 0 0 14px; }
.af-plantabs a { white-space: nowrap; padding-inline: 6px; }
.af-plantabs a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.af-plantabs__new, .af-nav-new { background: #F2CDD3; color: #3A1C24; font: 800 .6rem/1 var(--wp--preset--font-family--figtree, inherit); letter-spacing: .04em; padding: 3px 5px; border-radius: 999px; }
.af-appnav a, .af-tabs a { position: relative; }
.af-nav-new { position: absolute; top: -8px; left: calc(50% + 8px); z-index: 3; box-shadow: 0 0 0 2px #1D1C1E; }
.af-appnav a.af-nav-plan .af-nav-new { top: -30px; left: calc(50% + 10px); }
.af-plannext, .af-lockday, .af-plansched { display: block; margin: 0 0 14px; padding: 13px 15px; border-radius: 18px; background: rgba(242, 205, 211, .1); border: 1px solid rgba(242, 205, 211, .38); }
.af-plannext strong, .af-lockday strong, .af-plansched strong { display: block; font-size: .97rem; line-height: 1.3; color: #F2CDD3; }
.af-plannext span, .af-lockday span, .af-plansched span { display: block; margin-top: 3px; font-size: .85rem; line-height: 1.4; color: var(--wp--preset--color--muted, #C9C4BD); }
.af-plannextcard { margin-top: 14px; background: linear-gradient(135deg, rgba(235, 213, 138, .18), rgba(235, 213, 138, .06)) !important; border: 1.5px solid rgba(235, 213, 138, .55) !important; }
.af-jday.is-locked .af-stepper__btn, .af-jday.is-locked .af-jrow--add, .af-jday.is-locked .af-pj__hint, .af-jday.is-locked .af-jstatus,
.af-jday.is-locked .af-jday__weighthint, .af-jday.is-locked .af-meal__del, .af-jday.is-locked .af-pj__mode [aria-checked="false"] { display: none !important; }
.af-jday.is-locked :is(input, textarea, select, button):disabled { opacity: 1; cursor: default; -webkit-text-fill-color: currentColor; }
.af-jday.is-locked .af-jrow__val.is-add { visibility: hidden; }
.af-jday.is-locked .af-pj__item, .af-jday.is-locked .af-adh__opt { pointer-events: none; }
/* Maria: when the plan comes into force */
.af-planwhen { margin: 14px 0; padding: 14px; border: 1px solid rgba(243, 239, 232, .14); border-radius: 18px; }
.af-planwhen legend { padding: 0 6px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--muted, #C9C4BD); }
.af-planwhen label { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border-radius: 14px; margin-top: 6px; border: 1px solid rgba(243, 239, 232, .14); cursor: pointer; }
.af-planwhen label:has(input:checked) { border-color: var(--wp--preset--color--gold, #D2B04C); background: rgba(210, 176, 76, .1); }
.af-planwhen input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: #D2B04C; }
.af-planwhen strong { display: block; font-size: .97rem; line-height: 1.25; }
.af-planwhen small { display: block; margin-top: 2px; font-size: .85rem; line-height: 1.35; color: var(--wp--preset--color--muted, #C9C4BD); }
.af-plansched__hint { font-size: .8rem !important; }
.af-plansched__acts { display: flex !important; align-items: center; gap: 18px; margin-top: 10px !important; }
.af-plansched__acts a, .af-plansched__acts button { display: inline-flex; align-items: center; margin: 0; background: none; border: 0; padding: 6px 0; min-height: 32px; line-height: 1.2; font: inherit; font-weight: 600; color: var(--wp--preset--color--gold-light, #EBD58A); text-decoration: none; cursor: pointer; }
.af-tl__item.is-sched .af-tl__dot { background: #F2CDD3; }
.af-shop[data-next] .af-shop__period { display: none; } /* The list of next week's plan has one view: the whole week. */
.af-jday.is-locked .af-jrow .af-chev { visibility: hidden; }
.af-jday.is-locked .af-jrow { cursor: default; }
.af-locknote { margin-top: 12px; padding: 14px 16px; }
.af-locknote strong { display: block; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--wp--preset--color--muted, #C9C4BD); }
.af-locknote p { margin: 6px 0 0; font-size: .95rem; line-height: 1.5; }

/* 6.69: the arc of the day in the Journal is a quarter smaller; the names and hours of the meals keep their size */
.af-bj .af-bh__arcbox { max-width: 225px !important; }
.af-bj .af-bh__name { font-size: 20px; }
.af-bj .af-bh__now { font-size: 11.5px; }
.af-bj .af-bh__kc { font-size: 12px; }
.af-bj .af-bh__arc text[font-size="11.5"] { font-size: 15px; }
.af-bj .af-bh__arc text[font-size="10.5"] { font-size: 13.5px; }

/* 6.69: the photos used today, under "Photograph your meal"; at the limit the button is off */
.af-photo-count { margin: -4px 0 12px; text-align: center; font-size: .82rem; line-height: 1.35; color: var(--wp--preset--color--muted, #C9C4BD); }
.af-photo-count.is-limit { margin-top: 0; padding: 10px 12px; border-radius: 12px; background: rgba(242, 205, 211, .1); border: 1px solid rgba(242, 205, 211, .38); color: #F2CDD3; font-size: .85rem; }
.af-photo-btn.is-limit, .af-photo-btn:disabled { opacity: .45; cursor: default; }
.af-plate__photo .af-photo-count { margin: 4px 0 6px; }

/* 6.69: tips & tricks — a thin banner at the top of Home, under the greeting */
.af-tip { position: relative; display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 6px; padding: 11px 42px 13px 13px; border-radius: 16px; background: rgba(29, 28, 30, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(235, 213, 138, .45); overflow: hidden; text-align: left; box-sizing: border-box; z-index: 2; }
.af-tip__icon { flex: none; font-size: 18px; line-height: 1.2; }
.af-tip__body { min-width: 0; }
.af-tip__eyebrow { margin: 0 0 3px; font-size: 11px; line-height: 1; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #EBD58A; }
.af-tip__text { margin: 0; font-size: 14px; line-height: 1.4; color: #F3EFE8; }
.af-tip__go { display: inline-block; margin-top: 4px; padding: 2px 0; font-size: 13.5px; font-weight: 700; color: #EBD58A; text-decoration: none; }
.af-tip__x { position: absolute; top: 2px; right: 2px; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: #C9C4BD; font-size: 20px; line-height: 1; cursor: pointer; }
.af-tip__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #D2B04C; border-radius: 0 3px 3px 0; transition: width .2s linear; }

/* 6.69: recipes — what was indexed from "Micronutrients", and the filter by micronutrient in the list */
.af-rmicro__hint { margin: -6px 0 10px; }
.af-rmicro { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; font-size: .82rem; }
.af-rmicro__t { flex: 0 0 100%; font-weight: 700; color: #9DB39A; }
.af-rmicro--bad .af-rmicro__t { color: #F2CDD3; }
.af-rmicro__chip { padding: 4px 9px; border-radius: 999px; background: rgba(157, 179, 154, .14); border: 1px solid rgba(157, 179, 154, .4); line-height: 1.25; }
.af-rmicro--bad .af-rmicro__chip { background: rgba(242, 205, 211, .1); border-color: rgba(242, 205, 211, .4); }
.af-rmicro__why { flex: 0 0 100%; color: var(--wp--preset--color--muted, #C9C4BD); line-height: 1.35; }
/* 6.220: the ingredient lines, recognised (under "Ingredients": recognised, "poate fi", not recognised, no grams, to taste) */
.af-ring__hint { margin: -6px 0 10px; }
.af-ring { margin: 0 0 4px; }
.af-ring .af-rmicro__chip { max-width: 100%; overflow-wrap: anywhere; }
.af-ring__g--maybe .af-rmicro__t { color: #EBD58A; }
.af-ring__g--maybe .af-rmicro__chip { background: rgba(235, 213, 138, .1); border-color: rgba(235, 213, 138, .45); }
.af-ring__g--nog .af-rmicro__t, .af-ring__g--taste .af-rmicro__t { color: var(--wp--preset--color--muted, #C9C4BD); }
.af-ring__g--nog .af-rmicro__chip, .af-ring__g--taste .af-rmicro__chip { background: rgba(243, 239, 232, .05); border-color: rgba(243, 239, 232, .22); }
.af-ring__sum { margin: 0 0 12px; line-height: 1.4; }
.af-ring__sum.is-off { color: #EBD58A; }
.af-search:has(.af-cmicro) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.af-cmicro { max-width: 46vw; min-height: 44px; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(243, 239, 232, .18); background: rgba(243, 239, 232, .06); color: inherit; font: inherit; font-size: .9rem; }
.af-cmicro option { color: #1D1C1E; }
.af-cmi { flex: none; margin-left: 8px; padding: 3px 8px; border-radius: 999px; background: rgba(157, 179, 154, .16); color: #C9DDC6; font-size: .8rem; font-weight: 700; white-space: nowrap; }

/* 6.70: the recipe library (Content → Recipes) */
.af-lib .af-btn { margin-top: 10px; }
.af-lib__back { margin: 0 0 10px; }
.af-lib__back a { color: var(--wp--preset--color--gold-light, #EBD58A); text-decoration: none; font-weight: 600; }
.af-lib__filter { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 10px; }
.af-lib__filter input[type=search] { grid-column: 1 / -1; }
.af-lib__filter input, .af-lib__filter select { min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(243, 239, 232, .18); background: rgba(243, 239, 232, .06); color: inherit; font: inherit; font-size: .92rem; min-width: 0; }
.af-lib__filter select option { color: #1D1C1E; }
.af-lib__filter button { grid-column: 1 / -1; }
.af-lib__row { align-items: center; }
.af-lib__row.is-pub .af-row__text span { color: #C9DDC6; }
.af-lib__acts { flex: none; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; margin-left: 8px; }
.af-lib__acts a, .af-lib__acts button { background: none; border: 0; padding: 6px 4px; min-height: 32px; font: inherit; font-size: .88rem; font-weight: 700; color: var(--wp--preset--color--gold-light, #EBD58A); text-decoration: none; cursor: pointer; }
.af-lib__acts form { margin: 0; }
.af-lib__pages { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 14px 0; font-size: .9rem; color: var(--wp--preset--color--muted, #C9C4BD); }
.af-lib__pages a { color: var(--wp--preset--color--gold-light, #EBD58A); text-decoration: none; font-weight: 700; }
.af-lib__pages a:last-child { text-align: right; }
.af-rportion { margin: -4px 0 12px; }
.af-rsheet__note { margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(243, 239, 232, .06); font-size: .88rem; line-height: 1.45; color: var(--wp--preset--color--muted, #C9C4BD); }

/* 6.71 — the library apart from Maria's own recipes: two tabs, a label on every recipe, "Move to my recipes". */
.af-rectabs { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, .08); margin: 0 0 14px; }
.af-rectabs a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; box-sizing: border-box; padding: 9px 6px; border-radius: 9px; color: var(--af-muted); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
.af-rectabs a.is-active { background: #3A393D; color: #F3EFE8; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.af-rectabs a:active { transform: scale(.98); }
.af-rectabs small { opacity: .7; font-size: .75rem; font-weight: 600; }
.af-lib__intro { margin: 0 0 12px; }
.af-rsrc { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 5px 11px; border-radius: 999px; font-size: .75rem; font-weight: 700; line-height: 1; letter-spacing: .03em; }
.af-rsrc--lib { background: rgba(243, 239, 232, .08); box-shadow: inset 0 0 0 1px rgba(243, 239, 232, .22); color: var(--wp--preset--color--muted, #C9C4BD); }
.af-rsrc--own { background: rgba(235, 213, 138, .12); box-shadow: inset 0 0 0 1px rgba(235, 213, 138, .4); color: var(--wp--preset--color--gold-light, #EBD58A); }
.af-rsheet .af-rsrc { display: flex; width: -moz-fit-content; width: fit-content; max-width: 100%; margin-top: 2px; justify-self: start; align-self: flex-start; }
.af-lib__one .af-inline-form { display: block; margin: 0; }
.af-lib__own { display: block; width: 100%; margin: 4px 0 8px; padding: 11px 14px; min-height: 44px; border-radius: 14px; background: none; border: 1px solid rgba(235, 213, 138, .45); color: var(--wp--preset--color--gold-light, #EBD58A); font: inherit; font-size: .9rem; font-weight: 700; text-align: center; cursor: pointer; }
.af-lib__ownnote { margin: 0 0 14px; font-size: .8rem; }
.af-lib .af-inline-form { display: block; margin: 0; }
.af-lib .af-btn { width: 100%; }

/* 6.72 — Home: the rank bar under the greeting; the night inside the arc; the page "My level". */
.af-rank { position: relative; z-index: 2; display: flex; align-items: center; gap: 8px; margin: 6px 2px 4px; padding: 3px 2px; text-decoration: none; font-size: 11px; font-weight: 700; line-height: 1; color: #F3EFE8; -webkit-tap-highlight-color: transparent; }
.af-rank::after { content: ""; position: absolute; inset: -9px 0; } /* A comfortable tap area around a thin row. */
.af-rank__now, .af-rank__next { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.af-rank__next { color: var(--wp--preset--color--muted, #C9C4BD); font-weight: 600; }
.af-rank__bar { flex: 1; display: block; position: relative; height: 5px; border-radius: 99px; background: rgba(243, 239, 232, .16); overflow: hidden; }
.af-rank__bar i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, #D2B04C, #EBD58A); }
.af-rank:active { opacity: .8; }
/* The night text was sized against its parent (.78em of 16px = 13px) instead of the arc's title. */
.af-bh__moon { font-size: 32px; }
.af-bh__name.af-bh__night { font-size: 27px; line-height: 1.12; }
.af-bh__night + .af-bh__kc { font-size: 15.5px; margin-top: 6px; color: #C9C4BD; }
.af-bh__name.af-bh__bed { margin-top: 18px; font-family: inherit; font-size: 19px; font-weight: 700; line-height: 1.2; color: #EBD58A; }
.af-bh__bed + .af-bh__bedgo { margin-top: 1px; font-size: 15px; font-weight: 700; }
.af-bh__bedgo a { display: inline-block; padding: 6px 12px; color: #EBD58A; text-decoration: none; }
.af-account section.af-cd { scroll-margin-top: -40px; } /* The theme already keeps 110px free at the top; the card lands right under the app bar. */
.af-ranks__h { margin: 0 0 8px; font-size: 1.05rem; font-weight: 800; line-height: 1.25; text-transform: none; letter-spacing: 0; color: #F3EFE8; }
.af-ranks__list, .af-ranks__rules { margin: 0; padding: 0; list-style: none; }
.af-ranks__row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(243, 239, 232, .08); }
.af-ranks__row:first-child, .af-ranks__rules li:first-child { border-top: 0; }
.af-ranks__ic { flex: none; width: 28px; text-align: center; font-size: 22px; line-height: 1; }
.af-ranks__t { flex: 1; min-width: 0; }
.af-ranks__t strong { display: block; font-size: .95rem; line-height: 1.2; }
.af-ranks__t small { display: block; margin-top: 3px; font-size: .8rem; color: var(--wp--preset--color--muted, #C9C4BD); }
.af-ranks__row em { flex: none; padding: 5px 9px; border-radius: 99px; background: rgba(235, 213, 138, .14); box-shadow: inset 0 0 0 1px rgba(235, 213, 138, .45); color: #EBD58A; font-size: .7rem; font-style: normal; font-weight: 700; line-height: 1; white-space: nowrap; }
.af-ranks__row.is-ahead .af-ranks__ic, .af-ranks__row.is-ahead .af-ranks__t { opacity: .55; }
.af-ranks__rules li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(243, 239, 232, .08); font-size: .9rem; line-height: 1.35; }
.af-ranks__rules b { color: #EBD58A; white-space: nowrap; }
.af-ranks__fine { margin: 10px 0 0; font-size: .8rem; }

/* 6.73 — the Maintenance Plan: its card on My account → Subscription, and the mark in Maria's lists. */
.af-mplan .af-plan__box { gap: 6px; padding: 14px; }
.af-mplan__list { display: grid; gap: 5px; margin: 4px 0 2px; }
.af-mplan__list > span { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.4; color: #F3EFE8; }
.af-mplan__list > span::before { content: "✓"; position: absolute; left: 2px; top: 0; color: #7FD1A8; font-weight: 800; }
.af-mplan__starts { margin: 2px 2px 0; }
.af-mtag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(157, 179, 154, .18); box-shadow: inset 0 0 0 1px rgba(157, 179, 154, .5); color: #C9DDC6; font-size: 11px; font-style: normal; font-weight: 700; line-height: 1.5; vertical-align: middle; }
.af-cmaint .af-cpay__form { margin-top: 8px; }

/* 6.92 — the Light Plan: its card on My account → Subscription, and the mark in Maria's lists. */
.af-mtag--light { background: rgba(215, 180, 106, .16); box-shadow: inset 0 0 0 1px rgba(215, 180, 106, .5); color: #EBD9AE; }
.af-lplan__not { margin: 8px 2px 0; }
section.af-lplan { display: grid; gap: 8px; padding: 14px; }
section.af-lplan .af-plan__top { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: 1.05rem; }
section.af-lplan .af-plan__sub, section.af-lplan .af-sub__title, section.af-lplan .af-hint { margin: 0; }
section.af-lplan .af-sub__title { margin-top: 6px; font-weight: 700; }

/* ---------- 6.74: Maria's client page → Subscription: the state is read only; access she offers is a switch ---------- */
.af-csub__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; font-size: 15px; color: #C9C4BD; }
.af-csub__row + .af-csub__row, .af-csub__barlbl + .af-csub__row, .af-csub__head + .af-csub__row { border-top: 1px solid rgba(243, 239, 232, .09); }
.af-csub__row strong { color: #F3EFE8; text-align: right; }
.af-grant { display: block; }
.af-grant__row { display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px 0; }
.af-grant__row + .af-grant__row { border-top: 1px solid rgba(243, 239, 232, .09); }
.af-grant__row.is-dis { opacity: .45; }
.af-grant__txt { flex: 1; min-width: 0; display: block; }
.af-grant__txt strong { display: block; font-size: 16px; color: #F3EFE8; }
.af-grant__txt small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: #A9A49D; }
.af-grant__sw { flex: none; position: relative; width: 52px; height: 30px; padding: 0; border: 0; border-radius: 99px; background: #3A3A3F; cursor: pointer; -webkit-appearance: none; appearance: none; }
.af-grant__sw i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #F3EFE8; transition: left .15s ease; }
.af-grant__row.is-on .af-grant__sw { background: #D2B04C; }
.af-grant__row.is-on .af-grant__sw i { left: 25px; background: #17171A; }
.af-grant__sw:disabled { cursor: default; }
.af-grant__sw:focus-visible { outline: 2px solid #EBD58A; outline-offset: 3px; }
.af-grant__hint { margin: 10px 0 0 !important; }
@media (prefers-reduced-motion: reduce) { .af-grant__sw i { transition: none; } }

/* ---------- 6.75: the +2 kg card on Home, the Diamond gift month, the prize on the level page ---------- */
.af-kgalert { margin: 4px 0 10px; border: 1px solid rgba(243, 239, 232, .22); background: rgba(23, 23, 26, .86); }
.af-kgalert__t { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: #F3EFE8; }
.af-kgalert__p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; color: #C9C4BD; }
.af-kgalert__later { margin: 8px 0 0; text-align: center; }
.af-kgalert__later button { padding: 6px 12px; border: 0; background: none; color: #A9A49D; font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.af-dgift { border: 1px solid rgba(210, 176, 76, .55); background: linear-gradient(180deg, rgba(210, 176, 76, .13), rgba(210, 176, 76, .04)); }
.af-dgift__t { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: #F3EFE8; }
.af-dgift__p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; color: #C9C4BD; }
.af-dgift form { margin: 0; }
.af-dgift__until { margin: 12px 0 0; text-align: center; font-size: 13.5px; color: #C9C4BD; }
.af-dgift__auto { margin: 0 !important; }
.af-prize__p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; color: #C9C4BD; }
.af-prize__s { margin: 10px 0 0; }
.af-kgline { display: block; margin-top: 2px; font-size: 13px; color: #EF9F27; }
.af-dgift form .af-btn { width: 100%; }

/* 6.77 — Plan → Recipes: the list (.af-rc) and one recipe (.af-rcr) */
.af-rc-row { text-decoration: none; }
.af-account > .af-rc-row { margin-top: 12px; }
.af-rc, .af-rcr { display: grid; gap: 12px; min-width: 0; }
.af-rc__search { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 16px; border-radius: 16px; background: rgba(243, 239, 232, .08); }
.af-rc__search:focus-within { box-shadow: inset 0 0 0 1.5px #D2B04C; }
.af-rc__search > span[aria-hidden] { flex: none; font-size: 16px; opacity: .8; }
.af-rc__search input[type="search"] { flex: 1; min-width: 0; height: 50px; margin: 0; padding: 0; border: 0 !important; outline: 0; box-shadow: none !important; background: none !important; color: #F3EFE8; font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none; }
.af-rc__search input[type="search"]::placeholder { color: #A9A49D; opacity: 1; }
.af-rc__dyn { display: grid; gap: 10px; min-width: 0; transition: opacity .15s; }
.af-rc.is-loading .af-rc__results { opacity: .5; }
.af-rc__chips { display: flex; gap: 8px; margin: 0; padding: 2px 16px; margin-inline: -16px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.af-rc__chips::-webkit-scrollbar { display: none; }
.af-rc__chips > a, .af-rc__chips > span, .af-rc__cu { flex: none; display: inline-flex; align-items: center; min-height: 38px; padding: 0 15px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(243, 239, 232, .2); color: #F3EFE8 !important; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; }
.af-rc__chips > a.is-on { background: #D2B04C; box-shadow: none; color: #17171A !important; }
.af-rc__chips--small > a, .af-rc__chips--small > span, .af-rc__cu { min-height: 34px; padding: 0 12px; font-size: 13px; font-weight: 500; color: #C9C4BD !important; }
.af-rc__chips--small > a.is-on { color: #17171A !important; font-weight: 700; }
.af-rc__cu { position: relative; padding: 0; }
.af-rc__cu select { max-width: 190px; height: 34px; margin: 0; padding: 0 30px 0 12px; border: 0; border-radius: 999px; background: none; color: inherit; font: inherit; -webkit-appearance: none; appearance: none; text-overflow: ellipsis; cursor: pointer; }
.af-rc__cu select option { background: #202023; color: #F3EFE8; }
.af-rc__cu::after { content: ""; position: absolute; right: 13px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); pointer-events: none; }
.af-rc__cu.is-on { background: #D2B04C; box-shadow: none; color: #17171A !important; font-weight: 700; }
.af-rc__results { display: grid; gap: 10px; min-width: 0; }
.af-rc__group { margin: 8px 0 -2px 6px; }
.af-rc__list { display: block; padding: 4px 18px !important; }
.af-rc__rec { display: flex; align-items: center; gap: 12px; padding: 14px 0; color: #F3EFE8 !important; text-decoration: none; }
.af-rc__rec + .af-rc__rec { border-top: 1px solid rgba(243, 239, 232, .09); }
.af-rc__rectext { flex: 1; min-width: 0; display: grid; gap: 4px; }
.af-rc__rectext strong { font-size: 16px; font-weight: 600; line-height: 1.3; }
.af-rc__rectext small { font-size: 13px; line-height: 1.35; color: #A9A49D; }
.af-rc__rectext small b { color: #EBD58A; font-weight: 600; }
.af-rc__rec .af-chev { flex: none; color: #77736D; }
.af-rc__rec:active { opacity: .7; }
.af-rc__more { margin: 2px 0 0; }
.af-rc__none { display: grid; gap: 12px; text-align: center; }
.af-rc__none p { margin: 0; color: #C9C4BD; }
.af-rc__note { margin: 6px 6px 0; }
.af-rc__err { margin: 0; }
.af-rcr__back { margin: 0 4px; }
.af-rcr__back a { color: #EBD58A !important; font-size: 15px; font-weight: 600; text-decoration: none; }
.af-rcr__photo { margin: 0; }
.af-rcr__photo img { display: block; width: 100%; height: auto; max-height: 300px; object-fit: cover; border-radius: 20px; }
.af-rcr__title { margin: 0 4px; font-family: inherit !important; font-size: 24px; font-weight: 800; line-height: 1.25; letter-spacing: normal; text-transform: none !important; }
.af-rcr > .af-rsrc { margin: 0 4px; width: -moz-fit-content; width: fit-content; }
.af-rcr__tags { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding: 0 2px; }
.af-rcr__vals { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 6px; padding: 16px 10px !important; text-align: center; }
.af-rcr__vals strong { display: block; font-size: 19px; font-weight: 700; line-height: 1.2; color: #EBD58A; white-space: nowrap; }
.af-rcr__vals small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.2; color: #A9A49D; }
.af-rcr__per { margin: -4px 6px 0; }
.af-rcr .af-section-label { margin: 8px 0 -2px 6px; }
.af-rcr__box { padding: 4px 18px !important; }
.af-rcr__ing, .af-rcr__steps, .af-rcr__micro ul { margin: 0; padding: 0; list-style: none; }
.af-rcr__ing li { padding: 11px 0; font-size: 15.5px; line-height: 1.4; }
.af-rcr__ing li + li, .af-rcr__steps li + li, .af-rcr__micro li + li { border-top: 1px solid rgba(243, 239, 232, .09); }
.af-rcr__steps { counter-reset: af-rcr; }
.af-rcr__steps li { counter-increment: af-rcr; display: flex; gap: 12px; padding: 13px 0; font-size: 15.5px; line-height: 1.5; }
.af-rcr__steps li::before { content: counter(af-rcr); flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(210, 176, 76, .18); color: #EBD58A; font-size: 13px; font-weight: 700; line-height: 1; }
.af-rcr__micro { padding: 0 18px !important; }
.af-rcr__micro summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; }
.af-rcr__micro summary::-webkit-details-marker { display: none; }
.af-rcr__micro summary .af-chev { color: #A9A49D; transition: transform .15s; }
.af-rcr__micro[open] summary .af-chev { transform: rotate(90deg); }
.af-rcr__micro li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 14.5px; }
.af-rcr__micro li span:last-child:not(:first-child) { color: #C9C4BD; white-space: nowrap; }
.af-rcr__micro ul { padding-bottom: 8px; }
.af-rcr__note { margin: 0; }
@media (min-width: 900px) {
	.af-rc__chips { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; overflow: visible; }
}

/* 6.77 — My account → Subscription: one card, then rows that open at a tap (.af-subrow) */
.af-mysub__line { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: #9DD3A8; }
.af-mysub__line--warn { color: #EF9F27; }
.af-mysub .af-managepay { margin: 8px 0 2px; }
.af-mysub .af-managepay .af-btn { width: auto; min-height: 44px; padding-inline: 22px; }
.af-subrow { padding: 0 !important; scroll-margin-top: 88px; }
.af-subrow > summary { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 74px; padding: 14px 16px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.af-subrow > summary::-webkit-details-marker { display: none; }
.af-subrow__icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-size: 20px; background: rgba(235, 213, 138, .14); }
.af-subrow__text { display: grid; gap: 3px; min-width: 0; }
.af-subrow__text strong { font-size: 16.5px; font-weight: 700; line-height: 1.3; }
.af-subrow__text span { font-size: 13.5px; line-height: 1.4; color: var(--af-muted, #A8A29B); }
.af-subrow > summary .af-chev { color: #A9A49D; transition: transform .15s; }
.af-subrow[open] > summary .af-chev { transform: rotate(90deg); }
.af-subrow > summary:focus-visible { outline: 2px solid #D2B04C; outline-offset: -2px; border-radius: inherit; }
.af-subrow__body { display: grid; gap: 10px; padding: 2px 14px 16px; }
.af-subrow__body > .af-card { padding: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0; }
.af-subrow__body > .af-hint, .af-subrow__body > .af-alert { margin: 0; }
.af-subrow__body .af-timeline { padding: 0 2px !important; }
.af-subrow__body .af-managepay { margin: 4px 0 0; }

/* 6.78 — My level (.af-lv): the level, today, the levels on one line, the badges with their progress */
.af-level--master { color: #F3DFA6; }
.af-lv { display: grid; gap: 12px; }
.af-lv__hero { display: grid; gap: 10px; }
.af-lv__top { display: flex; align-items: center; gap: 14px; }
.af-lv__ic { flex: none; width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; font-size: 32px; background: rgba(210, 176, 76, .14); }
.af-lv__name { margin: 0; font-family: inherit !important; font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: normal; text-transform: none !important; }
.af-lv__pts { margin: 4px 0 0; font-size: 14px; color: #A9A49D; }
.af-lv__bar { margin: 4px 0 0; }
.af-lv__ends { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: #A9A49D; }
.af-lv__next { margin: 0; font-size: 15px; font-weight: 600; color: #EBD58A; }
.af-lv__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.af-lv__stats > div { border-radius: 14px; background: rgba(243, 239, 232, .06); padding: 12px 14px; }
.af-lv__stats b { display: block; font-size: 20px; font-weight: 800; line-height: 1.2; }
.af-lv__stats small { display: block; margin-top: 2px; font-size: 12.5px; color: #A9A49D; }
.af-lv__hint { margin: 0; font-size: 13.5px; line-height: 1.45; color: #C9C4BD; }
.af-lv__hint--ok { color: #9DD3A8; }
.af-lv__h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 4px; }
.af-lv__h strong { font-size: 17px; font-weight: 800; }
.af-lv__h span { font-size: 14px; font-weight: 700; color: #EBD58A; white-space: nowrap; }
.af-lv__today { display: grid; gap: 2px; }
.af-lv__sub { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 10px 0 0; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #A9A49D; }
.af-lv__sub b { font-size: 14px; letter-spacing: 0; color: #A9A49D; }
.af-lv__sub.is-ok, .af-lv__sub.is-ok b { color: #5DCAA5; }
.af-lv__rows { display: grid; }
.af-lv__row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 0; color: #F3EFE8 !important; text-decoration: none; font-size: 15.5px; line-height: 1.3; }
.af-lv__row + .af-lv__row { border-top: 1px solid rgba(243, 239, 232, .09); }
.af-lv__row > i { flex: none; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(243, 239, 232, .28); display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 800; line-height: 1; color: #17171A; }
.af-lv__row.is-ok > i { background: #5DCAA5; box-shadow: none; }
.af-lv__row > span { flex: 1; min-width: 0; }
.af-lv__row > b { flex: none; font-size: 14px; font-weight: 700; color: #EBD58A; }
.af-lv__row.is-ok > b { color: #5DCAA5; }
.af-lv__row .af-chev { flex: none; color: #77736D; }
.af-lv__today .af-lv__hint { margin-top: 8px; }
.af-lv__track { --af-lv-cols: 5; --af-lv-half: 10%; --af-lv-fill: 0%; position: relative; display: grid; grid-template-columns: repeat(var(--af-lv-cols), minmax(0, 1fr)); margin: 8px 0 0; padding: 0; list-style: none; }
.af-lv__track::before, .af-lv__track::after { content: ""; position: absolute; left: var(--af-lv-half); top: 20px; height: 3px; border-radius: 2px; }
.af-lv__track::before { right: var(--af-lv-half); background: rgba(243, 239, 232, .12); }
.af-lv__track::after { width: var(--af-lv-fill); background: #D2B04C; }
.af-lv__track li { position: relative; z-index: 1; min-width: 0; text-align: center; }
.af-lv__dot { display: grid; place-items: center; width: 42px; height: 42px; margin: 0 auto; border-radius: 50%; background: #2C2B2F; font-size: 21px; line-height: 1; }
.af-lv__track .is-here .af-lv__dot { background: #3A2F14; box-shadow: 0 0 0 2px #D2B04C; }
.af-lv__track .is-ahead .af-lv__dot { filter: grayscale(1); opacity: .55; }
.af-lv__track b { display: block; margin-top: 7px; font-size: 13px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.af-lv__track small { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.3; color: #A9A49D; }
.af-lv__track small span { display: block; color: #EBD58A; }
.af-lv__track .is-ahead b { color: #A9A49D; }
.af-lv .af-ranks__h { font-family: inherit !important; }
.af-lv__badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.af-lv__badge { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 16px 12px; border-radius: 18px; background: #202023; text-align: center; }
.af-lv__badge.is-earned { background: linear-gradient(160deg, #3A2F14, #26221A); }
.af-lv__medal { font-size: 30px; line-height: 1.2; }
.af-lv__badge:not(.is-earned) .af-lv__medal { filter: grayscale(1); opacity: .5; }
.af-lv__badge strong { margin-top: 3px; font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.af-lv__badge small { font-size: 12.5px; line-height: 1.35; color: #A9A49D; }
.af-lv__prog { display: block; width: 100%; max-width: 150px; height: 6px; margin-top: 7px; border-radius: 99px; background: rgba(243, 239, 232, .1); overflow: hidden; }
.af-lv__prog i { display: block; height: 100%; border-radius: 99px; background: #D2B04C; }
.af-lv__badge em { font-size: 12.5px; font-style: normal; font-weight: 600; color: #C9C4BD; }
.af-lv .af-subrow .af-ranks__fine { margin: 6px 0 0; }
@media (min-width: 700px) { .af-lv__badges { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 6.79 — Home: the shortcuts at the bottom (.af-sc); 6.83: large ones for her meals, small ones (.af-sch) under them */
.af-sc__label { margin: 22px 6px 10px; }
.af-scw { display: grid; gap: 10px; }
.af-sc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.af-sc--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.af-sc--1 { grid-template-columns: minmax(0, 1fr); }
.af-sch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.af-sch > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.af-sc__tile { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; width: 100%; margin: 0; padding: 16px 6px 14px; border: 0; border-radius: 22px; background: linear-gradient(160deg, #2A292D, #1F1E21); box-shadow: inset 0 0 0 1px rgba(243, 239, 232, .08); color: #F3EFE8 !important; font: inherit; text-align: center; text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
.af-sc__tile:active { transform: scale(.98); }
.af-sc__ic { flex: none; width: 54px; height: 54px; border-radius: 17px; display: grid; place-items: center; font-size: 28px; line-height: 1; background: rgba(243, 239, 232, .1); }
.af-sc__text { display: grid; gap: 4px; min-width: 0; }
.af-sc__text strong { font-size: 15px; font-weight: 700; line-height: 1.2; }
.af-sc__text small { font-size: 12px; line-height: 1.25; color: #C9C4BD; }
.af-sc__tile--scan { background: linear-gradient(160deg, #17362B, #1A2220); }
.af-sc__tile--scan .af-sc__ic { background: rgba(110, 210, 160, .2); }
.af-sc__tile--scan.is-limit .af-sc__ic, .af-sc__tile--scan.is-limit strong { opacity: .5; }
.af-sc__tile--plate { background: linear-gradient(160deg, #3D2616, #221C19); }
.af-sc__tile--plate .af-sc__ic { background: rgba(240, 160, 90, .2); }
.af-sc__tile--recipes { background: linear-gradient(160deg, #3A2F14, #211E19); }
.af-sc__tile--recipes .af-sc__ic { background: rgba(210, 176, 76, .22); }
.af-sc__tile--cycle { background: linear-gradient(160deg, #3B2029, #211B1E); }
.af-sc__tile--cycle .af-sc__ic { background: rgba(230, 174, 184, .2); }
.af-sc__tile--badges { background: linear-gradient(160deg, #22264A, #1B1C26); }
.af-sc__tile--badges .af-sc__ic { background: rgba(140, 150, 255, .2); }
.af-sc__tile--invite { background: linear-gradient(160deg, #33214A, #1E1B25); }
.af-sc__tile--invite .af-sc__ic { background: rgba(190, 150, 255, .2); }
.af-sc__tile--story { background: linear-gradient(160deg, #40213A, #221A21); }
.af-sc__tile--story .af-sc__ic { background: rgba(240, 130, 190, .2); }
.af-sc__tile.is-busy { opacity: .6; }
.af-sc__tile--review { background: linear-gradient(160deg, #3A3212, #211F18); }
.af-sc__tile--review .af-sc__ic { background: rgba(245, 205, 90, .2); }
.af-sc--1 .af-sc__tile { flex-direction: row; gap: 14px; padding: 14px 16px; text-align: left; }
.af-sc--1 .af-sc__ic { width: 50px; height: 50px; }
.af-sc--1 .af-sc__text strong { font-size: 16.5px; }
.af-sc--1 .af-sc__text small { font-size: 13px; }
.af-sch .af-sc__tile { flex-direction: row; gap: 11px; padding: 12px; text-align: left; }
.af-sch .af-sc__ic { width: 42px; height: 42px; border-radius: 14px; font-size: 22px; }
.af-sch .af-sc__text { gap: 2px; }
.af-sch .af-sc__text strong { font-size: 14.5px; }

/* 6.82 — the free journal (.af-jf): the chip next to the title, the note under the week, what a subscription adds */
.af-jf__chip { display: inline-block; margin-left: 8px; padding: 4px 10px; border-radius: 999px; background: rgba(243, 239, 232, .12); color: #C9C4BD; font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .06em; text-transform: uppercase; vertical-align: 5px; }
.af-jf__window { margin: -4px 6px 0; }
.af-jf__up { display: grid; gap: 10px; margin-top: 6px; background: linear-gradient(160deg, #3A2F14, #211E19) !important; box-shadow: inset 0 0 0 1px rgba(210, 176, 76, .35); }
.af-jf__uph { margin: 0; font-family: inherit !important; font-size: 18px; font-weight: 800; line-height: 1.25; letter-spacing: 0; text-transform: none !important; color: #F3EFE8; }
.af-jf__upp { margin: 0; font-size: 14px; line-height: 1.45; color: #C9C4BD; }
.af-jf__uplist { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.af-jf__uplist li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.4; }
.af-jf__uplist li::before { content: "✓"; position: absolute; left: 2px; color: #EBD58A; font-weight: 800; }
.af-jf__up .af-sub__pay { margin-top: 4px; }

/* 6.84 — perimenopause / menopause / PCOS: the question on Home, the fields in "For your plan", Maria's card above the plan editor */
.af-hs-ask__apart { margin: 4px 0 -2px; font-size: 13px; font-weight: 600; color: #C9C4BD; }
.af-hs-ask__skip { margin-top: -2px; }
.af-hs-fields { display: grid; gap: 8px; margin: 6px 0 4px; padding-top: 14px; border-top: 1px solid rgba(243, 239, 232, .1); }
.af-hs-fields .af-field-label, .af-hs-fields .af-check, .af-hs-fields .af-hint { margin: 0; }
.af-hs-fields { margin-top: 18px; }
.af-hs-fields__ok { margin: 0; padding: 9px 12px; border-radius: 12px; background: rgba(143, 214, 168, .12); color: #8FD6A8; font-weight: 700; font-size: 14px; }
.af-hs-fields > p:last-child { margin: 4px 0 0; }
.af-hs-chip { display: inline-flex; align-items: center; }
.af-hs-card { margin: 8px 0 12px; padding: 0 !important; border: 1px solid rgba(230, 160, 168, .35); }
.af-hs-card > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 40px 10px 14px; cursor: pointer; list-style: none; position: relative; } /* 6.85.1: one row when closed (two tight rows on a narrow phone) */
.af-hs-card > summary::-webkit-details-marker { display: none; }
.af-hs-card > summary::after { content: "▾"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: #EBD58A; font-size: 16px; }
.af-hs-card[open] > summary::after { content: "▴"; }
.af-hs-card > summary strong { color: #F3EFE8; font-size: 14.5px; white-space: nowrap; }
.af-hs-card__hint { color: #A9A49D; font-size: 13px; }
.af-hs-card__body { display: grid; gap: 8px; padding: 0 16px 14px; }
.af-hs-card__h { margin: 6px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #A9A49D; }
.af-hs-card__body .af-hint { margin: 0; }
.af-hs-card__body .af-hint a { color: #EBD58A; }
.af-hs-points { margin: 0; padding: 0; list-style: none; display: grid; }
.af-hs-points li { display: grid; gap: 3px; padding: 10px 0; border-top: 1px solid rgba(243, 239, 232, .08); }
.af-hs-points li:first-child { border-top: 0; }
.af-hs-points b { color: #F3EFE8; font-size: 14.5px; }
.af-hs-points span { color: #D9D4CD; font-size: 13.5px; line-height: 1.45; }
.af-hs-points span i { font-style: normal; color: #EBD58A; }
.af-hs-points small { font-size: 12px; line-height: 1.4; color: #A9A49D; }
.af-hs-points small a { color: #C9B872; text-decoration: none; }

/* 6.85 — perimenopause / menopause: the reference points worked out from the plan (in Maria's card above the editor) */
.af-hs-sum { display: flex; flex-wrap: wrap; gap: 5px; }
.af-hs-sum:empty { display: none; }
.af-hs-sum em { font-style: normal; padding: 2px 8px; white-space: nowrap; border-radius: 999px; background: rgba(243, 239, 232, .08); color: #D9D4CD; font-size: 12px; font-weight: 700; }
.af-hs-sum em.is-ok { background: rgba(143, 214, 168, .14); color: #8FD6A8; }
.af-hs-sum em.is-warn { background: rgba(235, 213, 138, .16); color: #EBD58A; }
.af-hs-live { display: grid; gap: 4px; padding-bottom: 6px; border-bottom: 1px solid rgba(243, 239, 232, .12); }
.af-hs-calc { margin: 0; padding: 0; list-style: none; display: grid; }
.af-hs-calc li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 9px 0; border-top: 1px solid rgba(243, 239, 232, .08); color: #D9D4CD; font-size: 13.5px; line-height: 1.4; }
.af-hs-calc li:first-child { border-top: 0; }
.af-hs-calc i { font-style: normal; font-weight: 800; color: #A9A49D; }
.af-hs-calc li.is-ok i { color: #8FD6A8; }
.af-hs-calc li.is-warn i { color: #EBD58A; }
.af-hs-calc b { color: #F3EFE8; }
.af-hs-calc small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: #A9A49D; }

/* 6.91 — "lifestyle, not a medical service": the line under the pay button and under the plan; the Terms card on Home. */
.af-tn-line { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: #A8A2AE; }
.af-tn-line--plan { margin: 18px 4px 4px; text-align: center; }
/* 6.94.1: the Terms banner on Home: one line of text, two small buttons. */
.af-tn { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 10px; margin: 0 0 12px; padding: 10px 10px 10px 12px; border-radius: 14px; background: rgba(235, 213, 138, .12); border: 1px solid rgba(235, 213, 138, .35); box-sizing: border-box; transition: opacity .3s; }
.af-tn.is-done { opacity: 0; }
.af-tn__t { flex: 1 1 200px; min-width: 0; margin: 0; font-size: 14px; font-weight: 600; line-height: 1.3; color: #F3EFE8; }
.af-tn__btns { flex: none; display: flex; gap: 8px; }
.af-account .af-tn__read, .af-account .af-tn__ok, .af-tn__read, .af-tn__ok { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 36px; margin: 0; padding: 0 14px; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; }
.af-account .af-tn__read, .af-tn__read { border: 1.5px solid rgba(235, 213, 138, .6); background: transparent; color: #EBD58A !important; }
.af-account .af-tn__ok, .af-tn__ok { border: 0; background: #EBD58A; color: #1B191C; }
.af-tn__ok:disabled { opacity: .5; }
.af-plans .af-tn-line { text-align: center; }

/* ---------- 6.93: Home, "Note your day": the weight and the sleep under the arc, in the look of "Close your day" ---------- */
.af-hd { margin: 10px 0 4px; padding: 12px; background: linear-gradient(160deg, #2A2416, #1F1E21 70%); }
.af-bh.af-hd-off .af-hd { display: none; }
.af-hd .af-cd__title { padding-right: 34px; }
.af-hd .af-cd__minis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.af-hd__wgo { all: unset; display: block; width: 100%; min-height: 30px; cursor: pointer; line-height: 30px; }
.af-hd__wgo:focus-visible { outline: 2px solid #EBD58A; outline-offset: 2px; border-radius: 8px; }
.af-hd__w:not(.is-ok) .af-hd__wgo b { color: #EBD58A; font-size: 14px; }
.af-hd__wgo[hidden], .af-hd__wedit[hidden] { display: none; }
.af-hd__wedit { display: flex; align-items: center; gap: 6px; }
.af-account .af-hd__win { flex: 1; min-width: 0; width: 100%; height: 32px; padding: 0 8px; border-radius: 10px; border: 1px solid rgba(235, 213, 138, .55); background: #2A292C; color: #F3EFE8; font: inherit; font-size: 16px; font-weight: 700; }
.af-account .af-hd__win.is-bad { border-color: #E6AEB8; }
.af-hd__wedit i { font-style: normal; color: var(--af-muted, #A8A29B); }
.af-hd__wok { flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: linear-gradient(135deg, #EBD58A, #D2B04C); color: #141315; font-size: 16px; font-weight: 800; cursor: pointer; }
.af-hd__s .af-hd__sv { cursor: pointer; }
.af-hd__s:not(.is-ok) .af-hd__sv { color: #8F8996; }
.af-hd .is-busy { opacity: .6; }
.af-hd__more { margin: 0 2px; font-size: 13px; line-height: 1.5; color: var(--af-muted, #A8A29B); }
.af-hd__more a { color: #EBD58A; font-weight: 600; text-decoration: none; }

/* ---------- 6.93: last week: the banner on Home and the sheet "Share to Stories" ---------- */
.af-wkb { margin-top: 10px; }
.af-wkb[hidden] { display: none; }
button.af-wkb__go { border: 0; background: none; padding: 0; font-family: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.af-wkb .af-wnb__t { white-space: normal; line-height: 1.25; }
.af-weeksheet__label { margin: 2px 2px 12px; }
.af-weeksheet__label b { display: block; font-size: 17px; font-weight: 800; color: #F3EFE8; }
.af-weeksheet__label span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--af-muted, #A8A29B); }
.af-weeksheet__kg[hidden] { display: none; }
.af-weeksheet .af-weeksheet__week { margin-top: 16px; }

/* ---------- 6.94: the barcode scanner and "My scans" ---------- */
.af-bc { margin: 0 0 12px; }
.af-bc__btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; margin: 0; padding: 10px 14px; border-radius: 14px; border: 1px dashed rgba(235, 213, 138, .5); background: rgba(235, 213, 138, .08); color: #EBD58A; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.af-bc__bars { flex: none; display: inline-block; width: 26px; height: 18px; border-radius: 2px; background: repeating-linear-gradient(90deg, #EBD58A 0 2px, transparent 2px 4px, #EBD58A 4px 7px, transparent 7px 9px); }
.af-bc__hist { display: block; margin: 4px 0 0 auto; padding: 8px 2px; border: 0; background: none; color: #EBD58A; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.af-bh__fcalc .af-bc { margin-bottom: 8px; }
.af-sc__tile--scans { background: linear-gradient(160deg, #2F2A16, #201E19); }
.af-sc__tile--scans .af-sc__ic { background: rgba(210, 176, 76, .2); }

/* The camera, over the whole screen. */
dialog.af-bcam { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: #0B0A0C; color: #fff; }
dialog.af-bcam::backdrop { background: #0B0A0C; }
.af-bcam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0B0A0C; }
.af-bcam__frame { position: absolute; left: 50%; top: 50%; width: min(78vw, 320px); height: min(24vh, 170px); transform: translate(-50%, -50%); border-radius: 22px; box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .5); pointer-events: none; }
.af-bcam__frame::before { content: ""; position: absolute; inset: -3px; border-radius: 24px; border: 4px solid #EBD58A; clip-path: polygon(0 0, 22% 0, 22% 12%, 78% 12%, 78% 0, 100% 0, 100% 100%, 78% 100%, 78% 88%, 22% 88%, 22% 100%, 0 100%); }
.af-bcam__frame i { position: absolute; left: 16px; right: 16px; top: 50%; height: 2px; border-radius: 2px; background: #ff5a5a; box-shadow: 0 0 12px 2px rgba(255, 90, 90, .7); animation: af-bcam-line 1.8s ease-in-out infinite; }
@keyframes af-bcam-line { 0%, 100% { transform: translateY(-34px); } 50% { transform: translateY(34px); } }
@media (prefers-reduced-motion: reduce) { .af-bcam__frame i { animation: none; } }
.af-bcam__top { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 0; }
.af-bcam__top b { font-size: 17px; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
.af-bcam__top button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .5); color: #fff; font-size: 20px; cursor: pointer; }
.af-bcam__top button[hidden] { display: block; visibility: hidden; }
.af-bcam__txt { position: absolute; left: 16px; right: 16px; top: calc(50% + min(12vh, 85px) + 22px); margin: 0; text-align: center; font-size: 16px; font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
.af-bcam__txt small { display: block; margin-top: 6px; font-weight: 500; font-size: 13.5px; color: #D9D5CF; }
.af-bcam__bot { position: absolute; left: 18px; right: 18px; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); }
.af-bcam__man { width: 100%; padding: 14px; border-radius: 999px; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .35); color: #fff; font: inherit; font-weight: 700; font-size: 15.5px; cursor: pointer; }
.af-bcam__form { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 12px; padding: 20px 16px calc(22px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; background: #232226; }
.af-bcam__form[hidden], .af-bcam__wait[hidden], .af-bcam__back[hidden], .af-bcam__msg[hidden] { display: none; }
.af-bcam__msg { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(230, 174, 184, .12); color: #F2CDD3; font-size: 14px; }
.af-bcam.is-manual .af-bcam__bot, .af-bcam.is-manual .af-bcam__txt, .af-bcam.is-looking .af-bcam__bot, .af-bcam.is-looking .af-bcam__txt, .af-bcam.is-looking .af-bcam__form { display: none; }
.af-bcam.is-manual .af-bcam__frame { top: 30%; }
.af-bcam__wait { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 18px; border-radius: 16px; background: rgba(20, 19, 21, .92); font-weight: 600; white-space: nowrap; }

/* The product, and the values from the label. */
.af-bp .af-sheet__body { gap: 12px; padding-bottom: 14px; }
.af-scan__close { justify-self: start; border: 0; background: none; color: #EBD58A; font: inherit; font-weight: 600; cursor: pointer; padding: 0; white-space: nowrap; }
.af-bp__card { padding: 14px; border-radius: 18px; background: #1A191C; border: 1px solid rgba(243, 239, 232, .08); }
.af-bp__name { margin: 0; font-weight: 700; font-size: 18px; line-height: 1.25; color: #F3EFE8; overflow-wrap: anywhere; }
.af-bp__brand { margin: 2px 0 10px; font-size: 13.5px; color: #A8A2AE; overflow-wrap: anywhere; }
.af-bp__per { display: flex; gap: 8px; }
.af-bp__per span { flex: 1; min-width: 0; padding: 9px 10px; border-radius: 12px; background: #242327; font-size: 12.5px; color: #A8A29B; }
.af-bp__per b { display: block; font-size: 17px; color: #F3EFE8; }
.af-bp__q { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.af-bp__q label { font-size: 14px; color: #C9C4BD; }
.af-bp__in { display: flex; align-items: center; gap: 6px; width: 130px; height: 46px; padding: 0 14px; border-radius: 14px; background: #2A292D; border: 1.5px solid #EBD58A; box-sizing: border-box; }
.af-account .af-bp__in input, .af-bp__in input { flex: 1; min-width: 0; width: 100%; height: 42px; padding: 0 !important; border: 0 !important; background: none !important; color: #F3EFE8 !important; font: inherit; font-size: 21px !important; font-weight: 700; outline: 0; box-shadow: none !important; }
.af-bp__in i { font-style: normal; color: #A8A29B; }
.af-bp__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.af-bp__chips button { padding: 8px 12px; border: 0; border-radius: 999px; background: #2A292D; color: #C9C4BD; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.af-bp__chips button.is-on { background: rgba(235, 213, 138, .16); color: #EBD58A; box-shadow: inset 0 0 0 1px rgba(235, 213, 138, .5); }
.af-bp__sum { margin: 0; padding: 12px 14px; border-radius: 16px; background: rgba(168, 221, 169, .10); border: 1px solid rgba(168, 221, 169, .28); color: #A8DDA9; font-weight: 700; font-size: 16px; text-align: center; }
.af-bp__src { margin: 0; font-size: 12.5px; color: #8F8A93; text-align: center; }
.af-bp__edit { border: 0; background: none; padding: 0; color: #EBD58A; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.af-bp__warn { margin: 0; padding: 12px 14px; border-radius: 16px; background: rgba(230, 174, 184, .10); border: 1px solid rgba(230, 174, 184, .3); color: #F2CDD3; font-size: 14px; }
.af-bp__warn b { display: block; font-size: 16px; margin-bottom: 2px; }
.af-bp__form { display: grid; gap: 12px; }
.af-bp__two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.af-bp__err { margin: 0; color: #F2CDD3; font-size: 14px; }
.af-bp__err[hidden] { display: none; }

/* My scans. */
.af-sh .af-sheet__body { gap: 0; padding-bottom: 18px; min-height: 46vh; align-content: start; }
.af-sh__seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 16px; background: #1A191C; }
.af-sh__seg button { padding: 10px 4px; border: 0; border-radius: 12px; background: none; color: #C9C4BD; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.af-sh__seg button.is-on { background: #38373C; color: #F3EFE8; }
.af-sh__day { margin: 16px 4px 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #A8A2AE; }
.af-sh__it { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 8px 12px 12px; margin-bottom: 8px; border-radius: 18px; background: #1A191C; }
.af-sh__ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 21px; background: #2C2A20; }
.af-sh__ic.is-plate { background: #3A1D25; }
.af-sh__tx strong { display: block; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.af-sh__tx small { display: block; margin-top: 2px; font-size: 13px; color: #A8A2AE; }
.af-sh__tx em { display: block; margin-top: 2px; font-style: normal; font-size: 12.5px; color: #8F8A93; }
.af-sh__tx em.is-in { color: #A8DDA9; }
.af-sh__act { display: flex; align-items: center; gap: 2px; }
.af-sh__go { padding: 9px 12px; border-radius: 999px; background: rgba(235, 213, 138, .12); border: 1px solid rgba(235, 213, 138, .4); color: #EBD58A; font: inherit; font-weight: 700; font-size: 13px; white-space: nowrap; cursor: pointer; }
.af-sh__del { width: 34px; height: 38px; border: 0; background: none; color: #8F8A93; font-size: 15px; cursor: pointer; }
.af-sh__empty { margin: 28px 8px; text-align: center; color: #A8A2AE; font-size: 14.5px; }
.af-scan .af-btn--block, .af-bcam .af-btn--block { display: flex; justify-content: center; align-items: center; width: 100%; box-sizing: border-box; min-height: 50px; text-align: center; }
.af-scan .af-btn--ghost, .af-bcam .af-btn--ghost { padding: 0 18px; border-radius: 999px; border: 1.5px solid rgba(235, 213, 138, .6); background: transparent; color: #EBD58A; font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; }
.af-scan .af-btn:disabled { opacity: .45; }
.af-bcam .af-bcam__back[hidden], .af-scan .af-btn[hidden] { display: none; }
.af-bcam.is-nocam .af-bcam__frame, .af-bcam.is-nocam video { display: none; }

/* ---------- 6.95: Maria on a wide screen (from 1100 px): the menu on the left, the whole width ---------- */
@media (min-width: 1100px) {
	body.af-coach:not(.af-pane) .wp-block-group.alignwide { max-width: none !important; width: 100% !important; margin: 0 !important; }
	body.af-coach:not(.af-pane) .wp-block-group.alignfull, body.af-coach:not(.af-pane) .entry-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
	body.af-coach:not(.af-pane) .af-coach-app { --af-bar: var(--wp-admin--admin-bar--height, 0px); --af-side: 250px; display: grid !important; grid-template-columns: minmax(0, 1fr); align-content: start; box-sizing: border-box; min-height: calc(100vh - var(--af-bar)); max-width: none; margin: 0; padding: 0 0 0 var(--af-side); background: #141315; }
	/* The menu: fixed on the left, the height of the screen. */
	body.af-coach:not(.af-pane) .af-coach-app > .af-account__top { position: fixed !important; left: 0; top: var(--af-bar); width: var(--af-side); height: calc(100vh - var(--af-bar)); box-sizing: border-box; display: flex !important; flex-direction: column; flex-wrap: nowrap !important; align-items: stretch; justify-content: flex-start; gap: 0; padding: 30px 18px 24px; margin: 0; background: #0F0E11; border-right: 1px solid rgba(243, 239, 232, .08); z-index: 5; overflow-y: auto; }
	body.af-coach:not(.af-pane) .af-coach-app > .af-appbar, body.af-coach:not(.af-pane) .af-coach-app > .af-appnav { display: none !important; }
	body.af-coach:not(.af-pane) .af-coach-app .af-account__heading { display: flex !important; flex-direction: column; align-items: flex-start; gap: 10px; padding: 0 10px; }
	body.af-coach:not(.af-pane) .af-coach-app .af-account__heading > .af-backbtn { position: static; transform: none; flex: none; margin: 0 0 0 -8px; }
	body.af-coach:not(.af-pane) .af-coach-app .af-account__date { display: block; font-size: 14px; margin: 0 0 4px; }
	body.af-coach:not(.af-pane) .af-coach-app .af-account__hello { display: block; font-size: 24px; margin: 0; overflow-wrap: anywhere; }
	body.af-coach:not(.af-pane) .af-coach-app nav.af-tabs.af-coachnav { display: flex !important; flex-direction: column; align-items: stretch; gap: 4px; margin: 30px 0 0; border: 0; }
	body.af-coach:not(.af-pane) .af-coach-app nav.af-tabs.af-coachnav a { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 14px; font-size: 16.5px; border: 0 !important; }
	body.af-coach:not(.af-pane) .af-coach-app nav.af-tabs.af-coachnav a.is-active { background: rgba(235, 213, 138, .13); }
	body.af-coach:not(.af-pane) .af-coach-app nav.af-tabs.af-coachnav a .af-nav-badge { position: static; margin-left: auto; order: 3; }
	body.af-coach:not(.af-pane) .af-coach-app .af-account__top .af-bh__icons { margin-top: auto; justify-content: flex-start; padding: 0 8px; }
	/* The content. */
	body.af-coach:not(.af-pane) .af-coach-app > .af-home, body.af-coach:not(.af-pane) .af-coach-app > .af-wnb, body.af-coach:not(.af-pane) .af-coach-app > .af-alert { margin-left: 34px; margin-right: 34px; }
	body.af-coach:not(.af-pane) .af-coach-app > .af-home { padding-top: 26px; max-width: 1180px; box-sizing: border-box; }
	body.af-coach:not(.af-pane) .af-coach-app > .af-wnb, body.af-coach:not(.af-pane) .af-coach-app > .af-alert { margin-top: 22px; max-width: 1180px; }
	body.af-coach:not(.af-pane) .af-coach-app > .af-cbhome { margin: 0; padding: 0 34px; }
	/* The plan editor (a template in Content): the whole width, as it had before the menu moved to the left; larger text in the week's table. */
	body.af-coach:not(.af-pane) .af-coach-app:has(.af-pbg) { max-width: none !important; }
	body.af-coach:not(.af-pane) .af-coach-app:has(.af-pbg) > .af-home { max-width: none !important; }
	/* Home: the "to do" tiles in one row, the lists in columns. */
	body.af-coach:not(.af-pane) .af-tab--home.af-coach-app > .af-home.af-coach { display: block !important; max-width: none; columns: 3 420px; column-gap: 26px; padding-top: 6px; }
	body.af-coach:not(.af-pane) .af-tab--home.af-coach-app > .af-home.af-coach > * { break-inside: avoid; }
	body.af-coach:not(.af-pane) .af-tab--home.af-coach-app > .af-home.af-coach > .af-section-label { break-after: avoid; margin-top: 18px; }
	body.af-coach:not(.af-pane) .af-tab--home.af-coach-app > .af-home.af-coach > .af-cbtiles, body.af-coach:not(.af-pane) .af-tab--home.af-coach-app > .af-home.af-coach > :first-child { column-span: all; }
	body.af-coach:not(.af-pane) .af-tab--home.af-coach-app .af-cbtiles { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
	/* Clients and Messages: the list on the left, what she opened on the right. */
	.af-wide-split { display: grid; grid-template-columns: 440px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 0; margin: 0 !important; height: calc(100vh - var(--af-bar, 0px)); overflow: hidden; }
	.af-wide-left { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 26px 22px 40px 34px; border-right: 1px solid rgba(243, 239, 232, .08); }
	.af-wide-left > .af-home { margin: 0 !important; padding: 0 !important; max-width: none !important; }
	.af-wide-left > .af-wnb, .af-wide-left > .af-alert { margin: 0 0 14px !important; }
	.af-wide-right { position: relative; min-width: 0; min-height: 0; background: #141315; }
	.af-wide-frame { display: block; width: 100%; height: 100%; border: 0; background: #141315; }
	.af-wide-frame[hidden], .af-wide-empty[hidden] { display: none; }
	.af-wide-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: #8F8A93; font-size: 16px; }
	/* A client's plan needs room: while it is open, the list steps aside. */
	.af-wide-split.is-plan { grid-template-columns: 300px minmax(0, 1fr); }
	.af-wide-split.is-plan .af-wide-left { padding-left: 20px; padding-right: 14px; }
	.af-wide-left .af-row.is-open, .af-wide-left .af-inbox__row.is-open { background: rgba(235, 213, 138, .10); border-radius: 16px; box-shadow: inset 3px 0 0 #EBD58A; }
}
/* A wide screen that is not that wide (a laptop): a narrower menu and list, so the right side keeps its room. */
@media (min-width: 1100px) and (max-width: 1439px) {
	body.af-coach:not(.af-pane) .af-coach-app { --af-side: 208px; }
	body.af-coach:not(.af-pane) .af-coach-app > .af-account__top { padding-left: 12px; padding-right: 12px; }
	body.af-coach:not(.af-pane) .af-coach-app .af-account__hello { font-size: 21px; }
	body.af-coach:not(.af-pane) .af-coach-app > .af-home, body.af-coach:not(.af-pane) .af-coach-app > .af-wnb, body.af-coach:not(.af-pane) .af-coach-app > .af-alert { margin-left: 22px; margin-right: 22px; }
	body.af-coach:not(.af-pane) .af-coach-app > .af-cbhome { padding: 0 22px; }
	.af-wide-split { grid-template-columns: 360px minmax(0, 1fr); }
	.af-wide-split.is-plan { grid-template-columns: 250px minmax(0, 1fr); }
	.af-wide-left { padding: 22px 14px 40px 18px; }
	body.af-pane .af-coach-app { padding: 18px 18px 60px !important; }
}
/* The pane (the page inside the frame): the same page, without its menu. */
body.af-pane .wp-block-group.alignwide { max-width: none !important; width: 100% !important; margin: 0 !important; }
body.af-pane .wp-block-group.alignfull, body.af-pane .entry-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body.af-pane .af-coach-app { display: block; max-width: 1180px; margin: 0; padding: 22px 34px 60px !important; }
body.af-pane .af-coach-app > .af-appbar, body.af-pane .af-coach-app > .af-appnav, body.af-pane .af-coach-app > .af-wnb, body.af-pane .af-coach-app .af-account__top nav, body.af-pane .af-coach-app .af-account__top .af-bh__icons, body.af-pane .af-coach-app .af-backbtn, body.af-pane .af-coach-app a.af-back, body.af-pane .af-wa__back { display: none !important; }
body.af-pane .af-coach-app > .af-account__top { display: block !important; position: static !important; margin: 0 0 14px; padding: 0; background: none; border: 0; }
body.af-pane .af-coach-app .af-account__heading { display: block !important; padding: 0 4px !important; }
body.af-pane .af-coach-app .af-account__hello { display: block; margin: 0; font-size: 28px; }
body.af-pane .af-tab--messages.af-coach-app > .af-account__top { display: none !important; }
body.af-pane .af-coach-app > .af-home { margin: 0; padding: 0; }
body.af-pane .af-wa { left: 0 !important; right: 0 !important; width: 100% !important; transform: none !important; box-shadow: none !important; }
body.af-pane .af-wa__head { grid-template-columns: 40px minmax(0, 1fr) auto !important; padding-left: 14px; }

/* ---------- 6.96: the "Scan" page: two ways to scan, then the history ---------- */
.af-scanpg { display: grid; gap: 12px; }
.af-scanpg__acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.af-scanpg__acts--one { grid-template-columns: minmax(0, 1fr); }
.af-account .af-scanpg__act, .af-scanpg__act { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; box-sizing: border-box; width: 100%; min-height: 148px; margin: 0; padding: 16px 14px; border: 1px solid rgba(243, 239, 232, .08); border-radius: 20px; background: linear-gradient(160deg, #2F2A16, #201E19); color: #F3EFE8; font: inherit; text-align: left; cursor: pointer; }
.af-account .af-scanpg__act--plate, .af-scanpg__act.af-scanpg__act--plate { background: linear-gradient(160deg, #17362B, #1A2220); }
.af-scanpg__count { margin-top: auto; padding-top: 6px; font-style: normal; font-size: 12px; font-weight: 600; color: #8FD3B0; }
.af-scanpg__act:active { transform: scale(.98); }
.af-scanpg__ic { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 14px; background: rgba(210, 176, 76, .2); font-size: 24px; }
.af-scanpg__act--plate .af-scanpg__ic { background: rgba(110, 210, 160, .2); }
.af-scanpg__act strong { font-size: 16.5px; font-weight: 800; line-height: 1.2; }
.af-scanpg__act small { font-size: 13px; line-height: 1.35; color: #A8A2AE; }
.af-scanpg__act.is-limit .af-scanpg__ic, .af-scanpg__act.is-limit strong { opacity: .5; }
.af-scanpg__acts--one .af-scanpg__act { flex-direction: row; flex-wrap: wrap; align-items: center; min-height: 0; column-gap: 14px; }
.af-scanpg__acts--one .af-scanpg__ic { margin: 0; }
.af-scanpg__acts--one .af-scanpg__act small { flex-basis: 100%; }
.af-scanpg__note { margin: 0 2px; }
.af-sh--page .af-sh__seg { background: rgba(243, 239, 232, .06); }
.af-sh--page .af-sh__it { background: rgba(243, 239, 232, .05); }
.af-sh--page .af-sh__empty { margin: 22px 8px; }

/* 6.96.1: Maria's plan editor on a large monitor (from 1700 px), where the editor has the whole width: larger text in "The week at a glance". */
@media (min-width: 1700px) {
	body.af-coach:not(.af-pane) .af-pbg { padding: 16px !important; }
	body.af-coach:not(.af-pane) .af-pbg__bar > strong { font-size: 17px; }
	body.af-coach:not(.af-pane) .af-pbg__lvl { padding: 7px 12px; font-size: 13.5px; }
	body.af-coach:not(.af-pane) .af-pbg__t { border-spacing: 6px; }
	body.af-coach:not(.af-pane) .af-pbg__t > thead th { font-size: 14px; }
	body.af-coach:not(.af-pane) .af-pbg__stot { font-size: 13px; }
	body.af-coach:not(.af-pane) .af-pbg__corner { width: 98px; }
	body.af-coach:not(.af-pane) .af-pbg__slot { font-size: 14px; padding-top: 11px; }
	body.af-coach:not(.af-pane) .af-pbg__cell { padding: 10px 32px 10px 12px; min-height: 54px; }
	body.af-coach:not(.af-pane) .af-pbg__open { width: 26px; height: 26px; font-size: 14px; }
	body.af-coach:not(.af-pane) .af-pbg__ft { font-size: 14px; }
	body.af-coach:not(.af-pane) .af-pbg__ft td { padding: 2px 0; }
	body.af-coach:not(.af-pane) .af-pbg__ft td.af-pbg__fg { width: 60px; }
	body.af-coach:not(.af-pane) .af-pbg__fk, body.af-coach:not(.af-pane) .af-pbg__fp { width: 42px; }
	body.af-coach:not(.af-pane) .af-pbg .af-pbg__g { width: 54px !important; height: 28px !important; font-size: 14px !important; }
	body.af-coach:not(.af-pane) .af-pbg__mt { font-size: 13px; }
	body.af-coach:not(.af-pane) .af-pbg__tag, body.af-coach:not(.af-pane) .af-pbg__tagadd { padding: 3px 9px; font-size: 13px; }
	body.af-coach:not(.af-pane) .af-pbg__cell.is-main .af-pbg__empty, body.af-coach:not(.af-pane) .af-pbg__empty { font-size: 13.5px; }
	body.af-coach:not(.af-pane) .af-pbg__hint, body.af-coach:not(.af-pane) .af-pbg__tg { font-size: 13.5px; }
}

/* 6.97 — "I ask to receive my plan right away": the tick above the pay button (the same look as the sign-up ticks). */
.af-plans > p.af-plans__now { padding: 4px 2px 2px; }
.af-plans__now label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.af-plans__now input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: #D2B04C; }
.af-plans__now label > span { font-size: 14px; line-height: 1.45; color: var(--af-muted, #C9C4BD); }
.af-plans__now a { color: #EBD58A; }
.af-plans__now .af-req { display: inline; color: #D2B04C; }

/* 6.98 — The calculator on one screen: the meal first, the search with what she uses often, the amount in a sheet,
   her meal in a tray above the bottom bar. (The old three-step rules above stay for the pieces still shared.) */
.af-calc2 { display: flex; flex-direction: column; min-height: calc(100dvh - 250px); }
.af-calc2__day { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 2px 0 0; font-size: 13.5px; color: var(--af-muted, #B9B4A8); }
.af-calc2__day strong { color: #F3EFE8; font-weight: 600; white-space: nowrap; }
.af-calc2__day a { color: #EBD58A; }
.af-calc2__lbl { margin: 18px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--af-muted, #B9B4A8); }
.af-calc2__meals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.af-calc2__meals label { position: relative; margin: 0; }
.af-calc2__meals input { position: absolute; inset: 0; opacity: 0; margin: 0; }
.af-calc2__meals span { display: block; padding: 11px 2px; border: 1px solid rgba(243, 239, 232, .16); border-radius: 12px; text-align: center; font-size: 13.5px; font-weight: 600; color: #CFC9BD; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.af-calc2__meals input:checked + span { background: #D2B04C; border-color: #D2B04C; color: #1B191C; }
.af-calc2__meals input:focus-visible + span { outline: 2px solid #EBD58A; outline-offset: 2px; }
.af-calc2__search { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 0 14px; border: 1px solid rgba(243, 239, 232, .2); border-radius: 16px; background: rgba(243, 239, 232, .05); color: var(--af-muted, #B9B4A8); }
.af-calc2__search:focus-within { border-color: #D2B04C; box-shadow: 0 0 0 3px rgba(210, 176, 76, .18); }
.af-calc2__search svg { flex: none; }
.af-account .af-calc2__search input { box-sizing: border-box; flex: 1; min-width: 0; width: auto; height: 50px; margin: 0; padding: 0 !important; border: 0 !important; border-radius: 0; background: none !important; box-shadow: none !important; outline: 0 !important; color: #F3EFE8 !important; font-size: 16px; }
.af-account .af-calc2__search input::placeholder { color: var(--af-muted, #B9B4A8); opacity: 1; }
.af-calc2__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.af-calc2 #af-calc-list:empty { display: none; }
.af-calc2__it { display: flex; align-items: center; gap: 6px; padding: 0 10px 0 0; border: 1px solid rgba(243, 239, 232, .1); border-radius: 16px; background: rgba(243, 239, 232, .05); }
.af-calc2__main { flex: 1; min-width: 0; display: grid; gap: 3px; padding: 12px 4px 12px 14px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.af-calc2__n { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-calc2__m { font-size: 12.5px; color: var(--af-muted, #B9B4A8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-calc2__plus { flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(243, 239, 232, .22); border-radius: 50%; background: rgba(243, 239, 232, .08); color: #EBD58A; font-size: 22px; line-height: 1; cursor: pointer; }
.af-calc2__plus:active, .af-calc2__main:active { opacity: .7; }
.af-calc2__none { padding: 12px 2px; color: var(--af-muted, #B9B4A8); font-size: 14px; }
.af-calc2 .af-calc__custom { margin-top: 12px; }
.af-calc2 .af-calc__custom > summary { padding: 6px 0; list-style: none; font-size: 13.5px; font-weight: 400; color: var(--af-muted, #B9B4A8); }
.af-calc2 .af-calc__custom > summary::-webkit-details-marker { display: none; }
.af-calc2 .af-calc__custom > summary strong { color: #EBD58A; font-weight: 600; }
.af-calc2 .af-calc__note { margin: 18px 0 16px; }
/* Her meal: the tray. */
.af-calc2__tray { position: sticky; bottom: 12px; z-index: 20; margin-top: auto; padding: 12px 14px 14px; border: 1px solid rgba(243, 239, 232, .22); border-radius: 20px; background: #26252B; box-shadow: 0 -10px 30px rgba(0, 0, 0, .45); }
@media (max-width: 781px) { .af-calc2__tray { bottom: calc(108px + env(safe-area-inset-bottom, 0px)); } }
.af-calc2__tray[hidden] { display: none; }
.af-calc2__trayh { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 0 0 12px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.af-calc2__trayh strong { display: block; font-size: 15px; }
.af-calc2__trayh small { display: block; margin-top: 2px; font-size: 13px; color: #EBD58A; }
.af-calc2__trayh i { flex: none; width: 10px; height: 10px; margin: 0 6px 4px 0; border-right: 2px solid var(--af-muted, #B9B4A8); border-bottom: 2px solid var(--af-muted, #B9B4A8); transform: rotate(-135deg); transition: transform .2s ease; }
.af-calc2__tray.is-open .af-calc2__trayh i { transform: rotate(45deg); margin-bottom: 8px; }
.af-calc2__traybody { max-height: 38vh; overflow-y: auto; overscroll-behavior: contain; margin-bottom: 12px; padding-top: 10px; border-top: 1px solid rgba(243, 239, 232, .14); }
.af-calc2__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.af-calc2__rows li { display: flex; align-items: center; gap: 8px; }
.af-calc2__rt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.af-calc2__rt .af-calc2__n { font-size: 14px; font-weight: 500; }
.af-calc2__q { flex: none; max-width: 46%; min-height: 36px; padding: 0 10px; border: 1px solid rgba(243, 239, 232, .25); border-radius: 10px; background: #1B1A20; color: #F3EFE8; font: inherit; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.af-calc2__q.is-fixed { display: inline-flex; align-items: center; border-style: dashed; color: var(--af-muted, #B9B4A8); cursor: default; }
.af-calc2__del { flex: none; width: 36px; height: 36px; padding: 0; border: 0; background: none; color: var(--af-muted, #B9B4A8); font-size: 20px; line-height: 1; cursor: pointer; }
.af-calc2__total { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid rgba(243, 239, 232, .14); }
.af-calc2__total strong { font-size: 13px; font-weight: 500; color: var(--af-muted, #B9B4A8); }
.af-calc2__total b { font-size: 19px; font-weight: 700; color: #F3EFE8; }
.af-calc2__clear { display: block; min-height: 36px; margin: 6px auto 0; padding: 0 8px; border: 0; background: none; color: var(--af-muted, #B9B4A8); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.af-calc2__save { margin: 0; }
.af-calc2__tray.is-new { animation: af-calc2-pop .5s ease; }
@keyframes af-calc2-pop { 0% { transform: translateY(10px); box-shadow: 0 0 0 3px rgba(210, 176, 76, .65), 0 -10px 30px rgba(0, 0, 0, .45); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .af-calc2__tray.is-new { animation: none; } }
/* The amount: the sheet. */
.af-calc2__sheet .af-sheet__body { gap: 12px; padding: 4px 18px 10px; }
.af-calc2__name { margin: 0; font-size: 19px; font-weight: 700; }
.af-calc2__per { margin: 4px 0 0; font-size: 13px; color: var(--af-muted, #B9B4A8); }
.af-calc2__qty { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 10px; align-items: center; margin-top: 4px; }
.af-calc2__qty > button { height: 52px; padding: 0; border: 1px solid rgba(243, 239, 232, .22); border-radius: 16px; background: rgba(243, 239, 232, .08); color: #EBD58A; font-size: 24px; line-height: 1; cursor: pointer; }
.af-calc2__qv { position: relative; display: block; height: 60px; margin: 0; border: 1.5px solid #D2B04C; border-radius: 16px; background: #151419; }
.af-account .af-calc2__qv input { box-sizing: border-box; width: 100%; height: 100%; margin: 0; padding: 0 34px !important; border: 0 !important; background: none !important; box-shadow: none !important; outline: 0 !important; color: #F3EFE8 !important; font-size: 30px !important; font-weight: 700; text-align: center; }
.af-calc2__qv small { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 15px; color: var(--af-muted, #B9B4A8); }
.af-calc2__units, .af-calc2__chips { display: flex; gap: 8px; }
.af-calc2__units[hidden] { display: none; }
.af-calc2__units { overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.af-calc2__units::-webkit-scrollbar { display: none; }
.af-calc2__units button, .af-calc2__chips button { flex: 1 0 auto; min-height: 40px; padding: 0 12px; border: 1px solid rgba(243, 239, 232, .16); border-radius: 12px; background: none; color: #CFC9BD; font: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.af-calc2__units button.is-on { background: rgba(210, 176, 76, .14); border-color: #D2B04C; color: #EBD58A; }
.af-calc2__chips button { flex: 1 1 0; padding: 0; }
.af-calc2__chips button.is-on { background: #D2B04C; border-color: #D2B04C; color: #1B191C; }
.af-calc2__res { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.af-calc2__res div { padding: 12px 0 10px; border-radius: 16px; background: rgba(210, 176, 76, .12); text-align: center; }
.af-calc2__res strong { display: block; font-size: 30px; font-weight: 700; line-height: 1.1; color: #EBD58A; }
.af-calc2__res span { font-size: 12.5px; color: #CFC9BD; }
.af-calc2__sheet #af-calc-add:disabled { opacity: .5; }
.af-account .af-calc2__save .af-btn { display: block; width: 100%; text-align: center; }
@media (min-width: 782px) { .af-calc2 { width: 100%; max-width: 720px; margin-left: auto; margin-right: auto; } }

/* ===== 6.98.1 — After the review of the buttons, the links and Maria's screens (phone, tablet) ===== */
/* Maria's Home: the sky is a layer of its own and was painted over the top tabs, the greeting and the "What's new" row
   (at 782–1099 px that left the screen with no visible menu). They stand above it. */
.af-coach-app > .af-account__top, .af-coach-app > .af-wnb, .af-coach-app > .af-tabs { position: relative; z-index: 3; }
/* A button with only "af-btn" had no look of its own (a grey browser button): the outline one is its base. */
:where(.af-account, dialog) :where(button.af-btn, a.af-btn):where(:not(.wp-element-button)) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 1px solid rgba(243, 239, 232, .25); border-radius: 999px; background: none; color: #F3EFE8; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
/* Sheets and dialogs are attached to the page, outside the app's column: they keep the app's letters (not the site's serif). */
body.af-app dialog { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--wp--preset--font-family--figtree, "Segoe UI"), Roboto, sans-serif; }
body.af-app dialog .wp-element-button, body.af-app dialog .af-btn, body.af-app dialog button, body.af-app dialog input, body.af-app dialog select, body.af-app dialog textarea { font-family: inherit !important; text-transform: none; letter-spacing: 0; }
/* Invite a friend: the link field no longer pushes the two buttons off the screen. */
.af-ref, .af-ref > * { min-width: 0; }
.af-ref__link { flex-wrap: wrap; }
.af-ref__link input { flex: 1 1 100%; box-sizing: border-box; width: 100%; }
.af-ref__link > button, .af-ref__link > a { flex: 1 1 0; }
/* Activity: the filter chips keep their shape. */
.af-act__filter .af-chip-btn { display: inline-flex; align-items: center; min-height: 38px; padding: .35rem .95rem; font-size: 14px; }
/* A search field that carries the class itself (not its wrapper). */
input.af-search { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 14px; border-radius: 12px; border: 0; background: rgba(243, 239, 232, .08); color: #F3EFE8; font: inherit; font-size: 16px; }
/* The locked screens: "choose the plan and pay" is the app's gold button, not the WhatsApp green. */
.af-account a.af-sub__wa:not([href*="wa.me"]):not([href*="whatsapp"]) { background: #D2B04C; border-color: #D2B04C; color: #1B191C; text-decoration: none; }
@media (min-width: 1100px) and (max-width: 1499px) {
	/* The side menu takes 208–250 px: the plan editor has no room for two columns (the food names were one letter wide). */
	body.af-coach:not(.af-pane) .af-pb:has(> .af-pbg) { display: block; }
	body.af-coach:not(.af-pane) .af-pb:has(> .af-pbg) > .af-pbg { position: static; max-height: none; overflow: visible; }
	/* With her plan open, the list of clients steps aside completely (it was crushed to 250 px). */
	.af-wide-split.is-plan { grid-template-columns: minmax(0, 1fr); }
	.af-wide-split.is-plan > .af-wide-left { display: none; }
}
@media (min-width: 1100px) {
	/* The title in the side menu: on two lines when it is long, never cut. */
	body.af-coach:not(.af-pane) .af-coach-app .af-account__heading { flex-wrap: wrap; }
	body.af-coach:not(.af-pane) .af-coach-app .af-account__hello { flex-wrap: wrap; font-size: 20px !important; line-height: 1.2; }
	body.af-coach:not(.af-pane) .af-coach-app .af-account__hello-text { white-space: normal; overflow: visible; text-overflow: clip; }
}
.af-account .af-ref__link .af-btn { min-height: 44px; border: 1px solid rgba(243, 239, 232, .25); border-radius: 999px; background: none; color: #F3EFE8; font: inherit; font-weight: 700; cursor: pointer; }
.af-account a.af-sub__pay:not([href*="wa.me"]):not([href*="whatsapp"]) { color: #1B191C !important; }

/* ===== 6.98.2 — The rest of the review: one primary button, larger touch areas, titles on two lines ===== */
/* One primary button everywhere: the same gold, the same height, the whole width (it was flat gold, light gold or a gradient,
   51–60 px tall, and sometimes only as wide as its text). */
.af-account .wp-element-button.af-btn.af-btn--block:not(.af-btn--ghost):not(.af-btn--danger):not([hidden]),
body.af-app dialog .wp-element-button.af-btn.af-btn--block:not(.af-btn--ghost):not(.af-btn--danger):not([hidden]) {
	display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-height: 52px; padding: 8px 18px !important;
	background: #D2B04C !important; background-image: none !important; color: #1B191C !important; font-size: 16px; line-height: 1.25; text-align: center;
}
.af-account .af-pushoff__on, .af-account .af-tn__ok, .af-tn__ok, .af-account .af-nudge__go, .af-account .af-inst__go, .af-account .af-bh__all { background: #D2B04C; background-image: none; color: #1B191C; }
.af-account .af-tn__ok, .af-account .af-tn__read, .af-tn__ok, .af-tn__read { min-height: 40px; }
.af-account .af-plan__seg button { min-height: 40px; }
/* Larger touch areas, the same look. */
.af-account a.af-rank { position: relative; }
.af-account a.af-rank::after { content: ''; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px; }
.af-account .af-hd__more a { display: inline-block; padding: 13px 2px; margin: -13px 0; }
.af-account .af-cd__step button { min-width: 40px; min-height: 40px; }
.af-account .af-shop__reset, .af-shop .af-shop__reset { min-height: 40px; padding-left: 8px; padding-right: 8px; }
.af-weeksheet__close { min-height: 44px; padding-left: 6px; padding-right: 6px; }
.af-account .af-bh__xdel { min-width: 40px; min-height: 40px; }
.af-account .af-bh__skip { min-height: 40px; }
.af-account .af-hd__wgo { min-height: 40px; }
.af-account .af-help { position: relative; }
.af-account .af-help::after, .af-account .af-hello-badge::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.af-account .af-lang a { box-sizing: border-box; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.af-account .af-ch__ic { min-width: 40px; min-height: 40px; }
.af-account a.af-ch__sub { padding-top: 9px; padding-bottom: 9px; }
/* Maria's Home: a tile with nothing to do is not a link. */
div.af-cbtile { opacity: .75; }
/* A page title that is still too long after shrinking: two lines, never cut. */
.af-account__heading.af-fit-wrap .af-account__hello-text { white-space: normal; overflow: hidden; text-overflow: clip; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 20px !important; line-height: 1.15; }
/* The small sheet that asks for a name. */
.af-ask .af-ask__in { width: 100%; box-sizing: border-box; min-height: 48px; padding: 10px 14px; border: 1px solid rgba(243, 239, 232, .22); border-radius: 12px; background: #17161B; color: #F3EFE8; font: inherit; font-size: 16px; }

/* 6.99: the Light plan made by the app */
.af-lhead { margin: 0 0 4px; padding: 12px 14px; font-size: 13.5px; line-height: 1.45; color: #E8E3DA; }
.af-bpl__meal--rule { padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.04); }
.af-bpl__meal--rule p { margin: 0; }
.af-bpl__meal--rule .af-bpl__mnote { padding: 4px 0 0; }
.af-lplan__allergy { color: #E8E3DA; }

/* 6.100: Maria's Light series (Conținut → Planul Light) */
.af-lser__state { padding: 12px 14px; font-size: 14px; line-height: 1.45; }
.af-lser__state small { display: block; margin-top: 4px; color: #A8A2AE; }
.af-lser__row { align-items: center; }
.af-lser__row .af-row__icon { font-weight: 700; color: #D2B04C; }
.af-lser__row a.af-row__text { color: inherit; text-decoration: none; min-width: 0; }
.af-lser__row.is-empty a.af-row__text span { color: #E7A6A6; }
.af-lser__row a.af-row__text { flex: 1 1 0; }
.af-lser__acts { display: flex; gap: 6px; margin-left: auto; }
@media (max-width: 599px) {
	.af-lser__row { flex-wrap: wrap; }
	.af-lser__acts { flex: 0 0 100%; justify-content: flex-end; margin: 8px 0 0; }
}
.af-lser__f { margin: 0; }
.af-lser__b { min-width: 44px; min-height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: transparent; color: #E8E3DA; font-size: 16px; cursor: pointer; }
.af-lser__b[disabled] { opacity: .3; cursor: default; }
.af-lser__new { margin: 12px 0; }
.af-lser__add { display: grid; gap: 10px; padding: 14px; }
.af-lser__add select { width: 100%; min-height: 48px; }

/* 6.102: the Light Plan: the morning weigh-in, above the weight field */
.af-lweigh { margin: 10px 0 0; padding: 12px 14px; font-size: 14px; line-height: 1.45; color: #E8E3DA; }
.af-lweigh--fri { border: 1px solid rgba(210,176,76,.5); }

/* 6.103: the Light Plan: "Preferințele mele" */
.af-lprefs__row { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 0 0 16px; }
.af-lprefs__n { font-size: 13px; font-weight: 600; opacity: .75; }
@media (min-width: 600px) { .af-lprefs__n { grid-column: 1 / -1; } }
.af-lprefs__row select { width: 100%; min-height: 48px; }
@media (min-width: 600px) { .af-lprefs__row { grid-template-columns: 1.2fr 1fr; } }
.af-lprefs__link { display: inline-block; margin: 2px 4px 8px; font-size: 13.5px; }

/* 6.105: the second tick above the pay button ("I am at least 18 and I accept the Terms"), drawn like the first */
.af-plans > p.af-plans__terms { padding: 4px 2px 2px; }
.af-plans__terms label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.af-plans__terms input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: #D2B04C; }
.af-plans__terms label > span { font-size: 14px; line-height: 1.45; color: var(--af-muted, #C9C4BD); }
.af-plans__terms a { color: #EBD58A; }
.af-plans__terms .af-req { display: inline; color: #D2B04C; }
.af-lplan__kg { margin: 10px 0 0; }

/* 6.108 accounts */
.af-auth__err a { color: inherit; text-decoration: underline; }
/* 6.108 cycle */
/* A spotting day (one light day on its own): the colour of its phase and a small pink dot, not the full period colour. */
.af-cyc-d.is-spot::before { content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: #ED93B1; }
.af-cyc-legend em.is-spot { width: 7px; height: 7px; margin: 0 2px; border-radius: 50%; background: #ED93B1; }
.af-cyc__spot { margin: 8px 0 0; }
.af-cyc-now__then { opacity: .85; }
/* 6.108 story cards */
/* "Share to Stories": small cards to choose from (live pictures of her week), above the large one.
   6.109: six of them: the row slides sideways, with the fifth showing at the edge. */
.af-weeksheet__designs { position: relative; display: flex; gap: 10px; margin: 0 -16px 4px; padding: 4px 16px 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding: 0 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.af-weeksheet__designs::-webkit-scrollbar { display: none; }
.af-weeksheet__d { flex: 0 0 calc((100% - 40px) / 4.5); scroll-snap-align: start; }
.af-weeksheet__d { display: grid; gap: 6px; justify-items: center; min-width: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--af-muted, #A8A29B); font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.2; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.af-weeksheet__d canvas { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 9px; box-shadow: 0 0 0 1.5px rgba(243, 239, 232, .16); }
.af-weeksheet__d span { white-space: nowrap; }
.af-weeksheet__d[aria-checked="true"] { color: #EBD58A; }
.af-weeksheet__d[aria-checked="true"] canvas { box-shadow: 0 0 0 3px #D2B04C, 0 6px 18px rgba(0, 0, 0, .45); }
.af-weeksheet__d:focus-visible { outline: none; }
.af-weeksheet__d:focus-visible canvas { outline: 2px solid #EBD58A; outline-offset: 4px; }
.af-weeksheet .af-weeksheet__label { margin-bottom: 4px; }
.af-weeksheet .af-weeksheet__canvas { max-width: 252px; }

/* 6.113 pay form on wide screens */
/* The theme styles the three price columns of the public "Plans and prices" page with the same class name
   (.af-plans, three columns from 900px). In the app that spread the pay form over three columns: the plans, the
   two ticks and the pay button landed side by side, in no order. Here it is always one column, and on a wide
   screen it keeps the width of a form. */
form.af-plans { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { form.af-plans { width: 100%; max-width: 560px; margin-inline: auto; } }

/* 6.113 Home on wide screens: the menu */
/* On a phone the bar at the bottom is the menu. From 782px that bar is not shown, and Home hid the top row that
   carries the menu on every other page: on a laptop there was no way from Home to Journal, Messages or Account
   except through a card. The top row shows on Home too, with the menu only (Home has its own greeting and icons). */
@media (min-width: 782px) {
	.af-beta.af-tab--home .af-account__top { display: flex; justify-content: flex-end; position: relative; z-index: 4; margin-bottom: 0; }
	.af-beta.af-tab--home .af-account__top > .af-account__heading, .af-beta.af-tab--home .af-account__top > .af-bh__icons { display: none; }
}
/* 6.114 Home on wide screens: the day's arc keeps a hand-sized width and sits in the middle (it used to grow with the screen). */
@media (min-width: 640px) {
	.af-beta .af-bh .af-bh__arcbox { max-width: 600px; margin-left: auto; margin-right: auto; }
}
/* 6.115 "Choose your plan": two cards (Elite, Light), then the pay form of the chosen one */
.af-choose { display: grid; gap: 10px; scroll-margin-top: 88px; }
.af-choose > .af-section-label { margin-bottom: 0; }
.af-choose__step { display: grid; gap: 10px; }
.af-choose__step[hidden], .af-choose__pane[hidden] { display: none !important; }
.af-choose__cards { display: grid; gap: 12px; text-align: left; }
.af-choose__card { display: flex; flex-direction: column; gap: 8px; padding: 18px 16px 16px; border-radius: 18px; background: #1F1E21; border: 1.5px solid rgba(255, 255, 255, .1); }
.af-choose__card--elite { border-color: rgba(210, 176, 76, .6); background: linear-gradient(180deg, rgba(210, 176, 76, .13), rgba(210, 176, 76, 0) 150px), #1F1E21; }
.af-choose__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; }
.af-choose__name { font-family: var(--wp--preset--font-family--caslon, Georgia, serif); font-size: 24px; font-weight: 400; line-height: 1.15; color: #F3EFE8; }
.af-choose__chip { font-style: normal; font-size: 11.5px; font-weight: 800; padding: 3px 8px; border-radius: 8px; background: rgba(239, 159, 39, .14); color: #EF9F27; white-space: nowrap; }
.af-choose__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin: 0; }
.af-choose__price b { font-size: 26px; font-weight: 800; line-height: 1.1; color: #F3EFE8; }
.af-choose__card--elite .af-choose__price b { color: #EBD58A; }
.af-choose__price span { font-size: 14px; color: var(--af-muted, #A8A29B); }
.af-choose__price small { margin-left: auto; font-size: 13px; color: var(--af-muted, #A8A29B); white-space: nowrap; }
.af-choose__for { margin: 0; font-size: 15px; line-height: 1.4; color: #F3EFE8; }
.af-choose__list { list-style: none; margin: 4px 0 2px; padding: 0; display: grid; gap: 7px; flex: 1 0 auto; align-content: start; }
.af-choose__list li { position: relative; padding-left: 24px; font-size: 14.5px; line-height: 1.4; color: #F3EFE8; }
.af-choose__list li::before { content: "✓"; position: absolute; left: 2px; top: 0; color: #7FD1A8; font-weight: 800; }
.af-choose__not { margin: 0; font-size: 13px; line-height: 1.4; color: var(--af-muted, #A8A29B); }
.af-choose__go { margin-top: 6px; min-height: 50px; display: inline-flex !important; align-items: center; justify-content: center; text-align: center; }
.af-account .af-choose__card--light a.wp-element-button.af-btn.af-btn--block.af-choose__go:not(.af-btn--ghost):not(.af-btn--danger):not([hidden]) { background: #F3EFE8 !important; color: #1D1C1E !important; border-color: #F3EFE8 !important; box-shadow: none !important; }
.af-choose__diff { margin: 2px 4px 0 !important; text-align: left; }
.af-choose__pane { padding: 0 !important; }
.af-choose__picked { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 14px 16px 0; }
.af-choose__picked strong { font-family: var(--wp--preset--font-family--caslon, Georgia, serif); font-size: 22px; font-weight: 400; outline: none; }
.af-choose__picked a { font-size: 14px; font-weight: 700; color: #EBD58A; text-decoration: underline; text-underline-offset: 3px; padding: 8px 0 8px 8px; white-space: nowrap; }
.af-choose__body { display: grid; gap: 10px; padding: 4px 14px 16px; }
.af-choose__body > .af-card { padding: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0; }
.af-choose__body > .af-hint, .af-choose__body > .af-alert { margin: 0; }
.af-plans__next { margin: 0 !important; text-align: center; color: #F3EFE8 !important; }
.af-free--two { padding-left: 12px; padding-right: 12px; }
.af-free--two .af-choose__cards { margin: 6px 0 4px; }
.af-free--two .af-choose__diff { margin-bottom: 6px !important; }
@media (min-width: 700px) {
	.af-choose__cards { grid-template-columns: 1fr 1fr; align-items: stretch; }
	.af-choose { width: 100%; max-width: 860px; margin-inline: auto; }
	.af-choose__pane { width: 100%; max-width: 620px; margin-inline: auto; }
	.af-free--two { grid-template-columns: minmax(0, 1fr) !important; justify-items: center; gap: 12px !important; padding: 30px 18px; }
	.af-free--two > * { width: 100%; max-width: 860px; }
	.af-free--two > .af-btn { max-width: 420px; }
}

/* 6.116 Home on a laptop: "made for your phone" band with a QR code */
.af-deskqr { display: none; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
	.af-deskqr { display: flex; align-items: center; gap: 14px; box-sizing: border-box; min-width: 0; max-width: 100%; margin: 0 0 12px; padding: 8px 8px 8px 16px; border-radius: 16px; background: linear-gradient(160deg, #2A2416, #1F1E21 55%); border: 1px solid rgba(235, 213, 138, .35); }
	.af-deskqr > img { flex: none; width: 44px; height: 44px; border-radius: 12px; background: #141316; }
	.af-deskqr > p { flex: 1; min-width: 0; margin: 0; display: grid; gap: 4px; color: #F3EFE8; }
	.af-deskqr > p strong { font-size: 17px; line-height: 1.25; font-weight: 700; }
	.af-deskqr > p span { font-size: 14px; line-height: 1.4; color: #A8A29B; }
	.af-deskqr__qr { flex: none; display: grid; justify-items: center; gap: 4px; }
	.af-deskqr__tile { display: block; overflow: hidden; border-radius: 8px; background: #fff; }
	.af-deskqr__tile svg { display: block; width: 100%; height: 100%; }
	.af-deskqr__off { flex: none; align-self: flex-start; margin: 0; }
	.af-deskqr__x { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: #A8A29B; font: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
	.af-deskqr__x:hover, .af-deskqr__x:focus-visible { background: rgba(243, 239, 232, .08); color: #F3EFE8; }
}

/* 6.117 Progress: the new page (overview, weight, days) */
.af-pg { --pg-card: #1F1E21; --pg-line: rgba(255, 255, 255, .08); --pg-text: #F3EFE8; --pg-muted: #A8A29B; --pg-soft: #DDD8D0; --pg-gold: #D2B04C; --pg-gold-l: #EBD58A; --pg-green: #7FD1A8; --pg-red: #F09595; --pg-pink: #E6AEB8; --pg-blue: #7FB2E6; --pg-serif: var(--wp--preset--font-family--caslon, "Libre Caslon Text", Georgia, "Times New Roman", serif); box-sizing: border-box; min-width: 0; width: 100%; color: var(--pg-text); font-size: 16px; line-height: 1.45; }
.af-pg *, .af-pg *::before, .af-pg *::after { box-sizing: border-box; }
.af-pg p { margin: 0; }
.af-pg a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.af-pg a:focus-visible, .af-pg button:focus-visible, .af-pg .af-pgc:focus-visible { outline: 2px solid var(--pg-gold-l); outline-offset: 2px; }
.af-pg .af-pg-ic { flex: none; width: 18px; height: 18px; }
.af-pg-c { background: var(--pg-card); border: 1px solid var(--pg-line); border-radius: 20px; padding: 20px 16px 16px; margin: 0 0 12px; scroll-margin-top: 72px; }
.af-pg .af-pg-c__t { margin: 0; font-family: var(--pg-serif); font-size: 22px; font-weight: 400; line-height: 1.2; letter-spacing: 0; text-transform: none; color: var(--pg-text); }
.af-pg-c__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.af-pg .af-pg-lab { font-size: 13px; font-weight: 600; letter-spacing: .04em; line-height: 1.45; color: var(--pg-muted); }
.af-pg .af-pg-lnk { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--pg-gold-l); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.af-pg .af-pg-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; margin: 0; padding: 0 16px; border: 0; border-radius: 999px; font: inherit; font-weight: 700; font-size: 16px; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.af-pg .af-pg-btn--gold { background: linear-gradient(135deg, #DFC164, #D2B04C); color: #1D1C1E; }
.af-pg .af-pg-btn--sec { border: 1px solid rgba(235, 213, 138, .5); color: var(--pg-gold-l); background: rgba(210, 176, 76, .07); }
.af-pg .af-pg-btn:active, .af-pg .af-pg-q:active, .af-pg .af-pg-go:active, .af-pg .af-pg-strip:active { transform: scale(.985); }

/* The card on top: the change since the start, the way to her target */
.af-pg-hero { padding: 20px 16px 16px; }
.af-pg-hero--door { padding-bottom: 0; }
.af-pg .af-pg-hero__n { margin: 10px 0; font-family: var(--pg-serif); font-size: 66px; font-weight: 400; line-height: 1; letter-spacing: -.015em; white-space: nowrap; }
.af-pg-hero__n small { font-size: 30px; letter-spacing: 0; }
.af-pg .af-pg-hero__s { margin: 0 0 18px; font-size: 16px; }
.af-pg-hero .af-pg-form { margin: 0 0 18px; }
/* 6.139: since her first weigh-in. */
.af-pg .af-pg-first__n { margin: 8px 0 6px; font-family: var(--pg-serif); font-size: 44px; font-weight: 400; line-height: 1; letter-spacing: -.015em; white-space: nowrap; }
.af-pg-first__n small { font-size: 22px; letter-spacing: 0; }
.af-pg .af-pg-first__s { margin: 0; font-size: 15px; }
.af-pg-trk { position: relative; padding-top: 30px; }
.af-pg-trk__now { position: absolute; top: 0; left: calc(var(--p) * 1%); transform: translateX(-50%); font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--pg-gold-l); white-space: nowrap; }
.af-pg-trk__now b { font-weight: 800; }
.af-pg-trk.is-low .af-pg-trk__now { left: 0; transform: none; }
.af-pg-trk.is-high .af-pg-trk__now { left: auto; right: 0; transform: none; }
.af-pg-trk__bar { position: relative; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .11); }
.af-pg-trk__fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 1%); border-radius: 99px; background: linear-gradient(90deg, #D2B04C, #EBD58A); }
.af-pg-trk__knob { position: absolute; top: 50%; left: clamp(9px, calc(var(--p) * 1%), calc(100% - 9px)); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #EBD58A; border: 3px solid var(--pg-card); box-shadow: 0 0 0 1.5px var(--pg-gold); }
.af-pg-trk__knob::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 4px); width: 1px; height: 7px; background: rgba(235, 213, 138, .55); }
.af-pg-trk__ends { display: flex; justify-content: space-between; gap: 8px; margin-top: 11px; font-size: 13px; color: var(--pg-muted); }
.af-pg-trk__ends b { color: var(--pg-text); font-weight: 700; }
.af-pg .af-pg-hero__p { margin: 14px 0 0; font-size: 16px; font-weight: 700; }
.af-pg .af-pg-hero__t { margin: -8px 0 0; }
/* Her pace on two lines; "Change target" sits beside the second one (it never runs over the words). */
.af-pg-hero__f { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 12px; margin-top: 5px; font-size: 14px; line-height: 1.45; color: var(--pg-muted); }
.af-pg .af-pg-hero__r { display: contents; }
.af-pg-hero__r1 { grid-column: 1 / -1; }
.af-pg-hero__r2 { grid-column: 1; }
.af-pg-hero__f .af-pg-lnk { grid-column: 2; align-items: flex-end; margin: -24px 0 -6px; padding: 0 0 6px 8px; white-space: nowrap; }
.af-pg-hero__f--link { margin-top: 0; }
.af-pg-hero__f--link .af-pg-lnk { margin-top: -6px; }
.af-pg .af-pg-more { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; margin: 16px -16px 0; padding: 0 16px; border-top: 1px solid var(--pg-line); border-radius: 0 0 19px 19px; color: var(--pg-gold-l); font-weight: 600; font-size: 15px; text-decoration: none; }

/* Nothing noted yet: one thing to do */
.af-pg-es { padding: 24px 18px 20px; }
.af-pg .af-pg-es__t { margin: 0 0 10px; font-family: var(--pg-serif); font-size: 27px; font-weight: 400; line-height: 1.2; letter-spacing: 0; text-transform: none; color: var(--pg-text); }
.af-pg .af-pg-es__p { margin: 0 0 18px; color: var(--pg-soft); }
.af-pg-form { margin: 0; }
.af-pg-inp { display: flex; align-items: center; gap: 8px; height: 58px; margin: 0 0 12px; padding: 0 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .2); background: #141315; cursor: text; }
.af-pg-inp:focus-within { border-color: var(--pg-gold); }
.af-pg .af-pg-inp input { flex: 1; min-width: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; border-radius: 0; background: none; box-shadow: none; color: var(--pg-text); font: inherit; font-weight: 700; font-size: 22px; -webkit-appearance: none; appearance: none; }
.af-pg-inp input::placeholder { color: #6F6A65; font-weight: 600; opacity: 1; }
.af-pg-inp > span[aria-hidden] { color: var(--pg-muted); font-weight: 700; font-size: 17px; }
.af-pg .af-pg-err { margin: -4px 0 12px; color: var(--pg-red); font-size: 14px; }
.af-pg-err[hidden] { display: none; }
.af-pg .af-pg-ok { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: rgba(127, 209, 168, .12); border: 1px solid rgba(127, 209, 168, .35); color: var(--pg-text); font-size: 15px; font-weight: 600; }
.af-pg-ok .af-pg-ic { color: var(--pg-green); }
.af-pg .af-pg-ok--no { background: rgba(240, 149, 149, .1); border-color: rgba(240, 149, 149, .4); }
.af-pg-next { padding: 14px 6px 0; margin-bottom: 12px; }
.af-pg-next + .af-pg-c { margin-top: 24px; }
.af-pg .af-pg-next__t { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--pg-muted); }
.af-pg-next ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.af-pg-next li { position: relative; margin: 0; padding-left: 20px; color: var(--pg-muted); font-size: 15px; line-height: 1.4; }
.af-pg-next li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(168, 162, 155, .8); }

/* The overview: the cards that open the days, the strip, the card at the bottom */
.af-pg .af-pg-q { display: block; margin: 0 0 12px; padding: 17px 16px 19px; background: var(--pg-card); border: 1px solid var(--pg-line); border-radius: 20px; color: var(--pg-text); text-decoration: none; }
.af-pg-q__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.af-pg-q__top .af-pg-ic { color: var(--pg-gold-l); }
.af-pg-q__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.af-pg-q__a { display: block; min-width: 0; font-size: 15.5px; line-height: 1.25; }
.af-pg-q__a b { font-family: var(--pg-serif); font-size: 34px; font-weight: 400; line-height: 1.1; white-space: nowrap; margin-right: 4px; }
.af-pg-q__a i + b { margin-left: 4px; }
.af-pg-q__a i { font-style: normal; white-space: nowrap; }
.af-pg-q__a--add i { white-space: normal; font-weight: 600; color: var(--pg-gold-l); }
.af-pg-q__sub { display: block; margin-top: 11px; font-size: 13.5px; line-height: 1.3; color: var(--pg-muted); }
.af-pg-q__ph { display: flex; gap: 6px; flex: none; }
.af-pg-q__ph img { display: block; width: 36px; height: 45px; border-radius: 9px; border: 1px solid var(--pg-line); background: #2C2B2F; object-fit: cover; }
.af-pg-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); justify-items: center; margin: 0 0 16px; }
.af-pg-day { display: grid; justify-items: center; gap: 7px; }
.af-pg-day__l { font-size: 12.5px; font-weight: 600; line-height: 1; color: var(--pg-muted); }
.af-pg-day__c { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-weight: 800; font-size: 16px; line-height: 1; }
.af-pg .af-pg-day__c .af-pg-ic { width: 18px; height: 18px; }
.af-pg-day__c--y { background: var(--pg-green); color: #10261B; }
.af-pg-day__c--h { background: var(--pg-blue); color: #0E2238; }
.af-pg-day__c--n { background: var(--pg-red); color: #3B1212; }
.af-pg-day__c--e { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .24); }
.af-pg-day.is-next .af-pg-day__c--e { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .13); }
.af-pg-day.is-today .af-pg-day__c { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .24), 0 0 0 2px var(--pg-card), 0 0 0 4px var(--pg-gold); }
.af-pg-day.is-today .af-pg-day__c--y, .af-pg-day.is-today .af-pg-day__c--h, .af-pg-day.is-today .af-pg-day__c--n { box-shadow: 0 0 0 2px var(--pg-card), 0 0 0 4px var(--pg-gold); }
.af-pg-day.is-today .af-pg-day__l { color: var(--pg-gold-l); font-weight: 800; }
.af-pg-days--s { margin: 14px 0 0; }
.af-pg-days--s .af-pg-day { gap: 5px; }
.af-pg-days--s .af-pg-day__c { width: 30px; height: 30px; font-size: 14px; }
.af-pg .af-pg-days--s .af-pg-day__c .af-pg-ic { width: 15px; height: 15px; }
.af-pg-days--s .af-pg-day__l { font-size: 11.5px; }
.af-pg .af-pg-strip { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; margin: 2px 0 14px; padding: 8px 14px; border-radius: 24px; border: 1px solid var(--pg-line); background: rgba(255, 255, 255, .035); color: var(--pg-soft); font-size: 14.5px; font-weight: 600; line-height: 1.5; text-align: center; text-decoration: none; }
.af-pg .af-pg-strip .af-pg-ic { width: 16px; height: 16px; color: var(--pg-gold-l); }
.af-pg .af-pg-go { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; margin: 0 0 12px; padding: 12px 16px; background: var(--pg-card); border: 1px solid var(--pg-line); border-radius: 20px; color: var(--pg-text); text-decoration: none; }
.af-pg-go__tx { display: block; min-width: 0; }
.af-pg-go__t { display: block; font-weight: 700; font-size: 16.5px; line-height: 1.3; }
.af-pg-go__s { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.35; color: var(--pg-muted); }
.af-pg-go > .af-pg-ic { color: var(--pg-gold-l); }

/* The two pages a card opens: "‹ Progress", the title, their cards */
.af-pg-head { margin: 0 0 18px; }
.af-pg .af-pg-back { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin: 8px 0 0 -6px; padding-right: 10px; color: var(--pg-gold-l); font-weight: 600; font-size: 16px; text-decoration: none; }
.af-pg .af-pg-back .af-pg-ic { width: 22px; height: 22px; }
.af-pg .af-pg-head__t { margin: 2px 0 0; font-family: inherit; font-size: 32px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; text-transform: none; color: var(--pg-text); }
.af-pg .af-pg-head__t--2 { margin-top: 4px; line-height: 1.1; text-wrap: balance; }
@media (max-width: 781px) {
	.af-beta.af-pg-sub .af-account__top { display: none; } /* The page has its own header (as Home does); the bar on scroll keeps the back arrow, the calculator and the bell. */
}
@media (min-width: 782px) {
	.af-beta.af-pg-sub .af-account__heading { display: none; }
}

/* Weight: the chart */
.af-pg-chips { display: flex; gap: 8px; margin: 10px 0 6px; }
.af-pg .af-pg-chip { position: relative; isolation: isolate; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; color: #C9C4BC; font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; }
.af-pg-chip::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 4px; bottom: 4px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); pointer-events: none; }
.af-pg .af-pg-chip.is-on { color: var(--pg-gold-l); }
.af-pg-chip.is-on::before { background: rgba(210, 176, 76, .17); border-color: rgba(210, 176, 76, .65); }
.af-pg-chart__pane[hidden] { display: none; }
.af-pg .af-pg-chart__few { margin: 10px 0 0; padding: 22px 16px; border-radius: 14px; background: rgba(255, 255, 255, .035); color: var(--pg-soft); font-size: 15px; text-align: center; }
.af-pgc { position: relative; padding: 8px 8px 0 46px; border-radius: 8px; cursor: crosshair; touch-action: pan-y; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
.af-pgc__plot { position: relative; height: 160px; }
.af-pgc__svg, .af-pgc__dots, .af-pgc__avg, .af-pgc__avg > svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.af-pgc__grid { stroke: rgba(255, 255, 255, .09); stroke-width: 1; vector-effect: non-scaling-stroke; }
.af-pgc__target { stroke: var(--pg-green); stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.af-pgc__dot { position: absolute; width: 5.5px; height: 5.5px; margin: -2.75px 0 0 -2.75px; border-radius: 50%; background: rgba(243, 239, 232, .45); }
.af-pgc__line { fill: none; stroke: var(--pg-gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.af-pgc__joint { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--pg-gold); box-shadow: 0 0 0 2px var(--pg-card); }
.af-pgc__labs { position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; }
.af-pgc__yl, .af-pgc__tl, .af-pgc__xl { position: absolute; font-size: 11px; font-weight: 500; line-height: 1; color: var(--pg-muted); white-space: nowrap; }
.af-pgc__yl { right: 100%; margin-right: 9px; transform: translateY(-50%); }
.af-pgc__tl { right: 0; margin-top: -5px; transform: translateY(-100%); font-weight: 600; color: var(--pg-green); }
.af-pgc__tl.is-under { margin-top: 5px; transform: none; }
.af-pgc__x { position: relative; height: 30px; }
.af-pgc__xl { top: 11px; transform: translateX(-50%); }
.af-pgc__xl::before { content: ""; position: absolute; left: 50%; top: -11px; width: 1px; height: 5px; background: rgba(255, 255, 255, .22); }
.af-pgc__xl.is-first { transform: none; }
.af-pgc__xl.is-first::before { left: 0; }
.af-pgc__xl.is-last { transform: translateX(-100%); }
.af-pgc__xl.is-last::before { left: 100%; }
.af-pgc__act { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--pg-gold-l); box-shadow: 0 0 0 2px var(--pg-card); pointer-events: none; }
.af-pg .af-pgc__tip { position: absolute; z-index: 3; left: 0; top: 0; margin: 0; padding: 6px 9px; border-radius: 9px; background: #F3EFE8; color: #1D1C1E; font-size: 12.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
.af-pgc__act[hidden], .af-pgc__tip[hidden] { display: none; }
.af-pg .af-pg-chart__note { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 13px; color: var(--pg-muted); }
.af-pg-chart__note i { flex: none; width: 20px; border-top: 2px dashed var(--pg-green); }
.af-pg .af-pg-cap { margin: 12px 0 16px; font-size: 13.5px; line-height: 1.5; color: var(--pg-muted); }

/* Weight: the reference range */
.af-pg .af-pg-ref__v { margin: 10px 0 4px; font-size: 15px; color: var(--pg-muted); }
.af-pg-ref__v b { font-family: var(--pg-serif); font-size: 30px; font-weight: 400; line-height: 1.1; color: var(--pg-text); margin-right: 2px; }
.af-pg .af-pg-ref__p { margin: 10px 0 14px; font-size: 14.5px; line-height: 1.5; color: var(--pg-muted); }
.af-pg .af-pg-ref__v + .af-pg-ref__p { margin-top: 0; }
.af-pg-ref__bar { position: relative; height: 8px; margin: 0 0 12px; border-radius: 99px; background: rgba(255, 255, 255, .1); }
.af-pg-ref__zone { position: absolute; top: 0; bottom: 0; left: 20%; right: 20%; border-radius: 99px; background: var(--pg-green); }
.af-pg-ref__dot { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #EBD58A; border: 3px solid #2A2416; box-shadow: 0 0 0 2px #EBD58A; }
.af-pg-ref__bar--in .af-pg-ref__dot { background: #F3EFE8; border-color: #14261D; box-shadow: 0 0 0 2px #F3EFE8; }
.af-pg .af-pg-ref__note { margin: 0 0 10px; }
.af-pg .af-pg-ref__s { margin: 0; font-size: 14px; font-weight: 600; color: var(--pg-muted); }
.af-pg .af-pg-ref__s--in { color: var(--pg-green); }
.af-pg .af-pg-ref__s--above { color: var(--pg-gold-l); }
.af-pg .af-pg-ref__s--below { color: #C9C3F5; }
.af-pg-ref .af-pg-btn { margin-top: 2px; }

/* The days: the week */
.af-pg-wk { padding-bottom: 8px; }
.af-pg-wk__nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0 16px; }
.af-pg .af-pg-wk__btn { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .07); color: var(--pg-gold-l); text-decoration: none; }
.af-pg .af-pg-wk__btn .af-pg-ic { width: 20px; height: 20px; }
.af-pg .af-pg-wk__btn.is-off { opacity: .3; }
.af-pg-wk__lab { font-weight: 700; font-size: 16px; text-align: center; }
.af-pg .af-pg-wk__s { margin: 0 0 8px; font-size: 16px; line-height: 1.45; }
.af-pg-wk__s b { font-weight: 700; white-space: nowrap; }
.af-pg .af-pg-wk__leg { margin: 0 0 16px; font-size: 12.5px; color: var(--pg-muted); }
.af-pg-wk__leg b { font-weight: 800; }
.af-pg .af-pg-wk__leg .af-pg-ic { width: 12px; height: 12px; vertical-align: -1.5px; }
.af-pg-g--y { color: var(--pg-green); }
.af-pg-g--h { color: var(--pg-blue); }
.af-pg-g--n { color: var(--pg-red); }
.af-pg-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 8px; }
.af-pg .af-pg-tile { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; min-height: 44px; padding: 12px 10px 10px; border-radius: 16px; background: rgba(255, 255, 255, .045); border: 1px solid var(--pg-line); color: var(--pg-text); text-decoration: none; }
.af-pg a.af-pg-tile:active { transform: scale(.98); }
.af-pg-ring { position: relative; display: block; width: 40px; height: 40px; margin: 0 0 8px; color: var(--pg-gold-l); }
.af-pg-ring > svg { display: block; width: 40px; height: 40px; transform: rotate(-90deg); }
.af-pg-ring__t { fill: none; stroke: rgba(255, 255, 255, .11); stroke-width: 4; }
.af-pg-ring__f { fill: none; stroke: var(--pg-gold); stroke-width: 4; stroke-linecap: round; }
.af-pg-ring__i { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: grid; place-items: center; }
.af-pg .af-pg-ring__i .af-pg-ic { width: 16px; height: 16px; }
.af-pg-tile__k { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--pg-muted); }
.af-pg-tile__v { font-size: 19px; font-weight: 800; line-height: 1.25; white-space: nowrap; }
.af-pg-tile__u { font-size: 12.5px; line-height: 1.3; min-height: 16px; white-space: nowrap; }
.af-pg-tile__sub { margin-top: 4px; min-height: 16px; font-size: 12px; line-height: 1.3; color: var(--pg-muted); white-space: nowrap; }
.af-pg-tile.is-none .af-pg-tile__v { color: var(--pg-muted); }
.af-pg-tile.is-none .af-pg-ring { color: var(--pg-muted); }
.af-pg-metric { margin: 12px 0 8px; scroll-margin-top: 72px; }
.af-pg-metric .af-card { margin: 0; padding: 14px 12px; background: rgba(255, 255, 255, .045); border: 1px solid var(--pg-line); border-radius: 16px; }
.af-pg .af-pg-story { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin: 0; padding: 0 12px; border: 0; border-radius: 12px; background: none; color: var(--pg-gold-l); font: inherit; font-weight: 600; font-size: 15px; text-align: center; cursor: pointer; -webkit-appearance: none; appearance: none; }
.af-pg-sheet .af-sheet__body { padding-bottom: 12px; }
.af-pg-sheet .af-card { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
.af-pg-sheet .af-card__title { display: none; } /* The sheet has the title. */

/* The days: measurements, photos, calendar */
.af-pg-ms { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--pg-line); }
.af-pg-c__t + .af-pg-ms { margin-top: 14px; }
.af-pg-ms__n { font-weight: 700; font-size: 16px; line-height: 1.3; }
.af-pg-ms__d { font-size: 13.5px; line-height: 1.35; color: var(--pg-muted); }
.af-pg-ms__d.is-good { color: var(--pg-green); }
.af-pg-ms__v { font-size: 20px; font-weight: 800; white-space: nowrap; }
.af-pg-ms__v--none { color: var(--pg-muted); }
.af-pg-sp { display: block; overflow: visible; }
.af-pg-sp__line { fill: none; stroke: var(--pg-gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.af-pg-sp__end { fill: var(--pg-gold-l); }
.af-pg .af-pg-note { padding-top: 12px; border-top: 1px solid var(--pg-line); font-size: 13.5px; color: var(--pg-muted); }
.af-pg .af-pg-note--only { margin-top: 12px; }
.af-pg-poze { padding-bottom: 6px; }
.af-pg-ph2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 8px; }
.af-pg-ph2--1 { grid-template-columns: minmax(0, 1fr); max-width: 50%; }
.af-pg-ph2 figure { margin: 0; }
.af-pg-ph2 img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 14px; border: 1px solid var(--pg-line); background: linear-gradient(165deg, #3B3A3F 0%, #2C2B2F 55%, #242326 100%); object-fit: cover; }
.af-pg-ph2 figcaption { margin-top: 7px; font-size: 13.5px; font-weight: 600; color: #C9C4BC; text-align: center; }
.af-pg .af-pg-poze__none { margin: 12px 0 4px; color: var(--pg-muted); }
.af-pg .af-pg-rowl { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; color: var(--pg-gold-l); font-weight: 600; font-size: 15px; text-decoration: none; }
/* The month calendar of the journal, as it is: only its colours and its legend are dressed for this page. */
.af-pg-cal .af-cal { padding-top: 12px; }
.af-pg-cal .af-cal__head strong { font-weight: 700; text-transform: capitalize; }
.af-pg .af-pg-cal .af-cal__nav { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; color: var(--pg-gold-l); text-decoration: none; }
.af-pg-cal .af-cal__grid { gap: 5px; }
.af-pg-cal .af-cal__dow { font-size: 12px; font-weight: 600; color: var(--pg-muted); }
.af-pg .af-pg-cal .af-cal__cell { border-color: rgba(255, 255, 255, .1); font-size: 14px; font-weight: 600; color: var(--pg-text); text-decoration: none; }
.af-pg-cal .af-cal__cell--empty { border: 0; }
.af-pg .af-pg-cal .af-cal__cell--future { opacity: 1; color: #8F8983; }
.af-pg .af-pg-cal .af-cal__cell.af-adh--yes { background: var(--pg-green); border-color: var(--pg-green); color: #10261B; font-weight: 700; }
.af-pg .af-pg-cal .af-cal__cell.af-adh--partly { background: var(--pg-blue); border-color: var(--pg-blue); color: #0E2238; font-weight: 700; }
.af-pg .af-pg-cal .af-cal__cell.af-adh--no { background: var(--pg-red); border-color: var(--pg-red); color: #3B1212; font-weight: 700; }
.af-pg-cal .af-cal__cell.af-adh--none { background: rgba(255, 255, 255, .06); }
.af-pg .af-pg-cal .af-cal__cell.is-today { border: 2px solid var(--pg-gold); }
.af-pg-cal .af-cal__cell.is-selected { outline: 0; }
.af-pg-cal .af-cal__cell:focus-visible { outline: 2px solid var(--pg-gold-l); outline-offset: 2px; }
.af-pg-cal .af-cal__w { display: none; } /* The weight is on "Weight"; here a day says how the plan went. */
.af-pg-cal .af-cal__cell .af-cal__c { top: -3px; right: -3px; width: 11px; height: 11px; border-radius: 50%; background: var(--pg-pink); border: 2px solid var(--pg-card); font-size: 0; line-height: 0; overflow: hidden; }
/* Its legend: every item with its square. (.af-dot is also the red dot of Maria's list, absolutely placed; here it is
   an inline mark that cannot be parted from the word after it.) */
.af-pg .af-pg-cal .af-cal__legend { display: block; margin: 14px 0 0; font-size: 13px; line-height: 1.9; color: var(--pg-soft); word-spacing: 0; }
.af-pg-cal .af-cal__legend .af-dot { position: static; display: inline; width: auto; height: auto; margin: 0 6px 0 12px; padding: 0 5.5px; border-radius: 3px; background: var(--pg-muted); box-shadow: none; font-size: 9px; line-height: 1; vertical-align: baseline; }
.af-pg-cal .af-cal__legend .af-dot:first-child { margin-left: 0; }
.af-pg-cal .af-cal__legend .af-dot::after { content: "\2060\00a0\2060"; font-size: 6px; }
.af-pg-cal .af-cal__legend .af-dot.af-adh--yes { background: var(--pg-green); }
.af-pg-cal .af-cal__legend .af-dot.af-adh--partly { background: var(--pg-blue); }
.af-pg-cal .af-cal__legend .af-dot.af-adh--no { background: var(--pg-red); }
.af-pg-cal .af-cal__legend .af-cal__c { position: static; margin: 0 2px 0 0; font-size: 15px; line-height: 1; color: var(--pg-pink); }
.af-pg-cal .af-cal__legend .af-cal__c::before { content: "\A"; white-space: pre; } /* Maria's comment starts its own line: its mark never stays behind, alone at the end of one. */

/* Motion: only when the head marked the document (JavaScript on, motion not reduced); otherwise the page is final. */
html.af-pg-anim .af-pg-cu { transition: opacity .4s ease-out; }
html.af-pg-anim .af-pg [data-pg-anim]:not(.is-in) .af-pg-cu { opacity: 0; transition: none; }
html.af-pg-anim .af-pg-trk__fill { transition: width .8s cubic-bezier(.2, .7, .2, 1); }
html.af-pg-anim .af-pg-trk__knob { transition: left .8s cubic-bezier(.2, .7, .2, 1); }
html.af-pg-anim .af-pg-trk__now { transition: opacity .4s ease-out .45s; }
html.af-pg-anim .af-pg-trk:not(.is-in) .af-pg-trk__fill { width: 0; transition: none; }
html.af-pg-anim .af-pg-trk:not(.is-in) .af-pg-trk__knob { left: 9px; transition: none; }
html.af-pg-anim .af-pg-trk:not(.is-in) .af-pg-trk__now { opacity: 0; transition: none; }
html.af-pg-anim .af-pg-days:not(.is-in) .af-pg-day__c { opacity: 0; transform: scale(.6); }
html.af-pg-anim .af-pg-days.is-in .af-pg-day__c { animation: af-pg-pop .45s cubic-bezier(.2, .8, .3, 1.15) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes af-pg-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
html.af-pg-anim .af-pg-ring__f { transition: stroke-dasharray .8s cubic-bezier(.2, .7, .2, 1), opacity .4s ease-out; }
html.af-pg-anim .af-pg-tiles:not(.is-in) .af-pg-ring__f { stroke-dasharray: 0 107; opacity: 0; transition: none; }
html.af-pg-anim .af-pgc__dot { transition: opacity .4s ease-out; }
html.af-pg-anim .af-pgc__avg { clip-path: inset(-16px -16px -16px -16px); transition: clip-path .9s cubic-bezier(.3, .6, .3, 1); }
html.af-pg-anim .af-pgc:not(.is-in) .af-pgc__dot { opacity: 0; transition: none; }
html.af-pg-anim .af-pgc:not(.is-in) .af-pgc__avg { clip-path: inset(-16px 100% -16px -16px); transition: none; }
html.af-pg-anim .af-pg-sp__line { transition: stroke-dashoffset .8s ease-out; }
html.af-pg-anim .af-pg-sp__end { transition: opacity .4s ease-out .5s; }
html.af-pg-anim .af-pg-msc:not(.is-in) .af-pg-sp__line { stroke-dashoffset: 1; opacity: 0; transition: none; }
html.af-pg-anim .af-pg-msc:not(.is-in) .af-pg-sp__end { opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) {
	.af-pg *, .af-pg *::before, .af-pg *::after { animation: none !important; transition: none !important; }
}

/* A laptop: the page keeps the width of a column; the track and the chart do not stretch over the whole screen. */
@media (min-width: 700px) {
	.af-tab--progress.af-beta .af-pg { max-width: 720px; margin-left: auto; margin-right: auto; }
	.af-pg-c, .af-pg .af-pg-q, .af-pg .af-pg-go { padding-left: 22px; padding-right: 22px; }
	.af-pg .af-pg-more { margin-left: -22px; margin-right: -22px; padding-left: 22px; padding-right: 22px; }
	.af-pgc__plot { height: 220px; }
	.af-pg-ph2 { gap: 14px; max-width: 480px; }
	.af-pg-ph2--1 { max-width: 233px; }
	.af-pg .af-pg-tile { padding: 14px 14px 12px; }
	.af-pg-cal .af-cal { max-width: 460px; margin-left: auto; margin-right: auto; }
}

/* Home: the two tiles, "Progress" and "Photos" */
.af-sc__tile--progress { background: linear-gradient(160deg, #3A3217, #211F18); }
.af-sc__tile--progress .af-sc__ic { background: rgba(210, 176, 76, .22); }
.af-sc__tile--photos { background: linear-gradient(160deg, #183441, #1A2025); }
.af-sc__tile--photos .af-sc__ic { background: rgba(127, 178, 230, .2); }

/* ==========================================================================
   6.118 — Home: the meal of now as a card under the arc; the meal that follows; a bigger sun / moon, above the arc
   ========================================================================== */
/* Room above the arc for the sun's own path and for the sunrise / sunset times. */
.af-bh:not(.af-bj) .af-bh__arcbox { margin-top: 56px; }
.af-bh:not(.af-bj) .af-bh__arcbox .af-bh__in { top: 44%; }
.af-bh:not(.af-bj) .af-bh__live > .af-bh__arcbox .af-bh__now + .af-bh__name:not(.af-bh__night), .af-bh:not(.af-bj) .af-bh__live > .af-bh__arcbox .af-bh__freeday + .af-bh__name { font-size: 42px; }
.af-bh:not(.af-bj) .af-bh__arcbox .af-bh__now { font-size: 13.5px; }
.af-bh:not(.af-bj) .af-bh__arcbox .af-bh__kc { font-size: 14px; color: #C9C4BD; }
.af-sky--hi > .af-sky__sun { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.af-sky--hi > .af-sky__sun::before { inset: -34px; }
.af-sky--hi > .af-sky__moon { width: 40px; height: 40px; margin: -20px 0 0 -20px; }

/* "I ate it all": one wide gold button between the arc and the card. */
.af-hm { margin-top: 6px; }
.af-account .af-hm .af-hm__all { display: block; width: 100%; height: 52px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #F0DA92, #D2B04C); color: #1A1814; font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; box-shadow: 0 6px 22px rgba(210, 176, 76, .22); }
.af-account .af-hm .af-hm__all[hidden] { display: none; }
.af-account .af-hm .af-hm__all:disabled { opacity: .6; }
.af-account .af-hm .af-hm__card { display: block; margin-top: 14px; padding: 14px 16px 6px; border-radius: 22px; background: #1D1C20; border: 1px solid rgba(243, 239, 232, .08); }
.af-account .af-hm .af-hm__meal { display: block; padding: 0; border-radius: 0; background: none; }
.af-hm__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.af-hm__t { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #A8A2AE; }
.af-hm__count { flex: none; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(210, 176, 76, .45); background: rgba(210, 176, 76, .12); color: #EBD58A; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.af-hm__count.is-all { border-color: rgba(111, 191, 115, .5); background: rgba(111, 191, 115, .16); color: #8FD493; }
.af-hm__note { margin: 12px 0 2px; padding: 10px 12px; border-radius: 14px; background: rgba(210, 176, 76, .09); border: 1px solid rgba(210, 176, 76, .3); }
.af-hm__note p { margin: 0; font-size: 14.5px; line-height: 1.45; color: #F3EFE8; }
.af-hm__note .af-hm__noteh { margin-bottom: 3px; font-size: 12.5px; font-weight: 700; color: #EBD58A; }
.af-hm__items { list-style: none; margin: 6px 0 0; padding: 0; }
.af-hm__items > li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; border-bottom: 1px solid rgba(243, 239, 232, .07); }
.af-hm__items > li:last-child { border-bottom: 0; }
.af-hm .af-pj__item { min-height: 50px; }
.af-hm .af-pj__box { width: 26px; height: 26px; border-radius: 8px; }
.af-hm .af-pj__txt { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1px 12px; }
.af-hm .af-pj__name { font-size: 16px; font-weight: 600; color: #F3EFE8; }
.af-hm .af-pj__txt small { margin-left: auto; font-size: 13.5px; color: #A8A2AE; text-align: right; }
.af-hm .af-pj__item input:checked ~ .af-pj__txt .af-pj__name { color: #8F8996; text-decoration: line-through; text-decoration-color: rgba(143, 137, 150, .6); }
.af-hm .af-pj__alts { padding-left: 38px; }
.af-hm__foot { display: flex; gap: 8px; margin: 4px -4px 6px; padding-top: 8px; border-top: 1px solid rgba(243, 239, 232, .07); }
.af-account .af-hm .af-hm__foot button { flex: 1; min-width: 0; min-height: 42px; padding: 0 6px; white-space: nowrap; border: 1px solid rgba(243, 239, 232, .14); border-radius: 999px; background: transparent; color: #C9C4BD; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.af-account .af-hm .af-hm__foot button:disabled { opacity: .5; }
.af-hm__state { margin: 12px 0 10px; }
.af-hm__state p { margin: 0; font-size: 16px; font-weight: 700; color: #F3EFE8; }
.af-hm__state p small { font-weight: 600; color: #A8A2AE; }
.af-hm__state .af-hm__what { margin-top: 4px; font-size: 14.5px; font-weight: 400; line-height: 1.45; color: #C9C4BD; }
.af-hm__acts { display: flex; gap: 8px; margin-top: 12px; }
.af-account .af-hm .af-hm__state button { min-height: 42px; padding: 0 16px; border: 1px solid rgba(243, 239, 232, .16); border-radius: 999px; background: transparent; color: #F3EFE8; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.af-account .af-hm .af-hm__state > button { margin-top: 12px; }
.af-account .af-hm .af-hm__acts button { flex: 1; }

/* The meal that follows: read only, quieter than the card of now. */
.af-hn { margin-top: 12px; padding: 12px 16px; border-radius: 20px; background: rgba(243, 239, 232, .04); border: 1px solid rgba(243, 239, 232, .07); }
.af-hn__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.af-hn__t { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #A8A2AE; }
.af-hn__name { margin: 0; font-family: var(--wp--preset--font-family--caslon, Georgia, serif); font-size: 17px; color: #EBD58A; }
.af-hn__items { list-style: none; margin: 8px 0 0; padding: 0; }
.af-hn__items li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; font-size: 14.5px; color: #C9C4BD; }
.af-hn__items small { flex: none; font-size: 13px; color: #8F8996; text-align: right; }

/* The food sheet: three ways to add. */
.af-bh__fadd { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #A8A2AE; }
.af-bh__fmode--3 { grid-template-columns: repeat(3, 1fr); }
.af-bh__fmode--3 button { padding-left: 4px; padding-right: 4px; font-size: 13.5px; white-space: nowrap; }

/* On a wide screen the meal's card and the one that follows keep the arc's width, under it. */
@media (min-width: 640px) { .af-beta .af-bh .af-hm, .af-beta .af-bh .af-hn { max-width: 600px; margin-left: auto; margin-right: auto; } }

/* ==========================================================================
   6.119 — Home: "Weigh yourself before breakfast", a small pill under the arc
   ========================================================================== */
.af-wp { display: flex; align-items: center; justify-content: center; gap: 2px; width: fit-content; max-width: 100%; min-height: 38px; margin: 0 auto 12px; padding: 0 4px 0 8px; border-radius: 999px; background: rgba(40, 33, 20, .82); border: 1px solid rgba(210, 176, 76, .5); box-shadow: 0 4px 18px rgba(0, 0, 0, .22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.af-wp-off .af-wp { display: none; }
.af-wp-off .af-wp-late { display: none; }
.af-wp-late { margin: 0 auto 12px; max-width: 100%; text-align: center; }
.af-wp-late__t { margin: 0 auto 8px; max-width: 34ch; font-size: 13.5px; line-height: 1.4; color: rgba(243, 239, 232, .82); }
.af-wp--note { gap: 10px; padding: 8px 6px 8px 14px; border-radius: 18px; max-width: 420px; }
.af-wp--note p { margin: 0; font-size: 13.5px; line-height: 1.4; color: rgba(243, 239, 232, .88); text-align: left; }
.af-account .af-wp button { border: 0; background: none; color: #F3EFE8; font: inherit; cursor: pointer; }
.af-account .af-wp .af-wp__go { min-height: 38px; padding: 0 6px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.af-account .af-wp .af-wp__go[hidden] { display: none; }
.af-account .af-wp .af-wp__x { flex: none; width: 30px; height: 30px; border-radius: 50%; font-size: 18px; line-height: 1; color: rgba(243, 239, 232, .7); }
.af-wp__edit { display: flex; align-items: center; gap: 6px; padding: 5px 0; }
.af-wp__edit[hidden] { display: none; }
.af-account .af-wp .af-wp__s { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(243, 239, 232, .22); font-size: 19px; line-height: 1; }
.af-wp__f { display: flex; align-items: baseline; gap: 4px; padding: 0 10px; height: 36px; border-radius: 12px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(243, 239, 232, .14); }
.af-wp__f span { font-size: 13px; color: #A8A2AE; }
.af-account .af-wp .af-wp__in { width: 58px; height: 34px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #F3EFE8; font: inherit; font-size: 17px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.af-account .af-wp .af-wp__in:focus { outline: none; }
.af-wp__f:focus-within { border-color: #D2B04C; }
.af-account .af-wp .af-wp__in.is-bad { color: #E6AEB8; }
.af-account .af-wp .af-wp__ok { flex: none; height: 36px; padding: 0 14px; border-radius: 999px; background: linear-gradient(135deg, #F0DA92, #D2B04C); color: #1A1814; font-size: 14px; font-weight: 800; }
.af-wp.is-busy { opacity: .6; pointer-events: none; }
.af-wp.is-ok { border-color: rgba(111, 191, 115, .5); background: rgba(24, 40, 26, .85); }
.af-wp__done { padding: 0 12px; font-size: 14px; font-weight: 700; color: #8FD493; white-space: nowrap; }
.af-wp + .af-hm { margin-top: 0; }
.af-wp__edit:focus { outline: none; }

/* ==========================================================================
   6.120 — Home: a compact meal card; its first row holds the three answers
   ========================================================================== */
.af-account .af-hm .af-hm__card { margin-top: 0; padding: 10px 12px 4px; border-radius: 20px; }
.af-hm__btns { display: flex; gap: 6px; margin-bottom: 10px; }
.af-account .af-hm .af-hm__btns button, .af-hm__alldone { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 8px; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.af-account .af-hm .af-hm__btns .af-hm__all { display: block; width: auto; flex: 1.25 1 auto; border: 0; background: linear-gradient(135deg, #F0DA92, #D2B04C); color: #1A1814; font-weight: 800; box-shadow: 0 4px 16px rgba(210, 176, 76, .2); }
.af-account .af-hm .af-hm__btns .af-hm__all[hidden] { display: none; }
.af-account .af-hm .af-hm__btns .af-bh__other, .af-account .af-hm .af-hm__btns .af-bh__skip { border: 1px solid rgba(243, 239, 232, .16); background: rgba(243, 239, 232, .05); color: #E8E3DA; font-weight: 600; }
.af-account .af-hm .af-hm__btns button:disabled { opacity: .55; }
.af-hm__alldone { display: inline-grid; place-items: center; flex: 1.25 1 auto; border: 1px solid rgba(111, 191, 115, .45); background: rgba(111, 191, 115, .16); color: #8FD493; cursor: default; }
.af-hm__t { font-size: 11.5px; }
.af-hm__count { padding: 2px 9px; font-size: 12px; }
.af-hm__note { margin: 8px 0 0; padding: 6px 10px; border-radius: 12px; }
.af-hm__note p, .af-hm__note .af-hm__noteh { display: inline; font-size: 13.5px; line-height: 1.4; }
.af-hm__note .af-hm__noteh { margin: 0 4px 0 0; font-size: 13px; }
.af-hm__items { margin-top: 2px; }
.af-hm__items > li { gap: 0 8px; }
.af-hm .af-pj__item { min-height: 40px; padding: 0; gap: 10px; }
.af-hm .af-pj__box { width: 22px; height: 22px; border-radius: 6px; }
.af-hm .af-pj__item input:checked + .af-pj__box::after { font-size: 13px; }
.af-hm .af-pj__name { font-size: 15px; }
.af-hm .af-pj__txt small { font-size: 13px; }
.af-hm .af-pj__alts { padding: 0 0 6px 32px; }
.af-hm .af-pj__recipe { padding: 4px 9px; font-size: 12.5px; }
.af-hm__state { margin: 2px 0 8px; }
.af-hm__head + .af-hm__state { margin-top: 10px; }
.af-hn { margin-top: 10px; padding: 10px 14px; }
.af-hn__items { margin-top: 4px; }
.af-hn__items li { padding: 3px 0; font-size: 14px; }
.af-wp + .af-hm, .af-hm { margin-top: 4px; }
/* Narrower phones: the three answers keep to one row with smaller letters; on the narrowest, the gold one takes a row of its own. */
@media (max-width: 389px) {
	.af-account .af-hm .af-hm__card { padding-left: 10px; padding-right: 10px; }
	.af-hm__btns { gap: 5px; }
	.af-account .af-hm .af-hm__btns button, .af-hm__alldone { padding: 0 5px; font-size: 12.5px; }
}
@media (max-width: 359px) {
	.af-hm__btns { flex-wrap: wrap; }
	.af-account .af-hm .af-hm__btns .af-hm__all, .af-hm__alldone { flex: 1 0 100%; }
	.af-account .af-hm .af-hm__btns button, .af-hm__alldone { font-size: 13.5px; }
}

/* ==========================================================================
   6.121 — Home: a smaller sun that looks like a sun (yellow, with rays)
   ========================================================================== */
.af-sky--hi > .af-sky__sun { width: 30px; height: 30px; margin: -15px 0 0 -15px; box-shadow: 0 0 10px 1px var(--sc, rgba(255, 204, 64, .5)); }
.af-sky--hi > .af-sky__sun::before { inset: -24px; }
.af-sky--hi > .af-sky__sun::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; background: repeating-conic-gradient(from -4deg, var(--sr, rgba(255, 204, 64, .95)) 0 8deg, transparent 8deg 30deg); -webkit-mask: radial-gradient(circle, transparent 18.5px, #000 19.5px, #000 24px, transparent 25px); mask: radial-gradient(circle, transparent 18.5px, #000 19.5px, #000 24px, transparent 25px); animation: af-sun-turn 80s linear infinite; }
.af-sky--hi > .af-sky__sun.is-veiled { box-shadow: none; }
.af-sky--hi > .af-sky__sun.is-veiled::after { display: none; } /* Behind thick clouds: a bright smudge, no rays. */
@keyframes af-sun-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .af-sky--hi > .af-sky__sun::after { animation: none; } }

/* ==========================================================================
   6.122 — Home on two screens: "Now" and "My day" (swiped sideways on a phone), the four tiles, the icons
   ========================================================================== */
.af-h2w { position: relative; }
.af-h2__tabs { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 12px; margin: 4px 0 0; color: rgba(243, 239, 232, .45); }
.af-account .af-h2__tabs button { position: relative; min-height: 36px; padding: 0 4px; border: 0; background: none; color: rgba(243, 239, 232, .62); font: inherit; font-size: 15.5px; font-weight: 700; cursor: pointer; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.af-account .af-h2__tabs button[aria-selected="true"] { color: #F3EFE8; }
.af-h2__tabs button::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 22px; height: 2.5px; margin-left: -11px; border-radius: 2px; background: #EBD58A; opacity: 0; transition: opacity .2s; }
.af-h2__tabs button[aria-selected="true"]::after { opacity: 1; }
.af-h2 { display: flex; align-items: flex-start; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: calc(-1 * var(--af-h2-l, 24px)); margin-right: calc(-1 * var(--af-h2-r, 24px)); }
.af-h2::-webkit-scrollbar { display: none; }
.af-h2__p { flex: 0 0 100%; min-width: 0; box-sizing: border-box; padding: 0 var(--af-h2-r, 24px) 0 var(--af-h2-l, 24px); scroll-snap-align: start; scroll-snap-stop: always; }
.af-h2__p--day { padding-top: 14px; padding-bottom: 8px; }
/* The little tab on the right edge of the first screen: there is one more screen that way. */
.af-account .af-h2__peek { position: absolute; z-index: 3; top: 196px; right: -24px; width: 18px; height: 64px; padding: 0; border: 0; border-radius: 12px 0 0 12px; background: rgba(20, 19, 21, .55); color: rgba(243, 239, 232, .7); font-size: 17px; line-height: 1; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.af-bh.is-h2-day .af-h2__peek { display: none; }
/* On the second screen the sun, the moon and the two times step aside: the sky stays behind the tiles. */

@media (prefers-reduced-motion: reduce) { .af-h2 { scroll-behavior: auto; } }
/* 6.123: where scrollbars take room (a computer), the page keeps that room even when the second screen is short. */
html.af-h2-on { scrollbar-width: none; }
html.af-h2-on::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* The day on one line. */
.af-dz__strip { display: flex; align-items: center; gap: 8px; padding: 10px 10px; border-radius: 18px; background: rgba(29, 28, 32, .88); border: 1px solid rgba(243, 239, 232, .08); }
.af-dz__need { margin: 0 0 10px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(180deg, rgba(44, 37, 20, .92), rgba(29, 28, 32, .92)); border: 1px solid rgba(210, 176, 76, .38); }
.af-dz__need p { margin: 0; }
.af-dz__need-l { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #EBD58A; }
.af-dz__need-n { margin-top: 2px !important; font-size: 15px; color: rgba(243, 239, 232, .7); }
.af-dz__need-n b { font-size: 30px; font-weight: 800; color: #F3EFE8; letter-spacing: -.01em; }
.af-dz__need-p { margin-top: 4px !important; font-size: 13px; line-height: 1.45; color: rgba(243, 239, 232, .62); }
.af-dz__need-a { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 600; color: #EBD58A; text-decoration: none; }
.af-dz__dots { flex: 1; min-width: 0; display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0; position: relative; }
.af-dz__dots::before { content: ""; position: absolute; left: 14px; right: 14px; top: 11px; height: 2px; background: rgba(243, 239, 232, .14); }
.af-dz__dots li { position: relative; flex: 1 1 0; min-width: 0; display: grid; justify-items: center; gap: 3px; }
.af-dz__dots i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #16151A; border: 2px solid rgba(243, 239, 232, .35); font-style: normal; font-size: 12px; font-weight: 800; color: #16151A; box-sizing: border-box; }
.af-dz__dots li.is-all i { background: #6FBF73; border-color: #6FBF73; }
.af-dz__dots li.is-part i { background: #5B9BD5; border-color: #5B9BD5; }
.af-dz__dots li.is-other i { background: #D46A6A; border-color: #D46A6A; }
.af-dz__dots li.is-skip i { background: #8F8996; border-color: #8F8996; }
.af-dz__dots li.is-cur.is-none i { border-color: #EBD58A; box-shadow: 0 0 0 3px rgba(235, 213, 138, .18); }
.af-dz__dots span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; letter-spacing: -.01em; color: #A8A2AE; }
.af-dz__dots li.is-cur span { color: #F3EFE8; font-weight: 600; }
.af-dz__sum { flex: none; margin: 0; text-align: right; font-size: 11.5px; line-height: 1.15; color: #A8A2AE; }
.af-dz__sum b { display: block; font-family: var(--wp--preset--font-family--caslon, Georgia, serif); font-size: 19px; font-weight: 400; color: #F3EFE8; white-space: nowrap; }

/* The four tiles. */
.af-dz__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.af-dz__t { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 11px 12px 12px; border-radius: 18px; background: rgba(29, 28, 32, .9); border: 1px solid rgba(243, 239, 232, .08); }
.af-dz__h { margin: 0; font-size: 12.5px; font-weight: 600; color: #A8A2AE; }
.af-dz__v { margin: 3px 0 0; font-size: 13px; color: #A8A2AE; }
.af-dz__v b { font-family: var(--wp--preset--font-family--caslon, Georgia, serif); font-size: 26px; font-weight: 400; line-height: 1.1; color: #F3EFE8; }
.af-dz__s { margin: 1px 0 0; font-size: 12px; line-height: 1.3; color: #8F8996; }
.af-dz__ring { position: absolute; top: 10px; right: 10px; }
.af-dz__ring.is-water { color: #7FB2E6; }
.af-dz__ring.is-kcal { color: #D2B04C; }
.af-dz__step { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: auto; padding-top: 10px; }
.af-account .af-dz__step button, .af-account .af-dzw__s { flex: none; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(243, 239, 232, .2); border-radius: 50%; background: rgba(243, 239, 232, .05); color: #F3EFE8; font: inherit; font-size: 19px; line-height: 1; cursor: pointer; }
.af-account .af-dz__step .af-dz__wide { width: auto; padding: 0 12px; border-radius: 999px; border-color: rgba(210, 176, 76, .55); color: #EBD58A; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.af-dz__p { margin-right: auto; min-width: 0; font-size: 11.5px; line-height: 1.25; color: #8F8996; }
.af-dzs.is-ok .af-hd__sv { color: #F3EFE8; }
.af-dzs:not(.is-ok) .af-hd__sv { color: #8F8996; }
/* The weight: not noted today, it says so (a dashed gold edge), with the field ready; noted, the figure and "Change". */
.af-dzw.is-miss { border: 1.5px dashed rgba(210, 176, 76, .65); background: rgba(44, 37, 22, .92); }
.af-dzw__miss { margin: 3px 0 0; font-size: 15px; font-weight: 700; color: #EBD58A; }
.af-dzw__ed { margin-top: auto; padding-top: 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.af-dzw.is-ok:not(.is-edit) .af-dzw__ed, .af-dzw.is-edit .af-dzw__show { display: none; }
.af-dzw__row { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.af-dzw__f { flex: 1; min-width: 0; display: flex; align-items: baseline; justify-content: center; gap: 3px; height: 34px; padding: 0 4px; border-radius: 11px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(243, 239, 232, .14); }
.af-dzw__f span { font-size: 12px; color: #A8A2AE; }
.af-dzw__f:focus-within { border-color: #D2B04C; }
.af-account .af-dzw .af-dzw__in { width: 48px; min-width: 0; height: 32px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #F3EFE8; font: inherit; font-size: 16px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.af-account .af-dzw .af-dzw__in:focus { outline: none; }
.af-account .af-dzw .af-dzw__in.is-bad { color: #E6AEB8; }
.af-account .af-dzw .af-dzw__ok { height: 34px; padding: 0 10px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #F0DA92, #D2B04C); color: #1A1814; font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; }
.af-account .af-dzw .af-dzw__chg { align-self: flex-start; margin-top: auto; min-height: 34px; padding: 0 12px; border: 1px solid rgba(243, 239, 232, .2); border-radius: 999px; background: none; color: #E8E3DA; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.af-dzw.is-busy { opacity: .6; pointer-events: none; }
.af-dz__more { margin: 12px 4px 0; }
.af-feel { display: grid; gap: 10px; margin: 14px 0 0; }
.af-feel__card { padding: 12px 12px 10px; border-radius: 18px; background: rgba(29, 28, 32, .88); border: 1px solid rgba(243, 239, 232, .08); }
.af-feel__t { margin: 0 4px 8px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--af-muted, #A8A29B); }
.af-feel__opts { display: flex; gap: 6px; }
.af-feel__o { flex: 1; min-width: 0; display: grid; justify-items: center; gap: 3px; padding: 8px 2px 7px; border-radius: 14px; border: 1px solid transparent; background: rgba(243, 239, 232, .04); color: inherit; font: inherit; cursor: pointer; transition: background .25s, border-color .25s, transform .2s; }
.af-feel__o span { font-size: 22px; line-height: 1; filter: grayscale(.55); opacity: .7; transition: filter .25s, opacity .25s, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.af-feel__o small { font-size: 10.5px; line-height: 1.2; color: var(--af-muted, #A8A29B); text-align: center; }
.af-feel__o.is-on { background: rgba(210, 176, 76, .16); border-color: rgba(210, 176, 76, .55); }
.af-feel__o.is-on span { filter: none; opacity: 1; transform: scale(1.18); }
.af-feel__o.is-on small { color: #EBD58A; font-weight: 600; }
.af-feel__o.is-pop span { animation: af-feel-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes af-feel-pop { 0% { transform: scale(.8); } 55% { transform: scale(1.4) rotate(-6deg); } 100% { transform: scale(1.18); } }
.af-feel__tip { margin: 2px 6px 0; font-size: 13px; line-height: 1.45; color: rgba(243, 239, 232, .78); animation: af-feel-in .5s ease both; }
@keyframes af-feel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .af-feel__o.is-pop span, .af-feel__tip { animation: none; } }

/* The icons: four on a row, a short name under each. */
.af-ig__label { margin: 20px 6px 12px; }
.af-ig { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 6px; }
.af-account .af-ig .af-ig__i { display: grid; justify-items: center; gap: 6px; min-width: 0; padding: 0; border: 0; background: none; color: #F3EFE8; font: inherit; text-decoration: none; cursor: pointer; }
.af-ig__ic { position: relative; width: 58px; height: 58px; border-radius: 17px; display: grid; place-items: center; font-size: 28px; line-height: 1; border: 1px solid rgba(243, 239, 232, .08); background: #232226; }
.af-ig__i:active .af-ig__ic { transform: scale(.95); }
.af-ig__l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; }
.af-ig__chip { position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); padding: 1px 6px; border-radius: 999px; background: #2A2413; border: 1px solid rgba(210, 176, 76, .6); color: #EBD58A; font-size: 10px; font-weight: 800; white-space: nowrap; font-family: inherit; }
.af-ig .af-sc__tile--scan .af-ig__ic { background: linear-gradient(160deg, #17362B, #1A2220); }
.af-ig .af-sc__tile--plate .af-ig__ic { background: linear-gradient(160deg, #3D2616, #221C19); }
.af-ig .af-sc__tile--recipes .af-ig__ic, .af-ig .af-sc__tile--progress .af-ig__ic, .af-ig .af-sc__tile--review .af-ig__ic { background: linear-gradient(160deg, #3A3217, #211F18); }
.af-ig .af-sc__tile--photos .af-ig__ic { background: linear-gradient(160deg, #183441, #1A2025); }
.af-ig .af-sc__tile--cycle .af-ig__ic { background: linear-gradient(160deg, #3B2029, #211B1E); }
.af-ig .af-sc__tile--badges .af-ig__ic { background: linear-gradient(160deg, #22264A, #1B1C26); }
.af-ig .af-sc__tile--invite .af-ig__ic { background: linear-gradient(160deg, #33214A, #1E1B25); }
.af-ig .af-sc__tile--story .af-ig__ic { background: linear-gradient(160deg, #40213A, #221A21); }

/* A wide screen: no swiping; the two screens stand one under the other, at the arc's width. */
@media (min-width: 900px) {
	.af-h2__tabs, .af-account .af-h2__peek { display: none; }
	.af-h2 { display: block; overflow: visible; margin-left: 0; margin-right: 0; height: auto !important; }
	.af-h2__p { padding: 0; }
	html.af-h2-on { scrollbar-width: auto; }
	html.af-h2-on::-webkit-scrollbar { display: block; width: auto; height: auto; }
	.af-h2__p--day { max-width: 600px; margin: 22px auto 0; }
}
.af-account .af-dzw .af-dzw__no { height: 30px; padding: 0; border: 0; background: none; color: #A8A2AE; font: inherit; font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.af-hm__note { font-size: 13.5px; line-height: 1.4; }

/* ==========================================================================
   6.123 — Home: the day's calories bar is back on the first screen, right under the arc
   ========================================================================== */
.af-bh__live > .af-bh__tot { margin: 0 4px 12px; }
@media (min-width: 640px) { .af-beta .af-bh .af-bh__live > .af-bh__tot { max-width: 592px; margin-left: auto; margin-right: auto; } }

/* ==========================================================================
   6.123 — "My day": four small cards on one row (weight, sleep, water, calories); a tap opens the card's field under the row
   ========================================================================== */
.af-dq { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 10px -12px 0; }
.af-account .af-dq .af-dq__c { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; min-height: 86px; padding: 9px 8px 9px 10px; border: 1px solid rgba(243, 239, 232, .09); border-radius: 16px; background: rgba(29, 28, 32, .93); color: #F3EFE8; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.af-account .af-dq .af-dq__c.is-open { border-color: rgba(210, 176, 76, .65); background: rgba(40, 35, 24, .95); }
.af-account .af-dq .af-dq__c:active { transform: scale(.98); }
.af-dq__h { font-size: 12px; font-weight: 600; color: #A8A2AE; white-space: nowrap; }
.af-dq__v { margin-top: auto; display: flex; align-items: baseline; gap: 3px; max-width: 100%; }
.af-dq__v b { font-family: var(--wp--preset--font-family--caslon, Georgia, serif); font-size: 23px; font-weight: 400; line-height: 1.05; letter-spacing: -.01em; }
.af-dq__v i { font-style: normal; font-family: var(--wp--preset--font-family--caslon, Georgia, serif); font-size: 13px; color: #A8A2AE; }
.af-dq__add { margin-top: auto; font-size: 12.5px; font-weight: 800; line-height: 1.5; color: #EBD58A; white-space: nowrap; }
.af-dq__s { margin-top: 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; letter-spacing: -.01em; color: #8F8996; }
.af-dq .af-dz__ring { top: 9px; right: 8px; width: 16px; height: 16px; }
/* The field a card opens. */
.af-dq__ed { display: flex; align-items: center; gap: 8px; margin: 8px -12px 0; padding: 8px 6px 8px 12px; border-radius: 16px; background: rgba(34, 31, 24, .96); border: 1px solid rgba(210, 176, 76, .5); }
.af-dq__ed[hidden] { display: none; }
.af-dq__el { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; color: #F3EFE8; }
.af-dq__el small { display: block; overflow: hidden; text-overflow: ellipsis; font-size: 11px; font-weight: 400; color: #8F8996; }
.af-dq__ctl { flex: none; display: flex; align-items: center; gap: 6px; }
.af-account .af-dq__ctl button { flex: none; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(243, 239, 232, .2); border-radius: 50%; background: rgba(243, 239, 232, .05); color: #F3EFE8; font: inherit; font-size: 19px; line-height: 1; cursor: pointer; }
.af-account .af-dq__ctl .af-dq__wide { width: auto; padding: 0 12px; border-radius: 999px; border-color: rgba(210, 176, 76, .55); color: #EBD58A; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.af-account .af-dq__ctl .af-dzw__ok { width: auto; height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #F0DA92, #D2B04C); color: #1A1814; font-size: 13.5px; font-weight: 800; }
.af-dq__ctl b { min-width: 58px; text-align: center; font-size: 15.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.af-dq__ctl .af-dzw__f { flex: none; width: 76px; }
.af-account .af-dq__ctl .af-dzw__in { width: 42px; }
.af-account .af-dq__ed .af-dq__x { flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; color: rgba(243, 239, 232, .65); font: inherit; font-size: 19px; line-height: 1; cursor: pointer; }
.af-dq__ed.is-busy { opacity: .6; pointer-events: none; }
@media (min-width: 900px) { .af-dq, .af-dq__ed { margin-left: 0; margin-right: 0; } }
@media (max-width: 349px) { .af-dq { gap: 5px; } .af-account .af-dq .af-dq__c { padding-left: 8px; padding-right: 6px; } .af-dq__s { font-size: 9.5px; } .af-dq__h { font-size: 11.5px; } .af-dq__v b { font-size: 21px; } .af-dq__el { display: none; } .af-dq__ed { justify-content: space-between; } }
@media (max-width: 349px) { .af-dq__s { white-space: normal; line-height: 1.15; overflow: visible; } }

/* ==========================================================================
   6.124 — Home: a smaller sun and a smaller moon
   ========================================================================== */
.af-sky--hi > .af-sky__sun { width: 22px; height: 22px; margin: -11px 0 0 -11px; box-shadow: 0 0 8px 1px var(--sc, rgba(255, 204, 64, .5)); }
.af-sky--hi > .af-sky__sun::before { inset: -18px; }
.af-sky--hi > .af-sky__sun::after { inset: -8px; -webkit-mask: radial-gradient(circle, transparent 13.5px, #000 14.5px, #000 18px, transparent 19px); mask: radial-gradient(circle, transparent 13.5px, #000 14.5px, #000 18px, transparent 19px); }
.af-sky--hi > .af-sky__moon { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
/* The day's summary inside the arc ("2 of 5 meals") keeps its own size: only the name of the meal of now is the large one. */
.af-bh:not(.af-bj) .af-bh__live > .af-bh__arcbox .af-bh__name.af-bh__name--day { font-size: 34px; }

/* ==========================================================================
   6.125 — Home: the weight field itself under the arc (not a pill to open); the meal card folds once the meal has its answer
   ========================================================================== */
.af-wp.af-wp--bar { width: auto; justify-content: flex-start; gap: 8px; min-height: 0; margin: 0 -12px 12px; padding: 8px 6px 8px 12px; border-radius: 16px; background: rgba(34, 31, 24, .96); border: 1px solid rgba(210, 176, 76, .5); box-shadow: none; }
.af-wp__el { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; color: #F3EFE8; }
.af-wp--bar .af-wp__edit { flex: none; padding: 0; gap: 6px; }
.af-account .af-wp--bar .af-wp__s { width: 34px; height: 34px; }
.af-wp--bar .af-wp__f { width: 76px; height: 34px; justify-content: center; padding: 0 4px; border-radius: 11px; }
.af-account .af-wp--bar .af-wp__in { width: 42px; height: 32px; font-size: 16px; }
.af-account .af-wp--bar .af-wp__ok { height: 34px; padding: 0 12px; font-size: 13.5px; }
.af-account .af-wp--bar .af-wp__x { width: 30px; height: 30px; font-size: 19px; }
.af-wp--bar.is-ok { justify-content: center; }
@media (max-width: 349px) { .af-wp--bar .af-wp__el { display: none; } .af-wp.af-wp--bar { justify-content: space-between; } }
@media (min-width: 640px) { .af-beta .af-bh .af-wp.af-wp--bar { max-width: 600px; margin-left: auto; margin-right: auto; } }

.af-account .af-hm .af-hm__fold { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 2px; border: 0; background: none; color: #F3EFE8; font: inherit; text-align: left; cursor: pointer; }
.af-hm__ft { flex: none; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #A8A2AE; }
.af-hm__fs { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 700; }
.af-hm__fs.is-all { color: #8FD493; }
.af-hm__fs.is-skip { color: #C9C4BD; }
.af-hm__fs.is-other { color: #E6AEB8; }
.af-hm__fc { flex: none; font-size: 20px; line-height: 1; color: #A8A2AE; transform: rotate(90deg); transition: transform .2s; }
.af-hm__card.is-unfolded .af-hm__fc { transform: rotate(-90deg); }
.af-account .af-hm .af-hm__card.is-done { padding-top: 4px; padding-bottom: 4px; }
.af-account .af-hm .af-hm__card.is-done.is-unfolded { padding-bottom: 6px; }
.af-hm__card.is-done:not(.is-unfolded) .af-hm__meal > *:not(.af-hm__fold) { display: none !important; }
.af-hm__card.is-done.is-unfolded .af-hm__fold { margin-bottom: 6px; border-bottom: 1px solid rgba(243, 239, 232, .07); border-radius: 0; }
.af-hm__card.is-done .af-hm__alldone { display: none; }

/* ==========================================================================
   6.126 — Home: two dots above the menu say which screen is in view (the names at the top and the ear on the right are gone);
   on the two-screen layout the page shows no scrollbar (it scrolls as on a phone)
   ========================================================================== */
.af-account .af-h2__tabs.af-h2__dots { position: fixed; z-index: 90; left: 50%; bottom: calc(104px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); margin: 0; gap: 0; padding: 0 4px; border-radius: 999px; background: rgba(20, 19, 21, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.af-account .af-h2__dots button { position: relative; width: 20px; min-height: 0; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; transition: width .2s ease; }
.af-account .af-h2__dots button[aria-selected="true"] { width: 30px; }
.af-account .af-h2__dots button::after { content: ""; position: absolute; left: 50%; top: 50%; bottom: auto; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 4px; background: rgba(243, 239, 232, .38); opacity: 1; transition: width .2s ease, margin .2s ease, background-color .2s ease; }
.af-account .af-h2__dots button[aria-selected="true"]::after { width: 18px; margin-left: -9px; background: #EBD58A; }
@media (min-width: 782px) { .af-account .af-h2__tabs.af-h2__dots { bottom: 18px; } }
@media (min-width: 900px) { .af-account .af-h2__tabs.af-h2__dots { display: none; } }

/* ==========================================================================
   6.127 — Home: the small movements (assets/home-fx.js). All of them inside "no preference for less motion".
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	/* Home comes in: the arc draws itself, the meals appear along it, what is under it rises. */
	@keyframes af-fx-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
	@keyframes af-fx-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
	@keyframes af-fx-fade { from { opacity: 0; } to { opacity: 1; } }
	html.af-home-in .af-bh:not(.af-bj) .af-arc__go { stroke-dasharray: 1; animation: af-fx-draw .9s cubic-bezier(.3, .7, .2, 1) both; animation-delay: calc(var(--af-el, 0s) + .15s); }
	html.af-home-in .af-bh:not(.af-bj) .af-arc__m { animation: af-fx-fade .45s ease both; animation-delay: calc(var(--af-el, 0s) + .25s); }
	html.af-home-in .af-bh:not(.af-bj) .af-arc__m:nth-of-type(2) { animation-delay: calc(var(--af-el, 0s) + .33s); }
	html.af-home-in .af-bh:not(.af-bj) .af-arc__m:nth-of-type(3) { animation-delay: calc(var(--af-el, 0s) + .41s); }
	html.af-home-in .af-bh:not(.af-bj) .af-arc__m:nth-of-type(4) { animation-delay: calc(var(--af-el, 0s) + .49s); }
	html.af-home-in .af-bh:not(.af-bj) .af-arc__m:nth-of-type(5) { animation-delay: calc(var(--af-el, 0s) + .57s); }
	html.af-home-in .af-bh:not(.af-bj) .af-bh__in { animation: af-fx-rise .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--af-el, 0s) + .2s); }
	html.af-home-in .af-bh__live > .af-bh__tot, html.af-home-in .af-bh__live > .af-wp, html.af-home-in .af-bh__live > .af-hm, html.af-home-in .af-bh__live > .af-hn { animation: af-fx-rise .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--af-el, 0s) + .35s); }
	html.af-home-in .af-bh__live > .af-hm { animation-delay: calc(var(--af-el, 0s) + .43s); }
	html.af-home-in .af-bh__live > .af-hn { animation-delay: calc(var(--af-el, 0s) + .51s); }

	/* The calories bar and the rings glide to their new value. */
	.af-bh__bar i { transition: width .6s cubic-bezier(.2, .8, .2, 1); }
	.af-ring__v { transition: stroke-dasharray .6s cubic-bezier(.2, .8, .2, 1); }

	/* A tick: the box pops, the counter nods. */
	@keyframes af-fx-tick { 0% { transform: scale(.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
	@keyframes af-fx-bump { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } }
	.af-hm .af-pj__item.is-just .af-pj__box { animation: af-fx-tick .32s cubic-bezier(.3, 1.4, .5, 1); }
	.af-hm__count.is-bump { animation: af-fx-bump .3s ease; }
	.af-hm .af-pj__name { transition: color .25s ease; }

	/* A meal got its answer: its point on the arc pops; everything eaten: the sun answers. */
	@keyframes af-fx-pop { 0% { transform: scale(1); } 35% { transform: scale(1.55); } 70% { transform: scale(.92); } 100% { transform: scale(1); } }
	@keyframes af-fx-cheer { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); } }
	.af-arc__m.is-pop circle { transform-box: fill-box; transform-origin: center; animation: af-fx-pop .6s cubic-bezier(.3, 1.3, .5, 1); }
	.af-sky > .af-sky__sun.is-cheer { animation: af-fx-cheer .9s cubic-bezier(.3, 1.3, .5, 1); }

	/* The sun breathes; so does the moon's light. */
	@keyframes af-fx-breathe { 0%, 100% { opacity: .78; transform: scale(1); } 50% { opacity: 1; transform: scale(1.14); } }
	.af-sky--hi > .af-sky__sun::before { animation: af-fx-breathe 5.5s ease-in-out infinite; }
	@keyframes af-fx-moon { 0%, 100% { filter: drop-shadow(0 0 8px rgba(230, 236, 255, .35)); } 50% { filter: drop-shadow(0 0 15px rgba(230, 236, 255, .6)); } }
	.af-sky--hi > .af-sky__moon { animation: af-fx-moon 7s ease-in-out infinite; }

	/* "My day" comes into view: the cards rise one after another, the rings fill. */
	@keyframes af-fx-ring { from { stroke-dasharray: 0 100; } }
	.af-fx-day .af-ring__v { animation: af-fx-ring .8s cubic-bezier(.2, .8, .2, 1) .2s both; }

	/* The weight is noted: the confirmation pops in. A field opens: it unrolls. Buttons give under the finger. */
	@keyframes af-fx-popin { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
	.af-wp__done { animation: af-fx-popin .3s cubic-bezier(.3, 1.3, .5, 1) both; }
	.af-dq__ed:not([hidden]) { animation: af-fx-rise .25s ease both; }
	.af-account .af-hm .af-hm__btns button, .af-account .af-dq__ctl button, .af-account .af-wp button, .af-account .af-hm .af-hm__fold { transition: transform .12s ease; }
	.af-account .af-hm .af-hm__btns button:active, .af-account .af-dq__ctl button:active, .af-account .af-wp .af-wp__s:active, .af-account .af-wp .af-wp__ok:active { transform: scale(.94); }
}

/* ==========================================================================
   6.128 — Home (clients): the sky becomes a scene, as tall as before (down to under the arc). Three lines of hills close it
   at the bottom instead of a fade; the sun and the moon come out from behind the hill on the left and go down behind the
   one on the right; a halo of light follows them. Maria's Home is unchanged. (assets/sky.js)
   ========================================================================== */
.af-sky__land, .af-sky__halo { display: none; }
.af-sky--hi > .af-sky__land { display: block; position: absolute; bottom: 0; height: 190px; pointer-events: none; }
/* 6.157: depth with the tilt (sky.js sets --af-tx / --af-ty, -1..1): the far sky a little, each line of hills more. */
.af-sky__in { translate: calc(var(--af-tx, 0) * -4px) calc(var(--af-ty, 0) * 3px); }
.af-land__l--1 { translate: calc(var(--af-tx, 0) * -5px) calc(var(--af-ty, 0) * 2px); }
.af-land__l--2 { translate: calc(var(--af-tx, 0) * -8px) calc(var(--af-ty, 0) * 3px); }
.af-land__l--3 { translate: calc(var(--af-tx, 0) * -12px) calc(var(--af-ty, 0) * 4px); scale: 1.05 1; }
.af-sky__land.is-real > .af-r { translate: calc(var(--af-tx, 0) * -9px) calc(var(--af-ty, 0) * 3px); }
@media (prefers-reduced-motion: reduce) { .af-sky__in, .af-land__l--1, .af-land__l--2, .af-land__l--3, .af-sky__land.is-real > .af-r { translate: none; scale: none; } }
.af-sky--hi > .af-sky__land::before { content: ""; position: absolute; left: -100vw; right: -100vw; bottom: 0; height: 73px; background: #141315; } /* The ground, to the edges of any screen. */
.af-land__l { position: absolute; inset: 0; }
.af-land__l svg { display: block; width: 100%; height: 100%; overflow: visible; }
.af-sky--hi .af-sky__halo { display: block; opacity: 0; transition: opacity 1.5s; background: radial-gradient(circle at var(--hx, 50%) var(--hy, 30%), var(--hc, rgba(255, 236, 170, .4)) 0, transparent var(--hr, 180px)); }
/* The sky stays whole down to the hills (it used to fade into the page from its middle). */
.af-sky--wide.af-sky--hi > .af-sky__in { -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .55) calc(var(--fadeTop, 0px) * .45), #000 var(--fadeTop, 0px), #000 88%, transparent 100%) !important; mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .55) calc(var(--fadeTop, 0px) * .45), #000 var(--fadeTop, 0px), #000 88%, transparent 100%) !important; }
/* The light of a day going well rises from behind the hills, in the valley. */
.af-sky--hi .af-sky__hope { background: radial-gradient(64% 24% at 50% calc(100% - 96px), rgba(255, 226, 150, .62), transparent 70%); }
.af-sky--hi .af-sky__glow { background: radial-gradient(60% 34% at var(--gx) calc(100% - 110px), rgba(255, 190, 120, .8), rgba(255, 140, 100, .28) 50%, transparent 75%); }
/* The shade behind the arc's words: lighter, now that the hills frame them. */
.af-sky--wide.af-sky--hi .af-sky__scrim { background: linear-gradient(to bottom, rgba(20, 19, 21, .45), rgba(20, 19, 21, 0) 26%), radial-gradient(38% 19% at 50% 66%, rgba(20, 19, 21, .3), rgba(20, 19, 21, 0)); }

/* ==========================================================================
   6.129 — Home (clients): the scene is hers. Drawn clouds; a lake that fills with the water she drinks; a light on the hills
   for each meal she ate; morning fog after a short night; trees, a house, far mountains by her level. (assets/sky.js, sky-art.js)
   ========================================================================== */
.af-land__l--w { opacity: 0; transition: opacity 1.2s; }
.af-sky__land.has-lake .af-land__l--w { opacity: 1; }
.af-lake__g { transform: translateY(var(--ly, 117px)); transition: transform 1.6s cubic-bezier(.3, .7, .2, 1); }
.af-lake__glint { transform: translateX(var(--gx2, 195px)); opacity: calc(var(--go, 0) * (1 - var(--h2k, 0))); transition: transform 1s linear, opacity .3s; }
.af-lake__boat { opacity: 0; transition: opacity 1.5s .8s; }
.af-sky__land.is-full .af-lake__boat { opacity: 1; }
.af-land__fog { position: absolute; left: -100vw; right: -100vw; top: 34px; height: 92px; pointer-events: none; opacity: var(--fog, 0); transition: opacity 2.5s;
	background: linear-gradient(to bottom, rgba(var(--fogc, 220, 228, 240), 0), rgba(var(--fogc, 220, 228, 240), .85) 42%, rgba(var(--fogc, 220, 228, 240), .6) 70%, rgba(var(--fogc, 220, 228, 240), 0)); }
@media (prefers-reduced-motion: no-preference) {
	@keyframes af-light-live { 0%, 100% { opacity: .85; } 45% { opacity: 1; } 70% { opacity: .7; } }
	@keyframes af-light-new { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 1; } }
	@keyframes af-lake-rip { 0%, 100% { opacity: .2; transform: translateX(0); } 50% { opacity: .38; transform: translateX(3px); } }
	@keyframes af-lake-glint { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
	@keyframes af-boat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(.6px); } }
	.af-light.is-new { animation: af-light-new 1.4s ease-out both; }
	.af-lake__rip { animation: af-lake-rip 6s steps(10) infinite; }
	.af-lake__glint path { animation: af-lake-glint 2.4s steps(6) infinite; }
	.af-sky__land.is-full .af-lake__boat { animation: af-boat 4s steps(8) infinite; }
}
/* The level's bar stays readable when a white cloud drifts behind it. */
.has-wide-sky .af-rank { text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.af-sky--hi .af-sky__time { text-shadow: 0 1px 3px rgba(0, 0, 0, .7), 0 0 8px rgba(0, 0, 0, .4); }

/* ==========================================================================
   6.130 — the lights of the sky: the real face of the moon (the phase is laid over it), the Milky Way and sparkles at night,
   rays around the sun, beams through the clouds, a streak of light at sunrise and sunset. (assets/sky.js, assets/img/sky/)
   ========================================================================== */
.af-sky__mw { opacity: var(--mw, 0); transition: opacity 2.5s; background-repeat: no-repeat; background-position: 42% 16%; background-size: auto 66%; mix-blend-mode: screen; }
.af-sky__rays, .af-sky__beams, .af-sky__streak { display: none; }
.af-sky--hi.has-lights > .af-sky__rays, .af-sky--hi.has-lights > .af-sky__beams, .af-sky--hi.has-lights > .af-sky__streak { display: block; position: absolute; left: var(--sx, 50%); top: var(--sy, 30%); pointer-events: none; background: var(--src, #FFE9A8); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; transition: opacity 1.5s, left .8s ease, top .8s ease; }
.af-sky--hi.has-lights > .af-sky__rays { width: 104px; height: 104px; margin: -52px 0 0 -52px; opacity: var(--so, 0); -webkit-mask-image: var(--m-rays); mask-image: var(--m-rays); }
.af-sky--hi.has-lights > .af-sky__beams { width: 300px; height: 214px; margin: -3px 0 0 -150px; opacity: var(--sb, 0); -webkit-mask-image: var(--m-beams); mask-image: var(--m-beams); }
.af-sky--hi.has-lights > .af-sky__streak { width: 300px; height: 56px; margin: -28px 0 0 -150px; opacity: var(--sf, 0); -webkit-mask-image: var(--m-streak); mask-image: var(--m-streak); }
.af-sky--hi.has-lights > .af-sky__sun::after { display: none; } /* The drawn ring of rays gives way to the real ones. */

@media (prefers-reduced-motion: no-preference) {
	@keyframes af-rays-turn { to { transform: rotate(360deg); } }
	@keyframes af-beams-live { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(1.06); } }
	.af-sky--hi.has-lights > .af-sky__rays { animation: af-rays-turn 140s linear infinite; }
	.af-sky--hi.has-lights > .af-sky__beams { transform-origin: 50% 0; animation: af-beams-live 9s ease-in-out infinite; }
}

/* ==========================================================================
   6.131 — Home: how it comes in and how its two screens are swiped (found by filming both, frame by frame)
   - the sky fades in (it used to jump onto a black page) and nothing slides to its place while it does;
   - the sun, the moon, their lights and the times travel with the arc's screen at the finger's pace (they hung in place
     and faded at the end of the swipe; back, they returned a second and a half late);
   - "My day" no longer blinks when it arrives (its cards vanished and rose again after they had slid in).
   ========================================================================== */
.af-sky.af-sky--wide { transition: opacity .7s ease; }
.af-sky.af-sky--wide.is-new { opacity: 0 !important; }
.af-sky.is-new, .af-sky.is-new * { transition: none !important; }
.af-sky > .af-sky__sun, .af-sky > .af-sky__moon, .af-sky .af-sky__halo { opacity: calc(var(--o, 0) * var(--h2v, 1)) !important; }
.af-sky > .af-sky__time { opacity: var(--h2v, 1); }
.af-sky--hi.has-lights > .af-sky__rays { opacity: calc(var(--so, 0) * var(--h2v, 1)); }
.af-sky--hi.has-lights > .af-sky__beams { opacity: calc(var(--sb, 0) * var(--h2v, 1)); }
.af-sky--hi.has-lights > .af-sky__streak { opacity: calc(var(--sf, 0) * var(--h2v, 1)); }
.af-sky.is-swiping > .af-sky__sun, .af-sky.is-swiping > .af-sky__moon, .af-sky.is-swiping > .af-sky__time, .af-sky.is-swiping > .af-sky__rays, .af-sky.is-swiping > .af-sky__beams, .af-sky.is-swiping > .af-sky__streak, .af-sky.is-swiping .af-sky__halo, .af-sky.is-swiping .af-lake__glint { transition: none !important; }
/* The sky of the last visit, shown at once while the real one gets ready (assets/sky.js fades in over it and takes it away). */
.af-sky0 { position: absolute; left: 50%; width: 100vw; margin-left: -50vw; z-index: -1; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 96px, #000 62%, transparent 92%); mask-image: linear-gradient(to bottom, transparent 0, #000 96px, #000 62%, transparent 92%); }
.af-sky--hi.has-lights > .af-sky__rays, .af-sky--hi.has-lights > .af-sky__beams, .af-sky--hi.has-lights > .af-sky__streak { transition: opacity 1.5s; }
@media (prefers-reduced-motion: reduce) { .af-sky.af-sky--wide { transition: none; } }
/* The Milky Way on the client's Home: tied to the arc (its bright heart up and to the right of it), and it thins out upwards,
   so whatever stands above the arc (the greeting, banners) is read on a quiet sky. */
.af-sky--hi .af-sky__mw { background-size: 760px auto; background-position: calc(var(--bc, 195px) - 330px) calc(var(--bt, 160px) - 170px);
	-webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--bt, 160px) - 200px), #000 calc(var(--bt, 160px) - 70px)); mask-image: linear-gradient(to bottom, transparent calc(var(--bt, 160px) - 200px), #000 calc(var(--bt, 160px) - 70px)); }

/* ==========================================================================
   6.132 — Home shows no scrollbar, on any screen width and from the first moment (the page still scrolls: finger, wheel, keys).
   Until now it was hidden only under 900 px, and only once the page's script had run: it showed while Home was loading
   (then everything shifted sideways when it went away), and it stayed on wide screens.
   ========================================================================== */
html.af-h2-on { scrollbar-width: none !important; }
html.af-h2-on::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }

/* ==========================================================================
   6.133 — the group: a camera button next to the paperclip (a photo taken now; the paperclip stays for the library).
   Not shown where there is no touch screen: there it would open the same file window as the paperclip.
   ========================================================================== */
.af-group__compose .af-wa__row--clip:has(> .af-wa__cam) { grid-template-columns: 38px 38px 30px minmax(0, 1fr) 46px !important; gap: 2px !important; }
.af-group__compose .af-wa__row--clip:has(> .af-wa__cam) .af-wa__clip { width: 38px; }
.af-group__compose .af-wa__row--clip:has(> .af-wa__cam) .af-at__btn { width: 30px; }
@media (hover: hover) and (pointer: fine) {
	.af-wa__cam { display: none !important; }
	.af-group__compose .af-wa__row--clip:has(> .af-wa__cam) { grid-template-columns: 40px 34px minmax(0, 1fr) 46px !important; gap: 4px !important; }
	.af-group__compose .af-wa__row--clip:has(> .af-wa__cam) .af-wa__clip { width: 44px; }
	.af-group__compose .af-wa__row--clip:has(> .af-wa__cam) .af-at__btn { width: 34px; }
}

/* ==========================================================================
   6.134 — the chat with Maria (her side and the client's): the camera button next to the paperclip, as in the group.
   The microphone / send button moves one column to the right; on a screen without touch the row is as it was.
   ========================================================================== */
form:not(.af-group__compose) .af-wa__row--clip:has(> .af-wa__cam) { grid-template-columns: 40px 40px minmax(0, 1fr) 46px !important; gap: 4px !important; }
form:not(.af-group__compose) .af-wa__row--clip:has(> .af-wa__cam) .af-wa__clip { width: 40px; }
form:not(.af-group__compose) .af-wa__row--clip:has(> .af-wa__cam):has(> .af-wa__mic) .af-wa__mic,
form:not(.af-group__compose) .af-wa__row--clip:has(> .af-wa__cam):has(> .af-wa__mic) .af-wa__send { grid-column: 4; }
@media (hover: hover) and (pointer: fine) {
	form:not(.af-group__compose) .af-wa__row--clip:has(> .af-wa__cam) { grid-template-columns: 44px minmax(0, 1fr) 46px !important; gap: 8px !important; }
	form:not(.af-group__compose) .af-wa__row--clip:has(> .af-wa__cam) .af-wa__clip { width: 44px; }
	form:not(.af-group__compose) .af-wa__row--clip:has(> .af-wa__cam):has(> .af-wa__mic) .af-wa__mic,
	form:not(.af-group__compose) .af-wa__row--clip:has(> .af-wa__cam):has(> .af-wa__mic) .af-wa__send { grid-column: 3; }
}

/* 6.135: Content -> Recipe labels: the foods and recipes of one label (search, ticks, chips). */
.af-rtit { display: grid; gap: 8px; padding: 12px; border: 1px solid #3A393D; border-radius: 12px; background: rgba(243, 239, 232, .04); }
.af-rtit__t { margin: 0; font-size: 13px; font-weight: 700; color: var(--af-muted, #A8A29B); }
.af-rtit__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.af-rtit__chip { display: inline-flex; align-items: center; gap: 2px; padding: 3px 2px 3px 9px; border-radius: 8px; background: rgba(175, 169, 236, .16); color: #CECBF6; font-size: 13px; font-weight: 600; line-height: 1.3; }
.af-rtit__chip button { border: 0; background: transparent; color: inherit; font: inherit; font-size: 17px; line-height: 1; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; }
.af-rtit__chip button:hover { background: rgba(243, 239, 232, .1); }
.af-rtit__ph, .af-rtit__more, .af-rtit__none { margin: 0; font-size: 13px; color: var(--af-muted, #A8A29B); }
.af-rtit__q { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px !important; border: 0 !important; border-radius: 12px !important; background: rgba(243, 239, 232, .08) !important; color: #F3EFE8 !important; font: inherit; font-size: 16px !important; -webkit-appearance: none; appearance: none; }
.af-rtit__q::placeholder { color: #8F8A83; }
.af-rtit__list { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow: auto; display: grid; gap: 2px; }
.af-rtit__list label { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 6px; border-radius: 8px; cursor: pointer; font-size: 14.5px; box-sizing: border-box; }
.af-rtit__list label:hover { background: rgba(243, 239, 232, .05); }
.af-rtit__list input { width: 20px; height: 20px; flex: none; }
.af-rtit__list span { flex: 1; min-width: 0; }
.af-rtit__list em { flex: none; font-style: normal; font-size: 11.5px; font-weight: 700; color: #EBD58A; border: 1px solid rgba(235, 213, 138, .4); border-radius: 6px; padding: 1px 6px; }
.af-rtit__none { padding: 8px 6px; }
.af-rtit__msg { margin: 0; min-height: 18px; font-size: 13px; color: #9FE1CB; }
.af-rtit__msg.is-bad { color: #F09595; }
.af-rtadm__row > summary .af-rtadm__n { min-width: 0; }
.af-rtadm__row > summary .af-rtadm__c { flex: none; white-space: nowrap; text-align: right; }

/* ==========================================================================
   6.136 — Home: "Azi" and "Extra" instead of the two dots (the screens change at a tap too); the plain mode of the two
   screens (they do not slide: the one asked for is shown)
   ========================================================================== */
.af-account .af-h2__tabs.af-h2__seg { gap: 2px; padding: 3px; background: rgba(20, 19, 21, .72); border: 1px solid rgba(243, 239, 232, .12); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
.af-account .af-h2__seg button, .af-account .af-h2__seg button[aria-selected="true"] { width: auto; min-width: 64px; height: 32px; min-height: 32px; padding: 0 14px; border-radius: 999px; color: rgba(243, 239, 232, .72); font: inherit; font-size: 13.5px; font-weight: 800; letter-spacing: .01em; line-height: 1; text-shadow: none; transition: background-color .2s ease, color .2s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.af-account .af-h2__seg button[aria-selected="true"] { background: #EBD58A; color: #141315; }
.af-account .af-h2__seg button::after, .af-account .af-h2__seg button[aria-selected="true"]::after { content: ""; position: absolute; inset: -9px -2px; left: -2px; top: -9px; width: auto; height: auto; margin: 0; border-radius: 0; background: none; opacity: 1; } /* The place to tap is 50 px tall. */
.af-account .af-h2__seg button span { position: relative; z-index: 1; pointer-events: none; }
@media (min-width: 782px) { .af-account .af-h2__tabs.af-h2__seg { bottom: 18px; } }
.af-h2.af-h2--plain { overflow: hidden; scroll-snap-type: none; }
.af-h2.af-h2--plain > .af-h2__p:not(.is-on) { display: none !important; }

/* ==========================================================================
   6.138 — Home: the new scene ("Lumea ei", assets/sky.js real()): realistic layers of the period of the year
   ========================================================================== */
.af-sky__land.is-real > .af-land__l, .af-sky__land.is-real > .af-land__fog { display: none; }
.af-r { position: absolute; left: 50%; bottom: 52px; height: 190px; transform: translateX(-50%); pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent); }
.af-r__day, .af-r__glow, .af-r__fx, .af-r__tint, .af-r__warm { position: absolute; inset: 0; }
.af-r__day { filter: brightness(var(--rb, 1)) saturate(var(--rs, 1)); }
.af-r__tint { background: var(--rt, #243060); opacity: var(--rto, 0); mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 45%); mask-image: linear-gradient(to bottom, transparent 0, #000 45%); }
.af-r__warm { background: linear-gradient(to bottom, transparent 30%, rgba(255, 150, 80, 1)); opacity: var(--rw, 0); mix-blend-mode: soft-light; }
.af-r__l { position: absolute; left: 0; right: 0; }
.af-r__ground { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; display: block; }
.af-r__haze { position: absolute; inset: 0; background: var(--rh, #c8d4e8); opacity: var(--rho, .42); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.af-r__l--far .af-r__haze { opacity: calc(var(--rho, .42) * .5); }
.af-r__o { position: absolute; width: auto; display: block; transform: translateX(-50%) scaleX(var(--fx, 1)); transform-origin: 50% 100%; max-width: none; }
.af-r__gl { mix-blend-mode: screen; opacity: 0; transition: opacity 1.2s ease; }
.af-r__win { opacity: var(--rl, 0); }
.af-r__meal.is-on { opacity: max(.6, var(--rl, 0)); }
.is-tr .af-r__fire { opacity: max(.7, var(--rl, 0)); }
.af-r__flame { opacity: 0; }
.is-tr .af-r__flame--0 { animation: af-r-flame 1.1s steps(1) infinite; }
.is-tr .af-r__flame--1 { animation: af-r-flame 1.1s steps(1) infinite -.55s; }
@keyframes af-r-flame { 0% { opacity: .95; } 50% { opacity: 0; } }
.af-r__fl1 { opacity: 0; transition: opacity .8s; }
.is-wt .af-r__fl1 { opacity: 1; }
.is-wt .af-r__fl0 { opacity: 0; transition: opacity .8s; }
.af-r__smoke { opacity: 0; transform: translateX(-50%); }
.is-full .af-r__smoke--1 { animation: af-r-smoke 6s linear infinite; }
.is-full .af-r__smoke--2 { animation: af-r-smoke 6s linear infinite -3s; }
@keyframes af-r-smoke { 0% { opacity: 0; transform: translate(-50%, 0) scale(.6); } 20% { opacity: .55; } 100% { opacity: 0; transform: translate(-30%, -26px) scale(1.25); } }
.af-r__lake { position: absolute; transform: translateX(-50%); border-radius: 50%; overflow: hidden; opacity: 0; transition: opacity .6s; -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent); mask-image: radial-gradient(closest-side, #000 70%, transparent); }
.has-water .af-r__lake { opacity: 1; }
.af-r__water { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: linear-gradient(to bottom, var(--wa, #9cc4ea), var(--wb, #2c4a78)); transform-origin: 50% 100%; transform: scaleY(max(.18, var(--rwl, 0))); transition: transform 1.2s ease; border-radius: 50%; }
.af-r__rip { position: absolute; left: -10%; width: 120%; top: 10%; height: 60%; opacity: .45; mix-blend-mode: screen; }
.af-r__sea { position: absolute; left: 0; right: 0; background: linear-gradient(to bottom, var(--wa, #9cc4ea), var(--wb, #2c4a78)); }
.af-r__fog { position: absolute; left: -10%; right: -10%; height: 60px; opacity: var(--rfog, 0); transition: opacity 2s; }
.af-r__fog img { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; }
.af-r__fog img + img { opacity: .6; transform: translateX(6%); }
.af-r__bf { position: absolute; opacity: 0; transition: opacity .8s; }
.af-r__bf img { position: absolute; inset: 0; width: 100%; height: 100%; }
.af-r__bf img + img { opacity: 0; }
.is-en:not(.is-night) .af-r__bf { opacity: 1; animation: af-r-bfly 7s ease-in-out infinite alternate; }
.is-en:not(.is-night) .af-r__bf img + img { animation: af-r-flap .5s steps(1) infinite; }
.af-r__bf--1 { animation-delay: -2.5s !important; }
@keyframes af-r-flap { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes af-r-bfly { 0% { transform: translate(0, 0); } 33% { transform: translate(18px, -9px); } 66% { transform: translate(-8px, -15px); } 100% { transform: translate(12px, -4px); } }
.af-r__ff { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #FFF3A0; box-shadow: 0 0 6px 2px rgba(255, 236, 140, .8); opacity: 0; }
.is-en.is-night .af-r__ff { animation: af-r-ff 3.2s ease-in-out infinite; }
@keyframes af-r-ff { 0%, 100% { opacity: 0; transform: translate(0, 0); } 50% { opacity: .9; transform: translate(6px, -8px); } }
.af-r__fly { position: absolute; left: -15%; bottom: 120px; opacity: .85; animation: af-r-fly 38s linear infinite; }
.is-night .af-r__fly { opacity: .6; }
@keyframes af-r-fly { 0% { transform: translateX(0); } 100% { transform: translateX(140vw); } }
.af-r__drift { position: absolute; top: -10px; opacity: 0; animation: af-r-drift 16s linear infinite; }
@keyframes af-r-drift { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 10% { opacity: .9; } 90% { opacity: .8; } 100% { opacity: 0; transform: translate(-40px, 180px) rotate(240deg); } }
.af-r--iarna .af-r__drift, .af-r--craciun .af-r__drift { animation-name: af-r-snow; }
@keyframes af-r-snow { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: .9; } 100% { opacity: 0; transform: translate(-14px, 185px); } }
@media (prefers-reduced-motion: reduce) { .af-r__fly, .af-r__bf, .af-r__ff, .af-r__smoke, .af-r__flame { animation: none !important; } }

/* 6.139: the four cards under the scene (screen 1) until the weight and the sleep are noted; "Outside the plan" more
 * compact, with the meal that follows under it, in one title line. */
.af-bh__live > .af-dqw { margin: 12px 0 0; }
.af-bh__live > .af-dqw .af-dq, .af-bh__live > .af-dqw .af-dq__ed { margin-left: 0; margin-right: 0; }
.af-dqw__ghost { position: fixed; z-index: 60; margin: 0 !important; pointer-events: none; transform-origin: 50% 50%; will-change: transform, opacity; }
.af-dqw__gap { overflow: hidden; }
.af-h2__seg button.is-got { animation: af-dqw-got .7s ease-out; }
@keyframes af-dqw-got { 0% { transform: scale(1); } 35% { transform: scale(1.14); box-shadow: 0 0 0 6px rgba(235, 213, 138, .28); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(235, 213, 138, 0); } }
.af-bh__extra--c { margin-top: 12px; padding: 8px 8px 8px 14px; border-radius: 16px; }
.af-bh__xtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.af-bh__extra--c .af-bh__add { width: auto; margin: 0; height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; white-space: nowrap; }
.af-bh__extra--c ul { margin: 4px 6px 0 0; }
.af-bh__extra--c li { padding: 6px 0; font-size: 13.5px; }
.af-hn__t .af-hn__name { font-size: 15px; letter-spacing: 0; text-transform: none; }
.af-hn__head { justify-content: flex-start; }
@media (prefers-reduced-motion: reduce) { .af-h2__seg button.is-got { animation: none; } }
/* 6.140: the bands at the top, one at a time (assets/beta.js). */
.af-bh > .af-bq-wait { display: none !important; }
/* 6.140: "What is new" goes by itself after 10 seconds in view; the line shows the time left. */
.af-wn { position: relative; overflow: hidden; }
.af-wnb__time { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(235, 213, 138, .7); transform-origin: 0 50%; transition: transform .1s linear; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .af-wnb__time { transition: none; } }

/* 6.140: the new scene, stage 2: the stones of the streak and "Lumea mea". */
.af-r__st { filter: brightness(.72) saturate(.7); transition: filter .6s ease; }
.af-r__st.is-on { filter: brightness(1.18) sepia(.4) saturate(1.7) drop-shadow(0 0 2px rgba(255, 214, 130, 1)) drop-shadow(0 0 6px rgba(255, 196, 100, .6)); }
.af-r.is-night .af-r__st.is-on { filter: brightness(1.6) sepia(.5) saturate(1.8) drop-shadow(0 0 2px rgba(255, 220, 140, 1)) drop-shadow(0 0 6px rgba(255, 196, 100, .7)); }
.af-account .af-bh .af-bh__arcbox > button.af-lm__open { position: absolute !important; z-index: 3; left: 0; right: 0; bottom: 0; height: 18%; min-height: 40px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.af-account .af-bh .af-bh__arcbox > button.af-lm__open span { position: absolute; right: 6px; bottom: 6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(20, 19, 21, .55); border: 1px solid rgba(243, 239, 232, .35); color: #F3EFE8; font: italic 700 13px/1 Georgia, serif; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.af-account .af-bh .af-bh__arcbox > button.af-lm__open:focus-visible span { outline: 2px solid #EBD58A; outline-offset: 2px; }
.af-lm .af-sheet__bar .af-lm__x { justify-self: end; padding: 0 4px; border: 0; background: none; color: #EBD58A; font: inherit; font-weight: 700; cursor: pointer; }
.af-lm .af-lm__body { display: block; padding-bottom: 28px; }
.af-lm__lead { margin: 0 0 6px; font-size: 14.5px; color: #C9C4BD; }
.af-lm .af-lm__h { font-family: inherit; margin: 18px 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #A8A2AE; }
.af-lm__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.af-lm__r { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(243, 239, 232, .06); }
.af-lm__r:first-child { border-top: 0; }
.af-lm__i { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; background: rgba(243, 239, 232, .05); filter: grayscale(1) opacity(.55); }
.af-lm__r.is-on .af-lm__i { filter: none; background: rgba(235, 213, 138, .14); }
.af-lm__tx { display: grid; min-width: 0; }
.af-lm__tx b { font-size: 14.5px; font-weight: 600; color: #F3EFE8; }
.af-lm__tx small { font-size: 13px; color: #8F8996; }
.af-lm__r.is-on .af-lm__tx small { color: #CDBF8E; }
.af-lm__stones { display: flex; gap: 8px; margin: 2px 0 10px; }
.af-lm__stones i { width: 26px; height: 14px; border-radius: 50% 50% 45% 45%; background: #4A4650; }
.af-lm__stones i.is-on { background: linear-gradient(#F5DB92, #C99A3E); box-shadow: 0 0 8px rgba(245, 205, 120, .7); }
.af-lm__p { margin: 0 0 10px; font-size: 14px; line-height: 1.45; color: #C9C4BD; }
.af-lm__p b { color: #F3EFE8; }
/* 6.140 (C1, C4): the free days. */
.af-fband { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; padding: 8px 12px; border-radius: 12px; background: rgba(243, 239, 232, .06); border: 1px solid rgba(243, 239, 232, .1); color: #E8E3DA; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.af-fband span { flex: 1; min-width: 0; }
.af-fband b { color: #EBD58A; font-size: 18px; line-height: 1; }
.af-fband--last { background: rgba(235, 213, 138, .14); border-color: rgba(235, 213, 138, .45); color: #F3E3A6; }
.af-ffull { margin: 12px 0 0; padding: 10px 14px; border-radius: 14px; background: rgba(111, 191, 115, .12); border: 1px solid rgba(111, 191, 115, .35); font-size: 14px; color: #DCEFD9; }
.af-ffull a { color: #EBD58A; font-weight: 700; text-decoration: none; white-space: nowrap; }
/* 6.140 (C3): the short profile of the free days. */
.af-fshort__t { margin: 0 0 4px; font-size: 17px; font-weight: 800; color: #F3EFE8; }
.af-fshort__k { margin: 2px 0 6px; font-family: var(--wp--preset--font-family--caslon, Georgia, serif); font-size: 34px; line-height: 1.1; color: #EBD58A; }
.af-fshort__f { display: grid; gap: 10px; margin-top: 10px; }
.af-fshort__f .af-field { margin: 0; }
.af-fshort__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.af-fshort__l { margin: 0 0 -4px; font-size: 14px; font-weight: 600; }
.af-fshort__sex { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.af-fshort__sex label { position: relative; }
.af-fshort__sex input { position: absolute; opacity: 0; pointer-events: none; }
.af-fshort__sex span { display: block; padding: 10px; border-radius: 12px; border: 1px solid rgba(243, 239, 232, .18); text-align: center; font-weight: 600; cursor: pointer; }
.af-fshort__sex input:checked + span { border-color: #D2B04C; background: rgba(235, 213, 138, .14); color: #F3E3A6; }
.af-fshort__sex input:focus-visible + span { outline: 2px solid #EBD58A; outline-offset: 2px; }
/* 6.140 (B6): on a phone, the pay button stays in view at the bottom while its form is on the screen (with the sum on it). */
@media (max-width: 781px) {
	.af-account form.af-plans .af-plans__pay { position: sticky; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); z-index: 5; box-shadow: 0 -10px 24px rgba(20, 19, 21, .85), 0 6px 18px rgba(0, 0, 0, .35); }
}
/* 6.140 (B7): "Prelungește" in the card of her plan. */
.af-mysub__renew { margin-top: 12px; }
/* 6.141: in the app a double tap does not zoom (two fingers: includes/pwa.php). */
body.af-app { touch-action: manipulation; }

/* 6.141: the scene comes in and changes softly. The first landscape of a period: layer by layer, from the back. A rebuilt
 * one (a new step, a turned phone): over the old one. A thing new to her: it grows from the ground, once. A light or a
 * stone that comes on: a small pulse. The flag climbs its pole. */
@keyframes af-r-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes af-r-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes af-r-grow { 0% { opacity: 0; transform: translateX(-50%) scaleX(var(--fx, 1)) scaleY(.05); } 60% { opacity: 1; } 80% { transform: translateX(-50%) scaleX(var(--fx, 1)) scaleY(1.05); } 100% { opacity: 1; transform: translateX(-50%) scaleX(var(--fx, 1)) scaleY(1); } }
@keyframes af-r-pulse { 0% { filter: brightness(1); } 35% { filter: brightness(1.9) drop-shadow(0 0 6px rgba(255, 210, 120, .9)); } 100% { filter: brightness(1); } }
.af-r.is-in .af-r__l, .af-r.is-in .af-r__sea, .af-r.is-in .af-r__fog { animation: af-r-in .7s cubic-bezier(.2, .8, .2, 1) both; }
.af-r.is-in .af-r__l--range { animation-delay: 0s; }
.af-r.is-in .af-r__l--far { animation-delay: .12s; }
.af-r.is-in .af-r__l--near { animation-delay: .26s; }
.af-r.is-in .af-r__l--fore { animation-delay: .4s; }
.af-r.is-in .af-r__fx, .af-r.is-in .af-r__glow { animation: af-r-fade .8s ease .6s both; }
.af-r.is-xin { animation: af-r-fade .8s ease both; z-index: 1; }
.af-r.is-xout { z-index: 0; }
.af-r__o.is-grow { animation: af-r-grow 1.2s cubic-bezier(.3, .8, .3, 1) .5s both; }
.af-r__st.is-pop, .af-r__meal.is-pop { animation: af-r-pulse 1.2s ease; }
.af-r__fl1 { transform: translateX(-50%) scaleX(var(--fx, 1)) translateY(35%); transition: opacity .8s, transform 1.1s cubic-bezier(.3, .8, .3, 1); }
.is-wt .af-r__fl1 { transform: translateX(-50%) scaleX(var(--fx, 1)); }
@media (prefers-reduced-motion: reduce) { .af-r.is-in *, .af-r.is-xin, .af-r__o.is-grow, .af-r__st.is-pop, .af-r__meal.is-pop { animation: none !important; } .af-r__fl1 { transition: none; } }
/* 6.141: the week on screen 2 (the circles of Progress). */
.af-account a.af-dz__week { color: inherit; text-decoration: none; width: auto; font-size: inherit; }
.af-dz__week .af-pg-days { flex: 1; min-width: 0; margin: 0; }
.af-dz__week .af-pg-day__c { width: 28px; height: 28px; font-size: 13px; }
.af-dz__week .af-pg-day__c .af-pg-ic { width: 14px; height: 14px; }
.af-dz__week .af-pg-day.is-today .af-pg-day__c { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .24), 0 0 0 2px rgba(29, 28, 32, .9), 0 0 0 3.5px var(--pg-gold); }
.af-dz__week .af-pg-day.is-today .af-pg-day__c--y, .af-dz__week .af-pg-day.is-today .af-pg-day__c--h, .af-dz__week .af-pg-day.is-today .af-pg-day__c--n { box-shadow: 0 0 0 2px rgba(29, 28, 32, .9), 0 0 0 3.5px var(--pg-gold); }
.af-dz__week .af-dz__sum { max-width: 76px; }

/* 6.147 Plan editor: Maria's description of each meal (always visible, for her only) and the meal's note shown under its total. */
.af-pb__mhead { flex-wrap: wrap; }
.af-pb__mdesc { flex: 1 1 180px; min-width: 0; margin: 0 6px; padding: 6px 10px; border-radius: 10px; border: 1px dashed rgba(235, 213, 138, .35); background: rgba(235, 213, 138, .06); color: #EBD58A; font: inherit; font-size: 13.5px; font-style: italic; }
.af-pb__mdesc::placeholder { color: rgba(235, 213, 138, .45); }
.af-pb__mdesc:focus { outline: none; border-style: solid; border-color: #EBD58A; background: rgba(235, 213, 138, .1); }
.af-pbg__mdesc { margin: 0 0 6px; padding-right: 22px; font-size: 12px; font-style: italic; line-height: 1.35; color: #EBD58A; }
.af-pbg__mnote { margin: 6px 0 0; padding: 6px 8px; border-radius: 8px; background: rgba(243, 239, 232, .06); font-size: 12px; line-height: 1.35; color: #D9D4CD; white-space: pre-line; }

/* 6.148 Template page: name + "⋯" menu on top; the Save bar always in view at the bottom. */
.af-tplhead { display: flex; align-items: center; gap: 8px; margin: 8px 0 14px; }
.af-tplhead__name { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(243, 239, 232, .14); background: #1E1D21; color: #F3EFE8; font: inherit; font-size: 18px; font-weight: 700; }
.af-tplhead__name:focus { outline: none; border-color: #EBD58A; }
.af-tplmenu { position: relative; flex: none; }
.af-tplmenu > summary { list-style: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(243, 239, 232, .14); background: #1E1D21; color: #F3EFE8; font-size: 22px; line-height: 1; cursor: pointer; }
.af-tplmenu > summary::-webkit-details-marker { display: none; }
.af-tplmenu[open] > summary { border-color: #EBD58A; }
.af-tplmenu__pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; display: grid; min-width: 230px; padding: 6px; border-radius: 14px; background: #26252A; border: 1px solid rgba(243, 239, 232, .12); box-shadow: 0 12px 30px rgba(0, 0, 0, .45); }
.af-tplmenu__item { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 10px; background: none; color: #F3EFE8; font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.af-tplmenu__item:hover, .af-tplmenu__item:focus-visible { background: rgba(243, 239, 232, .07); }
.af-tplmenu__item.is-danger { color: #F2A7AF; }
.af-tplbar { position: sticky; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 0; padding: 10px 12px; border-radius: 16px; background: rgba(29, 28, 30, .96); border: 1px solid rgba(243, 239, 232, .1); box-shadow: 0 -6px 20px rgba(0, 0, 0, .35); backdrop-filter: blur(6px); }
.af-tplbar__st { font-size: 14px; color: #A8A2AE; }
.af-tplbar.is-dirty .af-tplbar__st { color: #EBD58A; font-weight: 700; }
.af-tplbar.is-saved .af-tplbar__st { color: #BFE6C1; }
.af-tplbar .af-pb__savetplpage { min-width: 130px; }
.af-tplbar .af-pb__savetplpage:disabled { opacity: .45; cursor: default; }
@media (max-width: 781px) {
	.af-tplbar { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* 6.150: the template's "⋯" → "Trimite planul către…" (her Elite clients) */
.af-tplsend > summary { list-style: none; }
.af-tplsend > summary::-webkit-details-marker { display: none; }
.af-tplsend[open] > summary { color: #EBD58A; }
.af-tplsend__list { display: grid; max-height: min(52vh, 420px); overflow-y: auto; margin: 2px 0 4px; padding: 4px 0 0 6px; border-top: 1px solid rgba(243, 239, 232, .08); }
.af-tplsend__list form { margin: 0; }
.af-tplsend__who { width: 100%; }
.af-tplsend__who span { display: grid; }
.af-tplsend__who small { font-size: 12px; color: #A8A29B; }
.af-tplsend__none, .af-tplsend__hint { margin: 6px 12px 8px; font-size: 12.5px; line-height: 1.4; color: #A8A29B; }
.af-tplmenu__pop { max-width: min(320px, calc(100vw - 32px)); }

/* 6.150: Maria's Today: the free days' day-2 messages */
.af-fjd2 { display: grid; gap: 14px; }
.af-fjd2__one { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(243, 239, 232, .08); }
.af-fjd2__who { display: flex; align-items: center; gap: 10px; }
.af-fjd2__one textarea { width: 100%; min-height: 110px; padding: 10px 12px; border: 1px solid rgba(243, 239, 232, .14); border-radius: 12px; background: #1E1D21; color: #F3EFE8; font: inherit; font-size: 15px; line-height: 1.45; box-sizing: border-box; resize: vertical; }
.af-fjd2__one .af-pill { justify-self: end; }

/* 6.150: Maria's Settings → Subscription: from the 3 free days to Elite */
.af-funnel { display: grid; gap: 12px; }
.af-funnel__when { display: flex; flex-wrap: wrap; gap: 6px; }
.af-funnel__when a { padding: 6px 12px; border-radius: 16px; border: 1px solid rgba(243, 239, 232, .14); color: #F3EFE8; font-size: 13px; text-decoration: none; }
.af-funnel__when a.is-on { border-color: #D2B04C; color: #EBD58A; background: rgba(210, 176, 76, .12); }
.af-funnel__row { display: grid; gap: 5px; }
.af-funnel__top { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.af-funnel__bar { height: 8px; border-radius: 4px; background: rgba(243, 239, 232, .08); overflow: hidden; }
.af-funnel__bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #EBD58A, #D2B04C); }
.af-funnel__row small { font-size: 12px; color: #A8A29B; }

/* 6.150: Maria's client page: five tabs with their pages, and "Pe scurt" (coach-glance.php) */
.af-csub { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 2px; }
.af-csub a { padding: 6px 12px; border-radius: 16px; border: 1px solid rgba(243, 239, 232, .12); color: #C9C4BD; font-size: 13.5px; text-decoration: none; }
.af-csub a.is-on { border-color: #D2B04C; color: #EBD58A; background: rgba(210, 176, 76, .12); }
.af-cg-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: #8F8996; }
.af-cg-dot--green { background: #6FBF73; }
.af-cg-dot--yellow { background: #E8C35A; }
.af-cg-dot--red { background: #E5534B; }
.af-cg-dot--new { background: transparent; box-shadow: inset 0 0 0 1.5px #A8A29B; }
.af-cg { margin-top: 12px; }
.af-cg__light { display: flex; align-items: flex-start; gap: 10px; }
.af-cg__light .af-cg-dot { width: 16px; height: 16px; margin: 3px 0 0; }
.af-cg__light strong { font-size: 17px; }
.af-cg__light p { margin: 2px 0 0; color: #C9C4BD; font-size: 14.5px; line-height: 1.45; }
.af-cg--green { box-shadow: inset 3px 0 0 #6FBF73; }
.af-cg--yellow { box-shadow: inset 3px 0 0 #E8C35A; }
.af-cg--red { box-shadow: inset 3px 0 0 #E5534B; }
.af-cg-todo { display: grid; gap: 10px; }
.af-cg-todo__row { display: flex; align-items: center; gap: 10px; }
.af-cg-todo__ic { flex: none; width: 24px; text-align: center; }
.af-cg-todo__t { flex: 1; font-size: 14.5px; line-height: 1.4; }
.af-cg-todo__row .af-pill { flex: none; text-decoration: none; }
.af-cg-todo__none { margin: 0; color: #9DD3A8; font-weight: 600; }
.af-cg-week__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.af-cg-week__d { display: grid; justify-items: center; gap: 4px; padding: 4px 0; border-radius: 10px; color: #A8A29B; font-size: 12px; text-decoration: none; }
.af-cg-week__d i, .af-cg-week__key i { display: block; width: 22px; height: 22px; border-radius: 50%; background: rgba(243, 239, 232, .1); }
.af-cg-week__d.is-full i, .af-cg-week__key i.is-full { background: #6FBF73; }
.af-cg-week__d.is-part i, .af-cg-week__key i.is-part { background: #D2B04C; }
.af-cg-week__d.is-today span { color: #EBD58A; font-weight: 700; }
.af-cg-week__key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; font-size: 12px; color: #A8A29B; }
.af-cg-week__key span { display: inline-flex; align-items: center; gap: 5px; }
.af-cg-week__key i { width: 10px; height: 10px; }
.af-cg-pw { display: grid; gap: 0; }
.af-cg-pw__head, .af-cg-pw__row { display: grid; grid-template-columns: 1.05fr 1.6fr 1fr .9fr; gap: 10px; align-items: start; }
.af-cg-pw__head { padding: 0 0 8px; font-size: 12px; color: #A8A29B; border-bottom: 1px solid rgba(243, 239, 232, .08); }
.af-cg-pw__row { padding: 10px 0; border-bottom: 1px solid rgba(243, 239, 232, .06); font-size: 14px; }
.af-cg-pw__row > span { display: grid; gap: 2px; }
.af-cg-pw__row small { font-size: 12px; color: #A8A29B; }
.af-cg-pw__days { grid-auto-flow: row; }
.af-cg-pw__plan a { color: #EBD58A; text-decoration: none; font-weight: 600; }
.af-cg-pw__kg b.is-down { color: #9DD3A8; }
.af-cg-pw__kg b.is-up { color: #E8C35A; }
.af-cg-pw__end { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: #C9C4BD; }
.af-cg-pw__end strong { color: #F3EFE8; font-weight: 600; }
.af-cg-pw__tip { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(210, 176, 76, .1); font-size: 14px; line-height: 1.45; }
.af-cg-said { display: grid; gap: 10px; }
.af-cg-said__row { display: grid; gap: 3px; color: inherit; text-decoration: none; }
.af-cg-said__row span { font-size: 12.5px; color: #A8A29B; }
.af-cg-said__row q { font-size: 14.5px; line-height: 1.45; color: #F3EFE8; quotes: '„' '”'; }
@media (max-width: 560px) {
	.af-cg-pw__head { display: none; }
	.af-cg-pw__row { grid-template-columns: 1fr auto; grid-template-areas: "plan kg" "wk days"; gap: 4px 12px; }
	.af-cg-pw__plan { grid-area: plan; }
	.af-cg-pw__kg { grid-area: kg; justify-items: end; text-align: right; }
	.af-cg-pw__wk { grid-area: wk; color: #A8A29B; font-size: 12.5px; }
	.af-cg-pw__days { grid-area: days; justify-items: end; text-align: right; }
}
.af-ctabs--5 { gap: 4px; }
.af-ctabs--5 a { flex: 1 0 auto; justify-content: center; padding: 0 8px; font-size: 13.5px; }
.af-cg-pw__days b { display: inline-flex; align-items: center; font-weight: 600; }

/* 6.151: Maria's list of clients: in groups (Au nevoie de tine · Atenție · Noi · Merg bine), the light as a ring */
.af-filter--row { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.af-filter--row::-webkit-scrollbar { display: none; }
.af-filter--row .af-chip-btn { flex: none; white-space: nowrap; }
.af-cgrp { display: flex; align-items: center; gap: 2px; margin: 14px 4px 4px; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #A8A29B; }
.af-cgrp:first-child { margin-top: 2px; }
.af-cgrp span { margin-left: 6px; color: #8F8996; font-weight: 700; }
.af-cgrp--red { color: #F09595; }
.af-cgrp--yellow { color: #E8C35A; }
.af-cgrp--green { color: #9DD3A8; }
.af-cg-ring { position: relative; display: inline-flex; flex: none; border-radius: 50%; padding: 2px; box-shadow: 0 0 0 2px rgba(243, 239, 232, .14); }
.af-cg-ring--red { box-shadow: 0 0 0 2.5px #E5534B; }
.af-cg-ring--yellow { box-shadow: 0 0 0 2.5px #E8C35A; }
.af-cg-ring--green { box-shadow: 0 0 0 2px rgba(111, 191, 115, .7); }
.af-cg-ring--new { box-shadow: 0 0 0 2px rgba(168, 162, 155, .5); }
.af-crow { gap: 14px; }
.af-crow .af-row__text strong { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.af-crow__why { color: #C9C4BD; }
.af-crow[data-g="red"] .af-crow__why { color: #F2A7AF; }
.af-crow[data-g="yellow"] .af-crow__why { color: #EBD58A; }
.af-client-list .af-cgrp + .af-row { border-top: 0; }


/* 6.153: the Light plan's format (light-formats.php) */
.af-lfmt__list { display: grid; gap: 8px; margin: 10px 0; }
.af-lfmt__opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; border: 1px solid rgba(243, 238, 227, .14); cursor: pointer; }
.af-lfmt__opt:has(input:checked) { border-color: #D2B04C; background: rgba(210, 176, 76, .12); }
.af-lfmt__opt input { margin-top: 3px; }
.af-lfmt__opt span { display: grid; gap: 2px; }
.af-lfmt__opt small { color: #B9B4AC; font-size: 13px; line-height: 1.4; }
.af-lfmt__budget { margin: 6px 0 4px; }

/* 6.155: AlmarFit Free on the site's Home (free-tier.php) */
.af-ft { display: grid; gap: 10px; border-color: rgba(210, 176, 76, .45); }
.af-ft form { display: grid; gap: 8px; margin: 0; }
.af-ft__eyebrow { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #EBD58A; }
.af-ft__q { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.3; }
.af-ft__res { display: grid; gap: 2px; padding: 14px; border-radius: 16px; background: rgba(210, 176, 76, .1); border: 1px solid rgba(210, 176, 76, .35); }
.af-ft__res small { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #EBD58A; }
.af-ft__res strong { font-size: 30px; line-height: 1.2; }
.af-ft__opt { display: grid; gap: 2px; text-align: left; width: 100%; padding: 13px 16px; border-radius: 16px; border: 1.5px solid rgba(243, 238, 227, .14); background: rgba(243, 238, 227, .04); color: inherit; font: inherit; cursor: pointer; }
.af-ft__opt:hover, .af-ft__opt:focus-visible { border-color: #D2B04C; background: rgba(210, 176, 76, .14); }
.af-ft__opt small { color: #B9B4AC; font-size: 13px; line-height: 1.4; }
.af-ft__num { display: flex; align-items: center; gap: 10px; margin: 0; }
.af-ft__num input { flex: 1; font-size: 24px; font-weight: 800; text-align: center; }
/* 6.157: the first minute in motion: the bar fills, the question slides in, the chosen answer lights up, the gauge draws. */
.af-ft__bar { display: flex; gap: 4px; }
.af-ft__bar i { flex: 1; height: 4px; border-radius: 2px; background: rgba(243, 238, 227, .12); overflow: hidden; position: relative; }
.af-ft__bar i.is-on::after { content: ""; position: absolute; inset: 0; background: #D2B04C; border-radius: 2px; }
.af-ft__bar i.is-now::after { animation: af-ft-fill .6s cubic-bezier(.2, .7, .2, 1) .15s both; transform-origin: left; }
@keyframes af-ft-fill { from { transform: scaleX(0); } to { transform: none; } }
.af-ft__q, .af-ft form, .af-ft .af-hint { animation: af-ft-in .45s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes af-ft-in { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
.af-ft__opt { position: relative; transition: border-color .2s, background .2s, transform .15s; }
.af-ft__opt:active { transform: scale(.98); }
.af-ft__opt.is-picked { border-color: #D2B04C; background: rgba(210, 176, 76, .18); }
.af-ft__opt.is-picked::after { content: "✓"; position: absolute; right: 16px; top: 50%; translate: 0 -50%; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #D2B04C; color: #141315; font-weight: 900; font-size: 13px; animation: af-ft-pop .3s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes af-ft-pop { from { transform: scale(.4); } to { transform: none; } }
.af-ft.is-busy { pointer-events: none; }
.af-ft.is-out .af-ft__q, .af-ft.is-out form, .af-ft.is-out .af-hint { opacity: 0; transform: translateX(-26px); transition: opacity .2s, transform .2s; animation: none; }
.af-ft__res { position: relative; overflow: hidden; animation: af-ft-res .6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes af-ft-res { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.af-ft__gauge { position: relative; display: block; height: 30px; margin: 4px 0 2px; }
.af-ft__gauge::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 8px; border-radius: 4px; background: rgba(243, 238, 227, .12); transform-origin: left; animation: af-ft-fill .65s cubic-bezier(.2, .7, .2, 1) .25s both; }
.af-ft__band { position: absolute; top: 11px; height: 8px; border-radius: 4px; background: rgba(157, 211, 168, .75); animation: af-ft-fade .4s ease .8s both; }
.af-ft__dot { position: absolute; top: 3px; left: 0; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; background: #EBD58A; border: 3px solid #1E1D20; box-shadow: 0 0 14px rgba(235, 213, 138, .55); animation: af-ft-slide .9s cubic-bezier(.3, 1.4, .5, 1) 1s both; }
.af-ft__dot--in { background: #9DD3A8; box-shadow: 0 0 14px rgba(157, 211, 168, .55); }
@keyframes af-ft-slide { from { left: 0; opacity: 0; } to { left: var(--x); opacity: 1; } }
@keyframes af-ft-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.af-ft *, .af-ft__res, .af-ft__gauge::before { animation: none !important; }
	.af-ft__dot { left: var(--x); }
}

/* 6.161: the recipes' preview (free accounts, the 3 days, a subscription that ended). */
.af-rc__week { border: 1px solid rgba(210, 176, 76, .35); background: linear-gradient(160deg, rgba(210, 176, 76, .12), rgba(31, 30, 33, 1) 60%); }
.af-rc__weekt { margin: 0; font-weight: 800; font-size: 17px; color: #F3EFE8; }
.af-rc__week .af-hint { margin: 4px 0 4px; }
.af-rc__wk { display: inline-block; margin: 3px 0 2px; font-style: normal; font-size: 12px; font-weight: 700; color: #E8C35A; }
.af-rc__rectext .af-rc__wk { display: block; }
.af-rc__lock { font-size: 13px; opacity: .75; }
.af-rcr__lock { margin-top: 4px; }
.af-rcr__lock .af-btn--ghost { margin-top: 8px; }

/* 6.164: Elite, what she does not eat (elite-excl.php): the card above her plan's editor and the line on her page. */
.af-ex-card { border: 1px solid rgba(243, 239, 232, .12); }
.af-ex-card.is-bad { border-color: rgba(229, 144, 144, .55); }
.af-ex-card summary { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; cursor: pointer; }
.af-ex-sum { font-size: 13px; color: #EBD58A; font-weight: 700; }
.af-ex-card.is-bad .af-ex-sum { color: #E59090; }
.af-ex-rows { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.af-ex-rows li { padding: 8px 10px; border-radius: 10px; background: rgba(243, 239, 232, .04); border-left: 3px solid #EBD58A; }
.af-ex-rows li.is-no { border-left-color: #E59090; }
.af-ex-rows span { color: #A8A29B; font-size: 12.5px; }
.af-ex-rows small { color: #D8D3CC; }
.af-ex-ok { color: #9DD3A8; margin: 10px 0 0; }
.af-ex-box { margin: 6px 0; font-size: 14px; color: #D8D3CC; }
.af-ex-box.is-on strong { color: #E59090; }
.af-pb__mom.is-no { filter: none; }

/* 6.164: the check-in's head and "Cardul meu" (checkin-card.php), as in the apps. */
.af-cch { display: grid; gap: 8px; }
.af-cch__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.af-cch__eye { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .07em; color: #A8DDA9; }
.af-cch__big { margin: 0; font-size: 34px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.af-cch__none { margin: 4px 0 0; font-size: 16px; font-weight: 700; color: #A8A29B; }
.af-cch__side { display: flex; flex-direction: column; align-items: flex-end; font-size: 12.5px; color: #A8A29B; }
.af-cch__side strong { color: #F3EFE8; }
.af-cch__chart { width: 100%; height: auto; display: block; }
.af-cch__hr { border: 0; height: 1px; background: rgba(243, 239, 232, .07); margin: 0; width: 100%; }
.af-cch__stars { display: flex; align-items: center; gap: 3px; margin: 0; }
.af-cch__stars strong { margin-left: 8px; color: #EBD58A; font-size: 14px; }
.af-cch__pill { display: grid; grid-template-columns: 64px 1fr 92px; align-items: center; gap: 8px; font-size: 12.5px; color: #D8D3CC; }
.af-cch__pill i { height: 6px; border-radius: 3px; background: rgba(243, 239, 232, .1); overflow: hidden; }
.af-cch__pill b { display: block; height: 6px; border-radius: 3px; }
.af-cch__pill em { font-style: normal; font-weight: 700; color: #F3EFE8; text-align: right; }
.af-mood4 { display: flex; gap: 6px; }
.af-mood4 label { flex: 1; }
.af-mood4 input { position: absolute; opacity: 0; pointer-events: none; }
.af-mood4 span { display: flex; align-items: center; justify-content: center; height: 38px; border-radius: 11px; background: #2A292C; font-size: 12.5px; font-weight: 700; border: 1.5px solid transparent; cursor: pointer; }
.af-mood4 input:checked + span { background: rgba(210, 176, 76, .18); border-color: #D2B04C; color: #EBD58A; }
.af-mood4 input:focus-visible + span { outline: 2px solid #EBD58A; outline-offset: 2px; }
.af-cc-row { display: flex; gap: 8px; align-items: stretch; }
.af-cc-row > .af-btn { flex: 1.4; margin: 0; }
.af-cc-open { flex: 1; border: 1.5px solid #D2B04C !important; color: #EBD58A !important; }
.af-cc-dlg { max-width: 420px; width: calc(100% - 32px); border: 0; border-radius: 20px; background: #1F1E21; color: #F3EFE8; padding: 16px; }
.af-cc-dlg::backdrop { background: rgba(0, 0, 0, .65); }
.af-cc-dlg__t { margin: 0 0 10px; font-size: 17px; font-weight: 800; }
.af-cc-dlg .af-btn--block { margin-top: 8px; }

/* 6.171: the plans side by side when her details had the 3 days (free-tier.php almarfit_ft_cards_html) */
.af-ft__cards { display: flex; gap: 10px; margin: 14px 0 4px; }
.af-ft__cards.is-many { overflow-x: auto; scroll-snap-type: x mandatory; margin-left: -16px; margin-right: -16px; padding: 0 16px 8px; scrollbar-width: none; }
.af-ft__cards.is-many::-webkit-scrollbar { display: none; }
.af-ft__pc { flex: 1 0 auto; display: flex; flex-direction: column; gap: 6px; box-sizing: border-box; border-radius: 18px; padding: 16px; background: #1F1E21; border: 1px solid rgba(243, 239, 232, .12); text-align: left; }
.af-ft__cards.is-many .af-ft__pc { flex: 0 0 84%; scroll-snap-align: center; }
.af-ft__pc--elite { border-color: rgba(210, 176, 76, .55); background: linear-gradient(160deg, rgba(58, 47, 20, .9), #1F1E21 60%); }
.af-ft__pc p { margin: 0 !important; }
.af-ft__pn { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #EBD58A; }
.af-ft__pt { font-size: 17px; font-weight: 800; line-height: 1.3; color: #F3EFE8; }
.af-ft__pp { font-size: 14px; font-weight: 700; color: #EBD58A; }
.af-ft__px { flex: 1; font-size: 14px; line-height: 1.45; color: #C9C4BD; }
.af-ft__pc .af-btn { margin-top: 8px !important; }
.af-ft__help { margin: 6px 0 0 !important; text-align: center; font-size: 14px; }
.af-ft__help a { color: #EBD58A; }
.af-ft__help button { background: none; border: 0; padding: 6px; color: #EBD58A; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.af-ft__help.is-sent { color: #9DD3A8; }
/* 6.172: Maria's card about the 3 days, on the client's page */
.af-trial-coach.is-asked { border-color: rgba(210, 176, 76, .55); }
.af-trial-coach p { margin: 0 0 8px; }
.af-trial-coach__acc { margin: 0 0 10px; padding-left: 18px; }
.af-trial-coach__acc li { margin: 0 0 6px; }
.af-chip--gift { background: rgba(210, 176, 76, .18); color: #EBD58A; text-decoration: none; }
.af-ft__later { margin: 0 !important; text-align: center; }
.af-ob .af-ft__cards { text-align: left; }

/* 6.169: the window that asks for the 3 days (free-tier.php almarfit_trial_ask_data), once a day over Home */
.af-trial-ask { max-width: 400px; width: calc(100% - 32px); border: 1px solid rgba(210, 176, 76, .45); border-radius: 22px; background: #1F1E21; color: #F3EFE8; padding: 22px 20px 14px; text-align: center; }
.af-trial-ask::backdrop { background: rgba(0, 0, 0, .65); }
.af-trial-ask[open] { animation: af-trial-in .32s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes af-trial-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .af-trial-ask[open] { animation: none; } }
.af-trial-ask__e { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: #EBD58A; }
.af-trial-ask__t { margin: 0 0 8px; font-size: 20px; font-weight: 800; line-height: 1.25; }
.af-trial-ask__p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.45; color: #C9C4BD; }
.af-trial-ask form { margin: 0; }
.af-trial-ask__later { margin-top: 6px; padding: 10px 16px; border: 0; background: none; color: #A8A2AE; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }

/* 6.164: the Plan as in the app (beta-ui.php almarfit_beta_plan_html): rings on the days, "Zi | Toată săptămâna",
 * the day's line with the meal of now open, Maria's note on every day, the shopping list as a floating button. */
.af-bpl__rings a { gap: 2px; padding: 6px 0; }
.af-bpl__rings a i { position: relative; display: grid; place-items: center; width: 34px; height: 34px; font-style: normal; color: #F3EFE8; }
.af-bpl__rings a i svg { position: absolute; inset: 0; }
.af-bpl__rings a i b { position: relative; font-size: 12px; font-weight: 800; color: #F3EFE8; }
.af-bpl__rings a.is-on { background: #EBD58A; outline: 0; color: #141315; }
.af-bpl__rings a.is-on i { color: #141315; }
.af-bpl__rings a.is-on i b { color: #141315; }
.af-bpl__sw { display: flex; padding: 3px; border-radius: 12px; background: #1F1E21; border: 1px solid rgba(243, 239, 232, .06); }
.af-bpl__sw a { flex: 1; text-align: center; padding: 8px 0; border-radius: 9px; font-size: 13.5px; font-weight: 700; color: #A8A29B; text-decoration: none; }
.af-bpl__sw a.is-on { background: #2A292C; color: #F3EFE8; }
.af-bpl__pnote { margin: 0; padding: 10px 12px; border-radius: 14px; background: rgba(235, 213, 138, .07); border: 1px solid rgba(235, 213, 138, .2); font-size: 13px; line-height: 1.45; color: #D8D3CC; }
.af-bpl__pnote strong { color: #EBD58A; }
.af-bpl__pnote summary { cursor: pointer; list-style: none; }
.af-bpl__pnote summary::-webkit-details-marker { display: none; }
.af-bpl__pnote summary em { font-style: normal; font-weight: 700; color: #EBD58A; }
.af-bpl__pnote[open] summary span, .af-bpl__pnote[open] summary em { display: none; }
.af-bpl__pnote p { margin: 4px 0 0; }
.af-bpl__line { display: grid; }
.af-bpl__row { display: flex; gap: 10px; }
.af-bpl__row > .af-bpl__meal { flex: 1; min-width: 0; margin-bottom: 8px; border-radius: 16px; background: #1F1E21; border: 1px solid rgba(243, 239, 232, .05); }
.af-bpl__row > .af-bpl__meal.is-now { background: rgba(210, 176, 76, .08); border: 1.5px solid #D2B04C; }
.af-bpl__rail { width: 38px; flex: none; display: flex; flex-direction: column; align-items: center; }
.af-bpl__rail time { margin-top: 12px; font-size: 11.5px; font-weight: 700; color: #A8A29B; }
.af-bpl__rail i { width: 12px; height: 12px; border-radius: 6px; margin-top: 4px; background: rgba(243, 239, 232, .25); }
.af-bpl__rail i.is-all { background: #4E9A53; }
.af-bpl__rail i.is-part { background: #D2B04C; }
.af-bpl__rail i.is-now { background: #EBD58A; }
.af-bpl__rail::after { content: ""; flex: 1; width: 2px; margin-top: 2px; background: rgba(243, 239, 232, .1); }
.af-bpl__row:last-child .af-bpl__rail::after { display: none; }
.af-bpl__line .af-bpl__meal > summary { padding: 10px 12px; }
.af-bpl__line .af-bpl__meal ul { list-style: none; margin: 0; padding: 0 12px 6px; }
.af-bpl__line .af-bpl__meal li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid rgba(243, 239, 232, .07); }
.af-bpl__line .af-bpl__iname { flex: 1; display: grid; gap: 1px; }
.af-bpl__irow { display: flex; gap: 8px; font-size: 14.5px; }
.af-bpl__irow > span { flex: 1; }
.af-bpl__irow b { font-weight: 800; }
.af-bpl__rname { color: #EBD58A; font-weight: 600; text-decoration: none; }
.af-bpl__rlink { font-size: 12px; font-weight: 700; color: #EBD58A; text-decoration: none; }
.af-bpl__tick { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 7px; border: 1.5px solid rgba(243, 239, 232, .3); }
.af-bpl__tick.is-on { border: 0; background: #4E9A53 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.af-bpl__line .af-bpl__mnote { margin: 0 12px 10px; padding: 8px 10px; border-radius: 10px; background: rgba(243, 239, 232, .04); font-size: 12.5px; color: #C9C4BD; }
.af-bpl__fab { position: fixed; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 40; }
.af-bpl__fab button.af-shopbtn { width: auto; display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 18px; border-radius: 25px; background: linear-gradient(90deg, #F1DE9C, #D2B04C); color: #141315; box-shadow: 0 10px 26px rgba(0, 0, 0, .5); }
.af-bpl__fab .af-planbtn__icon { width: auto; height: auto; background: none; font-size: 18px; }
.af-bpl__fab .af-shopbtn__sub, .af-bpl__fab .af-planbtn__text + svg, .af-bpl__fab .af-journal__chev { display: none; }
.af-bpl__fab .af-planbtn__text strong { font-size: 14.5px; font-weight: 800; color: #141315; }
.af-bpl { padding-bottom: 70px; }
.af-bpl ~ .af-tn-line--plan { margin-bottom: 84px; } /* 6.181: the floating "Lista de cumpărături" no longer covers the note under the plan. */
@media (min-width: 900px) { .af-bpl__fab { right: max(24px, calc(50vw - 380px)); bottom: 32px; } }
.af-bpl__line .af-bpl__meal .af-pv__recipe { width: auto; height: auto; display: inline; background: none; border-radius: 0; }

/* 6.164: "Cum funcționează" (howto.php), as in the apps. */
.af-howto { display: flex; justify-content: flex-end; margin: -4px 0 6px; }
.af-howto__i { width: 34px; height: 34px; border-radius: 17px; border: 1px solid rgba(243, 239, 232, .18); background: transparent; color: #EBD58A; font: 800 16px/1 inherit; cursor: pointer; }
.af-howto__dlg { box-sizing: border-box; max-width: 440px; width: calc(100% - 32px); border: 0; border-radius: 20px; background: #1F1E21; color: #F3EFE8; padding: 18px; }
.af-howto__dlg::backdrop { background: rgba(0, 0, 0, .65); }
.af-howto__t { margin: 0 0 12px; font-size: 19px; font-weight: 800; }
.af-howto__dlg ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: s; }
.af-howto__dlg li { display: flex; gap: 12px; align-items: flex-start; counter-increment: s; }
.af-howto__dlg li > span { flex: none; width: 36px; height: 36px; border-radius: 18px; display: grid; place-items: center; background: rgba(210, 176, 76, .14); font-size: 18px; }
.af-howto__dlg li p { margin: 6px 0 0; font-size: 15px; line-height: 1.4; }
.af-howto__dlg li p::before { content: counter(s) ". "; font-weight: 800; color: #EBD58A; }
.af-howto__tip { margin: 14px 0 4px; font-size: 13.5px; color: #A8A29B; }

/* 6.164: her profile picture (avatar-site.php), as in the apps. */
.af-avatar-link img, .af-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.af-avatar-link:has(img), .af-avatar:has(img) { padding: 0; overflow: hidden; }
.af-avedit { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.af-avedit__pic { position: relative; cursor: pointer; }
.af-avedit__pic i { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 11px; display: grid; place-items: center; background: #D2B04C; color: #141315; font-size: 12px; font-style: normal; box-shadow: 0 0 0 2px #141315; }
.af-avedit__pic:focus-within { outline: 2px solid #EBD58A; outline-offset: 2px; }
.af-avedit__rm { border: 0; background: none; color: #A8A29B; font: 600 11.5px inherit; cursor: pointer; padding: 2px; }
.af-sr { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* 6.165: Content → "Mesaje automate" (msg-texts.php). */
.af-msgs { display: grid; gap: 12px; }
.af-msgs__cats { display: flex; flex-wrap: wrap; gap: 6px; }
.af-msgs__cats a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(243, 239, 232, .14); color: #D8D3CC; text-decoration: none; font-size: 14px; font-weight: 600; }
.af-msgs__cats a b { font-size: 12px; color: #A8A29B; }
.af-msgs__cats a.is-on { background: #EBD58A; border-color: #EBD58A; color: #141315; }
.af-msgs__cats a.is-on b { color: #141315; }
.af-msgs__bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.af-msgs__plans { display: flex; flex-wrap: wrap; gap: 6px; }
.af-msgs__plans button { font: 600 13px inherit; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(243, 239, 232, .14); background: transparent; color: #D8D3CC; cursor: pointer; }
.af-msgs__plans button[aria-pressed="true"] { background: #F3EFE8; color: #141315; }
.af-msgs__q { flex: 1; min-width: 180px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(243, 239, 232, .14); background: #1F1E21; color: #F3EFE8; }
.af-msgs__it { display: grid; gap: 10px; }
.af-msgs__it.is-mine { border: 1px solid rgba(235, 213, 138, .45); }
.af-msgs__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.af-msgs__head strong { font-size: 16px; }
.af-msgs__tag { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; color: #A8A29B; }
.af-msgs__tag.is-elite { color: #EBD58A; } .af-msgs__tag.is-light { color: #7AA7FF; } .af-msgs__tag.is-free { color: #5CC296; } .af-msgs__tag.is-maint { color: #D9A8F0; }
.af-msgs__tag.is-mine { color: #141315; background: #EBD58A; border-color: #EBD58A; }
.af-msgs__when { margin: 0; font-size: 13px; color: #A8A29B; }
.af-msgs__f { display: grid; gap: 6px; }
.af-msgs__f > label, .af-msgs__orig label { font-size: 13px; font-weight: 700; color: #D8D3CC; }
.af-msgs__f textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(243, 239, 232, .14); background: #141315; color: #F3EFE8; font: 15px/1.45 inherit; resize: vertical; }
.af-msgs__orig { font-size: 13px; color: #A8A29B; }
.af-msgs__orig summary { cursor: pointer; }
.af-msgs__orig p { margin: 6px 0; padding: 8px 10px; border-radius: 10px; background: rgba(243, 239, 232, .04); }
.af-msgs__orig textarea { margin-bottom: 6px; }
.af-msgs__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.af-msgs__btns .af-btn { margin: 0; }

/* 6.165: "Maria îți răspunde personal în maximum 24 de ore" by the write box (chat.php). */
.af-wa__compose .af-wa__note { margin: 0 0 6px; text-align: center; font-size: 12px; line-height: 1.35; opacity: .8; }
.af-wa.is-kb .af-wa__note { display: none; }

/* ---------- 6.173: the login page and the sign-up page, apart ---------- */
.af-form input[type=tel] { width: 100%; box-sizing: border-box; padding: .7rem .85rem; font: inherit; font-size: 1rem; border: 1px solid var(--af-line, rgba(243, 239, 232, .14)); border-radius: 10px; background: var(--af-field-bg, #fff); color: var(--af-field-text, #141315); }
.af-auth-wrap--login { padding: 8px 0 24px; }
.af-auth--login { padding: 32px 26px 26px; border: 1px solid rgba(210, 176, 76, .22); }
.af-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 2px 0 14px; }
.af-auth__row .af-check { margin: 0 !important; font-size: 14px; }
.af-auth__row .af-auth__forgot { margin: 0; font-size: 14px; font-weight: 600; color: #EBD58A !important; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.af-auth__or { display: flex; align-items: center; gap: 12px; margin: 22px 0 10px !important; color: var(--af-muted, #A8A29B); font-size: 14px; }
.af-auth__or::before, .af-auth__or::after { content: ""; flex: 1; height: 1px; background: rgba(243, 239, 232, .12); }
.af-auth__join { min-height: 50px; display: flex !important; align-items: center; justify-content: center; font-weight: 700; }

.af-join { padding: 8px 0 32px; }
.af-join__grid { display: grid; gap: 22px; align-items: start; max-width: 1120px; margin: 0 auto; }
.af-join__side { color: #F3EFE8; }
.af-join__side .af-auth__brand { width: 84px; height: 84px; margin: 0 0 12px; }
.af-join__eyebrow { margin: 0 0 6px !important; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #EBD58A; }
.af-join__h { margin: 0 0 8px !important; font-size: clamp(28px, 4.2vw, 44px); line-height: 1.08; }
.af-join__have { margin: 0 0 18px !important; font-size: 15px; color: var(--af-muted, #A8A29B); }
.af-join__have a { color: #EBD58A; font-weight: 700; text-decoration: none; }
.af-join__lbl { margin: 0 0 10px !important; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(243, 239, 232, .62); }
.af-join__get { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.af-join__get li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(243, 239, 232, .05); border: 1px solid rgba(243, 239, 232, .08); font-size: 14px; line-height: 1.3; }
.af-join__get li span { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(210, 176, 76, .14); font-size: 15px; }
.af-join__get li:last-child { grid-column: 1 / -1; border-color: rgba(210, 176, 76, .4); background: rgba(210, 176, 76, .08); }
.af-join__next { display: none; }
.af-join__steps { list-style: none; counter-reset: af-step; margin: 0; padding: 0; display: grid; gap: 12px; }
.af-join__steps li { counter-increment: af-step; position: relative; padding-left: 40px; font-size: 15px; line-height: 1.45; color: rgba(243, 239, 232, .82); }
.af-join__steps li::before { content: counter(af-step); position: absolute; left: 0; top: -2px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid #D2B04C; color: #EBD58A; font-size: 13px; font-weight: 800; }
.af-join__form .af-box { margin: 0; }
.af-signup__grp { margin: 18px 0 10px !important; padding-top: 14px; border-top: 1px solid rgba(243, 239, 232, .1); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #EBD58A; }
.af-signup .af-signup__grp.is-first { margin-top: 0 !important; padding-top: 0; border-top: 0; }
.af-join .af-signup .af-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
.af-join__side .af-auth__logo { margin: 0 0 10px; }
.af-signup__inv { margin: 4px 0 14px; }
.af-signup__inv summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: #EBD58A; font-weight: 600; font-size: 15px; list-style: none; }
.af-signup__inv summary::-webkit-details-marker { display: none; }
.af-signup__inv[open] summary { margin-bottom: 4px; }
.af-signup__inv .af-ref-field label { display: none; }
.af-join__form .af-signup__alt { text-align: center; margin: 4px 0 0 !important; color: var(--af-muted, #A8A29B); }
.af-join__form .af-signup__alt a { color: #EBD58A; font-weight: 700; text-decoration: none; }
@media (max-width: 599px) {
	.af-join__side .af-auth__brand { width: 64px; height: 64px; margin-bottom: 8px; }
	.af-join__get { gap: 6px; }
	.af-join__get li { padding: 8px 10px; font-size: 13px; }
	.af-join__get li span { width: 26px; height: 26px; font-size: 13px; }
}
@media (min-width: 960px) {
	.af-join__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; }
	.af-join__side { position: sticky; top: 110px; padding-top: 12px; }
	.af-join__next { display: block; }
	.af-join__get { grid-template-columns: 1fr; }
	.af-join__get li:last-child { grid-column: auto; }
}

/* ---------- 6.176: "I ate something else" in the Journal (the food panel's ways) and "Say what you ate" ---------- */
.af-pj__ways { display: grid; gap: 8px; margin: 4px 0 10px; }
.af-pj__okcal { margin: 0; font-weight: 700; color: #8FA6C9; }
.af-pj__wl { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--af-muted, #A8A29B); }
.af-pj__wbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.af-pj__wbtns button { min-height: 44px; padding: 8px 10px; border: 1px solid rgba(243, 239, 232, .14); border-radius: 12px; background: rgba(243, 239, 232, .05); color: #F3EFE8; font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.af-pj__wbtns button[data-af-food="say"] { border-color: rgba(210, 176, 76, .5); background: rgba(210, 176, 76, .1); color: #EBD58A; }
.af-bh__fmode--4 { grid-template-columns: 1fr 1fr; }
.af-bh__fmode--4 button { font-size: 13.5px; }
.af-bh__saymsg, .af-bh__fmsg { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(157, 211, 168, .1); color: #9DD3A8; font-size: 14px; line-height: 1.4; }
.af-bh__saymsg { background: rgba(240, 149, 149, .1); color: #F0B4B4; }
.af-bh__fest { justify-self: start; align-self: center; font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 6px; background: rgba(239, 159, 39, .16); color: #EFB45F; }

/* 6.178: the food panel never wider than the phone (a row of chips that does not wrap made the whole panel wider,
   and the list after "Spune ce ai mâncat" was cut on the right). */
.af-bh__food .af-sheet__body, .af-bh__fcalc, .af-bh__fshort { grid-template-columns: minmax(0, 1fr); }
.af-bh__food .af-sheet__body > *, .af-bh__fcalc > *, .af-bh__fshort > * { min-width: 0; }
.af-bh__food.is-focus .af-bh__fadd, .af-bh__food.is-focus .af-bh__fmode { display: none; }
.af-bh__food.is-say { min-height: min(86vh, 760px); }
@media (min-width: 782px) { .af-bh__food.is-say { min-height: min(80vh, 760px); } }

/* 6.178: "Spune ce ai mâncat", redrawn: she says it → the search → the review. */
.af-say { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.af-say[hidden], .af-say [hidden] { display: none !important; }
.af-say__ask, .af-say__rev { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.af-say__ask > *, .af-say__rev > * { min-width: 0; }
.af-say__hero { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 18px; border: 1px solid rgba(235, 213, 138, .2); background: radial-gradient(130% 150% at 0% 0%, rgba(235, 213, 138, .15), rgba(235, 213, 138, 0) 62%), rgba(243, 239, 232, .03); }
.af-say__ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(145deg, #EBD58A, #B8933A); color: #1A1917; box-shadow: 0 6px 18px rgba(212, 178, 76, .22); }
.af-say h3.af-say__t, .af-say h3.af-say__rt { margin: 0; font-family: var(--wp--preset--font-family--caslon, Georgia, serif) !important; font-size: 22px !important; font-weight: 400 !important; line-height: 1.15; text-transform: none !important; letter-spacing: 0 !important; color: #F3EFE8; }
.af-say h3.af-say__rt { font-size: 21px !important; outline: none; }
.af-say__s { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: #C9C4BD; }
.af-say__steps { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.af-say__steps li { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 12px; line-height: 1.3; color: #A8A2AE; }
.af-say__steps b { position: relative; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(235, 213, 138, .5); background: #232226; color: #EBD58A; font-size: 12.5px; font-weight: 800; }
.af-say__steps li + li::before { content: ""; position: absolute; top: 13px; right: calc(50% + 13px); width: calc(100% - 20px); height: 1px; background: linear-gradient(90deg, rgba(235, 213, 138, .12), rgba(235, 213, 138, .5)); }
.af-say__box { position: relative; }
.af-say__box textarea { display: block; width: 100%; box-sizing: border-box; min-height: 116px; margin: 0; padding: 14px; border-radius: 16px; border: 1px solid rgba(243, 239, 232, .14); background: #141315; color: #F3EFE8; font: inherit; font-size: 16px; line-height: 1.5; resize: none; }
.af-say__box textarea::placeholder { color: rgba(243, 239, 232, .38); }
.af-say__box textarea:focus { outline: none; border-color: rgba(235, 213, 138, .7); box-shadow: 0 0 0 3px rgba(235, 213, 138, .14); }
/* 6.179: the voice button: gold, with a slow breath; listening, three rings go out and the wave moves (more while
   she speaks); the microphone turns into the stop square. Still with "reduce motion". */
.af-say__voice { display: grid; justify-items: center; gap: 10px; padding: 10px 0 2px; }
.af-say__mic { position: relative; display: grid; place-items: center; width: 84px; height: 84px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.af-say__core { position: relative; z-index: 1; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: radial-gradient(120% 120% at 30% 20%, #F6E7AE 0%, #E2C468 38%, #B8933A 100%); color: #1A1917; box-shadow: 0 10px 28px rgba(212, 178, 76, .32), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -6px 14px rgba(120, 88, 20, .35); transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; }
.af-say__mic:active .af-say__core { transform: scale(.94); }
.af-say__mic:focus-visible { outline: none; }
.af-say__mic:focus-visible .af-say__core { box-shadow: 0 0 0 3px #232226, 0 0 0 6px rgba(235, 213, 138, .8); }
.af-say__i-stop { display: none; }
.af-say__mic.is-on .af-say__i-mic { display: none; }
.af-say__mic.is-on .af-say__i-stop { display: grid; }
.af-say__ring { position: absolute; inset: 4px; border-radius: 50%; border: 1.5px solid rgba(235, 213, 138, .55); opacity: 0; pointer-events: none; }
.af-say__mic:not(.is-on) .af-say__ring:first-child { opacity: 1; animation: af-say-breathe 2.8s ease-in-out infinite; }
.af-say__mic.is-on .af-say__ring { animation: af-say-wave 2.1s cubic-bezier(.2, .6, .3, 1) infinite; }
.af-say__mic.is-on .af-say__ring:nth-child(2) { animation-delay: .7s; }
.af-say__mic.is-on .af-say__ring:nth-child(3) { animation-delay: 1.4s; }
.af-say__voice.is-speaking .af-say__ring { border-color: rgba(246, 231, 174, .9); }
.af-say__voice.is-speaking .af-say__core { box-shadow: 0 10px 34px rgba(235, 213, 138, .55), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -6px 14px rgba(120, 88, 20, .35); }
@keyframes af-say-breathe { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.08); opacity: .15; } }
@keyframes af-say-wave { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.75); opacity: 0; } }
.af-say__wave { display: flex; align-items: center; gap: 4px; height: 22px; opacity: 0; transition: opacity .2s; }
.af-say__voice.is-on .af-say__wave { opacity: 1; }
.af-say__wave i { display: block; width: 4px; height: 6px; border-radius: 2px; background: linear-gradient(#F6E7AE, #C9A544); }
.af-say__voice.is-on .af-say__wave i { animation: af-say-bar 1s ease-in-out infinite; }
.af-say__wave i:nth-child(2) { animation-delay: .12s; } .af-say__wave i:nth-child(3) { animation-delay: .24s; } .af-say__wave i:nth-child(4) { animation-delay: .36s; }
.af-say__wave i:nth-child(5) { animation-delay: .24s; } .af-say__wave i:nth-child(6) { animation-delay: .12s; } .af-say__wave i:nth-child(7) { animation-delay: 0s; }
.af-say__voice.is-speaking .af-say__wave i { animation-duration: .55s; }
@keyframes af-say-bar { 0%, 100% { height: 5px; } 50% { height: 20px; } }
.af-say__vl { margin: 0; min-height: 20px; font-size: 14px; font-weight: 700; color: #EBD58A; text-align: center; }
.af-say__voice.is-on .af-say__vl { color: #F3EFE8; }
.af-say__or { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8F8996; }
.af-say__or::before, .af-say__or::after { content: ""; flex: 1; height: 1px; background: rgba(243, 239, 232, .1); }
@media (prefers-reduced-motion: reduce) { .af-say__ring, .af-say__wave i { animation: none !important; } .af-say__mic.is-on .af-say__ring:first-child { opacity: .8; transform: scale(1.15); } .af-say__voice.is-on .af-say__wave i { height: 12px; } }
.af-say__ex { display: flex; align-items: center; gap: 6px; margin: 0 -16px; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent); }
.af-say__ex::-webkit-scrollbar { display: none; }
.af-say__ex span { flex: none; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8F8996; }
.af-say__ex button { flex: none; min-height: 34px; padding: 6px 12px; border: 1px dashed rgba(243, 239, 232, .22); border-radius: 999px; background: transparent; color: #D9D4CD; font: inherit; font-size: 13px; line-height: 1.25; white-space: nowrap; cursor: pointer; }
.af-say__tip { margin: 0; font-size: 13px; line-height: 1.45; color: #A8A2AE; }
.af-say .af-bh__sayok { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(243, 239, 232, .04); font-size: 12.5px; line-height: 1.5; color: #A8A2AE; }
.af-say .af-bh__saygo { margin: 2px 0 0; }
.af-say .af-bh__saycount { margin: -4px 0 0; text-align: center; font-size: 12.5px; color: #8F8996; }
.af-say .af-bh__saycount.is-full { color: #F0B4B4; }
/* The search: her words, while AI looks. */
.af-say__busy { display: grid; justify-items: center; gap: 6px; padding: 14px 0 4px; text-align: center; }
.af-say__orb { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 8px; border-radius: 50%; background: linear-gradient(145deg, #EBD58A, #B8933A); color: #1A1917; }
.af-say__orb::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; background: conic-gradient(rgba(235, 213, 138, 0), rgba(235, 213, 138, .9) 30%, rgba(235, 213, 138, 0) 32%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); animation: af-say-spin 1.1s linear infinite; }
@keyframes af-say-spin { to { transform: rotate(360deg); } }
.af-say__bt { margin: 0; font-size: 17px; font-weight: 700; color: #F3EFE8; }
.af-say__bs { margin: 0; max-width: 32ch; font-size: 13.5px; line-height: 1.45; color: #A8A2AE; }
.af-say__bq { width: 100%; box-sizing: border-box; margin: 10px 0 4px; padding: 10px 14px; border: 0; border-left: 2px solid rgba(235, 213, 138, .55); border-radius: 0 12px 12px 0; background: rgba(243, 239, 232, .04); font-size: 14px; font-style: italic; line-height: 1.45; color: #D9D4CD; text-align: left; overflow-wrap: anywhere; }
.af-say__sk { display: grid; gap: 8px; width: 100%; }
.af-say__sk i { display: block; height: 62px; border-radius: 16px; background: linear-gradient(90deg, rgba(243, 239, 232, .04) 0%, rgba(243, 239, 232, .1) 50%, rgba(243, 239, 232, .04) 100%); background-size: 200% 100%; animation: af-say-sh 1.3s ease-in-out infinite; }
.af-say__sk i:nth-child(2) { opacity: .7; }
.af-say__sk i:nth-child(3) { opacity: .45; }
@keyframes af-say-sh { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .af-say__orb::before, .af-say__sk i, .af-say .af-bh__saymic.is-on { animation: none; } }
/* The review: a card for each food, grams with − and +. */
.af-say__rh { display: flex; gap: 12px; align-items: flex-start; }
.af-say__ok { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(157, 211, 168, .16); color: #9DD3A8; }
.af-say__rs { margin: 3px 0 0; font-size: 13.5px; line-height: 1.4; color: #A8A2AE; }
.af-say__said { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 12px; background: rgba(243, 239, 232, .04); }
.af-say__said q { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-style: italic; color: #C9C4BD; }
.af-say__edit { flex: none; min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(235, 213, 138, .12); color: #EBD58A; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.af-say__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.af-say__it { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n d" "m q"; align-items: center; gap: 6px 10px; padding: 12px 12px 12px 14px; border-radius: 16px; border: 1px solid rgba(243, 239, 232, .07); background: rgba(243, 239, 232, .05); }
.af-say__n { grid-area: n; font-size: 15.5px; font-weight: 700; line-height: 1.3; color: #F3EFE8; overflow-wrap: anywhere; }
.af-say__del { grid-area: d; justify-self: end; display: grid; place-items: center; width: 34px; height: 34px; margin: -6px -4px -4px 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #8F8996; cursor: pointer; }
.af-say__m { grid-area: m; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; line-height: 1.35; color: #A8A2AE; }
.af-say__q { grid-area: q; display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid rgba(243, 239, 232, .1); border-radius: 999px; background: #141315; }
.af-say__q button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(243, 239, 232, .08); color: #F3EFE8; font: inherit; font-size: 19px; font-weight: 600; line-height: 1; cursor: pointer; }
.af-say__q label { display: flex; align-items: baseline; gap: 2px; padding: 0 2px; }
.af-say__q input { width: 46px; margin: 0; padding: 0; border: 0; background: transparent; color: #F3EFE8; font: inherit; font-size: 16px; font-weight: 700; text-align: right; -moz-appearance: textfield; appearance: textfield; }
.af-say__q input::-webkit-outer-spin-button, .af-say__q input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.af-say__q input:focus { outline: none; }
.af-say__q:focus-within { border-color: rgba(235, 213, 138, .6); }
.af-say__q label span { font-size: 13px; color: #A8A2AE; }
.af-say__more { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border: 1px dashed rgba(235, 213, 138, .4); border-radius: 14px; background: transparent; color: #EBD58A; font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.af-say__more span { font-size: 19px; line-height: 1; }
.af-say__legend { margin: 0; display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; line-height: 1.45; color: #A8A2AE; }
/* Save at the bottom of the panel, over what scrolls; after the review, with the total. */
.af-bh__ffoot { position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom, 0px)); z-index: 2; display: grid; gap: 8px; margin: 0 -16px calc(-24px - env(safe-area-inset-bottom, 0px)); padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to bottom, rgba(35, 34, 38, 0), #232226 16px); }
.af-bh__fsum { margin: 0; display: flex; align-items: baseline; gap: 8px; padding: 0 2px; color: #A8A2AE; }
.af-bh__fsum span { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.af-bh__fsum b { font-size: 19px; font-weight: 800; color: #EBD58A; }
.af-bh__fsum small { margin-left: auto; font-size: 13px; }

/* 6.185: her birthday — the card from Maria, the badge's window (Level and badges), Maria's preview (Content).
 * 6.186: black with gold art deco corners; Maria's picture whole (the frame takes its shape); on Home it waits in a
 * gift box in the sky (assets/bday.js), and shows in the page only without scripts. */
.af-bday { position: relative; display: grid; gap: 12px; justify-items: center; text-align: center; margin: 0 0 14px; padding: 34px 24px 28px; border-radius: 18px; background: radial-gradient(120% 80% at 50% 0%, #2A272C, #141316 62%); border: 1px solid #C9A54A; box-shadow: inset 0 0 0 6px #141316, inset 0 0 0 7px rgba(201, 165, 74, .45), 0 24px 60px rgba(0, 0, 0, .5); color: #F3EFE8; transition: opacity .3s; }
.af-bday.is-done { opacity: 0; }
.af-bday__deco { position: absolute; width: 46px; height: 46px; fill: none; stroke: #C9A54A; stroke-width: 1.2; pointer-events: none; }
.af-bday__deco circle { fill: #C9A54A; stroke: none; }
.af-bday__deco.is-tl { left: 12px; top: 12px; } .af-bday__deco.is-tr { right: 12px; top: 12px; transform: scaleX(-1); }
.af-bday__deco.is-bl { left: 12px; bottom: 12px; transform: scaleY(-1); } .af-bday__deco.is-br { right: 12px; bottom: 12px; transform: scale(-1, -1); }
.af-bday__eye { margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #D2B04C; }
.af-bday__pic { display: inline-block; max-width: 100%; line-height: 0; padding: 6px; border: 1px solid #C9A54A; background: #0F0E11; }
.af-bday__pic img { display: block; width: auto; height: auto; max-width: 100%; max-height: min(320px, 46vh); outline: 1px solid rgba(201, 165, 74, .35); outline-offset: -1px; }
.af-bday__pic.is-logo { border-radius: 50%; padding: 10px; }
.af-bday__pic.is-logo img { width: 128px; height: 128px; max-height: none; outline: 0; }
.af-bday .af-bday__hl { margin: 2px 0 0; font-family: var(--wp--preset--font-family--caslon, Georgia, serif); font-style: italic; font-weight: 400; font-size: 31px; line-height: 1.18; letter-spacing: 0; text-transform: none; color: #EBD58A; text-wrap: balance; }
.af-bday__t { background: linear-gradient(180deg, #FBEFC4, #D9BC62 55%, #A88430); -webkit-background-clip: text; background-clip: text; color: transparent; }
.af-bday__em { font-size: .78em; font-style: normal; }
.af-bday__msg { margin: 0; max-width: 34ch; font-family: var(--wp--preset--font-family--caslon, Georgia, serif); font-size: 16.5px; line-height: 1.55; color: #E8E2D6; overflow-wrap: anywhere; }
.af-bday__sig { margin: 0; font-family: var(--wp--preset--font-family--caslon, Georgia, serif); font-style: italic; font-size: 18px; line-height: 1.3; color: #EBD58A; }
.af-bday__badge { display: inline-flex; align-items: center; gap: 10px; margin: 2px 0 0; padding: 8px 16px 8px 8px; border-radius: 999px; background: rgba(210, 176, 76, .12); border: 1px solid rgba(210, 176, 76, .4); color: #EBD58A; font-size: 12px; font-weight: 600; line-height: 1.25; text-align: left; text-decoration: none; }
.af-bday__badge b { display: block; font-size: 14px; font-weight: 800; }
.af-bday__medal { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 17px; background: radial-gradient(circle at 35% 30%, #F6E7B0, #C9A54A 60%, #8E6C22); box-shadow: 0 0 0 3px rgba(210, 176, 76, .25); }
.af-bday__x { position: absolute; top: 16px; right: 16px; z-index: 2; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 18px; background: rgba(255, 255, 255, .08); color: #F3EFE8; font-size: 24px; line-height: 1; cursor: pointer; }
.af-bdayd { width: 100%; max-width: min(440px, calc(100vw - 32px)); padding: 0; border: 0; background: transparent; overflow: visible; }
.af-bdayd::backdrop { background: rgba(10, 9, 12, .78); }
.af-bdayd .af-bday { margin: 0; }
.af-bdayd form { margin: 12px 0 0; }
.af-lv__badge--bday { box-shadow: inset 0 0 0 1px rgba(235, 213, 138, .45); }
.af-lv__bdaybtn { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; }
.af-bdayc__plan { display: grid; gap: 12px; }
.af-bdayc__prev { max-width: 420px; pointer-events: none; }
.af-bdayc__tr summary { cursor: pointer; font-weight: 700; color: #C9C4BD; }

/* 6.186: the gift in the sky of Home, between sunrise and sunset, until she opens it. */
.af-bh > .af-gift.af-gift { position: absolute; z-index: 3; left: 50%; top: 0; width: 92px; height: 97px; margin: -48px 0 0 -46px; padding: 0; border: 0; border-radius: 26px; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.af-gift:focus-visible { outline: 2px solid #EBD58A; outline-offset: 2px; }
.af-gift svg, .af-giftfx__box svg { display: block; width: 100%; height: 100%; overflow: visible; }
.af-bh.has-gift .af-skychips { display: none; } /* The chips of that row come back once she has opened it. */
.af-gift .gp, .af-giftfx__box .gp { transform-box: fill-box; transform-origin: 50% 50%; }
.af-gift .gbox { transform-box: fill-box; transform-origin: 50% 100%; animation: af-gift-wiggle 7s ease-in-out infinite; }
.af-gift .bowl, .af-giftfx__box .bowl { transform-origin: 100% 80%; } .af-gift .bowr, .af-giftfx__box .bowr { transform-origin: 0% 80%; }
.af-gift .tagg, .af-giftfx__box .tagg { transform-origin: 85% 0%; }
.af-gift .float { animation: af-gift-float 4s ease-in-out infinite; }
.af-gift .halo { animation: af-gift-breathe 3.2s ease-in-out infinite; }
.af-gift .tagg { animation: af-gift-sway 4s ease-in-out infinite; }
.af-gift .sheen { animation: af-gift-sheen 5s ease-in-out infinite; }
.af-gift .sp { transform-box: fill-box; transform-origin: center; animation: af-gift-twinkle 2.4s ease-in-out infinite; }
.af-gift .sp:nth-of-type(2) { animation-delay: .6s; } .af-gift .sp:nth-of-type(3) { animation-delay: 1.2s; } .af-gift .sp:nth-of-type(4) { animation-delay: 1.8s; }
@keyframes af-gift-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes af-gift-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes af-gift-wiggle { 0%, 86%, 100% { transform: rotate(0deg); } 88% { transform: rotate(-5deg); } 90.5% { transform: rotate(4deg); } 93% { transform: rotate(-2.5deg); } 95.5% { transform: rotate(1.5deg); } }
@keyframes af-gift-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg); } }
@keyframes af-gift-sheen { 0%, 55% { transform: translateX(-90px); } 85%, 100% { transform: translateX(230px); } }
@keyframes af-gift-twinkle { 0%, 100% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1); } }
/* While it opens: the page dims, the box comes to the middle, light and confetti, then the card (a dialog) rises. */
.af-giftfx { position: fixed; inset: 0; z-index: 99990; pointer-events: none; }
.af-giftfx__veil { position: absolute; inset: 0; background: rgba(9, 8, 13, .7); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 0; }
.af-giftfx__box { position: absolute; left: 0; top: 0; width: 200px; height: 210px; margin: -105px 0 0 -100px; }
.af-giftfx__rays { position: absolute; left: 104px; top: 96px; width: 440px; height: 440px; margin: -220px 0 0 -220px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(246, 231, 176, .55) 0deg 6deg, rgba(246, 231, 176, 0) 6deg 22deg); -webkit-mask: radial-gradient(circle, #000 0 18%, transparent 68%); mask: radial-gradient(circle, #000 0 18%, transparent 68%); opacity: 0; }
.af-giftfx__burst { position: absolute; left: 104px; top: 96px; width: 170px; height: 170px; margin: -85px 0 0 -85px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 236, 170, .95), rgba(235, 213, 138, .35) 40%, transparent 70%); opacity: 0; }
.af-giftfx canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.af-giftd { width: 100%; max-width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; background: transparent; overflow: auto; scrollbar-width: none; }
.af-giftd::backdrop { background: transparent; }
.af-giftd .af-bday { margin: 0; }
@media (prefers-reduced-motion: reduce) {
	.af-bday { transition: none; }
	.af-gift *, .af-gift .gbox { animation: none !important; }
}
/* 6.185: "Which city are you from?", once on Home. */
.af-city-ask { display: grid; gap: 10px; margin-bottom: 14px; border: 1px solid rgba(235, 213, 138, .35); transition: opacity .3s; }
.af-city-ask.is-done { opacity: 0; }
.af-city-ask__t { margin: 0; font-size: 16px; font-weight: 800; color: #F3EFE8; }
.af-city-ask .af-hint { margin: 0; }
.af-city-ask__in { width: 100%; box-sizing: border-box; }
.af-city-ask__row { display: flex; gap: 10px; }
.af-city-ask__row .af-btn { flex: 1; }
@media (prefers-reduced-motion: reduce) { .af-city-ask { transition: none; } }

/* 6.199 (wave 4c): the e-mail address confirmed later (mail-confirm.php), the Turnstile box, "Nu primesc codul" on Maria's Today. */
.af-mc { margin: 0 0 1rem; padding: .9rem 1rem; border-radius: 16px; border: 1px solid rgba(230, 207, 124, .35); background: rgba(230, 207, 124, .07); }
.af-mc--strong { border-color: rgba(242, 167, 160, .6); background: rgba(242, 167, 160, .09); }
.af-mc__h { margin: 0; font-weight: 700; }
.af-mc__p { margin: .25rem 0 0; font-size: .92em; opacity: .85; }
.af-mc__a { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .4rem; }
.af-mc__a > details { flex: 1 1 100%; }
.af-mc__a > details:not([open]) { flex: 0 0 auto; }
.af-mc__d > summary { cursor: pointer; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.af-mc__d > summary::-webkit-details-marker { display: none; }
.af-mc__f { margin-top: .5rem; }
.af-mc-screen .af-mc__a, .af-mc-screen > details { margin-top: .6rem; }
.af-ts { margin: .8rem 0 .2rem; min-height: 65px; }
.af-codehelp__f, .af-codehelp__w { display: block; font-size: .88em; }
.af-codehelp__w { color: #c2410c; font-weight: 600; }
.af-ss__mail { margin-top: 1rem; }
/* 6.199: the screen after day 7: two real buttons, "Mai târziu" quiet under them; the code card's "send again" looks off while its minute runs. */
.af-mc-screen .af-mc__d--big > summary { list-style: none; text-decoration: none; justify-content: center; margin-top: .7rem; }
.af-mc-screen .af-mc__d--big > summary::-webkit-details-marker { display: none; }
.af-mc-screen .af-mc__d--big[open] > summary { margin-bottom: .6rem; }
.af-mc-screen .af-auth__alt { text-align: center; margin-top: 1rem; }
.af-mc-screen .af-auth__alt a { color: inherit; opacity: .7; }
.af-auth .af-btn:disabled, .af-auth .af-btn[disabled] { opacity: .45; cursor: not-allowed; }
/* 6.204: the Journal's extra meals (beside the plan): a row per meal, its ✕, "Add an extra meal". */
.af-xm__row .af-row__text { min-width: 0; }
.af-xm__row .af-row__text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-xm__row .af-jrow__val { flex: none; font-size: 14px; }
.af-xm__del { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(243, 239, 232, .06); color: #A8A2AE; cursor: pointer; font: inherit; }
.af-xm__del:disabled { opacity: .45; }
.af-xm__hint { margin: -4px 4px 16px; }
/* 6.204 (owner): the sleep is saved by "Note it", as the weight (it saved by itself after the last − / + tap). */
.af-hd__s .af-hd__sok:not(.af-dzw__ok) { display: block; width: 100%; margin-top: 6px; height: 32px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #F0DA92, #D2B04C); color: #1A1814; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.af-hd__s.is-busy .af-hd__sok { opacity: .55; }
.af-hd__s.is-dirty .af-hd__sv { color: #F3EFE8; }
/* 6.205: a group for each plan (Maria's views): the group's picture, the four groups as pills, the members' pictures. */
.af-wa__av.is-img { padding: 0; overflow: hidden; background: rgba(210, 176, 76, .18); }
.af-wa__av.is-img img, .af-gm__av img, .af-gpres__av img, .af-at__av img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.af-gm__av.has-img, .af-gpres__av.has-img, .af-at__av.has-img { overflow: visible; }
.af-gtabs { flex: none; display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; border-bottom: 1px solid var(--af-line, rgba(255, 255, 255, .08)); scrollbar-width: none; }
.af-gtabs::-webkit-scrollbar { display: none; }
.af-gtabs a { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 700; text-decoration: none; color: inherit; background: rgba(127, 127, 127, .14); }
.af-gtabs a.is-on { background: #D2B04C; color: #141315; }
.af-gtabs b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #E58FA0; color: #1A1814; font-size: 12px; line-height: 20px; text-align: center; }
.af-gset > summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.af-gset__form { display: grid; gap: 10px; margin-top: 8px; }
.af-gset__form .af-field { display: grid; gap: 4px; }
.af-gset__form .af-field span { font-size: 13px; color: var(--af-muted); }
.af-gset__form input[type=text] { width: 100%; box-sizing: border-box; min-height: 46px; padding: 10px 12px; border: 1px solid rgba(127, 127, 127, .3); border-radius: 12px; background: rgba(127, 127, 127, .12); color: inherit; font: inherit; font-size: 16px; }
.af-gset__pic { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.af-gset__pic img, .af-gset__pic > span { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: #3A2F14; font-size: 30px; flex: none; }
.af-gset__pic .af-btn { position: relative; cursor: pointer; }
.af-gset__rm { font-size: 14px; display: inline-flex; gap: 6px; align-items: center; }
.af-gset__lang > summary { cursor: pointer; font-size: 14px; color: var(--af-muted); min-height: 32px; display: flex; align-items: center; }

/* 6.220: a recipe in the plan is one row with its ingredients under it ("6 ingrediente ▾", then the "+ …" line):
   the Journal, Home's meal card, the Plan's day and the week (includes/plan-groups.php, almarfit_rg_ing_html()). */
.af-rg { flex-basis: 100%; min-width: 0; max-width: 620px; margin: 0 0 8px 36px; }
.af-hm .af-rg { margin-left: 38px; }
.af-bpl__iname .af-rg, .af-pv__items .af-rg { margin: 4px 0 0; }
.af-pv__items .af-rg { grid-column: 1 / -1; }
.af-rg > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px solid rgba(243, 239, 232, .16); border-radius: 999px; color: #C9C4BD; font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }
.af-rg > summary::-webkit-details-marker { display: none; }
.af-rg > summary::after { content: "▾"; font-size: 11px; transition: transform .15s; }
.af-rg[open] > summary::after { transform: rotate(180deg); }
.af-rg ul.af-rg__ing { list-style: none; margin: 6px 0 0; padding: 0; display: grid; }
.af-rg ul.af-rg__ing > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-height: 0; padding: 6px 0; border: 0; border-top: 1px solid rgba(243, 239, 232, .06); font-size: 14px; color: #E4DFD7; }
.af-rg ul.af-rg__ing > li:first-child { border-top: 0; }
.af-rg ul.af-rg__ing > li > span { flex: 1 1 9em; min-width: 0; }
.af-rg ul.af-rg__ing > li > small { flex: none; margin-left: auto; color: var(--af-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right; }
/* Her ticks, read only (the Journal and Home tick the ingredients with the recipe's own row): ✓ eaten, ○ left out. */
.af-rg ul.af-rg__ing > li.is-on::before, .af-rg ul.af-rg__ing > li.is-off::before { content: ""; flex: none; align-self: flex-start; box-sizing: border-box; width: 16px; height: 16px; margin-top: 1px; border: 1.5px solid rgba(243, 239, 232, .28); border-radius: 50%; }
.af-rg ul.af-rg__ing > li.is-on::before { content: "✓"; border: 0; background: #4E9A53; color: #fff; font-size: 10px; font-weight: 900; line-height: 16px; text-align: center; }
.af-rg ul.af-rg__ing > li.is-off > span { color: #A8A2AE; }
.af-rg__plus { margin: 6px 0 0; color: var(--af-muted); font-size: 12.5px; line-height: 1.4; }
.af-rg__part { color: #E8C35A; font-size: 12px; font-weight: 700; }
.af-pj__rgrow.is-part > .af-pj__item .af-pj__box { border-color: #E8C35A; }
.af-pj__rgrow.is-part > .af-pj__item input:not(:checked) + .af-pj__box::after { content: "–"; color: #E8C35A; font-weight: 900; font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .af-rg > summary::after { transition: none; } }
/* 6.220, the Journal and Home: each ingredient's own tick under "N ingrediente ▾" (assets/plan-client.js keeps it with the recipe's). */
.af-rg--edit ul.af-rg__ing > li { padding: 0; }
.af-rg__tick { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-height: 40px; padding: 4px 0; cursor: pointer; }
.af-rg__tick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.af-rg__tick .af-pj__box { width: 20px; height: 20px; border-radius: 6px; }
.af-rg__tick input:checked + .af-pj__box { background: #D2B04C; border-color: #D2B04C; }
.af-rg__tick input:checked + .af-pj__box::after { content: "✓"; color: #141315; font-weight: 900; font-size: 12px; }
.af-rg__tick input:focus-visible + .af-pj__box { outline: 2px solid #EBD58A; outline-offset: 2px; }
.af-rg__tick > .af-rg__n { flex: 1 1 8em; min-width: 0; }
.af-rg__tick > small { flex: none; margin-left: auto; color: var(--af-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right; }
.af-jday.is-locked .af-rg__tick { pointer-events: none; }
@media (pointer: coarse) { .af-rg > summary, .af-rg__tick { min-height: 44px; } }
/* "Vezi rețeta ›": a button for a Light recipe (it opens the sheet), a link for one of Maria's. */
button.af-rg__see { border: 0; font-family: inherit; line-height: inherit; cursor: pointer; }
button.af-bpl__rlink.af-rg__see { background: none; padding: 0; }
.af-bpl__iname .af-rg__see { display: inline-block; margin-top: 4px; }
/* The sheet: her quantities first, then the steps and what they are written for. */
.af-rsheet__mine { padding-left: 0; list-style: none; gap: 0; }
.af-rsheet__mine li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 6px 0; border-top: 1px solid rgba(243, 239, 232, .08); }
.af-rsheet__mine li:first-child { border-top: 0; }
.af-rsheet__mine li > span { flex: 1 1 9em; min-width: 0; }
.af-rsheet__mine li > small { margin-left: auto; color: var(--af-muted); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.af-rsheet__plus, .af-rsheet__for { margin: 2px 0 0; color: var(--af-muted); font-size: 13.5px; line-height: 1.45; }
.af-rsheet__for { margin: 0 0 4px; }
.af-rsheet__whole { margin-top: 12px; }
.af-rsheet__whole > summary { min-height: 40px; display: flex; align-items: center; color: #C9C4BD; font-size: 14px; font-weight: 600; cursor: pointer; }
.af-rsheet__whole .af-rsheet__ing { margin-top: 4px; }