/* ==========================================================================
   "Myth or Evidence?" (/myth-or-evidence/) — wunderkammer drawer 1.
   Loaded on that page only (inc/myth-or-evidence.php). The first two blocks
   are Beatrix's moe-cards.css, VERBATIM from the comp record
   MMT-OS/Decisions/BEATRIX-MYTH-OR-EVIDENCE-CARD-COMPS-2026-10-20.md (the
   original block, then Revision 1), approved by "card look ok", 20 Oct 2026.
   The only change: one CSS comment says "the entry's" for "the practice's",
   as the record allows. Site fixes made at build time sit in the last block,
   each with its reason; edit there, not in the comp blocks.
   ========================================================================== */

/* ------------------------------------------------------------------
   "Myth or Evidence?" flip card — Beatrix comp spec, 20 Oct 2026.
   Canon tokens only (theme.json): eggshell, ink, teal (fill/glow only),
   teal-text (#00726D, the only teal used for text). No gold, no coral,
   no radius, no shadow. Type: DM Serif Display (claim), Plus Jakarta Sans
   (body), Geist Mono (labels, via .mmt-tag).
   ------------------------------------------------------------------ */
.moe-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wp--preset--spacing--50, 1.5rem); }

/* One card = one element holding BOTH faces (Thomas, condition 2): the back
   is never hidden from assistive tech, only turned away visually. */
.moe-card { perspective: 1800px; }
.moe-card__inner { display: grid; transform-style: preserve-3d; transition: transform 520ms cubic-bezier(.45,.05,.25,1); }
.moe-card.is-turned .moe-card__inner { transform: rotateY(180deg); }

.moe-face {
	grid-area: 1 / 1;                       /* both faces share one cell: card height = taller face, no jump on turn */
	position: relative; overflow: hidden;
	display: flex; flex-direction: column;
	min-height: 14rem;
	padding: 1.75rem 2rem 1.5rem;
	background: var(--wp--preset--color--eggshell, #F5F0E1);
	border: 1.5px solid var(--wp--preset--color--ink, #1A1A1A);  /* the drawn line of the map plates, nothing heavier */
	backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.moe-face--back { transform: rotateY(180deg); }
.moe-card:not(.is-turned) .moe-face--back,
.moe-card.is-turned .moe-face--front { pointer-events: none; }

/* --- Front ------------------------------------------------------- */
.moe-label { margin: 0; color: var(--wp--preset--color--teal-text, #00726D); position: relative; z-index: 1; }
.moe-claim {
	margin: auto 0; padding: 1.25rem 0 1.5rem; max-width: 26ch; position: relative; z-index: 1;   /* the claim sits in the middle of the card, whatever the back's height */
	font-family: var(--wp--preset--font-family--serif-display, "DM Serif Display", Georgia, serif);
	font-size: 2.25rem; line-height: 1.2; font-weight: 400; color: var(--wp--preset--color--ink, #1A1A1A);
}
/* Map language: a corner of contour lines, drawn, decorative (aria-hidden). */
.moe-contours { position: absolute; bottom: -3rem; right: -3rem; width: 13rem; height: 13rem; color: var(--wp--preset--color--teal-text, #00726D); opacity: .26; pointer-events: none; }

/* The turn control: a real button; its ::after stretches over the whole face,
   so the card turns wherever it is tapped. */
.moe-turn {
	margin-top: 0; align-self: flex-start; display: inline-flex; align-items: center; gap: .5rem;
	padding: .25rem 0; border: 0; background: none; cursor: pointer; color: var(--wp--preset--color--ink, #1A1A1A);
}
.moe-turn::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.moe-turn svg { width: 1.1rem; height: 1.1rem; flex: none; }
.moe-turn span { border-bottom: 1.5px solid currentColor; padding-bottom: 1px; }
.moe-turn:focus-visible { outline: none; }
.moe-face:has(.moe-turn:focus-visible) { outline: 3px solid var(--wp--preset--color--teal-text, #00726D); outline-offset: 3px; }
.moe-face--back .moe-turn { margin-top: auto; }
.moe-turn--back { color: var(--wp--preset--color--teal-text, #00726D); }

/* --- Back -------------------------------------------------------- */
.moe-grades { position: relative; isolation: isolate; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0 0 .9rem; }
/* The one "alive" point of the drawer (heart register, 19 Oct): a small soft
   teal glow where the grade lands. Teal as light, never as text. */
.moe-grades::before {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	left: -2.25rem; top: 50%; width: 15rem; height: 6.5rem; transform: translateY(-50%);
	background: radial-gradient(closest-side, rgba(0,181,173,.34), rgba(0,181,173,.14) 55%, rgba(0,181,173,0));
	opacity: 0;
}
.moe-card.is-turned .moe-grades::before { animation: moe-glow 700ms ease-out 380ms forwards; }
@keyframes moe-glow { from { opacity: 0; } to { opacity: 1; } }
.moe-chip { display: inline-flex; align-items: baseline; gap: .45rem; }
.moe-chip__label { color: var(--wp--preset--color--teal-text, #00726D); }
.moe-chip strong { font-weight: 600; color: var(--wp--preset--color--ink, #1A1A1A); }

/* The body is a plain block so the picture can float beside the words
   (floats do not work on flex items). */
.moe-body { display: block; }
.moe-body::after { content: ""; display: table; clear: both; }
.moe-picture { float: right; width: 8rem; height: auto; margin: -.25rem 0 .5rem 1.5rem; }
.moe-lever { margin: 0 0 .4rem; font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
.moe-sentence { margin: 0 0 1rem; font-size: 1.25rem; line-height: 1.55; }
.moe-more { margin: 0 0 1.25rem; font-size: 1rem; font-weight: 600; }
.moe-more a { color: var(--wp--preset--color--teal-text, #00726D); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 600px) {
	.moe-face { padding: 1.25rem 1.25rem 1.125rem; min-height: 13rem; }
	.moe-claim { font-size: 1.75rem; padding: 1rem 0 1.25rem; }
	.moe-contours { width: 9rem; height: 9rem; bottom: -2.25rem; right: -2.25rem; }
	/* Phones: the picture moves to the top corner beside the two grade lines,
	   so the sentence keeps the full width. */
	.moe-grades { padding-right: 5rem; }
	.moe-picture { position: absolute; top: 1rem; right: 1rem; float: none; width: 4.5rem; margin: 0; }
}

/* Reduced motion: the card swaps instantly, the glow is simply there. */
@media (prefers-reduced-motion: reduce) {
	.moe-card__inner { transition: none; }
	.moe-card.is-turned .moe-grades::before { animation: none; opacity: 1; }
}

/* v2: the back answers the FRONT first; the grades are labelled as the entry's. */
.moe-answer { position: relative; isolation: isolate; align-self: flex-start; margin: .35rem 0 .75rem; font-family: var(--wp--preset--font-family--serif-display, "DM Serif Display", Georgia, serif); font-size: 2.25rem; line-height: 1.15; }
.moe-answer::before { content: ""; position: absolute; z-index: -1; left: -2.5rem; right: -2.5rem; top: 50%; height: 6.5rem; transform: translateY(-50%);
	background: radial-gradient(closest-side, rgba(0,181,173,.34), rgba(0,181,173,.14) 55%, rgba(0,181,173,0)); opacity: 0; }
.moe-card.is-turned .moe-answer::before { animation: moe-glow 700ms ease-out 380ms forwards; }
.moe-graded { margin: 0 0 1rem; padding-top: .9rem; border-top: 1px solid rgba(26,26,26,.25); }
.moe-graded__head { margin: 0 0 .4rem; color: var(--wp--preset--color--ink, #1A1A1A); }
.moe-graded .moe-grades { margin: 0; }
.moe-graded .moe-grades::before { display: none; }
@media (max-width: 600px) { .moe-answer { font-size: 1.875rem; } .moe-graded .moe-grades { padding-right: 0; } .moe-picture { top: 1rem; } }
@media (prefers-reduced-motion: reduce) { .moe-card.is-turned .moe-answer::before { animation: none; opacity: 1; } }

/* --- Site fixes at build (Code, 20 Oct 2026) -------------------------------
   Not in the comp; each one fixes something the comp could not show. */

/* The back's "Turn back" button stretches its ::after over the whole face
   (z-index 2), which also covered "Read the full entry": a tap on the link
   turned the card instead of opening the entry. The link sits above it. */
.moe-more a { position: relative; z-index: 3; }

/* WebKit (Safari, every iPhone browser) did not honour backface-visibility
   here: the face turned away showed through mirrored, on the front and on
   the back alike (checked 20 Oct 2026, with and without the usual
   rotateY(0) / per-child fixes). So the face turned away is also made
   transparent, switched at the instant the card is edge-on: the turn's
   curve, cubic-bezier(.45,.05,.25,1) over 520ms, reaches 90 degrees at
   198ms. Opacity, not visibility: a transparent face stays in the
   accessibility tree, so the back is still read without turning (Thomas,
   condition 2). Reduced motion swaps at once, with the turn. */
.moe-face { transition: opacity 0s linear 200ms; }
.moe-card:not(.is-turned) .moe-face--back,
.moe-card.is-turned .moe-face--front { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
	.moe-face { transition: none; }
}

/* The comp's .moe-list margin: 0 also removed the page's block gap, so the
   first card touched the intro. The cards start a sub-section's gap below
   it, as the Ledger's entries do (.mmt-ledger-list). */
.mmt-moe > .moe-list { margin-block-start: var(--wp--preset--spacing--60); }

/* --- Doorway cards (D1e, ruled 20 Oct 2026) --------------------------------
   One card on the Ledger (full text width, the rules above) and one on Home
   (the Ledger column, about 308px: the narrow card), each with its link line
   under it. Beatrix's mock-up CSS, VERBATIM from the brief's "Doorway cards
   (D1e)" section; markup mmt_moe_doorway() in inc/myth-or-evidence.php. */
.moe-card--narrow .moe-face{padding:1.1rem 1.1rem 1rem;min-height:12rem}
.moe-card--narrow .moe-claim{font-size:1.5rem;padding:.75rem 0 1rem}
.moe-card--narrow .moe-contours{width:8rem;height:8rem;bottom:-2rem;right:-2rem}
.moe-card--narrow .moe-answer{font-size:1.75rem}
.moe-card--narrow .moe-sentence{font-size:1.0625rem}
.moe-card--narrow .moe-grades{padding-right:4.5rem}
.moe-card--narrow .moe-picture{position:absolute;top:.9rem;right:.9rem;float:none;width:4rem;margin:0}
.moe-card--narrow .moe-graded .moe-grades{padding-right:0}
.moe-card--narrow .moe-chip strong{font-size:1rem}
.moe-teaser-line{margin:.9rem 0 0;font-size:1.0625rem;line-height:1.5}

/* --- Drawings on the fronts (D1f, founder "drawings ok", 20 Oct 2026) ------
   Each front shows its entry's Ledger drawing at the lower right; the contour
   corner moves to the back (markup mmt_moe_card()). The first three rules are
   VERBATIM from the brief's "Drawings on the fronts (D1f)" section. They
   outrank the comp's back-picture rules above (float, phone top corner,
   narrow top corner), which no longer match anything on the back. The back's
   room for the picture (.moe-grades padding-right, phone and narrow) was
   already zeroed inside .moe-graded, where every .moe-grades now sits. */
.moe-face--front .moe-picture{position:absolute;top:auto;right:1.25rem;bottom:1rem;width:10rem;height:auto;float:none;margin:0;pointer-events:none}
@media (max-width:600px){.moe-face--front .moe-picture{right:.9rem;bottom:.75rem;width:7rem}}
.moe-card--narrow .moe-face--front .moe-picture{right:.75rem;bottom:.75rem;width:6rem;top:auto}