/* PLC Studio concept shares the Home mineral-green product language. */
.studio-section {
  background: #f5f7f4;
}
.studio-section .product-stage {
  padding: 7px;
  background: #e7ece6;
  box-shadow:
    0 24px 70px #263a2c18,
    0 0 0 1px #d8e0d8;
}
.studio-section .demo,
dialog .demo {
  background: #f8faf7;
  border-color: #d8e0d8;
  color: #29372f;
}
.studio-section .preview-button {
  color: #496655;
}
.studio-app {
  --studio-green: #527560;
  --studio-muted: #819086;
  --studio-line: #e3e9e2;
  font-size: 12px;
  line-height: 1.5;
  color: #2c3b31;
  background: #f6f8f4;
  font-variant-numeric: tabular-nums;
}
.studio-app *,
.studio-app *::before,
.studio-app *::after {
  box-sizing: border-box;
}
.studio-app button,
.studio-app select {
  font: inherit;
}
.studio-app button {
  cursor: pointer;
  transition:
    background 0.15s,
    transform 0.1s;
}
.studio-app button:active {
  transform: scale(0.98);
}
.studio-app button:focus-visible,
.studio-app select:focus-visible {
  outline: 2px solid #526d5c;
  outline-offset: 3px;
}
.studio-app button:disabled {
  cursor: default;
  opacity: 0.5;
}
.studio-app p,
.studio-app h3,
.studio-app h4 {
  margin: 0;
}
.studio-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--studio-line);
  background: #fcfdfb;
  font-size: 10px;
  color: #849087;
}
.studio-chrome > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.studio-chrome strong {
  white-space: nowrap;
  color: #304c3b;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.4px;
}
.studio-emblem {
  color: #6d8c72;
  font-size: 21px;
}
.studio-tag {
  display: inline-block;
  font-size: 9px;
  padding: 5px 9px;
  border-radius: 7px;
  background: #edf2e8;
  color: #59714d;
  white-space: nowrap;
}
.studio-workspace {
  display: grid;
  grid-template-columns: 151px minmax(0, 1fr);
}
.studio-nav {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-right: 1px solid var(--studio-line);
  padding: 24px 11px;
  background: #f0f4ee;
}
.studio-nav > p {
  padding: 0 12px 15px;
  font-size: 8px;
  letter-spacing: 1.5px;
  color: #9ca69d;
}
.studio-nav button {
  border: 0;
  background: transparent;
  color: #7c8a7e;
  text-align: left;
  min-height: 44px;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
}
.studio-nav button > span {
  font-size: 17px;
  width: 20px;
  text-align: center;
}
.studio-nav button[aria-pressed="true"] {
  color: #36543d;
  background: #dfe9dc;
  font-weight: 600;
}
.studio-nav button:hover {
  background: #e4ece0;
}
.studio-nav-bottom {
  margin-top: auto;
  padding: 50px 12px 12px;
  font-size: 12px;
  color: #72836f;
}
.studio-nav-bottom span {
  font-size: 8px;
  color: #a1aca0;
}
.studio-main {
  padding: 25px;
  min-width: 0;
}
.studio-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}
.studio-toolbar h3 {
  font-size: 23px;
  font-weight: 550;
  letter-spacing: -0.8px;
  line-height: 1.3;
}
.studio-toolbar p {
  color: #8b978c;
  font-size: 9px;
  margin-bottom: 4px;
}
.studio-selects {
  display: flex;
  gap: 10px;
}
.studio-selects label {
  font-size: 8px;
  color: #8a958b;
  display: grid;
  gap: 4px;
}
.studio-selects select {
  min-height: 36px;
  max-width: 170px;
  background: #fbfcf9;
  border: 1px solid #dce4d8;
  border-radius: 7px;
  padding: 7px;
  color: #51634e;
  font-size: 10px;
}
.studio-context {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 23px 0 14px;
  font-size: 10px;
  color: #7c897b;
}
.studio-context span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.studio-context b {
  font-size: 9px;
  font-weight: 500;
}
.studio-context i {
  height: 6px;
  width: 6px;
  background: #7c9a70;
  border-radius: 50%;
}
.studio-context i.interlock {
  background: #cda26e;
}
.studio-context i.offline {
  background: #a6a7a4;
}
.studio-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
  margin-bottom: 18px;
}
.studio-kpis > div {
  border-radius: 10px;
  padding: 15px;
  background: #eaf0e4;
  display: grid;
  gap: 6px;
}
.studio-kpis > div:nth-child(2) {
  background: #f3eae0;
}
.studio-kpis > div:nth-child(3) {
  background: #e9e5f1;
}
.studio-kpis > div:nth-child(4) {
  background: #e7edef;
}
.studio-kpis span {
  color: #798572;
  font-size: 9px;
}
.studio-kpis strong {
  font-size: 26px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -1px;
}
.studio-kpis small {
  font-size: 10px;
  margin-left: 4px;
  font-weight: 400;
  letter-spacing: 0;
}
.studio-kpis i {
  font-size: 8px;
  font-style: normal;
  color: #94a08d;
}
.studio-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 14px;
}
.studio-card {
  min-width: 0;
  border: 1px solid #e4e9df;
  border-radius: 11px;
  background: #fcfdf9;
  padding: 17px;
  margin-bottom: 14px;
}
.studio-card-grid > .studio-card {
  margin-bottom: 0;
}
.studio-card h4 {
  font-size: 11px;
  color: #677a61;
  font-weight: 600;
  margin-bottom: 14px;
}
.studio-chart-note {
  font-size: 8px !important;
  color: #9ba595 !important;
  line-height: 1.6 !important;
  margin-top: 10px !important;
}
.studio-legend {
  display: flex;
  gap: 15px;
  font-size: 8px;
  color: #929c8b;
  flex-wrap: wrap;
}
.studio-legend > span {
  display: flex;
  gap: 5px;
  align-items: center;
}
.studio-legend i {
  width: 6px;
  height: 6px;
  background: #769276;
  border-radius: 2px;
}
.studio-legend .reference {
  background: #dce4d6;
}
.studio-bars {
  height: 135px;
  display: flex;
  gap: 9px;
  position: relative;
  margin-top: 14px;
}
.studio-gridlines {
  position: absolute;
  inset: 0 0 20px;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 28px,
    #e9eee5 29px,
    transparent 30px
  );
}
.studio-bar-pair {
  flex: 1;
  z-index: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: center;
}
.studio-bar-pair > div {
  height: 112px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
}
.studio-bar-pair i {
  display: block;
  width: 31%;
  background: #779576;
  border-radius: 3px 3px 0 0;
  position: relative;
}
.studio-bar-pair i.bar-ref {
  background: #e0e7d9;
}
.studio-bar-pair i span {
  display: none;
}
.studio-bar-pair:hover i span {
  display: block;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  font: 8px system-ui;
  color: #52694c;
  padding: 3px;
  background: white;
}
.studio-bar-pair small {
  color: #9da696;
  font-size: 8px;
  margin-top: 7px;
}
.studio-quality {
  display: grid;
  justify-items: center;
  gap: 13px;
}
.studio-donut {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: conic-gradient(
    #7f9879 0 98.6%,
    #d5ad80 98.6% 99.5%,
    #ada1bb 99.5%
  );
  padding: 13px;
  transform: rotate(-90deg);
}
.studio-donut > div {
  height: 100%;
  background: #fcfdf9;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotate(90deg);
}
.studio-donut strong {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -1px;
}
.studio-donut strong span {
  font-size: 11px;
}
.studio-donut small {
  font-size: 8px;
  color: #91a087;
}
.studio-quality-key {
  width: 100%;
  max-width: 210px;
}
.studio-quality-key > div {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 8px;
  color: #8a9782;
  margin-top: 5px;
}
.studio-quality-key b {
  margin-left: auto;
  font-weight: 500;
}
.studio-quality-key i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #7f9879;
}
.studio-quality-key i.quality-1 {
  background: #d5ad80;
}
.studio-quality-key i.quality-2 {
  background: #ada1bb;
}
.studio-signals {
  display: block;
  width: 100%;
  height: 120px;
  margin: 10px 0;
  overflow: visible;
}
.studio-signals polyline {
  stroke-width: 2;
  fill: none;
  vector-effect: non-scaling-stroke;
}
.studio-heatmap {
  display: grid;
  gap: 10px;
  margin-top: 23px;
}
.studio-heatmap > div {
  display: grid;
  grid-template-columns: 77px repeat(8, minmax(0, 1fr));
  gap: 4px;
  align-items: center;
}
.studio-heatmap span {
  font-size: 8px;
  white-space: nowrap;
  color: #929c88;
  overflow: hidden;
  text-overflow: ellipsis;
}
.studio-heatmap i {
  height: 14px;
  border-radius: 3px;
  background: rgba(117, 148, 107, var(--level));
}
.studio-scale {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: #a4ad9b;
  padding-left: 77px;
  margin-top: 14px;
}
.studio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.studio-actions button {
  min-height: 38px;
  border: 1px solid #dbe4d5;
  border-radius: 7px;
  background: #eef3e8;
  color: #637759;
  font-size: 9px;
  padding: 9px 12px;
}
.studio-actions button:first-child {
  background: #4b6b56;
  color: #fff;
  border-color: #4b6b56;
}
.studio-actions button[data-play] {
  margin-left: auto;
}
.studio-feedback {
  margin-top: 10px !important;
  min-height: 18px;
  font-size: 9px;
  color: #8c9985;
}
.studio-footnote {
  border-top: 1px solid var(--studio-line);
  padding: 12px 20px;
  color: #95a08e;
  background: #f6f8f2;
  font-size: 8px;
}
.studio-unavailable {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  color: #8e9789;
}
.studio-unavailable strong {
  font-size: 12px;
  font-weight: 500;
}
.studio-unavailable p {
  font-size: 10px;
  line-height: 1.8;
}
.studio-process {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.studio-process > div {
  border: 1px solid #e0e6d9;
  padding: 13px 8px;
  border-radius: 9px;
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
  background: #fbfcf8;
}
.studio-process > div.selected {
  background: #e9f0e2;
  border-color: #a9b99e;
}
.studio-process > div > span {
  font-size: 8px;
  color: #a8b19d;
}
.studio-process svg {
  width: 55px;
  stroke: #819475;
  fill: none;
  stroke-width: 1.5;
}
.studio-process b {
  font-size: 9px;
  font-weight: 500;
}
.studio-process small {
  font-size: 8px;
  color: #9da98d;
}
.studio-sensors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.studio-sensor {
  display: grid;
  gap: 16px;
}
.studio-sensor span {
  font-size: 8px;
  color: #919d86;
}
.studio-sensor strong {
  font-size: 21px;
  font-weight: 500;
}
.studio-sensor small {
  font-size: 8px;
  margin-left: 3px;
}
.studio-sensor i {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, #9db78b 65%, #e7eddf 65%);
}
.studio-sensor.sensor-1 i {
  background: linear-gradient(90deg, #c9aa82 44%, #eee8df 44%);
}
.studio-sensor.sensor-2 i {
  background: linear-gradient(90deg, #a39bbb 89%, #eeeaf3 89%);
}
.studio-conditions {
  display: grid;
  gap: 16px;
}
.studio-conditions > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 9px;
}
.studio-conditions span {
  color: #8f9a85;
}
.studio-conditions b {
  font-size: 8px;
  color: #7a946c;
  font-weight: 500;
}
.studio-conditions b.warn {
  color: #bd9465;
}
.studio-table-wrap {
  overflow-x: auto;
}
.studio-app table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  white-space: nowrap;
  font-size: 9px;
}
.studio-app th {
  color: #a1aa97;
  font-weight: 400;
  padding: 5px 8px 13px 0;
}
.studio-app td {
  padding: 12px 8px 12px 0;
  border-top: 1px solid #e9eee3;
  color: #7a8b6c;
}
.studio-app td .studio-tag {
  font-size: 8px;
}
.studio-setpoints {
  display: grid;
  gap: 20px;
}
.studio-setpoints > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
  color: #8e9b82;
  font-size: 9px;
}
.studio-setpoints b {
  font-weight: 500;
}
.studio-setpoints > div > div {
  grid-column: 1/-1;
  height: 7px;
  background: #edf1e7;
  border-radius: 5px;
}
.studio-setpoints i {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: #adc29b;
}
.studio-route-note {
  padding: 20px;
  text-align: center;
  color: #a1ad93;
  font-size: 10px;
}
.studio-events {
  padding: 0;
  list-style: none;
  display: grid;
  gap: 18px;
}
.studio-events li {
  display: flex;
  gap: 12px;
  align-items: center;
}
.studio-events time {
  font-size: 8px;
  color: #a4ae98;
}
.studio-events i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b0c2a0;
}
.studio-events i.warn {
  background: #d0ac7f;
}
.studio-events strong {
  font-size: 10px;
  font-weight: 500;
  color: #829476;
}
.studio-events small {
  display: block;
  font-size: 8px;
  color: #abb59f;
  margin-top: 4px;
}
.studio-category-bars {
  display: grid;
  gap: 25px;
  padding: 10px 0;
}
.studio-category-bars > div {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 9px;
  color: #919e84;
}
.studio-category-bars span {
  width: 70px;
}
.studio-category-bars i {
  height: 11px;
  flex: 1;
  background: linear-gradient(90deg, #b5c7a5 var(--bar), #eff3e8 var(--bar));
  border-radius: 3px;
}
.studio-category-bars b {
  font-size: 8px;
  font-weight: 400;
}
.studio-topology {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: center;
  padding: 15px;
}
.studio-topology > strong,
.studio-topology > b {
  font-size: 12px;
  font-weight: 500;
  padding: 20px;
  background: #e9f0e0;
  border: 1px solid #dce5d2;
  border-radius: 10px;
}
.studio-topology > span {
  color: #bdc9b0;
}
.studio-topology > div {
  display: grid;
  gap: 8px;
  font-size: 9px;
  color: #9fad8f;
}
.studio-topology > div > span {
  padding: 6px 12px;
  border: 1px solid #e4eadc;
  border-radius: 6px;
}
.studio-request-steps {
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.studio-request-steps li {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 10px;
  color: #b2bca7;
}
.studio-request-steps li > span {
  border: 1px solid #e3e9da;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  font-size: 8px;
}
.studio-request-steps li.done {
  color: #8fa37d;
}
.studio-request-steps li.current {
  color: #4c6e3f;
}
.studio-request-steps li.current > span {
  background: #e6efdd;
  border-color: #b7c9a6;
}
.studio-request-result {
  margin-top: 15px !important;
  color: #8c9e7b;
  font-size: 10px;
  line-height: 1.8;
}
.studio-scatter {
  display: block;
  width: 100%;
  height: 170px;
}
.studio-scatter text {
  fill: #9ba88d;
  font: 9px system-ui;
}
.studio-line-comparison {
  display: grid;
  gap: 18px;
  margin: 23px 0;
}
.studio-line-comparison > div {
  display: grid;
  grid-template-columns: 85px minmax(0, 1fr) 35px;
  gap: 8px;
  align-items: center;
  font-size: 8px;
  color: #8b9c79;
}
.studio-line-comparison > div > div {
  height: 10px;
  background: #edf2e6;
  border-radius: 3px;
}
.studio-line-comparison i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: #a8bd95;
}
.studio-line-comparison b {
  font-weight: 500;
  text-align: right;
}
.customization-note {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px 70px;
  text-align: center;
  color: #84917f;
  font-size: 13px;
  line-height: 1.9;
}
dialog:has(.studio-app) {
  background: #f5f8f1;
  border-color: #d9e3ce;
  color: #405632;
}
dialog:has(.studio-app) .close {
  color: #6d855c;
}
dialog:has(.studio-app) .concept-note {
  color: #8ca077;
}
@media (max-width: 1000px) {
  .studio-workspace {
    grid-template-columns: 120px minmax(0, 1fr);
  }
  .studio-nav {
    padding-inline: 6px;
  }
  .studio-nav button {
    font-size: 9px;
    gap: 7px;
    padding-inline: 7px;
  }
  .studio-main {
    padding: 18px;
  }
  .studio-selects {
    gap: 6px;
  }
  .studio-selects select {
    max-width: 125px;
  }
  .studio-chrome > span:nth-child(2) {
    display: none;
  }
  .studio-kpis strong {
    font-size: 22px;
  }
  .studio-card-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
  .studio-heatmap > div {
    grid-template-columns: 60px repeat(8, minmax(0, 1fr));
  }
  .studio-heatmap {
    gap: 12px;
  }
  .studio-heatmap i {
    height: 11px;
  }
  .studio-scale {
    padding-left: 60px;
  }
}
@media (max-width: 760px) {
  .studio-chrome {
    flex-wrap: wrap;
    padding: 12px;
  }
  .studio-byline {
    display: none;
  }
  .studio-chrome .studio-tag {
    font-size: 7px;
  }
  .studio-workspace {
    display: block;
  }
  .studio-nav {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    padding: 7px;
    border-right: 0;
    border-bottom: 1px solid var(--studio-line);
    gap: 4px;
    scrollbar-width: thin;
  }
  .studio-nav > p,
  .studio-nav-bottom {
    display: none;
  }
  .studio-nav button {
    flex-shrink: 0;
    min-height: 44px;
    font-size: 10px;
    padding: 8px 10px;
  }
  .studio-nav button > span {
    font-size: 13px;
    width: 14px;
  }
  .studio-main {
    padding: 14px;
  }
  .studio-toolbar {
    display: block;
  }
  .studio-toolbar h3 {
    font-size: 21px;
  }
  .studio-selects {
    margin-top: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .studio-selects select {
    max-width: 100%;
    width: 100%;
    font-size: 10px;
    min-height: 44px;
  }
  .studio-selects label {
    min-width: 0;
  }
  .studio-kpis {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .studio-kpis > div {
    padding: 12px;
  }
  .studio-card-grid {
    grid-template-columns: 1fr;
  }
  .studio-card {
    padding: 15px;
  }
  .studio-bars {
    height: 155px;
  }
  .studio-bar-pair > div {
    height: 132px;
  }
  .studio-quality {
    grid-template-columns: 130px 1fr;
    align-items: center;
  }
  .studio-signals {
    height: 130px;
  }
  .studio-heatmap > div {
    grid-template-columns: 90px repeat(8, minmax(0, 1fr));
  }
  .studio-heatmap i {
    height: 17px;
  }
  .studio-scale {
    padding-left: 90px;
  }
  .studio-actions button {
    min-height: 44px;
    font-size: 10px;
  }
  .studio-actions button[data-play] {
    margin-left: 0;
  }
  .studio-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .studio-process > div:last-child {
    grid-column: 1/-1;
  }
  .studio-topology {
    flex-wrap: wrap;
    gap: 10px;
  }
  .studio-topology > strong,
  .studio-topology > b {
    padding: 15px;
    font-size: 10px;
  }
  .studio-sensor strong {
    font-size: 20px;
  }
  .studio-footnote {
    padding: 12px;
    font-size: 9px;
  }
  .studio-feedback {
    font-size: 10px;
  }
  .studio-app td {
    padding-right: 12px;
  }
  .customization-note {
    font-size: 12px;
    padding-bottom: 45px;
  }
}
@media (max-width: 370px) {
  .studio-quality {
    grid-template-columns: 1fr;
  }
  .studio-kpis strong {
    font-size: 23px;
  }
  .studio-selects {
    grid-template-columns: 1fr;
  }
  .studio-heatmap > div {
    grid-template-columns: 65px repeat(8, minmax(0, 1fr));
    gap: 3px;
  }
  .studio-scale {
    padding-left: 65px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .studio-app button {
    transition: none;
  }
  .studio-app button:active {
    transform: none;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .studio-heatmap i {
    background: #839d72;
    opacity: var(--level);
  }
}
@media (prefers-contrast: more) {
  .studio-app {
    --studio-muted: #46563e;
    --studio-line: #7f9074;
  }
  .studio-app p,
  .studio-app small,
  .studio-app label,
  .studio-app th,
  .studio-app td,
  .studio-app .studio-legend,
  .studio-app .studio-feedback {
    color: #43563a !important;
  }
  .studio-card,
  .studio-kpis > div {
    border: 1px solid #738267;
  }
}