/* STUDlearn-only reading layout on top of the shared discussion-map stylesheet.
   Product identity color stays in the shared map palette so its title and the
   future portfolio tile cannot drift apart. */

/* Learn notes are guidance paragraphs, not community one-liners. */
html[data-map-product="learn"] #sheet-lead .cut {
  gap: 0.4rem;
  padding: 0.9rem 0.95rem;
}

html[data-map-product="learn"] #sheet-lead .cut-lead {
  font-size: 1.05rem;
}

html[data-map-product="learn"] #sheet-lead .cut-v {
  color: var(--ink);
  font-size: 0.96rem;
  line-height: 1.58;
}

html[data-map-product="learn"] .sheet-watch {
  font-size: 0.96rem;
  line-height: 1.55;
}

html[data-map-product="learn"] .note-list li {
  font-size: 1rem;
  line-height: 1.58;
  padding: 0.8rem 0.85rem 0.85rem 0.95rem;
  margin-bottom: 0.7rem;
}

html[data-map-product="learn"] .note-list li strong:first-of-type {
  display: block;
  margin: 0 0 0.28em;
  font-size: 1.02rem;
  line-height: 1.28;
  color: var(--ink);
}

html[data-map-product="learn"] .learn-topic-photo {
  margin: 0.2rem 0 0.9rem;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper-elevated);
}

html[data-map-product="learn"] .learn-topic-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

/* Keep the adult and the coffee-making action in the unusually wide Habits crop. */
html[data-map-product="learn"] .learn-topic-photo--habits img {
  object-position: center 30%;
}

/* Keep the adult's face, notebook, and phone in the Attention topic crop. */
html[data-map-product="learn"] .learn-topic-photo--attention img {
  aspect-ratio: 16 / 10;
  object-position: center top;
}

html[data-map-product="learn"] .section--static[data-sec="sources"] .note-list li {
  border-left-color: color-mix(in srgb, var(--signal) 70%, var(--rule));
  background: color-mix(in srgb, var(--paper-elevated) 88%, var(--signal-soft));
}

html[data-map-product="learn"] .related-chips button {
  min-height: 44px;
  padding: 0.45rem 0.75rem;
}

html[data-map-product="learn"] .pointer-link {
  min-height: 44px;
  padding: 0.45rem 0.75rem;
}

html[data-map-product="learn"] .sheet-sections {
  order: -2;
  min-width: 4.5rem;
  min-height: 44px;
  padding: 0 0.65rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--paper-elevated);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 750;
}

html[data-map-product="learn"] .sheet-sections:hover,
html[data-map-product="learn"] .sheet-sections:focus-visible {
  border-color: var(--signal);
  background: color-mix(in srgb, var(--signal-soft) 35%, var(--paper-elevated));
}

@media (max-width: 559px) {
  html[data-map-product="learn"] .sheet-title {
    font-size: 1rem;
    line-height: 1.08;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

@media (max-width: 420px) {
  html[data-map-product="learn"] .sheet-sections {
    min-width: 4.1rem;
    padding-inline: 0.45rem;
  }

  html[data-map-product="learn"] .sheet-share {
    min-width: 3.8rem;
    padding-inline: 0.45rem;
  }
}