/* Hat Face Matcher — front end. All rules scoped under .hfm. System fonts only. */
.hfm,.hfm *{box-sizing:border-box}
.hfm{
  --hfm-accent:#7c3b53;
  --hfm-accent-fg:var(--hfm-accent);
  --hfm-radius:14px;
  --hfm-paper:#fbf8f2;
  --hfm-paper-2:#f4efe6;
  --hfm-paper-3:#ede5d8;
  --hfm-ink:#23201c;
  --hfm-soft:#5c564e;
  --hfm-line:#cdc4b4;
  --hfm-accent-soft:#f0e2e7;
  --hfm-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --hfm-sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  container-type:inline-size;
  max-width:760px;margin-inline:auto;
  background:var(--hfm-paper);
  color:var(--hfm-ink);
  font-family:var(--hfm-sans);
  line-height:1.55;
  border:1px solid var(--hfm-line);
  border-radius:calc(var(--hfm-radius) + 6px);
  padding:22px 22px 22px;
}
.hfm :where(button,input,select){font-family:var(--hfm-sans)}
.hfm__vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Dark palette (manual toggle + explicit dark) */
.hfm[data-theme="dark"]{
  --hfm-paper:#1e1b18;--hfm-paper-2:#272320;--hfm-paper-3:#322d28;
  --hfm-ink:#f3eee5;--hfm-soft:#c2b9ab;--hfm-line:#4a4239;--hfm-accent-soft:#3c2731;
  --hfm-accent-fg:#e6a9bc;
}
@media (prefers-color-scheme:dark){
  .hfm[data-theme="auto"]{
    --hfm-paper:#1e1b18;--hfm-paper-2:#272320;--hfm-paper-3:#322d28;
    --hfm-ink:#f3eee5;--hfm-soft:#c2b9ab;--hfm-line:#4a4239;--hfm-accent-soft:#3c2731;
    --hfm-accent-fg:#e6a9bc;
  }
}
/* When the browser supports color-mix, track the chosen accent instead of the fixed rose. */
@supports (color: color-mix(in srgb, red, white)) {
  .hfm[data-theme="dark"]{--hfm-accent-fg:color-mix(in srgb, var(--hfm-accent) 48%, #ffffff)}
  @media (prefers-color-scheme:dark){
    .hfm[data-theme="auto"]{--hfm-accent-fg:color-mix(in srgb, var(--hfm-accent) 48%, #ffffff)}
  }
}

/* Top row: title + theme toggle */
.hfm__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;min-height:38px}
.hfm__title{font-family:var(--hfm-serif);font-weight:400;font-size:clamp(20px,4.6cqi,30px);line-height:1.12;margin:0;color:var(--hfm-ink)}
.hfm button{margin:0;min-width:0}
.hfm .hfm__theme{
  flex:0 0 auto;inline-size:48px;block-size:48px;min-width:48px;max-width:48px;padding:0;
  display:grid;place-items:center;
  appearance:none;cursor:pointer;color:var(--hfm-soft);
  background:var(--hfm-paper-2);border:1px solid var(--hfm-line);border-radius:999px;
  transition:color .18s,border-color .18s,background .18s}
.hfm__theme:hover{color:var(--hfm-accent-fg);border-color:var(--hfm-accent-fg)}
.hfm__theme:focus-visible{outline:3px solid var(--hfm-accent-fg);outline-offset:2px}
.hfm__theme svg{width:18px;height:18px;display:block}
.hfm__theme .hfm__sun{display:none}
.hfm[data-theme="dark"] .hfm__theme .hfm__moon{display:none}
.hfm[data-theme="dark"] .hfm__theme .hfm__sun{display:block}
@media (prefers-color-scheme:dark){
  .hfm[data-theme="auto"] .hfm__theme .hfm__moon{display:none}
  .hfm[data-theme="auto"] .hfm__theme .hfm__sun{display:block}
}

/* Carousel */
.hfm__group{border:0;margin:0;padding:0;min-width:0}
.hfm__carousel{display:flex;align-items:center;gap:8px}
.hfm .hfm__nav{
  flex:0 0 auto;inline-size:48px;block-size:48px;min-width:48px;max-width:48px;padding:0;
  display:grid;place-items:center;
  appearance:none;cursor:pointer;color:var(--hfm-ink);
  background:var(--hfm-paper-2);border:1px solid var(--hfm-line);border-radius:var(--hfm-radius);
  transition:color .18s,border-color .18s,background .18s,opacity .18s}
.hfm__nav:hover{color:var(--hfm-accent-fg);border-color:var(--hfm-accent-fg)}
.hfm__nav:focus-visible{outline:3px solid var(--hfm-accent-fg);outline-offset:2px}
.hfm__nav svg{width:20px;height:20px;display:block}
.hfm__nav[disabled]{opacity:.32;cursor:default;pointer-events:none}

.hfm__faces{
  flex:1 1 auto;min-width:0;
  display:flex;gap:10px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-block:4px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.hfm__faces::-webkit-scrollbar{display:none}
.hfm .hfm__face{
  flex:0 0 auto;scroll-snap-align:start;
  inline-size:clamp(82px,21cqi,98px);min-width:clamp(82px,21cqi,98px);max-width:98px;min-height:48px;
  background:var(--hfm-paper-2);color:var(--hfm-ink);
  border:1.5px solid var(--hfm-line);border-radius:var(--hfm-radius);
  appearance:none;cursor:pointer;
  padding:13px 6px 10px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  transition:border-color .18s,background .18s,transform .18s;
}
.hfm__face:hover{border-color:var(--hfm-accent-fg);transform:translateY(-2px)}
.hfm__face:focus-visible{outline:3px solid var(--hfm-accent-fg);outline-offset:2px}
.hfm__face[aria-pressed="true"]{border-color:var(--hfm-accent-fg);background:var(--hfm-accent-soft)}
.hfm__face[aria-pressed="true"] .hfm__face-ic{color:var(--hfm-accent-fg)}
.hfm__face-ic{color:var(--hfm-ink);line-height:0}
.hfm__face-ic svg{width:40px;height:48px;display:block}
.hfm__face-name{font-size:12.5px;font-weight:500;text-align:center;line-height:1.15}

/* Output */
.hfm__out{margin-top:20px}
.hfm__out:not(:empty){min-height:150px}
.hfm__principle{background:var(--hfm-paper-2);border:1px solid var(--hfm-line);border-inline-start:3px solid var(--hfm-accent-fg);border-radius:10px;padding:14px 16px;margin:0 0 18px}
.hfm__principle h3{font-family:var(--hfm-serif);font-weight:400;font-size:20px;margin:0 0 4px;color:var(--hfm-ink)}
.hfm__principle p{margin:0;color:var(--hfm-soft);font-size:14.5px}

.hfm__hats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:0 0 18px}
.hfm__hat{display:flex;gap:13px;align-items:flex-start;background:var(--hfm-paper-2);border:1px solid var(--hfm-line);border-radius:var(--hfm-radius);padding:13px 14px}
.hfm__hat-ic{flex:0 0 auto;color:var(--hfm-ink);border-inline-end:1px solid var(--hfm-line);padding-inline-end:12px;line-height:0}
.hfm__hat-ic svg{width:54px;height:38px;display:block}
.hfm__hat-t h4{margin:0 0 3px;font-size:14.5px;font-weight:600;color:var(--hfm-ink)}
.hfm__hat-t p{margin:0;font-size:13px;color:var(--hfm-soft);line-height:1.45}

.hfm__easy{display:flex;gap:11px;align-items:flex-start;background:var(--hfm-paper-2);border:1px dashed var(--hfm-line);border-radius:10px;padding:13px 16px}
.hfm__easy svg{flex:0 0 auto;width:20px;height:20px;color:var(--hfm-accent-fg);margin-top:1px}
.hfm__easy p{margin:0;font-size:13.5px;color:var(--hfm-soft)}
.hfm__easy strong{color:var(--hfm-ink);font-weight:600}

.hfm__reset{margin-top:16px;appearance:none;cursor:pointer;background:var(--hfm-ink);color:var(--hfm-paper);border:0;border-radius:999px;padding:11px 20px;min-height:48px;font-size:13.5px;font-weight:500;transition:background .18s}
.hfm__reset:hover{background:var(--hfm-accent-fg)}
.hfm__reset:focus-visible{outline:3px solid var(--hfm-accent-fg);outline-offset:2px}

/* No-JS fallback */
.hfm__all{margin-top:16px;display:grid;gap:14px}
.hfm__panel{background:var(--hfm-paper-2);border:1px solid var(--hfm-line);border-radius:var(--hfm-radius);padding:14px 16px}
.hfm__panel-h{font-family:var(--hfm-serif);font-weight:400;margin:0 0 6px;color:var(--hfm-ink)}
.hfm__principle-t{margin:0 0 8px;color:var(--hfm-soft);font-size:14px}
.hfm__hats-list{margin:0 0 8px;padding-inline-start:18px;color:var(--hfm-ink);font-size:14px}
.hfm__hats-list li{margin:0 0 3px}
.hfm__easy-t{margin:0;font-size:13.5px;color:var(--hfm-soft)}

.hfm--compact{padding:18px 16px}
@container (max-width:560px){
  .hfm{padding:18px 14px}
  .hfm__hats{grid-template-columns:1fr}
}
@media (max-width:560px){
  .hfm__hats{grid-template-columns:1fr}
}

.hfm__reveal{animation:hfm-rise .42s cubic-bezier(.2,.7,.2,1) both}
.hfm__hat{animation:hfm-rise .42s cubic-bezier(.2,.7,.2,1) both}
@keyframes hfm-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .hfm *{animation:none!important;transition:none!important}
  .hfm__faces{scroll-behavior:auto}
}