/* ==========================================================================
   Cheap experiments pages and the home page teaser.
   Uses the tokens in style.css. Logical properties only, so Arabic mirrors.
   ========================================================================== */

/* ---------- inline illustrations ---------- */
.scene-art { display: block; width: 100%; height: auto; }
.scene-art .spin { animation: xSpin 24s linear infinite; }
.scene-art .flow { animation: xFlow 1.1s linear infinite; }
.scene-art .glow { animation: xGlow 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.scene-art .rise { animation: xRise 3s ease-in infinite; }
@keyframes xSpin { to { transform: rotate(360deg); } }
@keyframes xFlow { to { stroke-dashoffset: -30; } }
@keyframes xGlow { 0%, 100% { opacity: .35; transform: scale(.92); } 50% { opacity: .75; transform: scale(1.08); } }
@keyframes xRise { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-46px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .scene-art .spin, .scene-art .flow, .scene-art .glow, .scene-art .rise { animation: none; }
  .scene-art .glow { opacity: .55; }
}

/* ---------- small icon system ---------- */
.xi { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.xi-lg { width: 1.45em; height: 1.45em; }

/* ---------- list page ---------- */
.exp-hero { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 2vw, 1.5rem); }
.exp-hero h1 { max-width: 18ch; }
.exp-stats { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; margin-block-start: 1.4rem; font-weight: 700; color: var(--text-soft); }
.exp-stats b { font-family: var(--font-display); font-size: 1.5rem; color: var(--indigo-700); margin-inline-end: .25em; }

.filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-block-end: 1.8rem; }
.filters[hidden] { display: none; }
.filter {
  font: inherit; font-weight: 800; font-size: .95rem; cursor: pointer;
  border: 2.5px solid var(--indigo-700); background: var(--white); color: var(--indigo-700);
  border-radius: var(--pill); padding: .45em 1.1em;
  box-shadow: 0 3px 0 var(--indigo-700); transition: transform .12s, box-shadow .12s, background .12s;
}
.filter:hover { transform: translateY(-1px); background: var(--amber-100); }
.filter.is-on { background: var(--teal-400); color: var(--indigo-900); }

.exp-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.exp-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; height: 100%; }
.exp-card[hidden] { display: none; }
.exp-thumb { background: var(--paper-2); border-block-end: 3px solid var(--line); }
.exp-card-body { padding: 1.2rem 1.4rem 1.4rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.exp-card-body h3 { margin: .35rem 0 0; font-size: 1.3rem; }
.exp-card-body p { margin: 0; color: var(--text-soft); font-size: .98rem; }
.exp-card-body .exp-meta { margin-block-start: auto; padding-block-start: .6rem; }

.exp-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.meta-pill {
  display: inline-flex; align-items: center; gap: .4em;
  background: var(--paper-2); border: 2px solid var(--line); border-radius: var(--pill);
  padding: .2em .75em; font-size: .85rem; font-weight: 800; color: var(--indigo-700);
}
.exp-meta.big .meta-pill { font-size: .95rem; padding: .3em .9em; background: var(--white); }

.exp-tip h2 { font-size: 1.6rem; }

/* ---------- detail page ---------- */
.exp-detail-hero { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.5rem); }
.crumbs { margin-block-end: 1.1rem; }
.crumbs a { display: inline-flex; align-items: center; gap: .4em; font-weight: 800; text-decoration: none; color: var(--indigo-500); }
.crumbs a:hover { text-decoration: underline; }
.exp-hero-grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr 1.15fr; align-items: center; }
.exp-hero-grid h1 { margin-block-start: .6rem; }
.exp-figure { margin: 0; border-radius: var(--r-xl); overflow: hidden; border: 4px solid var(--indigo-900); box-shadow: var(--shadow-pop); background: var(--paper-2); }
@media (max-width: 860px) { .exp-hero-grid { grid-template-columns: 1fr; } }

.exp-two { display: grid; gap: 1.5rem; grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 860px) { .exp-two { grid-template-columns: 1fr; } }
.exp-two h2, .exp-stack h2 { font-size: 1.55rem; display: flex; align-items: center; gap: .5em; }
.panel-coral { background: var(--coral-100); border-color: rgba(240,101,79,.3); }
.exp-stack { display: grid; gap: 1.5rem; }
.exp-grid-link .xi { color: var(--amber-400); }

.checklist { list-style: none; padding: 0; margin: 0 0 .8rem; }
.checklist li { margin-block-end: .5rem; }
.checklist label { display: flex; gap: .7rem; align-items: flex-start; cursor: pointer; line-height: 1.4; }
.checklist input, .step-done input { position: absolute; opacity: 0; pointer-events: none; }
.checklist label::before {
  content: ""; flex: none; width: 1.35rem; height: 1.35rem; margin-block-start: .1rem;
  border: 2.5px solid var(--indigo-700); border-radius: 7px; background: var(--white);
  transition: background .12s;
}
.checklist input:checked + span { color: var(--text-soft); text-decoration: line-through; text-decoration-color: var(--teal-500); }
.checklist label:has(input:checked)::before {
  background: var(--teal-400) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23221E52' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.checklist input:focus-visible + span, .step-done input:focus-visible + span { outline: 3px solid var(--indigo-500); outline-offset: 3px; border-radius: 6px; }

/* steps */
.steps { list-style: none; padding: 0; margin: 1.6rem 0 0; position: relative; counter-reset: step; }
.steps::before { content: ""; position: absolute; inset-inline-start: 1.45rem; inset-block: 1.6rem; width: 4px; background: repeating-linear-gradient(var(--indigo-100) 0 10px, transparent 10px 18px); border-radius: 2px; }
.step { position: relative; padding-inline-start: 4rem; margin-block-end: 1.3rem; }
.step-num-badge {
  position: absolute; inset-inline-start: 0; inset-block-start: .9rem; width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--indigo-700); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 1.35rem;
  display: grid; place-items: center; border: 3px solid var(--white); box-shadow: 0 0 0 3px var(--indigo-700);
  transition: background .2s;
}
.step-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1rem 1.2rem; align-items: start;
  background: var(--white); border: 3px solid var(--line); border-radius: var(--r-lg); padding: 1.2rem 1.4rem;
  box-shadow: var(--shadow-card); transition: background .2s, border-color .2s;
}
.step-ic { width: 3.4rem; height: 3.4rem; border-radius: 16px; display: grid; place-items: center; flex: none; }
.step-ic.tone-amber { background: var(--amber-100); color: #A96C00; }
.step-ic.tone-teal { background: var(--teal-100); color: #0C7A67; }
.step-ic.tone-sky { background: var(--sky-100); color: #1E6FA8; }
.step-ic.tone-coral { background: var(--coral-100); color: #C43F29; }
.step-text h3 { margin: 0 0 .25em; font-size: 1.2rem; }
.step-text p { margin: 0; color: var(--text); }
.step-done { cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; font-size: .88rem; color: var(--text-soft); white-space: nowrap; }
.step-done::before { content: ""; width: 1.25rem; height: 1.25rem; border: 2.5px solid var(--indigo-700); border-radius: 50%; background: var(--white); }
.step-done:has(input:checked)::before {
  background: var(--teal-400) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23221E52' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.step:has(input:checked) .step-card { background: var(--teal-100); border-color: rgba(23,167,143,.45); }
.step:has(input:checked) .step-num-badge { background: var(--teal-500); box-shadow: 0 0 0 3px var(--teal-500); }
@media (max-width: 560px) {
  .step { padding-inline-start: 3.1rem; }
  .steps::before { inset-inline-start: 1.1rem; }
  .step-num-badge { width: 2.4rem; height: 2.4rem; font-size: 1.1rem; }
  .step-card { grid-template-columns: auto 1fr; gap: .8rem 1rem; padding: 1rem 1.1rem; }
  .step-ic { width: 2.6rem; height: 2.6rem; border-radius: 12px; }
  .step-done { grid-column: 1 / -1; }
}

/* chart */
.chart { margin: 1.4rem 0 0; background: var(--white); border-radius: var(--r-md); padding: 1rem 1.2rem; border: 2px solid var(--line); }
.chart figcaption { margin-block-end: .7rem; }
.bar-row { display: grid; grid-template-columns: minmax(0, 11rem) 1fr; gap: .8rem; align-items: center; margin-block-end: .5rem; font-size: .92rem; font-weight: 700; }
.bar-track { background: var(--indigo-100); border-radius: var(--pill); height: 1.1rem; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: var(--pill); }
.bar-fill.tone-amber { background: var(--amber-400); } .bar-fill.tone-teal { background: var(--teal-400); }
.bar-fill.tone-sky { background: var(--sky-400); } .bar-fill.tone-coral { background: var(--coral-400); } .bar-fill.tone-indigo { background: var(--indigo-500); }
@media (max-width: 520px) { .bar-row { grid-template-columns: 1fr; gap: .2rem; } }

/* pager */
.exp-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pager-link {
  display: flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--indigo-700); font-weight: 800;
  background: var(--white); border: 3px solid var(--line); border-radius: var(--r-md); padding: 1rem 1.2rem; box-shadow: var(--shadow-card);
  transition: transform .15s, box-shadow .15s;
}
.pager-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); color: var(--indigo-700); }
.pager-link small { display: block; color: var(--text-soft); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.pager-link.next { justify-content: flex-end; text-align: end; }
[dir="rtl"] .pager-link .xi, [dir="rtl"] .crumbs .xi { transform: scaleX(-1); }
@media (max-width: 560px) { .exp-pager { grid-template-columns: 1fr; } }

/* ---------- home page teaser ---------- */
.band-experiments { background: linear-gradient(135deg, var(--teal-100) 0%, var(--sky-100) 100%); }
.exp-teaser { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.exp-teaser-copy h2 { margin-block-start: .6rem; }
.exp-teaser-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.exp-teaser-grid a { display: flex; flex-direction: column; text-decoration: none; color: var(--indigo-700); background: var(--white); border: 3px solid var(--line); border-radius: var(--r-md); overflow: hidden; height: 100%; box-shadow: var(--shadow-card); transition: transform .15s, box-shadow .15s; }
.exp-teaser-grid a:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: var(--shadow-pop); }
.exp-teaser-grid .thumb { display: block; background: var(--paper-2); }
.exp-teaser-grid .t { font-weight: 800; font-size: .95rem; line-height: 1.25; padding: .6rem .8rem 0; }
.exp-teaser-grid .c { font-size: .82rem; font-weight: 700; color: var(--text-soft); padding: .15rem .8rem .7rem; }
@media (max-width: 960px) { .exp-teaser { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .exp-teaser-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- print: a clean sheet for the classroom ---------- */
@media print {
  .site-header, .site-footer, .skip-link, .btn-row, .exp-pager, .filters, .exp-grid, .step-done, .crumbs, .exp-grid-link a { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .panel, .step-card, .chart { box-shadow: none !important; break-inside: avoid; }
  .exp-figure { box-shadow: none; }
  .scene-art * { animation: none !important; }
  section { padding-block: .6rem !important; }
}