/* TextExhibit site: only what the shared stylesheet (src/styles.css) lacks. Same tokens, same glass,
   same one brand colour on solid fills. Loaded after styles.css on TextExhibit pages only. */

/* ---------- Sample export: paper pages drawn in HTML ---------- */
.pdf-stage { position: relative; margin: 0; }
.pdf-stack { position: relative; display: grid; padding: 4% 4% 6% 10%; }
.pdf-page {
  --paper: #fbfaf7; --ink-p: #17171a; --ink-p2: #5d5d66; --rule: #e4e2dc;
  grid-area: 1 / 1; container-type: inline-size; position: relative; overflow: hidden;
  aspect-ratio: 8.5 / 11; border-radius: 6px; background: var(--paper); color: var(--ink-p);
  padding: 7cqw 7cqw 5cqw; display: flex; flex-direction: column;
  box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 40px 90px -30px rgb(0 0 0 / .95), 0 4px 14px rgb(0 0 0 / .5);
  font-family: var(--font-sans); font-feature-settings: normal;
}
.pdf-cover { transform: translate(-9%, -3%) rotate(-4deg); filter: brightness(.86); }
.pdf-main { transform: translate(3%, 2%) rotate(1.2deg); }
.pdf-head { display: flex; justify-content: space-between; gap: 2cqw; padding-bottom: 2.4cqw; border-bottom: .3cqw solid var(--ink-p); font-size: 2.5cqw; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.pdf-msgs { flex: 1; display: grid; align-content: start; }
.pdf-msg { display: grid; grid-template-columns: 22cqw 20cqw minmax(0, 1fr); gap: 2.2cqw; padding: 2.3cqw 0; border-bottom: .2cqw solid var(--rule); font-size: 2.45cqw; line-height: 1.4; }
.pdf-time { font-family: var(--font-mono); font-size: 2.05cqw; color: var(--ink-p2); line-height: 1.45; }
.pdf-from { font-weight: 600; }
.pdf-from small { display: block; font-weight: 400; font-family: var(--font-mono); font-size: 1.95cqw; color: var(--ink-p2); }
.pdf-body { display: grid; gap: 1cqw; min-width: 0; }
.pdf-photo { display: block; width: 62%; aspect-ratio: 4 / 3; border-radius: 1.2cqw; overflow: hidden; background: #ccc; }
.pdf-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); }
.pdf-file, .pdf-flag { font-family: var(--font-mono); font-size: 1.85cqw; color: var(--ink-p2); overflow-wrap: anywhere; }
.pdf-flag::before { content: ""; display: inline-block; width: 1.2cqw; height: 1.2cqw; margin-right: 1cqw; border-radius: 50%; background: #e0a800; vertical-align: .1em; }
.pdf-reaction { font-style: italic; color: var(--ink-p2); }
.pdf-foot { margin-top: auto; padding-top: 2.4cqw; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 2cqw; color: var(--ink-p2); border-top: .2cqw solid var(--rule); }
.pdf-foot span:first-child { color: var(--ink-p); font-weight: 600; letter-spacing: .04em; }
.pdf-watermark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-32deg); font-family: var(--font-hero); font-size: 21cqw; letter-spacing: .04em; text-transform: uppercase; color: rgb(23 23 26 / .07); pointer-events: none; white-space: nowrap; }
.pdf-kicker { font-family: var(--font-mono); font-size: 2.4cqw; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-p2); }
.pdf-title { margin-top: 2.5cqw; font-family: var(--font-display); font-weight: 400; font-size: 6.4cqw; line-height: 1.12; letter-spacing: -.02em; }
.pdf-facts { margin-top: 6cqw; display: grid; border-top: .3cqw solid var(--ink-p); }
.pdf-facts > div { display: grid; grid-template-columns: 30cqw 1fr; gap: 3cqw; padding: 2.1cqw 0; border-bottom: .2cqw solid var(--rule); font-size: 2.5cqw; }
.pdf-facts dt { font-family: var(--font-mono); font-size: 2cqw; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-p2); }
.pdf-stage figcaption { margin-top: .75rem; text-align: center; font-size: var(--fs-small); color: var(--ink-54); }
.pdf-stage--compact { margin-top: 1rem; }
.pdf-stage--compact .pdf-stack { padding: 0; max-width: 34rem; margin-inline: auto; }
.pdf-stage--compact .pdf-main { transform: none; }
@media (max-width: 699px) {
  .pdf-stack { padding: 3% 2% 5% 7%; }
  .pdf-msg { grid-template-columns: 24cqw minmax(0, 1fr); }
  .pdf-msg .pdf-body { grid-column: 1 / -1; }
}

/* the steps illustration is abstract art, so it keeps the skill's dark treatment */
.method-media--art > img { object-position: 50% 50%; }

/* ---------- Why not screenshots ---------- */
.compare { padding-bottom: var(--section); }
.compare-panel { border-radius: var(--r-card); padding: .25rem clamp(1.25rem, 2.6vw, 2rem) 0; }
.compare-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; padding: 1.35rem 0; }
.compare-row + .compare-row { border-top: 1px solid var(--hair); }
.compare-row h3 { font-size: 1rem; font-weight: 500; color: var(--ink); }
.compare-row p { font-size: .9375rem; line-height: 1.55; color: var(--ink-54); }
.compare-row p.compare-yes { color: var(--ink-88); }
.compare-k { display: block; margin-bottom: .2rem; }
.compare-row--head { display: none; }
.compare-panel .compat-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-36); }
@media (min-width: 800px) {
  .compare-row { grid-template-columns: 10rem minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: baseline; }
  .compare-row--head { display: grid; padding: 1.1rem 0 .9rem; }
  .compare-k { display: none; }
}

/* ---------- Privacy ---------- */
.privacy-band { padding-bottom: var(--section); }
.privacy-band .compat-panel { padding: .5rem clamp(1.25rem, 2.6vw, 2rem); }
.privacy-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .9rem; padding: 1.15rem 0; font-size: .9375rem; line-height: 1.55; color: var(--ink-62); }
.privacy-list li + li { border-top: 1px solid var(--hair); }
.privacy-list .icon { width: 19px; height: 19px; margin-top: .15rem; color: var(--ink-88); }
.privacy-list strong { color: var(--ink); font-weight: 500; }
.privacy-list a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-36); }

.notify-note { margin-top: .25rem; }
.guide a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-36); }
.answer a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-36); }
.sub-faq .guide-list a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-36); }