/* Cognitive distortions lesson. All rules scoped under .cgd-* */

.cgd-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cgd-hero { width: min(80%, 320px); }
.cgd-hero img { width: 100%; display: block; }
.cgd-note { font-size: 12px; color: var(--faint); text-align: center; }

/* the machine */
.cgd-mach { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.cgd-slot { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 12px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line); text-align: center; }
.cgd-slot small { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.cgd-slot b { font: 600 16px/1.3 var(--serif); }
.cgd-th { border-color: var(--gold); }
.cgd-th b { color: var(--gold); }
.cgd-th.cgd-in { animation: cgdIn .35s ease-out; }
@keyframes cgdIn { from { transform: scale(.94); opacity: .4; } to { transform: none; opacity: 1; } }
.cgd-arrow { display: block; width: 0; height: 0; margin: 0 auto; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 9px solid var(--line-strong); }
.cgd-dial { width: 132px; height: 77px; display: block; }
.cgd-arc { fill: none; stroke: var(--raised); stroke-width: 12; stroke-linecap: round; }
.cgd-arc2 { fill: none; stroke-width: 12; stroke-linecap: round; stroke: var(--streak); opacity: .35; }
.cgd-ndl { opacity: 0; transition: opacity .2s; }
.cgd-ndl.cgd-on { opacity: 1; }
.cgd-ndl line { stroke: var(--text); stroke-width: 4; stroke-linecap: round; }
.cgd-dial circle { fill: var(--text); }
.cgd-fl { font-size: 15px; font-weight: 800; color: var(--streak); min-height: 20px; }
.cgd-feed { display: flex; flex-direction: column; gap: 8px; }
.cgd-feed .choice.locked { opacity: .55; }

/* the name */
.cgd-rule { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 6px; }
.cgd-fact, .cgd-leap { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line); text-align: center; }
.cgd-fact small, .cgd-leap small { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.cgd-fact b { font: 600 17px var(--serif); color: var(--mint); }
.cgd-leap { border-color: var(--streak); }
.cgd-leap b { font: 600 17px var(--serif); }
.cgd-leap span { font-size: 13px; font-weight: 700; color: var(--streak); }

/* a quoted thought */
.cgd-quote { width: 100%; max-width: 340px; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 2px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.cgd-quote small { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.cgd-quote p { margin: 0; font: 600 21px/1.4 var(--serif); }
.cgd-part { transition: color .25s, background .25s; border-radius: 4px; }
.cgd-okp { color: var(--mint); }
.cgd-jmp { color: var(--streak); background: rgba(251, 150, 121, .14); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.cgd-kind { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 1px; animation: cgdIn .35s ease-out; }
.cgd-kind b { font-size: 16px; color: var(--streak); }
.cgd-kind span { font-size: 14px; color: var(--dim); }
.cgd-rev + .cgd-kind, .cgd-sc > .cgd-kind { width: 100%; max-width: 340px; text-align: center; }

.cgd-tells { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 6px; }
.cgd-tell { display: flex; flex-direction: column; gap: 1px; padding: 9px 14px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line); }
.cgd-tell b { font-size: 15px; color: var(--streak); }
.cgd-tell span { font: 600 15px var(--serif); color: var(--text); }

/* tweets */
.cgd-ph { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 340px; }
.cgd-ph span { padding: 5px 10px; border-radius: 999px; background: var(--raised); font: 600 14px var(--serif); color: var(--dim); }
.cgd-bars { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 10px; }
.cgd-brow { display: grid; grid-template-columns: 1fr 44px; grid-template-rows: auto 14px; column-gap: 8px; row-gap: 4px; align-items: center; }
.cgd-brow span { grid-column: 1 / 3; font-size: 14px; font-weight: 700; color: var(--dim); }
.cgd-bar { height: 14px; border-radius: 999px; background: var(--raised); overflow: hidden; }
.cgd-bar i { display: block; height: 100%; width: 0; background: var(--streak); border-radius: 999px; }
.cgd-brow b { font-size: 15px; text-align: right; }

/* backwards */
.cgd-rev { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 10px; }
.cgd-row { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.cgd-row span { padding: 8px 10px; border-radius: 12px; background: var(--surface); border: 2px solid var(--line); font-size: 14px; font-weight: 700; }
.cgd-row i { font-style: normal; color: var(--faint); font-weight: 800; }
.cgd-back span { border-color: var(--streak); color: var(--streak); }

@media (max-height: 700px) {
  .cgd-hero { width: min(64%, 260px); }
  .cgd-slot { padding: 5px 10px; }
  .cgd-slot b { font-size: 15px; }
  .cgd-dial { width: 104px; height: 61px; }
  .cgd-quote p { font-size: 19px; }
  .cgd-tell { padding: 6px 12px; }
}