/* Critical Thinking (theme page-critical-thinking-hub.php; converted from the approved test page critical-thinking.html,
   stage 3, 9 Oct 2026). Page-only styles on top of shared/ratc.css. Unchanged from the approved page.
   Her course promise, then a cafe wall: rows of dark and light tiles, each row shifted a little, so the grey
   lines between the rows look tilted though every one is straight (a classic illusion, on a page about how
   your brain gets fooled). "Prove it" lays a ruler on each line. Then Go Doubt Yourself, then the modules as a
   numbered syllabus with the reader's own ticks (kept in their browser, like the live page).
   Motion: the wall's rows drift slowly, so the lines seem to sway (art only; Still stops it). */

/* ---------- 1. Opening ---------------------------------------------------- */
.ct-open { padding-block: clamp(3.5rem, 7vw, 6rem); }
.ct-open__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px clamp(32px, 5vw, 72px); align-items: center; }
.ct-open__text { display: grid; gap: 16px; justify-items: start; min-width: 0; }
.ct-kicker, .ct-title { margin: 0; }
.ct-title { max-width: 14ch; }
.ct-sub { margin: 0; max-width: 46ch; font: 700 var(--fs-h3)/1.4 var(--font-body); color: var(--text); text-wrap: pretty; }
.ct-count { margin: 0; }
.ct-open__actions { gap: 14px 28px; align-items: center; }

/* the café wall */
.cw { margin: 0; display: grid; gap: 14px; }
.cw__wall {
  --cols: 12; --gap: 3px;
  container-type: inline-size; position: relative; overflow: hidden;
  display: grid; gap: var(--gap); padding-block: var(--gap);
  background: #8C7882;                     /* the grout: a grey between the two tiles, which is what makes the lines bend */
  border: 2px solid var(--bone); border-radius: 3px;
}
.cw__row { --tw: calc(100cqi / var(--cols)); display: flex; height: var(--tw); width: calc(100cqi + var(--tw)); margin-left: calc(var(--o) * var(--tw) * -1); }
.cw__row i { flex: none; width: var(--tw); height: 100%; background: var(--ground-black); }
.cw__row i:nth-child(even) { background: var(--bone); }
.cw__rules { position: absolute; inset: 0; pointer-events: none; }
.cw__rules b {
  position: absolute; left: 0; right: 0; height: 2px;
  top: calc(var(--gap) + var(--r) * (100cqi / var(--cols) + var(--gap)) - var(--gap) / 2 - 1px);
  background: var(--mustard); transform-origin: 0 50%; transform: scaleX(0);
}
.cw.is-proved .cw__rules b { transform: none; }
.cw.is-proved .cw__row i { opacity: .55; }
.cw__cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }

/* ---------- 2. Go Doubt Yourself ------------------------------------------- */
.ct-gdy__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px clamp(32px, 5vw, 64px); align-items: center; }
.ct-gdy__text { display: grid; gap: 14px; justify-items: start; }
.ct-gdy__text p, .ct-gdy__text h2 { margin: 0; }
.ct-gdy__text p:not(.label) { max-width: 44ch; }
.ct-gdy__cap { margin: 10px 0 0; }

/* ---------- 3. The course --------------------------------------------------- */
.ct-course__h { margin: 6px 0 10px; }
.ct-course__line { margin: 0 0 1.5rem; max-width: 52ch; }
.ct-tools { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px 24px; margin-bottom: 1.5rem; }
.ct-find { display: grid; gap: 6px; flex: 0 1 420px; min-width: 0; }
.ct-find__input { width: 100%; min-height: 44px; padding: 8px 12px; background: var(--ground-black); color: var(--cream); border: 2px solid var(--bone); border-radius: 0; font: 400 1.125rem/1.2 var(--font-body); }
.ct-find__input::placeholder { color: #c9b08c; opacity: 1; }
.ct-find__input:focus-visible { outline-offset: 2px; border-color: var(--mustard); }
.ct-filter { display: flex; gap: 8px; }
.ct-none { margin: 0 0 1rem; }
.ct-course__note { margin: 1.25rem 0 0; }

.sy { border-top: 2px solid var(--bone); }
.sy__mod { border-bottom: 1px solid var(--dusk-violet); }
.sy__mod[hidden] { display: none; }
.sy__sum { list-style: none; cursor: pointer; display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 120px; align-items: center; gap: 8px 24px; padding: 20px 0; }
.sy__sum::-webkit-details-marker { display: none; }
.sy__sum:focus-visible { outline-offset: 2px; }
.sy__num { font: 400 clamp(2.5rem, 2rem + 2vw, 4rem)/.9 var(--font-display); color: var(--lift-purple); }
.sy__mod[open] .sy__num { color: var(--mustard); }
.sy__head { display: grid; gap: 4px; min-width: 0; }
.sy__name { font: 400 var(--fs-h2)/1.02 var(--font-display); text-transform: uppercase; color: var(--display); text-wrap: balance; }
.sy__desc { max-width: 60ch; }
.sy__sum:hover .sy__name { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--accent); text-underline-offset: .1em; }
/* the module's reading progress: the reader's own ticks, nothing typed */
.sy__prog { height: 10px; border: 2px solid var(--bone); }
.sy__bar { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--mustard); }
.sy__list { list-style: none; padding: 0 0 18px calc(5.5rem + 24px); display: grid; }
.sy__grp { padding: 16px 0 6px; color: var(--label); }
.sy__es[hidden], .sy__grp[hidden] { display: none; }
.sy__a { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--dusk-violet); color: var(--text); text-decoration: none; }
.sy__tick { grid-row: 1 / span 2; width: 16px; height: 16px; margin-top: 4px; border: 2px solid var(--bone); border-radius: 50%; }
.sy__es.is-read .sy__tick { background: radial-gradient(circle, var(--mustard) 0 4px, transparent 4.5px); border-color: var(--mustard); }
.sy__t { font: 700 1.1875rem/1.3 var(--font-body); color: var(--cream); }
.sy__sub { font-size: 1rem; line-height: 1.45; }
.sy__a:hover .sy__t { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .18em; }

/* ---------- Motion ----------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* the wall sways: each row drifts half a tile and back, out of step with its neighbours (art only, slow) */
  :root.ratc-ready:not([data-motion="still"]) .cw:not(.is-proved) .cw__row { animation: cw-drift 7s ease-in-out infinite alternate; animation-delay: calc(var(--r) * -1.4s); }
  :root:not([data-motion="still"]) .cw__rules b { transition: transform 600ms var(--ease-out); transition-delay: calc(var(--r) * 50ms); }
  :root:not([data-motion="still"]) .sy__bar { transition: width 400ms var(--ease-out); }
}
@keyframes cw-drift { to { transform: translateX(calc(var(--tw) * .5)); } }

@media (max-width: 899px) {
  .ct-open__grid, .ct-gdy__grid { grid-template-columns: minmax(0, 1fr); }
  .sy__sum { grid-template-columns: 3.25rem minmax(0, 1fr); gap: 8px 14px; }
  .sy__prog { grid-column: 2; }
  .sy__list { padding-left: 0; }
  .sy__desc { font-size: 1rem; }
}