/* Review cards (.cd-) and study records (.st-). Built on the tokens in styles.css, so both follow the clock. */
.cd-panel,.cd-quiz{min-width:0;word-break:keep-all;overflow-wrap:anywhere}
.cd-panel,.cd-qbody{display:grid;gap:12px;min-width:0}
.cd-qbody{gap:9px}
.cd-quiz{position:relative}
.cd-h{font:400 15px/1.3 var(--f-num);margin-bottom:6px}
.cd-start{display:block;width:100%;padding:16px 12px;font-size:21px}
.cd-status{margin-top:-5px}
.cd-empty{display:grid;gap:8px;justify-items:start}
.cd-striplbl{margin-bottom:3px;font-size:12.5px}
.cd-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.cd-box{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 0 4px;background:var(--paper2);border-radius:9px;min-width:0}
.cd-box b{font:400 17px/1.1 var(--f-num)}
.cd-box span{font-size:11.5px;line-height:1.2;color:var(--muted);white-space:nowrap}
.cd-none b{color:var(--muted)}
.cd-form{display:grid;gap:6px;min-width:0}
.cd-form .row{flex-wrap:wrap}
.cd-form .row .hint{flex:1 1 120px;min-width:0}
.cd-paste{min-width:0}
.cd-toggle{display:flex;align-items:center;gap:6px;width:100%;padding:3px 0;font:400 15px/1.3 var(--f-num);text-align:left;background:none;border:0}
.cd-toggle::before{content:"";flex:none;width:0;height:0;border-style:solid;border-width:5px 0 5px 7px;border-color:transparent transparent transparent currentColor;transition:transform .15s}
.cd-toggle[aria-expanded="true"]::before{transform:rotate(90deg)}
.cd-pastebox{margin-top:5px}
.cd-pastebox textarea{display:block;margin:6px 0 8px}
.cd-result{font-size:14px;margin-top:8px}
.cd-result:empty{display:none}
.cd-skips{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:5px;font-size:13px;max-height:190px;overflow:auto}
.cd-skips li{min-width:0}
.cd-skips b{font:400 13px/1.3 var(--f-num);margin-right:6px}
.cd-skips small{display:block;color:var(--muted);font-size:12.5px}
.cd-browse .hint{margin:5px 0}
.cd-list{display:grid;gap:7px;min-width:0}
.cd-row{display:grid;gap:4px;min-width:0;padding:8px 10px;border:2.5px solid var(--line);border-radius:12px}
.cd-rq{display:block;width:100%;padding:0;text-align:left;background:none;border:0;line-height:1.4;white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere}
.cd-rq[aria-expanded="false"]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;white-space:normal}
.cd-ra{padding:5px 8px;font-size:14px;background:var(--paper2);border-radius:8px;white-space:pre-wrap;max-height:200px;overflow:auto}
.cd-meta{font-size:12.5px;color:var(--muted);line-height:1.3}
.cd-acts{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.cd-acts .chip,.cd-more{padding:6px 10px;font-size:13px}
.cd-armed{background:var(--accent);color:var(--accent-text)}
.cd-more{justify-self:center}

/* the review itself */
.cd-head{display:flex;align-items:center;gap:8px;min-width:0}
.cd-head .bar{flex:1 1 40px;min-width:40px}
.cd-head .chip{flex:none;padding:6px 9px;font-size:13px}
.cd-count{flex:none;font:400 14px/1 var(--f-num);font-variant-numeric:tabular-nums;white-space:nowrap}
.cd-stage{display:grid;justify-items:center;min-width:0}
.cd-card{position:relative;z-index:1;width:100%;min-width:0;background:var(--paper2);border:3px solid var(--line);border-radius:14px;box-shadow:0 4px 0 var(--line)}
.cd-in{animation:cdIn .18s ease-out}
@keyframes cdIn{from{opacity:.25;transform:translateY(5px)}to{opacity:1;transform:none}}
/* soft shadows at the edges say there is more to scroll to; the first two layers cover them at the ends */
.cd-scroll{position:relative;min-height:112px;max-height:clamp(112px,calc(100vh - 560px),300px);overflow:auto;overscroll-behavior:contain;padding:10px 13px 12px;border-radius:11px;
  --cd-shade:color-mix(in oklab,var(--text) 34%,transparent);
  background:
    linear-gradient(var(--paper2) 40%,transparent) top/100% 26px no-repeat local,
    linear-gradient(transparent,var(--paper2) 60%) bottom/100% 26px no-repeat local,
    radial-gradient(farthest-side at 50% 0,var(--cd-shade),transparent) top/100% 9px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%,var(--cd-shade),transparent) bottom/100% 9px no-repeat scroll}
.cd-scroll:focus-visible{outline-offset:-3px}
.cd-tag{display:block;margin-bottom:3px;font:400 12.5px/1.2 var(--f-num);color:var(--muted)}
.cd-text{font-size:17px;line-height:1.5;white-space:pre-wrap}
.cd-nudge{margin-top:8px}
.cd-ans{margin-top:9px;padding-top:8px;border-top:2.5px dashed var(--muted)}
.cd-buddy{position:relative;z-index:2;display:flex;justify-content:center;margin-top:-9px;width:100%;--fur:var(--paper-ui)}
.cd-buddy .art{position:relative;z-index:2;width:104px;height:96px}
.cd-long .art{width:170px}
.cd-long .cd-name{display:none}
/* two arms come up from behind the head and grip the card's lower edge */
.cd-paw{position:absolute;z-index:1;top:-7px;left:calc(50% - 41px);width:18px;height:58px;background:var(--fur);border:2.5px solid #2B2130;border-radius:9px}
.cd-paw-r{left:calc(50% + 23px)}
.cd-name{position:absolute;left:calc(50% + 58px);right:0;bottom:12px;font-size:12px;line-height:1.25;color:var(--muted)}
.cd-hop{animation:cdHop .42s ease-out}
.cd-tilt .art{animation:cdTilt .42s ease-out}
@keyframes cdHop{0%,100%{transform:none}40%{transform:translateY(-7px)}}
@keyframes cdTilt{0%,100%{transform:none}40%{transform:rotate(-7deg)}}
/* the panel may scroll on a short screen, but the answer buttons stay in reach; the insets match the panel's padding */
.cd-actions{display:flex;gap:8px;min-width:0;padding-bottom:5px}
.panel .cd-actions{--cd-pad:16px;position:sticky;bottom:calc(var(--cd-pad) * -1);z-index:4;margin:-3px 0 calc(var(--cd-pad) * -1);padding:3px 0 var(--cd-pad);background:var(--paper-ui)}
.cd-actions .btn{flex:1 1 0;min-width:0;padding-left:6px;padding-right:6px}
.cd-right{background:var(--mint);color:var(--accent-text)}
.cd-keys{display:none}
@media (hover:hover) and (pointer:fine){.cd-keys{display:block;text-align:center;font-size:12.5px}}
.cd-pop{position:absolute;z-index:3;right:8px;top:30px;padding:3px 10px;font:400 14px/1.3 var(--f-num);color:var(--digit);background:var(--plate);border-radius:99px;pointer-events:none;animation:cdPop 1.2s ease-out forwards}
@keyframes cdPop{0%{opacity:0;transform:translateY(8px) scale(.85)}14%{opacity:1;transform:none}70%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-12px)}}
.cd-score{font-size:14px;color:var(--muted)}
.cd-score b{font:400 44px/1.05 var(--f-num);color:var(--text)}
.cd-back{display:grid;gap:4px}
.cd-back+.hint{margin-top:-2px}
.cd-qbody>.cd-h{margin-bottom:-4px}
.cd-back div{display:grid;grid-template-columns:minmax(0,4.5em) minmax(0,1fr) auto;gap:8px;align-items:baseline;padding:4px 8px;background:var(--paper2);border-radius:8px}
.cd-back b{font:400 15px/1.3 var(--f-num)}
.cd-back span{font-size:13px;color:var(--muted)}

/* subject chips in the dock */
.st-subj{display:flex;flex-wrap:nowrap;align-items:center;gap:4px;min-width:0;max-width:100%;padding:1px;overflow-x:auto;scrollbar-width:none}
.st-subj::-webkit-scrollbar{display:none}
.st-subj>*{flex:none}
.st-subj .chip{padding:5px 9px;font-size:13px;border-width:2px}
.st-subj :focus-visible{outline-width:2px;outline-offset:-2px}
.st-subj .st-x{padding:5px 7px;border-style:dashed}
.st-subj .st-add{border-style:dashed}
.st-subj input[type=text]{flex:1 0 96px;width:96px;padding:4px 9px;border-width:2px;font-size:14px}
.st-subj-float{position:absolute;z-index:6;bottom:calc(100% + 8px);width:236px;max-width:calc(100vw - 28px);padding:6px;background:var(--paper-ui);border:3px solid var(--line);border-radius:14px;box-shadow:0 4px 0 var(--line)}

/* records */
.st-panel{position:relative;min-width:0;word-break:keep-all;overflow-wrap:anywhere;
  --st-dim:color-mix(in oklab,var(--muted) 66%,var(--paper2));
  --st-grid:color-mix(in oklab,var(--muted) 30%,var(--paper-ui))}
.st-panel:not(:last-child){margin-bottom:14px}
.st-head{display:flex;align-items:baseline;gap:8px;margin-bottom:6px;min-width:0}
.st-head h3{margin:0 auto 0 0;flex:none}
.st-aside{min-width:0;font-size:13px;color:var(--muted);text-align:right}
.st-tab{flex:none;align-self:center;padding:3px 8px;font-size:12px;border-width:2px}
.st-invite{padding:2px 0}
.st-big{font-size:14px;color:var(--muted);margin-bottom:5px}
.st-big b{font:400 30px/1.05 var(--f-num);color:var(--text)}
.st-goalrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 8px;margin:7px 0 6px}
.st-stepper{display:flex;align-items:center;gap:5px;margin-left:auto}
.st-stepbtn{width:32px;height:32px;padding:0;font-size:17px;line-height:1;text-align:center}
.st-goalnum{min-width:5.2em;font:400 14px/1.2 var(--f-num);text-align:center;font-variant-numeric:tabular-nums}
.st-dday{font:400 24px/1 var(--f-num);color:var(--accent);white-space:nowrap}
.st-dday:empty{display:none}
.st-examrow{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:5px}
.st-examrow input[type=text]{flex:1 1 120px;width:auto}
.st-date{flex:1 1 130px;min-width:0;padding:8px 9px;background:var(--paper2);border:2.5px solid var(--line);border-radius:11px;color:var(--text)}
.st-plot{position:relative;padding-top:2px}
.st-plot .bars{height:118px;margin:0;gap:4px}
.st-plot .bars div{cursor:default;border-radius:6px}
.st-plot .bars i{width:min(100%,24px);min-height:0;background:var(--st-dim);border-radius:4px 4px 0 0}
.st-plot .bars .st-now i{background:var(--accent)}
.st-plot .bars .st-now span{color:var(--text)}
.st-plot .bars u{position:relative;z-index:1;padding:0 2px;background:var(--paper-ui);border-radius:3px}
.st-plot .bars div:hover i{filter:brightness(1.08)}
.st-plot::after{content:"";position:absolute;left:0;right:0;bottom:15px;border-top:1px solid var(--st-grid);pointer-events:none}
.st-goalline{position:absolute;left:0;right:0;border-top:1px solid var(--muted);pointer-events:none}
.st-key{display:flex;align-items:center;justify-content:flex-end;gap:5px;margin-top:3px;font-size:12px;color:var(--muted)}
.st-key i{width:16px;border-top:1px solid var(--muted)}
.st-heat{display:grid;grid-template-columns:15px repeat(12,minmax(0,1fr));gap:2px}
.st-mon{font:400 11px/1.2 var(--f-num);color:var(--muted);white-space:nowrap;padding-bottom:1px}
.st-wd{grid-column:1;align-self:center;font:400 11px/1 var(--f-num);color:var(--muted)}
.st-cell{display:block;aspect-ratio:1;min-width:0;border-radius:4px;background:var(--paper2)}
/* one hue from little to much: toward white and past the token by day, up from black at night */
.st-l1{background:color-mix(in oklab,var(--mint) 58%,white)}
.st-l2{background:color-mix(in oklab,var(--mint) 80%,white)}
.st-l3{background:var(--mint)}
.st-l4{background:color-mix(in oklab,var(--mint) 76%,black)}
:root[data-time="night"] .st-l1{background:color-mix(in oklab,var(--mint) 62%,black)}
:root[data-time="night"] .st-l2{background:color-mix(in oklab,var(--mint) 74%,black)}
:root[data-time="night"] .st-l3{background:color-mix(in oklab,var(--mint) 87%,black)}
:root[data-time="night"] .st-l4{background:var(--mint)}
.st-today-cell{box-shadow:inset 0 0 0 2px var(--text)}
.st-heat .st-cell:hover{box-shadow:inset 0 0 0 2px var(--text)}
.st-mark:focus-visible{outline:2px solid var(--text);outline-offset:1px}
.st-legend{display:flex;align-items:center;gap:3px;margin-top:6px;font-size:12px;color:var(--muted)}
.st-legend .st-cell{flex:none;width:13px;height:13px;border-radius:3px}
.st-legend span:first-child{margin-right:3px}
.st-legend span:last-child{margin-left:3px}
.st-tablebox{max-height:220px;overflow:auto}
.st-table{width:100%;border-collapse:collapse;font-size:13.5px}
.st-table th{position:sticky;top:0;font-weight:400;color:var(--muted);text-align:left;background:var(--paper-ui)}
.st-table td,.st-table th{padding:3px 2px;border-bottom:1px solid var(--st-grid)}
.st-table td:last-child,.st-table th:last-child{text-align:right;font-variant-numeric:tabular-nums}
.st-hlist{display:grid;gap:7px}
.st-hrow{min-width:0}
.st-hlab{display:flex;justify-content:space-between;gap:8px;font-size:13.5px;line-height:1.3;margin-bottom:2px}
.st-hlab span{min-width:0}
.st-hlab b{flex:none;font:400 13.5px/1.3 var(--f-num)}
.st-hrow>i{display:block;height:9px;background:var(--mint);border-radius:0 4px 4px 0}
.st-focus .st-hrow>i{background:var(--st-dim)}
.st-focus .st-on>i{background:var(--accent)}
.st-say{max-width:100%;margin-top:2px}
.st-tip{position:absolute;left:0;top:0;z-index:5;display:flex;align-items:baseline;gap:6px;width:max-content;max-width:100%;padding:4px 9px;color:var(--digit);background:var(--plate);border-radius:8px;font-size:12.5px;pointer-events:none}
.st-tip b{font:400 14px/1.3 var(--f-num)}

@media (max-width:719px){
  .cd-panel textarea,.cd-panel input[type=text],.st-panel input[type=text],.st-date,.st-subj input[type=text]{font-size:16px}
  .cd-start{padding:14px 10px;font-size:20px}
  .cd-text{font-size:16px}
  .cd-scroll{max-height:clamp(112px,calc(100vh - 510px),300px)}
  .panel .cd-actions{--cd-pad:14px}
}
@media (max-height:560px){
  .cd-buddy{display:none}
  .cd-scroll{min-height:64px;max-height:clamp(64px,calc(100vh - 290px),300px)}
}
@media (prefers-reduced-motion:reduce){
  .cd-in,.cd-hop,.cd-tilt .art,.cd-pop{animation:none!important}
  .cd-toggle::before{transition:none!important}
}