/*
 * A guide's article: one reading column (about 44rem) and, from 1200 px, a sticky aside at the end. Paragraphs at the
 * paragraph size, parts headed in title type, each card's drawing under its words. The try sits on the page's glass;
 * the session's block closes the column; the guides before and after are two cards.
 */

.gda { padding-block: 0 var(--section); }
.gda-grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1200px) { .gda-grid { grid-template-columns: minmax(0, 46rem) minmax(0, 22rem); justify-content: space-between; gap: 56px; } }
.gda-art { display: grid; gap: 20px; min-width: 0; }
.gda-part { display: grid; gap: 16px; padding-top: 6px; scroll-margin-top: 112px; }
.gda-part h2, .gda-try h2, .gda-session h2 { font-size: var(--text-title-1); line-height: var(--lh-title-1); font-weight: 800; text-wrap: balance; }
.gda-p { font-size: var(--text-paragraph); line-height: var(--lh-paragraph); color: var(--fg); }
.gda-card { margin-block: 4px 8px; }

/* the try */
.gda-try { display: grid; gap: 16px; margin-top: 18px; padding: clamp(18px, 2.6vw, 30px); border-radius: var(--radius-card); background: var(--glass-strong); border: 1px solid var(--edge); box-shadow: var(--shadow-tile); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); scroll-margin-top: 112px; }
.gda-try h2 { display: flex; align-items: center; gap: 10px; font-size: var(--text-title-2); line-height: var(--lh-title-2); }
.gda-try h2 .i { width: 24px; height: 24px; padding: 4px; border-radius: 9px; background: var(--accent); color: var(--on-accent); box-sizing: content-box; }
.gda-tryin { display: grid; gap: 14px; }
.gda-ask { font-size: var(--text-title-3); line-height: var(--lh-title-3); font-weight: 800; text-wrap: balance; min-height: calc(var(--lh-title-3) * 2); }
.gda-piano { padding: 10px 10px 8px; border-radius: var(--radius-tile); background: var(--surface-muted); border: 1px solid var(--line); }
.gda-read { display: grid; gap: 12px; align-items: center; }
@media (min-width: 640px) { .gda-read { grid-template-columns: minmax(150px, 0.4fr) minmax(0, 1fr); } }
.gda-note { display: grid; place-items: center; height: 100%; min-height: 150px; padding: 8px; border-radius: var(--radius-tile); background: var(--surface); border: 1px solid var(--line); animation: gda-in 260ms var(--ease-out); }
.gda-note svg { width: auto; height: 132px; }
@keyframes gda-in { from { opacity: 0; translate: 0 6px; filter: blur(3px); } }
.gda-tryfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.gda-said { flex: 1 1 16rem; min-height: 1.6em; color: var(--fg-muted); font-size: var(--text-callout); line-height: var(--lh-callout); font-weight: 700; }
.gda-said.ok { color: var(--success-ink); }
.gda-said.no { color: var(--danger-ink); }
.gda-dots { display: flex; gap: 6px; }
.gda-dots i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-strong); transition: background-color var(--d-default) ease, border-color var(--d-default) ease; }
.gda-dots i.on { background: var(--success); border-color: var(--success); }
.gda-count { color: var(--fg-muted); font-size: var(--text-label); font-weight: 700; }
.gda-again.off { visibility: hidden; }

/* the session it comes from */
.gda-session { display: grid; gap: 14px; margin-top: 18px; padding-top: 28px; border-top: 1px solid var(--line); }
.gda-learned { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--radius-tile); background: var(--success-soft); }
.gda-learned small { color: var(--success-ink); font-size: var(--text-label); font-weight: 800; }
.gda-learned p { font-size: var(--text-callout); line-height: var(--lh-callout); font-weight: 600; }
.gda-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.gda-kinds li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--surface-muted); font-size: var(--text-label); font-weight: 700; }
.gda-kinds .i { width: 15px; height: 15px; color: var(--fg-muted); }
.gda-acts { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }

.gda-pn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.gda-pl { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--radius-tile); background: var(--surface); border: 1px solid var(--line); color: var(--fg); transition: border-color var(--d-default) ease, transform var(--d-press) var(--ease-out); }
.gda-pl:active { transform: scale(0.985); }
.gda-pl.end { grid-column: 2; text-align: end; justify-items: end; }
.gda-pl small { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-muted); font-size: var(--text-label); font-weight: 700; }
.gda-pl small .i { width: 14px; height: 14px; }
.gda-pl b { font-size: var(--text-callout); line-height: var(--lh-callout); font-weight: 800; }
@media (hover: hover) and (pointer: fine) { .gda-pl:hover { border-color: var(--line-strong); } .gda-toc a:hover { color: var(--fg); } }

/* the aside */
.gda-aside { display: grid; gap: 16px; }
@media (min-width: 1200px) { .gda-aside { position: sticky; inset-block-start: calc(var(--header-h) + 24px); } }
/* below 1200 px the session block at the article's end carries the start: no aside */
@media (max-width: 1199px) { .gda-aside { display: none; } }
.gda-toc ol { display: grid; gap: 2px; padding-inline-start: 14px; border-inline-start: 2px solid var(--line); }
.gda-toc a { display: block; padding: 6px 0; color: var(--fg-muted); font-size: var(--text-footnote); font-weight: 700; transition: color var(--d-default) ease; }
.gda-sc { display: grid; gap: 14px; padding: 14px; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.gda-scpic { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-tile); background: var(--night-card-bottom); }
.gda-scpic img { width: 100%; height: 100%; object-fit: cover; }
.gda-sct { display: grid; gap: 4px; padding-inline: 4px; }
.gda-sct small { color: var(--fg-muted); font-size: var(--text-label); font-weight: 700; }
.gda-sct b { font-size: var(--text-title-3); line-height: var(--lh-title-3); font-weight: 800; }
.gda-sct > span { color: var(--fg-muted); font-size: var(--text-footnote); line-height: var(--lh-footnote); }
@media (prefers-reduced-motion: reduce) { .gda-note { animation: none; } }