/* THC Anoles: uses the child theme's palette tokens with the brand fallbacks.
   Fonts are inherited from the theme (Platypi for display, Fira Sans for body); nothing is loaded here.
   The Display panel's dark mode flips the theme tokens (html[data-thc-theme="dark"]); the few literal
   colors below are restated for it. Mobile first; tap targets are at least 44px. */

.thc-an {
  --an-canvas: var(--wp--preset--color--base, #f7f1e4);
  --an-raised: var(--wp--preset--color--accent-5, #fcf8ef);
  --an-muted: var(--wp--preset--color--accent-4, #ece4d9);
  --an-border: var(--wp--preset--color--accent-6, #d9d0bc);
  --an-text: var(--wp--preset--color--contrast, #332d25);
  --an-leaf: var(--wp--preset--color--accent-1, #5e7d53);
  --an-deep: var(--wp--preset--color--accent-3, #2f4a2d);
  --an-clay: var(--wp--preset--color--control-stroke, #8a7f66);
  --an-orange: #e4a96a;
  --an-sky: #7ea8c3;
  --an-error: #a13d2d;
  --an-on-leaf: #fff;
  --an-on-orange: #332d25;
  --an-quiet: #675d4b; /* small secondary text: clay darkened to pass 4.5:1 on the light surfaces */
  --an-ok-bg: #e6ecdf;
  --an-bad-bg: #f8e9e5;
  --an-radius: 12px;
  --an-display: var(--wp--preset--font-family--platypi, "Platypi", Georgia, serif);
  color: var(--an-text);
  margin-block: var(--wp--preset--spacing--md, 1rem) 0;
  min-width: 0;
}
html[data-thc-theme="dark"] .thc-an {
  --an-on-leaf: #15130f;
  --an-quiet: #a79d88;
  --an-ok-bg: #34402f;
  --an-bad-bg: #3a2522;
  --an-error: #f0a49d;
  --an-orange: #d9995a;
}
html[data-thc-contrast="high"] .thc-an {
  --an-quiet: #000;
  --an-ok-bg: #efefef;
  --an-bad-bg: #efefef;
  --an-error: #8a0000;
}

.thc-an *, .thc-an *::before, .thc-an *::after { box-sizing: border-box; }
.thc-an [hidden] { display: none !important; }
.thc-an-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.thc-an a { color: var(--an-deep); text-underline-offset: .15em; }
.thc-an :focus-visible { outline: 3px solid var(--an-leaf); outline-offset: 2px; }
.thc-an__lead { margin: 0 0 var(--wp--preset--spacing--lg, 1.5rem); font-size: var(--wp--preset--font-size--large, 1.15rem); max-width: 62ch; }
.thc-an-notice { padding: .7em 1em; border-radius: 10px; border: 1px solid var(--an-border); background: var(--an-raised); }
.thc-an-admin-note { padding: .5em .8em; border: 1px dashed var(--an-error); }

/* ---------- buttons ---------- */
.thc-an-btn { font: inherit; font-weight: 600; border: 1px solid var(--an-leaf); background: var(--an-leaf); color: var(--an-on-leaf); border-radius: 999px; padding: .55em 1.25em; min-height: 44px; min-width: 44px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .35em; line-height: 1.2; text-align: center; }
.thc-an a.thc-an-btn { color: var(--an-on-leaf); text-decoration: none; }
.thc-an-btn:hover { background: var(--an-deep); border-color: var(--an-deep); }
.thc-an-btn--ghost, .thc-an a.thc-an-btn--ghost { background: transparent; color: var(--an-deep); border-color: var(--an-clay); }
.thc-an-btn--ghost:hover, .thc-an a.thc-an-btn--ghost:hover { background: var(--an-muted); color: var(--an-deep); border-color: var(--an-deep); }
.thc-an-btn--big { font-size: 1.15rem; padding: .75em 1.8em; min-height: 52px; }
.thc-an-btn[disabled] { cursor: default; opacity: 1; }
.thc-an-next { display: flex; flex-wrap: wrap; gap: .6rem; margin: 2rem 0 0; }

/* ---------- hub ---------- */
.thc-an-hub { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.thc-an-hub__item { margin: 0; }
.thc-an .thc-an-hub__card { display: flex; flex-direction: column; gap: .4rem; min-height: 44px; padding: 1.25rem 1.25rem 1.3rem; border-radius: var(--an-radius); background: var(--an-raised); border: 1px solid var(--an-border); border-left: 6px solid var(--an-leaf); color: var(--an-text); text-decoration: none; }
.thc-an-hub__item:nth-child(2) .thc-an-hub__card { border-left-color: var(--an-orange); }
.thc-an-hub__item:nth-child(3) .thc-an-hub__card { border-left-color: var(--an-sky); }
.thc-an .thc-an-hub__card:hover { background: var(--an-muted); }
.thc-an-hub__title { font-family: var(--an-display); font-size: 1.4rem; line-height: 1.2; color: var(--an-deep); font-weight: 700; }
.thc-an-hub__title::after { content: " \2192"; }
.thc-an-hub__line { font-size: 1rem; }
.thc-an-hub__soon { margin: 1.5rem 0 0; padding: .8rem 1rem; border-radius: 10px; background: var(--an-muted); }
.thc-an-hub__soon p { margin: 0; }
.thc-an-hub__soon p + p { margin-top: .4rem; }
@media (min-width: 720px) {
  .thc-an-hub { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- filter chips ---------- */
.thc-an-filters { margin: 0 0 1.25rem; }
.thc-an-filters__label { margin: 0 0 .4rem; font-weight: 600; }
.thc-an-filters__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.thc-an-chip { font: inherit; min-height: 44px; padding: .4em 1.1em; border-radius: 999px; border: 1px solid var(--an-clay); background: var(--an-raised); color: var(--an-text); cursor: pointer; }
.thc-an-chip:hover { background: var(--an-muted); }
.thc-an-chip[aria-pressed="true"] { background: var(--an-deep); border-color: var(--an-deep); color: #fff; font-weight: 600; }
html[data-thc-theme="dark"] .thc-an-chip[aria-pressed="true"] { color: #15130f; background: var(--an-leaf); border-color: var(--an-leaf); }

/* ---------- sections and cards ---------- */
.thc-an-pack-title { font-family: var(--an-display); margin: 2rem 0 .5rem; }
/* 0.2.0: several packs on one page */
.thc-an-packnav { margin: 0 0 1.25rem; padding: .8rem 1rem; border-radius: 10px; background: var(--an-muted); }
.thc-an-packnav__h { margin: 0 0 .3rem; font-weight: 700; }
.thc-an-packnav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.thc-an-packnav__list li { margin: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: .4rem; }
.thc-an-packnav__list a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.thc-an-packnav__n { color: var(--an-quiet); font-size: .9rem; white-space: nowrap; }
.thc-an-pack { scroll-margin-top: 5rem; }
.thc-an-pack:focus { outline: none; }
.thc-an-pack + .thc-an-pack { border-top: 2px solid var(--an-border); margin-top: 1rem; }
.thc-an-pack-jump { margin: 0 0 1rem; font-size: .95rem; }
.thc-an-pack-jump a { display: inline-flex; align-items: center; min-height: 44px; }
.thc-an-section { margin: 0 0 2rem; scroll-margin-top: 5rem; }
.thc-an-section:focus { outline: none; }
.thc-an-section__h { font-family: var(--an-display); font-size: 1.6rem; margin: 0 0 .25rem; color: var(--an-deep); }
.thc-an-section__sub { margin: 0 0 1rem; color: var(--an-quiet); }
.thc-an-section__more { margin: 1.25rem 0 0; font-weight: 600; }
.thc-an-section__more a { display: inline-block; padding: .65rem 0; line-height: 1.4; }
.thc-an-section__empty { margin: .5rem 0 0; color: var(--an-quiet); font-style: italic; }
.thc-an-grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .thc-an-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .thc-an-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.thc-an-card { display: flex; flex-direction: column; background: var(--an-raised); border: 1px solid var(--an-border); border-radius: var(--an-radius); overflow: hidden; scroll-margin-top: 5rem; }
.thc-an-card__fig { margin: 0; }
.thc-an-card__img { aspect-ratio: 4 / 3; background: var(--an-muted); overflow: hidden; }
.thc-an-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 0.2.0: a species with no photo (the presumed-extinct Culebra Giant Anole) keeps the card's shape */
.thc-an-card__img--none { display: flex; align-items: center; justify-content: center; border-bottom: 1px dashed var(--an-border); }
.thc-an-card__img--none span { font-family: var(--an-display); font-size: 1.15rem; font-weight: 700; color: var(--an-quiet); }
.thc-an-card__more { margin: .1rem 1rem .6rem; }
.thc-an-credit { margin: 0; padding: .45rem 1rem .3rem; font-size: .8rem; line-height: 1.4; color: var(--an-quiet); overflow-wrap: anywhere; }
.thc-an-credit a { color: var(--an-quiet); }
.thc-an-card__body { padding: .5rem 1rem 1.1rem; }
.thc-an-card__name { font-family: var(--an-display); font-size: 1.35rem; line-height: 1.2; margin: .2rem 0 0; color: var(--an-deep); }
.thc-an-card__sci { margin: .1rem 0 .3rem; }
.thc-an-card__aka { margin: 0 0 .5rem; font-size: .9rem; color: var(--an-quiet); }
.thc-an-card__tags { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; margin: .4rem 0 .6rem; }
.thc-an-badge { display: inline-flex; align-items: center; min-height: 32px; padding: .2em .8em; border-radius: 999px; font-size: .85rem; font-weight: 700; letter-spacing: .02em; }
.thc-an-badge--native { background: var(--an-leaf); color: var(--an-on-leaf); }
.thc-an-badge--introduced { background: var(--an-orange); color: var(--an-on-orange); }
.thc-an-badge--extinct { background: transparent; color: var(--an-text); border: 1px solid var(--an-clay); }
.thc-an-eco { flex: 1 1 12rem; min-width: 0; }
.thc-an-eco summary { display: inline-flex; align-items: center; gap: .35em; min-height: 44px; margin-top: -6px; padding: 0 .9em; border-radius: 999px; border: 1px solid var(--an-clay); font-size: .85rem; font-weight: 600; cursor: pointer; list-style: none; }
.thc-an-eco summary::-webkit-details-marker { display: none; }
.thc-an-eco summary::after { content: "+"; font-weight: 700; }
.thc-an-eco[open] summary::after { content: "\2212"; }
.thc-an-eco p { margin: .4rem 0 0; font-size: .9rem; padding: .6rem .8rem; background: var(--an-muted); border-radius: 8px; }
.thc-an-card__origin { margin: 0 0 .6rem; font-size: .95rem; font-style: italic; }
.thc-an-card__facts { margin: 0; }
.thc-an-card__row { padding: .55rem 0; border-top: 1px solid var(--an-border); }
.thc-an-card__row dt { font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--an-deep); }
.thc-an-card__row dd { margin: .15rem 0 0; }
.thc-an-card__reported { display: block; margin-top: .35rem; font-size: .9rem; color: var(--an-quiet); }
.thc-an-card__reported a { color: var(--an-quiet); }
.thc-an-card:target { outline: 3px solid var(--an-orange); outline-offset: 2px; }

/* ---------- sources ---------- */
.thc-an-sources { margin: 2.5rem 0 0; padding: 1.25rem; border-radius: var(--an-radius); background: var(--an-muted); font-size: .92rem; }
.thc-an-sources__h { font-family: var(--an-display); font-size: 1.25rem; margin: 0 0 .5rem; }
.thc-an-sources ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.thc-an-sources li { margin: 0 0 .4rem; overflow-wrap: anywhere; }
.thc-an-sources__note { margin: 0 0 .6rem; }
.thc-an-sources__note:focus { outline: 3px solid var(--an-orange); outline-offset: 4px; }
.thc-an-sources__review { margin: 0; font-weight: 600; }

/* ---------- lightbox ---------- */
.thc-an-lightbox { border: 0; padding: 0; width: min(100vw - 16px, 900px); max-height: calc(100vh - 16px); border-radius: var(--an-radius); background: var(--an-raised); color: var(--an-text); }
.thc-an-lightbox::backdrop { background: rgba(20, 18, 14, .78); }
.thc-an-lightbox.thc-an-lightbox--fallback { position: fixed; inset: 8px; margin: auto; z-index: 100000; box-shadow: 0 0 0 100vmax rgba(20, 18, 14, .78); }
.thc-an-lightbox__inner { display: flex; flex-direction: column; gap: .4rem; padding: .75rem; max-height: calc(100vh - 16px); }
.thc-an-lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.thc-an-lightbox__title { margin: 0; font-family: var(--an-display); font-size: 1.15rem; font-weight: 700; }
.thc-an-lightbox__stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; background: #15130f; border-radius: 8px; overflow: hidden; }
.thc-an-lightbox__stage img { display: block; max-width: 100%; max-height: calc(100vh - 230px); object-fit: contain; }
.thc-an-lightbox .thc-an-credit { padding: .2rem 0; }
.thc-an-lightbox__nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.thc-an-lightbox__count { font-size: .9rem; color: var(--an-quiet); }

/* ---------- quiz ---------- */
.thc-an-quiz { max-width: 640px; }
.thc-an-quiz__start { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.thc-an-quiz__fine { margin: 0; font-size: .92rem; color: var(--an-quiet); }
.thc-an-quiz__fine a { color: var(--an-deep); }
.thc-an-quiz__meta { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .5rem; font-weight: 600; }
.thc-an-quiz__photo { position: relative; margin: 0 0 .25rem; aspect-ratio: 4 / 3; background: var(--an-muted); border-radius: var(--an-radius); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.thc-an-quiz__photo img { display: block; width: 100%; height: 100%; object-fit: contain; background: #15130f; }
.thc-an-quiz__loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--an-quiet); }
.thc-an-quiz__q { font-family: var(--an-display); font-size: 1.25rem; margin: .75rem 0 .5rem; }
.thc-an-quiz__answers { display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr); margin: 0 0 .75rem; }
@media (min-width: 520px) { .thc-an-quiz__answers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.thc-an-answer { font: inherit; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .1rem; min-height: 56px; padding: .55rem .9rem; text-align: left; border-radius: 10px; border: 2px solid var(--an-border); background: var(--an-raised); color: var(--an-text); cursor: pointer; }
.thc-an-answer:hover:not([disabled]) { border-color: var(--an-leaf); background: var(--an-muted); }
.thc-an-answer__eng { font-weight: 700; }
.thc-an-answer__sci { font-size: .85rem; font-style: italic; color: var(--an-quiet); }
.thc-an-answer__mark { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.thc-an-answer[disabled] { cursor: default; }
.thc-an-answer.is-correct { border-color: var(--an-leaf); background: var(--an-ok-bg); }
.thc-an-answer.is-correct .thc-an-answer__mark { color: var(--an-deep); }
.thc-an-answer.is-wrong { border-color: var(--an-error); background: var(--an-bad-bg); }
.thc-an-answer.is-wrong .thc-an-answer__mark { color: var(--an-error); }
.thc-an-feedback { margin: 0 0 .75rem; padding: .8rem 1rem; border-radius: 10px; background: var(--an-raised); border: 1px solid var(--an-border); }
.thc-an-feedback:empty { display: none; }
.thc-an-feedback__verdict { margin: 0 0 .3rem; font-weight: 700; font-size: 1.1rem; }
.thc-an-feedback__verdict.is-right { color: var(--an-deep); }
.thc-an-feedback__verdict.is-wrong { color: var(--an-error); }
.thc-an-feedback p { margin: 0 0 .4rem; }
.thc-an-feedback .thc-an-credit { padding: 0; }
.thc-an-score { font-family: var(--an-display); font-size: 2.6rem; line-height: 1.1; margin: 0 0 .25rem; color: var(--an-deep); }
.thc-an-quiz__end p { margin: 0 0 .75rem; }
.thc-an-share { margin: 1.25rem 0 0; padding: 1rem; border-radius: var(--an-radius); background: var(--an-muted); }
.thc-an-share__h { font-family: var(--an-display); font-size: 1.2rem; margin: 0 0 .6rem; }
.thc-an-share__img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--an-border); margin: 0 0 .75rem; }
.thc-an-share__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.thc-an-share__status { margin: .5rem 0 0; font-size: .92rem; }
.thc-an-share textarea { width: 100%; font: inherit; margin-top: .5rem; padding: .5rem; border-radius: 8px; border: 1px solid var(--an-clay); background: var(--an-raised); color: var(--an-text); }

/* ---------- FAQ ---------- */
.thc-an-faq { display: flex; flex-direction: column; gap: .6rem; max-width: 760px; }
.thc-an-q { border: 1px solid var(--an-border); border-radius: var(--an-radius); background: var(--an-raised); scroll-margin-top: 5rem; }
.thc-an-q__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 52px; padding: .7rem 1rem; cursor: pointer; font-family: var(--an-display); font-size: 1.15rem; font-weight: 700; color: var(--an-deep); list-style: none; }
.thc-an-q__q::-webkit-details-marker { display: none; }
.thc-an-q__q::after { content: "+"; font-size: 1.4rem; line-height: 1; flex: none; }
.thc-an-q[open] .thc-an-q__q::after { content: "\2212"; }
.thc-an-q__a { padding: 0 1rem .9rem; }
.thc-an-q__a p { margin: 0 0 .6rem; }
.thc-an-q__link { font-size: .85rem; }
.thc-an-q__link a { display: inline-flex; align-items: center; min-height: 44px; color: var(--an-quiet); }
.thc-an-q:target { outline: 3px solid var(--an-orange); outline-offset: 2px; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .thc-an-answer, .thc-an-chip, .thc-an-hub__card, .thc-an-btn { transition: background-color .15s ease, border-color .15s ease; }
  .thc-an-quiz__photo img { transition: opacity .2s ease; }
}
@media (prefers-reduced-motion: reduce) {
  .thc-an * { scroll-behavior: auto !important; }
}