/* THC Anatomy: uses the child theme's palette tokens (same fallbacks as THC Names and the Range Finder).
   Dark follows THC Core's Display switch: Core flips the palette tokens on html[data-thc-theme="dark"], and the few
   literal colours below are restated for that attribute, as key.css does. The device's own dark setting is left
   alone, as everywhere else on the site. The child theme may restyle any .thc-an class. */

.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, #3f5c3b);
  --an-sage: var(--wp--preset--color--accent-2, #a8b79a);
  --an-stroke: var(--wp--preset--color--control-stroke, #8a7f66);
  --an-warn: #8a5a1f;
  --an-radius: 12px;
  /* drawing colours */
  --an-plate: var(--an-raised);
  --an-skin: var(--an-muted);
  --an-hole: #3b342b;
  --an-on: var(--an-leaf);
  --an-on-ink: #fff;
  --an-hover: color-mix(in srgb, var(--an-sage) 45%, var(--an-raised));
  --an-target: color-mix(in srgb, #d8b35a 55%, var(--an-raised));
  --an-tap: color-mix(in srgb, var(--an-sage) 60%, var(--an-raised));
  --an-open: color-mix(in srgb, var(--an-stroke) 32%, var(--an-canvas));
  color: var(--an-text);
  margin-block: var(--wp--preset--spacing--md, 1rem) 0;
  overflow-wrap: anywhere;
}
:root[data-theme="dark"] .thc-an, :root[data-thc-theme="dark"] .thc-an {
  --an-hole: #0f0e0c;
  --an-eye: #5f574a;
  --an-on-ink: #15130f;
  --an-warn: #d8b35a;
  --an-target: color-mix(in srgb, #d8b35a 40%, var(--an-raised));
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .thc-an { --an-hover: #dfe5d5; --an-target: #f0dcaa; --an-tap: #cfdac4; --an-open: #cfc6b2; }
}
.thc-an *, .thc-an *::before, .thc-an *::after { box-sizing: border-box; }
.thc-an [hidden], .thc-an[hidden] { display: none; }
.thc-an__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.thc-an__lead { margin: 0 0 var(--wp--preset--spacing--md, 1rem); font-size: var(--wp--preset--font-size--large, 1.25rem); }
.thc-an__h2 { margin: .2rem 0 .6rem; font-size: clamp(1.45rem, 3.2vw, 1.9rem); line-height: 1.2; }
.thc-an__h3 { margin: 1.4rem 0 .5rem; color: var(--an-deep); font-size: var(--wp--preset--font-size--medium, 1.15rem); }
.thc-an__small { font-size: var(--wp--preset--font-size--small, .875rem); color: var(--an-deep); }
.thc-an a { color: var(--an-deep); }
.thc-an button { font: inherit; }
.thc-an button:focus-visible, .thc-an a:focus-visible, .thc-an input:focus-visible, .thc-an summary:focus-visible, .thc-an__info:focus-visible { outline: 2px solid var(--an-leaf); outline-offset: 2px; }
.thc-an__info:focus { outline: none; }

/* ---------- buttons ---------- */
.thc-an__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-weight: 600; border: 1px solid var(--an-leaf); background: var(--an-leaf); color: #fff; border-radius: 999px; padding: .5em 1.2em; cursor: pointer; text-decoration: none; text-align: center; max-width: 100%; }
.thc-an a.thc-an__btn:not(.thc-an__btn--ghost) { color: #fff; }
.thc-an__btn:hover { background: var(--an-deep); border-color: var(--an-deep); }
.thc-an__btn--ghost { background: transparent; color: var(--an-deep); border-color: var(--an-stroke); }
.thc-an__btn--ghost:hover { background: var(--an-muted); color: var(--an-deep); }
.thc-an__btn--ghost[aria-pressed="true"] { background: var(--an-muted); border-color: var(--an-deep); }
.thc-an__btn--ghost[aria-pressed="true"]::before, .thc-an__chip[aria-pressed="true"]::before, .thc-an__pick[aria-pressed="true"]::before { content: "\2713\00a0"; }
:root[data-theme="dark"] .thc-an .thc-an__btn:not(.thc-an__btn--ghost), :root[data-thc-theme="dark"] .thc-an .thc-an__btn:not(.thc-an__btn--ghost) { color: #15130f; }
.thc-an__row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .6rem 0; }

/* ---------- tabs ---------- */
.thc-an__tabs { display: flex; flex-wrap: wrap; gap: .4rem; border-bottom: 2px solid var(--an-border); margin: 0 0 1rem; }
.thc-an__tabs [role="tab"] { min-height: 44px; padding: .5em 1em; border: 1px solid var(--an-border); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--an-canvas); color: var(--an-deep); font-weight: 600; cursor: pointer; margin-bottom: -2px; }
.thc-an__tabs [role="tab"][aria-selected="true"] { background: var(--an-raised); color: var(--an-text); border-color: var(--an-stroke); border-bottom: 2px solid var(--an-raised); box-shadow: inset 0 3px 0 var(--an-leaf); }
.thc-an__tabs [role="tab"]:hover { background: var(--an-muted); }
.thc-an.is-js .thc-an__panel { background: var(--an-raised); border: 1px solid var(--an-border); border-radius: var(--an-radius); padding: 1rem 1.1rem; }
.thc-an__panel + .thc-an__panel { margin-top: 1.5rem; }
.thc-an.is-js .thc-an__panel + .thc-an__panel { margin-top: 0; }
.thc-an__safety { margin: 0 0 1rem; padding: .55rem .8rem; border-left: 4px solid var(--an-warn); background: var(--an-canvas); border-radius: 6px; font-size: var(--wp--preset--font-size--small, .95rem); }

/* ---------- picker and modes ---------- */
.thc-an__picker { display: grid; gap: .5rem; margin-bottom: .8rem; }
.thc-an__pgroup { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.thc-an__pglabel { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--an-deep); min-width: 7.5rem; }
.thc-an__pick, .thc-an__chip, .thc-an__mode, .thc-an__var { min-height: 44px; padding: .35em .9em; border: 1px solid var(--an-border); background: var(--an-canvas); color: var(--an-text); border-radius: 999px; cursor: pointer; }
.thc-an__pick:hover, .thc-an__chip:hover, .thc-an__mode:hover, .thc-an__var:hover { border-color: var(--an-stroke); background: var(--an-muted); }
.thc-an__pick[aria-pressed="true"], .thc-an__chip[aria-pressed="true"], .thc-an__mode[aria-pressed="true"], .thc-an__var[aria-pressed="true"] { background: var(--an-deep); border-color: var(--an-deep); color: var(--an-raised); font-weight: 600; }
.thc-an__modes { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; margin: 0 0 .6rem; }
.thc-an__seg { display: inline-flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.thc-an__seglabel { font-weight: 600; color: var(--an-deep); margin-right: .2rem; }
.thc-an__controls { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: 0 0 .5rem; }

/* ---------- stage: drawing + info ---------- */
.thc-an__stage { display: grid; gap: 1rem; }
.thc-an__fig > .thc-an__side { margin: .6rem 0; }
.thc-an__fig { margin: 0 0 1.5rem; }
.thc-an.is-js .thc-an__fig { margin: 0; }
.thc-an__figt { margin: 0 0 .4rem; font-size: 1.05rem; }
.thc-an__svgwrap { margin: 0 auto; }
.thc-an__svg { display: block; width: 100%; height: auto; color: var(--an-text); font-family: inherit; }
.thc-an__cap { font-size: var(--wp--preset--font-size--small, .9rem); margin: .5rem 0; }
.thc-an__plist { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr)); gap: .35rem; }
.thc-an__pbtn { width: 100%; min-height: 44px; text-align: left; display: flex; align-items: center; justify-content: flex-start; gap: .45rem; padding: .3em .6em; border: 1px solid var(--an-border); border-radius: 10px; background: var(--an-canvas); color: var(--an-text); cursor: pointer; }
.thc-an__pbtn:hover { border-color: var(--an-stroke); background: var(--an-muted); }
.thc-an__pbtn[aria-pressed="true"] { border-color: var(--an-deep); background: var(--an-muted); font-weight: 700; box-shadow: inset 4px 0 0 var(--an-leaf); }
.thc-an__pn { display: inline-flex; align-items: center; justify-content: center; min-width: 1.7em; height: 1.7em; border-radius: 999px; border: 1px solid var(--an-stroke); font-size: .8rem; font-weight: 700; color: var(--an-deep); flex: none; }
.thc-an__caution { margin: .8rem 0 0; padding: .55rem .8rem; border: 1px solid var(--an-warn); border-radius: 8px; background: var(--an-canvas); font-size: var(--wp--preset--font-size--small, .95rem); }
.thc-an__side { display: grid; gap: .8rem; }
.thc-an__info, .thc-an__quiz { background: var(--an-canvas); border: 1px solid var(--an-border); border-radius: var(--an-radius); padding: .9rem 1rem; }
.thc-an__info h3 { margin: 0 0 .3rem; font-size: 1.15rem; }
.thc-an__info p { margin: .45rem 0; }
.thc-an__hint { color: var(--an-deep); margin: 0; }
.thc-an__note { font-size: .92rem; border-left: 3px solid var(--an-sage); padding-left: .6rem; }
.thc-an__links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }

/* ---------- the drawings ---------- */
.thc-an__svg path, .thc-an__svg circle, .thc-an__svg ellipse, .thc-an__svg rect { vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.thc-an__bg path { fill: var(--an-skin); stroke: currentColor; stroke-width: .9; }
.thc-an__bg .thc-an__f-eye { fill: var(--an-hole); }
.thc-an__bg .thc-an__f-open { fill: var(--an-open); stroke: none; }
.thc-an__part { cursor: pointer; outline: none; }
.thc-an__part path { fill: var(--an-plate); stroke: currentColor; stroke-width: 1.2; }
.thc-an__part[data-part="spectacle"] path { fill: var(--an-eye, var(--an-hole)); }
.thc-an__part[data-part="nostril"] path, .thc-an__part[data-part="loreal-pit"] path, .thc-an__part[data-part="vent"] path { fill: var(--an-hole); }
.thc-an__part:hover path { fill: var(--an-hover); }
.thc-an__part:focus-visible path { stroke-width: 3; stroke-dasharray: 4 3; }
.thc-an__part.is-on path { fill: var(--an-on); stroke-width: 3.2; }
.thc-an__part.is-target path { fill: var(--an-target); stroke-width: 3.2; stroke-dasharray: 6 3; }
.thc-an__part.is-right path { fill: var(--an-on); stroke-width: 3.2; }
.thc-an__part.is-wrong path { stroke-width: 3.2; stroke-dasharray: 2 3; }
.thc-an__opt circle { fill: var(--an-hole); }
.thc-an__part.is-on circle { fill: var(--an-on); stroke: currentColor; stroke-width: 1.2; }
.thc-an__deco { pointer-events: none; }
.thc-an__pitin { fill: var(--an-stroke); }
.thc-an__keel { fill: none; stroke: var(--an-text); stroke-width: 1.6; stroke-linecap: round; }
.thc-an__keel--weak { stroke-width: 1; opacity: .6; }
.thc-an__pits circle { fill: var(--an-hole); }
.thc-an__frame { fill: none; stroke: currentColor; stroke-width: 1.5; }
.thc-an__svg text { fill: var(--an-text); }
.thc-an__ptl { font-size: 11px; font-weight: 700; }
.thc-an__num { font-size: 9px; font-weight: 700; }
.thc-an__svg .thc-an__num { font-size: 9px; }
.thc-an__vtag { font-size: 8px; }
.thc-an__tag { font-size: 7.5px; font-weight: 700; }
.thc-an__dir { font-size: 9px; }
.thc-an__ring { fill: none; stroke: currentColor; stroke-width: 1.4; }
.thc-an__labels, .thc-an__nums { pointer-events: none; }
.thc-an__ll { fill: none; stroke: var(--an-deep); stroke-width: 1; }
.thc-an__dot { fill: var(--an-deep); }
.thc-an__lt { font-size: 11.5px; font-weight: 700; }
.thc-an__lg { font-size: 9.5px; }
.thc-an__badge { fill: var(--an-raised); stroke: var(--an-deep); stroke-width: 1.4; }
.thc-an__bn { font-size: 12px; font-weight: 700; }
.thc-an__lab.is-on .thc-an__badge { fill: var(--an-on); }
.thc-an__lab.is-on .thc-an__bn { fill: var(--an-on-ink); }
/* label layers: with no script the text labels show; the script picks plain, labels or numbers */
.thc-an__nums { display: none; }
.thc-an__fig.is-plain .thc-an__labels, .thc-an__fig.is-nums .thc-an__labels { display: none; }
.thc-an__fig.is-nums .thc-an__nums { display: inline; }
/* vent view: show one form of each switchable part */
.thc-an__svg[data-anal="single"] [data-variant="anal-divided"], .thc-an__svg[data-anal="divided"] [data-variant="anal-single"],
.thc-an__svg[data-sub="paired"] [data-variant="sub-single"], .thc-an__svg[data-sub="single"] [data-variant="sub-paired"] { display: none; }

/* ---------- quiz ---------- */
.thc-an__quiz h3 { margin: 0 0 .3rem; font-size: 1.1rem; }
.thc-an__qprog { font-size: .9rem; color: var(--an-deep); margin: 0 0 .3rem; }
.thc-an__qtext { font-size: 1.15rem; font-weight: 700; margin: .2rem 0 .6rem; }
.thc-an__choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr)); gap: .45rem; margin: .4rem 0; }
.thc-an__choice { min-height: 44px; border: 1px solid var(--an-stroke); background: var(--an-raised); color: var(--an-text); border-radius: 10px; padding: .4em .7em; cursor: pointer; text-align: left; }
.thc-an__choice:hover { background: var(--an-muted); }
.thc-an__choice[disabled] { cursor: default; opacity: 1; }
.thc-an__choice.is-right { border: 2px solid var(--an-deep); font-weight: 700; }
.thc-an__choice.is-right::before { content: "\2713\00a0"; }
.thc-an__choice.is-wrong { border-style: dashed; }
.thc-an__fb { margin: .6rem 0; padding: .5rem .7rem; border-radius: 8px; background: var(--an-raised); border: 1px solid var(--an-border); }
.thc-an__score { font-size: 1.3rem; font-weight: 700; margin: .2rem 0 .6rem; }

/* ---------- counting ---------- */
.thc-an__demo-svg, .thc-an__prac-svg { margin: .5rem auto; }
.thc-an__demo-svg svg, .thc-an__prac-svg svg { display: block; width: 100%; height: auto; color: var(--an-text); }
.thc-an__fs-cell { fill: var(--an-plate); stroke: currentColor; stroke-width: 1; cursor: pointer; }
.thc-an__fs-cell:hover { fill: var(--an-hover); }
.thc-an__fs-cell.is-step { fill: var(--an-on); stroke-width: 2.4; }
.thc-an__fs-cell.is-tap { fill: var(--an-tap); stroke-width: 2.4; }
.thc-an__fs-cell.is-dup { stroke-dasharray: 3 2; stroke-width: 2.4; }
.thc-an__fs-cell.is-answer { stroke-width: 2.6; fill: var(--an-target); }
.thc-an__fs-plate { fill: var(--an-skin); stroke: currentColor; stroke-width: 1; }
.thc-an__fs-num { font-size: 9.5px; font-weight: 700; pointer-events: none; fill: var(--an-text); }
.thc-an__fs-num.is-on { fill: var(--an-on-ink); }
.thc-an__fs-v { font-size: 8px; pointer-events: none; fill: var(--an-text); }
.thc-an__lbl { font-weight: 600; color: var(--an-deep); }
.thc-an__num { font: inherit; width: 6.5rem; min-height: 44px; padding: .35em .6em; border: 1px solid var(--an-stroke); border-radius: 10px; background: var(--an-canvas); color: var(--an-text); }
.thc-an__tally { display: grid; gap: .1rem; }
.thc-an__ctr { display: grid; grid-template-columns: minmax(10rem, 14rem) auto minmax(0, 1fr); gap: .3rem 1rem; align-items: center; padding: .55rem 0; border-bottom: 1px dashed var(--an-border); }
.thc-an__clbl { font-weight: 700; }
.thc-an__cbox { display: inline-flex; align-items: center; gap: .35rem; }
.thc-an__cnum { width: 5.2rem; text-align: center; font-size: 1.2rem; font-weight: 700; }
.thc-an__step { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--an-leaf); background: var(--an-leaf); color: #fff; font-size: 1.6rem; font-weight: 700; line-height: 1; cursor: pointer; }
:root[data-theme="dark"] .thc-an .thc-an__step, :root[data-thc-theme="dark"] .thc-an .thc-an__step { color: #15130f; }
.thc-an__step:hover { background: var(--an-deep); border-color: var(--an-deep); }
.thc-an__tip { margin: 0; font-size: .9rem; color: var(--an-deep); }
.thc-an__formula { font-size: 1.25rem; font-weight: 700; margin: .8rem 0 .2rem; min-height: 1.5em; }
.thc-an__shed { margin: .4rem 0 .8rem; }

/* ---------- glossary ---------- */
.thc-an__gtools { display: grid; gap: .5rem; margin-bottom: 1rem; }
.thc-an__q { font: inherit; width: 100%; max-width: 28rem; min-height: 44px; padding: .5em .8em; border: 1px solid var(--an-stroke); border-radius: 10px; background: var(--an-canvas); color: var(--an-text); }
.thc-an__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.thc-an__gcount { margin: 0; font-size: .9rem; color: var(--an-deep); min-height: 1.3em; }
.thc-an__ggroup > .thc-an__h3 { margin-top: 1.2rem; }
.thc-an__glist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); gap: 0 1.2rem; }
.thc-an__entry { padding: .55rem 0 .4rem; border-bottom: 1px solid var(--an-border); scroll-margin-top: 6rem; min-width: 0; }
.thc-an__entry:target, .thc-an__entry.is-flash { box-shadow: inset 4px 0 0 var(--an-leaf); padding-left: .8rem; }
.thc-an__eh { margin: 0 0 .15rem; font-size: 1rem; line-height: 1.3; }
.thc-an__gloss { font-weight: 400; color: var(--an-deep); }
.thc-an__entry p { margin: .2rem 0; }
.thc-an__entry .thc-an__where { font-size: .95rem; line-height: 1.45; }
.thc-an__showp { font-size: .88rem; }
.thc-an__showme { font-weight: 600; display: inline-block; padding: .1rem 0; }
.thc-an__more > summary { cursor: pointer; font-size: .85rem; color: var(--an-deep); padding: .25rem 0; min-height: 24px; }
.thc-an__more[open] > summary { margin-bottom: .2rem; }
.thc-an__more p { font-size: .92rem; }
.thc-an__also { color: var(--an-deep); }
.thc-an__hedge { font-style: italic; }
.thc-an__src { font-size: .85rem; color: var(--an-deep); }
.thc-an__by { color: var(--an-deep); }
.thc-an__quote { margin: .4rem 0 .2rem; padding: .1rem 0 .1rem .7rem; border-left: 3px solid var(--an-border); font-size: .85rem; color: var(--an-text); }
.thc-an__quote p { margin: .25rem 0; font-size: .85rem; }
.thc-an__info .thc-an__showp { display: none; }

/* ---------- sources ---------- */
.thc-an__sources { margin-top: 1.5rem; background: var(--an-raised); border: 1px solid var(--an-border); border-radius: var(--an-radius); padding: .8rem 1rem; }
.thc-an__sources > summary { cursor: pointer; font-weight: 600; color: var(--an-deep); min-height: 44px; display: flex; align-items: center; }
.thc-an__sources ol { margin: .5rem 0; padding-left: 1.3rem; font-size: .9rem; }
.thc-an__sources li { margin: .3rem 0; }

/* the plastron's midline seam: a single line with a wide invisible hit area */
.thc-an .thc-an__part.thc-an__linepart path { fill: none; }
.thc-an .thc-an__part.thc-an__linepart .thc-an__hitline { stroke: transparent; stroke-width: 14; }
.thc-an .thc-an__part.thc-an__linepart .thc-an__seamline { stroke: currentColor; stroke-width: 1.4; stroke-dasharray: none; }
.thc-an .thc-an__part.thc-an__linepart:hover .thc-an__seamline { stroke: var(--an-leaf); stroke-width: 3; }
.thc-an .thc-an__part.thc-an__linepart:focus-visible .thc-an__seamline { stroke-width: 3; stroke-dasharray: 4 3; }
.thc-an .thc-an__part.thc-an__linepart.is-on .thc-an__seamline, .thc-an .thc-an__part.thc-an__linepart.is-right .thc-an__seamline { stroke: var(--an-on); stroke-width: 5; }
.thc-an .thc-an__part.thc-an__linepart.is-target .thc-an__seamline { stroke: var(--an-warn); stroke-width: 5; stroke-dasharray: 6 3; }

@media (max-width: 560px) {
  .thc-an__ctr { grid-template-columns: minmax(0, 1fr) auto; }
  .thc-an__tip { grid-column: 1 / -1; }
  .thc-an__pglabel { min-width: 0; width: 100%; }
  .thc-an.is-js .thc-an__panel { padding: .8rem .7rem; }
  .thc-an__tabs [role="tab"] { flex: 1 1 auto; padding: .45em .6em; }
}
@media (prefers-reduced-motion: no-preference) {
  html:not([data-thc-motion="reduce"]) .thc-an__part path, html:not([data-thc-motion="reduce"]) .thc-an__fs-cell { transition: fill .15s ease; }
}
@media print {
  .thc-an__tabs, .thc-an__picker, .thc-an__modes, .thc-an__controls, .thc-an__side, .thc-an__gtools, .thc-an__prac, .thc-an__demo, .thc-an__tally { display: none !important; }
  .thc-an__panel[hidden], .thc-an__fig[hidden] { display: block !important; }
}