/* Atlas interface — neutral surfaces, one action colour, readable controls. */
:root {
  --atlas-ink: #172233;
  --atlas-muted: #526174;
  --atlas-border: #d6dde6;
  --atlas-surface: #fff;
  --atlas-panel: #f4f6f9;
  --atlas-accent: #224c86;
  --atlas-focus: #155bb6;
}
#app {
  --accent: var(--atlas-accent);
  background: var(--atlas-panel);
  color: var(--atlas-ink);
}
.header {
  background: var(--atlas-surface);
  border-bottom: 1px solid var(--atlas-border);
  box-shadow: none;
  min-height: 60px;
}
.header-left .logo {
  color: var(--atlas-ink);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.035em;
  white-space: nowrap;
}
.header .search-input {
  color: var(--atlas-ink);
  background: var(--atlas-panel);
  border: 1px solid var(--atlas-border);
  border-radius: 5px;
}
.header .search-input::placeholder { color: var(--atlas-muted); opacity: 1; }
.header .btn-icon, .header .lang-select {
  color: var(--atlas-ink);
  background: var(--atlas-surface);
  border-color: var(--atlas-border);
  border-radius: 5px;
}
.sidebar { background: var(--atlas-surface); color: var(--atlas-ink); border-color: var(--atlas-border); }
.sidebar-header { border-color: var(--atlas-border); background: var(--atlas-surface); }
.sidebar-header h2 { font-size: 14px; font-weight: 650; text-transform: none; letter-spacing: 0; color: var(--atlas-ink); }
.system-group { position: relative; border-bottom: 1px solid var(--atlas-border); }
.system-group-label { padding-right: 44px; border-radius: 0; min-height: 44px; }
.system-group-label:hover { background: var(--atlas-panel); }
.system-group-label .system-icon { display: none; }
.system-group-label .system-count { background: transparent; color: var(--atlas-muted); }
.atlas-parts-toggle {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--atlas-muted);
  cursor: pointer;
}
.atlas-parts-toggle:hover { background: var(--atlas-panel); }
.atlas-parts-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.system-group:has([data-system-checkbox]:not(:checked):not(:indeterminate)) .atlas-parts-toggle { visibility: hidden; }
.atlas-parts-closed .system-group-content { display: none !important; }
.preset-row { border-color: var(--atlas-border); }
.preset-chip { background: transparent; color: var(--atlas-accent); border-color: var(--atlas-border); border-radius: 4px; }
.viewer-controls {
  background: #f9fafc;
  border: 1px solid var(--atlas-border);
  border-radius: 6px;
  box-shadow: none;
  gap: 2px;
}
.viewer-controls .control-btn {
  background: transparent;
  color: var(--atlas-ink);
  border-color: transparent;
  border-radius: 4px;
  min-height: 38px;
}
.viewer-controls .control-btn:hover { background: #e7edf5; }
.depth-control, .atlas-layer-picker { background: #f9fafc; color: var(--atlas-ink); border-color: var(--atlas-border); border-radius: 6px; box-shadow: none; }
.atlas-layer-picker select { color: var(--atlas-ink); border-color: var(--atlas-border); }

#estonianGuide {
  background: var(--atlas-surface);
  color: var(--atlas-ink);
  border-color: var(--atlas-border);
  padding: 10px 16px;
}
#estonianGuide .etSummary { align-items: center; flex-direction: row; gap: 10px; }
#estonianGuide h3 { margin: 0; font-size: 15px; line-height: 1.35; }
#estonianGuide [hidden] { display: none !important; }
#estonianGuide p { color: var(--atlas-muted); }
#estonianGuide .tc-actions { flex-shrink: 0; }
#estonianGuide button, #trainingCenter button, .tc-header-button {
  background: var(--atlas-surface);
  border-color: var(--atlas-border);
  border-radius: 5px;
  color: var(--atlas-ink);
  font-weight: 600;
}
#estonianGuide button.tc-primary, #trainingCenter button.tc-primary, .tc-header-button {
  color: white;
  background: var(--atlas-accent);
  border-color: var(--atlas-accent);
}
.tc-header-button { min-height: 40px; font-size: 13px; padding: 8px 13px; }
#app :focus-visible, #trainingCenter :focus-visible { outline: 2px solid var(--atlas-focus); outline-offset: 2px; }

#trainingCenter {
  --atlas-rule: 1px solid var(--atlas-border);
  background: var(--atlas-surface);
  color: var(--atlas-ink);
  border: var(--atlas-rule);
  border-radius: 8px;
  box-shadow: 0 16px 55px #0b172a32;
}
#trainingCenter::backdrop { background: #121c2a91; backdrop-filter: none; }
.tc-header { padding-bottom: 12px; }
.tc-header h2 { margin: 0; font-size: 24px; letter-spacing: -.025em; }
.tc-header #tcClose { color: var(--atlas-ink); background: var(--atlas-panel); border-radius: 5px; }
.tc-tabs { gap: 14px; padding-bottom: 0; border-color: var(--atlas-border); }
#trainingCenter .tc-tabs button { color: var(--atlas-muted); padding-inline: 3px; }
#trainingCenter .tc-tabs button[aria-selected="true"] { color: var(--atlas-accent); border-bottom-color: var(--atlas-accent); }
.tc-content h3 { font-weight: 680; letter-spacing: -.02em; }
.tc-card-heading { margin-bottom: 20px; }
.tc-card-heading .tc-group-name, .tc-small, .tc-empty p, .tc-video-source, .tc-footer { color: var(--atlas-muted); }
.tc-notice { background: var(--atlas-panel); border-left-color: var(--atlas-accent); border-radius: 0; }
.tc-exercise-grid { display: block; border-top: var(--atlas-rule); }
.tc-exercise {
  display: block;
  border: 0;
  border-bottom: var(--atlas-rule);
  border-radius: 0;
  background: transparent;
  padding: 0;
}
.tc-exercise summary {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 13px 2px;
  cursor: pointer;
  list-style: none;
}
.tc-exercise summary::-webkit-details-marker { display: none; }
.tc-exercise summary::after { content: '+'; color: var(--atlas-accent); font-size: 20px; line-height: 1; }
.tc-exercise[open] summary::after { content: '−'; }
.tc-exercise h4 { margin: 0; color: var(--atlas-ink); }
.tc-exercise .tc-dose { display: block; color: var(--atlas-muted); font-size: 13px; font-weight: 500; margin: 3px 0 0; }
.tc-exercise-body { padding: 0 14px 15px 2px; max-width: 68ch; }
.tc-exercise ol { font-size: 14px; }
.tc-easier { background: var(--atlas-panel); color: var(--atlas-ink); border-radius: 3px; }
.tc-video, .tc-anatomy-video, .tc-footer a { color: var(--atlas-accent); }
.tc-video { display: inline-block; min-height: 36px; }
.tc-video-source { font-size: 12px; }
.tc-library-grid { display: grid; gap: 0 26px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.tc-group { border: 0; border-top: var(--atlas-rule); border-radius: 0; padding: 14px 0; }
.tc-group .tc-actions { padding-top: 2px; }
.tc-group .tc-actions button { font-size: 13px !important; }
#trainingCenter label { color: var(--atlas-ink); font-size: 13px; }
#trainingCenter input, #trainingCenter select { border-radius: 5px; border-color: var(--atlas-border); color: var(--atlas-ink); }
.tc-day, .tc-plan-heading, .tc-footer { border-color: var(--atlas-border); }
.tc-day { border-radius: 5px; }
.tc-day > summary, .tc-status { background: var(--atlas-panel); color: var(--atlas-ink); }
.tc-status:empty { display: none; }
.tc-footer { margin-top: 24px; }
.tc-footer summary { min-height: 32px; }

@media (max-width: 600px) {
  .header { min-height: 54px; }
  .header-left .logo { font-size: 17px; }
  .header .btn-icon, .header .lang-select { min-height: 36px; }
  .header .header-right { gap: 4px; }
  .tc-header-button { min-height: 36px; padding-inline: 8px; font-size: 12px; }
  #estonianGuide { padding: 8px 10px; }
  #estonianGuide h3 { font-size: 14px; }
  #estonianGuide button { min-height: 44px; font-size: 13px; }
  #estonianGuide #etAdd { display: none; }
  #estonianGuide .etSummary { flex-wrap: wrap; }
  #estonianGuide .tc-actions { max-width: 100%; }
  #trainingCenter { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; }
  .tc-header { padding-top: max(14px, env(safe-area-inset-top)); }
  .tc-header h2 { font-size: 21px; }
  .tc-tabs { gap: 8px; padding-inline: 15px; justify-content: flex-start; }
  #trainingCenter .tc-tabs button { font-size: 13px; min-height: 44px; }
  .tc-library-grid { grid-template-columns: 1fr; }
  .tc-content { padding-bottom: max(22px, env(safe-area-inset-bottom)); }
}
@media print {
  #trainingCenter { border: 0; box-shadow: none; }
  .tc-exercise summary::after { display: none; }
}

.atlas-detail-controls {
  position: absolute;
  z-index: 4;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
}
.atlas-detail-controls button {
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--atlas-border);
  border-radius: 5px;
  background: var(--atlas-surface);
  color: var(--atlas-ink);
  font: 600 13px/1.2 Inter, system-ui, sans-serif;
  cursor: pointer;
}
.atlas-detail-controls button[aria-pressed="true"] {
  background: var(--atlas-accent);
  border-color: var(--atlas-accent);
  color: white;
}
.viewer-container:has(.atlas-detail-controls) .atlas-layer-picker { top: 58px; }

.tc-learning {
  margin: 12px 0 18px;
  padding: 0 12px;
  border: 1px solid var(--atlas-border);
  border-radius: 5px;
  background: var(--atlas-panel);
}
.tc-learning summary, .atlas-pain-safety summary {
  padding: 11px 0;
  min-height: 44px;
  color: var(--atlas-accent);
  cursor: pointer;
  font-weight: 650;
}
.tc-learning p { max-width: 67ch; }
.tc-learning .tc-actions { margin: 12px 0; }
.tc-references { padding-left: 19px; margin: 12px 0 14px; }
.tc-references a, #atlasPain a { color: var(--atlas-accent); text-decoration: underline; }
#atlasPain {
  width: min(700px, calc(100vw - 32px));
  max-width: none;
  max-height: min(88dvh, 800px);
  padding: 0;
  margin: auto;
  background: var(--atlas-surface);
  color: var(--atlas-ink);
  border: 1px solid var(--atlas-border);
  border-radius: 8px;
  font: 15px/1.55 Inter, system-ui, sans-serif;
}
#atlasPain::backdrop { background: #121c2a91; }
.atlas-pain-header {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  background: var(--atlas-surface);
  border-bottom: 1px solid var(--atlas-border);
  z-index: 1;
}
.atlas-pain-header h2 { margin: 0; font-size: 22px; }
.atlas-pain-content { padding: 14px 18px; }
.atlas-pain-intro { margin: 0 0 9px; }
.atlas-pain-help { display: flex; gap: 8px 18px; flex-wrap: wrap; margin: 0 0 12px; font-weight: 650; }
.atlas-pain-help a { display: inline-flex; align-items: center; min-height: 36px; }
#atlasPain label { display: block; font-weight: 650; font-size: 14px; }
#atlasPain input, #atlasPain button {
  min-height: 44px;
  padding: 8px 12px;
  background: var(--atlas-surface);
  color: var(--atlas-ink);
  border: 1px solid var(--atlas-border);
  border-radius: 5px;
  font: inherit;
}
#atlasPain input { width: 100%; margin-top: 4px; font-size: 16px; }
#atlasPain button { cursor: pointer; text-align: left; }
#atlasPain button:hover, #atlasPain button[aria-pressed="true"] { background: var(--atlas-panel); border-color: var(--atlas-accent); }
#atlasPain :focus-visible { outline: 2px solid var(--atlas-focus); outline-offset: 2px; }
#atlasPainClose { min-width: 44px; font-size: 20px !important; text-align: center !important; }
#atlasPainStatus:empty { display: none; }
.atlas-pain-regions { display: grid; gap: 7px; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 12px 0; }
.atlas-pain-result:not(:empty) { border-top: 1px solid var(--atlas-border); margin-top: 16px; padding-top: 12px; }
.atlas-pain-result h3 { margin: 0; font-size: 19px; scroll-margin-top: 72px; }
.atlas-pain-result p { margin: 8px 0; }
.atlas-pain-alert { padding: 8px 10px; background: #fff2ed; border-left: 3px solid #a33827; color: #591d14; }
.atlas-pain-safety { border-top: 1px solid var(--atlas-border); }
#estonianGuide .tc-actions { flex-wrap: wrap; }
@media(max-width:600px) {
  #atlasPain { width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .atlas-pain-header { padding-top: max(12px, env(safe-area-inset-top)); }
  .atlas-pain-content { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
}

.tc-muscle-profile {
  margin: 16px 0 20px;
  border: 1px solid var(--atlas-border);
  border-radius: 6px;
  padding: 14px 16px;
}
.tc-muscle-profile h4 { margin: 12px 0 6px; font-size: 18px; letter-spacing: -.01em; }
.tc-muscle-choice { max-width: 440px; }
.tc-muscle-roles { margin: 0; }
.tc-muscle-roles > div { padding: 10px 0; border-top: 1px solid var(--atlas-border); }
.tc-muscle-roles dt { font-weight: 680; color: var(--atlas-ink); }
.tc-muscle-roles dd { margin: 4px 0 0; color: var(--atlas-muted); max-width: 68ch; }
.tc-muscle-sources summary { min-height: 40px; padding: 9px 0; cursor: pointer; color: var(--atlas-accent); font-weight: 650; }
@media(max-width: 600px) {
 .tc-muscle-profile { padding: 10px 12px; }
}