/* Azure Recall Deck. Builds on manual.css (site tokens, buttons). */
.recall-main{max-width:var(--page-max,1440px);margin:0 auto;padding:28px var(--gutter,16px) 80px}
.recall-main .lead{max-width:75ch}
.recall-main .crumbs{margin-bottom:12px}
.decks{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 14px}
.chip{border:1.5px solid var(--grey-2);background:#fff;border-radius:20px;padding:4px 12px;font-weight:600;font-size:13px;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.chip[aria-pressed="true"]{border-color:var(--hl-color);background:var(--hl-soft)}
.chip .due{font-family:var(--mono);font-size:11px;color:var(--hl-text)}
.chip .dot{width:7px;height:7px;border-radius:2px}
.modes{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.seg{display:inline-flex;border:2px solid var(--hl-color);border-radius:20px;overflow:hidden}
.seg button{border:0;background:#fff;padding:5px 14px;font-weight:600;font-size:13.5px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--hl-color);color:#000}
.count{margin-left:auto;font-family:var(--mono);font-size:12.5px;color:var(--secondary-text-color)}
.rcard{background:var(--card);border:1px solid var(--grey);border-top:4px solid var(--hl-color);border-radius:12px;padding:24px 26px;min-height:290px;display:flex;flex-direction:column;gap:14px}
.rcard .meta{display:flex;justify-content:space-between;gap:10px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--secondary-text-color);margin:0}
.rcard .tag{padding:1px 9px;border-radius:20px;color:#fff;font-weight:600}
.rcard .q{font-size:clamp(19px,2.6vw,23px);font-weight:600;line-height:1.35;margin:0;text-wrap:balance}
.yours{display:flex}
.yours input{flex:1;min-width:0;border:1.5px solid var(--grey-2);border-radius:10px;background:#fff;padding:9px 12px;font:inherit;font-size:15.5px}
.yours input:focus{outline:none;border-color:var(--hl-color)}
.answer{border-top:1px dashed var(--grey-2);padding-top:14px;display:grid;gap:8px}
.answer .a{font-size:17.5px;color:var(--body-text);margin:0}
.answer .mine{font-size:14.5px;color:var(--secondary-text-color);margin:0}
.ractions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.btn kbd{font-family:var(--mono);font-size:11px;border:1px solid currentColor;border-radius:4px;padding:0 4px;opacity:.75}
.btn.miss{background:var(--bad-soft);color:var(--bad)}
.btn.miss:hover{background:var(--bad);color:#fff}
.btn.got{background:var(--good-soft);color:var(--good)}
.btn.got:hover{background:#017100;color:#fff}
.empty{text-align:center;justify-content:center;align-items:center}
.empty p{margin:0;max-width:44ch;color:var(--secondary-text-color)}
.empty .big{font-size:21px;font-weight:700;color:var(--text-color)}
.rbar{display:flex;height:8px;border-radius:4px;overflow:hidden;background:#e8ebe8;margin-top:22px}
.rbar i{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;font-size:13px;color:var(--secondary-text-color)}
.legend span{display:inline-flex;gap:6px;align-items:center}
.legend i{width:10px;height:10px;border-radius:2px;display:inline-block}
.howto{margin-top:24px;font-size:15px;color:var(--body-text)}
.howto summary{cursor:pointer;font-weight:600}
.howto ul{margin:8px 0 0 20px}
@media (max-width:560px){.rcard{padding:20px 18px}.count{margin-left:0;width:100%}
  .decks{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px}.chip{flex:none}}

/* Wide screens: deck list in a sticky column on the left, the study card on the right. */
@media (min-width: 1100px) {
  .recall-main { display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: 48px; align-items: start; }
  .recall-main > * { grid-column: 1 / -1; }
  .recall-main > .decks {
    grid-column: 1; grid-row: 4 / span 7; flex-direction: column; flex-wrap: nowrap; align-items: stretch;
    margin-top: 0; position: sticky; top: calc(var(--site-header-h, 79px) + 20px);
  }
  .recall-main > .decks .chip { border-radius: 10px; padding: 7px 12px; text-align: left; }
  .recall-main > .decks .chip .due { margin-left: auto; }
  .recall-main > .modes { grid-column: 2; grid-row: 4; }
  .recall-main > #stage { grid-column: 2; grid-row: 5; }
  .recall-main > .rbar { grid-column: 2; grid-row: 6; }
  .recall-main > .legend { grid-column: 2; grid-row: 7; }
  .recall-main > .tools { grid-column: 2; grid-row: 8; }
  .recall-main > .howto { grid-column: 2; grid-row: 9; }
  .recall-main > .note { grid-column: 2; grid-row: 10; }
  .recall-main > .foot { grid-row: 11; }
}

.tools{margin-top:18px;display:grid;gap:12px}
.tools .btn{font-size:14px;padding:7px 16px}
.tools .btn:disabled{opacity:.45;cursor:default;background:transparent;color:var(--text-color)}
.confirm{background:var(--bad-soft);border:1px solid var(--bad);border-radius:12px;padding:14px 16px;display:grid;gap:10px}
.confirm p{margin:0;color:var(--body-text);font-size:15px}