/* Scoped, mobile-first companion to EssaColor's warm neutral result page. */
.reference-section{margin:38px 0 0;padding:28px 0 8px;border-top:1px solid var(--line,#DDD9D1);color:var(--ink,#292622);min-width:0}
.reference-section *{box-sizing:border-box}
.reference-section__header{max-width:650px;margin-bottom:20px}
.reference-section__eyebrow{font-size:10px;letter-spacing:1.7px;color:var(--muted,#756E65);margin:0 0 10px}
.reference-section__header h3{font-size:24px;font-weight:450;line-height:1.4;letter-spacing:-.3px;margin:0 0 9px}
.reference-section__summary{font-size:13px;line-height:1.8;color:var(--muted,#756E65);margin:0}
.reference-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:stretch}
.reference-card{min-width:0;display:flex;flex-direction:column;border:1px solid var(--line,#DDD9D1);background:var(--paper,#FCFBF8)}
.reference-card__body{display:flex;flex:1;flex-direction:column;align-items:flex-start;padding:20px;min-width:0}
.reference-card__badge{max-width:100%;padding:5px 8px;background:#EEEFE8;color:#52614F;font-size:10px;line-height:1.5;overflow-wrap:anywhere}
.reference-card[data-match-kind="main_only"] .reference-card__badge,.reference-card[data-match-kind="secondary_only"] .reference-card__badge{background:#F1EDE6;color:#796B56}
.reference-card__title{font-size:16px;font-weight:500;line-height:1.55;margin:13px 0 6px;overflow-wrap:anywhere}
.reference-card__source{font-size:11px;line-height:1.6;color:var(--muted,#756E65);margin:0 0 16px;overflow-wrap:anywhere}
.reference-card__swatches{display:flex;flex-wrap:wrap;gap:10px 14px;padding:0 0 12px}
.reference-card__swatch{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#665E52;line-height:1.5}
.reference-card__swatch i{display:block;flex:none;width:14px;height:14px;background:var(--reference-swatch);border:1px solid #00000012;border-radius:50%}
.reference-card__reasons{margin:0 0 14px;padding:0;list-style:none;color:#615C52;font-size:12px;line-height:1.75}
.reference-card__reasons li+li{margin-top:3px}
.reference-card__dates{color:var(--muted,#756E65);font-size:10px;line-height:1.75;margin:auto 0 10px}
.reference-card__text-only{font-size:10px;color:var(--muted,#756E65);line-height:1.6;margin:0 0 8px}
.reference-card__link{display:inline-flex;width:100%;min-height:44px;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line,#DDD9D1);color:var(--accent,#3F4C45);font-size:12px;text-decoration:none;line-height:1.5}
.reference-card__link span{font-size:19px}
.reference-card__link:hover{text-decoration:underline;text-underline-offset:4px}
.reference-card__link:focus-visible{outline:3px solid #91A390;outline-offset:4px}
.reference-card__image{margin:0;min-width:0}
.reference-card__image img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--soft,#EFEDE6)}
.reference-card__image figcaption{padding:8px 12px 0;font-size:10px;line-height:1.5;color:var(--muted,#756E65);overflow-wrap:anywhere}
.reference-section__empty{border:1px dashed var(--line,#DDD9D1);padding:24px 18px;display:flex;align-items:center;gap:14px;color:var(--muted,#756E65)}
.reference-section__empty>span{font-size:26px;color:#9EAA99;flex:none}
.reference-section__empty p{font-size:13px;line-height:1.8;margin:0}
.reference-section__disclaimer{max-width:780px;color:var(--muted,#756E65);font-size:10px;line-height:1.8;margin:15px 0 0}
@media(min-width:620px){.reference-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.reference-section__header h3{font-size:27px}}
@media(min-width:880px){.reference-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.reference-card__body{padding:22px 19px}}
@media(prefers-reduced-motion:reduce){.reference-section{scroll-behavior:auto}}