/* Quality and accessibility corrections — Premium Noir QA pass */
:where(button,a,input,textarea,select,[tabindex]):focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: 3px;
}

button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .52;
  transform: none !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  z-index: 500;
  top: 10px;
  left: 10px;
  transform: translateY(-150%);
  padding: 10px 14px;
  border-radius: 7px;
  color: #171109;
  background: var(--gold-300);
  font-weight: 700;
}
.skip-link:focus { transform: none; }

.shell > *,
.page > *,
.grid > *,
.dashboard-top > *,
.dashboard-bottom > *,
.levels-layout > *,
.level-page-layout > *,
.analysis-grid > *,
.artifacts-layout > *,
.dossier-main > *,
.ai-layout > *,
.settings-layout > * { min-width: 0; }

/* Stable sizing across desktop monitors and browser zoom levels. */
html,
body,
#app,
.app-root,
.shell,
.main,
.page { min-width: 0; max-width: 100%; }

body { overflow-x: clip; }

/* CSS now lives under styles/, so asset URLs need one level up. */
.sidebar:after { background-image: url('../../assets/illustrations/staircase-sidebar.webp'); }
.route-hero:before,
.level-hero:after,
.dossier-top .hero-king { background-image: url('../../assets/illustrations/chess-king-hero.webp'); }
.route-hero:after,
.book-preview:before { background-image: url('../../assets/vectors/orbital-grid.svg'); }
.dossier-card:after { background-image: url('../../assets/illustrations/dossier-book-blank.webp'); }
.mentor-card:after { background-image: url('../../assets/vectors/ai-sigil.svg'); }
.message.ai:after { background-image: url('../../assets/vectors/constellation-mesh.svg'); }
.plan-card:after { background-image: url('../../assets/vectors/premium-crown.svg'); }
.dashboard-dossier-card::before { background-image: url('../../assets/vectors/orbital-grid.svg'); }
.prologue-level-layout .prologue-hero::before { background-image: url('../../assets/levels/prologue-investigation-still.webp'); }

img,
svg,
video,
canvas { max-width: 100%; }

.page-header,
.section-head,
.toolbar,
.materials-toolbar,
.prologue-strip { min-width: 0; }

.page-title,
.page-title h1,
.page-title p,
.section-head h2,
.section-head p { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 1180px) and (min-width: 981px) {
  .page-header { align-items: flex-start; }
  .page-title { max-width: 58%; }
  .header-actions { max-width: 42%; }
  .level-cards { grid-template-columns: repeat(4, minmax(150px, 1fr)); }
}

.profile-button {
  width: 100%;
  color: var(--text-primary);
  text-align: left;
}

.sidebar-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 35;
  border: 0;
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(2px);
}

.link-button {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.compact-icon {
  width: 40px;
  height: 40px;
}

.compact-select { width: 170px; }
.chart-select { width: 170px; height: 36px; padding: 0 34px 0 11px; }

.level-row {
  width: 100%;
  color: var(--text-primary);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.level-row:not(:disabled):hover {
  border-color: rgba(236,185,78,.48);
  background: linear-gradient(90deg,#10171c,#0b1115);
}
.level-row-title {
  font: 500 19px/1.1 var(--serif);
  display: block;
}
.level-row:disabled .row-arrow { opacity: .25; }

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 12px;
}
.breadcrumb-back {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}

.field-label small {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 9px;
}

.mentor-percent { font-size: 10px; }
.mentor-progress-title { color: var(--text-primary) !important; }
.mentor-progress-copy { font-size: 11px; }
.mentor-progress-copy strong {
  color: var(--text-primary);
  font: 500 20px var(--serif);
}
.mentor-next { white-space: normal; line-height: 1.25; }

.analysis-question-intro { font-size: 11px; line-height: 1.5; }

.artifact-dashboard-card {
  display: flex;
  flex-direction: column;
}
.artifact-dashboard-card .artifact-list { flex: 1; min-height: 0; }
.artifact-footer-link { margin-top: auto; padding-top: 8px; }
.artifact-count { margin-top: 15px; font-size: 10px; }
.artifact-sort { width: 220px; }
.empty-detail {
  min-height: 430px;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 10px;
}
.empty-detail .metric-icon { margin: 0 auto; }
.export-section { border-bottom: 0 !important; }

.empty-state,
.error-state {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
  min-height: 300px;
  padding: 42px;
  text-align: center;
}
.empty-state.compact { min-height: 250px; border: 0; background: transparent; }
.empty-state h2,
.error-state h1 { margin: 0; font: 500 25px var(--serif); }
.empty-state p,
.error-state p { max-width: 560px; margin: 0; color: var(--text-secondary); line-height: 1.55; }
.fatal-error { min-height: 100dvh; display: grid; place-items: center; padding: 20px; }

.activity-list {
  padding-left: 16px;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.65;
}

.ai-main { min-width: 0; }
.tabs {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.tab { flex: 0 0 auto; }
.ai-tab-panel {
  min-height: 360px;
  margin-top: 14px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 14px;
}
.ai-tab-panel h2 { margin: 0; font: 500 28px var(--serif); }
.ai-tab-panel p { max-width: 760px; margin: 0; color: var(--text-secondary); line-height: 1.65; }
.composer-tools button {
  min-height: 34px;
  border: 0;
  padding: 0;
  color: var(--text-secondary);
  background: transparent;
  font-size: 9px;
}
.role-row {
  width: 100%;
  border: 0;
  color: var(--text-primary);
  background: transparent;
  text-align: left;
}
.role-row small {
  display: block;
  color: var(--text-muted);
  font-size: 9px;
}

.dossier-label { font-size: 11px; }
.dossier-updated { display: block; margin-top: 17px; font-size: 9px; }
.dossier-status-copy,
.dossier-card-copy { font-size: 10px; }
.checklist-icon { width: 20px !important; height: 20px !important; }
.dossier-check-button { margin-top: 20px; }
.book-preview-title { position: absolute; left: 20px; top: 16px; }
.dossier-build { margin-top: 14px; }
.priority-copy { font-size: 10px; line-height: 1.55; }
.priority-list { font-size: 10px; line-height: 1.65; padding-left: 17px; }
.priority-columns { margin-top: 16px; }
.priority-period { font: 500 18px var(--serif); }

.select-button,
.security-row,
.integration {
  width: 100%;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  color: var(--text-secondary);
  background: transparent;
  text-align: left;
}
.select-button:hover,
.security-row:hover,
.integration:hover { color: var(--text-primary); background: rgba(255,255,255,.02); }
.select-inline {
  min-height: 36px;
  border: 0;
  color: var(--text-primary);
  background: transparent;
}
.large-avatar { width: 100px !important; height: 100px !important; }
.ai-settings-grid { margin-top: 15px; }
.ai-setting-label { display: grid; gap: 7px; font-size: 10px; }
.plan-current { margin-top: 15px; font-size: 10px; }
.plan-name { margin: 5px 0; font: 500 27px var(--serif); }
.integrations-list { margin-top: 16px; }
.integrations-link { margin-top: 15px; }

.modal-backdrop { overflow-y: auto; align-items: center; }
.modal {
  position: relative;
  max-height: min(760px, calc(100dvh - 32px));
  overflow-y: auto;
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
}
.modal h2 { padding-right: 48px; }
.form-grid textarea {
  min-height: 96px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-input);
  color: var(--text-primary);
  padding: 12px;
  outline: none;
}
.form-error {
  border: 1px solid rgba(217,90,80,.55);
  border-radius: 7px;
  padding: 10px 12px;
  color: #ef9d96;
  background: rgba(217,90,80,.08);
  font-size: 11px;
}
.modal-actions.stacked { display: grid; grid-template-columns: 1fr; }
.notification-list,
.plan-modal-grid { display: grid; gap: 10px; margin: 18px 0; }
.notification-list > div,
.plan-modal-grid > section {
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 12px;
}
.notification-list strong,
.notification-list span { display: block; }
.notification-list span { margin-top: 4px; color: var(--text-muted); font-size: 10px; }
.plan-modal-grid h3 { margin: 0 0 5px; color: var(--gold-300); font: 500 18px var(--serif); }
.plan-modal-grid p { margin: 0; }

.toast.error-toast { border-color: rgba(217,90,80,.68); }

@media (min-width: 1281px) {
  .dashboard-bottom .artifact-small {
    min-height: 39px;
    padding: 4px 5px;
  }
  .dashboard-bottom .artifact-small strong { font-size: 10px; line-height: 1.15; }
  .dashboard-bottom .artifact-small span { font-size: 8px; }
  .dashboard-bottom .artifact-footer-link { min-height: 28px; }
}

@media (max-width: 980px) {
  .sidebar {
    visibility: hidden;
    pointer-events: none;
  }
  .sidebar.open {
    visibility: visible;
    pointer-events: auto;
  }
  .sidebar-scrim { display: block; }
  .header-bell { display: none; }
  .compact-select { width: min(100%, 210px); }
  .level-content,
  .ai-main,
  .practice-card,
  .mentor-card { min-width: 0; }
}

@media (max-width: 680px) {
  .main { width: 100%; }
  .page-header,
  .header-actions { min-width: 0; }
  .header-actions { width: 100%; }
  .header-actions > * { max-width: 100%; }
  .search-wrap .search-input { min-width: 0; }
  .btn,
  .btn-sm,
  .icon-btn,
  .filter-chip,
  .quick-prompts button,
  .tab,
  .mini-action { min-height: 44px; }
  .icon-btn { min-width: 44px; }
  .compact-icon { width: 44px; height: 44px; }
  .link-button { min-height: 44px; padding: 8px 0; }
  .level-carousel .section-head { align-items: stretch; }
  .level-carousel .section-head .btn { width: 100%; }
  .level-actions { width: 100%; }
  .level-actions .btn { width: 100%; min-width: 0; white-space: normal; }
  .practice-card { padding: 17px; }
  .practice-row { min-width: 0; }
  .field-control,
  .field-control input { min-width: 0; }
  .mentor-card { min-height: 0; }
  .mentor-card .ring-wrap { display: grid; grid-template-columns: 1fr; justify-items: center; }
  .mentor-progress-copy { text-align: center; }
  .tabs { gap: 12px; width: 100%; }
  .tab { padding: 0 12px; }
  .message { grid-template-columns: 40px minmax(0,1fr); padding: 12px; gap: 10px; }
  .ai-actions { min-width: 0; }
  .ai-action-card { min-width: 0; }
  .quick-prompts { display: grid; grid-template-columns: 1fr; }
  .quick-prompts button { width: 100%; text-align: left; }
  .composer-tools { display: grid; grid-template-columns: 1fr; gap: 2px; }
  .composer-tools button { min-height: 38px; text-align: left; }
  .composer-footer .btn { width: 100%; }
  .toolbar { align-items: stretch; }
  .toolbar > * { width: 100% !important; }
  .filters { gap: 8px; }
  .filter-chip { height: 44px; }
  .artifact-table-row { min-width: 0; }
  .artifact-name { min-width: 0; }
  .artifact-name strong,
  .artifact-name span { overflow-wrap: anywhere; }
  .artifact-detail { padding: 16px; }
  .detail-head { grid-template-columns: 38px minmax(0,1fr) 44px; }
  .detail-head h2 { font-size: 20px; overflow-wrap: anywhere; }
  .export-section .grid { grid-template-columns: 1fr; }
  .book-preview-title { position: static; margin-bottom: 10px; }
  .dossier-top .progress-ring { margin: 0 auto; }
  .priority-columns { grid-template-columns: 1fr; }
  .settings-avatar { padding-top: 10px; }
  .toggle { width: 44px; height: 28px; }
  .toggle:before { width: 20px; height: 20px; top: 4px; left: 4px; }
  .toggle.on:before { left: 20px; }
  .select-row { min-height: 52px; }
  .modal-actions { display: grid; grid-template-columns: 1fr; }
  .modal-actions .btn { width: 100%; }
  .toast { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
}

@media (max-width: 360px) {
  .main { padding: 10px; }
  .mobile-topbar { padding-inline: 10px; }
  .mobile-topbar img { max-width: 160px; }
  .page-title h1 { font-size: 28px; overflow-wrap: anywhere; }
  .card { padding: 16px; }
  .route-copy { max-width: 100%; }
  .route-hero:before { width: 48%; opacity: .35; }
  .level-hero h1 { font-size: 30px; }
  .breadcrumbs > span { min-width: 0; overflow-wrap: anywhere; }
  .field-label { grid-template-columns: 36px minmax(0,1fr); }
  .field-label .doc-icon { width: 36px; height: 36px; }
  .field-control input { padding-right: 48px; }
  .analysis-hero { padding: 16px; }
  .artifact-table-row { padding-inline: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .sidebar,
  .mobile-topbar,
  .page-header,
  .header-actions,
  .btn,
  .icon-btn,
  .sidebar-scrim { display: none !important; }
  .shell { display: block; }
  .main { padding: 0; }
  body { background: #fff; color: #111; }
  .card { break-inside: avoid; border-color: #aaa; background: #fff; color: #111; }
}

/* Финальные корректировки touch-target и фокуса */
@media (max-width: 680px) {
  .composer-tools button,
  .select-inline,
  .select-control,
  .select-button,
  .toggle {
    min-height: 44px;
  }
  .toggle {
    width: 52px;
    height: 44px;
    background: transparent;
  }
  .toggle::after {
    content: "";
    position: absolute;
    inset: 8px 4px;
    border-radius: 20px;
    background: #3a4145;
    z-index: 0;
  }
  .toggle.on::after { background: linear-gradient(90deg,#b27725,#e8bb5e); }
  .toggle::before {
    z-index: 1;
    width: 20px;
    height: 20px;
    top: 12px;
    left: 8px;
  }
  .toggle.on::before { left: 24px; }
}
