/* THC Field Tools — shared key engine styles (0.9.0). Builds on rf.css tokens (loaded first).
   Root: .thc-rf.thc-key.thc-key--<mode> plus the old root class (.thc-shed / .thc-shell). */

.thc-key { --thc-key-ok: var(--thc-rf-deep, #3f5c3b); --thc-key-soft: #8a6d1f; --thc-key-input: var(--thc-rf-canvas, #f7f1e4); color: var(--thc-rf-text, #332d25); overflow-wrap: anywhere; }
.thc-key *, .thc-key *::before, .thc-key *::after { box-sizing: border-box; }
.thc-key__status { min-height: 1.4em; margin: .25rem 0; font-size: var(--wp--preset--font-size--small, .875rem); color: var(--thc-rf-deep, #3f5c3b); }
.thc-key__status:empty { min-height: 0; margin: 0; }
.thc-key__status.is-error { color: var(--thc-rf-venom, #a63d2f); }

/* cards */
.thc-key__card, .thc-key__tip { background: var(--thc-rf-raised, #fcf8ef); border: 1px solid var(--thc-rf-border, #d9d0bc); border-radius: var(--thc-rf-radius, 12px); padding: 1rem 1.1rem; margin: 0 0 1rem; scroll-margin-top: 5rem; }
.thc-key__results { scroll-margin-top: 5rem; }
.thc-key__q { margin: 0 0 .35rem; font-size: 1.15rem; line-height: 1.3; }
.thc-key__q:focus { outline: none; }
.thc-key__why { margin: 0 0 .9rem; font-size: .95rem; line-height: 1.5; }
.thc-key__why a, .thc-key__card a { color: var(--thc-rf-deep, #3f5c3b); font-weight: 600; }
.thc-key__left { margin: 0 0 .25rem; font-size: .85rem; color: var(--thc-rf-stroke, #8a7f66); }
.thc-key__hint { margin: .6rem 0 0; min-height: 1.4em; font-size: .9rem; color: var(--thc-rf-deep, #3f5c3b); }
.thc-key__skip { margin: .8rem 0 0; font-size: .9rem; }
.thc-key__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 1rem; }
.thc-key__cols h4 { margin: 0 0 .3rem; }

/* wide figures (shown above a question's options) */
.thc-key__figure { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: .75rem; margin: .4rem 0 1rem; }
.thc-key__figure--one { grid-template-columns: minmax(0, 22rem); margin: .2rem 0 .6rem; }
.thc-key__figure svg { width: 100%; height: auto; display: block; background: var(--thc-rf-canvas, #f7f1e4); border: 1px solid var(--thc-rf-border, #d9d0bc); border-radius: 10px; color: var(--thc-rf-deep, #3f5c3b); padding: .35rem; }

/* answer buttons */
.thc-key__opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: .6rem; }
.thc-key__opts--plain { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
.thc-key__opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; text-align: center; padding: .7rem .6rem; min-height: 44px; min-width: 0; border: 1px solid var(--thc-rf-stroke, #8a7f66); border-radius: 10px; background: var(--thc-rf-canvas, #f7f1e4); color: inherit; font: inherit; cursor: pointer; }
.thc-key__opts--plain .thc-key__opt { align-items: flex-start; text-align: left; font-weight: 600; color: var(--thc-rf-deep, #3f5c3b); }
.thc-key__opt:hover { border-color: var(--thc-rf-deep, #3f5c3b); background: var(--thc-rf-muted, #ece4d9); }
.thc-key__opt:focus-visible { outline: 2px solid var(--thc-rf-leaf, #5e7d53); outline-offset: 2px; }
.thc-key__opt.is-on { background: var(--thc-rf-leaf, #5e7d53); border-color: var(--thc-rf-leaf, #5e7d53); color: #fff; }
.thc-key__svg { width: 96px; height: 64px; max-width: 100%; color: var(--thc-rf-deep, #3f5c3b); flex: none; }
.thc-key__opt.is-on .thc-key__svg { color: #fff; }
.thc-key__opt-label { font-size: .92rem; line-height: 1.3; }
.thc-key__opt-count { font-size: .78rem; font-weight: 400; color: var(--thc-rf-stroke, #8a7f66); }
.thc-key__opt.is-on .thc-key__opt-count { color: #fff; }
.thc-key__part { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.thc-key__part legend { font-weight: 600; color: var(--thc-rf-deep, #3f5c3b); padding: 0; margin-bottom: .4rem; }
.thc-key .thc-key__part .thc-key__opts { grid-template-columns: repeat(auto-fit, minmax(min(6.5rem, 100%), 1fr)); }
.thc-key__num { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; }

/* buttons and links */
.thc-key__btn { font: inherit; font-weight: 600; padding: .45rem 1rem; min-height: 40px; border-radius: 999px; border: 1px solid var(--thc-rf-leaf, #5e7d53); background: var(--thc-rf-leaf, #5e7d53); color: #fff; cursor: pointer; max-width: 100%; }
.thc-key__btn:hover { background: var(--thc-rf-deep, #3f5c3b); border-color: var(--thc-rf-deep, #3f5c3b); }
.thc-key__btn--ghost { background: transparent; color: var(--thc-rf-deep, #3f5c3b); border-color: var(--thc-rf-stroke, #8a7f66); }
.thc-key__btn--ghost:hover { background: var(--thc-rf-muted, #ece4d9); color: var(--thc-rf-deep, #3f5c3b); }
.thc-key__btn:focus-visible, .thc-key__link:focus-visible { outline: 2px solid var(--thc-rf-leaf, #5e7d53); outline-offset: 2px; }
.thc-key__link { font: inherit; font-weight: 600; background: none; border: 0; padding: .2rem 0; min-height: 24px; color: var(--thc-rf-rep, #a0522d); cursor: pointer; text-align: left; }
.thc-key__link:hover { text-decoration: underline; }

/* location form */
.thc-key__locrow { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin: .6rem 0; }
.thc-key__field { display: flex; flex-direction: column; gap: .2rem; font-size: .9rem; font-weight: 600; color: var(--thc-rf-deep, #3f5c3b); flex: 0 1 14rem; min-width: 0; }
.thc-key input[type="text"], .thc-key input[type="number"], .thc-key select, .thc-key textarea { font: inherit; font-weight: 400; padding: .45rem .6rem; min-height: 40px; width: 100%; min-width: 0; border: 1px solid var(--thc-rf-stroke, #8a7f66); border-radius: 8px; background: var(--thc-key-input); color: var(--thc-rf-text, #332d25); }

/* ledger */
.thc-key__ledger { margin: 0 0 1rem; padding: .6rem .9rem; border-left: 3px solid var(--thc-rf-sage, #a8b79a); font-size: .9rem; }
.thc-key__ledger-title { margin: 0 0 .3rem; font-size: 1em; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5em; }
.thc-key__count { font-weight: 400; color: var(--thc-rf-deep, #3f5c3b); font-size: .9em; }
.thc-key__ledger-list { list-style: none; margin: 0; padding: 0; }
.thc-key__ledger-list li { margin: .2rem 0; }
.thc-key__ledger-k { color: var(--thc-rf-stroke, #8a7f66); }
.thc-key__ledger-k::after { content: ":"; }

/* tip */
.thc-key__tip { display: flex; gap: .9rem; align-items: center; }
.thc-key__tip p { margin: 0; }

/* results */
.thc-key__list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .7rem; }
.thc-key__sp { background: var(--thc-rf-raised, #fcf8ef); border: 1px solid var(--thc-rf-border, #d9d0bc); border-radius: 10px; padding: .75rem .9rem; min-width: 0; }
.thc-key__sp.is-unlikely { opacity: .85; }
.thc-key__sp-name { font-weight: 700; }
.thc-key__sp-sci { color: var(--thc-rf-stroke, #8a7f66); }
.thc-key__badges, .thc-key__chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0; }
.thc-key__badges:empty { display: none; }
.thc-key__badge { font-size: .75rem; padding: .1rem .5rem; border-radius: 999px; border: 1px solid var(--thc-rf-border, #d9d0bc); }
.thc-key__badge--tier-documented { border-color: var(--thc-rf-doc, #3f5c3b); color: var(--thc-rf-doc, #3f5c3b); }
.thc-key__badge--tier-expected { border-color: var(--thc-rf-exp, #8a7f2e); color: var(--thc-rf-exp, #8a7f2e); border-style: dashed; }
.thc-key__badge--tier-nearby { border-color: var(--thc-rf-near, #7d6b8f); color: var(--thc-rf-near, #7d6b8f); }
.thc-key__badge--tier-reported, .thc-key__badge--tier-historical { border-color: var(--thc-rf-hist, #8a7f66); color: var(--thc-rf-hist, #8a7f66); }
.thc-key__badge--exotic { border-color: var(--thc-rf-rep, #a0522d); color: var(--thc-rf-rep, #a0522d); }
.thc-key__badge--prot { border-color: var(--thc-rf-venom, #a63d2f); color: var(--thc-rf-venom, #a63d2f); font-weight: 600; }
.thc-key__badge--venom { background: var(--thc-rf-venom, #a63d2f); border-color: var(--thc-rf-venom, #a63d2f); color: #fff; font-weight: 600; }
.thc-key__badge--unlikely { border-style: dashed; color: var(--thc-rf-hist, #8a7f66); }
.thc-key__badge--draft { border-style: dashed; }
.thc-key__badge--nottoad, .thc-key__badge--notskink, .thc-key__badge--kind { border-color: var(--thc-rf-near, #7d6b8f); color: var(--thc-rf-near, #7d6b8f); }
.thc-key__badge--nottoad, .thc-key__badge--notskink { font-weight: 600; }
.thc-key__chip { font-size: .78rem; padding: .1rem .45rem; border-radius: 6px; background: var(--thc-rf-muted, #ece4d9); }
.thc-key__chip.is-ok { color: var(--thc-key-ok); }
.thc-key__chip.is-soft { color: var(--thc-key-soft); }
.thc-key__chip.is-unv { color: var(--thc-rf-stroke, #8a7f66); font-style: italic; }
.thc-key__why-list { list-style: none; margin: .45em 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3em .5em; font-size: .85rem; }
.thc-key__why-list li { padding: .1em .65em .1em .5em; border-radius: 999px; border: 1px solid var(--thc-rf-border, #d9d0bc); background: var(--thc-rf-canvas, #f7f1e4); }
.thc-key__why-list li::before { content: "✓ "; color: var(--thc-rf-doc, #3f5c3b); font-weight: 700; }
.thc-key__why-list li.is-soft { border-style: dashed; }
.thc-key__why-list li.is-soft::before { content: "~ "; color: var(--thc-rf-exp, #8a7f2e); }
.thc-key__why-list li.is-unv::before { content: "? "; color: var(--thc-rf-stroke, #8a7f66); }
.thc-key__why-list li.is-no::before { content: "✕ "; color: var(--thc-rf-venom, #a63d2f); }
.thc-key__facts, .thc-key__links { margin: .35rem 0; font-size: .9rem; }
.thc-key__links a { color: var(--thc-rf-deep, #3f5c3b); font-weight: 600; }
.thc-key__sep { color: var(--thc-rf-border, #d9d0bc); }
.thc-key__src summary { cursor: pointer; font-size: .8rem; color: var(--thc-rf-stroke, #8a7f66); }
.thc-key__src p { font-size: .8rem; margin: .3rem 0 0; }
.thc-key__intro p { margin: 0 0 1rem; line-height: 1.5; }
/* warning card inside the results intro (toads: keep dogs away) */
.thc-key__alert { border: 2px solid var(--thc-rf-venom, #a63d2f); border-left-width: 6px; }
.thc-key .thc-key__alert p { margin: 0; }
.thc-key__tip a { color: var(--thc-rf-deep, #3f5c3b); font-weight: 600; }
.thc-key__fold { margin: 0 0 1rem; }
.thc-key__fold > summary { cursor: pointer; font-weight: 600; padding: .3rem 0; color: var(--thc-rf-deep, #3f5c3b); }
.thc-key__ruled { font-size: .88rem; }
.thc-key__sub { margin: .6rem 0 .4rem; }
.thc-key__sep-card ul, .thc-key__next ul { margin: 0; padding-left: 1.2em; line-height: 1.5; }
.thc-key__sep-card li, .thc-key__next li { margin-bottom: .35em; }
.thc-key__sep-card h4, .thc-key__next h4 { margin: 0 0 .4rem; }
.thc-key__summary { font-size: .875rem; resize: vertical; margin: 0 0 .4rem; }
.thc-key__tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.thc-key__credit { font-size: .82rem; color: var(--thc-rf-stroke, #8a7f66); line-height: 1.5; }
.thc-key__credit a { color: inherit; font-weight: 600; }

@media (max-width: 480px) {
  .thc-key__card, .thc-key__tip { padding: .9rem; }
  .thc-key__opts { grid-template-columns: 1fr 1fr; }
  .thc-key__opts--plain { grid-template-columns: 1fr; }
  .thc-key__tip { flex-direction: column; align-items: flex-start; }
  .thc-key__field { flex-basis: 100%; }
}
/* dark: follows the site's own switch (html[data-thc-theme="dark"]) and the device when no light override is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-thc-theme="light"]) .thc-key { --thc-key-input: #1f1d1a; --thc-key-soft: #d8b35a; }
  :root:not([data-theme="light"]):not([data-thc-theme="light"]) .thc-key input, :root:not([data-theme="light"]):not([data-thc-theme="light"]) .thc-key select, :root:not([data-theme="light"]):not([data-thc-theme="light"]) .thc-key textarea { color: #eee; }
}
:root[data-theme="dark"] .thc-key, :root[data-thc-theme="dark"] .thc-key { --thc-key-input: #1f1d1a; --thc-key-soft: #d8b35a; }
:root[data-theme="dark"] .thc-key input, :root[data-theme="dark"] .thc-key select, :root[data-theme="dark"] .thc-key textarea,
:root[data-thc-theme="dark"] .thc-key input, :root[data-thc-theme="dark"] .thc-key select, :root[data-thc-theme="dark"] .thc-key textarea { color: #eee; }
@media print {
  .thc-key__opts, .thc-key__tools, .thc-key__skip, .thc-key__link, .thc-key__locrow, .thc-key__summary { display: none !important; }
  details.thc-key__fold:not([open]) > *:not(summary) { display: block; }
}