/* The FSRS simulator (TL2 in Paper, page "Blog"). tool.css comes first. Values come from the 1440 and 390 wide
   artboards. */
.sim [hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.sim { display: flex; flex-direction: column; gap: 28px; padding: 32px 56px 48px; }
.sim-top, .sim-bottom { display: flex; gap: 24px; }
.sim-card { padding: 28px; border-radius: 20px; background: #FFFFFF; }
.sim-title { font-size: 20px; line-height: 26px; letter-spacing: -0.01em; font-weight: 800; }

/* Rate: the question, the four buttons and the three numbers */
.rate { width: 500px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.ask { display: flex; flex-direction: column; gap: 12px; }
.ask-head { display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; }
.ask-title { font-size: 30px; line-height: 35px; letter-spacing: -0.025em; font-weight: 800; }
.ratings { display: flex; gap: 10px; }
.rating { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 80px; border: 1.5px solid var(--ink); border-radius: 18px; background: #FFFFFF; text-align: center; transition: background .2s, transform .15s; }
.rating b { font-size: 18px; line-height: 22px; font-weight: 800; }
.rating span { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--graphite); }
.rating:active { transform: scale(.98); }
.rating:focus-visible, .opt:has(input:focus-visible) { outline: 2px solid var(--violet); outline-offset: 2px; }
.hint { font-size: 15px; line-height: 20px; color: var(--graphite); text-wrap: pretty; }
.stats { display: flex; gap: 10px; }
.stat { flex: 1 1 0; display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 20px; background: #FFFFFF; }
.stat .val { display: flex; align-items: baseline; gap: 5px; }
.stat .val b { font-size: 34px; line-height: 38px; letter-spacing: -0.03em; font-weight: 800; }
.stat .val span { font-size: 17px; line-height: 22px; font-weight: 700; }
.stat .desc { font-size: 14px; line-height: 19px; color: var(--graphite); }
/* Before the first rating each number is a pencil dash. */
.sim[data-new] .stat .val b { color: var(--pencil); }
.sim[data-new] .stat .val span { display: none; }

/* Memory curve: the SVG is drawn by fsrs-simulator.js for the card's width. */
.curve { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.curve-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.legend { display: flex; align-items: center; gap: 16px; }
.legend span { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--graphite); white-space: nowrap; }
.legend i { width: 18px; height: 2.5px; flex-shrink: 0; border-radius: 2px; background: var(--ink); }
.legend svg { flex-shrink: 0; stroke: var(--pencil); }
.chart { min-height: 300px; }
.chart svg { display: block; overflow: visible; font-family: var(--sans); }
.chart text { fill: var(--graphite); font-weight: 500; }
.chart .c-grid { stroke: var(--hairline); }
.chart .goal { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 6 5; }
.chart .goal-label { fill: var(--ink); font-weight: 600; stroke: #FFFFFF; stroke-width: 4px; stroke-linejoin: round; paint-order: stroke; }
.chart .skip { fill: none; stroke: var(--pencil); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 5; }
.chart .line { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.chart .now-line { stroke: var(--ink); stroke-dasharray: 3 3; }
.chart .stem { stroke: var(--pencil); }
.chart .pill { fill: var(--canvas); }
.chart .pill-text { fill: var(--ink); font-weight: 700; }
.chart .today .pill { fill: var(--ink); }
.chart .today .pill-text { fill: #FFFFFF; }
.chart .dot { fill: var(--ink); }
.chart .now-dot { fill: #FFFFFF; stroke: var(--ink); stroke-width: 2.5; }
.chart-empty { position: absolute; left: 74px; right: 28px; top: 150px; text-align: center; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--graphite); text-wrap: balance; }

/* Review history */
.history { width: 500px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.history .sim-title { padding-bottom: 6px; }
.history-empty { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 20px; border: 1.5px dashed var(--hairline); border-radius: 14px; }
.history-empty b { font-size: 16px; line-height: 22px; font-weight: 700; }
.history-empty span { font-size: 15px; line-height: 20px; color: var(--graphite); }
.rows { display: flex; flex-direction: column; list-style: none; }
.rows li { display: flex; align-items: center; height: 48px; flex-shrink: 0; border-bottom: 1px solid var(--hairline); }
.rows li:last-child { border-bottom: 0; }
.rows .d { width: 80px; flex-shrink: 0; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--graphite); }
.rows .r { width: 84px; flex-shrink: 0; display: flex; font-size: 16px; line-height: 22px; font-weight: 700; }
.rows .n { flex: 1; font-size: 15px; line-height: 20px; color: var(--graphite); }
.rows .now .d { font-weight: 700; color: var(--ink); }
.rows .now .n { color: var(--ink); }
.now-pill { display: flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 12px; background: var(--ink); font-size: 13px; line-height: 18px; font-weight: 700; color: #FFFFFF; }
.gaps { padding-top: 14px; font-size: 14px; line-height: 19px; color: var(--graphite); }

/* Settings */
.settings { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.retention, .learning { display: flex; flex-direction: column; gap: 12px; }
.ret-head { display: flex; align-items: baseline; justify-content: space-between; }
.ret-head label, .set-label { font-size: 16px; line-height: 22px; font-weight: 700; }
.ret-head output { font-size: 17px; line-height: 22px; font-weight: 800; }
/* The track and fill are drawn here. The range input sits on top, 12px wider on each side, so its thumb's centre
   runs from end to end of the track as drawn. */
.slider { position: relative; height: 24px; }
.slider::before, .slider::after { content: ""; position: absolute; left: 0; top: 9px; height: 6px; border-radius: 3px; }
.slider::before { right: 0; background: #E2E2DE; }
.slider::after { width: var(--p); background: var(--ink); }
.slider input { position: absolute; z-index: 1; left: -12px; top: 0; width: calc(100% + 24px); height: 24px; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.slider input::-webkit-slider-runnable-track { height: 24px; background: none; }
.slider input::-moz-range-track { height: 24px; background: none; }
.slider input::-webkit-slider-thumb { width: 24px; height: 24px; border: 2px solid var(--ink); border-radius: 12px; background: #FFFFFF; box-shadow: 0 2px 6px #0000001F; -webkit-appearance: none; appearance: none; }
.slider input::-moz-range-thumb { box-sizing: border-box; width: 24px; height: 24px; border: 2px solid var(--ink); border-radius: 12px; background: #FFFFFF; box-shadow: 0 2px 6px #0000001F; }
.slider input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--violet); }
.slider input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--violet); }
.ret-ends { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 19px; color: var(--graphite); }
.opts { display: flex; gap: 10px; }
.opt { position: relative; flex: 1 1 0; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border: 1.5px solid var(--hairline); border-radius: 14px; background: #FFFFFF; cursor: pointer; transition: border-color .15s, background .15s; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt i { width: 20px; height: 20px; flex-shrink: 0; border: 2px solid var(--pencil); border-radius: 10px; }
.opt .tick { display: none; flex-shrink: 0; }
.opt .tick circle { fill: var(--ink); }
.opt .tick path { fill: none; stroke: #FFFFFF; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.opt span { font-size: 16px; line-height: 22px; font-weight: 500; white-space: nowrap; }
.opt:has(input:checked) { border-color: var(--ink); background: var(--lilac-soft); }
.opt:has(input:checked) .tick { display: block; }
.opt:has(input:checked) i { display: none; }
.opt:has(input:checked) span { font-weight: 700; }
.set-note { font-size: 14px; line-height: 19px; color: var(--graphite); text-wrap: pretty; }

.actions { display: flex; align-items: center; gap: 16px; padding-top: 8px; }
.actions span { font-size: 15px; line-height: 20px; color: var(--graphite); }

/* Hover only where there is a pointer, so a tapped button doesn't stay tinted on a phone. */
@media (hover: hover) {
  .rating:hover { background: var(--lilac-soft); }
  .opt:hover { border-color: var(--pencil); }
}

/* Below 1180 the rate column and the chart stack, and below 980 history and settings do too. */
@media (max-width: 1180px) {
  .sim { padding: 32px 44px 44px; }
  .sim-top { flex-direction: column; }
  .rate { width: auto; justify-content: flex-start; gap: 28px; }
  .history { flex: 1 1 0; width: auto; min-width: 0; }
}
@media (max-width: 980px) {
  .sim-bottom { flex-direction: column; }
  .history, .settings { flex: none; }
  .history-empty { flex: none; }
}
@media (max-width: 760px) {
  /* tool.css takes the grey off the panel on the reading speed test's start screen, which this page shares. */
  .tool[data-state="start"] .panel.sim { border-radius: 28px; background: var(--canvas); }
  .sim { gap: 12px; padding: 20px 12px 12px; }
  .sim-top, .sim-bottom, .rate { gap: 12px; }
  .sim-title { font-size: 18px; line-height: 24px; }
  .ask { padding: 0 6px 8px; }
  .ask-head { gap: 6px; padding-bottom: 4px; }
  .ask-title { font-size: 22px; line-height: 27px; }
  .ratings { display: grid; grid-template-columns: 1fr 1fr; }
  .rating { height: 68px; gap: 2px; }
  .rating b { font-size: 17px; line-height: 22px; }
  .rating span { font-size: 14px; line-height: 19px; }
  .hint { font-size: 14px; line-height: 19px; }
  /* The three numbers become rows in one card: name and meaning on the left, the number on the right. */
  .stats { flex-direction: column; gap: 0; padding: 4px 18px; border-radius: 20px; background: #FFFFFF; }
  .stat { display: grid; grid-template-columns: 1fr 104px; grid-template-areas: "lbl val" "desc val"; column-gap: 12px; row-gap: 2px; padding: 14px 0; border-radius: 0; border-bottom: 1px solid var(--hairline); }
  .stat:last-child { border-bottom: 0; }
  .stat dt { grid-area: lbl; }
  .stat .desc { grid-area: desc; }
  .stat .val { grid-area: val; align-self: center; justify-content: flex-end; gap: 4px; }
  .stat .val b { font-size: 26px; line-height: 30px; }
  .stat .val span { font-size: 15px; line-height: 20px; }
  .curve { gap: 14px; padding: 20px 16px 16px; }
  .curve-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .legend { gap: 14px; }
  .chart { min-height: 230px; }
  .history { gap: 6px; padding: 20px 18px; }
  .history .sim-title { padding-bottom: 4px; }
  .history-empty span { font-size: 14px; line-height: 19px; }
  .rows li { height: 44px; }
  .rows .d { width: 64px; font-size: 14px; line-height: 19px; }
  .rows .r { width: 64px; font-size: 15px; line-height: 20px; }
  .rows .n { font-size: 14px; line-height: 19px; }
  .now-pill { height: 22px; padding: 0 9px; border-radius: 11px; font-size: 12px; line-height: 16px; }
  .gaps { display: none; }
  .settings { gap: 20px; padding: 20px 18px; }
  .ret-ends { font-size: 13px; line-height: 18px; }
  .opts { flex-direction: column; gap: 8px; }
  .opt { flex: none; height: 50px; }
  .actions { padding-top: 4px; }
  .actions .outline { flex: 1; }
  .actions span { display: none; }
}