/* Visual polish pass: typography, alignment and responsive collision fixes. */
html {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prevent “line on line” collisions when Cyrillic content wraps. */
.page-title h1,
.card-title,
.level-row-title,
.level-hero h1,
.text-card h3,
.media-card-rich h3,
.detail-head h2,
.current-level-card h3,
.ai-action-card h4,
.message-text h4,
.book-preview-title {
  overflow-wrap: break-word;
  hyphens: auto;
}
.page-title h1 { line-height: 1.08; }
.page-title p,
.card-subtitle,
.secondary,
.text-card p,
.current-level-card p,
.detail-head p,
.message-text,
.ai-action-card p {
  line-height: 1.5;
}
.btn,
.btn-sm,
.link-gold,
.filter-chip,
.tab {
  line-height: 1.2;
  white-space: normal;
  text-align: center;
}

/* Artifact table: level/date/status are distinct cells, not inline text streams. */
.artifact-table-row {
  align-items: center;
}
.artifact-table-row > * { min-width: 0; }
.artifact-name > div { min-width: 0; }
.artifact-name strong,
.artifact-name > div > span {
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.artifact-level-cell,
.artifact-date-cell {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  line-height: 1.2;
}
.artifact-level-cell strong,
.artifact-date-main {
  display: block;
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}
.artifact-level-cell span,
.artifact-time {
  display: block;
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.artifact-status-cell {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 10px;
  line-height: 1.25;
  white-space: nowrap;
}
.row-actions { min-width: 0; }

/* Analytics lower region previously kept an inline two-column grid on mobile. */
.analytics-summary-grid {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(0,1.65fr);
  gap: 16px;
  margin-top: 16px;
}
.analytics-summary-grid > * { min-width: 0; }
.analytics-summary-grid .data-table th,
.analytics-summary-grid .data-table td {
  white-space: nowrap;
}

/* Fixed-height rows should expand when localized text wraps. */
.security-row,
.role-row,
.integration {
  height: auto;
  min-height: 52px;
}
.security-row {
  gap: 12px;
  padding: 10px 0;
}
.security-row > span:first-child { min-width: 0; line-height: 1.35; }
.security-row > span:last-child { text-align: right; line-height: 1.3; }
.role-row { padding-block: 8px; }
.integration { min-height: 84px; }

/* Long labels in levels/settings should wrap with predictable leading. */
.level-row-title { line-height: 1.18; }
.row-status,
.row-time,
.row-artifact { line-height: 1.3; }
.row-artifact { overflow-wrap: anywhere; }
.setting-label,
.setting-value,
.select-row span,
.select-row strong { line-height: 1.35; }

/* Tablet: the artifact list and detail panel need full width before they collide. */
@media (max-width: 1180px) {
  .levels-layout { grid-template-columns: 1fr; }
  .levels-layout .side-stack { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .artifacts-layout { grid-template-columns: 1fr; }
  .artifact-detail { position: relative; top: auto; min-height: 0; }
  .analytics-summary-grid { grid-template-columns: 1fr; }
}


@media (max-width: 980px) {
  .levels-layout .side-stack { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .levels-layout .side-stack { grid-template-columns: 1fr; }
  /* Correct mobile artifact-detail header: old 38px column still contained a 64px icon. */
  .detail-head {
    grid-template-columns: 44px minmax(0,1fr) 44px;
    gap: 12px;
    align-items: start;
  }
  .detail-head .doc-icon {
    width: 44px;
    height: 44px;
  }
  .detail-head .doc-icon svg {
    width: 22px;
    height: 22px;
  }
  .detail-head h2 {
    margin: 1px 0 5px;
    font-size: 20px;
    line-height: 1.12;
  }
  .detail-head p {
    font-size: 10px;
    line-height: 1.4;
  }

  /* Profile form: label/value/button now occupy intentional grid areas. */
  .setting-row {
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas:
      "label action"
      "value value";
    gap: 7px 12px;
    padding: 11px 0;
    align-items: center;
  }
  .setting-row .setting-label {
    grid-area: label;
    min-width: 0;
    font-size: 10px;
  }
  .setting-row .setting-value {
    grid-area: value;
    min-width: 0;
    font-size: 11px;
    overflow-wrap: anywhere;
  }
  .setting-row .btn {
    grid-area: action;
    width: auto;
    min-width: 96px;
    min-height: 40px;
    padding-inline: 12px;
  }

  .analytics-summary-grid { grid-template-columns: 1fr; }
  .analytics-summary-grid > .grid-3 { grid-template-columns: 1fr; }
  .analytics-summary-grid .table-wrap {
    width: 100%;
    max-width: 100%;
  }

  /* Artifact metadata hidden on phones remains semantically separate and cannot overlap. */
  .artifact-level-cell,
  .artifact-date-cell,
  .artifact-status-cell { display: none; }

  .message-head {
    flex-wrap: wrap;
    row-gap: 3px;
  }
  .message-head strong { line-height: 1.25; }

  .page-title h1 { line-height: 1.08; }
  .card-title { line-height: 1.17; }
  .current-level-card h3 { line-height: 1.15; }
}

@media (max-width: 360px) {
  .detail-head {
    grid-template-columns: 40px minmax(0,1fr) 40px;
    gap: 10px;
  }
  .detail-head .doc-icon { width: 40px; height: 40px; }
  .detail-head h2 { font-size: 19px; }
  .setting-row .btn { min-width: 88px; padding-inline: 9px; }
}