/* LAKANA SSI Structural Model Workbench. Chromatic Lock v3.2 only. */
:root {
  --ssi-stack-navy: #071827;
  --ssi-stack-component: #102C49;
  --ssi-stack-slate: #365B7F;
  --ssi-stack-ink: #081923;
  --ssi-stack-veil: #091D26;
  --ssi-stack-teal: #00877D;
  --ssi-stack-gold: #C98A00;
  --ssi-stack-iris: #692DF7;
  --ssi-stack-edge: #00A996;
  --ssi-stack-red: #910056;
  --ssi-stack-core: #930023;
  --ssi-stack-paper: #F3F6F8;
  --ssi-stack-pale: #E6EEF3;
  --ssi-stack-white: #FFFFFF;
}

.ssi-primary-5d-shell {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid rgba(0, 169, 150, 0.28);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 0%, rgba(0, 169, 150, 0.10), transparent 34%),
    linear-gradient(180deg, rgba(7, 24, 39, 0.96), rgba(9, 29, 38, 0.98));
  color: var(--ssi-stack-pale);
  box-shadow: 0 20px 52px rgba(7, 24, 39, 0.18);
}

.ssi-primary-5d-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.ssi-primary-5d-head h2,
.ssi-stack-header h2 {
  margin: 2px 0 4px;
  color: var(--ssi-stack-white);
  font-size: clamp(1.05rem, 1.5vw, 1.45rem);
  line-height: 1.1;
}

.ssi-primary-5d-head p,
.ssi-stack-header p {
  max-width: 86ch;
  margin: 0;
  color: rgba(243, 246, 248, 0.74);
  font-size: 0.8rem;
  line-height: 1.45;
}

.ssi-primary-5d-status {
  justify-self: end;
  border: 1px solid rgba(201, 138, 0, 0.42);
  border-radius: 999px;
  background: rgba(8, 25, 35, 0.74);
  color: var(--ssi-stack-pale);
  padding: 8px 11px;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ssi-primary-5d-control-slot {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.ssi-primary-5d-stage {
  min-width: 0;
}

.ssi-primary-5d-stage #ssiApex4dRoot {
  margin: 0;
}

.ssi-unified-stack,
.ssi-structural-workbench {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(54, 91, 127, 0.34);
  border-radius: 18px;
  background:
    linear-gradient(rgba(54, 91, 127, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 91, 127, 0.12) 1px, transparent 1px),
    radial-gradient(circle at 48% 4%, rgba(0, 169, 150, 0.12), transparent 34%),
    linear-gradient(180deg, var(--ssi-stack-navy), var(--ssi-stack-veil));
  background-size: 34px 34px, 34px 34px, auto, auto;
  box-shadow: 0 24px 58px rgba(7, 24, 39, 0.2);
  color: var(--ssi-stack-pale);
}

.ssi-stack-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 4px 2px 2px;
}

.ssi-stack-kicker {
  display: block;
  color: var(--ssi-stack-edge);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.ssi-stack-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: stretch;
}

.ssi-stack-tab {
  border: 1px solid rgba(0, 169, 150, 0.28);
  border-radius: 16px;
  background: rgba(8, 25, 35, 0.72);
  color: var(--ssi-stack-pale);
  cursor: pointer;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 900;
  min-height: 48px;
  padding: 8px 10px;
  text-align: left;
  display: grid;
  gap: 2px;
  min-width: 126px;
}

.ssi-stack-tab small {
  display: block;
  color: rgba(243, 246, 248, 0.62);
  font-size: 0.58rem;
  font-weight: 800;
}

.ssi-stack-tab:hover,
.ssi-stack-tab:focus {
  outline: 2px solid rgba(0, 169, 150, 0.46);
  outline-offset: 2px;
}

.ssi-stack-tab[aria-selected="true"] {
  background: linear-gradient(135deg, var(--ssi-stack-teal), rgba(0, 169, 150, .88));
  border-color: var(--ssi-stack-edge);
  color: var(--ssi-stack-white);
}

.ssi-stack-tab[aria-selected="true"] small {
  color: rgba(255,255,255,.82);
}

.ssi-stack-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ssi-stack-chip {
  border: 1px solid rgba(230, 238, 243, 0.12);
  border-radius: 10px;
  background: rgba(8, 25, 35, 0.58);
  padding: 8px 9px;
  min-width: 0;
}

.ssi-stack-chip span {
  display: block;
  color: rgba(243, 246, 248, 0.62);
  font-size: 0.6rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ssi-stack-chip b {
  display: block;
  margin-top: 3px;
  color: var(--ssi-stack-white);
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

#ssiUnifiedModelStack .ssi-stack-lens {
  margin: 0;
  min-width: 0;
}

#ssiUnifiedModelStack .ssi-stack-lens[hidden] {
  display: none !important;
}

#ssi5Tabs[data-ssi-legacy-tabs-disabled="true"],
#ssiWorkbenchLegacyParking,
.ssi-elite-modes[hidden] {
  display: none !important;
}

.ssi-workbench-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 330px);
  gap: 12px;
  align-items: stretch;
  min-width: 0;
}

.ssi-workbench-viewer {
  display: grid;
  gap: 12px;
  min-width: 0;
  min-height: clamp(520px, 64vh, 840px);
  overflow: auto;
  position: relative;
  contain: layout paint;
  overscroll-behavior: contain;
}

.ssi-workbench-viewer > * {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.ssi-workbench-side,
.ssi-workbench-bottom {
  border: 1px solid rgba(230, 238, 243, 0.14);
  border-radius: 14px;
  background:
    radial-gradient(circle at 16% 0%, rgba(0, 169, 150, 0.10), transparent 34%),
    rgba(8, 25, 35, 0.72);
  color: var(--ssi-stack-pale);
  min-width: 0;
}

.ssi-workbench-side {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 12px;
}

.ssi-workbench-side h3 {
  margin: 0 0 4px;
  color: var(--ssi-stack-white);
  font-size: .9rem;
}

.ssi-workbench-side > div,
.ssi-workbench-bottom > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 1px solid rgba(230, 238, 243, 0.10);
  border-radius: 10px;
  background: rgba(7, 24, 39, 0.42);
  padding: 8px 9px;
}

.ssi-workbench-side span,
.ssi-workbench-bottom span {
  color: rgba(230, 238, 243, 0.66);
  font-size: .6rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ssi-workbench-side b,
.ssi-workbench-bottom b {
  color: var(--ssi-stack-white);
  font-size: .7rem;
  overflow-wrap: anywhere;
}

.ssi-workbench-side-bars {
  display: grid;
  gap: 8px;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

.ssi-workbench-bottom {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}

.ssi-workbench-playrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.ssi-workbench-playrow button {
  border: 1px solid rgba(0, 135, 125, .38);
  border-radius: 999px;
  background: #00877D;
  color: #FFFFFF;
  cursor: pointer;
  font: inherit;
  font-size: .72rem;
  font-weight: 900;
  padding: 7px 12px;
}

.ssi-workbench-playrow span {
  color: #365B7F;
  font-size: .7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ssi-workbench-gait-shell,
.ssi-workbench-field,
.ssi-workbench-joint {
  width: 100%;
  max-width: 560px;
  margin: 0 auto 10px;
}

.ssi-workbench-blueprint strong {
  position: absolute;
  left: 12px;
  top: 10px;
  color: #081923;
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
}

#ssiUnifiedModelStack #ssiBiomechStackSlot,
#ssiUnifiedModelStack #ssiEliteModelLab,
#ssiUnifiedModelStack #ssiApexObservatory,
#ssiUnifiedModelStack #ssiRunNarrative,
#ssiUnifiedModelStack #ssiAutonomicMonitor,
#ssiUnifiedModelStack #ssi5Viewport,
#ssiUnifiedModelStack #ssiCoachDashboard,
#ssiUnifiedModelStack #ssiEvidenceObservatory,
#ssiUnifiedModelStack .ssi-generated-workbench-view {
  scroll-margin-top: 96px;
}

#ssiUnifiedModelStack #ssiBiomechStackSlot:not([hidden]),
#ssiUnifiedModelStack #ssiEliteModelLab:not([hidden]),
#ssiUnifiedModelStack #ssiApexObservatory:not([hidden]),
#ssiUnifiedModelStack #ssiRunNarrative:not([hidden]),
#ssiUnifiedModelStack #ssiAutonomicMonitor:not([hidden]),
#ssiUnifiedModelStack #ssi5Viewport:not([hidden]),
#ssiUnifiedModelStack #ssiCoachDashboard:not([hidden]),
#ssiUnifiedModelStack #ssiEvidenceObservatory:not([hidden]),
#ssiUnifiedModelStack .ssi-generated-workbench-view:not([hidden]) {
  min-height: clamp(420px, 58vh, 760px);
}

#ssiUnifiedModelStack #ssiCoachDashboard,
#ssiUnifiedModelStack #ssiEvidenceObservatory {
  display: grid;
  gap: 14px;
  margin: 0;
}

#ssiUnifiedModelStack .ssi-biomech-shell {
  margin: 0;
  border-radius: 14px;
  box-shadow: none;
}

#ssiWorkbenchViewer #ssiBiomechStackSlot:not([hidden]),
#ssiWorkbenchViewer #ssiStructuralBiomechMode:not([hidden]),
#ssiWorkbenchViewer .ssi-structural-biomech-mode:not([hidden]),
#ssiWorkbenchViewer .lakana-biomech-root:not([hidden]),
#ssiWorkbenchViewer .ssi-biomech-shell,
#ssiWorkbenchViewer .ssi-biomech-stage,
#ssiWorkbenchViewer .lc-bm-shell,
#ssiWorkbenchViewer .lc-bm-layout,
#ssiWorkbenchViewer .lc-bm-stage,
#ssiWorkbenchViewer .lc-bm-rail,
#ssiWorkbenchViewer .lc-bm-panel,
#ssiWorkbenchViewer .ssi-sbm-layout,
#ssiWorkbenchViewer .ssi-sbm-scene,
#ssiWorkbenchViewer .ssi-sbm-panels {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

#ssiWorkbenchViewer .lakana-biomech-root .lc-bm-layout {
  grid-template-columns: minmax(0, 1fr);
}

#ssiWorkbenchViewer .lakana-biomech-root .lc-bm-headline,
#ssiWorkbenchViewer .ssi-structural-biomech-mode .ssi-sbm-header,
#ssiWorkbenchViewer .ssi-structural-biomech-mode .ssi-sbm-layout {
  grid-template-columns: minmax(0, 1fr);
}

#ssiWorkbenchViewer .lakana-biomech-root .lc-bm-head-actions,
#ssiWorkbenchViewer .lakana-biomech-root .lc-bm-stage-toolbar {
  justify-content: flex-start;
}

#ssiWorkbenchViewer .ssi-structural-biomech-mode {
  width: 100%;
  overflow: hidden;
}

#ssiWorkbenchViewer .ssi-sbm-sync {
  justify-self: start;
  white-space: normal;
}

#ssiWorkbenchViewer .grid,
#ssiWorkbenchViewer .grid.two,
#ssiWorkbenchViewer .grid.three,
#ssiWorkbenchViewer .grid.four {
  grid-template-columns: minmax(0, 1fr) !important;
}

#ssiWorkbenchViewer .ssi-research-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}

#ssiWorkbenchViewer .ssi-research-card {
  overflow: auto;
}

#ssiWorkbenchViewer table {
  width: 100%;
  max-width: 100%;
  min-width: 0 !important;
  table-layout: fixed;
}

#ssiWorkbenchViewer .ssi-research-table {
  min-width: min(560px, 100%) !important;
}

#ssiWorkbenchViewer th,
#ssiWorkbenchViewer td {
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
}

#ssiWorkbenchViewer .ssi5-card,
#ssiWorkbenchViewer .card,
#ssiWorkbenchViewer article,
#ssiWorkbenchViewer section {
  max-width: 100%;
}

#ssiUnifiedModelStack .ssi5-card,
#ssiUnifiedModelStack .ssi-apex-observatory,
#ssiUnifiedModelStack .ssi-generated-workbench-view {
  border-radius: 14px;
}

.ssi-generated-workbench-view {
  background:
    radial-gradient(circle at 12% 0%, rgba(0, 169, 150, .10), transparent 36%),
    linear-gradient(180deg, rgba(243,246,248,.98), rgba(230,238,243,.96));
  color: #071827;
  border: 1px solid rgba(54, 91, 127, .24);
  padding: clamp(14px, 2vw, 22px);
}

.ssi-workbench-generated-head span {
  color: var(--ssi-stack-teal);
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.ssi-workbench-generated-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, .7fr);
  gap: 14px;
  align-items: stretch;
  margin-top: 12px;
}

.ssi-workbench-visual-card,
.ssi-workbench-state-card,
.ssi-workbench-bars {
  border: 1px solid rgba(54, 91, 127, .20);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  padding: 14px;
}

.ssi-workbench-state-card {
  display: grid;
  gap: 8px;
}

.ssi-workbench-state-card div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(54,91,127,.14);
  padding-bottom: 7px;
  color: #365B7F;
  font-size: .72rem;
}

.ssi-workbench-state-card b {
  color: #071827;
  text-align: right;
}

.ssi-workbench-bars {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ssi-workbench-bar {
  display: grid;
  gap: 5px;
}

.ssi-workbench-bar div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #365B7F;
  font-size: .72rem;
  font-weight: 800;
}

.ssi-workbench-bar b {
  color: #071827;
}

.ssi-workbench-bar i {
  display: block;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(54,91,127,.15);
}

.ssi-workbench-bar em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ssi-stack-teal), var(--ssi-stack-gold), var(--ssi-stack-red));
}

.ssi-workbench-blueprint {
  height: 320px;
  position: relative;
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(54,91,127,.12) 1px, transparent 1px),
    linear-gradient(rgba(54,91,127,.12) 1px, transparent 1px),
    #F3F6F8;
  background-size: 28px 28px;
}

.ssi-workbench-blueprint span,
.ssi-workbench-blueprint b,
.ssi-workbench-blueprint i,
.ssi-workbench-blueprint em {
  position: absolute;
  display: block;
  border-radius: 999px;
  background: #D8CFB8;
  box-shadow: 0 0 0 3px rgba(255,255,255,.76);
}

.ssi-workbench-blueprint span { width: 14px; height: 210px; left: 50%; top: 42px; transform: translateX(-50%); }
.ssi-workbench-blueprint b { width: 150px; height: 18px; left: calc(50% - 75px); top: 250px; }
.ssi-workbench-blueprint i { width: 15px; height: 150px; left: calc(50% - 44px); top: 260px; transform: rotate(8deg); }
.ssi-workbench-blueprint em { width: 15px; height: 150px; left: calc(50% + 28px); top: 260px; transform: rotate(-8deg); }

.ssi-workbench-routes {
  display: grid;
  gap: 9px;
  min-height: 320px;
  align-content: center;
}

.ssi-workbench-routes span {
  border: 1px solid rgba(0,169,150,.28);
  border-radius: 999px;
  padding: 9px 12px;
  background: rgba(0,169,150,.10);
  color: #071827;
  font-weight: 900;
  font-size: .78rem;
}

.lakana-ssi-footer {
  width: min(1400px, calc(100% - 32px));
  margin: 18px auto 28px;
  color: rgba(54, 91, 127, 0.9);
  font-size: 0.72rem;
  line-height: 1.4;
  text-align: center;
}

@media (min-width: 1181px) {
  .ssi-stack-workspace {
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) !important;
  }
}

@media (max-width: 980px) {
  .ssi-primary-5d-head {
    grid-template-columns: 1fr;
  }

  .ssi-primary-5d-status {
    justify-self: start;
  }

  .ssi-stack-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ssi-workbench-generated-grid {
    grid-template-columns: 1fr;
  }

  .ssi-workbench-bars {
    grid-template-columns: 1fr;
  }

  .ssi-workbench-main,
  .ssi-workbench-bottom {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .ssi-unified-stack,
  .ssi-structural-workbench,
  .ssi-primary-5d-shell {
    padding: 10px;
    border-radius: 14px;
  }

  .ssi-stack-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 2px 0 6px;
  }

  .ssi-stack-tab {
    flex: 0 0 152px;
    min-height: 50px;
  }

  .ssi-stack-strip {
    grid-template-columns: 1fr;
  }

  #ssiUnifiedModelStack #ssiBiomechStackSlot:not([hidden]),
  #ssiUnifiedModelStack #ssiEliteModelLab:not([hidden]),
  #ssiUnifiedModelStack #ssiApexObservatory:not([hidden]),
  #ssiUnifiedModelStack #ssiRunNarrative:not([hidden]),
  #ssiUnifiedModelStack #ssiAutonomicMonitor:not([hidden]),
  #ssiUnifiedModelStack #ssi5Viewport:not([hidden]),
  #ssiUnifiedModelStack #ssiCoachDashboard:not([hidden]),
  #ssiUnifiedModelStack #ssiEvidenceObservatory:not([hidden]),
  #ssiUnifiedModelStack .ssi-generated-workbench-view:not([hidden]) {
    min-height: 420px;
  }

  .lakana-ssi-footer {
    width: min(100% - 20px, 720px);
  }
}