/* Horse Coat Color Calculator (ROADMAP-Calcs-HorseRoot.md HR8) — the two parents side by side, the
   optional patterns and tests drawer, and the odds table. Everything else is the core stylesheet. */
.chqt-cc-row { display: grid; gap: .7rem; grid-template-columns: 1fr 1fr; }
.chqt-cc-more { margin: .6rem 0 0; }
.chqt-cc-more > summary, .chqt-cc-tests > summary { cursor: pointer; font-weight: 600; padding: .7rem 0; line-height: 1.35; }
.chqt-cc-pats { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.chqt-cc-tests { margin: .3rem 0 .2rem; }
.chqt-cc-tgrid { display: grid; gap: .5rem .7rem; grid-template-columns: 1fr 1fr; }
.chqt-cc-t { display: block; font-size: .82rem; }
.chqt-cc-t > span:first-child { display: block; margin-bottom: .15rem; }
.chqt-cc-tbl { width: 100%; border-collapse: collapse; margin: .6rem 0 .4rem; font-size: .95rem; }
.chqt-cc-tbl th, .chqt-cc-tbl td { text-align: left; padding: .4rem .3rem; border-bottom: 1px solid var(--chqt-line, #DADADA); }
.chqt-cc-tbl td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.chqt-cc-tbl thead th:last-child { text-align: right; }
.chqt-cc-list { margin: .3rem 0 .6rem; padding-left: 1.1rem; font-size: .93rem; line-height: 1.5; }
.chqt-cc-doc { margin-top: .8rem; } .chqt-cc-doc p { margin: 0 0 .55rem; font-size: .9rem; line-height: 1.5; }
.chqt-cc-notes .chqt-warn, .chqt-cc-notes .chqt-hint { margin: 0 0 .5rem; }
@media (max-width: 460px) { .chqt[data-tool="horse-coat-color-calculator"] .chqt-lede { display: none; } .chqt-cc-tgrid { grid-template-columns: 1fr; } }

/* phones only (the grid stacks below 860px): the answer's headline right under the inputs that decide it.
   On horseroots.com the header and the H1 take ~230px of the gate's 664px iPhone screen, so the full
   answer is below the fold; this line is not (the VhRide turkey planner's pattern). */
.chqt-cc-mini { display: none; }
@media (max-width: 859px) { .chqt-cc-mini:not(:empty) { display: block; margin: .6rem 0 0; padding: 10px 14px; border-radius: var(--chqt-radius, 10px); background: var(--chqt-cream, #F6F6F6); border-left: 4px solid var(--chqt-accent, #345C00); font-weight: 700; } }