/* kids.w9w6.com: Arabic letters and numbers for young children. Layout from
   product.css; the product's line is magenta. The preview is a slide deck: the
   .book frame and radio tabs from product.css, with 16:9 slides inside. */

:root {
  --line: #b1306f;
  --bar: #8a2456;
  --slide-ink: #1d2433;
  --slide-a: #fde8f1;
  --slide-b: #e7f3ff;
  --slide-c: #fff4d6;
  --slide-d: #e6f7ee;
  --pop: #d6336c;
}
@media (prefers-color-scheme: dark) {
  :root {
    --line: #f59ac3;
  }
}

/* The bar names the deck and the slide on show. */
.book-bar .f {
  display: none;
}
#tab-1:checked ~ .book-bar .f-1,
#tab-2:checked ~ .book-bar .f-2,
#tab-3:checked ~ .book-bar .f-3,
#tab-4:checked ~ .book-bar .f-4 {
  display: inline;
}

/* The slides keep their light classroom colours in both schemes, as the deck does
   on a projector. */
.deck .sheet {
  padding: clamp(0.75rem, 2.5vw, 1.5rem);
  background: var(--cell-head);
}
.slide {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0.6rem;
  background: var(--slide-a);
  color: var(--slide-ink);
  box-shadow: 0 0.4rem 1.4rem rgb(14 26 38 / 0.12);
  container-type: inline-size;
}
.slide-b { background: var(--slide-b); }
.slide-c { background: var(--slide-c); }
.slide-d { background: var(--slide-d); }

.slide .tag {
  position: absolute;
  inset-block-start: 5cqi;
  inset-inline-start: 5cqi;
  padding: 0.6cqi 2cqi;
  border-radius: 999px;
  background: #ffffff;
  font-size: 2.4cqi;
  font-weight: 600;
}

/* letter card */
.letter-card {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 6cqi;
}
.big-letter {
  display: grid;
  place-items: center;
  inline-size: 30cqi;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffffff;
  color: var(--pop);
  font-family: var(--font-body);
  font-size: 19cqi;
  font-weight: 600;
  line-height: 1;
}
.letter-card .name {
  display: block;
  font-family: var(--font-display);
  font-size: 5cqi;
  font-weight: 700;
}
.vowels {
  display: flex;
  gap: 2.5cqi;
  margin-block-start: 2cqi;
  font-size: 8cqi;
  font-weight: 600;
  line-height: 1.6;
}
.vowels span {
  display: grid;
  place-items: center;
  min-inline-size: 11cqi;
  border-radius: 1.4cqi;
  background: #ffffff;
}

/* picture word */
.picture-word {
  display: grid;
  justify-items: center;
  gap: 2cqi;
}
.picture-word svg {
  inline-size: 26cqi;
  block-size: 26cqi;
}
.word {
  font-size: 11cqi;
  font-weight: 600;
  line-height: 1.3;
}
.word .hit {
  color: var(--pop);
}

/* tracing */
.trace {
  inline-size: 70cqi;
  block-size: auto;
}
.trace .outline {
  fill: none;
  stroke: #6a7280;
  stroke-width: 1.4;
  stroke-dasharray: 3.2 2.4;
  stroke-linecap: round;
}
.trace .start {
  fill: var(--pop);
}

/* counting */
.count {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 5cqi;
  inline-size: 82cqi;
}
.count .num {
  display: grid;
  justify-items: center;
  font-size: 22cqi;
  font-weight: 600;
  line-height: 1;
  color: var(--pop);
}
.count .num small {
  font-size: 4.5cqi;
  color: var(--slide-ink);
  font-weight: 400;
}
.count .things {
  display: flex;
  flex-wrap: wrap;
  gap: 2cqi;
}
.count .things svg {
  inline-size: 15cqi;
  block-size: 15cqi;
}

/* The deck has four slides; product.css shows .sheet-1..4 for #tab-1..4. */
.deck .tabs label {
  flex: 1 0 auto;
  text-align: center;
}

.credit {
  margin-block-start: 0.75rem;
  color: var(--ink-2);
  font-size: var(--step--1);
}