/* Onboarding "Module selection" screen - ported verbatim from Claude Design
   (project 77f69ab2-febe-4e17-87bc-ec431a5418c0, "W - Modul secimi",
   docs/design/import/yeni-siniflar-modulsecim.css). Loaded after onboarding-payment.css - the
   frame (.tapp-kt-frame) and the page body (.tapp-kt-page, .tapp-kt-top, .tapp-kt-steps) are
   inherited from there. Width responsiveness is via @container; the frame is the container. The
   module count is data: the grid is auto-fill, there is no fixed column count anywhere. */

.cr{
  --ms-r:12px;
  --ms-r-ctl:8px;
  --ms-t-lbl:10.5px;
  --ms-t-note:12px;
  --ms-t-body:13.5px;
}

.tapp-ms-wrap{
  display:flex;
  flex-direction:column;
  gap:clamp(16px,2cqi,22px);
  width:100%;
  max-width:1240px;
  margin:0 auto;
  min-width:0;
}

/* ── Header strip ───────────────────────────────────────── */

.tapp-ms-head{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.tapp-ms-h{
  font-size:clamp(19px,2.4cqi,25px);
  font-weight:700;
  color:var(--head);
  letter-spacing:-.5px;
  margin:0;
  text-wrap:pretty;
}
.tapp-ms-p{
  font-size:var(--ms-t-body);
  color:var(--muted);
  line-height:1.55;
  margin:0;
  max-width:70ch;
  text-wrap:pretty;
}
.tapp-ms-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 16px;
  font-size:var(--ms-t-note);
  color:var(--muted);
  margin-top:2px;
}
.tapp-ms-meta i{ margin-right:6px; color:var(--muted); }

/* ── Grid ───────────────────────────────────────────────── */

.tapp-ms-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));
  gap:12px;
  min-width:0;
}

/* ── Card ───────────────────────────────────────────────── */

.tapp-ms-card{
  container-type:inline-size;
  display:flex;
  flex-direction:column;
  gap:11px;
  padding:15px;
  border:1px solid var(--border);
  border-radius:var(--ms-r);
  background:var(--card);
  min-width:0;
  transition:border-color .12s ease,background .12s ease;
}
.tapp-ms-card:hover{ border-color:var(--brand-indigo); }
.tapp-ms-card.is-on{
  border-color:var(--brand-indigo);
  box-shadow:inset 0 0 0 1px var(--brand-indigo);
}
.tapp-ms-card.is-blocked{ border-color:var(--warn); }

.tapp-ms-top{ display:flex; align-items:flex-start; gap:10px; min-width:0; }
.tapp-ms-tile{
  flex:0 0 auto;
  width:32px; height:32px;
  border-radius:var(--r-sm);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--on-brand);
  font-size:14px;
}
.tapp-ms-id{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; }
.tapp-ms-name{
  font-size:14.5px;
  font-weight:700;
  color:var(--head);
  letter-spacing:-.2px;
  margin:0;
  overflow-wrap:anywhere;
}
.tapp-ms-kind{ font-size:11px; color:var(--muted); }
.tapp-ms-state{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:5px;
  height:21px;
  padding:0 9px;
  border-radius:var(--r-pill);
  border:1px solid var(--border);
  background:var(--hover);
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  white-space:nowrap;
}
.tapp-ms-state i{ font-size:9px; }
.tapp-ms-state.is-trial{ color:var(--ok); }
.tapp-ms-state.is-paid{ color:var(--acc-text); }

.tapp-ms-desc{
  font-size:var(--ms-t-body);
  color:var(--muted);
  line-height:1.55;
  margin:0;
  text-wrap:pretty;
}

.tapp-ms-price{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:auto;
  padding-top:2px;
  min-width:0;
}
.tapp-ms-price b{
  font-size:15px;
  font-weight:700;
  color:var(--head);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.2px;
}
.tapp-ms-price span{ font-size:11.5px; color:var(--muted); line-height:1.45; }

.tapp-ms-acts{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tapp-ms-acts .tapp-btn{
  width:100%;
  height:34px;
  padding:0 10px;
  font-size:12.5px;
}
@container (max-width:250px){
  .tapp-ms-acts{ grid-template-columns:1fr; }
}

/* A selected card's own bottom row: changing the choice is as easy as removing it */
.tapp-ms-chosen{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px 10px;
  padding:9px 11px;
  border-radius:var(--ms-r-ctl);
  background:var(--hover);
  font-size:12.5px;
  color:var(--body);
  min-width:0;
}
.tapp-ms-chosen b{ color:var(--head); font-weight:600; }
.tapp-ms-chosen .tapp-ms-link{ margin-left:auto; }
.tapp-ms-link{
  border:0;
  background:none;
  padding:0;
  font:inherit;
  font-size:12.5px;
  color:var(--acc-text);
  cursor:pointer;
  white-space:nowrap;
}
.tapp-ms-link:hover{ text-decoration:underline; }
.tapp-ms-link.is-quiet{ color:var(--muted); }

/* Dependency: the card states its own gap and offers to add both at once */
.tapp-ms-dep{
  display:flex;
  flex-direction:column;
  gap:9px;
  padding:11px;
  border:1px solid var(--border);
  border-radius:var(--ms-r-ctl);
  background:var(--hover);
  min-width:0;
}
.tapp-ms-dep.is-warn{ border-color:var(--warn); }
.tapp-ms-dep-t{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:var(--ms-t-note);
  color:var(--body);
  line-height:1.5;
  text-wrap:pretty;
}
.tapp-ms-dep-t i{ margin-top:2px; color:var(--muted); flex:0 0 auto; }
.tapp-ms-dep.is-warn .tapp-ms-dep-t i{ color:var(--warn); }
.tapp-ms-dep-t b{ color:var(--head); font-weight:600; }
.tapp-ms-dep .tapp-btn{ width:100%; height:32px; font-size:12.5px; }

/* ── Summary, bottom of the screen ──────────────────────── */

.tapp-ms-sum{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px 20px;
  align-items:center;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:var(--ms-r);
  background:var(--card);
  min-width:0;
}
.tapp-ms-sum.is-empty{ background:var(--hover); }
.tapp-ms-sum-l{ display:flex; flex-direction:column; gap:9px; min-width:0; }
.tapp-ms-sum-k{
  font-size:var(--ms-t-lbl);
  font-weight:700;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--muted);
}
.tapp-ms-sum-t{ font-size:var(--ms-t-body); color:var(--head); font-weight:600; }
.tapp-ms-sum-n{ font-size:var(--ms-t-note); color:var(--muted); line-height:1.55; text-wrap:pretty; max-width:62ch; }

.tapp-ms-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.tapp-ms-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 9px;
  border-radius:var(--r-pill);
  border:1px solid var(--border);
  background:var(--hover);
  font-size:11.5px;
  color:var(--body);
  min-width:0;
}
.tapp-ms-chip i{ font-size:9px; color:var(--muted); }
.tapp-ms-chip.is-trial i{ color:var(--ok); }
.tapp-ms-chip.is-paid i{ color:var(--acc-text); }
.tapp-ms-chip em{ font-style:normal; color:var(--muted); }
.tapp-ms-chip-x{
  border:0;
  background:none;
  padding:0 0 0 2px;
  font:inherit;
  font-size:10px;
  color:var(--muted);
  cursor:pointer;
}
.tapp-ms-chip-x:hover{ color:var(--head); }

.tapp-ms-sum-r{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-end;
  text-align:right;
  min-width:0;
}
.tapp-ms-tot{ display:flex; flex-direction:column; gap:2px; }
.tapp-ms-tot b{
  font-size:19px;
  font-weight:700;
  color:var(--head);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.4px;
}
.tapp-ms-tot span{ font-size:11.5px; color:var(--muted); }
.tapp-ms-sum-acts{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }

@container (max-width:780px){
  .tapp-ms-sum{ grid-template-columns:minmax(0,1fr); }
  .tapp-ms-sum-r{ align-items:flex-start; text-align:left; }
  .tapp-ms-sum-acts{ justify-content:flex-start; }
}
@container (max-width:520px){
  .tapp-ms-grid{ grid-template-columns:minmax(0,1fr); }
  .tapp-ms-sum-acts{ width:100%; }
  .tapp-ms-sum-acts .tapp-btn{ flex:1 1 100%; }
}

/* The dependency warning also shows in the summary */
.tapp-ms-warn{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:11px 12px;
  border:1px solid var(--warn);
  border-radius:var(--ms-r-ctl);
  background:var(--hover);
  font-size:var(--ms-t-note);
  color:var(--body);
  line-height:1.55;
  text-wrap:pretty;
  min-width:0;
}
.tapp-ms-warn i{ color:var(--warn); margin-top:2px; flex:0 0 auto; }
.tapp-ms-warn b{ color:var(--head); font-weight:600; }