/* Keep selected symptom labels and the expanded explanation within the same phone rail. */
@media (max-width: 600px) {
  .entry-content #symptom-checker:has(> .jt-symptom-grid > [data-symptom="formigamento"]) { padding-inline: 16px !important; }
  .entry-content #symptom-checker:has(> .jt-symptom-grid > [data-symptom="formigamento"]) > #result-area { padding-inline: 16px !important; }
  .entry-content #symptom-checker:has(> .jt-symptom-grid > [data-symptom="formigamento"]) #possible-causes-list { grid-template-columns: minmax(0, 1fr); }
  .entry-content #symptom-checker:has(> .jt-symptom-grid > [data-symptom="formigamento"]) #possible-causes-list > li { min-width: 0; overflow-wrap: anywhere; }
}

@media (max-width: 360px) {
  .entry-content #symptom-checker:has(> .jt-symptom-grid > [data-symptom="formigamento"]) > #result-area { padding-inline: 8px !important; }
}

/* Four-column comparisons share a 704px prose rail. Automatic layout lets the
   longest explanation crush short labels to 40–80px. Equal tracks keep whole
   words readable; the existing phone cards still take over through 900px. */
@media (min-width: 901px) {
  body.single-post .entry-content table.blog-table.jt-auto-card-table[data-jt-table-columns="4"] { table-layout: fixed !important; }
  body.single-post .entry-content table.blog-table.jt-auto-card-table[data-jt-table-columns="4"] tr > :is(th, td) {
    width: 25% !important;
    padding-inline: 14px !important;
  }
  body.single-post .entry-content table.blog-table.jt-auto-card-table[data-jt-table-columns="4"] th {
    overflow-wrap: break-word !important;
    hyphens: auto;
  }
}

/* Keep the safety explanations legible in these two reviewed light-surface tools. */
.entry-content #skin-aging-calculator [data-jt-reading-note="explanatory"],
.entry-content #guia-escolha-esfoliacao [data-jt-reading-note="explanatory"],
.entry-content #guia-escolha-esfoliacao #escolha-texto { color: #5a5552 !important; }
.entry-content #infografico-aplicacao-esfoliante [style*="min-width: 36px"] {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px;
  flex: 0 0 36px !important;
}
@media (max-width: 600px) {
  .entry-content #infografico-aplicacao-esfoliante > div > div:first-child > div:has(> div + div) {
    flex-direction: column !important;
    gap: 12px;
  }
}

/* Reviewed spots pathway: retain its two branches, give each a readable phone rail. */
.entry-content [data-jt-reading-flow="spots"] [style*="background: #2fa196"],
.entry-content [data-jt-reading-flow="spots"] [style*="background: #58c69e"],
.entry-content [data-jt-reading-flow="spots"] [style*="background: #2d877e"] {
  background: #226f67 !important;
}
.entry-content [data-jt-reading-flow="spots"] [style*="background: #d45e4c"] {
  background: #a83e32 !important;
}
@media (max-width: 600px) {
  .entry-content [data-jt-reading-flow="spots"],
  .entry-content [data-jt-reading-guide="spots"] { padding-inline: 16px !important; }
  .entry-content [data-jt-reading-flow="spots"] > div > div:has(> div + div) {
    flex-direction: column !important;
    gap: 28px;
  }
  .entry-content [data-jt-reading-flow="spots"] > div > div:has(> div + div) > div {
    width: 100% !important;
    min-width: 0;
  }
  .entry-content [data-jt-reading-guide="spots"] #treatment-display { padding: 18px !important; }
}

/* Reusable reading repairs, 2026-10-04.
 * Content-detected by lib/reading-patterns.php; no post-ID allow-list.
 * Geometry of legacy visual modules and bibliography hierarchy only.
 * Preserve current body type, modern main-content aids and WhatsApp identity.
 */
@media (max-width: 600px) {
  body.single-post .entry-content :is(.nail-anatomy-visual, .causes-flowchart) {
    padding-block: 32px !important;
  }
  body.single-post .entry-content :is(.nail-anatomy-visual, .causes-flowchart) > div {
    padding-inline: 16px !important;
  }
  body.single-post .entry-content .nail-anatomy-visual > div > div > div:last-child > .jt-typo-zone {
    padding: 16px !important;
  }
  body.single-post .entry-content .nail-anatomy-visual > div > div > div:last-child ul {
    padding-inline-start: 0 !important;
  }
  body.single-post .entry-content .causes-flowchart > div > .jt-typo-zone {
    padding: 16px !important;
  }
  body.single-post .entry-content .causes-flowchart > div > .jt-typo-zone > div:first-child {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }
  body.single-post .entry-content .causes-flowchart > div > .jt-typo-zone > div:first-child > div {
    min-width: 0;
    max-width: 100%;
  }
  body.single-post .entry-content .causes-flowchart > div > .jt-typo-zone > div:nth-child(2) > .jt-typo-zone {
    padding: 20px 16px !important;
  }
}

/* Fresh 2026-10-05 review: nested consultation/ingredient cards consumed 136px
 * before button padding at 320px. Their exact HTML owners are annotated by the
 * reading module, so unrelated inline cards and consultation controls keep their layout.
 */
@media (max-width: 600px) {
  body.single-post .entry-content :is(.jt-reading-consultation-tools, .jt-reading-ingredient-guide) {
    padding-inline: 16px !important;
  }
  body.single-post .entry-content .jt-reading-ingredient-guide button {
    gap: 10px;
  }
  body.single-post .entry-content .jt-reading-ingredient-guide button > span:first-child {
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: break-word;
  }
  body.single-post .entry-content .jt-reading-ingredient-guide button > span:last-child {
    flex: 0 0 auto;
  }
}

/* The four-column comparison keeps its existing mobile cards. At desktop,
 * give row labels enough room for complete words instead of a trailing letter.
 */
@media (min-width: 1025px) {
  body.single-post .entry-content table.blog-table.jt-auto-card-table[data-jt-table-columns="4"] tr > :is(th, td):first-child {
    min-width: 148px !important;
  }
}

/* The acrocordon source used 1.2rem with the site's 10px root: clinical copy
 * became 12px. Repair only the recognized guide's explanatory paragraphs.
 */
body.single-post .entry-content [data-jt-reading-guide="acrocordon"] p.lead {
  font-size: 16px !important;
  line-height: 1.65 !important;
  text-align: left;
}
body.single-post .entry-content [data-jt-reading-guide="acrocordon"] :is(.symptom-item, .alert-info) > p.small {
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* Text-only restoration of a legacy hair comparison whose geometry was absent
 * from storage. Same labels, explicitly grouped; this is not anatomical artwork.
 */
body.single-post .entry-content .jt-reading-hair-structure-card > p {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #59635e !important;
}
body.single-post .entry-content .jt-reading-hair-structure__comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 24px 0;
}
body.single-post .entry-content .jt-reading-hair-structure__comparison > section {
  min-width: 0;
  border-top: 1px solid #bdc8c1;
  padding-top: 16px;
}
body.single-post .entry-content .jt-reading-hair-structure h4 {
  font: 400 18px/1.3 Roobert, Arial, sans-serif;
  margin: 0 0 12px;
  color: #23463c;
}
body.single-post .entry-content .jt-reading-hair-structure p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}
body.single-post .entry-content .jt-reading-hair-structure__agents {
  display: flex;
  gap: 16px;
  margin: 0 0 10px;
  color: #59635e;
}
body.single-post .entry-content .jt-reading-hair-structure__legend {
  border-top: 1px solid #bdc8c1;
  padding-top: 18px;
}
body.single-post .entry-content .jt-reading-hair-structure__legend dl {
  display: grid;
  gap: 10px;
  margin: 0;
}
body.single-post .entry-content .jt-reading-hair-structure__legend dl > div {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
}
body.single-post .entry-content .jt-reading-hair-structure__legend :is(dt, dd) {
  margin: 0;
}
@media (max-width: 600px) {
  body.single-post .entry-content .jt-reading-hair-structure__comparison {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The legacy myths/facts owner retains its reviewed phone geometry.
 * Diagnosis now uses the semantic explainer, with one inset instead of four. */
@media (max-width: 600px) {
  body.single-post .entry-content .myths-facts-visual { padding-block: 32px !important; }
  body.single-post .entry-content .myths-facts-visual > div { padding-inline: 16px !important; }
  body.single-post .entry-content .myths-facts-visual > div > div { grid-template-columns: minmax(0, 1fr) !important; }
  body.single-post .entry-content .myths-facts-visual > div > div > .jt-typo-zone { min-width: 0; padding: 16px !important; }
}

/* Sources stay secondary while becoming readable and easier to select.
 * Keep the tool's own colour tokens and native link destinations.
 */
body.single-post .entry-content .jt-tool .jt-tool__sources {
  border-top: 1px solid var(--t-line, #d0c5b9);
  padding-top: 20px;
}
body.single-post .entry-content .jt-tool .jt-tool__sources-label {
  display: block;
  margin-bottom: 10px !important;
  font-size: 12px;
}
body.single-post .entry-content .jt-tool ol.jt-tool__sources-list {
  font-size: 14px;
  line-height: 1.6;
}
body.single-post .entry-content .jt-tool ol.jt-tool__sources-list li {
  margin-bottom: 8px;
}
body.single-post .entry-content .jt-tool ol.jt-tool__sources-list li:last-child {
  margin-bottom: 0;
}

/* Legacy stepped melasma pyramid: flatten only this nested staircase on phones.
 * Other .melasma-diagram panels do not have this direct wrapper signature.
 * Keep the stored content and desktop/tablet geometry; new uses follow the markup.
 */
@media (max-width: 600px) {
  body.single-post .entry-content .melasma-diagram > div:has(> div[style*="padding-left: 40px"]) {
    padding-inline: 16px !important;
  }
  body.single-post .entry-content .melasma-diagram > div > div[style*="padding-left: 40px"] {
    padding-left: 0 !important;
  }
  body.single-post .entry-content .melasma-diagram > div > div[style*="padding-left: 40px"] > div {
    margin-left: 0 !important;
    padding: 16px !important;
    min-width: 0;
    max-width: 100%;
  }
  body.single-post .entry-content .melasma-diagram > div > div[style*="padding-left: 40px"] > div > h4 {
    min-width: 0;
  }
  body.single-post .entry-content .melasma-diagram > div > div[style*="padding-left: 40px"] > div > h4 > span {
    flex: 0 0 36px;
    margin-right: 12px !important;
  }
}

/* A four-stage legacy procedure flow has 130px text rails at desktop.
 * Allow two readable cards per row; the exact owner keeps its original controls. */
body.single-post .entry-content #procedure-steps .step-card {
  flex: 1 1 calc(50% - 15px) !important;
  min-width: 0 !important;
}
body.single-post .entry-content #procedure-steps .step-card h4 {
  overflow-wrap: break-word;
}

@media (max-width: 600px) {
  body.single-post .entry-content #procedure-steps .step-card { flex-basis: 100% !important; }
}

/* Reviewed explanatory notes were reduced twice by nested em/small sizing.
 * Exact text owners are annotated; ordinary small print and other diagrams keep their type. */
body.single-post .entry-content [data-jt-reading-note="explanatory"] {
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* Three reviewed legacy flows reserve 20–55% of a phone card for empty space.
 * Keep their content and desktop composition; widen the owning panels on phones. */
@media (max-width: 600px) {
  body.single-post .entry-content [data-jt-reading-flow] {
    padding-inline: 16px !important;
  }
  body.single-post .entry-content [data-jt-reading-flow="poros"] > div:first-of-type > div:has(> div > div > h4) {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
  }
  body.single-post .entry-content [data-jt-reading-flow="poros"] > div:first-of-type > div > div:has(> div > h4) {
    grid-column: 2;
    grid-row: 1;
    padding-inline: 0 !important;
    min-width: 0 !important;
    text-align: left !important;
    width: auto !important;
  }
  body.single-post .entry-content [data-jt-reading-flow="poros"] > div:first-of-type > div > div:has(> div > h4) > div {
    padding: 16px !important;
  }
  body.single-post .entry-content [data-jt-reading-flow="poros"] > div:first-of-type > div > div:empty {
    display: none !important;
  }
  body.single-post .entry-content [data-jt-reading-flow="poros"] > div:first-of-type > div > div[style*="flex-shrink: 0"] {
    grid-column: 1;
    grid-row: 1;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
  }
  body.single-post .entry-content [data-jt-reading-flow="poros"] > div:first-of-type > div[style*="position: absolute"] {
    left: 18px !important;
  }
  body.single-post .entry-content [data-jt-reading-flow="acne"] > div > div:has(> h4),
  body.single-post .entry-content [data-jt-reading-flow="melasma-diagnosis"] > div > div:has(> h4) {
    width: 100% !important;
    padding-inline: 16px !important;
    min-width: 0 !important;
  }
  body.single-post .entry-content [data-jt-reading-flow="acne"] > div > div:has(> div > h4),
  body.single-post .entry-content [data-jt-reading-flow="melasma-diagnosis"] > div > div:has(> div > div > h4) {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
  body.single-post .entry-content [data-jt-reading-flow="acne"] > div > div > div:has(> h4),
  body.single-post .entry-content [data-jt-reading-flow="melasma-diagnosis"] > div > div > div:has(> div > h4) {
    width: 100% !important;
    min-width: 0 !important;
  }
}
/* The 2715 selector fills this owner after a choice; keep all four text states readable. */
@media (max-width: 600px) {
	.entry-content .skincare-diagram:has(#hydrator-content) > .jt-typo-zone { padding-inline: 16px !important; }
	.entry-content .skincare-diagram #hydrator-display { padding: 18px !important; }
	.entry-content .skincare-diagram #hydrator-content,
	.entry-content .skincare-diagram #hydrator-content > div:has(> div + div) { flex-direction: column !important; align-items: stretch !important; gap: 16px; min-width: 0; width: 100%; }
	.entry-content .skincare-diagram #hydrator-content > div:has(> div + div) > div:first-child { margin-right: 0 !important; font-size: 2.5rem !important; align-self: flex-start; }
	.entry-content .skincare-diagram #hydrator-content > div:has(> div + div) > div:last-child { min-width: 0; width: 100%; }
}

/* Exact reviewed laser explanation: native disclosure, with all prose retained in HTML. */
.entry-content .jt-reading-laser-explanation { margin: 24px 0 0; border-top: 1px solid #b8ccc5; }
.entry-content .jt-reading-laser-explanation > summary { padding: 16px 0; min-height: 48px; cursor: pointer; color: #183f35; font-weight: 500; }
.entry-content .jt-reading-laser-explanation > summary:focus-visible { outline: 2px solid #183f35; outline-offset: 4px; }
.entry-content .jt-reading-laser-explanation #laserDiagram { opacity: 1 !important; padding-top: 16px; }
@media print {
	.entry-content .jt-reading-laser-explanation::details-content { display: block !important; content-visibility: visible !important; }
	.entry-content .jt-reading-laser-explanation > #laserDiagram { display: block !important; }
}
/* The hair-care schedule lives inside a padded legacy article module.
   Size its phone tracks from available space, not a fixed three-column count. */
@media (max-width: 767px) {
  body.single-post #treatment-schedule .week-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)) !important;
  }
  body.single-post #treatment-schedule .month-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)) !important;
  }
  body.single-post #treatment-schedule :is(.day-card, .week-card) {
    min-width: 0;
  }
  body.single-post #treatment-schedule .schedule-controls {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
  }
  body.single-post #treatment-schedule .schedule-controls > .btn-tab {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 12px 8px;
    font-size: 14px;
    line-height: 1.25;
    white-space: normal;
    transition-property: background-color, color, border-color, box-shadow;
  }
  body.single-post #treatment-schedule #schedule-semanal > .jt-typo-zone > div > div {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 6px !important;
  }
}

/* One native disclosure contract for authored FAQs and optional reading.
 * Reviewed figure summaries retain their separate owner. Only the existing
 * inline-authored FAQ families need the legacy important declarations below. */
body.single-post .entry-content :is(:where(#perguntas-frequentes),details.jtpv-optional,details.jt-optional-study) { --jt-faq-inline:0px; }
body.single-post .entry-content .jt25-faq { --jt-faq-inline:18px; }
body.single-post .entry-content :is(.jt-eeat-upgrade__faq,.jt-pr-next15__faq) { --jt-faq-inline:0px; }
body.single-post .entry-content :is(.jt60-faq,.jt26-r26-faq,.faq-list,.jt25-faq,.jt-eeat-upgrade__faq,.jt-pr-next15__faq) > details,
body.single-post .entry-content :where(#perguntas-frequentes) details { padding:0 !important; }
body.single-post .entry-content :is(.jt60-faq,.jt26-r26-faq,.faq-list,.jt25-faq,.jt-eeat-upgrade__faq,.jt-pr-next15__faq) > details > summary { display:flex !important; padding:16px var(--jt-faq-inline,16px) !important; list-style:none !important; }
body.single-post .entry-content :is(:is(.jt60-faq,.jt26-r26-faq,.faq-list,.jt25-faq,.jt-eeat-upgrade__faq,.jt-pr-next15__faq) > details, :where(#perguntas-frequentes) details, details:where(.jtpv-optional,.jt-optional-study)) > summary:not(:where(.jtpv-optional__summary)) {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  box-sizing:border-box; min-height:52px; padding:16px var(--jt-faq-inline,16px);
  cursor:pointer; list-style:none;
}
body.single-post .entry-content :is(:is(.jt60-faq,.jt26-r26-faq,.faq-list,.jt25-faq,.jt-eeat-upgrade__faq,.jt-pr-next15__faq) > details, :where(#perguntas-frequentes) details, details:where(.jtpv-optional,.jt-optional-study)) > summary:not(:where(.jtpv-optional__summary))::-webkit-details-marker { display:none; }
body.single-post .entry-content :is(:is(.jt60-faq,.jt26-r26-faq,.faq-list,.jt25-faq,.jt-eeat-upgrade__faq,.jt-pr-next15__faq) > details, :where(#perguntas-frequentes) details, details:where(.jtpv-optional,.jt-optional-study)) > summary:not(:where(.jtpv-optional__summary))::after {
  content:''; flex:none; width:8px; height:8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg);
}
body.single-post .entry-content :is(:is(.jt60-faq,.jt26-r26-faq,.faq-list,.jt25-faq,.jt-eeat-upgrade__faq,.jt-pr-next15__faq) > details, :where(#perguntas-frequentes) details, details:where(.jtpv-optional,.jt-optional-study))[open] > summary:not(:where(.jtpv-optional__summary))::after { transform:rotate(225deg); }
body.single-post .entry-content :is(:is(.jt60-faq,.jt26-r26-faq,.faq-list,.jt25-faq,.jt-eeat-upgrade__faq,.jt-pr-next15__faq) > details, :where(#perguntas-frequentes) details, details:where(.jtpv-optional,.jt-optional-study)) > summary:not(:where(.jtpv-optional__summary)):focus-visible { outline:2px solid currentColor; outline-offset:-4px; }
body.single-post .entry-content :is(.jt60-faq,.jt26-r26-faq,.faq-list,.jt25-faq,.jt-eeat-upgrade__faq,.jt-pr-next15__faq) > details > :not(summary),
body.single-post .entry-content :where(#perguntas-frequentes) details > :not(summary) { margin-inline:var(--jt-faq-inline,16px) !important; }
body.single-post .entry-content :is(.jt60-faq,.jt26-r26-faq,.faq-list,.jt25-faq,.jt-eeat-upgrade__faq,.jt-pr-next15__faq) > details > :last-child:not(summary),
body.single-post .entry-content :where(#perguntas-frequentes) details > :last-child:not(summary) { margin-bottom:16px !important; }


/* Direct FAQ prose uses the native disclosure gutter once. Legacy metadata may
 * supply block padding and a surface; horizontal paragraph padding belongs here. */
body.single-post .entry-content :where(section.section) .faq-list > details > p {
  padding-inline:0;
}

/* Semantic explainers replace nested presentation boxes: one outer reading rail,
 * two tracks at most, and only a meaningful note receives its own inset. */
body.single-post .entry-content .jt-reading-explainer {
  width: min(704px, calc(100% - 40px));
  margin: 48px auto;
  padding: 0;
  overflow-wrap: anywhere;
  color: #31453c;
  font: 17px/1.65 Roobert, "Helvetica Neue", Arial, sans-serif;
}
body.single-post .entry-content .jt-reading-explainer > h3 {
  margin: 0 0 28px;
  font-size: clamp(24px, 2.1vw, 30px);
  line-height: 1.2;
}
body.single-post .entry-content .jt-reading-explainer h4 {
  margin: 0 0 14px;
  font-size: 21px;
  line-height: 1.3;
  color: inherit;
}
body.single-post .entry-content .jt-reading-explainer p {
  margin: 0 0 16px;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
body.single-post .entry-content .jt-reading-explainer p:last-child { margin-bottom: 0; }
body.single-post .entry-content .jt-reading-explainer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  margin-bottom: 28px;
  padding: 0;
}
body.single-post .entry-content .jt-reading-explainer__section {
  min-width: 0;
  padding-top: 20px;
  border-top: 1px solid var(--jt-brand-line, #c7bdb5);
}
body.single-post .entry-content .jt-reading-explainer :is(ol, ul).jt-reading-explainer__list {
  display: block;
  list-style: decimal;
  margin: 0;
  padding-left: 1.3em;
  font-size: inherit;
}
body.single-post .entry-content .jt-reading-explainer ul.jt-reading-explainer__list {
  list-style: disc;
}
body.single-post .entry-content .jt-reading-explainer .jt-reading-explainer__list > li {
  display: list-item;
  list-style: inherit;
  padding-left: .15em;
  margin-bottom: 10px;
  overflow-wrap: anywhere;
}
/* Preserve literal authored list markers without printing a second bullet. */
body.single-post .entry-content .jt-reading-explainer ul.jt-reading-explainer__list--authored-markers {
  list-style: none;
  padding-left: 0;
}

body.single-post .entry-content .jt-reading-explainer__symbol {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 24px;
  line-height: 1.3;
}
body.single-post .entry-content .jt-reading-explainer__note {
  margin-block: 28px;
  padding: 24px 16px;
  background: #edf3ef;
  color: #31453c;
}
body.single-post .entry-content .jt-reading-explainer__note--dark { --jt-prose-ink: #fff; background: #243c30; color: #fff; }
body.single-post .entry-content .jt-reading-explainer__note--dark > div { margin-bottom: 20px; }
body.single-post .entry-content .jt-reading-explainer__note--dark > div > div { margin-bottom: 12px; }
body.single-post .entry-content .jt-reading-explainer__note--dark span { margin-right: 6px; }
body.single-post .entry-content :is(button, a).jt-reading-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  max-width: 100%;
  padding: 12px 24px;
  border: 1px solid #243c30;
  border-radius: 999px;
  background: #243c30;
  color: #fff;
  font: 500 16px/1.4 Roobert, "Helvetica Neue", Arial, sans-serif;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
}
body.single-post .entry-content :is(button, a).jt-reading-action:hover { background: #365543; }
body.single-post .entry-content :is(button, a).jt-reading-action:focus-visible { outline: 3px solid #075e54; outline-offset: 4px; }
@media (min-width: 720px) {
  body.single-post .entry-content .jt-reading-explainer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.single-post .entry-content .jt-reading-explainer__section:last-child:nth-child(odd) { grid-column: 1 / -1; }
  body.single-post .entry-content .jt-reading-explainer__note { padding: 28px; }
}

/* 2026-10-22: selected native actions share one visible state owner. */
body.single-post .entry-content :is(button, a).jt-reading-action:is([aria-pressed="true"], [aria-expanded="true"]) { box-shadow: 0 0 0 3px #bfded3; }

/* Existing explainer/action roles with explicit branching geometry. */
body.single-post .entry-content .jt-reading-flow__canvas { position: relative; }
body.single-post .entry-content .jt-reading-flow__connector {
  position: absolute; left: 50%; top: 48px; bottom: 48px;
  width: 2px; background: #c7bdb5;
}
body.single-post .entry-content .jt-reading-flow__node {
  position: relative; z-index: 1; box-sizing: border-box;
  width: 70%; margin: 0 auto 28px; padding: 20px;
  border: 1px solid #7b9c8f; background: #fff;
}
body.single-post .entry-content .jt-reading-flow__node--goal {
  margin: 28px auto 0; background: #edf3ef;
}
body.single-post .entry-content .jt-reading-flow__branches { position: relative; z-index: 1; }
body.single-post .entry-content .jt-reading-flow__branch {
  min-width: 0; padding: 20px; background: #edf3ef; border: 1px solid #7b9c8f;
}
body.single-post .entry-content .jt-reading-flow__branch--attention { background: #f8eeeb; border-color: #c89d91; }
@media (max-width: 719px) {
  body.single-post .entry-content .jt-reading-flow__node { width: 100%; padding: 16px; }
  body.single-post .entry-content .jt-reading-flow__branch { padding: 16px; }
}


/* Recovered anatomy: render owner adds semantic class to existing component,
   without replacing working metadata/part-btn handlers or clinical text. */
body.single-post .entry-content .jt-reading-anatomy .diagram-wrapper {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px;
}
body.single-post .entry-content .jt-reading-anatomy__image {
  display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto;
}
body.single-post .entry-content .jt-reading-anatomy .info-panel {
  display: flex; flex-wrap: wrap; align-content: start; gap: 10px;
}
body.single-post .entry-content .jt-reading-anatomy .part-btn { flex: 1 1 180px; }
body.single-post .entry-content .jt-reading-anatomy .info-box { flex-basis: 100%; }
@media (min-width: 720px) {
  body.single-post .entry-content .jt-reading-anatomy .diagram-wrapper {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  }
}

body.single-post .entry-content .jt-reading-anatomy__figure { margin: 0; min-width: 0; }

/* Bounded reusable process diagram. Short labels, not parallel reading prose.
 * Decorative geometry repeats only the adjacent caption's three concepts. */
body.single-post .entry-content .jt-reading-process {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 44px;
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
}
body.single-post .entry-content .jt-reading-process__stage {
  position: relative;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 20px 16px;
  background: #edf3ef;
  text-align: center;
}
body.single-post .entry-content .jt-reading-process__stage:not(:last-child)::after {
  content: "↓";
  position: absolute;
  inset-block-end: -36px;
  inset-inline-start: calc(50% - 12px);
  width: 24px;
  color: #315b4c;
  font: 24px/1 sans-serif;
}
body.single-post .entry-content .jt-reading-process__stage > strong { display: block; margin-bottom: 10px; }
body.single-post .entry-content .jt-reading-process__stage > p { font-size: 15px; line-height: 1.5; }
body.single-post .entry-content .jt-reading-process__visual { position: relative; width: 136px; height: 94px; margin: 0 auto 18px; }
body.single-post .entry-content .jt-reading-process__visual span { position: absolute; display: block; margin: 0; padding: 0; }
body.single-post .entry-content .jt-reading-process__visual--particles span { width: 17px; height: 17px; border: 2px solid #315b4c; border-radius: 50%; background: #d6e6dc; }
body.single-post .entry-content .jt-reading-process__visual--particles span:nth-child(1) { left: 18px; top: 15px; }
body.single-post .entry-content .jt-reading-process__visual--particles span:nth-child(2) { left: 61px; top: 6px; }
body.single-post .entry-content .jt-reading-process__visual--particles span:nth-child(3) { left: 101px; top: 24px; }
body.single-post .entry-content .jt-reading-process__visual--particles span:nth-child(4) { left: 31px; top: 58px; }
body.single-post .entry-content .jt-reading-process__visual--particles span:nth-child(5) { left: 72px; top: 45px; }
body.single-post .entry-content .jt-reading-process__visual--particles span:nth-child(6) { left: 106px; top: 70px; }
body.single-post .entry-content .jt-reading-process__visual--cells span { width: 65px; height: 27px; border: 2px solid #315b4c; border-radius: 60% 35%; background: #d6e6dc; }
body.single-post .entry-content .jt-reading-process__visual--cells span::after { content: ""; position: absolute; width: 11px; height: 11px; inset: 6px auto auto 25px; border-radius: 50%; background: #7a9f8c; }
body.single-post .entry-content .jt-reading-process__visual--cells span:nth-child(1) { left: 6px; top: 12px; transform: rotate(-18deg); }
body.single-post .entry-content .jt-reading-process__visual--cells span:nth-child(2) { left: 62px; top: 38px; transform: rotate(20deg); }
body.single-post .entry-content .jt-reading-process__visual--cells span:nth-child(3) { left: 11px; top: 65px; transform: rotate(-10deg); }
body.single-post .entry-content .jt-reading-process__visual--network span { width: 130px; height: 22px; border-top: 3px solid #537c67; border-radius: 50%; }
body.single-post .entry-content .jt-reading-process__visual--network span:nth-child(1) { top: 10px; transform: rotate(15deg); }
body.single-post .entry-content .jt-reading-process__visual--network span:nth-child(2) { top: 30px; transform: rotate(-14deg); }
body.single-post .entry-content .jt-reading-process__visual--network span:nth-child(3) { top: 50px; transform: rotate(12deg); }
body.single-post .entry-content .jt-reading-process__visual--network span:nth-child(4) { top: 70px; transform: rotate(-10deg); }
body.single-post .entry-content .jt-reading-process__visual--network span:nth-child(5) { width: 90px; top: 35px; left: -15px; transform: rotate(72deg); }
body.single-post .entry-content .jt-reading-process__visual--network span:nth-child(6) { width: 90px; top: 35px; left: 15px; transform: rotate(80deg); }
body.single-post .entry-content .jt-reading-process__visual--network span:nth-child(7) { width: 90px; top: 35px; left: 45px; transform: rotate(72deg); }
body.single-post .entry-content .jt-reading-process__visual--network span:nth-child(8) { width: 90px; top: 35px; left: 75px; transform: rotate(80deg); }
@media (min-width: 720px) {
  body.single-post .entry-content .jt-reading-process { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  body.single-post .entry-content .jt-reading-process__stage:not(:last-child)::after { content: "→"; inset-block-start: 64px; inset-block-end: auto; inset-inline-start: auto; inset-inline-end: -26px; }
}

/* A direct article container has already supplied the outer phone gutter. */
body.single-post .entry-content > .blog-article > .jt-reading-explainer {
  width: min(704px, 100%);
}

/* Native medical choices: long labels wrap in ordinary flow, with one shared
   fieldset owner. The existing controller and native reset own result state. */
body.single-post .entry-content .jt-reading-choice-form {
  margin: 24px 0 28px;
  padding: 0;
}
body.single-post .entry-content fieldset.jt-reading-choices {
  min-inline-size: 0;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  font: inherit;
}
body.single-post .entry-content .jt-reading-choices > legend {
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
  color: inherit;
  font: inherit;
}
body.single-post .entry-content .jt-reading-choices > label {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-height: 48px;
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--jt-brand-line, #c7bdb5);
  color: inherit;
  font: inherit;
  line-height: 1.45;
  cursor: pointer;
}
body.single-post .entry-content .jt-reading-choices > label > input[type="radio"] {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--jt-brand-verde, #1e3a2f);
}
body.single-post .entry-content .jt-reading-choices > label > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
body.single-post .entry-content .jt-reading-choices > label:has(:checked) {
  color: var(--jt-brand-verde, #1e3a2f);
  background: var(--jt-brand-paper, #f4eee8);
}
body.single-post .entry-content .jt-reading-choices > label:has(:focus-visible) {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
body.single-post .entry-content button.jt-reading-action.jt-reading-choice-form__reset {
  width: auto;
  background: transparent;
  border: 1px solid currentColor;
  color: var(--jt-brand-verde, #1e3a2f);
}
body.single-post .entry-content button.jt-reading-action.jt-reading-choice-form__reset:hover {
  background: var(--jt-brand-paper, #f4eee8);
}

/* Native choice results use the same prose rail as their questions. A separator
   marks the response without nesting another narrow padded card. */
body.single-post .entry-content .jt-reading-choice-result {
  margin-top: 28px;
  padding: 20px 0 0;
  border-top: 1px solid var(--jt-brand-line, #c7bdb5);
}

/* Authored decision actions share the native action owner. The exact legacy
   inline flex signature is retired when this role is applied. */
body.single-post .entry-content .jt-reading-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
body.single-post .entry-content .jt-reading-actions--centered {
  justify-content: center;
}
body.single-post .entry-content :is(a, button).jt-reading-action.jt-reading-action--on-dark {
  background: #f4eee8;
  border-color: #f4eee8;
  color: #243c30;
  text-transform: none;
}
body.single-post .entry-content :is(a, button).jt-reading-action.jt-reading-action--on-dark:hover { background: #e3ddd6; }
body.single-post .entry-content :is(a, button).jt-reading-action.jt-reading-action--on-dark.jt-reading-action--secondary {
  background: transparent;
  color: #f4eee8;
}
body.single-post .entry-content :is(a, button).jt-reading-action.jt-reading-action--on-dark.jt-reading-action--secondary:hover { background: rgba(255,255,255,.12); }
body.single-post .entry-content :is(a, button).jt-reading-action.jt-reading-action--on-dark:focus-visible { outline-color: #fff; }