.languages-page__intro{ margin:-24px 0 28px; font-size:0.92rem; color:var(--paper-dim); }

.languages-layout{
  display:grid; grid-template-columns:minmax(260px, 340px) 1fr; gap:24px; align-items:start;
}

.languages-chart-card, .languages-table-card{
  /* min-width:0 -- without it, a grid item defaults to min-width:auto,
     which never shrinks below its content's own min-content size. The
     table inside .languages-table-card is what actually has a wide
     min-content (a <table> won't wrap its cells) -- without this, that
     forces the whole card (and the single-column layout it sits in on
     mobile) wider than the viewport instead of letting
     .languages-table-wrap's own overflow-x:auto contain the excess. */
  min-width:0;
  border:1px solid var(--line); border-radius:var(--radius-l);
  background:rgba(236,231,220,0.02); padding:22px;
}

.languages-pie-wrap{
  position:relative; width:100%; max-width:240px; aspect-ratio:1; margin:0 auto;
}
.languages-pie{
  width:100%; height:100%; border-radius:50%;
  box-shadow:0 20px 50px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(0,0,0,0.3);
}
.languages-pie__center{
  position:absolute; inset:20%; border-radius:50%;
  background:var(--ink-2); border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
}
.languages-pie__total{ font-family:var(--font-display); font-size:1.4rem; font-weight:500; color:var(--paper); }
.languages-pie__label{ font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--paper-dim); margin-top:2px; }

.languages-pie-legend{ margin-top:22px; display:flex; flex-direction:column; gap:8px; }
.languages-pie-legend__item{ display:flex; align-items:center; gap:8px; font-size:0.8rem; color:var(--paper-dim); }
.languages-pie-legend__item--more{ color:var(--paper-dim); font-style:italic; padding-left:17px; }
.languages-pie-legend__dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.languages-pie-legend__name{ color:var(--paper); flex:1; }
.languages-pie-legend__value{ font-variant-numeric:tabular-nums; }

.languages-table-wrap{
  max-height:560px; overflow-y:auto; overflow-x:auto; padding-right:6px;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.languages-table-wrap::-webkit-scrollbar{ width:7px; }
.languages-table-wrap::-webkit-scrollbar-track{ background:transparent; }
.languages-table-wrap::-webkit-scrollbar-thumb{ background:var(--line); border-radius:99px; }
.languages-table-wrap::-webkit-scrollbar-thumb:hover{ background:var(--accent-dim); }

.languages-table{ width:100%; border-collapse:collapse; font-size:0.85rem; }
.languages-table thead th{
  position:sticky; top:0; z-index:1;
  text-align:left; padding:0 12px 10px; font-size:0.72rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--paper-dim); background:var(--ink-2);
  border-bottom:1px solid var(--line);
}
.languages-table th:nth-child(2), .languages-table th:nth-child(3),
.languages-table td:nth-child(2), .languages-table td:nth-child(3){ text-align:right; }
.languages-table td{ padding:9px 12px; border-bottom:1px solid rgba(42,44,52,0.5); color:var(--paper); }
.languages-table tr:last-child td{ border-bottom:none; }
.languages-table__lang{ display:flex; align-items:center; gap:9px; }
.languages-table__dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.languages-table__code{ color:var(--paper-dim); font-size:0.76rem; margin-left:2px; }
.languages-table__percent{ font-variant-numeric:tabular-nums; font-weight:500; }
.languages-table__articles{ font-variant-numeric:tabular-nums; color:var(--paper-dim); }

@media (max-width:760px){
  .languages-layout{ grid-template-columns:1fr; }
  .languages-table-wrap{ max-height:420px; }
}