/* The learning path on a pre-compiled book.  Builds on the game player's look
   (player.css); phone width first. */

.small { font-size: .9em }
.linkish { background: none; border: 0; color: var(--red-dark); text-decoration: underline; cursor: pointer; font: inherit; padding: .5em 0; min-height: 2.6em }
.from { display: inline-block; font-size: .8em; text-transform: uppercase; letter-spacing: .05em; color: var(--red-dark); margin: .6em 0 0 }

/* ---- the book's page ------------------------------------------------------ */
.actions { margin: 1.2em 0 1.6em }
.actions .cta { width: 100%; max-width: 26em; min-height: 3.4em }
#kgWhat { margin: .5em 0 .8em }
.small-actions { display: flex; gap: .6em }
.small-actions button { min-height: 2.9em; padding: .5em 1.4em; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer }
.small-actions button:hover { background: var(--soft) }
#ask { color: var(--muted) }

.contents { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line) }
.contents > li { border-bottom: 1px solid var(--line); padding: .5em 0 }
.contents ol { list-style: none; margin: 0 0 .3em; padding: 0 0 0 1em; border-left: 2px solid var(--line) }
.row { display: flex; align-items: center; gap: .7em; width: 100%; text-align: left; background: none; border: 0; font: inherit; color: var(--ink);
  padding: .55em .3em; min-height: 3em; cursor: pointer; border-radius: 8px }
.row:hover { background: var(--soft) }
.row .name { flex: 1; min-width: 0 }
.row .name small { display: block; color: var(--muted); font-size: .85em }
.row.group .name { font-weight: 650 }
.chip { flex: none; font-size: .78em; border-radius: 999px; padding: .2em .7em; border: 1px solid var(--line); color: var(--muted); white-space: nowrap }
.chip.read { border-color: #9fb7e6; color: #2f5bb7 }
.chip.reading { border-color: #f0c36b; color: #9a6a00 }
.chip.later { border-color: #d7a2e0; color: #8a2c9b }
.chip.understood { background: #e7f5ea; border-color: #9fd3ab; color: #1b7a34 }

/* ---- the start of a session: its length, and an offer of one more minute ---- */
.minutes { display: flex; align-items: center; gap: .6em; margin: .8em 0 }
.minutes button { min-width: 2.9em; min-height: 2.9em; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer }
.minutes output { min-width: 6em; text-align: center; font-weight: 650 }
.offer { background: var(--soft); border-radius: 10px; padding: .6em .9em }
.offer button:not(.linkish) { min-height: 2.6em; padding: .3em 1.2em; border-radius: 10px; border: 1px solid var(--line); background: #fff; font: inherit; font-weight: 600; cursor: pointer }
.row.next { box-shadow: inset 3px 0 0 var(--red) }

/* ---- the figure beside the words ----------------------------------------- */
.figure { margin: 0 0 .6em; text-align: center; color: var(--ink) }
.figure svg { max-width: 100%; height: auto; max-height: 34vh }
.figure figcaption { font-size: .85em; color: var(--muted) }
.passage .figure { margin: .6em 0 }
.passage h3 { font-size: 1em; margin: 1.2em 0 .2em }

@media (min-width: 900px) {
  #read.with-figure { display: grid; grid-template-columns: minmax(0, 1fr) 20em; column-gap: 1em }
  #read.with-figure .sessionbar, #read.with-figure #plain, #read.with-figure #freeBar { grid-column: 1 / -1 }
  #read.with-figure .reader { grid-row: 2; grid-column: 1 }
  #read.with-figure .figure { grid-row: 2; grid-column: 2; align-self: center }
  #read.with-figure .figure svg { max-height: 26em }
}
@media (max-width: 899px) {
  #read.with-figure .figure svg { max-height: 22vh }
  #read.with-figure .figure figcaption { display: none }
  #read.with-figure .reader { height: min(46vh, 22em) }
  #read .sessionbar { margin: .2em 0 .4em }
}

/* ---- review ---------------------------------------------------------------- */
.results .where { font-size: .9em; color: var(--muted) }
.results .quote { border-left: 3px solid var(--red); background: var(--soft); padding: .4em .9em; margin: .4em 0; font-style: italic }
.results .later { color: #8a2c9b; font-weight: 600 }

/* ---- learning made visible: bars, the tip, and the celebration ------------- */
.meter { display: block; position: relative; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: .35em; max-width: 18em }
.meter.big { height: 10px; border-radius: 5px; max-width: 26em; margin: .4em 0 .6em }
.meter span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit }
.meter .m-read { background: #c9d6f0 }
.meter .m-und { background: #2e9e4f }
.learned { color: #1b7a34; font-weight: 600 }
.tip { background: var(--soft); border-radius: 10px; padding: .5em .9em }
#read .tip { margin: .6em 0 0 }
.cheer { margin: .4em 0 1em }
.cheer .milestone { border: 2px solid #9fd3ab; background: #e7f5ea; border-radius: 14px; padding: .8em 1.1em; margin: 0 0 .8em; animation: pop .5s ease-out }
.cheer .milestone h2 { margin: .3em 0 .2em; color: #1b7a34 }
.cheer .milestone p { margin: 0 }
.cheer .wins { border-left: 4px solid #2e9e4f; padding: .2em 0 .2em 1em }
.cheer .wins h2 { font-size: 1.1em; margin: .2em 0; color: #1b7a34 }
.cheer .wins ul { margin: .2em 0; padding-left: 1.2em }
@keyframes pop { from { transform: scale(.94); opacity: 0 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .cheer .milestone { animation: none } }