/*
 * Beginner flow: the "নতুন? এখান থেকে শুরু করুন" rows and the glossary toggle.
 * Paper Dusk only (docs/design/paper-dusk.md): paper, ink, terracotta and the
 * listed shades. Phone first; two columns from 760px. Why: inc/auto/beginner-flow.php.
 */

.aib-start {
  max-width: 980px;
  margin: 0 auto 28px;
  color: var(--pd-ink, #2B2A33);
}
.aib-start-k {
  margin: 0 0 6px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--pd-accent-2, #9C4130);
}
.aib-start-h {
  margin: 0;
  font-size: clamp(1.5rem, 5.4vw, 2.1rem);
  line-height: 1.25;
  font-weight: 700;
}
.aib-start-sub {
  margin: 8px 0 18px;
  line-height: 1.6;
  color: var(--pd-ink-2, #5D5A64);
}
.aib-start-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.aib-start-row {
  background: var(--pd-paper-2, #F6F0E3);
  border: 1px solid var(--pd-line, #d9cfba);
  border-left: 4px solid var(--pd-accent, #B9533C);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(43, 42, 51, .05), 0 14px 28px -22px rgba(43, 42, 51, .45);
}
.aib-start-a {
  display: block;
  padding: 14px 16px 12px;
  color: inherit;
  text-decoration: none;
  border-radius: 10px;
}
.aib-start-a:focus-visible {
  outline: 3px solid var(--pd-accent, #B9533C);
  outline-offset: 2px;
}
.aib-start-say {
  display: block;
  font-size: 1.02rem;
  line-height: 1.5;
  font-weight: 600;
}
.aib-start-go {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin-top: 8px;
}
.aib-start-go b {
  color: var(--pd-accent-2, #9C4130);
  font-weight: 700;
  line-height: 1.4;
}
.aib-start-p {
  font-weight: 700;
  white-space: nowrap;
}
.aib-start-why {
  display: block;
  margin-top: 4px;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--pd-ink-2, #5D5A64);
}
.aib-start-alt {
  margin: 0;
  padding: 0 16px 12px;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--pd-ink-2, #5D5A64);
}
.aib-start-alt a {
  color: var(--pd-accent-2, #9C4130);
  font-weight: 600;
}
/* Copy 13: each card ends in its own action line. */
.aib-start-a { height: 100%; display: flex; flex-direction: column; }
.aib-start-why { flex: 1; }
.aib-start-cta {
  display: block;
  margin-top: 10px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--pd-accent-2, #9C4130);
}
.aib-start-row.is-quiz { border-left-style: dashed; }
.aib-start-a:hover .aib-start-cta,
.aib-start-a:active .aib-start-cta { text-decoration: underline; text-underline-offset: 3px; }
.aib-start-more {
  margin: 18px 0 0;
  font-weight: 600;
  line-height: 1.5;
}

/* ------------------------------------------------------------- glossary */
.aib-gloss {
  margin-top: 16px;
  border: 1px dashed var(--pd-line, #d9cfba);
  border-radius: 10px;
  background: var(--pd-paper, #EDE6D6);
}
.aib-gloss summary {
  cursor: pointer;
  padding: 12px 16px;
  min-height: 44px;
  font-weight: 600;
  color: var(--pd-accent-2, #9C4130);
  line-height: 1.5;
}
.aib-gloss summary:focus-visible {
  outline: 3px solid var(--pd-accent, #B9533C);
  outline-offset: 2px;
}
.aib-gloss dl {
  margin: 0;
  padding: 0 16px 14px;
  display: grid;
  gap: 10px;
}
.aib-gloss dt {
  font-weight: 700;
  line-height: 1.4;
}
.aib-gloss dd {
  margin: 2px 0 0;
  line-height: 1.55;
  color: var(--pd-ink-2, #5D5A64);
}

@media (min-width: 760px) {
  .aib-start-list { grid-template-columns: 1fr 1fr; }
  .aib-gloss dl { grid-template-columns: 1fr 1fr; column-gap: 24px; }
}

@media (prefers-reduced-motion: no-preference) {
  .aib-start-row { transition: transform .15s ease; }
  .aib-start-row:hover { transform: translateY(-2px); }
}

/* ------------------------------------- free book page: the next step box */
.fr-paid-box.fr-next {
  margin-bottom: 18px;
  border-left: 4px solid var(--pd-accent, #B9533C);
}
.fr-lib .aib-gloss { max-width: 760px; margin: 22px auto 0; }