[hidden] { display: none !important; }
#view:focus { outline: none; }
:root {
--board: #FFFFFF;
--sheet: #FFFFFF;
--ink: #1C251B;
--ink-2: #485445;
--ink-3: #6F7A69;
--rule: #D5D9D0;
--moss: #5C6B5E;
--moss-ink: #3E4A40;
--moss-wash: #D3DDBF;
--label: #EAE6E3;
--tape: rgba(196, 198, 190, 0.55);
--scrim: rgba(28, 37, 27, 0.62);
--board-glass: rgba(255, 255, 255, 0.9);
--plate-ground: #1E231E; --plate-ink: #F4F3EE; --plate-ink-2: rgba(236, 238, 232, 0.8);
--flora-op: 0; --flora-blend: soft-light; 
color-scheme: only light; 
--wordmark-accent: #F2F3EE; 
--on-photo: #F2F3EE; --on-photo-2: rgba(236, 238, 232, 0.8); --on-photo-accent: #D3DDBF;
--grain: none;
--warm: #7A6352;
--cool: #4F7F86;
--ok: #3D6A3E; --ok-wash: #DAE7D5;
--food: #3F6A62; --food-wash: #D7E6E1;
--care: #6F5B45; --care-wash: #E7E1D8;
--avoid: #84483D; --avoid-wash: #E9DFDB;
--late: #574C8C; --late-wash: #E2DDF0;
--shadow: 0 1px 2px rgba(28, 37, 27, 0.08), 0 6px 18px -10px rgba(28, 37, 27, 0.25);
--display: "IM Fell English", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
--body: "Literata", "Iowan Old Style", Georgia, "Times New Roman", serif;
--mono: "Literata", "Iowan Old Style", Georgia, serif; 
--type: "Courier Prime", "Courier New", ui-monospace, monospace; 
--clin: "Literata", "Iowan Old Style", Georgia, serif;
}
* { box-sizing: border-box; }
body {
background: var(--board) var(--grain);
color: var(--ink);
font-family: var(--body);
font-size: 16px;
line-height: 1.55;
padding-left: max(16px, env(safe-area-inset-left, 0px));
padding-right: max(16px, env(safe-area-inset-right, 0px));
padding-block: 0 40px;
-webkit-font-smoothing: antialiased;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--board); }
a { color: var(--moss-ink); text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; border-radius: 4px; }
.wrap { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.flora { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: url(//mossherbalism.com/wp-content/plugins/moss-herbal/assets/img/flora-tall.jpg) center / cover no-repeat; opacity: var(--flora-op); mix-blend-mode: var(--flora-blend); }
@media (min-aspect-ratio: 1/1) { .flora { background-image: url(//mossherbalism.com/wp-content/plugins/moss-herbal/assets/img/flora-wide.jpg); } }
.masthead { position: relative; z-index: 1; margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px))); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 38px 54px; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35);
background: linear-gradient(90deg, rgba(22, 15, 10, 0.34) 0%, rgba(22, 15, 10, 0.12) 55%, rgba(22, 15, 10, 0) 80%), linear-gradient(180deg, rgba(22, 15, 10, 0.55) 0%, rgba(22, 15, 10, 0.28) 60%, rgba(22, 15, 10, 0.10) 100%), url(//mossherbalism.com/wp-content/plugins/moss-herbal/assets/img/hero.jpg) center 40% / cover no-repeat;
-webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 58%, transparent 100%); }
.mast-inner { max-width: 760px; margin: 0 auto; }
.masthead .kicker { color: var(--on-photo-2); }
.masthead .wordmark { color: var(--on-photo); }
.masthead .wordmark h1, .masthead .wordmark .mast-title { font-size: clamp(36px, 8vw, 48px); }
.masthead .wordmark h1 em, .masthead .wordmark .mast-title em { color: var(--wordmark-accent); }
.masthead .preview { color: var(--on-photo-2); }
.masthead .seg { background: rgba(24, 17, 12, 0.45); border-color: rgba(236, 238, 232, 0.35); }
.masthead .seg button { color: var(--on-photo); text-shadow: none; }
.masthead .seg button[aria-pressed="true"] { background: var(--on-photo-accent); color: #1C251B; }
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--board-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding-block: 10px 10px; border-bottom: 1px solid var(--rule); }
.brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.btnrow { display: flex; gap: 8px; flex-wrap: wrap; }
.wordmark { display: flex; flex-direction: column; gap: 0; text-decoration: none; color: var(--ink); }
.kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.wordmark h1, .wordmark .mast-title { margin: 0; font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1.05; letter-spacing: 0.005em; }
.preview { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; padding: 2px; background: var(--sheet); }
.seg button { border: 0; background: transparent; padding: 4px 10px; border-radius: 999px; cursor: pointer; font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--moss); color: var(--sheet); }
.preview .acct { margin-left: 4px; font-family: var(--mono); color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.masthead .preview .acct { color: var(--on-photo); }
.search { position: relative; }
.search input { width: 100%; font: inherit; font-size: 16px; padding: 11px 14px 11px 40px; border-radius: 10px; border: 1px solid var(--rule); background: var(--sheet); color: var(--ink); }
.search input::placeholder { color: var(--ink-3); }
.search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
.results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow); padding: 8px; max-height: min(60vh, 460px); overflow-y: auto; }
.results h3 { margin: 6px 8px 4px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; }
.results a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.results a:hover, .results a:focus-visible { background: var(--moss-wash); }
.results .sub { color: var(--ink-3); font-style: italic; font-size: 14px; text-align: right; }
.results .none { padding: 10px; color: var(--ink-2); font-size: 15px; }
.tabs { display: flex; gap: 4px; margin-top: 12px; }
.tabs a { flex: 1; text-align: center; padding: 8px 6px; border-radius: 8px; text-decoration: none; color: var(--ink-2); font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid transparent; }
.tabs a[aria-current="page"] { color: var(--moss-ink); background: var(--sheet); border-color: var(--rule); }
main { padding-top: 18px; outline: none; }
@media (prefers-reduced-motion: no-preference) { main.enter { animation: rise 0.22s ease-out; } }
@keyframes rise { from { opacity: 0.4; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
h2.view-title, h1.view-title { font-family: var(--display); font-weight: 400; font-size: 32px; line-height: 1.1; margin: 4px 0 8px; text-wrap: balance; }
.lede { color: var(--ink-2); max-width: 62ch; margin: 0 0 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; }
.chip { border: 1px solid var(--rule); background: var(--sheet); border-radius: 999px; padding: 5px 12px; font-family: var(--mono); font-size: 12px; cursor: pointer; color: var(--ink-2); }
.chip[aria-pressed="true"] { background: var(--moss-wash); border-color: var(--moss); color: var(--moss-ink); }
.chip-locked { color: var(--ink-3); border-style: dashed; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 620px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); background: var(--sheet); border-radius: 6px; box-shadow: var(--shadow); overflow: hidden; min-width: 0; }
.card:hover .plate img { filter: saturate(1) brightness(1); }
.plate { position: relative; aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--rule);
background: radial-gradient(120% 90% at 50% 35%, rgba(236, 238, 232, 0.07), rgba(0, 0, 0, 0) 60%), var(--plate-ground); }
.plate img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.92) brightness(0.97); }
.plate .shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(22, 17, 13, 0) 0%, rgba(22, 17, 13, 0) 40%, rgba(22, 17, 13, 0.46) 63%, rgba(22, 17, 13, 0.84) 100%); }
.plate::before { content: ""; position: absolute; inset: 9px 9px 9px 13px; z-index: 2; border: 1px solid rgba(236, 238, 232, 0.16); pointer-events: none; }
.plate .temp { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; z-index: 3; }
.pname { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 16px 18px 20px; display: flex; flex-direction: column; gap: 2px; color: var(--plate-ink); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45); }
.pname .n { font-family: var(--display); font-size: clamp(22px, 5.6vw, 29px); line-height: 1.02; text-wrap: balance; }
.pname .l { font-family: var(--display); font-style: italic; font-size: clamp(13px, 3.4vw, 15px); line-height: 1.25; color: var(--plate-ink-2); }
.pname .src { margin-top: 7px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(236, 238, 232, 0.6); }
.t-warm { background: var(--warm); } .t-cool { background: var(--cool); } .t-neutral { background: var(--rule); }
.t-both { background: linear-gradient(var(--warm) 50%, var(--cool) 50%); }
.tape { position: absolute; width: 42px; height: 14px; background: var(--tape); z-index: 1; }
.tape.a { top: 6px; left: -8px; transform: rotate(-38deg); }
.tape.b { top: 6px; right: -8px; transform: rotate(38deg); }
.card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.card-name { font-family: var(--display); font-size: 21px; line-height: 1.1; }
.card-tag { font-size: 14px; color: var(--ink-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.en { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.back { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 13px; text-decoration: none; color: var(--ink-2); margin-bottom: 12px; }
.sheet { position: relative; background: var(--sheet); border-radius: 6px; box-shadow: var(--shadow); padding: 18px; }
.specimen { position: relative; max-width: 420px; margin: 0 auto; }
.specimen .plate { border: 1px solid var(--rule); border-radius: 2px; }
.specimen .pname { padding: 0 22px 52px 26px; }
.specimen .pname .n { font-size: clamp(38px, 9.5vw, 54px); }
.specimen .pname .l { font-size: clamp(18px, 4.8vw, 23px); }
.specimen .plate::before { inset: 12px 12px 12px 16px; }
.specimen .plate .shade { background: linear-gradient(180deg, rgba(22, 17, 13, 0) 0%, rgba(22, 17, 13, 0) 32%, rgba(22, 17, 13, 0.5) 56%, rgba(22, 17, 13, 0.86) 100%); }
.detlabel { position: relative; margin: -34px 0 0 auto; width: min(78%, 280px); background: var(--label); border: 1px solid var(--rule); padding: 10px 12px; font-family: var(--mono); font-size: 12px; line-height: 1.45; color: var(--ink); box-shadow: var(--shadow); z-index: 2; }
.detlabel .h { letter-spacing: 0.12em; text-transform: uppercase; font-size: 10px; color: var(--ink-3); border-bottom: 1px solid var(--rule); padding-bottom: 4px; margin-bottom: 6px; }
.detlabel i { font-family: var(--display); font-size: 15px; }
.platelink { display: block; margin-top: 10px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.title-block { margin-top: 18px; }
.title-block h2, .title-block h1 { font-family: var(--display); font-weight: 400; font-size: clamp(38px, 10vw, 54px); line-height: 1; margin: 0; text-wrap: balance; }
.latin { font-family: var(--display); font-style: italic; font-size: 22px; color: var(--ink-2); margin-top: 4px; }
.aka { font-size: 14px; color: var(--ink-3); margin-top: 4px; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pill { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 999px; padding: 4px 10px; border: 1px solid var(--rule); color: var(--ink-2); background: var(--sheet); }
.pill.warm { border-color: var(--warm); color: var(--warm); }
.pill.cool { border-color: var(--cool); color: var(--cool); }
.pill.low { border-color: var(--care); color: var(--care); }
.pill.risk { border-color: var(--avoid); color: var(--avoid); }
.lowtag { font-family: var(--clin); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--care); border: 1px solid var(--care); border-radius: 4px; padding: 1px 5px; margin-left: 4px; vertical-align: 2px; white-space: nowrap; }
.srcnote { margin: 8px 0 0; }
.tagline { font-style: italic; font-size: 20px; line-height: 1.45; margin: 18px 0 8px; color: var(--ink); max-width: 60ch; text-wrap: pretty; }
.about { color: var(--ink-2); max-width: 64ch; margin: 0; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 16px 0 0; font-size: 14px; }
.facts dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
.facts dd { margin: 0; color: var(--ink-2); min-width: 0; }
section.block { margin-top: 30px; }
section.block > h3 { font-family: var(--display); font-weight: 400; font-size: 26px; margin: 0 0 4px; display: flex; align-items: baseline; gap: 10px; }
section.block > h3 .n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--ink-3); text-transform: uppercase; }
.legend { font-size: 13px; color: var(--ink-3); margin: 0 0 10px; }
.evkey { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13px; color: var(--ink-2); margin: 0 0 14px; }
.evkey .k { display: inline-flex; align-items: center; gap: 7px; }
.uses { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.uses li { padding: 12px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 4px; }
.uses .row1 { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.cond-link { font-family: var(--display); font-size: 20px; text-decoration: none; color: var(--moss-ink); }
.cond-link:hover { text-decoration: underline; }
.uses p { margin: 0; color: var(--ink-2); }
.ev { display: inline-flex; gap: 4px; }
.ev span { font-family: var(--mono); font-size: 11px; width: 22px; height: 22px; display: inline-grid; place-items: center; border: 1px solid var(--rule); border-radius: 4px; color: var(--ink-3); }
.ev span.on { border-color: var(--moss); color: var(--moss-ink); background: var(--moss-wash); }
.prep { display: grid; gap: 10px; margin-top: 10px; }
.prep .item { background: var(--sheet); border-left: 3px solid var(--moss); padding: 10px 12px; border-radius: 0 6px 6px 0; }
.prep .item b { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--moss-ink); margin-bottom: 2px; font-weight: 700; }
.prep .item p { margin: 0; color: var(--ink-2); }
.lock { margin-top: 12px; background: var(--sheet); border: 1px dashed var(--moss); border-radius: 10px; padding: 14px; display: grid; gap: 8px; }
.lock p { margin: 0; color: var(--ink-2); }
.lock .row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--moss); background: var(--moss); color: var(--sheet); text-decoration: none; font-family: var(--mono); font-size: 13px; cursor: pointer; }
.btn.ghost { background: transparent; color: var(--moss-ink); }
.cautions { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.cautions li { padding-left: 18px; position: relative; color: var(--ink-2); }
.cautions li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 7px; height: 7px; border-radius: 1px; background: var(--care); transform: rotate(45deg); }
.safety { display: grid; gap: 10px; margin-top: 10px; }
.safety .row { background: var(--sheet); border-radius: 8px; padding: 12px; display: grid; gap: 6px; }
.safety .who { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.safety .who b { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; }
.safety p { margin: 0; color: var(--ink-2); }
.status { font-family: var(--mono); font-size: 12px; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.s-ok { background: var(--ok-wash); color: var(--ok); }
.s-food { background: var(--food-wash); color: var(--food); }
.s-care { background: var(--care-wash); color: var(--care); }
.s-avoid { background: var(--avoid-wash); color: var(--avoid); }
.s-late { background: var(--late-wash); color: var(--late); }
.prose { max-width: 64ch; color: var(--ink); }
.prose.drop::first-letter { font-family: var(--display); float: left; font-size: 3.4em; line-height: 0.85; padding: 4px 8px 0 0; color: var(--moss); }
.twocol { display: grid; gap: 18px; }
@media (min-width: 620px) { .twocol { grid-template-columns: 1fr 1fr; } }
.twocol > div { min-width: 0; }
.twocol h4 { font-family: var(--display); font-weight: 400; font-size: 22px; margin: 0 0 4px; }
.twocol p { margin: 0; color: var(--ink-2); }
.cta { margin-top: 30px; background: var(--moss-wash); border-radius: 10px; padding: 16px; display: grid; gap: 8px; }
.cta p { margin: 0; color: var(--ink); }
.pager { display: flex; justify-content: space-between; gap: 10px; margin-top: 24px; font-family: var(--mono); font-size: 13px; }
.pager a { text-decoration: none; color: var(--ink-2); }
.groups { display: grid; gap: 22px; }
.group h3 { font-family: var(--display); font-weight: 400; font-size: 24px; margin: 0 0 6px; }
.clist { list-style: none; margin: 0; padding: 0; background: var(--sheet); border-radius: 8px; box-shadow: var(--shadow); }
.clist li + li { border-top: 1px solid var(--rule); }
.clist a { display: flex; justify-content: space-between; gap: 10px; padding: 11px 14px; text-decoration: none; color: var(--ink); }
.clist a:hover { background: var(--moss-wash); }
.clist .cnt { font-family: var(--mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.lk { width: 12px; height: 12px; vertical-align: -1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mres.cgate { margin-top: 6px; min-height: 420px; }
.plist { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.plist li { background: var(--sheet); border-radius: 8px; box-shadow: var(--shadow); padding: 12px 14px; display: grid; gap: 6px; }
.plist .r1 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plist .pn { font-family: var(--display); font-size: 22px; text-decoration: none; color: var(--ink); }
.plist .pn:hover { color: var(--moss-ink); }
.plist .pl { font-family: var(--display); font-style: italic; color: var(--ink-3); font-size: 16px; }
.plist p { margin: 0; color: var(--ink-2); }
.meta-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fit { font-family: var(--mono); font-size: 12px; border-radius: 999px; padding: 3px 10px; border: 1px solid currentColor; white-space: nowrap; }
.fit.f4 { color: var(--ok); } .fit.f2 { color: var(--moss-ink); } .fit.f0 { color: var(--ink-3); } .fit.fn { color: var(--care); }
.reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.reasons span { font-size: 13px; padding: 2px 8px; border-radius: 6px; background: var(--moss-wash); color: var(--moss-ink); }
.reasons span.off { background: var(--care-wash); color: var(--care); }
.pair { font-size: 14px; color: var(--ink-2); font-style: italic; }
.dim { opacity: 0.55; }
.mform { background: var(--sheet); border-radius: 10px; box-shadow: var(--shadow); padding: 16px; display: grid; gap: 16px; }
.mform label.l, .mform legend { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 6px; padding: 0; }
.mform fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.mform select { width: 100%; font: inherit; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--rule); background: var(--board); color: var(--ink); }
.opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.opts button { border: 1px solid var(--rule); background: var(--board); border-radius: 8px; padding: 8px 6px; cursor: pointer; text-align: center; display: grid; gap: 2px; min-width: 0; }
.opts button b { font-family: var(--display); font-weight: 400; font-size: 18px; }
.opts button small { font-size: 12px; color: var(--ink-3); line-height: 1.3; }
.opts button[aria-pressed="true"] { border-color: var(--moss); background: var(--moss-wash); }
.also { display: flex; gap: 6px; flex-wrap: wrap; }
.mres { position: relative; margin-top: 16px; }
.mres.locked { min-height: 360px; }
.legend-inline { display: inline-flex; align-items: center; gap: 6px; }
.legend-inline i { display: inline-block; width: 4px; height: 12px; border-radius: 1px; }
.mres.locked .inner { filter: blur(5px); pointer-events: none; user-select: none; }
.mres .gate { position: absolute; inset: 20px 0 auto; margin: 0 auto; max-width: 420px; background: var(--sheet); border: 1px solid var(--moss); border-radius: 12px; box-shadow: var(--shadow); padding: 16px; display: grid; gap: 10px; z-index: 2; }
.mres .gate h4 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 24px; }
.mres .gate p { margin: 0; color: var(--ink-2); }
.empty { background: var(--sheet); border-radius: 8px; padding: 16px; color: var(--ink-2); }
footer.foot { margin-top: 44px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--ink-3); display: grid; gap: 6px; }
footer.foot a { color: var(--ink-2); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.consent { position: fixed; inset: 0; z-index: 50; background: var(--scrim); display: grid; place-items: center; overflow-y: auto;
padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.consent-card { width: 100%; max-width: 560px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow); padding: 22px 20px 18px; display: grid; gap: 14px; }
.consent-card h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(30px, 8vw, 38px); line-height: 1.05; text-wrap: balance; }
.consent-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.consent-card li { padding-left: 16px; border-left: 3px solid var(--moss-wash); color: var(--ink-2); }
.consent-card li b { display: block; color: var(--ink); font-weight: 600; }
.agree { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 10px; background: var(--label); cursor: pointer; }
.agree input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--moss); flex: none; cursor: pointer; }
.consent-card .btn { justify-self: start; font-size: 14px; padding: 11px 16px; }
.consent-card .btn:disabled { opacity: 0.45; cursor: not-allowed; }
.clin h2.view-title, section.block.clin > h3, .clin .group h3, .clin .mres .gate h4, .clin .res-h, .consent-card.clin h2, .clin h1.view-title { font-family: var(--body); font-weight: 600; letter-spacing: -0.005em; }
.clin h2.view-title, .clin h1.view-title { font-size: clamp(26px, 6.4vw, 30px); line-height: 1.15; }
section.block.clin > h3 { font-size: 20px; }
.clin .group h3 { font-size: 18px; }
.clin .mres .gate h4, .clin .res-h { font-size: 20px; }
.consent-card.clin h2 { font-size: clamp(26px, 7vw, 32px); line-height: 1.1; }
.clin .eyebrow, .clin .kicker, section.block.clin > h3 .n, .clin .chip, .clin .status, .clin .fit, .clin .ev span, .clin .prep .item b,
.clin .safety .who b, .clin .mform label.l, .clin .mform legend, .clin .clist .cnt, .clin .btn, .clin .back, .clin .evkey, .clin .reasons span { font-family: var(--clin); }
.clin .eyebrow, .clin .kicker, .clin .prep .item b, .clin .safety .who b, .clin .mform label.l, .clin .mform legend, section.block.clin > h3 .n { letter-spacing: 0.08em; }
.clin .prep .item b { font-weight: 600; }
.clin .cond-link, .clin .plist .pn { font-family: var(--body); font-weight: 600; }
.clin .cond-link { font-size: 17px; }
.clin .plist .pn { font-size: 18px; }
.clin .plist .pl { font-family: var(--body); font-size: 14px; }
.consent-card.clin li b { font-family: var(--body); font-weight: 600; font-size: 16px; }
.prolock { margin-top: 12px; border: 1px dashed var(--rule); border-radius: 10px; padding: 12px 14px; background: var(--sheet); display: grid; gap: 10px; }
.prolock p { margin: 0; color: var(--ink-2); font-size: 15px; }
.prolock .row { display: flex; flex-wrap: wrap; gap: 8px; }
.probadge { display: inline-block; font-family: var(--clin); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sheet); background: var(--moss-ink); border-radius: 4px; padding: 2px 7px; vertical-align: 2px; }
.prodet { margin-top: 14px; border-top: 1px solid var(--rule); padding-top: 14px; display: grid; gap: 16px; }
.prohead { font-family: var(--clin); font-size: 13px; color: var(--ink-3); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.proname { margin: 0; font-family: var(--body); font-weight: 600; font-size: 17px; color: var(--ink); }
.proname i { font-family: var(--body); font-weight: 400; color: var(--ink-3); }
.prodl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 16px; }
.prodl dt { font-family: var(--clin); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-top: 8px; }
.prodl dd { margin: 0; color: var(--ink-2); font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 620px) { .prodl { grid-template-columns: 160px minmax(0, 1fr); } .prodl dt { margin-top: 0; padding-top: 3px; padding-bottom: 8px; } .prodl dd { padding-bottom: 8px; } }
.prodl ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.prodl a { color: var(--moss-ink); }
.prog { margin: 14px 0 2px; padding-bottom: 5px; border-bottom: 1px solid var(--rule); font-family: var(--clin); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--moss-ink); }
.prorow > .prog:first-child, .prorow > .proname + .prog { margin-top: 4px; }
.conf { font-family: var(--clin); font-weight: 600; color: var(--ink); }
.ixlist { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
.ixlist li { background: var(--sheet); border-radius: 8px; padding: 10px 12px; display: grid; gap: 4px; }
.ixlist .r1 { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ixmed { font-family: var(--body); font-weight: 600; font-size: 16px; color: var(--ink); }
.ixlist p { margin: 0; color: var(--ink-2); }
.ixlist small { color: var(--ink-3); font-family: var(--clin); font-size: 12px; }
.ixlv { font-family: var(--clin); font-size: 12px; font-weight: 500; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.ixlv.avoid { background: var(--avoid-wash); color: var(--avoid); }
.ixlv.care { background: var(--care-wash); color: var(--care); }
.ixlv.monitor { background: var(--moss-wash); color: var(--moss-ink); }
.ixlv.space { background: var(--label); color: var(--ink-2); }
.ixrow { display: flex; gap: 6px 8px; align-items: baseline; flex-wrap: wrap; font-size: 15px; color: var(--ink-2); margin-top: 6px; }
.ixrow b { font-family: var(--clin); font-weight: 600; color: var(--ink); }
.rxctl { margin: 14px 0 18px; display: grid; gap: 6px; max-width: 420px; }
.rxctl label { font-family: var(--clin); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.rxctl select { width: 100%; font: inherit; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--rule); background: var(--board); color: var(--ink); }
.picker { position: relative; }
.pick-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; font-family: var(--body); font-size: 17px; line-height: 1.3; color: var(--ink); background: var(--sheet); border: 1px solid var(--rule); border-radius: 8px; padding: 12px 14px; cursor: pointer; }
.pick-btn:hover { border-color: var(--moss); }
.picker.open .pick-btn { border-color: var(--moss); box-shadow: 0 0 0 3px var(--moss-wash); }
.pick-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-chev { flex: none; width: 9px; height: 9px; margin-right: 3px; border-right: 2px solid var(--moss-ink); border-bottom: 2px solid var(--moss-ink); transform: translateY(-3px) rotate(45deg); transition: transform 0.15s; }
.picker.open .pick-chev { transform: translateY(2px) rotate(-135deg); }
.pick-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; max-height: min(440px, 62vh); overflow-y: auto; overscroll-behavior: contain; background: var(--sheet); border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 16px 36px -14px rgba(28, 37, 27, 0.38); padding: 4px 6px 8px; }
.pick-gh { font-family: var(--clin); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding: 12px 10px 4px; }
.pick-opt { display: block; width: 100%; text-align: left; font-family: var(--body); font-size: 16px; line-height: 1.35; color: var(--ink); background: none; border: 0; border-radius: 6px; padding: 8px 10px; cursor: pointer; }
.pick-opt:hover, .pick-opt:focus-visible { background: var(--moss-wash); outline: none; }
.pick-opt[aria-selected="true"] { background: var(--moss-wash); font-weight: 600; }
.pick-opt[aria-selected="true"]::after { content: ""; display: inline-block; width: 5px; height: 10px; margin-left: 10px; border-right: 2px solid var(--moss-ink); border-bottom: 2px solid var(--moss-ink); transform: translateY(-2px) rotate(45deg); }
.res-h .n { font-family: var(--clin); font-weight: 500; font-size: 13px; color: var(--ink-3); margin-left: 6px; }
.rxsec + .rxsec { margin-top: 18px; }
.clear-names { color: var(--ink-2); margin: 6px 0 0; }
@media (max-width: 440px) { .tabs a { font-size: 11.5px; letter-spacing: 0.02em; padding: 8px 2px; } }
.clin .opts button b { font-family: var(--clin); font-weight: 600; font-size: 16px; }
.consent-card .fine { margin: 0; font-size: 13px; color: var(--ink-3); }
.linkish { border: 0; background: none; padding: 0; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; }
html.locked, html.locked body { overflow: hidden; }
.vphoto { margin: 4px 0 22px; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 7; max-width: 100%; box-shadow: var(--shadow); background: var(--moss-wash); }
.vphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pphoto { margin: 10px 0 16px; }
.pphoto img { width: 100%; max-height: 460px; object-fit: cover; border-radius: 8px; display: block; box-shadow: var(--shadow); }
.pphoto figcaption { font-size: 13px; color: var(--ink-3); margin-top: 6px; font-style: italic; }
.consent-photo { margin: -22px -20px 2px; height: 108px; background: var(--moss-wash) url(//mossherbalism.com/wp-content/plugins/moss-herbal/assets/img/consent.jpg) center / cover no-repeat; border-radius: 14px 14px 0 0; }
.card, .sheet, .plist li, .mform, .clist, .consent-card, .lock, .empty, .prep .item, .cta { background-image: var(--grain); }
.kicker, .preview, .seg button, .results h3, .tabs a, .eyebrow, .chip, .pname .src, .en, .back, .platelink, .pill, .lowtag, .facts dt, section.block > h3 .n, .ev span, .prep .item b, .safety .who b, .status, .pager, .clist .cnt, .fit, .mform label.l, .mform legend, .probadge, .prodl dt, .prog, .rxctl label, .pick-gh, .evkey {
text-transform: none !important; font-variant-caps: all-small-caps; letter-spacing: 0.07em !important; }
.detlabel, .detlabel .h { font-family: var(--type); }
.chip, .pill, .lowtag, .probadge, .status, .ixlv { border-radius: 3px !important; }
.card, .sheet, .mform, .clist, .plist li, .prep .item, .lock, .prolock, .consent-card, .vphoto, .pick-btn, .pick-list, .search input, .tabs a { border-radius: 3px !important; }
.card, .sheet, .plist li, .mform, .clist { box-shadow: 0 0 0 1px var(--rule) !important; }
.tabs a { font-size: 15px !important; } .chip { font-size: 14.5px !important; } .eyebrow, .kicker { font-size: 14px !important; }
.pill { font-size: 14px !important; } .en { font-size: 13px !important; } .facts dt, .prodl dt, .prog, .status, .clist .cnt, .fit, .pick-gh { font-size: 13.5px !important; }
.mform label.l, .mform legend, .rxctl label { font-size: 14px !important; } .seg button, .preview { font-size: 14px !important; } .back { font-size: 14.5px !important; }
.platelink { font-size: 13px !important; } .pname .src { font-size: 11.5px !important; } .prep .item b, .safety .who b { font-size: 14px !important; }
.probadge { font-size: 12.5px !important; } .lowtag { font-size: 12px !important; } .ev span, .evkey { font-size: 13px !important; }
.sitebar { position: relative; z-index: 6; margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px))); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 8px; background: #FFFFFF; border-bottom: 1px solid var(--rule); }
.sitebar .sb-in { max-width: 760px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; }
.sitebar .sb-home { display: block; line-height: 0; border-radius: 2px; }
.sitebar .sb-home img { display: block; width: auto; height: 40px; max-width: none; }
.sitebar .sb-links { display: flex; align-items: center; gap: 18px; font-family: var(--body); font-size: 15px; line-height: 1.2; }
.sitebar .sb-links a { color: var(--ink); text-decoration: none; white-space: nowrap; }
.sitebar .sb-links a:hover { color: var(--moss-ink); text-decoration: underline; }
.sitebar .sb-links .sb-cta { padding: 8px 14px; border: 1px solid var(--moss); border-radius: 2px; background: var(--moss); color: #FFFFFF; }
.sitebar .sb-links .sb-cta:hover { background: var(--moss-ink); border-color: var(--moss-ink); color: #FFFFFF; text-decoration: none; }
.preview { flex-wrap: wrap; row-gap: 8px; max-width: 100%; }
.preview .acct { white-space: nowrap; }
@media (max-width: 520px) { .sitebar { padding-block: 6px; } .sitebar .sb-in { gap: 6px 12px; } .sitebar .sb-home img { height: 34px; } .sitebar .sb-links { gap: 12px; font-size: 14px; } .sitebar .sb-links .sb-cta { padding: 7px 10px; } }