/* Beauty section additions. Loaded after site.css, so it only adds what the section needs
   and reuses the main site's design tokens. */
.badge-evidence--traditional { background: var(--accent); }
.badge-evidence--trials { background: var(--warn); }

.badge-explainer { margin: var(--space-2) 0 0; font-size: .82rem; color: var(--ink-faint); line-height: 1.5; }
.badge-explainer a { color: var(--accent); }

.beauty-hero { padding-top: var(--space-7); padding-bottom: var(--space-5); /* side gutters come from .container so they match the breadcrumb at every width */ }
.beauty-hero h1 { font-family: var(--font-serif); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; margin: var(--space-2) 0 var(--space-3); color: var(--ink); }
.beauty-hero .lede { max-width: 62ch; font-size: 1.12rem; color: var(--ink-soft); line-height: 1.65; }
.beauty-hero-media { margin: var(--space-5) 0 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.beauty-hero-media img { display: block; width: 100%; height: auto; }

.beauty-group { padding: var(--space-5) 0; }
.beauty-group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin: 0 0 var(--space-4); border-bottom: 1px solid var(--line); padding-bottom: var(--space-2); }
.beauty-group-head h2 { font-family: var(--font-serif); font-size: 1.5rem; margin: 0; color: var(--ink); }
.beauty-group-head p { margin: 0; color: var(--ink-faint); font-size: .9rem; max-width: 52ch; }

.beauty-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: var(--space-4); }
.beauty-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--shadow); transition: transform .15s ease, border-color .15s ease; }
.beauty-card:hover, .beauty-card:focus-visible { transform: translateY(-2px); border-color: var(--accent); }
.beauty-card-media { display: block; aspect-ratio: 4 / 3; background: var(--paper); overflow: hidden; }
.beauty-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.beauty-card-text { display: block; padding: var(--space-3) var(--space-4) var(--space-4); }
.beauty-card-text strong { display: block; font-family: var(--font-serif); font-size: 1.08rem; line-height: 1.3; color: var(--ink); }
.beauty-card-hanzi { font-family: var(--font-cjk); color: var(--ink-faint); font-size: .85rem; margin-left: .35rem; }
.beauty-card summary, .beauty-card .card-summary { display: block; margin: var(--space-2) 0 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.5; }
.beauty-card-type { display: inline-block; margin: var(--space-2) 0 0; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 600; }

.beauty-small-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-3); }
.beauty-point-card { display: flex; flex-direction: column; gap: var(--space-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-3); text-decoration: none; color: inherit; }
.beauty-point-card:hover, .beauty-point-card:focus-visible { border-color: var(--accent); }
.beauty-point-card .code { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.beauty-point-card strong { font-size: .98rem; color: var(--ink); }
.beauty-point-card .hanzi { font-family: var(--font-cjk); color: var(--ink-faint); font-size: .82rem; }

.safety-lead { border-left: 4px solid var(--warn); background: var(--warn-soft); padding: var(--space-4); border-radius: var(--radius-sm); margin: 0 0 var(--space-4); }
.safety-lead p { margin: 0; }

.explainer-note { background: var(--accent-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); font-size: .92rem; color: var(--ink-soft); }

.point-section { padding: var(--space-5) 0; border-top: 1px solid var(--line); }
.point-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); margin: var(--space-3) 0 var(--space-5); }
.point-meta div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-3); }
.point-meta dt { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.point-meta dd { margin: var(--space-1) 0 0; color: var(--ink); }

.herb-section h2 { font-family: var(--font-serif); }
.herb-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.herb-action { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-4); }
.herb-action strong { display: block; color: var(--ink); margin-bottom: var(--space-2); }

.product-card { background: var(--accent-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-5); margin: var(--space-6) 0; }
.product-card .product-label { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin: 0 0 var(--space-2); }
.product-card p { margin: 0 0 var(--space-3); max-width: 60ch; }
.product-card .btn-ghost { display: inline-block; }

@media (max-width: 640px) {
  .beauty-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .beauty-small-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* point tiles with thumbnails */
.beauty-point-thumb { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--paper); border: 1px solid var(--line); }
.beauty-point-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.beauty-point-thumb--coming { display: flex; align-items: center; justify-content: center; border-style: dashed; background: repeating-linear-gradient(45deg, var(--paper), var(--paper) 8px, var(--surface) 8px, var(--surface) 16px); }
.beauty-point-thumb--coming span { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); text-align: center; padding: 0 6px; }
.beauty-point-card .code { margin-top: var(--space-1); }

.beauty-history-line { margin: var(--space-6) 0 var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .95rem; }
.beauty-history-line a { color: var(--accent); }

/* mobile margins for the hub intro and hero text */
@media (max-width: 640px) {
  .beauty-hero h1, .beauty-hero .lede, .beauty-hero .eyebrow { padding-left: 0; padding-right: 0; }
  .beauty-hero .lede { margin-left: 0; margin-right: 0; }
}

/* hub hero: text beside the banner on desktop, banner below the intro on mobile */
.beauty-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-6); align-items: center; }
.beauty-hero-banner { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.beauty-hero-banner img { display: block; width: 100%; height: auto; }
@media (max-width: 880px) {
  .beauty-hero-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}
.beauty-card-media img { width: 100%; height: 100%; object-fit: cover; }
.beauty-point-card .beauty-point-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Phase 5: hub sections, card metadata, the face check and the face map. */
.hub-section { padding: var(--space-6) 0; border-top: 1px solid var(--line); }
.hub-section:first-of-type { border-top: 0; }
.hub-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.hub-section-head h2 { font-family: var(--font-serif); font-size: 1.55rem; margin: 0; color: var(--ink); }
.hub-section-head p { margin: 0; color: var(--ink-faint); font-size: .92rem; max-width: 62ch; }
.tile-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2); }
.tile-tag { font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.tile-tag--warn { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-soft); }
.practice-group { margin-bottom: var(--space-5); }
.practice-group h3, .herb-group h3 { font-family: var(--font-serif); font-size: 1.15rem; margin: 0 0 var(--space-3); color: var(--ink); }
.herb-group { margin-bottom: var(--space-5); }
.condition-links { margin-top: var(--space-3); }
.beauty-card--link { border-style: dashed; }
.beauty-card--link .beauty-card-text { padding: var(--space-4); }
.cta-panel { background: var(--accent-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-5); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.cta-panel p { margin: 0; max-width: 60ch; color: var(--ink-soft); }
.about-section { padding: var(--space-6) 0; border-top: 1px solid var(--line); }
.about-section summary { font-family: var(--font-serif); font-size: 1.35rem; cursor: pointer; color: var(--ink); }
.about-body { padding-top: var(--space-4); }
.about-body .section { padding: var(--space-4) 0; border-top: 1px solid var(--line); }
.about-body .section:first-child { border-top: 0; }
.face-map-preview { max-width: 520px; margin: 0 auto; }
.face-map-preview svg, .face-map-wrap svg { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.face-map-wrap { max-width: 640px; margin: var(--space-5) auto; }
.face-map-legend { columns: 2; column-gap: var(--space-5); padding-left: var(--space-4); }
.face-map-legend li { margin: 0 0 6px; break-inside: avoid; }
.check-form { max-width: 720px; margin: var(--space-5) 0; }
.check-q { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-4); margin: 0 0 var(--space-4); background: var(--surface); }
.check-q legend { font-weight: 600; color: var(--ink); padding: 0 var(--space-2); }
.check-opt { display: block; padding: var(--space-2) 0; color: var(--ink-soft); cursor: pointer; }
.check-opt input { margin-right: var(--space-2); }
.check-result { max-width: 760px; margin: var(--space-5) 0; border-top: 2px solid var(--accent); padding-top: var(--space-4); }
.check-reading { padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.check-reading--second { opacity: .85; }
.check-reading h3 { font-family: var(--font-serif); margin: 0 0 var(--space-2); font-size: 1.2rem; }
.check-badge { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 8px; vertical-align: middle; }
.check-badge--soft { color: var(--ink-faint); background: var(--paper); }
.check-note { color: var(--ink-faint); font-size: .9rem; }

/* Phase 5: the beauty nav carries one item more than the other sections, so tighten it on
   desktop instead of letting the header wrap. */
@media (min-width: 881px) {
  .site-header .header-inner { gap: 12px; }
  .site-header .nav { gap: 4px; flex-wrap: nowrap; }
  .site-header .nav a { padding: 0 8px; }
  .site-header .q-brand strong { white-space: nowrap; }
}
/* herb and point tiles: keep the summary to two lines so the 24 tiles align */
.beauty-point-card .card-summary {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: .82rem;
}

/* Phase 9 hub layout: deterministic grids, condition cards, reading column */
.hub-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 900px) {
  .hub-grid { grid-template-columns: repeat(var(--cols-tab, 2), minmax(0, 1fr)); }
  .hub-span-tab { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .hub-grid { grid-template-columns: 1fr; }
  .hub-span-tab { grid-column: auto; }
}
.beauty-card--condition .beauty-card-media img { object-fit: cover; }
.card-source-tag { display: inline-block; margin: var(--space-2) 0 0; font-size: .72rem; letter-spacing: .01em; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 3px 9px; }
.reading-col { max-width: var(--measure); margin: 0 auto; }
.check-form, .check-result { max-width: none; }

/* Phase 10: size rule, fixed 4:3 card art, header, mobile gutters, reading column */
.hub-grid { --cols-mob: 1; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
@media (max-width: 900px) {
  .hub-grid { grid-template-columns: repeat(var(--cols-tab, 3), minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hub-grid { grid-template-columns: repeat(var(--cols-mob, 1), minmax(0, 1fr)); gap: var(--space-3); }
}
.beauty-card-media { aspect-ratio: 4 / 3; overflow: hidden; }
.beauty-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.beauty-point-thumb { aspect-ratio: 4 / 3; height: auto; }
.beauty-point-thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-illustration-caption { display: block; margin: var(--space-1) 0 0; font-size: .7rem; color: var(--ink-faint); }
.site-header .nav { flex-wrap: nowrap; }
.reading-col { max-width: var(--measure); margin: 0; }
@media (max-width: 640px) {
  .hub-section, .about-section, .site-footer .container { padding-left: 16px; padding-right: 16px; }
  .beauty-hero-grid, .hub-section-head, .hub-grid { padding-left: 0; padding-right: 0; }
}

/* Phase 10: chip strip wraps on mobile so nothing runs to the screen edge */
@media (max-width: 640px) {
  .chipbar { overflow-x: visible; }
  .chipbar ul { flex-wrap: wrap; min-width: 0; overflow-x: visible; row-gap: 2px; padding: 6px 16px; }
  .chipbar a { white-space: normal; }
}

/* Phase 10: the site's primary button (same look as pattern-check's .btn) */
.btn { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-size: 14.5px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); padding: 11px 18px; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); text-decoration: none; }

/* Phase 13: beginner practice guides (step cards, diagrams, pressure, moves, routines) */
.practice-diagram { margin: var(--space-5) 0 var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: var(--space-3); }
.practice-diagram img { display: block; width: 100%; height: auto; }
.practice-diagram--crop { display: flex; flex-direction: column; align-items: center; }
.practice-diagram--crop img { max-height: 520px; max-width: 100%; width: auto; }
.practice-diagram--shapes img { max-height: 300px; width: auto; margin: 0 auto; }
.practice-diagram figcaption { margin-top: var(--space-2); }

.skip-box { margin: var(--space-4) 0; }
.skip-box ul { margin: 0 0 var(--space-2); }
.skip-box-link { margin: 0; font-size: .95rem; }

.practice-note { max-width: var(--measure); color: var(--ink-soft); }

.guide-block { margin: var(--space-5) 0; }
.guide-block > h3:first-child { margin-top: 0; }

.step-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-4) 0; }
@media (max-width: 900px) { .step-grid { grid-template-columns: 1fr; } }

.step-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.step-head { display: flex; align-items: baseline; gap: var(--space-2); }
.step-num { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; border-radius: 999px; background: var(--accent); color: var(--paper); font-family: var(--font-serif); font-size: 1rem; flex: none; }
.step-area { font-family: var(--font-serif); font-size: 1.12rem; color: var(--ink); }
.step-figure { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-start; }
.step-figure img { display: block; height: 190px; width: auto; max-width: 100%; object-fit: contain;
  border-radius: calc(var(--radius) / 2); border: 1px solid var(--line); background: var(--paper); }
.step-figure--mini { justify-content: center; }
.step-figure--mini svg { width: 150px; height: 112px; }
.step-figure--coming { min-height: 120px; align-items: center; justify-content: center; border: 1px dashed var(--line); border-radius: calc(var(--radius) / 2); color: var(--ink-faint); font-size: .85rem; }
.step-text { margin: 0; }
.step-find { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.step-find strong { color: var(--ink); }
.step-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.step-points { margin: 0; font-size: .95rem; }
.step-points strong { color: var(--ink); }
.step-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.tile-tag--map { background: var(--accent-soft); color: var(--accent); }

.pressure-dots { display: inline-flex; gap: 4px; align-items: center; }
.pressure-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--accent); display: block; }
.pressure-dots i.on { background: var(--accent); }
.step-pressure-label { font-size: .8rem; color: var(--ink-faint); }

.pressure-scale { margin: var(--space-5) 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: var(--space-4); }
.pressure-scale h3 { margin-top: 0; }
.pressure-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); }
@media (max-width: 760px) { .pressure-levels { grid-template-columns: 1fr; } }
.pressure-level { display: flex; gap: var(--space-2); border-top: 1px solid var(--line); padding-top: var(--space-2); }
.pressure-level p { margin: 4px 0 0; font-size: .92rem; color: var(--ink-soft); }
.pressure-num { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--paper); font-family: var(--font-serif); }
.pressure-areas td:last-child { white-space: nowrap; }

.addon-group { margin: var(--space-5) 0; }
.addon-group h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.addon-pattern { font-size: .82rem; font-weight: 400; color: var(--accent); }

.tool-shapes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; }
@media (max-width: 700px) { .tool-shapes { grid-template-columns: 1fr; } }
.tool-shape { border-top: 1px solid var(--line); padding-top: var(--space-2); }
.tool-shape p { margin: 4px 0 0; font-size: .95rem; color: var(--ink-soft); }

.move-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; }
@media (max-width: 760px) { .move-grid { grid-template-columns: 1fr; } }
.move-card { display: flex; gap: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: var(--space-3); }
.move-figure { flex: none; width: 110px; }
.move-figure svg { width: 100%; height: auto; }
.move-body h3 { margin: 0 0 4px; font-size: 1.02rem; }
.move-body p { margin: 0; font-size: .93rem; color: var(--ink-soft); }
.move-name-zh { display: inline-flex; align-items: baseline; gap: 6px; font-size: .8rem; color: var(--accent); font-weight: 400; }
.move-name-zh .pinyin { font-style: italic; }
.hand-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; }
@media (max-width: 760px) { .hand-grid { grid-template-columns: 1fr; } }
.warmup { margin: var(--space-5) 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: var(--space-4); }
.warmup h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin-top: 0; }
.warmup ul { margin: var(--space-2) 0 0; }

.reviewer-flag { display: inline-block; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: #8A5A2B; background: #F3E7D3; border-radius: 999px; padding: 2px 8px; font-weight: 600; }

.routine-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; }
@media (max-width: 980px) { .routine-grid { grid-template-columns: 1fr; } }
.routine-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: var(--space-4); }
.routine-card h3 { margin-top: 0; font-size: 1.08rem; }
.routine-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); font-size: .88rem; color: var(--accent); margin: 0 0 var(--space-3); }
.routine-order { list-style: none; margin: 0; padding: 0; }
.routine-order li { display: flex; gap: var(--space-2); padding: 6px 0; border-top: 1px solid var(--line); font-size: .95rem; }
.routine-order li:first-child { border-top: 0; }
.routine-n { flex: none; display: inline-grid; place-items: center; min-width: 34px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: .78rem; font-weight: 600; }
.point-link { white-space: nowrap; }

.composite-wrap { position: relative; }
.composite-wrap img { display: block; width: 100%; height: auto; border-radius: calc(var(--radius) / 2); }
.composite-wrap .map-dot { position: absolute; transform: translate(-50%, -50%); display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--paper); font-size: .85rem; text-decoration: none; border: 2px solid var(--paper); }
.composite-wrap .map-dot:hover, .composite-wrap .map-dot:focus-visible { background: var(--ink); color: var(--paper); text-decoration: none; }


/* Phase 14: Garrick's map layers */
.map-figure { margin: var(--space-5) 0 var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: var(--space-3); }
.map-figure svg { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }
.map-figure--card svg { max-width: 260px; }
.map-figure figcaption { margin-top: var(--space-2); }
.map-figure--card { margin: 0; padding: 0; border: 0; background: none; }
.map-figure--card svg { border: 1px solid var(--line); border-radius: calc(var(--radius) / 2); }
.map-figure--card figcaption { display: none; }
.stroke-map .arrow { fill: none; }
.stroke-map.animate.animate-ready .arrow:not(.dotted) { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.stroke-map.animate.animate-ready.in-view .arrow:not(.dotted) { stroke-dashoffset: 0; transition: stroke-dashoffset 800ms ease; }
.stroke-map.animate.animate-ready .arrow.dotted { opacity: 0; transition: opacity 600ms ease; }
.stroke-map.animate.animate-ready.in-view .arrow.dotted { opacity: 1; }
.stroke-map .arrow.dim, .stroke-map .num.dim { opacity: 0.16; }
.stroke-map .arrow.hi, .stroke-map .num.hi { opacity: 1; }
.stroke-map .num text, .dot-map text { pointer-events: none; }
.dot-map a { cursor: pointer; }
.dot-map .map-dot:hover circle, .dot-map .map-dot:focus-visible circle { fill: var(--ink); }
.dot-map .map-dot.addon:hover circle, .dot-map .map-dot.addon:focus-visible circle { fill: var(--accent-soft); }
@media (prefers-reduced-motion: reduce) {
  .stroke-map.animate.animate-ready .arrow:not(.dotted) { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
  .stroke-map.animate.animate-ready .arrow.dotted { opacity: 1; transition: none; }
}

.map-pending { margin: var(--space-4) 0; }

/* Phase 14: inline tool callouts illustration */
.practice-diagram--tools svg { display: block; width: 100%; max-width: 860px; height: auto; margin: 0 auto; }
.practice-diagram--tools { display: flex; flex-direction: column; align-items: center; }
.practice-diagram--tools figcaption { align-self: stretch; }

/* Phase 15: acupressure map pair (front + three-quarter view) */
.map-pair { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-4); align-items: start; }
.map-pair .map-figure { margin: 0; }
.map-pair .map-figure svg { max-width: 100%; }
@media (max-width: 900px) { .map-pair { grid-template-columns: 1fr; } }