/* The beat sheet page. Colors come from app.css. */
.h2 { font-size: 1.1rem; }
.hint { font-weight: 400; }

/* the genre's lengths on one bar */
.len-bar { position: relative; height: 44px; margin: 6px 0 14px; }
.len-bar span { position: absolute; }
.lb-outer, .lb-typ { top: 8px; height: 14px; border-radius: 99px; }
.lb-outer { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.lb-typ { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.lb-you { top: 2px; width: 3px; height: 26px; margin-left: -1.5px; background: var(--ink); border-radius: 2px; }
.lb-tick { top: 26px; transform: translateX(-50%); font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* the whole book as one line */
.beat-line { position: relative; height: 22px; margin: 6px 0 16px; background: var(--line); border-radius: 99px; }
.beat-line span { position: absolute; top: 0; }
.bl-act { width: 1px; height: 22px; background: var(--muted); opacity: .5; }
.bl-done { left: 0; height: 22px; border-radius: 99px 0 0 99px; background: color-mix(in srgb, var(--accent) 25%, transparent); }
.bl-dot { z-index: 1; top: 6px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--accent); }
.bl-you { top: -4px; width: 3px; height: 30px; margin-left: -1.5px; background: var(--ink); border-radius: 2px; }

.here { font-weight: 600; }

table.beats td { vertical-align: top; }
table.beats td:not(:first-child) { white-space: nowrap; }
table.beats .what { display: block; color: var(--muted); font-size: .875rem; font-weight: 400; margin-top: 2px; }
table.beats tr.now td { background: color-mix(in srgb, var(--accent) 12%, transparent); }

.len-table td:not(:first-child), .len-table th:not(:first-child) { white-space: nowrap; }
.len-table tbody tr { cursor: pointer; }
.len-table tbody tr:hover td:first-child { color: var(--accent); }
@media (max-width: 480px) {
  .len-table { font-size: .875rem; }
  .len-table td:not(:first-child), .len-table th:not(:first-child),
  table.beats td:not(:first-child), table.beats th:not(:first-child) { white-space: normal; }
  table.beats td:first-child { width: 55%; }
  .len-table td:first-child { padding-right: 10px; }
}

/* the list of story shapes */
.shape-list { list-style: none; padding: 0; margin: 0; }
.shape-list li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.shape-list li:last-child { border: 0; }
.shape-list a { font-weight: 700; }
.shape-list span { display: block; color: var(--muted); font-size: .875rem; margin-top: 2px; }