/* Inzenzo Community — component styles. Colours follow the active block theme (theme.json presets). */
.olfx-block, .olfx-wrap {
	--olfx-accent: var(--wp--preset--color--accent, #2650b8);
	--olfx-accent-ink: var(--wp--preset--color--accent-contrast, #fff);
	--olfx-ink: var(--wp--preset--color--contrast, #1f2328);
	--olfx-muted: var(--wp--preset--color--muted, #5d646d);
	--olfx-surface: var(--wp--preset--color--base, #fff);
	--olfx-bg: var(--wp--preset--color--fill, #f4f5f7);
	--olfx-line: var(--wp--preset--color--line, #e2e5e9);
	--olfx-danger: #a6362e;
	--olfx-radius: var(--wp--custom--radius, 20px);
	--olfx-shadow: none;
	color: var(--olfx-ink);
}
.olfx-block *, .olfx-wrap * { box-sizing: border-box; }
.olfx-muted { color: var(--olfx-muted); font-size: .9em; }
.olfx-heading { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); margin: 0 0 1rem; }
.olfx-heading--sub { font-size: 1.3rem; margin-top: 2rem; }
.screen-reader-text { border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal; }
.olfx-avatar { border-radius: 50%; object-fit: cover; display: block; background: var(--olfx-line); }

/* Buttons: clean pills in the Google / Material 3 spirit. Filled = main action, outlined = secondary. */
.olfx-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 40px; padding: .5rem 1.4rem; border-radius: 999px; border: 1px solid transparent; background: var(--olfx-accent); color: var(--olfx-accent-ink); font: inherit; font-size: .95rem; font-weight: 500; letter-spacing: .01em; text-decoration: none; cursor: pointer; line-height: 1.2; box-shadow: none; transition: box-shadow .15s ease, background-color .15s ease, border-color .15s ease, filter .15s ease; }
.olfx-btn:hover { filter: none; background: color-mix(in srgb, var(--olfx-accent) 88%, #000); box-shadow: 0 1px 2px rgba(31, 35, 40, .3), 0 1px 3px 1px rgba(31, 35, 40, .15); }
.olfx-btn:hover, .olfx-btn:focus, .olfx-btn:active { color: var(--olfx-accent-ink); }
.olfx-btn--ghost:hover, .olfx-btn--ghost:focus, .olfx-btn--ghost:active { color: var(--olfx-accent); }
.olfx-btn--danger:hover, .olfx-btn--danger:focus { background: var(--olfx-danger); color: #fff; filter: brightness(.92); }
.olfx-btn:active { filter: brightness(.95); box-shadow: none; }
.olfx-btn--ghost { background: transparent; color: var(--olfx-accent); border-color: color-mix(in srgb, var(--olfx-ink) 18%, transparent); }
.olfx-btn--ghost:hover { filter: none; background: color-mix(in srgb, var(--olfx-accent) 8%, transparent); border-color: color-mix(in srgb, var(--olfx-accent) 40%, transparent); box-shadow: none; }
.olfx-btn--ghost:active { background: color-mix(in srgb, var(--olfx-accent) 14%, transparent); }
.olfx-btn--small { min-height: 36px; padding: .35rem 1.1rem; font-size: .9rem; }
.olfx-btn--block { width: 100%; }
.olfx-btn--danger { background: var(--olfx-danger); border-color: var(--olfx-danger); }
.olfx-btn[disabled], .olfx-action[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; filter: none; }
@media (pointer: coarse) { .olfx-btn { min-height: 44px; } .olfx-btn--small { min-height: 44px; } }
.olfx-link-button { background: none; border: 0; padding: .5rem 0; color: var(--olfx-accent); font: inherit; text-decoration: underline; cursor: pointer; min-height: 44px; }
:where(.olfx-block, .olfx-wrap) :focus-visible { outline: 3px solid color-mix(in srgb, var(--olfx-accent) 60%, transparent); outline-offset: 2px; }

/* Cards & notices */
.olfx-card { background: var(--olfx-surface); border: 1px solid var(--olfx-line); border-radius: var(--olfx-radius); box-shadow: var(--olfx-shadow); padding: 1.1rem 1.25rem; margin: 0 0 1rem; }
.olfx-panel { background: var(--olfx-surface); border: 1px solid var(--olfx-line); border-radius: var(--olfx-radius); padding: 1.25rem; }
.olfx-notice { padding: .75rem 1rem; border-radius: 10px; margin: 0 0 1rem; border: 1px solid var(--olfx-line); background: var(--olfx-bg); }
.olfx-notice--error { border-color: var(--olfx-danger); color: var(--olfx-danger); background: #fbefed; }
.olfx-notice--success { border-color: #3f7a4c; color: #2f5d3a; background: #f1f7f0; }
.olfx-empty { text-align: center; padding: 2rem 1rem; color: var(--olfx-muted); border: 1px dashed var(--olfx-line); border-radius: var(--olfx-radius); }
.olfx-badge, .olfx-chip { display: inline-block; padding: .15rem .6rem; border-radius: 999px; background: var(--olfx-bg); border: 1px solid var(--olfx-line); font-size: .8rem; }
.olfx-chip a { color: inherit; text-decoration: none; }
.olfx-chip--family { background: color-mix(in srgb, var(--olfx-accent) 14%, transparent); border-color: transparent; }
.olfx-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0; }

/* Composer + sort */
.olfx-composer { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.olfx-composer__prompt { flex: 1 1 200px; padding: .7rem 1rem; border-radius: 999px; background: var(--olfx-bg); color: var(--olfx-muted); text-decoration: none; }
.olfx-composer__guest { flex: 1 1 200px; margin: 0; }
.olfx-sort { display: flex; gap: .5rem; margin: 0 0 1rem; }
.olfx-sort a { padding: .4rem .9rem; border-radius: 999px; text-decoration: none; color: var(--olfx-muted); }
.olfx-sort a.is-active { background: var(--olfx-ink); color: var(--olfx-surface); }

/* Formula card */
.olfx-card__head { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.olfx-card__meta { display: flex; flex-direction: column; line-height: 1.25; flex: 1; }
.olfx-card__author { font-weight: 700; color: inherit; text-decoration: none; }
.olfx-card__meta time { color: var(--olfx-muted); font-size: .85rem; }
.olfx-card__title { font-size: 1.25rem; margin: .25rem 0 .5rem; }
.olfx-card__title a { color: inherit; text-decoration: none; }
.olfx-card__notes { color: var(--olfx-muted); margin: 0 0 .75rem; }
.olfx-card__actions { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; border-top: 1px solid var(--olfx-line); margin-top: .75rem; padding-top: .5rem; }
.olfx-action { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; padding: .25rem .75rem; border: 0; background: none; border-radius: 999px; font: inherit; color: var(--olfx-muted); cursor: pointer; text-decoration: none; }
.olfx-action:hover { background: var(--olfx-bg); color: var(--olfx-ink); }
.olfx-like.is-liked { color: #c2570c; }
.olfx-action--danger:hover { color: var(--olfx-danger); }
.olfx-view { margin-left: auto; }

/* Formula table */
.olfx-table-wrap { overflow-x: auto; border: 1px solid var(--olfx-line); border-radius: 10px; }
.olfx-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.olfx-table th, .olfx-table td { padding: .55rem .75rem; text-align: left; border-bottom: 1px solid var(--olfx-line); vertical-align: top; }
.olfx-table thead th { background: var(--olfx-bg); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--olfx-muted); }
.olfx-table .olfx-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.olfx-table tbody th { font-weight: 600; }
.olfx-table tbody th a { color: inherit; }
.olfx-table tfoot th, .olfx-table tfoot td { border-bottom: 0; background: var(--olfx-bg); }
@media (max-width: 600px) {
	.olfx-table th, .olfx-table td { padding: .5rem; }
}

/* Comments: social style. Main comments, replies one level below, a one-line box to write. */
.olfx-comments { margin-top: .5rem; }
.olfx-comments__list, .olfx-comment__replies { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.olfx-comments__list { margin-bottom: 1rem; }
.olfx-comment { display: flex; gap: .6rem; align-items: flex-start; min-width: 0; }
.olfx-comment > .olfx-avatar { flex: 0 0 auto; border-radius: 50%; }
.olfx-comment__main { flex: 1; min-width: 0; }
.olfx-comment__bubble { display: inline-block; max-width: 100%; box-sizing: border-box; background: var(--olfx-bg); border-radius: 18px; padding: .5rem .9rem .6rem; }
.olfx-comment__head, .olfx-comment__text { margin: 0; }
.olfx-comment__head { font-size: .92rem; }
.olfx-comment__head a, .olfx-comment__head strong { font-weight: 700; color: inherit; text-decoration: none; }
.olfx-comment__head .olfx-muted { font-weight: 400; font-size: .85em; }
.olfx-comment__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.olfx-comment__mention { font-weight: 600; color: var(--olfx-accent); }
.olfx-comment__actions { display: flex; flex-wrap: wrap; gap: .1rem .9rem; margin: .15rem 0 0 .9rem; }
.olfx-comment__action { background: none; border: 0; padding: .35rem 0; min-height: 32px; font: inherit; font-size: .85rem; font-weight: 600; color: var(--olfx-muted); cursor: pointer; }
.olfx-comment__action:hover, .olfx-comment__action:focus-visible { color: var(--olfx-ink); text-decoration: underline; }
.olfx-comment__replies { margin-top: .6rem; padding-left: .25rem; border-left: 2px solid var(--olfx-line); padding-inline-start: .75rem; margin-inline-start: .2rem; }
.olfx-comment__replies:empty { display: none; }
.olfx-comment--reply .olfx-comment__bubble { padding: .4rem .8rem .5rem; }
.olfx-comment__replyform { display: block; }
.olfx-comments__empty { list-style: none; }
.olfx-comments__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; }
.olfx-comments__form > .olfx-avatar { flex: 0 0 auto; border-radius: 50%; }
.olfx-comments__form textarea { flex: 1 1 10rem; min-width: 0; resize: none; overflow-y: auto; max-height: 200px; min-height: 40px; padding: .55rem .95rem; border: 1px solid var(--olfx-line); border-radius: 20px; background: var(--olfx-bg); color: inherit; font: inherit; line-height: 1.4; }
.olfx-comments__form textarea:focus { outline: 2px solid var(--olfx-accent); outline-offset: 1px; background: var(--olfx-surface); }
.olfx-comments__form .olfx-form-msg { flex: 1 0 100%; }
.olfx-comments__form--reply { margin-top: .1rem; }
.olfx-comments__signin { margin: 0; }
.olfx-comments-block { margin-top: 1rem; }
.olfx-comments-block .olfx-comments { margin-top: 0; }
.olfx-form-msg { margin: 0; min-height: 1.2em; color: var(--olfx-danger); font-size: .9rem; }
.olfx-form-msg.is-ok { color: #2f5d3a; }

/* Forms */
.olfx-form .olfx-field { margin: 0 0 1rem; display: grid; gap: .3rem; }
.olfx-form label { font-weight: 600; }
.olfx-form input[type="text"], .olfx-form input[type="email"], .olfx-form input[type="password"], .olfx-form input[type="url"], .olfx-form input[type="search"], .olfx-form input[type="file"], .olfx-form textarea, .olfx-form select,
.olfx-filter input, .olfx-filter select { width: 100%; min-height: 44px; padding: .55rem .8rem; border: 1px solid var(--olfx-line); border-radius: 10px; background: var(--olfx-surface); color: inherit; font: inherit; }
.olfx-help { color: var(--olfx-muted); font-size: .85rem; font-weight: 400; }
.olfx-check label { display: flex; gap: .5rem; align-items: center; font-weight: 400; min-height: 44px; }
.olfx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.olfx-auth { max-width: 460px; margin-inline: auto; }
.olfx-auth__title { margin-top: 0; }
.olfx-auth__links { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .9rem; }
.olfx-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.olfx-filter input[type="search"] { flex: 2 1 220px; width: auto; }
.olfx-filter select { flex: 1 1 150px; width: auto; }

/* Creator */
.olfx-lines { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.olfx-lines legend { font-weight: 700; margin-bottom: .5rem; padding: 0; }
.olfx-lines__head, .olfx-row { display: grid; grid-template-columns: minmax(180px, 3fr) 1fr minmax(150px, 2fr) 1fr 44px; gap: .5rem; align-items: start; }
.olfx-lines__head { font-size: .8rem; text-transform: uppercase; color: var(--olfx-muted); padding: 0 .25rem; }
.olfx-row { padding: .4rem 0; border-bottom: 1px dashed var(--olfx-line); }
.olfx-row.has-error input, .olfx-row.has-error select { border-color: var(--olfx-danger); }
.olfx-row input, .olfx-row select { width: 100%; min-height: 44px; padding: .5rem .6rem; border: 1px solid var(--olfx-line); border-radius: 10px; font: inherit; background: var(--olfx-surface); color: inherit; }
.olfx-row select:disabled { background: var(--olfx-bg); color: var(--olfx-muted); }
.olfx-cell { position: relative; }
.olfx-cell__label { border: 0; clip: rect(1px,1px,1px,1px); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.olfx-row__remove { min-height: 44px; border: 1px solid var(--olfx-line); border-radius: 10px; background: none; font-size: 1.3rem; cursor: pointer; color: var(--olfx-muted); }
.olfx-row__err { grid-column: 1 / -1; margin: 0; color: var(--olfx-danger); font-size: .85rem; }
.olfx-row__err:empty { display: none; }
.olfx-suggest { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: .25rem; list-style: none; background: var(--olfx-surface); border: 1px solid var(--olfx-line); border-radius: 10px; box-shadow: var(--olfx-shadow); max-height: 260px; overflow: auto; }
.olfx-suggest li { padding: .5rem .6rem; border-radius: 8px; cursor: pointer; }
.olfx-suggest li.is-active, .olfx-suggest li:hover { background: var(--olfx-bg); }
.olfx-suggest__empty { color: var(--olfx-muted); cursor: default !important; }
.olfx-lines__total { font-size: 1.15rem; text-align: right; margin: .75rem 0 .25rem; }
@media (max-width: 720px) {
	.olfx-lines__head { display: none; }
	.olfx-row { grid-template-columns: 1fr 1fr; padding: .75rem; border: 1px solid var(--olfx-line); border-radius: 12px; margin-bottom: .6rem; }
	.olfx-cell--ing { grid-column: 1 / -1; }
	.olfx-row .olfx-cell:nth-child(3) { grid-column: 1 / -1; }
	.olfx-cell__label { position: static; clip: auto; height: auto; width: auto; margin: 0 0 .2rem; overflow: visible; display: block; font-size: .8rem; color: var(--olfx-muted); }
	.olfx-row__remove { grid-column: 1 / -1; }
}

/* Members / profile */
.olfx-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.olfx-member-card, .olfx-ingredient-card { background: var(--olfx-surface); border: 1px solid var(--olfx-line); border-radius: var(--olfx-radius); padding: 1rem; text-align: center; }
.olfx-member-card__link { display: grid; justify-items: center; gap: .5rem; color: inherit; text-decoration: none; }
.olfx-ingredient-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.olfx-ingredient-card { text-align: left; }
.olfx-ingredient-card h3 { margin: 0 0 .25rem; font-size: 1.1rem; }
.olfx-ingredient-card h3 a { color: inherit; text-decoration: none; }
.olfx-profile__head { background: var(--olfx-surface); border: 1px solid var(--olfx-line); border-radius: var(--olfx-radius); overflow: hidden; margin-bottom: 1rem; }
.olfx-profile__cover { height: 120px; background: linear-gradient(120deg, color-mix(in srgb, var(--olfx-accent) 70%, #000), color-mix(in srgb, var(--olfx-accent) 30%, #fff)); }
.olfx-profile__body { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; padding: 0 1.25rem 1rem; margin-top: -48px; }
.olfx-profile__avatar .olfx-avatar { width: 120px; height: 120px; border: 4px solid var(--olfx-surface); }
.olfx-profile__id { flex: 1 1 240px; padding-top: 52px; }
.olfx-profile__name { margin: 0; font-size: 1.6rem; }
.olfx-stats { display: flex; gap: 1rem; flex-wrap: wrap; list-style: none; padding: 0; margin: .5rem 0 0; color: var(--olfx-muted); }
.olfx-stats strong { color: var(--olfx-ink); }
.olfx-profile__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.olfx-tabs, .olfx-settings__nav { display: flex; gap: .25rem; overflow-x: auto; border-top: 1px solid var(--olfx-line); padding: 0 .75rem; }
.olfx-tabs a, .olfx-settings__nav a { padding: .85rem 1rem; text-decoration: none; color: var(--olfx-muted); white-space: nowrap; border-bottom: 3px solid transparent; min-height: 44px; }
.olfx-tabs a.is-active, .olfx-settings__nav a.is-active { color: var(--olfx-ink); border-bottom-color: var(--olfx-accent); font-weight: 700; }
.olfx-settings__layout { display: grid; gap: 1rem; grid-template-columns: 220px 1fr; align-items: start; }
.olfx-settings__nav { flex-direction: column; border: 1px solid var(--olfx-line); border-radius: var(--olfx-radius); background: var(--olfx-surface); padding: .5rem; overflow: visible; }
.olfx-settings__nav a { border: 0; border-radius: 10px; }
.olfx-settings__nav a.is-active { background: var(--olfx-bg); }
.olfx-photo { margin-bottom: 1rem; }
@media (max-width: 720px) {
	.olfx-settings__layout { grid-template-columns: 1fr; }
	.olfx-settings__nav { flex-direction: row; overflow-x: auto; }
}
.olfx-pagination { display: flex; justify-content: center; gap: .35rem; margin: 1.5rem 0; flex-wrap: wrap; }
.olfx-pagination .page-numbers { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--olfx-line); border-radius: 10px; text-decoration: none; color: inherit; padding: 0 .6rem; }
.olfx-pagination .current { background: var(--olfx-ink); color: var(--olfx-surface); }

/* Ingredient spec list */
.olfx-specs { margin: 0; }
.olfx-specs__row { display: grid; grid-template-columns: minmax(130px, 220px) 1fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--olfx-line); }
.olfx-specs__row:last-child { border-bottom: 0; }
.olfx-specs dt { font-weight: 700; color: var(--olfx-muted); }
.olfx-specs dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .olfx-specs__row { grid-template-columns: 1fr; gap: .15rem; } }

/* User menu (header) */
.olfx-usermenu-guest { display: flex; gap: .5rem; align-items: center; }
.olfx-usermenu__toggle { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; min-width: 44px; min-height: 44px; border-radius: 999px; padding: 0; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.olfx-usermenu__toggle .olfx-avatar { width: 36px; height: 36px; }
@media (max-width: 600px) { .olfx-usermenu__name { display: none; } }

@media (prefers-reduced-motion: reduce) { .olfx-block *, .olfx-wrap * { transition: none !important; scroll-behavior: auto !important; } }

/* Email verification */
.olfx-resend { margin-top: 1rem; border-top: 1px solid var(--olfx-line); padding-top: .75rem; }
.olfx-resend summary { cursor: pointer; color: var(--olfx-accent); min-height: 44px; display: flex; align-items: center; }
.olfx-resend form { margin-top: .5rem; }

/* Ingredient search bar (home page) */
.olfx-search { width: 100%; }
.olfx-search__form { margin: 0; }
.olfx-search__box { position: relative; }
.olfx-search__icon { position: absolute; left: 1.15rem; top: 50%; transform: translateY(-50%); color: var(--olfx-muted); pointer-events: none; }
.olfx-search__input { width: 100%; height: 58px; padding: 0 1.4rem 0 3.4rem; font: inherit; font-size: 1.1rem; color: inherit; background: var(--olfx-surface); border: 1px solid var(--olfx-line); border-radius: 999px; box-shadow: var(--olfx-shadow); transition: box-shadow .15s ease, border-color .15s ease; -webkit-appearance: none; appearance: none; }
.olfx-search__input::-webkit-search-cancel-button { cursor: pointer; }
.olfx-search__input:hover { box-shadow: 0 2px 8px rgba(20, 15, 25, .12); }
.olfx-search__input:focus { outline: none; border-color: var(--olfx-accent); box-shadow: 0 2px 12px rgba(20, 15, 25, .16); }
.olfx-search__box:has(.olfx-search__list:not([hidden])) .olfx-search__input { border-radius: 28px 28px 0 0; }
.olfx-search__list { top: calc(100% - 1px); margin: 0; padding: .35rem; border-radius: 0 0 28px 28px; text-align: left; max-height: 320px; box-shadow: 0 8px 18px rgba(20, 15, 25, .14); }
.olfx-search__list li { padding: .65rem 1rem; }
.olfx-search__trend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem .6rem; margin: 1.5rem 0 0; }
.olfx-search__trend-label { margin: 0; font-size: .875rem; color: var(--olfx-muted); }
.olfx-search__trend-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.olfx-search__trend-list li { margin: 0; }
.olfx-trendchip { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: .35rem .95rem; border: 1px solid var(--olfx-line); border-radius: 999px; background: var(--olfx-surface); color: var(--olfx-ink); text-decoration: none; font-size: .9rem; font-weight: 500; transition: background-color .15s ease, border-color .15s ease; }
.olfx-trendchip:hover { background: var(--olfx-bg); border-color: color-mix(in srgb, var(--olfx-ink) 25%, transparent); color: var(--olfx-ink); }
.olfx-trendchip:focus-visible { outline: 2px solid var(--olfx-accent); outline-offset: 2px; }
.olfx-trendchip__dot { width: .6rem; height: .6rem; border-radius: 50%; flex: 0 0 auto; }
@media (max-width: 600px) { .olfx-search__input { height: 54px; font-size: 1rem; } }

/* Formula directory */
.olfx-directory__actions { margin: 0 0 1rem; }
.olfx-formula-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.olfx-formula-grid > li { display: flex; }
.olfx-formula-tile { display: flex; flex-direction: column; width: 100%; background: var(--olfx-surface); border: 1px solid var(--olfx-line); border-radius: var(--olfx-radius); padding: 1rem 1.1rem; transition: box-shadow .15s ease; }
.olfx-formula-tile:hover { box-shadow: var(--olfx-shadow); }
.olfx-formula-tile__title { margin: 0 0 .25rem; font-size: 1.15rem; overflow-wrap: anywhere; }
.olfx-formula-tile__title a { color: inherit; text-decoration: none; }
.olfx-formula-tile__title a:hover { color: var(--olfx-accent); }
.olfx-formula-tile__meta { margin: .1rem 0 .75rem; }
.olfx-chip--more { background: transparent; color: var(--olfx-muted); }
.olfx-formula-tile__foot { display: flex; align-items: center; gap: .75rem; margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--olfx-line); font-size: .9rem; }
.olfx-formula-tile__author { display: flex; align-items: center; gap: .5rem; margin-right: auto; color: inherit; text-decoration: none; min-width: 0; }
.olfx-formula-tile__author .olfx-avatar { width: 28px; height: 28px; flex: none; }
.olfx-formula-tile__author span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.olfx-formula-tile__stat { color: var(--olfx-muted); white-space: nowrap; }

/* Tools hub */
.olfx-tool-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin: 1.25rem 0; }
.olfx-tool-card { display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; background: var(--olfx-surface); border: 1px solid var(--olfx-line); border-radius: var(--olfx-radius); padding: 1.25rem; }
.olfx-tool-card__icon { font-size: 2rem; line-height: 1; }
.olfx-tool-card__title { margin: .25rem 0 0; font-size: 1.2rem; }
.olfx-tool-card__title a { color: inherit; text-decoration: none; }
.olfx-tool-card .olfx-muted { margin: 0 0 .75rem; flex: 1; }
.olfx-tool__back { margin: 0 0 .5rem; }
.olfx-tool__lead { max-width: 60ch; margin-top: -.5rem; }

/* IFRA calculator */
.olfx-ifra h2 { margin-top: 0; font-size: 1.2rem; }
.olfx-ifra__how ol { margin: 0 0 .75rem; padding-left: 1.25rem; display: grid; gap: .4rem; }
.olfx-ifra__find summary { cursor: pointer; color: var(--olfx-accent); min-height: 44px; display: flex; align-items: center; }
.olfx-ifra__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1rem; align-items: start; }
@media (max-width: 860px) { .olfx-ifra__grid { grid-template-columns: 1fr; } }
.olfx-input-unit { position: relative; }
.olfx-input-unit input { width: 100%; padding-right: 2.4rem; }
.olfx-unit { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); color: var(--olfx-muted); pointer-events: none; }
.olfx-field-err { color: var(--olfx-danger); font-size: .85rem; min-height: 0; }
.olfx-field-err:empty { display: none; }
.olfx-ifra input[aria-invalid="true"] { border-color: var(--olfx-danger); }
.olfx-help em { color: var(--olfx-ink); font-style: normal; font-weight: 600; white-space: nowrap; }
.olfx-ifra__actions { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0; }
.olfx-ifra__status { display: flex; gap: .85rem; align-items: flex-start; padding: .9rem 1rem; border-radius: 12px; border: 1px solid; margin-bottom: .75rem; }
.olfx-ifra__status-text { display: grid; gap: .2rem; }
.olfx-ifra__status.is-pass { background: #f1f7f0; border-color: #3f7a4c; color: #2f5d3a; }
.olfx-ifra__status.is-caution { background: #fff6e5; border-color: #a8650c; color: #70480a; }
.olfx-ifra__status.is-fail { background: #fbefed; border-color: var(--olfx-danger); color: #86281f; }
.olfx-ifra__icon { flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; border: 2px solid currentColor; }
.olfx-meter { height: 10px; border-radius: 999px; background: var(--olfx-bg); border: 1px solid var(--olfx-line); overflow: hidden; margin: .25rem 0 .5rem; }
.olfx-meter__bar { height: 100%; border-radius: 999px; transition: width .25s ease; }
.olfx-meter__bar.is-pass { background: #3f7a4c; }
.olfx-meter__bar.is-caution { background: #e06a0c; }
.olfx-meter__bar.is-fail { background: var(--olfx-danger); }
.olfx-ifra__math { margin: 0 0 .75rem; overflow-wrap: anywhere; }
.olfx-ifra__rows { margin: 0 0 1rem; border: 1px solid var(--olfx-line); border-radius: 10px; }
.olfx-ifra__row { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .55rem .8rem; border-bottom: 1px solid var(--olfx-line); }
.olfx-ifra__row:last-child { border-bottom: 0; }
.olfx-ifra__row dt { color: var(--olfx-muted); }
.olfx-ifra__row dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.olfx-ifra__advice-title { margin: 0 0 .4rem; font-size: 1rem; }
.olfx-ifra__advice { margin: 0; padding-left: 1.2rem; display: grid; gap: .45rem; }
.olfx-ifra__note { margin-top: 1rem; max-width: 70ch; }
@media (prefers-reduced-motion: reduce) { .olfx-meter__bar { transition: none; } }

/* Long names (usernames, ingredient names, titles) wrap instead of pushing the page wider than the screen. */
.olfx-block, .olfx-wrap { min-width: 0; overflow-wrap: break-word; }
.olfx-card, .olfx-card__head > *, .olfx-card__meta, .olfx-profile__id, .olfx-composer__prompt, .olfx-member-card { min-width: 0; }
.olfx-card__author, .olfx-profile__name, .olfx-card__title, .olfx-member-card strong { overflow-wrap: anywhere; }

/* Visitor limit on the Feed: prompt to log in or create an account */
.olfx-gate { text-align: center; padding: 1.75rem 1.25rem; background: linear-gradient(180deg, color-mix(in srgb, var(--olfx-accent) 6%, var(--olfx-surface)), var(--olfx-surface)); }
.olfx-gate__title { margin: 0 0 .35rem; font-size: 1.25rem; }
.olfx-gate__text { margin: 0 auto 1rem; max-width: 46ch; color: var(--olfx-muted); }
.olfx-gate__actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin: 0; }

/* Header account menu: soft hover, rounded panel */
.olfx-usermenu__toggle:hover { background: color-mix(in srgb, var(--olfx-ink) 7%, transparent); }
.olfx-usermenu__toggle[aria-expanded="true"] { background: color-mix(in srgb, var(--olfx-accent) 12%, transparent); }
.olfx-private { max-width: 560px; }

/* IFRA calculator: ingredient list and "where did this limit come from" note */
.olfx-combo { position: relative; }
.olfx-combo input { width: 100%; }
.olfx-ifra__list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; }
.olfx-opt__title { font-weight: 600; }
.olfx-opt__chip { margin-left: auto; font-size: .75rem; white-space: nowrap; }
.olfx-chip--ok { background: #f1f7f0; color: #2f5d3a; border-color: #bcd6bf; }
.olfx-chip--warn { background: #fff6e5; color: #70480a; border-color: #ebd39b; }
.olfx-ifra__source { margin-top: .4rem; padding: .6rem .85rem; border-radius: 12px; border: 1px solid var(--olfx-line); background: var(--olfx-bg); font-size: .9rem; }
.olfx-ifra__source.is-restricted { border-color: #ebd39b; background: #fff9ef; }
.olfx-ifra__source.is-unrestricted { border-color: #bcd6bf; background: #f1f7f0; }
.olfx-ifra__source-text { margin: 0 0 .15rem; }
.olfx-ifra__source-actions { display: flex; flex-wrap: wrap; gap: .1rem 1rem; margin: 0; }
.olfx-ifra__source-actions .olfx-link-button, .olfx-ifra__source-actions a { min-height: 36px; display: inline-flex; align-items: center; font-size: .9rem; }
.olfx-ifra input:disabled { background: var(--olfx-bg); color: var(--olfx-muted); cursor: not-allowed; }

/* IFRA look-up: result tables (ingredient page, ingredient editor, calculator source note) */
.olfx-chip--bad { background: #fbefed; color: #86281f; border-color: #edc3be; }
.olfx-ifra-lookup__row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.olfx-ifra-lookup { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--olfx-line); }
.olfx-ifra-lookup[hidden] { display: none; }
.olfx-ifra-lookup__lead { margin: 0 0 .75rem; font-weight: 600; }
.olfx-ifra-lookup__empty { margin: 0; padding: .75rem 1rem; border-radius: 12px; background: var(--olfx-bg); border: 1px solid var(--olfx-line); }
.olfx-ifra-lookup__foot { margin: 1rem 0 0; max-width: 75ch; }
.olfx-ifra-std { margin: 0 0 1.5rem; }
.olfx-ifra-std__title { margin: 1rem 0 .15rem; font-size: 1.05rem; line-height: 1.3; }
.olfx-ifra-std__meta { margin: 0 0 .25rem; overflow-wrap: anywhere; }
.olfx-ifra-std__examples { margin: .25rem 0 .5rem; padding: .5rem .75rem; border-radius: 10px; background: #fff6e5; border: 1px solid #ebd39b; font-size: .9rem; }
.olfx-ifra-std__notes { margin-top: .75rem; font-size: .92rem; }
.olfx-ifra-std__notes summary { cursor: pointer; color: var(--olfx-accent); min-height: 40px; display: flex; align-items: center; }
.olfx-ifra-std__notes p { margin: .4rem 0; white-space: pre-line; overflow-wrap: anywhere; }
.olfx-ifra-table-wrap { margin-top: .5rem; border: 1px solid var(--olfx-line); border-radius: 12px; overflow: hidden; }
.olfx-ifra-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.olfx-ifra-table th, .olfx-ifra-table td { padding: .55rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--olfx-line); }
.olfx-ifra-table thead th { background: var(--olfx-bg); font-size: .8rem; text-transform: none; letter-spacing: .01em; color: var(--olfx-muted); font-weight: 600; }
.olfx-ifra-table tbody tr:last-child th, .olfx-ifra-table tbody tr:last-child td { border-bottom: 0; }
.olfx-ifra-table__cat { font-weight: 400; width: 52%; }
.olfx-ifra-table__code { display: block; font-weight: 700; }
.olfx-ifra-table__label { display: block; font-size: .82rem; }
.olfx-ifra-table__limit { font-variant-numeric: tabular-nums; }
.olfx-ifra-table__note, .olfx-ifra-table__also { display: block; font-size: .82rem; }
.olfx-ifra-admin .olfx-ifra-table-wrap { max-width: 720px; }
@media (max-width: 560px) { .olfx-ifra-table th, .olfx-ifra-table td { padding: .5rem .6rem; } .olfx-ifra-table__cat { width: 46%; } }

/* IFRA calculator: category, grouped suggestions, source states */
.olfx-ifra select { width: 100%; }
.olfx-ifra input:disabled::placeholder { color: transparent; }
.olfx-suggest__group { padding: .4rem .6rem .15rem !important; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--olfx-muted); cursor: default !important; }
.olfx-suggest__group:hover { background: transparent !important; }
.olfx-ifra__source.is-limit { border-color: #bcd6bf; background: #f1f7f0; }
.olfx-ifra__source.is-prohibited { border-color: #edc3be; background: #fbefed; }
.olfx-ifra__source.is-free { border-color: #bcd6bf; background: #f1f7f0; }
.olfx-ifra__source.is-notes, .olfx-ifra__source.is-manual { border-color: #ebd39b; background: #fff9ef; }
.olfx-ifra__notes { margin: .4rem 0; font-size: .88rem; }
.olfx-ifra__notes summary { cursor: pointer; color: var(--olfx-accent); min-height: 36px; display: flex; align-items: center; }
.olfx-ifra__notes-text { margin: .35rem 0; white-space: pre-line; overflow-wrap: anywhere; max-height: 14rem; overflow: auto; }

/* ---------- Left sidebar navigation (olfx/side-nav) ---------- */
.olfx-sidenav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.olfx-sidenav li { margin: 0; }
.olfx-sidenav a { display: flex; align-items: center; gap: .9rem; padding: .7rem 1rem; border-radius: 999px; color: var(--olfx-ink); text-decoration: none; font-size: 1.08rem; line-height: 1.2; transition: background .12s ease; }
.olfx-sidenav a:hover { background: color-mix(in srgb, var(--olfx-ink) 7%, transparent); }
.olfx-sidenav a:focus-visible { outline: 2px solid var(--olfx-accent); outline-offset: 2px; }
.olfx-sidenav a.is-active { font-weight: 700; background: color-mix(in srgb, var(--olfx-accent) 12%, transparent); color: var(--olfx-accent); }
.olfx-sidenav__icon { flex: 0 0 auto; }
.olfx-sidenav__logout { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--olfx-line); }
.olfx-sidenav__me { display: flex; align-items: center; gap: .7rem; margin-top: 1.25rem; padding: .6rem .75rem; border-radius: 999px; color: var(--olfx-ink); text-decoration: none; }
.olfx-sidenav__me:hover { background: color-mix(in srgb, var(--olfx-ink) 7%, transparent); }
.olfx-sidenav__me span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.olfx-sidenav__me strong, .olfx-sidenav__me small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.olfx-sidenav__me small { color: var(--olfx-muted); }
/* Phones and tablets: the account links live in the avatar drawer and the bottom tab bar, so the left menu is not repeated above the feed.
   The Notes page shows its own row of feed filters instead (.olfx-filters). */
@media (max-width: 899px) {
	.olfx-sidenav-wrap { display: none; }
}
.olfx-filters { display: none; }
@media (max-width: 899px) {
	.olfx-filters { display: flex; gap: .4rem; overflow-x: auto; margin: 0 0 1rem; padding-bottom: .4rem; scrollbar-width: none; }
	.olfx-filters::-webkit-scrollbar { display: none; }
	.olfx-filters a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: .5rem .95rem; border-radius: 999px; border: 1px solid var(--olfx-line); background: var(--olfx-surface); color: var(--olfx-ink); text-decoration: none; font-size: .95rem; }
	.olfx-filters a.is-active { border-color: var(--olfx-accent); background: color-mix(in srgb, var(--olfx-accent) 12%, transparent); color: var(--olfx-accent); font-weight: 700; }
	.olfx-filters a:focus-visible { outline: 2px solid var(--olfx-accent); outline-offset: 2px; }
}

/* Desktop: the first icon lines up with the logo above (the hover pill reaches into the page margin). */
@media (min-width: 900px) { .olfx-sidenav ul { margin-inline-start: -1rem; } .olfx-sidenav__me { margin-inline-start: -.25rem; } }

/* ---------- Trending ingredients (right sidebar) ---------- */
.olfx-trend { background: var(--olfx-surface); border: 1px solid var(--olfx-line); border-radius: var(--olfx-radius); padding: 1rem .5rem .5rem; box-shadow: var(--olfx-shadow); }
.olfx-trend__title { margin: 0 0 .35rem; padding: 0 .75rem; font-size: 1.15rem; line-height: 1.3; }
.olfx-trend__list { list-style: none; margin: 0; padding: 0; }
.olfx-trend__list a { display: flex; gap: .85rem; align-items: center; padding: .6rem .75rem; border-radius: 12px; color: var(--olfx-ink); text-decoration: none; }
.olfx-trend__list a:hover { background: color-mix(in srgb, var(--olfx-ink) 6%, transparent); }
.olfx-trend__pic { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--olfx-accent) 14%, var(--olfx-surface)); color: var(--olfx-accent); font-weight: 700; font-size: 1.2rem; border: 1px solid var(--olfx-line); }
.olfx-trend__pic img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.olfx-fambadge { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--olfx-fam, #9aa1a9); color: #fff; }
.olfx-trend__body { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.olfx-trend__body strong { overflow-wrap: anywhere; }
.olfx-trend__body small { color: var(--olfx-muted); }

/* ---------- Explore ingredients (right sidebar): exactly the look of a left-menu item (dark text and icon) ---------- */
.olfx-searchbtn .olfx-searchbtn__link, .olfx-searchbtn .olfx-searchbtn__link:hover, .olfx-searchbtn .olfx-searchbtn__link:focus, .olfx-searchbtn .olfx-searchbtn__link:active { text-decoration: none; color: var(--olfx-ink); }
.olfx-searchbtn .olfx-searchbtn__link { display: flex; align-items: center; justify-content: flex-start; gap: .9rem; padding: calc(.7rem - 1px) calc(1rem - 1px); border-radius: 999px; background: var(--olfx-surface); border: 1px solid color-mix(in srgb, var(--olfx-ink) 45%, transparent); font-size: 1.08rem; font-weight: 500; line-height: 1.2; text-align: left; transition: background .12s ease; }
.olfx-searchbtn .olfx-searchbtn__link:hover { background: color-mix(in srgb, var(--olfx-ink) 7%, var(--olfx-surface)); }
.olfx-searchbtn .olfx-searchbtn__link:focus-visible { outline: 2px solid var(--olfx-accent); outline-offset: 2px; }
.olfx-searchbtn .olfx-searchbtn__link svg { flex: 0 0 auto; width: 22px; height: 22px; stroke: currentColor; }

/* ---------- IFRA Lookup tool ---------- */
.olfx-ifra-tool__form label { display: block; font-weight: 600; margin-bottom: .4rem; }
.olfx-ifra-tool__row { display: flex; gap: .6rem; align-items: flex-start; }
.olfx-ifra-tool__box { position: relative; flex: 1 1 auto; min-width: 0; }
.olfx-ifra-tool__box input { width: 100%; height: 48px; padding: 0 1rem; font: inherit; font-size: 1.05rem; color: inherit; background: var(--olfx-surface); border: 1px solid var(--olfx-line); border-radius: 999px; }
.olfx-ifra-tool__box input:focus { outline: none; border-color: var(--olfx-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--olfx-accent) 22%, transparent); }
.olfx-ifra-tool__row .olfx-btn { height: 48px; flex: 0 0 auto; }
.olfx-ifra-tool__status { min-height: 1.5em; margin: .75rem 0 0; }
.olfx-ifra-tool .olfx-ifra-lookup { margin-top: .5rem; }
.olfx-ifra-summary { margin: 0 0 1.25rem; }
.olfx-ifra-summary__name { margin: -.25rem 0 .75rem; font-size: 1.05rem; }
.olfx-ifra-summary__list { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.25rem; margin: 0 0 1rem; }
.olfx-ifra-summary__list dt { color: var(--olfx-muted); }
.olfx-ifra-summary__list dd { margin: 0; font-weight: 600; }
.olfx-ifra-summary__list dd.is-bad { color: var(--olfx-danger); }
.olfx-ifra-summary__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.olfx-ifra-casrow { margin: .25rem 0 .75rem; }
.olfx-ifra-casbtn { cursor: pointer; font: inherit; font-size: .85rem; }
.olfx-ifra-casbtn:hover { border-color: var(--olfx-accent); }
@media (max-width: 560px) { .olfx-ifra-tool__row { flex-direction: column; } .olfx-ifra-tool__row .olfx-btn { width: 100%; } .olfx-ifra-summary__list { grid-template-columns: 1fr; gap: 0; } .olfx-ifra-summary__list dd { margin-bottom: .5rem; } }

/* Olfactive family colours and product type icons */
.olfx-famebar { height: 6px; border-radius: 999px; background: var(--olfx-fam, var(--olfx-line)); margin: 0 0 1rem; }
.olfx-with-icon { display: inline-flex; align-items: center; gap: .6rem; }
.olfx-ring, .olfx-ticon { flex: 0 0 1.75rem; width: 1.75rem; height: 1.75rem; border-radius: 50%; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
.olfx-ring { border: 4px solid var(--olfx-fam, var(--olfx-line)); background: color-mix(in srgb, var(--olfx-fam, #9aa1a9) 16%, var(--olfx-surface)); }
.olfx-ticon { border: 2px solid var(--olfx-line); background: var(--olfx-bg); color: var(--olfx-ink); }
.olfx-chip .olfx-ring { display: inline-block; flex: none; width: .75rem; height: .75rem; border-width: 2px; margin-right: .4rem; vertical-align: -1px; }

/* Evaluations */
.olfx-chart { display: block; width: 100%; max-width: 420px; height: auto; margin: .5rem 0; color: var(--olfx-accent); }
.olfx-chart__grid line { stroke: var(--olfx-line); stroke-width: 1; }
.olfx-chart__grid text, .olfx-chart__x text { font-size: 10px; fill: var(--olfx-muted); }
.olfx-chart__line { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.olfx-chart__dots circle { fill: var(--olfx-surface); stroke: currentColor; stroke-width: 2.5; }
.olfx-badge--live { background: color-mix(in srgb, var(--olfx-accent) 14%, transparent); border-color: transparent; color: var(--olfx-accent); }
.olfx-evals__head { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; justify-content: space-between; }
.olfx-evals__head .olfx-heading { margin: 2rem 0 0; }
.olfx-evals__sub { font-size: 1.05rem; font-weight: 600; margin: 1.5rem 0 .75rem; }
.olfx-evals__list { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.olfx-evalcard { text-align: left; }
.olfx-evalcard__kind { margin: .5rem 0 0; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--olfx-muted); }
.olfx-evalcard .olfx-card__title { margin-top: .15rem; }
.olfx-evalcard__foot { margin: .25rem 0 0; }
.olfx-guide-link { font-weight: 500; text-decoration: none; }
.olfx-evalteaser { display: grid; grid-template-columns: minmax(180px, 320px) 1fr; gap: 1.5rem; align-items: center; margin-top: 2rem; }
.olfx-evalteaser__art { position: relative; filter: blur(.4px); opacity: .85; }
.olfx-evalteaser__tag { position: absolute; top: .25rem; right: .25rem; }
.olfx-evalteaser__tag { font-size: .7rem; padding: .1rem .55rem; border-radius: 999px; background: var(--olfx-bg); border: 1px solid var(--olfx-line); color: var(--olfx-muted); }
@media (max-width: 640px) { .olfx-evalteaser { grid-template-columns: 1fr; } }

.olfx-evstart { max-width: 46rem; }
.olfx-evstart h2 { margin-top: 0; }
.olfx-evalsetup .olfx-field, .olfx-evform .olfx-evfield { margin: 0 0 1.1rem; }
.olfx-evalsetup label { font-weight: 600; display: block; margin-bottom: .3rem; }
.olfx-evalsetup input[type="text"], .olfx-evalsetup input[type="search"], .olfx-evalsetup select, .olfx-evform input[type="text"], .olfx-evform input[type="number"], .olfx-evform textarea { width: 100%; box-sizing: border-box; }
.olfx-evrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.olfx-evmore summary { cursor: pointer; color: var(--olfx-accent); margin-bottom: .75rem; }
.olfx-checklist { margin: 1rem 0; padding-left: 1.2rem; color: var(--olfx-muted); }
.olfx-evsuggest { list-style: none; margin: .25rem 0 0; padding: .25rem; border: 1px solid var(--olfx-line); border-radius: 12px; background: var(--olfx-surface); max-height: 15rem; overflow: auto; }
.olfx-evsuggest li { padding: .3rem .5rem; }
.olfx-evsuggest__item { display: flex; flex-direction: column; align-items: flex-start; width: 100%; background: none; border: 0; padding: .35rem .5rem; border-radius: 8px; text-align: left; cursor: pointer; color: var(--olfx-ink); font: inherit; }
.olfx-evsuggest__item:hover, .olfx-evsuggest__item:focus { background: color-mix(in srgb, var(--olfx-ink) 6%, transparent); }

.olfx-evfield { border: 0; padding: 0; min-width: 0; }
.olfx-evfield legend { font-weight: 600; padding: 0; margin-bottom: .35rem; }
.olfx-evhint { margin: 0 0 .5rem; }
.olfx-evchips, .olfx-evradios { display: flex; flex-wrap: wrap; gap: .4rem; margin: .25rem 0 .5rem; }
.olfx-evchip { padding: .35rem .9rem; border-radius: 999px; border: 1px solid var(--olfx-line); background: var(--olfx-surface); color: var(--olfx-ink); font: inherit; font-size: .9rem; cursor: pointer; min-height: 36px; }
.olfx-evchip[aria-pressed="true"] { background: color-mix(in srgb, var(--olfx-accent) 14%, var(--olfx-surface)); border-color: var(--olfx-accent); color: var(--olfx-accent); font-weight: 600; }
.olfx-evradio { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border: 1px solid var(--olfx-line); border-radius: 999px; cursor: pointer; font-size: .9rem; }
.olfx-evradio:has(input:checked) { background: color-mix(in srgb, var(--olfx-accent) 14%, var(--olfx-surface)); border-color: var(--olfx-accent); }
.olfx-evcustom { display: flex; gap: .5rem; align-items: center; margin-top: .25rem; }
.olfx-evshare { display: flex; gap: .6rem; align-items: center; font-weight: 500; margin: 1rem 0 .25rem; }
.olfx-evhead h2 { margin: 0; }
.olfx-evhead p { margin: .1rem 0 0; }
.olfx-evprep p { max-width: 38rem; }
.olfx-evtips { margin-top: 1.5rem; padding: 1rem 1.25rem; border-radius: 14px; background: var(--olfx-bg); font-size: .92rem; }
.olfx-evtips ul { margin: 0 0 .5rem; padding-left: 1.1rem; }
.olfx-evcount { font-size: 2rem; font-weight: 500; letter-spacing: -.02em; margin: .25rem 0; }
.olfx-evactions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.olfx-evhistory { margin: 1.25rem 0 0; padding-left: 1.2rem; color: var(--olfx-muted); font-size: .92rem; }

.olfx-timeline { list-style: none; margin: 0; padding: 0; }
.olfx-timeline__item { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--olfx-line); }
.olfx-timeline__time { display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; }
.olfx-timeline__body p { margin: 0 0 .4rem; }
.olfx-timeline__meter { color: var(--olfx-muted); font-size: .9rem; }
.olfx-evalview__actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1.5rem; }
@media (max-width: 560px) { .olfx-timeline__item { grid-template-columns: 1fr; gap: .4rem; } }
.olfx-evalsetup input[type="text"], .olfx-evalsetup input[type="search"], .olfx-evalsetup select, .olfx-evform input[type="text"], .olfx-evform input[type="number"], .olfx-evform textarea { min-height: 44px; padding: .55rem .8rem; border: 1px solid var(--olfx-line); border-radius: 10px; background: var(--olfx-surface); color: inherit; font: inherit; }
.olfx-evform textarea { min-height: 0; }

/* Swipe rows (carousel) */
.olfx-carousel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.olfx-carousel__head .olfx-heading { margin: 2rem 0 .75rem; }
.olfx-carousel__title { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: 2rem 0 .75rem; }
.olfx-carousel__title .olfx-heading { margin: 0; line-height: 1.2; }
.olfx-carousel__title .olfx-btn { flex: 0 0 auto; margin: 0; }
.olfx-carousel__head .olfx-carousel__nav { margin: 2rem 0 .75rem; align-self: center; }
.olfx-carousel__nav { display: flex; gap: .5rem; margin-top: 1.25rem; }
.olfx-carousel__nav[hidden] { display: none; }
.olfx-carousel__btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--olfx-line); background: var(--olfx-surface); color: var(--olfx-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background-color .15s ease, border-color .15s ease; }
.olfx-carousel__btn:hover:not(:disabled) { background: color-mix(in srgb, var(--olfx-accent) 8%, var(--olfx-surface)); border-color: color-mix(in srgb, var(--olfx-accent) 40%, transparent); color: var(--olfx-accent); }
.olfx-carousel__btn:disabled { opacity: .35; cursor: default; }
.olfx-carousel__track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 0; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding: .25rem .25rem 1rem; margin: 0 -.25rem; scrollbar-width: none; }
.olfx-carousel__track::-webkit-scrollbar { display: none; }
.olfx-carousel__track:focus-visible { outline: 2px solid var(--olfx-accent); outline-offset: 2px; border-radius: 12px; }
.olfx-carousel__item { flex: 0 0 min(320px, 84%); scroll-snap-align: start; display: flex; }
.olfx-carousel__item > .olfx-card { width: 100%; box-sizing: border-box; }
.olfx-snippet { text-align: left; display: flex; flex-direction: column; }
.olfx-snippet .olfx-card__title { margin: .15rem 0 .5rem; }
.olfx-snippet__share { margin: 0; font-size: 1.5rem; line-height: 1.2; }
.olfx-snippet__share strong { font-weight: 500; letter-spacing: -.02em; }
.olfx-snippet__meta { margin: .25rem 0 1rem; }
.olfx-snippet .olfx-formula-tile__foot { margin-top: auto; }

/* Locked evaluation card (guests) */
.olfx-evalcard__lock { position: relative; margin: .5rem 0 1rem; }
.olfx-evalcard__lock .olfx-evalteaser__art { filter: blur(3px); opacity: .55; pointer-events: none; }
.olfx-evalcard__lock p { margin: .75rem 0 0; }

/* Evaluation library (My evaluations, grouped by ingredient) */
.olfx-evlib__bar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0 0 1rem; }
.olfx-evlib__bar input[type="search"] { flex: 1 1 14rem; min-width: 0; }
.olfx-evlib__bar input[type="search"], .olfx-evlib__bar select { min-height: 40px; padding: .4rem .8rem; border: 1px solid var(--olfx-line); border-radius: 10px; background: var(--olfx-surface); color: inherit; font: inherit; box-sizing: border-box; }
.olfx-evlib__clear { font-size: .9rem; }
.olfx-evlib__export { margin-left: auto; }
.olfx-evlib__list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--olfx-line); border-radius: 16px; background: var(--olfx-surface); overflow: hidden; }
.olfx-evlib__row + .olfx-evlib__row { border-top: 1px solid var(--olfx-line); }
.olfx-evlib__link { display: grid; grid-template-columns: auto 1fr auto auto; gap: .15rem .85rem; align-items: center; padding: .8rem 1.1rem; color: inherit; text-decoration: none; }
.olfx-evlib__link:hover, .olfx-evlib__link:focus-visible { background: color-mix(in srgb, var(--olfx-accent) 6%, var(--olfx-surface)); }
.olfx-evlib__name { font-weight: 600; grid-column: 2; }
.olfx-evlib__meta { grid-column: 2; grid-row: 2; font-size: .88rem; color: var(--olfx-muted); }
.olfx-evlib__link .olfx-ring { grid-row: 1 / span 2; }
.olfx-evlib__link .olfx-badge { grid-column: 3; grid-row: 1 / span 2; }
.olfx-evlib__chev { grid-column: 4; grid-row: 1 / span 2; font-size: 1.4rem; color: var(--olfx-muted); }
.olfx-evlib__pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1.25rem 0 0; }
.olfx-evlib__title { display: flex; align-items: center; gap: .6rem; margin: 1rem 0 .25rem; }
.olfx-evlib__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; }
.olfx-back { text-decoration: none; }
@media (max-width: 520px) { .olfx-evlib__export { margin-left: 0; } .olfx-evlib__link { padding: .75rem .85rem; } }

/* Contact form */
.olfx-contact__form textarea { min-height: 10rem; resize: vertical; box-sizing: border-box; }
.olfx-contact__note { font-size: .9rem; }
.olfx-contact .cf-turnstile { margin: 0 0 1rem; }

/* Wide tables: fade at the edge that has more to scroll to, and keep the ingredient name in view */
.olfx-table-scroll { position: relative; }
.olfx-table-scroll::before, .olfx-table-scroll::after { content: ""; position: absolute; top: 1px; bottom: 1px; width: 28px; pointer-events: none; opacity: 0; transition: opacity .15s ease; z-index: 2; }
.olfx-table-scroll::after { right: 1px; border-radius: 0 10px 10px 0; background: linear-gradient(to left, rgba(31, 35, 40, .22), transparent); }
.olfx-table-scroll::before { left: 1px; border-radius: 10px 0 0 10px; background: linear-gradient(to right, rgba(31, 35, 40, .22), transparent); }
.olfx-table-scroll.has-more-right::after, .olfx-table-scroll.has-more-left::before { opacity: 1; }
.olfx-table-wrap { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.olfx-table tbody th.olfx-ing, .olfx-table thead th:first-child, .olfx-table tfoot th:first-child { position: sticky; left: 0; z-index: 1; background: var(--olfx-surface); box-shadow: 1px 0 0 var(--olfx-line); }
.olfx-table thead th:first-child, .olfx-table tfoot th:first-child { background: var(--olfx-bg); }
.olfx-table tfoot th[colspan] { position: static; box-shadow: none; }
@media (max-width: 600px) { .olfx-table th, .olfx-table td { white-space: nowrap; } .olfx-table tbody th.olfx-ing { white-space: normal; min-width: 7.5rem; } }
@media (prefers-reduced-motion: reduce) { .olfx-table-scroll::before, .olfx-table-scroll::after { transition: none; } }

/* ---------- Account drawer (slides in from the right, like X / Twitter) ---------- */
.olfx-drawer { position: fixed; inset: 0; z-index: 1000; }
.olfx-drawer[hidden] { display: none; }
.olfx-drawer__scrim { position: absolute; inset: 0; background: rgba(31, 35, 40, .5); opacity: 0; transition: opacity .25s ease; }
.olfx-drawer__panel {
	position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 86vw);
	background: var(--olfx-surface, #fff); color: var(--olfx-ink, #1f2328);
	box-shadow: -8px 0 24px rgba(31, 35, 40, .25);
	transform: translateX(100%); transition: transform .25s cubic-bezier(.2, 0, 0, 1);
	display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
	padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
	outline: none; box-sizing: border-box;
}
.olfx-drawer.is-open .olfx-drawer__scrim { opacity: 1; }
.olfx-drawer.is-open .olfx-drawer__panel { transform: none; }
.olfx-drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; padding: 1rem 1rem .75rem 1.25rem; border-bottom: 1px solid var(--olfx-line, #e2e5e9); }
.olfx-drawer__me { display: flex; flex-direction: column; gap: .6rem; min-width: 0; color: inherit; text-decoration: none; }
.olfx-drawer__me .olfx-avatar { width: 56px; height: 56px; }
.olfx-drawer__me span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.olfx-drawer__me strong { font-size: 1.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.olfx-drawer__me small { color: var(--olfx-muted, #5d646d); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.olfx-drawer__close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -.25rem -.25rem 0 0; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
.olfx-drawer__close:hover { background: color-mix(in srgb, var(--olfx-ink, #1f2328) 7%, transparent); }
.olfx-drawer__nav { padding: .5rem; }
.olfx-drawer__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; }
.olfx-drawer__nav li { margin: 0; }
.olfx-drawer__nav a { display: flex; align-items: center; gap: 1rem; min-height: 52px; padding: .6rem .9rem; border-radius: 14px; color: inherit; text-decoration: none; font-size: 1.05rem; font-weight: 500; }
.olfx-drawer__nav a:hover { background: color-mix(in srgb, var(--olfx-accent, #2650b8) 9%, transparent); color: var(--olfx-accent, #2650b8); }
.olfx-drawer__nav .olfx-drawer__out { margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--olfx-line, #e2e5e9); }
.olfx-drawer__nav .olfx-drawer__out a { margin-top: .1rem; }
.olfx-drawer__nav a:focus-visible, .olfx-drawer__close:focus-visible, .olfx-drawer__me:focus-visible, .olfx-usermenu__toggle:focus-visible { outline: 2px solid var(--olfx-accent, #2650b8); outline-offset: 2px; }
html.olfx-drawer-lock { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .olfx-drawer__scrim, .olfx-drawer__panel { transition: none; } }

/* "By continuing, you agree..." under Sign in / Create account */
.olfx-auth__legal { margin: 1rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--olfx-muted); text-align: center; }
.olfx-auth__legal a { color: var(--olfx-accent); text-decoration: underline; text-underline-offset: 2px; }

/* My formulas page */
.olfx-myformulas__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.olfx-myformulas__head .olfx-heading { margin: 0 0 .15rem; }
.olfx-myformulas__head .olfx-muted { margin: 0; }
.olfx-myformula { flex-direction: column; gap: .5rem; }
.olfx-myformula__bar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 0; min-height: 36px; }

/* Settings and privacy: grouped switches. */
.olfx-fieldset { border: 0; margin: 0 0 1.25rem; padding: 0; min-width: 0; }
.olfx-fieldset legend { padding: 0; font-weight: 700; font-size: 1.02rem; margin-bottom: .25rem; }
.olfx-fieldset .olfx-help { margin: 0 0 .35rem; color: var(--olfx-muted); }

/* Back arrow on inner pages. */
.olfx-back { margin: 0 0 .5rem; }
.olfx-back__link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-inline-start: -.6rem; border-radius: 999px; color: var(--olfx-ink); text-decoration: none; transition: background .12s ease; }
.olfx-back__link:hover { background: color-mix(in srgb, var(--olfx-ink) 7%, transparent); }
.olfx-back__link:focus-visible { outline: 2px solid var(--olfx-accent); outline-offset: 2px; }
/* Pages that already have the left menu on desktop need the arrow on phones and tablets only. */
@media (min-width: 900px) { .olfx-back--phone { display: none; } }

/* Evaluation pop-up: a bottom sheet on phones, a centred window from tablet width up. */
html.olfx-modal-lock { overflow: hidden; }
.olfx-modal { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: flex-end; justify-content: center; }
.olfx-modal__scrim { position: absolute; inset: 0; background: rgba(31, 35, 40, .55); opacity: 0; transition: opacity .22s ease; }
.olfx-modal.is-open .olfx-modal__scrim { opacity: 1; }
.olfx-modal__panel {
	position: relative; display: flex; flex-direction: column; width: 100%; max-width: 100%;
	height: calc(100dvh - 1.5rem); max-height: calc(100dvh - 1.5rem);
	background: var(--olfx-surface); color: var(--olfx-ink); border-radius: 20px 20px 0 0;
	box-shadow: 0 -8px 40px rgba(0, 0, 0, .25);
	transform: translateY(100%); transition: transform .26s cubic-bezier(.2, .8, .2, 1);
	outline: none; overflow: hidden;
}
.olfx-modal.is-open .olfx-modal__panel { transform: none; }
.olfx-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: 1rem 1.1rem .8rem; border-bottom: 1px solid var(--olfx-line); background: var(--olfx-surface); }
.olfx-modal__titles { min-width: 0; }
.olfx-modal__title { margin: 0; font-size: 1.25rem; line-height: 1.25; overflow-wrap: anywhere; }
.olfx-modal__sub { margin: .1rem 0 0; color: var(--olfx-muted); font-size: .95rem; }
.olfx-modal__live { display: inline-flex; align-items: center; gap: .4rem; margin-top: .45rem; padding: .15rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--olfx-accent) 12%, transparent); color: var(--olfx-accent); font-size: .8rem; font-weight: 600; }
.olfx-modal__dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--olfx-accent); animation: olfx-pulse 1.6s ease-in-out infinite; }
@keyframes olfx-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.olfx-modal__cancel { flex: 0 0 auto; min-height: 44px; }
.olfx-modal__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 1.1rem 1.1rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); -webkit-overflow-scrolling: touch; }
.olfx-modal__body > * { max-width: none; }
.olfx-modal__confirm { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: color-mix(in srgb, var(--olfx-surface) 88%, transparent); backdrop-filter: blur(3px); }
.olfx-modal__confirmbox { width: 100%; max-width: 26rem; padding: 1.25rem; border: 1px solid var(--olfx-line); border-radius: 16px; background: var(--olfx-surface); box-shadow: 0 8px 30px rgba(0, 0, 0, .18); }
.olfx-modal__confirmtitle { margin: 0 0 .4rem; font-size: 1.1rem; }
.olfx-modal__confirmbox p { margin: 0 0 .6rem; }
.olfx-modal .olfx-evactions { margin: .75rem 0 0; }
@media (min-width: 640px) {
	.olfx-modal { align-items: center; padding: 1.5rem; }
	.olfx-modal__panel { width: 40rem; height: auto; max-height: min(46rem, calc(100dvh - 3rem)); border-radius: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); transform: translateY(14px) scale(.98); opacity: 0; transition: transform .22s ease, opacity .22s ease; }
	.olfx-modal.is-open .olfx-modal__panel { transform: none; opacity: 1; }
	.olfx-modal__head, .olfx-modal__body { padding-inline: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
	.olfx-modal__scrim, .olfx-modal__panel { transition: none; }
	.olfx-modal__dot { animation: none; }
}
.olfx-evactions a.olfx-link-button, .olfx-evwait a.olfx-link-button { display: inline-flex; align-items: center; }

/* Notes feed: one bordered box, posts separated by thin lines (like Threads). */
.olfx-feedbox, .olfx-feed > .olfx-feed__list { border: 1px solid var(--olfx-line); border-radius: 20px; background: var(--olfx-surface); overflow: hidden; }
.olfx-feedbox .olfx-feed__list { border: 0; border-radius: 0; }
.olfx-feed__list > .olfx-card { border: 0; border-bottom: 1px solid var(--olfx-line); border-radius: 0; box-shadow: none; margin: 0; padding: 1.1rem 1.25rem; background: transparent; }
.olfx-feed__list > .olfx-card:last-child { border-bottom: 0; }
.olfx-feed__list > .olfx-empty { border: 0; border-radius: 0; margin: 0; }
.olfx-feedbox .olfx-composer { margin: 0; padding: .9rem 1.25rem; border: 0; border-bottom: 1px solid var(--olfx-line); border-radius: 0; background: transparent; box-shadow: none; }
.olfx-composer__prompt { border: 0; font: inherit; text-align: left; cursor: pointer; }
.olfx-composer__prompt:hover { background: color-mix(in srgb, var(--olfx-ink) 8%, var(--olfx-bg)); }
.olfx-feedbox .olfx-feed__more, .olfx-feed > .olfx-feed__more { margin: 0; padding: .9rem; text-align: center; border-top: 1px solid var(--olfx-line); }
.olfx-feed > .olfx-gate, .olfx-feedbox .olfx-gate { margin: 0; border: 0; border-top: 1px solid var(--olfx-line); border-radius: 0; box-shadow: none; }
.olfx-feed > .olfx-feed__list + .olfx-gate { margin-top: 1rem; border: 1px solid var(--olfx-line); border-radius: 20px; }
.olfx-feedbox .olfx-feed__list:empty + .olfx-feed__more { display: none; }

/* Heart and comment icons are larger. */
.olfx-icon { width: 26px; height: 26px; flex: 0 0 auto; }
.olfx-like__icon { display: inline-flex; line-height: 0; }
.olfx-action .olfx-like__count, .olfx-action .olfx-comments-count { font-size: 1.05rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.olfx-like.is-liked .olfx-icon path { fill: currentColor; }

/* A Notes post */
.olfx-post { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: .85rem; align-items: start; }
.olfx-post__avatar { display: block; line-height: 0; }
.olfx-post__avatar img { width: 44px; height: 44px; }
.olfx-post__main { min-width: 0; }
.olfx-post__head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-height: 44px; margin-top: -.45rem; }
.olfx-post__author { font-weight: 700; color: inherit; text-decoration: none; }
.olfx-post__author:hover { text-decoration: underline; }
.olfx-post__head time { color: var(--olfx-muted); font-size: .88rem; }
.olfx-post__delete { margin-inline-start: auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 999px; background: none; color: var(--olfx-muted); cursor: pointer; }
.olfx-post__delete:hover { background: var(--olfx-bg); color: var(--olfx-danger); }
.olfx-post__text { margin: -.3rem 0 .7rem; overflow-wrap: anywhere; }
.olfx-post__text p { margin: 0 0 .5em; }
.olfx-post__text p:last-child { margin-bottom: 0; }
.olfx-post__actions { display: flex; align-items: center; gap: .15rem; margin: .35rem 0 0 -.6rem; }
.olfx-post__actions .olfx-action { padding: .25rem .65rem; gap: .5em; }
.olfx-post .olfx-comments { margin-top: .5rem; }

/* The item inside a post */
.olfx-embed { display: flex; flex-direction: column; gap: .3rem; padding: .85rem 1rem; border: 1px solid var(--olfx-line); border-radius: 14px; background: var(--olfx-surface); color: inherit; text-decoration: none; min-width: 0; }
a.olfx-embed:hover { background: var(--olfx-bg); }
a.olfx-embed:focus-visible { outline: 2px solid var(--olfx-accent); outline-offset: 2px; }
.olfx-embed__kind { font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--olfx-accent); }
.olfx-embed__title { font-size: 1.05rem; line-height: 1.3; overflow-wrap: anywhere; }
.olfx-embed__meta { color: var(--olfx-muted); font-size: .9rem; }
.olfx-embed__quote { color: var(--olfx-muted); font-style: italic; }
.olfx-embed__art { display: block; max-width: 100%; }
.olfx-embed__art svg { display: block; max-width: 100%; height: auto; }
.olfx-embed .olfx-chips { margin: .1rem 0; }
.olfx-embed--gone { border-style: dashed; }
.olfx-embed--gone p { margin: 0; }
@media (max-width: 599px) {
	.olfx-feed__list > .olfx-card { padding: 1rem .9rem; }
	.olfx-post { grid-template-columns: 40px minmax(0, 1fr); column-gap: .7rem; }
	.olfx-post__avatar img { width: 40px; height: 40px; }
	.olfx-feedbox, .olfx-feed > .olfx-feed__list { border-radius: 16px; }
	.olfx-feedbox .olfx-composer { padding: .8rem .9rem; }
}

/* The Post pop-up */
.olfx-share fieldset { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.olfx-share__label { display: block; margin: 0 0 .5rem; padding: 0; font-weight: 600; }
.olfx-share__req { color: var(--olfx-muted); font-weight: 400; font-size: .85rem; }
.olfx-share__typerow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.olfx-share__type { display: flex; flex-direction: column; gap: .15rem; align-items: flex-start; text-align: left; min-height: 64px; padding: .7rem .8rem; border: 1px solid var(--olfx-line); border-radius: 14px; background: var(--olfx-surface); color: var(--olfx-ink); font: inherit; cursor: pointer; }
.olfx-share__type .olfx-muted { font-size: .8rem; line-height: 1.25; }
.olfx-share__type:hover { background: var(--olfx-bg); }
.olfx-share__type.is-on { border-color: var(--olfx-accent); background: color-mix(in srgb, var(--olfx-accent) 9%, transparent); box-shadow: 0 0 0 1px var(--olfx-accent); }
.olfx-share__pick { margin: 0 0 1rem; }
.olfx-share__search { width: 100%; box-sizing: border-box; margin: 0 0 .5rem; padding: .6rem .8rem; border: 1px solid var(--olfx-line); border-radius: 12px; font: inherit; }
.olfx-share__list { list-style: none; margin: 0; padding: 0; max-height: 15rem; overflow-y: auto; border: 1px solid var(--olfx-line); border-radius: 12px; }
.olfx-share__list:empty { display: none; }
.olfx-share__list li + li { border-top: 1px solid var(--olfx-line); }
.olfx-share__item { display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: 48px; padding: .6rem .8rem; border: 0; background: none; color: var(--olfx-ink); font: inherit; text-align: left; cursor: pointer; }
.olfx-share__item:hover { background: var(--olfx-bg); }
.olfx-share__item[aria-selected="true"] { background: color-mix(in srgb, var(--olfx-accent) 10%, transparent); box-shadow: inset 3px 0 0 var(--olfx-accent); }
.olfx-share__item .olfx-muted { font-size: .85rem; }
.olfx-share__note { margin: .5rem 0 0; }
.olfx-share__text textarea { display: block; width: 100%; box-sizing: border-box; padding: .7rem .8rem; border: 1px solid var(--olfx-line); border-radius: 12px; font: inherit; resize: vertical; }
.olfx-share__count { display: block; text-align: right; margin-top: .25rem; }
.olfx-share__hint { display: block; margin-top: .25rem; font-size: .85rem; }
.olfx-share__actions { display: flex; justify-content: flex-end; margin-top: 1rem; }
@media (max-width: 479px) { .olfx-share__typerow { grid-template-columns: 1fr; } .olfx-share__type { min-height: 0; } }

/* Post entry points: the text box everywhere, a floating + on phones and tablets, a Post button in the left menu on desktop. */
.olfx-fab { display: none; }
@media (max-width: 899px) {
	.olfx-fab {
		display: inline-flex; align-items: center; justify-content: center; position: fixed; z-index: 95;
		right: 1rem; bottom: calc(68px + 1rem + env(safe-area-inset-bottom, 0px));
		width: 3.5rem; height: 3.5rem; border: 0; border-radius: 50%; cursor: pointer; padding: 0;
		background: var(--wp--preset--color--accent, #2650b8); color: #fff;
		box-shadow: 0 4px 14px rgba(0,0,0,.25); -webkit-tap-highlight-color: transparent;
	}
	.olfx-fab:active { transform: scale(.95); }
	.olfx-fab:focus-visible { outline: 3px solid var(--wp--preset--color--contrast, #1f2328); outline-offset: 2px; }
}
.olfx-sidenav__post {
	display: block; width: 100%; margin: 1rem 0 0; padding: .85rem 1rem; border: 0; border-radius: 999px; cursor: pointer;
	background: var(--wp--preset--color--accent, #2650b8); color: #fff; font: inherit; font-weight: 700; font-size: 1.05rem; text-align: center;
}
.olfx-sidenav__post:hover { filter: brightness(1.08); }
.olfx-sidenav__post:focus-visible { outline: 3px solid var(--wp--preset--color--contrast, #1f2328); outline-offset: 2px; }

/* About and legal links: in the account menu (all screens) and under the left menu (desktop). */
.olfx-drawer__legal { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--olfx-line, #e2e5e9); }
.olfx-drawer__legal-title { margin: 0 0 .35rem; padding: 0 .75rem; font-size: .78rem; font-weight: 700; text-transform: none; color: var(--wp--preset--color--muted, #5d646d); }
.olfx-drawer__legal ul { list-style: none; margin: 0; padding: 0; }
.olfx-drawer__legal li { margin: 0; }
.olfx-drawer__legal a { display: block; padding: .6rem .75rem; border-radius: 8px; color: var(--wp--preset--color--contrast, #1f2328); text-decoration: none; font-size: .95rem; }
.olfx-drawer__legal a:hover, .olfx-drawer__legal a:focus-visible { background: color-mix(in srgb, var(--wp--preset--color--contrast, #1f2328) 7%, transparent); }
.olfx-sidenav__legal { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin: 1.25rem 0 0; padding: 0 .75rem; }
.olfx-sidenav__legal a { color: var(--wp--preset--color--muted, #5d646d); font-size: .8rem; text-decoration: none; }
.olfx-sidenav__legal a:hover, .olfx-sidenav__legal a:focus-visible { text-decoration: underline; }

/* Report: flag button in a post header, and the pop-up. */
.olfx-post__report:hover { color: var(--olfx-ink); }
.olfx-report__reasons { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: .25rem; min-width: 0; }
.olfx-report__reason { display: flex; align-items: center; gap: .65rem; padding: .7rem .8rem; border: 1px solid var(--olfx-line); border-radius: 12px; cursor: pointer; min-height: 44px; box-sizing: border-box; }
.olfx-report__reason:has(input:checked) { border-color: var(--olfx-accent); background: color-mix(in srgb, var(--olfx-accent) 8%, transparent); }
.olfx-report__reason input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--olfx-accent); }
.olfx-report__label { display: block; font-weight: 600; margin-bottom: .3rem; }
.olfx-report textarea { width: 100%; box-sizing: border-box; padding: .6rem .8rem; border: 1px solid var(--olfx-line); border-radius: 10px; background: var(--olfx-surface); color: inherit; font: inherit; }
.olfx-report__thanks { margin: 0 0 1rem; font-size: 1.05rem; }
@media (max-width: 599px) {
	.olfx-comment__replies { padding-inline-start: .5rem; margin-inline-start: 0; }
	.olfx-comment__actions { gap: .1rem .75rem; }
}

/* Private formulas */
.olfx-badge[hidden] { display: none; }
.olfx-visibility { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; min-width: 0; }
.olfx-visibility legend { font-weight: 600; margin-bottom: .35rem; padding: 0; }
.olfx-visibility__opt { display: flex; align-items: flex-start; gap: .65rem; padding: .75rem .9rem; border: 1px solid var(--olfx-line); border-radius: 12px; cursor: pointer; }
.olfx-visibility__opt:has(input:checked) { border-color: var(--olfx-accent); background: color-mix(in srgb, var(--olfx-accent) 8%, transparent); }
.olfx-visibility__opt input { margin-top: .25rem; accent-color: var(--olfx-accent); }
.olfx-visibility__opt .olfx-muted { display: block; font-size: .9rem; }
.olfx-myformula__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* Perfumer's palette */
.olfx-pal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.olfx-pal__head p { margin: .15rem 0 0; }
.olfx-pal__vis { margin-bottom: 1rem; }
.olfx-pal__vis p { margin: .5rem 0 0; }
.olfx-switch { display: inline-flex; align-items: center; gap: .65rem; cursor: pointer; font-weight: 500; }
.olfx-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.olfx-switch__track { position: relative; flex: 0 0 auto; width: 2.6rem; height: 1.5rem; border-radius: 999px; background: var(--wp--preset--color--line, #d6d9de); transition: background .15s; }
.olfx-switch__track::after { content: ""; position: absolute; top: .2rem; left: .2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s; }
.olfx-switch input:checked + .olfx-switch__track { background: var(--wp--preset--color--accent, #1a56c9); }
.olfx-switch input:checked + .olfx-switch__track::after { transform: translateX(1.1rem); }
.olfx-switch input:focus-visible + .olfx-switch__track { outline: 2px solid var(--wp--preset--color--accent, #1a56c9); outline-offset: 2px; }
.olfx-pal__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.olfx-pal__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.olfx-pal__main { min-width: 0; }
.olfx-pal__name { font-weight: 600; margin-right: .4rem; }
.olfx-pal__meta { margin: .2rem 0 0; }
.olfx-pal__actions { display: flex; gap: .25rem; }
.olfx-pal__form { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--wp--preset--color--line, #e3e5e8); display: grid; gap: .5rem; max-width: 32rem; }
.olfx-pal__form label { display: grid; gap: .25rem; font-size: .9rem; }
.olfx-pal__form input, .olfx-pal__form select, .olfx-pal__form textarea { width: 100%; }
.olfx-pal-bar { margin: 1rem 0 0; }
.olfx-pal-btn[aria-pressed="true"] { color: var(--wp--preset--color--accent, #1a56c9); font-weight: 600; }
.olfx-badge--kind { margin-right: .25rem; }
.olfx-pal__form[hidden], .olfx-pal [hidden] { display: none !important; }
.olfx-pal__form input[type="text"], .olfx-pal__form select, .olfx-pal__form textarea { box-sizing: border-box; padding: .5rem .7rem; border: 1px solid var(--wp--preset--color--line, #cfd3d9); border-radius: 10px; font: inherit; background: var(--wp--preset--color--base, #fff); }
.olfx-pal-public__list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .5rem; }
.olfx-pal-public__list li { padding: .6rem .9rem; border: 1px solid var(--wp--preset--color--line, #e3e5e8); border-radius: 12px; }

/* Formula creator: ingredient source and accord rows */
.olfx-source { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: 0 0 .75rem; }
.olfx-source__label { color: var(--olfx-muted, #5f6368); font-size: .9rem; margin-right: .25rem; }
.olfx-source__opt { min-height: 36px; padding: .3rem .9rem; border: 1px solid var(--olfx-line, #d6d9de); border-radius: 999px; background: var(--olfx-surface, #fff); color: inherit; font: inherit; font-size: .9rem; cursor: pointer; }
.olfx-source__opt.is-active { background: color-mix(in srgb, var(--olfx-accent, #1a56c9) 12%, transparent); border-color: var(--olfx-accent, #1a56c9); color: var(--olfx-accent, #1a56c9); font-weight: 600; }
.olfx-row__tag { display: inline-block; margin-left: .35rem; padding: .05rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--olfx-accent, #1a56c9) 12%, transparent); color: var(--olfx-accent, #1a56c9); font-size: .72rem; font-weight: 600; }
.olfx-row__tag[hidden] { display: none; }
.olfx-row--accord input:disabled { background: var(--olfx-bg, #f4f5f7); color: var(--olfx-muted, #5f6368); }
.olfx-accord-list { margin: .25rem 0 .75rem 1.1rem; padding: 0; }
.olfx-accord-check { display: flex; gap: .6rem; align-items: flex-start; margin: .5rem 0 .25rem; cursor: pointer; }
.olfx-accord-check input { margin-top: .25rem; }

/* Palette icon button beside the ingredient name (Pinterest-style save button). */
.olfx-titlebar { margin: 0 0 1rem; }
.olfx-titlebar__row { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.olfx-titlebar__name { flex: 1 1 auto; min-width: 0; }
.olfx-titlebar__name > * { margin-top: 0; margin-bottom: 0; overflow-wrap: anywhere; }
.olfx-titlebar__learn { margin: .35rem 0 0; font-size: .875rem; }
.olfx-pal-btn--icon { border: 1px solid var(--wp--preset--color--border, #d0d4da); background: #fff; flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; min-width: 44px; min-height: 44px; justify-content: center; padding: .5rem .9rem; border-radius: 999px; text-decoration: none; line-height: 1.1; white-space: nowrap; }
.olfx-pal-btn--icon .olfx-pal-btn__icon { flex: 0 0 auto; }
.olfx-pal-btn--icon[aria-pressed="true"] { background: var(--wp--preset--color--accent, #1a56c9); border-color: var(--wp--preset--color--accent, #1a56c9); color: #fff; }
.olfx-pal-btn--icon[aria-pressed="true"] .olfx-pal-btn__icon path { fill: rgba(255,255,255,.25); }
@media (max-width: 781px) {
	.olfx-pal-btn--icon { padding: .5rem; width: 44px; }
	.olfx-pal-btn--icon .olfx-pal-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.olfx-pal-btn--icon.is-msg .olfx-pal-btn__label { position: static; width: auto; height: auto; clip: auto; font-size: .8rem; }
	.olfx-pal-btn--icon.is-msg { width: auto; }
}

.olfx-tool-card__learn { display: inline-block; margin-left: .75rem; font-size: .9rem; white-space: nowrap; }

/* Image credit under the featured image. */
.olfx-credit { margin: .4rem 0 1.25rem; font-size: .8125rem; line-height: 1.4; color: var(--wp--preset--color--muted, #6b7280); }
.olfx-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.olfx-credit a:hover, .olfx-credit a:focus { color: var(--wp--preset--color--accent, #1a56c9); }

/* Palette search and filters. */
.olfx-pal__tools { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: .75rem 1rem; align-items: end; margin-bottom: 1rem; }
.olfx-pal__tools .olfx-field { margin: 0; display: grid; gap: .25rem; }
.olfx-pal__tools label { font-size: .85rem; }
.olfx-pal__tools input[type="search"], .olfx-pal__tools select { box-sizing: border-box; width: 100%; min-height: 44px; padding: .5rem .8rem; border: 1px solid var(--wp--preset--color--line, #d0d4da); border-radius: 10px; background: #fff; font: inherit; }
.olfx-pal__q { grid-column: 1; }
.olfx-pal__tools-foot { grid-column: 1 / -1; margin: 0; display: flex; align-items: center; gap: .75rem; min-height: 1.5rem; }
.olfx-pal__tools[hidden] { display: none !important; }
@media (max-width: 781px) {
	.olfx-pal__tools { grid-template-columns: 1fr 1fr; }
	.olfx-pal__q { grid-column: 1 / -1; }
}
.olfx-pal__tools-foot:has([data-olfx-pal-clear][hidden]):has([data-olfx-pal-shown]:empty) { display: none; }
@media (max-width: 480px) {
	.olfx-pal__tools { gap: .6rem .6rem; padding: .85rem; }
	.olfx-pal__tools select { padding: .4rem .5rem; font-size: .95rem; }
}

/* Ingredient search in the right sidebar: compact. */
.inzenzo-rail--right .olfx-search { margin: 0 0 1rem; }
.inzenzo-rail--right .olfx-search__input { height: 46px; font-size: 1rem; padding: 0 1rem 0 2.8rem; }
.inzenzo-rail--right .olfx-search__icon { left: .95rem; width: 20px; height: 20px; }
.inzenzo-rail--right .olfx-search__list { border-radius: 0 0 22px 22px; }
.inzenzo-rail--right .olfx-search__box:has(.olfx-search__list:not([hidden])) .olfx-search__input { border-radius: 23px 23px 0 0; }
.inzenzo-rail--right .olfx-search__list li { padding: .55rem .85rem; }

/* ---------- Help centre ---------- */
.olfx-help-header { border-bottom: 1px solid var(--olfx-line, #e2e5e9); background: var(--olfx-surface, #fff); }
.olfx-help-header__inner { max-width: 82rem; margin: 0 auto; padding: .85rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.olfx-help-brand { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.olfx-help-brand__logo img { width: 36px; height: 36px; display: block; }
.olfx-help-brand__name { font-weight: 700; color: inherit; text-decoration: none; }
.olfx-help-brand__section { padding-left: .75rem; border-left: 1px solid var(--olfx-line, #e2e5e9); color: var(--olfx-muted, #5d646d); text-decoration: none; }
.olfx-help-header__nav { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.olfx-help-header__nav a { color: inherit; text-decoration: none; }
.olfx-help-header__nav a:hover, .olfx-help-header__nav a:focus-visible { color: var(--olfx-accent, #2650b8); }
.olfx-help-header__back { font-weight: 600; }
.olfx-help-footer { max-width: 82rem; margin: 3rem auto 0; padding: 1.5rem 1rem 2.5rem; border-top: 1px solid var(--olfx-line, #e2e5e9); color: var(--olfx-muted, #5d646d); font-size: .9rem; }
.olfx-help-footer a { color: inherit; }

.olfx-help { max-width: 60rem; margin: 0 auto; padding: 0 0 2rem; }
.olfx-help-hero { text-align: center; padding: 2.5rem 0 1.5rem; }
.olfx-help-hero h1, .olfx-help-h1 { margin: 0 0 .5rem; }
.olfx-help-hero p, .olfx-help-lede { color: var(--olfx-muted, #5d646d); margin: 0 0 1.25rem; }
.olfx-help-search { position: relative; max-width: 40rem; margin: 0 auto; text-align: left; }
.olfx-help-search form { display: flex; gap: .5rem; }
.olfx-help-search input[type="search"] { flex: 1 1 auto; min-width: 0; padding: .85rem 1rem; font: inherit; border: 1px solid var(--olfx-line, #d0d4da); border-radius: 999px; background: var(--olfx-surface, #fff); color: inherit; }
.olfx-help-search button { padding: .85rem 1.4rem; font: inherit; font-weight: 600; border: 0; border-radius: 999px; background: var(--olfx-accent, #2650b8); color: var(--olfx-accent-ink, #fff); cursor: pointer; }
.olfx-help-search.is-compact { margin: .75rem 0 1.25rem; max-width: 34rem; }
.olfx-help-search.is-compact input[type="search"], .olfx-help-search.is-compact button { padding-top: .6rem; padding-bottom: .6rem; }
.olfx-help-suggest { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + .35rem); margin: 0; padding: .35rem; list-style: none; background: var(--olfx-surface, #fff); border: 1px solid var(--olfx-line, #e2e5e9); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.olfx-help-suggest[hidden] { display: none; }
.olfx-help-suggest li { margin: 0; }
.olfx-help-suggest a { display: block; padding: .6rem .8rem; border-radius: 10px; color: inherit; text-decoration: none; }
.olfx-help-suggest a:hover, .olfx-help-suggest a:focus { background: var(--olfx-bg, #f4f5f7); outline: none; }
.olfx-help-suggest span { display: block; font-size: .8rem; color: var(--olfx-muted, #5d646d); }
.olfx-help-suggest .is-empty { padding: .6rem .8rem; color: var(--olfx-muted, #5d646d); }

.olfx-help-section { margin: 2rem 0; }
.olfx-help-section h2 { font-size: 1.25rem; margin: 0 0 .75rem; }
.olfx-help-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.olfx-help-topic { display: flex; flex-direction: column; gap: .35rem; padding: 1.25rem; border: 1px solid var(--olfx-line, #e2e5e9); border-radius: var(--olfx-radius, 20px); background: var(--olfx-surface, #fff); color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.olfx-help-topic:hover, .olfx-help-topic:focus-visible { border-color: var(--olfx-accent, #2650b8); transform: translateY(-2px); }
.olfx-help-icon { color: var(--olfx-accent, #2650b8); }
.olfx-help-topic__name { font-weight: 700; font-size: 1.05rem; }
.olfx-help-topic__desc { color: var(--olfx-muted, #5d646d); font-size: .9rem; }
.olfx-help-topic__count { color: var(--olfx-muted, #5d646d); font-size: .8rem; margin-top: auto; }

.olfx-help-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--olfx-line, #e2e5e9); border-radius: var(--olfx-radius, 20px); background: var(--olfx-surface, #fff); overflow: hidden; }
.olfx-help-list li + li { border-top: 1px solid var(--olfx-line, #e2e5e9); }
.olfx-help-list a { display: block; padding: .9rem 1.1rem; color: inherit; text-decoration: none; }
.olfx-help-list a:hover, .olfx-help-list a:focus-visible { background: var(--olfx-bg, #f4f5f7); }
.olfx-help-list__title { font-weight: 600; }
.olfx-help-list__blurb { display: block; margin-top: .2rem; font-size: .875rem; color: var(--olfx-muted, #5d646d); }
.olfx-help-chip { display: inline-block; padding: .1rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; background: var(--olfx-bg, #f4f5f7); color: var(--olfx-ink, #1f2328); }
.olfx-help-chip--open { background: #fdecea; color: #8a2a22; }
.olfx-help-chip--workaround { background: #fff4e0; color: #8a5200; }
.olfx-help-chip--fixed { background: #e6f4ec; color: #1f6b41; }
.olfx-help-empty { color: var(--olfx-muted, #5d646d); }

.olfx-help-crumbs { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .875rem; color: var(--olfx-muted, #5d646d); margin: 1rem 0 0; }
.olfx-help-crumbs a { color: inherit; }
.olfx-help-meta { margin: 0 0 1.25rem; font-size: .875rem; color: var(--olfx-muted, #5d646d); }
.olfx-help-after { margin-top: 2.5rem; }
.olfx-help-vote { padding: 1.25rem; text-align: center; border: 1px solid var(--olfx-line, #e2e5e9); border-radius: var(--olfx-radius, 20px); }
.olfx-help-vote__q { margin: 0 0 .75rem; font-weight: 600; }
.olfx-help-vote__thanks { margin: 0; }

body.olfx-help-page .inzenzo-help-article { max-width: 46rem; margin-left: auto; margin-right: auto; }
@media (max-width: 781px) {
	.olfx-help-topics { grid-template-columns: 1fr; }
	.olfx-help-hero { padding-top: 1.5rem; }
	.olfx-help-search form { flex-direction: column; }
	.olfx-help-search button { width: 100%; }
	.olfx-help-header__inner { align-items: flex-start; }
}
@media (min-width: 782px) and (max-width: 1024px) {
	.olfx-help-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Password strength hint */
.olfx-pw { display: grid; gap: .3rem; margin-top: .35rem; font-size: .85rem; }
.olfx-pw[hidden] { display: none; }
.olfx-pw__bar { display: block; height: 6px; border-radius: 3px; background: var(--olfx-border, #e2ddd5); position: relative; overflow: hidden; }
.olfx-pw__bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 25%; background: var(--olfx-danger); transition: width .2s; }
.olfx-pw[data-level="1"] .olfx-pw__bar::after { width: 50%; background: #c47b12; }
.olfx-pw[data-level="2"] .olfx-pw__bar::after { width: 75%; background: #4f7d3a; }
.olfx-pw[data-level="3"] .olfx-pw__bar::after { width: 100%; background: #2f6b2f; }
.olfx-pw__msg { color: var(--olfx-muted); }

/* ---------- Learn ---------- */
.olfx-learn { max-width: 82rem; margin: 0 auto; display: grid; gap: 1.5rem; }
.olfx-learn h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); line-height: 1.15; margin: 0; }
.olfx-learn h2 { font-size: 1.35rem; margin: 0 0 .9rem; }
.olfx-learn-crumbs { font-size: .88rem; color: var(--olfx-muted); display: flex; flex-wrap: wrap; gap: .25rem; }
.olfx-learn-crumbs a { color: inherit; text-decoration: none; }
.olfx-learn-crumbs a:hover { text-decoration: underline; }
.olfx-learn-hero p { color: var(--olfx-muted); max-width: 46rem; margin: .6rem 0 0; font-size: 1.05rem; }
.olfx-learn-join { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--olfx-line); border-radius: var(--olfx-radius); background: var(--olfx-bg); }
.olfx-learn-join div { display: grid; gap: .15rem; max-width: 40rem; }
.olfx-learn-join span { color: var(--olfx-muted); font-size: .92rem; }
.olfx-learn-join p { margin: 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.olfx-learn-filters { display: grid; gap: .25rem; }
.olfx-learn .olfx-chip { text-decoration: none; color: inherit; padding: .3rem .85rem; font-size: .88rem; }
.olfx-learn .olfx-chip:hover { border-color: var(--olfx-accent); }
.olfx-learn .olfx-chip.is-on { background: var(--olfx-accent); color: var(--olfx-accent-ink); border-color: var(--olfx-accent); }
.olfx-learn-sub { font-size: 1.1rem; margin: 1.5rem 0 .6rem; }

.olfx-course-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.olfx-course-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--olfx-line); border-radius: var(--olfx-radius); background: var(--olfx-surface); overflow: hidden; transition: border-color .15s, transform .15s; }
.olfx-course-card:hover { border-color: var(--olfx-accent); transform: translateY(-2px); }
.olfx-course-card__img { aspect-ratio: 16 / 9; background: color-mix(in srgb, var(--olfx-accent) 10%, var(--olfx-bg)); display: grid; place-items: center; overflow: hidden; }
.olfx-course-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.olfx-course-card__ph { color: var(--olfx-accent); opacity: .7; }
.olfx-course-card__ph svg { width: 44px; height: 44px; }
.olfx-course-card__body { padding: .9rem 1rem 1.1rem; display: grid; gap: .4rem; align-content: start; flex: 1; }
.olfx-course-card__topic { font-size: .76rem; text-transform: none; letter-spacing: .02em; color: var(--olfx-accent); font-weight: 600; }
.olfx-course-card h3 { margin: 0; font-size: 1.08rem; line-height: 1.3; }
.olfx-course-card h3 a { color: inherit; text-decoration: none; }
.olfx-course-card h3 a::after { content: ""; position: absolute; inset: 0; }
.olfx-course-card p { margin: 0; color: var(--olfx-muted); font-size: .9rem; }
.olfx-course-card__meta { font-size: .82rem; color: var(--olfx-muted); }
.olfx-course-card__prog { display: grid; gap: .25rem; font-size: .8rem; color: var(--olfx-muted); margin-top: .2rem; }

.olfx-learn-bar { display: block; height: 6px; border-radius: 3px; background: var(--olfx-line); overflow: hidden; }
.olfx-learn-bar > span { display: block; height: 100%; background: var(--olfx-accent); border-radius: 3px; transition: width .3s; }

.olfx-learn-banner { display: grid; gap: 1.5rem; padding: 1.5rem; border: 1px solid var(--olfx-line); border-radius: var(--olfx-radius); background: var(--olfx-bg); }
@media (min-width: 860px) { .olfx-learn-banner { grid-template-columns: 1.3fr 1fr; align-items: center; padding: 2rem; } }
.olfx-learn-banner__text { display: grid; gap: .7rem; align-content: start; }
.olfx-learn-banner__lede { margin: 0; font-size: 1.08rem; color: var(--olfx-ink); }
.olfx-learn-banner__meta { margin: 0; color: var(--olfx-muted); font-size: .92rem; }
.olfx-learn-banner__prog { margin: 0; display: grid; gap: .3rem; font-size: .88rem; color: var(--olfx-muted); max-width: 22rem; }
.olfx-learn-banner__cta { margin: .3rem 0 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.olfx-learn-banner__img img { width: 100%; height: auto; border-radius: calc(var(--olfx-radius) - 6px); display: block; }

.olfx-learn-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.olfx-learn-checks li { display: flex; gap: .55rem; align-items: flex-start; }
.olfx-learn-checks .olfx-learn-icon { color: #3f7a4c; flex: none; margin-top: .1rem; }
.olfx-learn-icon { flex: none; }

.olfx-prose { max-width: 46rem; line-height: 1.7; }
.olfx-prose img { max-width: 100%; height: auto; border-radius: 12px; }
.olfx-prose h2, .olfx-prose h3 { margin: 1.6em 0 .5em; }

/* Outline */
.olfx-outline { display: grid; gap: 1rem; }
.olfx-outline__sec h3 { font-size: .95rem; margin: 0 0 .35rem; color: var(--olfx-muted); font-weight: 600; }
.olfx-outline ol { list-style: none; margin: 0; padding: 0; border: 1px solid var(--olfx-line); border-radius: 14px; overflow: hidden; background: var(--olfx-surface); }
.olfx-outline__item + .olfx-outline__item { border-top: 1px solid var(--olfx-line); }
.olfx-outline__item a { display: flex; align-items: center; gap: .65rem; padding: .7rem .85rem; color: inherit; text-decoration: none; font-size: .95rem; }
.olfx-outline__item a:hover { background: var(--olfx-bg); }
.olfx-outline__item.is-current a { background: color-mix(in srgb, var(--olfx-accent) 10%, transparent); font-weight: 600; }
.olfx-outline__status { color: var(--olfx-muted); display: grid; }
.olfx-outline__item.is-done .olfx-outline__status { color: #3f7a4c; }
.olfx-outline__title { flex: 1; min-width: 0; }
.olfx-outline__min, .olfx-outline__tag { font-size: .78rem; color: var(--olfx-muted); white-space: nowrap; }
.olfx-outline__tag { border: 1px solid var(--olfx-line); border-radius: 999px; padding: 0 .45rem; }
.olfx-outline--page { max-width: 46rem; }

/* Lesson */
.olfx-lesson__grid { display: grid; gap: 1.5rem; }
@media (min-width: 960px) { .olfx-lesson__grid { grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; } .olfx-lesson__side { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; } }
.olfx-lesson__main { display: grid; gap: 1.25rem; min-width: 0; }
.olfx-lesson__head p { margin: .4rem 0 0; }
.olfx-outline-box { border: 1px solid var(--olfx-line); border-radius: 16px; background: var(--olfx-bg); }
.olfx-outline-box > summary { cursor: pointer; padding: .85rem 1rem; display: grid; gap: .4rem; list-style: none; }
.olfx-outline-box > summary::-webkit-details-marker { display: none; }
.olfx-outline-box__title { font-weight: 700; }
.olfx-outline-box__prog { display: grid; gap: .25rem; font-size: .82rem; color: var(--olfx-muted); }
.olfx-outline-box .olfx-outline { padding: 0 .75rem .85rem; }
.olfx-lesson__nav { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; padding-top: 1rem; border-top: 1px solid var(--olfx-line); }
.olfx-lesson__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.olfx-lesson__status { margin: 0; min-height: 1.2em; font-size: .88rem; color: var(--olfx-muted); }
.olfx-btn.is-hidden { display: none; }
.olfx-learn-lock { max-width: 34rem; margin: 2rem auto; text-align: center; display: grid; gap: .8rem; justify-items: center; padding: 2rem 1.5rem; border: 1px solid var(--olfx-line); border-radius: var(--olfx-radius); background: var(--olfx-bg); }
.olfx-learn-lock svg { width: 40px; height: 40px; color: var(--olfx-muted); }
.olfx-learn-lock h1 { font-size: 1.5rem; }

/* Video */
.olfx-video { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #111; }
.olfx-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.olfx-video__play { position: absolute; inset: 0; width: 100%; border: 0; background: linear-gradient(135deg, #1b1f27, #2b3140); color: #fff; display: grid; place-content: center; justify-items: center; gap: .5rem; cursor: pointer; font: inherit; }
.olfx-video__play svg { color: var(--olfx-accent); transition: transform .15s; }
.olfx-video__play:hover svg, .olfx-video__play:focus-visible svg { transform: scale(1.08); }
.olfx-video__play:focus-visible { outline: 3px solid var(--olfx-accent); outline-offset: -3px; }

/* Quiz */
.olfx-quiz { display: grid; gap: 1rem; }
.olfx-quiz__q { border: 1px solid var(--olfx-line); border-radius: 14px; padding: 1rem 1.1rem; margin: 0; display: grid; gap: .5rem; min-width: 0; }
.olfx-quiz__q legend { font-weight: 600; padding: 0 .35rem; }
.olfx-quiz__q legend span { color: var(--olfx-muted); }
.olfx-quiz__opt { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .7rem; border: 1px solid var(--olfx-line); border-radius: 10px; cursor: pointer; }
.olfx-quiz__opt:hover { border-color: var(--olfx-accent); }
.olfx-quiz__opt input { margin-top: .25rem; accent-color: var(--olfx-accent); }
.olfx-quiz__q.is-right { border-color: #3f7a4c; background: #f1f7f0; }
.olfx-quiz__q.is-wrong { border-color: var(--olfx-danger); background: #fbefed; }
.olfx-quiz__why { margin: .25rem 0 0; font-size: .9rem; color: var(--olfx-ink); }
.olfx-quiz__result { padding: .9rem 1.1rem; border-radius: 12px; border: 1px solid var(--olfx-line); display: grid; gap: .5rem; justify-items: start; }
.olfx-quiz__result.is-good { border-color: #3f7a4c; background: #f1f7f0; color: #2f5d3a; }
.olfx-quiz__result.is-bad { border-color: var(--olfx-danger); background: #fbefed; color: #86281f; }
.olfx-learn-certs { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.olfx-learn-certs li { display: flex; gap: .5rem; align-items: center; }

/* Certificate */
.olfx-cert { max-width: 48rem; margin: 1rem auto; padding: 3rem 2rem; text-align: center; border: 2px solid var(--olfx-accent); border-radius: 18px; outline: 1px solid var(--olfx-line); outline-offset: 8px; display: grid; gap: .5rem; background: var(--olfx-surface); }
.olfx-cert h1 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); margin: .2rem 0 1rem; }
.olfx-cert__site { margin: 0; letter-spacing: .12em; text-transform: uppercase; font-size: .85rem; color: var(--olfx-muted); }
.olfx-cert__line { margin: 0; color: var(--olfx-muted); }
.olfx-cert__name { margin: .2rem 0; font-size: clamp(1.8rem, 1.3rem + 2.4vw, 2.8rem); font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.olfx-cert__course { margin: .2rem 0 .6rem; font-size: 1.4rem; font-weight: 600; }
.olfx-cert__code { margin: 1.2rem 0 0; font-size: .85rem; color: var(--olfx-muted); }
.olfx-cert__actions { text-align: center; display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
@media print {
	.olfx-cert__actions, .olfx-learn-crumbs { display: none !important; }
	body.olfx-learn-page header, body.olfx-learn-page footer, body.olfx-learn-page .olfx-tabbar, body.olfx-learn-page .olfx-sidenav-wrap { display: none !important; }
	.olfx-cert { border-color: #333; box-shadow: none; }
}
.olfx-inline-form { display: inline; margin: 0; }