/* Larger guide cards; preserve the original source-to-practice control layout. */
.cardBody .list{gap:8px;padding-right:3px;scrollbar-gutter:stable;}
.cardBody .list .blockTitle{
  flex-shrink:0;font-size:14px;font-weight:600;line-height:1.4;
  margin:6px 0 0;padding:2px 3px;letter-spacing:.04em;
}
.cardBody .list .item{
  flex-shrink:0;min-height:72px;padding:12px;border-radius:13px;align-items:center;
}
.cardBody .list .item .name,.cardBody .list .item .cap{font-size:20px;font-weight:600;line-height:1.3;}
.cardBody .list .item .yomi,.cardBody .list .item .capYomi{font-size:12px;font-weight:500;line-height:1.25;}
@media (orientation:portrait), (orientation:landscape) and (max-height:480px){
  body .cardBody .list{
    display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-auto-rows:auto;align-content:start;gap:7px;
  }
  body .cardBody .list .blockTitle{grid-column:1 / -1 !important;grid-row:auto !important;}
  body .cardBody .list .item{
    grid-column:auto !important;grid-row:auto !important;min-height:64px;padding:9px;
  }
  .cardBody .list .item .name,.cardBody .list .item .cap{font-size:18px;}
  /* Keep the list usable below the controls on short portrait screens. */
  .frame{grid-template-rows:minmax(0,55fr) minmax(0,45fr);}
}
@media (orientation:landscape) and (max-height:480px){
  .frame{grid-template-rows:minmax(0,1fr);}
}

/* A knowledge source contains its indented practice activities. */
.stage .allLangToggle{
  position:absolute;top:0;right:14px;
}
.cardHead{display:block;padding:8px 10px;}
.cardHead .bigTitle{font-size:18px;white-space:normal;overflow:visible;}
.cardHead .guideTitle{
  box-sizing:border-box;width:100%;padding:7px 8px;border-radius:15px;
  text-align:center;color:var(--qBlue);font-size:18px;font-weight:600;
  line-height:1.15;letter-spacing:0;white-space:nowrap;
  background:linear-gradient(180deg,rgba(246,251,255,.96),rgba(232,243,255,.94));
  border:1.5px solid rgba(120,170,255,.50);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 8px 18px rgba(0,0,0,.12);
  text-shadow:none;
}
.cardHead .modeBar{
  display:flex;flex-direction:column;gap:8px;margin-top:6px;
}
.cardHead .knowledgeGroup{
  box-sizing:border-box;width:100%;
  padding:6px;border:1px solid rgba(255,255,255,.20);border-radius:16px;
  background:rgba(255,255,255,.12);min-width:0;
}
.cardHead .viewBtn{
  display:flex;align-items:center;gap:7px;width:100%;min-height:36px;
  padding:7px 8px;border:0;border-radius:8px;background:#dcf1e8;
  color:#087c61;text-align:left;font-size:12px;font-weight:700;
  line-height:1.3;letter-spacing:0;white-space:nowrap;transform:none;
  box-shadow:none;text-decoration:none;
}
.cardHead .viewBtn.is-on{background:#0f9f7a;color:#fff;transform:none;box-shadow:none;}
.cardHead .viewBtn::before{
  content:"";position:static;flex:0 0 17px;width:17px;height:17px;
  background:currentColor;border-radius:0;box-shadow:none;transform:none;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 5v15M12 5C9 3 5 3 2 4v15c3-1 7-1 10 1 3-2 7-2 10-1V4c-3-1-7-1-10 1Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cardHead .viewBtn::after{display:none;}
.cardHead .practiceGroup{
  display:flex;flex-direction:column;gap:5px;margin:7px 0 2px 12px;
  padding-left:9px;border-left:2px solid #b6ded2;
}
.cardHead .modeBtn{
  display:flex;align-items:center;gap:6px;width:100%;min-height:34px;
  padding:6px 7px;border:1px solid #c3d6f6;border-radius:8px;
  background:#eaf1ff;color:#1466ff;text-align:left;
  font-size:11px;font-weight:600;line-height:1.3;letter-spacing:0;
  white-space:nowrap;transform:none;box-shadow:none;
}
.cardHead .modeBtn::before{
  content:"";flex:0 0 14px;width:14px;height:14px;background:currentColor;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='m3 21 1-6L17 2l5 5L9 20l-6 1Z M14 5l5 5M4 15l5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cardHead .modeBtn.is-on{background:#1466ff;color:#fff;border-color:#1466ff;transform:none;box-shadow:none;}
html[lang="en"] .cardHead .guideTitle{font-size:14px;}
html[lang="en"] .cardHead .viewBtn{font-size:11px;}
html[lang="en"] .cardHead .modeBtn{font-size:10px;gap:4px;}
/* Keep the larger title and control sizes in both languages. */
.cardHead .guideTitle{
  height:48px;min-height:48px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.cardHead .viewBtn{box-sizing:border-box;height:36px;min-height:36px;flex-shrink:0;}
.cardHead .modeBtn{box-sizing:border-box;height:34px;min-height:34px;flex-shrink:0;}
.cardHead .practiceHint{
  font-size:10px;line-height:1.5;text-align:center;color:#55708d;
}
@media (orientation:landscape) and (max-height:520px){
  :root{--sideW:clamp(180px,26vw,220px);}
}
@media (orientation:landscape) and (min-height:481px){
  .cardHead{padding:0;border:0;background:transparent;}
  .cardHead .modeBar{
    position:fixed;top:calc(62px + var(--safeT, 0px));
    left:calc(14px + var(--safeL, 0px));z-index:80;
    width:var(--sgq-left-panel-width,188px);box-sizing:border-box;margin:0;padding:0;
    border:0;border-radius:0;
    background:transparent;box-shadow:none;
  }
}
@media (orientation:portrait) and (min-width:700px){
  body.sgq-left-aligned .cardHead{padding:0;border:0;background:transparent;}
  body.sgq-left-aligned .cardHead .modeBar{
    position:fixed;top:calc(62px + var(--safeT, 0px));
    left:calc(14px + var(--safeL, 0px));z-index:80;
    width:188px;box-sizing:border-box;margin:0;padding:0;
    border:0;border-radius:0;background:transparent;box-shadow:none;
  }
}

/* The learning-guide title is a heading rather than a selectable control. */
html body .cardHead .guideTitle{
  height:auto;min-height:36px;padding:4px 2px;
  border:0;border-radius:0;background:transparent;box-shadow:none;
  color:#f2f8ff;font-size:20px;font-weight:600;text-shadow:none;
  cursor:default;user-select:text;
}