/* The Stats tab: reading statistics for any stretch of time (assets/js/shell/stats.js). Builds on the story figures' classes in finish.css (.st-*). */
.ps{min-width:0}
.ps-pick{padding-bottom:2px}
.ps-kinds .chip{flex:none}
.ps-nav{min-height:48px}
.ps-label{text-align:center;min-width:0}
.ps-label .s15{overflow-wrap:anywhere}
.ps-custom .input{width:auto}
.ps-tile .st-v{font-size:1.625rem}
.ps-chg{margin-top:2px;color:var(--ink2)}
.ps-chg span[aria-hidden]{font-size:.6875rem;color:var(--gold2)}

/* the chart of the stretch */
.ps-svg{max-height:none}
.ps-svg .pb{fill:rgba(var(--gd),.5)}
.ps-svg .pb.fin{fill:var(--gold2)}

/* the calendar */
.st-svg.ps-cal{max-width:none;max-height:none;flex:none}
.ps-cal .c0{fill:rgba(var(--fg),.09)}
.ps-cal .c1{fill:rgba(var(--gd),.3)}
.ps-cal .c2{fill:rgba(var(--gd),.5)}
.ps-cal .c3{fill:rgba(var(--gd),.74)}
.ps-cal .c4{fill:rgb(var(--gd))}
.ps-cal .dn{fill:var(--ink2);font-size:10px;font-family:inherit;pointer-events:none}
.ps-cal .dn.on{fill:var(--on-gold)}
.ps-cal .fd{fill:var(--ink);stroke:rgba(var(--pn),.9);stroke-width:.8;pointer-events:none}

/* when you read: weekday by time of day */
.ps-tw,.ps-calw{overflow-x:auto;max-width:100%}
.ps-tbw{overflow-x:auto;max-width:100%}
.ps-calw:focus-visible{outline:2px solid var(--gold2);outline-offset:2px;border-radius:8px}
.ps-when{border-collapse:separate;border-spacing:4px;width:100%;font-size:.8125rem}
.ps-when th{font-weight:500;color:var(--ink2);text-align:center;padding:2px 4px;vertical-align:bottom}
.ps-when thead th{line-height:1.25}
.ps-when thead th .mute{display:block}
.ps-when tbody th{text-align:left}
.ps-when td{text-align:center;padding:0}
.ps-hc{display:inline-block;min-width:36px;padding:6px 8px;border-radius:8px;background:rgba(var(--fg),.07);line-height:1.1;font-variant-numeric:tabular-nums}

/* averages */
.ps-dl{margin:0;display:flex;flex-direction:column}
.ps-dr{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 14px;padding:9px 0;border-top:1px solid var(--edge)}
.ps-dr:first-child{border-top:0}
.ps-dr dt{color:var(--ink2);font-size:.9375rem}
.ps-dr dd{margin:0;text-align:right;font-size:.9375rem;min-width:0}
.ps-dr dd b{font-weight:600;color:var(--ink)}

/* the table of finished books */
.ps-table{width:100%;border-collapse:collapse;font-size:.875rem}
.ps-table th,.ps-table td{padding:10px 8px;text-align:left;vertical-align:top;border-top:1px solid var(--edge)}
.ps-table thead th{border-top:0;padding:4px 8px;white-space:nowrap;vertical-align:bottom}
.ps-table tbody th{font-weight:400;min-width:170px}
.ps-table td{font-variant-numeric:tabular-nums}
.ps-sort{background:none;border:0;color:var(--ink2);font:600 .75rem 'DM Sans',sans-serif;letter-spacing:.04em;cursor:pointer;padding:8px 2px;min-height:36px;text-align:left}
.ps-sort:hover{color:var(--gold2)}
[aria-sort="ascending"] .ps-sort,[aria-sort="descending"] .ps-sort{color:var(--gold2)}
.ps-sortsel{flex-wrap:wrap}
@media (max-width:760px){
  .ps-table,.ps-table tbody,.ps-table tr{display:block}
  .ps-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ps-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px;padding:12px 0;border-top:1px solid var(--edge)}
  .ps-table tr:first-child{border-top:0}
  .ps-table th,.ps-table td{border-top:0;padding:2px 0;min-width:0}
  .ps-table tbody th{grid-column:1/-1;min-width:0;padding-bottom:6px}
  .ps-table td::before{content:attr(data-l);display:block;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
  .ps-tbw{overflow:visible}
}
@media (max-width:420px){.ps-tile .st-v{font-size:1.375rem}.ps-when thead th .mute{display:none}.ps-hc{min-width:30px;padding:6px 4px}}

/* Year in Books (assets/js/shell/year-books.js, year-card.js) */
.ycd-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ycd-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.ycd-t{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:1.125rem;line-height:1.2;overflow-wrap:anywhere}
.yb{min-width:0}
.yb-nav .btn{flex:none}
.yb-scroll{max-height:220px;overflow-y:auto;padding:2px}
@media (max-width:420px){.yb-nav{flex-wrap:wrap;justify-content:center}.yb-nav>div{order:-1;flex-basis:100%}}