/* LEARNING MODES */
.learn-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 2px}
.learn-mode-card{min-height:72px;display:grid;grid-template-columns:39px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;column-gap:9px;padding:10px;border:1px solid rgba(11,74,56,.11);border-radius:18px;background:rgba(255,249,241,.48);color:var(--green);text-align:left;box-shadow:inset 0 1px 0 rgba(255,255,255,.68)}
.learn-mode-card>span{grid-row:1/3;width:37px;height:37px;display:grid;place-items:center;align-self:center;border-radius:12px;background:rgba(11,74,56,.08);color:var(--green);font-family:Georgia,serif;font-size:11px;font-weight:900}
.learn-mode-card>strong{align-self:end;font-family:Georgia,serif;font-size:13px;line-height:1.05}
.learn-mode-card>small{align-self:start;margin-top:3px;color:#756f66;font-size:7.3px;line-height:1.2}
.learn-mode-card--smart{border-color:rgba(185,131,24,.18);background:rgba(232,218,183,.56)}
.learn-mode-card--smart>span{background:rgba(185,131,24,.12);color:#916914;font-family:system-ui,-apple-system,sans-serif;font-size:7px;letter-spacing:.5px}
.learn-mode-card:active{transform:scale(.99)}
@media(max-height:780px){.learn-mode-grid{gap:6px;margin-top:9px}.learn-mode-card{min-height:64px;padding:8px}.learn-mode-card>span{width:33px;height:33px}.learn-mode-card>strong{font-size:12px}.learn-mode-card>small{font-size:6.7px}}

.learn-mode-card--recognize{grid-column:1/-1;grid-template-columns:39px minmax(0,1fr);min-height:66px}
.learn-mode-card--recognize>span{display:grid;place-items:center}
.learn-mode-card--recognize>span svg{width:23px;height:23px}


/* Keep advanced learning modes in the options sheet so LEARN-01 retains its approved main layout. */
.learn-sheet-modes{margin-top:10px}
.learn-sheet-modes-label{display:block;margin:0 2px 6px;color:#9a711d;font-size:6.5px;font-weight:900;letter-spacing:1px}
.learn-sheet-modes .learn-mode-grid{margin:0}