/* MOST Learn German grammar library A1–B2 */

.grammar-library-subhero{
  display:grid;
  gap:7px;
  padding:20px 22px;
  border:1px solid var(--line);
  border-radius:17px;
  background:linear-gradient(120deg,#fff 72%,#f1f5fb);
}
.grammar-library-subhero h3{margin:0;font-size:24px}
.grammar-library-subhero p{margin:0;max-width:820px;color:var(--muted);line-height:1.6}

.grammar-language-grid{display:grid;grid-template-columns:minmax(0,760px);gap:16px}
.grammar-language-card{
  width:100%;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  text-align:left;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
  color:var(--ink);
  padding:22px;
  box-shadow:var(--shadow);
  cursor:pointer;
}
.grammar-language-card:hover,.grammar-language-card:focus-visible{border-color:#9ab6df;background:#fbfdff}
.grammar-language-mark{
  width:52px;height:52px;display:grid;place-items:center;border-radius:15px;
  background:#edf4ff;color:var(--blue);font-weight:900;letter-spacing:.06em
}
.grammar-language-card>span:nth-child(2){display:grid;gap:4px}
.grammar-language-card small,.grammar-language-card em{color:var(--muted);font-size:12px;font-style:normal}
.grammar-language-card strong{font-size:22px}
.grammar-language-card>b{font-size:12px;color:var(--blue)}

.grammar-level-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grammar-level-card{
  display:grid;gap:10px;min-height:185px;text-align:left;
  border:1px solid var(--line);border-radius:18px;background:#fff;color:var(--ink);
  padding:22px;box-shadow:var(--shadow);cursor:pointer
}
.grammar-level-card:hover,.grammar-level-card:focus-visible{border-color:#97b4df;transform:translateY(-2px)}
.grammar-level-badge{
  display:inline-grid;place-items:center;width:48px;height:36px;border-radius:10px;
  background:#edf4ff;color:var(--blue);font-weight:900;letter-spacing:.06em
}
.grammar-level-card strong{font-size:21px}
.grammar-level-card p{margin:0;color:var(--muted);line-height:1.55}
.grammar-level-card small{margin-top:auto;color:var(--blue);font-weight:750}

.grammar-breadcrumbs{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.grammar-breadcrumbs>span{color:var(--muted);font-size:12px;font-weight:700}
.grammar-groups{display:grid;gap:22px}
.grammar-group{
  display:grid;gap:14px;padding:18px;border:1px solid var(--line);border-radius:18px;background:#fbfcfe
}
.grammar-group>header{display:grid;gap:4px}
.grammar-group>header h3{margin:0;font-size:20px}
.grammar-topic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.grammar-topic-card{min-height:166px}
.grammar-topic-card em{
  display:block;color:var(--muted);font-size:12px;line-height:1.45;font-style:normal;font-weight:550
}
.grammar-topic-card>span:last-child{margin-top:auto;color:var(--blue);font-weight:750}

.grammar-topic-hero{align-items:center}
.grammar-topic-hero h2{margin-bottom:6px}
.grammar-topic-hero .grammar-title-ru{
  margin:0 0 10px!important;
  font-size:17px;
  line-height:1.35;
  color:#495a75;
  font-weight:700
}
.grammar-topic-tabs{position:sticky;top:0;z-index:5}

.grammar-article{gap:18px;overflow:hidden}
.grammar-lesson-section{display:grid;gap:13px;min-width:0;padding:17px 0}
.grammar-lesson-section>h3{margin:0}
.grammar-lesson-section>p{margin:0;color:var(--muted);line-height:1.55}
.grammar-inline-practice{border-top:1px solid var(--line);margin-top:3px;min-width:0;max-width:100%;width:100%;box-sizing:border-box}
.grammar-inline-practice #practiceHost{display:grid;gap:12px;min-width:0;max-width:100%;width:100%;box-sizing:border-box}
.grammar-practice-instruction{margin:0;min-width:0;max-width:100%;overflow-wrap:anywhere;line-height:1.6;color:#34435d}
.grammar-practice-sentence{margin:0;padding:14px 16px;min-width:0;max-width:100%;box-sizing:border-box;border-radius:10px;background:#f3f6fa;color:#223650;overflow-wrap:anywhere;line-height:1.65}
#practiceFeedback{display:grid;gap:6px;min-width:0;max-width:100%;line-height:1.6;overflow-wrap:anywhere}
#practiceFeedback p{margin:0}
.grammar-inline-practice .v2-choices{display:flex;flex-wrap:wrap;gap:9px;min-width:0;max-width:100%;width:100%}
.grammar-inline-practice .v2-choices button{white-space:normal;text-align:left;min-width:0;max-width:100%;min-height:42px;overflow-wrap:anywhere}
.grammar-inline-practice .v2-toolbar{display:flex;flex-wrap:wrap;gap:9px;min-width:0;max-width:100%;width:100%;box-sizing:border-box}
.grammar-inline-practice .v2-toolbar input{flex:1 1 260px;min-width:0;max-width:100%}
.grammar-inline-practice #practiceNext{justify-self:start}
.grammar-semantic{
  display:grid;gap:9px;padding:16px 18px;border:1px solid var(--line);border-left:4px solid #b9c8dc;
  border-radius:12px;background:#fff
}
.grammar-semantic>span{
  width:max-content;max-width:100%;
  font-size:11px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:#435675
}
.grammar-semantic p{margin:0;line-height:1.72;color:#34435d}
.grammar-semantic ul{margin:0;padding-left:20px;display:grid;gap:7px;line-height:1.65;color:#34435d}
.grammar-semantic-rule{border-left-color:#5c83bf}
.grammar-semantic-usage{border-left-color:#7ca38f}
.grammar-semantic-formula{border-left-color:#9b8abb;background:#fcfbff}
.grammar-semantic-important{border-left-color:#c19b58;background:#fffdf8}
.grammar-semantic-exception{border-left-color:#8e8e8e;background:#fbfbfb}
.grammar-semantic-mistake{border-left-color:#bd6e6e;background:#fffafa}
.grammar-semantic-summary{border-left-color:#6784aa;background:#f9fbfe}
.grammar-formula,.grammar-article-section code{
  display:block;max-width:100%;overflow-wrap:anywhere;white-space:normal;
  padding:11px 13px;border-radius:9px;background:#f3f5f8;color:#273958;font:700 13px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace
}
.grammar-wrong{color:#9e3e3e!important;font-weight:700}
.grammar-right{color:#1d6c4d!important;font-weight:700}
.grammar-article-section{
  display:grid;gap:8px;padding:15px 17px;border:1px solid var(--line);border-radius:12px;background:#fbfcfe
}
.grammar-article-section h4{margin:0}
.grammar-article-section p{margin:0;line-height:1.7;color:#40516c}

.grammar-table-head{align-items:flex-start}
.grammar-table-head>div{display:grid;gap:5px;min-width:0}
.grammar-table-head h3,.grammar-table-head p{margin:0}
.grammar-table-head p{color:var(--muted);font-size:13px;line-height:1.5}
.grammar-table-section{display:grid;gap:9px;min-width:0}
.grammar-table-section h4,.grammar-table-section p{margin:0}
.grammar-table-section p{color:var(--muted);font-size:13px;line-height:1.5}
.grammar-table-section .v2-table-scroll{
  width:100%;max-width:100%;overflow:auto;overscroll-behavior-inline:contain
}
.grammar-table-section table{min-width:max(620px,100%)}

.grammar-examples-head{display:grid;gap:5px}
.grammar-examples-head h3{margin:0}
.grammar-example-list{display:grid;gap:10px}
.grammar-example{
  display:grid;gap:6px;padding:15px 17px;border:1px solid var(--line);border-radius:12px;background:#fff
}
.grammar-example strong{font-size:15px;line-height:1.55;color:#253954}
.grammar-example span{font-size:13px;line-height:1.55;color:#62708a}
.grammar-example small{font-size:12px;line-height:1.5;color:var(--muted)}

@media(max-width:1100px){
  .grammar-topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .grammar-inline-practice,
  .grammar-inline-practice #practiceHost{
    width:min(100%,calc(100vw - 32px));
    max-width:calc(100vw - 32px);
    box-sizing:border-box;
  }
  .grammar-level-grid,.grammar-topic-grid{grid-template-columns:1fr}
  .grammar-language-card{grid-template-columns:auto minmax(0,1fr);padding:17px}
  .grammar-language-card>b{grid-column:2}
  .grammar-group{padding:13px}
  .grammar-topic-tabs{position:static}
  .grammar-semantic,.grammar-article-section{padding:14px}
  .grammar-table-head{display:grid;gap:10px}
  .grammar-table-head button{justify-self:start}
  .grammar-table-section table{min-width:620px}
  .grammar-example{padding:13px 14px}
}

.grammar-completion { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:22px; padding:14px 0 2px; border-top:1px solid #dce7f6; color:#1768ab; font-weight:700; }
.grammar-completion button { white-space:normal; }