/* Lihasatlas studio: workspace chrome, a lime accent and a specimen stage. */
html:root {
  color-scheme: dark;
  --atlas-ink: #f6f5ee;
  --atlas-muted: #b6b9ac;
  --atlas-border: #3d4136;
  --atlas-surface: #1b1e18;
  --atlas-panel: #25291f;
  --atlas-accent: #d3fc67;
  --atlas-focus: #dcfb87;
  --studio-base: #10120f;
  --studio-on-accent: #1c2510;
  --bg-primary: var(--studio-base);
  --bg-secondary: var(--atlas-surface);
  --bg-tertiary: var(--atlas-panel);
  --bg-hover: #343c29;
  --fg-primary: var(--atlas-ink);
  --fg-secondary: var(--atlas-muted);
  --fg-muted: var(--atlas-muted);
  --accent: var(--atlas-accent);
  --accent-hover: #e7ffa5;
  --accent-dim: #36451f;
  --border: var(--atlas-border);
  --border-hover: #777f64;
  --highlight: #f1fba7;
  --highlight-glow: #d3fc6766;
  --header-height: 60px;
}

div#app {
  grid-template-rows: var(--header-height) auto auto minmax(0, 1fr) auto;
  background: var(--studio-base);
  --accent-hover: #e7ffa5;
}

#app .header {
  height: var(--header-height);
  min-height: 0;
  padding-inline: clamp(8px, 2.4vw, 36px);
  background: var(--studio-base);
  border-bottom-color: var(--atlas-border);
}

.header-left .logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(17px, 2vw, 24px);
  font-weight: 750;
}

.atlas-brand-mark {
  width: .92em;
  aspect-ratio: 1;
  background: var(--atlas-accent);
  clip-path: polygon(34% 0, 100% 0, 66% 100%, 0 100%);
  position: relative;
  flex: none;
}

.atlas-brand-mark::after {
  content: "";
  position: absolute;
  inset: 39% 0;
  transform: rotate(-28deg);
  background: var(--studio-base);
}

#app .header :is(.btn-icon, .lang-select, .search-input) {
  border-radius: 6px;
  min-height: 44px;
}

#app .header .btn-icon { min-width: 36px; }
#app .header .search-input { background: var(--atlas-surface); }

.atlas-intro {
  grid-column: 1 / -1;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: clamp(106px, 18dvh, 190px);
  margin: 12px clamp(8px, 2.4vw, 36px) 0;
  padding: 13px clamp(14px, 3vw, 44px);
  border-radius: 9px 9px 0 0;
  background: #d3fc67;
  color: var(--studio-on-accent);
}

.atlas-intro-copy { position: relative; z-index: 1; }
.atlas-kicker {
  font: 720 10px/1.2 ui-monospace, monospace;
  letter-spacing: .12em;
}

.atlas-intro h1 {
  max-width: 19ch;
  margin: 2px 0 3px;
  font-size: clamp(28px, 5.2vw, 78px);
  font-weight: 850;
  line-height: .99;
  letter-spacing: -.065em;
}

.atlas-intro p {
  max-width: 55ch;
  margin: 6px 0 0;
  font-size: clamp(12px, 1.25vw, 16px);
  line-height: 1.38;
}

.atlas-intro-art {
  position: absolute;
  inset: 0 0 0 47%;
  overflow: hidden;
  background: repeating-linear-gradient(90deg, transparent 0 33px, #19271122 33px 34px),
    repeating-linear-gradient(0deg, transparent 0 33px, #19271122 33px 34px);
  mask-image: linear-gradient(90deg, transparent, black 42%);
  pointer-events: none;
}

.atlas-intro-art::before,
.atlas-intro-art::after {
  content: "";
  position: absolute;
  width: clamp(235px, 32vw, 560px);
  height: 80%;
  right: 2%;
  top: 10%;
  border-radius: 50%;
  transform: rotate(-21deg);
  background: repeating-radial-gradient(ellipse at 59% 47%, #1b270b 0 1.5px, transparent 1.5px 8px);
  mask-image: radial-gradient(ellipse at center, #000 55%, transparent 72%);
}

.atlas-intro-art::after {
  top: 16%;
  right: -9%;
  height: 93%;
  transform: rotate(21deg);
}

.atlas-nav {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 clamp(8px, 2.4vw, 36px) 10px;
  gap: 1px;
  padding: 1px;
  background: var(--atlas-border);
  border-radius: 0 0 9px 9px;
  overflow: hidden;
}

.atlas-nav .atlas-nav-item {
  min-height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 4px;
  border: 0;
  color: var(--atlas-ink);
  background: var(--atlas-surface);
  font: 650 clamp(11px, 1.4vw, 15px)/1.15 Inter, system-ui, sans-serif;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

.atlas-nav-item span {
  color: var(--atlas-muted);
  font: 650 .79em/1 ui-monospace, monospace;
}

.atlas-nav .atlas-nav-item:hover,
.atlas-nav .atlas-nav-item[aria-current="page"] {
  background: var(--atlas-panel);
  color: var(--atlas-accent);
}

#app .atlas-nav-item:focus-visible { outline-offset: -3px; }

#app .main-layout {
  height: auto;
  gap: 10px;
  padding: 0 clamp(8px, 2.4vw, 36px) 10px;
}

@media (min-width: 1025px) {
  #app .main-layout { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
}

#app :is(.sidebar-systems, .viewer-section) {
  overflow: hidden;
  border: 1px solid var(--atlas-border);
  border-radius: 9px;
  background: var(--atlas-surface);
}

#app .sidebar-header h2 {
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--atlas-muted);
}

#app :is(.viewer-controls, .depth-control, .atlas-layer-picker) {
  color: var(--atlas-ink);
  background: var(--atlas-surface);
  border-color: var(--atlas-border);
  border-radius: 7px;
}

#app :is(.viewer-controls .control-btn, .atlas-layer-picker select):hover {
  background: var(--atlas-panel);
}

#app :is(.control-btn.primary, .action-btn.primary) { color: var(--studio-on-accent); }
#app .viewer-controls .control-btn.primary { background: var(--atlas-accent); }

#app .atlas-layer-picker select {
  background: var(--atlas-panel);
  color: var(--atlas-ink);
}

#app :is(.system-group-label:hover, .structure-item:hover, .preset-chip:hover) {
  background: var(--atlas-panel);
  color: var(--atlas-accent);
}

#app #estonianGuide {
  padding: 9px 14px;
  border-color: var(--atlas-border);
  background: var(--atlas-surface);
  color: var(--atlas-ink);
}

#app #estonianGuide :is(p, .etCaution),
.tc-eyebrow { color: var(--atlas-muted); }

#app #estonianGuide button.tc-primary,
#trainingCenter button.tc-primary,
#app .atlas-detail-controls button[aria-pressed="true"] {
  color: var(--studio-on-accent);
  background: var(--atlas-accent);
  border-color: var(--atlas-accent);
}

#app .footer-bar { background: var(--studio-base); }

#trainingCenter, #atlasPain { border-radius: 13px; }
#trainingCenter::backdrop, #atlasPain::backdrop { background: #080a07c4; }
#trainingCenter :is(.tc-header, .tc-tabs) { background: var(--atlas-surface); }
.tc-header h2, .atlas-pain-header h2 { font-weight: 790; letter-spacing: -.04em; }
#trainingCenter .tc-content { background: var(--studio-base); }
#trainingCenter .tc-tabs { border-color: var(--atlas-border); }
#trainingCenter .tc-tabs button { padding-inline: 8px; }
#trainingCenter :is(input, select), #atlasPain input { background: var(--atlas-panel); }
#trainingCenter :is(.tc-day, .tc-chip) { background: var(--atlas-surface); }
.tc-library-tools {
  grid-template-columns: minmax(125px, .8fr) minmax(180px, 1.5fr) minmax(140px, 1fr);
  padding: 12px;
  border: 1px solid var(--atlas-border);
  border-radius: 8px;
  background: var(--atlas-surface);
}

#tcExerciseFilters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#tcLibraryResults { gap: 9px; align-items: start; }
#tcLibraryResults :is(.tc-group, .tc-exercise) {
  padding: 0 12px;
  border: 1px solid var(--atlas-border);
  border-radius: 8px;
  background: var(--atlas-surface);
}
#tcLibraryResults .tc-group { padding-block: 12px; }
#tcLibraryResults .tc-exercise[open] { border-color: var(--border-hover); }
.tc-plan-notes, .tc-dose span, .tc-exercise-top { color: var(--atlas-muted); }
.tc-stage { color: var(--atlas-accent); background: var(--atlas-panel); }
.tc-group .tc-actions button { min-height: 44px !important; }
.tc-search-video { color: #ffd698; }
.tc-video, .tc-anatomy-video { text-underline-offset: .22em; }

@media (max-width: 1024px) {
  #app .main-layout { gap: 0; }
  #app .header.search-open .header-center { margin-inline: 0; }
}

@media (max-width: 600px) {
  html:root { --header-height: 54px; }
  .atlas-intro { min-height: 90px; margin-top: 6px; padding-block: 9px; }
  .atlas-intro p { max-width: 34ch; margin-top: 4px; }
  .atlas-intro-art { inset-inline-start: 63%; opacity: .55; }
  .atlas-nav { margin-bottom: 6px; }
  .atlas-nav .atlas-nav-item { gap: 4px; overflow-wrap: anywhere; }
  .atlas-nav-item span { display: none; }
  #app .main-layout { padding-bottom: 5px; }
  #app .header-right { gap: 3px; }
  #app .header #infoOpen { min-width: 32px; width: 32px; }
  #app #estonianGuide { padding: 7px 9px; }
  #app :is(.sidebar-systems, .viewer-section) { border-radius: 6px; }
  #trainingCenter, #atlasPain { border-radius: 0; }
  #trainingCenter .tc-tabs button { padding-inline: 3px; }
  .tc-library-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tc-library-tools:has(#tcLibrarySearch) label:has(#tcLibrarySearch) {
    grid-row: 1;
    grid-column: 1 / -1;
  }
}

@media (max-height: 560px) {
  .atlas-intro { min-height: 0; padding-block: 6px; margin-top: 5px; }
  .atlas-intro h1 { font-size: clamp(25px, 5dvh, 36px); }
  .atlas-intro :is(.atlas-kicker, p) { display: none; }
  .atlas-nav { margin-bottom: 5px; }
}

@media print {
  html:root {
    color-scheme: light;
    --studio-base: white;
    --atlas-surface: white;
    --atlas-panel: #f4f4ef;
    --atlas-ink: #151713;
    --atlas-muted: #373b32;
    --atlas-border: #bcbfb5;
    --atlas-accent: #345b18;
  }
  #trainingCenter { border: 0; box-shadow: none; }
  .tc-search-video { color: #534014; }
}