/* Training-room presentation. Device artwork and simulation logic stay unchanged. */
html,
body {
  min-width: 0;
  background: #164f4b;
}

body {
  color: #f7fffd;
}

.app-shell {
  --rail-width: 330px;
  --layout-gap: 28px;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  display: grid;
  grid-template-rows: 52px minmax(0, 1fr) 48px;
  gap: 12px;
  margin: 0;
  padding: 20px 32px 16px;
  border: 0;
  background: #164f4b url('./assets/brand/training-background.png') center / cover no-repeat;
  container: application / size;
}

.appbar {
  min-height: 0;
  display: flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
}

.product-lockup {
  display: block;
}

.product-lockup strong {
  color: #ffffff;
  font-size: 28px;
  font-weight: 450;
}

.brand-logo {
  display: block;
  width: 204px;
  height: 54px;
  object-fit: contain;
}

.simulator-layout {
  min-width: 0;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) var(--rail-width);
  gap: var(--layout-gap);
}

.panel-workbench {
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) 84px;
  gap: 12px;
  border: 0;
  background: none;
}

.panel-stage {
  min-height: 0;
  padding: 0;
  place-items: center;
  background: none;
  container-type: size;
}

.panel-scroll {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.panel {
  width: min(100%, calc(100cqh * 1.628));
  max-width: none;
  min-width: 0;
  filter: drop-shadow(0 8px 14px rgb(0 25 23 / 0.18));
}

.panel-feedback[hidden] {
  display: none;
}

.long-press-legend {
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  padding-top: 14px;
  color: #f0faf7;
  font-size: 13px;
  line-height: 24px;
  container-type: inline-size;
}

.long-press-legend-title {
  flex: none;
  font-weight: 500;
  white-space: nowrap;
}

.long-press-legend-list {
  flex: 0 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 10px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.long-press-legend-list li {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.long-press-legend-list img {
  width: 24px;
  height: 24px;
  flex: none;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

@container (max-width: 640px) {
  .long-press-legend-list { grid-template-columns: repeat(2, max-content); }
}

@container (max-width: 400px) {
  .long-press-legend-list { gap: 7px 6px; font-size: 11px; }
  .long-press-legend-list li { gap: 5px; }
  .long-press-legend-list img { width: 18px; height: 18px; }
}

.control-rail {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0;
  border: 0;
  background: none;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #8bbfb5 transparent;
}

.rail-view-tabs {
  display: none;
}

.mobile-linkage {
  width: 100%;
  min-height: 0;
  flex: none;
  gap: 12px;
  margin: 0;
  padding: 12px;
  border: 1px dashed rgb(235 255 247 / 0.6);
  background: none;
}

.control-heading {
  min-height: 32px;
}

.control-heading h1 {
  color: #ffffff;
  font-size: 17px;
}

.control-heading-main > img,
.field-label > img,
.phone-stepper img {
  filter: brightness(0) invert(1);
}

.control-heading-main span,
.phone-feature-heading > div span,
.subsection-heading span,
.field-label small,
.field-status,
#pressureOutput small {
  color: #d3eae5;
}

.phone-connection {
  min-height: 24px;
  padding: 0;
  color: #f2fffb;
  background: none;
}

.phone-connection::before {
  background: #8ee8d4;
}

.phone-view-tabs {
  height: 36px;
  padding: 3px;
  border-radius: 4px;
  background: rgb(0 38 35 / 0.58);
}

.phone-view-tabs button {
  height: 30px;
  min-height: 30px;
  border-radius: 3px;
  color: #e3f4ef;
}

.phone-view-tabs button.active {
  color: #103f39;
  background: #e3f4ef;
  box-shadow: none;
}

.phone-feature-heading {
  min-height: 34px;
}

.phone-feature-heading > div strong,
.subsection-heading strong,
.field-label strong,
.field-control-heading h2,
#pressureOutput {
  color: #f7fffd;
}

.phone-feature-heading > div strong,
.subsection-heading strong {
  font-size: 12px;
}

.phone-switch {
  width: 46px;
  height: 26px;
  flex: none;
}

.phone-switch span {
  border-color: #80aaa1;
  background: #416d65;
}

.phone-switch span::after {
  width: 18px;
  height: 18px;
}

.phone-switch input:checked + span {
  border-color: #8eddce;
  background: #087e6d;
}

.phone-switch input:checked + span::after {
  transform: translateX(20px);
}

.mode-control {
  gap: 5px;
}

.phone-mode-list {
  gap: 6px;
}

.phone-mode-list button {
  min-height: 38px;
  height: 38px;
  gap: 6px;
  padding: 0 6px;
  border: 1px solid rgb(215 247 237 / 0.38);
  border-radius: 4px;
  color: #edf9f6;
  background: rgb(0 42 38 / 0.35);
}

.phone-mode-icon {
  color: currentColor;
}

.phone-mode-list button.active {
  border-color: #b5ecde;
  color: #103f39;
  background: #d6eee5;
}

.phone-mode-list button.app-disabled {
  color: #a8c3bb;
  background: rgb(0 42 38 / 0.25);
}

.phone-temperature {
  min-height: 86px;
  gap: 5px;
  padding: 9px 12px;
  border-color: rgb(175 222 209 / 0.38);
  border-radius: 4px;
  background: rgb(0 34 31 / 0.62);
}

.phone-stepper {
  height: 40px;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
}

.phone-stepper button {
  width: 36px;
  height: 36px;
  border: 1px solid #a1c8be;
  border-radius: 2px;
  background: transparent;
}

.phone-stepper output {
  color: #ffffff;
  font-size: 26px;
}

.phone-sync-status.error {
  color: #ffe6ca;
  background: #593d32;
}

.field-controls {
  width: 100%;
  min-height: 0;
  gap: 9px;
  margin: 0;
  padding: 12px;
  border: 1px dashed rgb(235 255 247 / 0.6);
  background: none;
}

.field-control-heading {
  min-height: 20px;
}

.field-control-heading h2 {
  font-size: 14px;
  font-weight: 500;
}

.field-control {
  min-height: 58px;
  padding: 8px 10px;
  border: 0;
  border-radius: 3px;
  background: rgb(0 34 31 / 0.8);
}

.pressure-control {
  gap: 3px;
}

.faucet-control {
  min-height: 50px;
  gap: 8px;
}

.field-label {
  gap: 7px;
}

.field-status {
  min-height: 14px;
  font-size: 10px;
}

.field-status.warn {
  color: #ffe0a0;
}

.field-status.bad {
  color: #ffe0d8;
}

#pressureControl {
  accent-color: #8ee8d4;
}

.phone-switch.compact input:checked + span::after {
  transform: translateX(22px);
}

.training-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail-width);
  align-items: center;
  gap: var(--layout-gap);
  color: #f0faf7;
}

.training-footer p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  overflow-wrap: anywhere;
}

.training-disclaimer {
  max-width: 800px;
  justify-self: center;
  text-wrap: balance;
}

@media (min-width: 1600px) and (min-height: 800px) {
  .training-footer p { font-size: 16px; }
}

html:not([data-phone-layout]) .training-disclaimer {
  max-width: 100%;
  text-wrap: wrap;
}

@container application (min-height: 601px) {
  html:not([data-phone-layout]) .training-disclaimer { font-size: 13px; }
}

/* Keep the physical LCD proportions when the appliance grows beyond its source size. */
@container (min-width: 814px) {
  .lcd-value,
  .lcd.code-view .lcd-value,
  .lcd.program-temperature-view .lcd-value { font-size: 6.8796cqw; }
  .lcd-value.text-mode { font-size: 4.3cqw; }
  .lcd-value.value-long { font-size: 3.6855cqw; }
  .lcd-value.family-mode { font-size: 6.0197cqw; }
  .lcd.code-view .lcd-value.text-mode { font-size: 5.774cqw; }
  .lcd.code-view .lcd-value.value-long { font-size: 4.7912cqw; }
  .lcd.code-view .lcd-value.code-token,
  .lcd.wide-value-view .lcd-value,
  .lcd.counter-view .lcd-value.code-token { font-size: 6.3882cqw; }
  .lcd-small.segment-mode { font-size: 3.4398cqw; }
  .lcd.code-view .lcd-small.segment-mode,
  .lcd.program-temperature-view .lcd-small.segment-mode { font-size: 4.2998cqw; }
  .lcd.wide-value-view .lcd-small.segment-mode { font-size: 4.1769cqw; }
  .lcd.counter-wide-view .lcd-small.segment-mode { font-size: 3.4398cqw; }
  .lcd-unit,
  .lcd.diagnostic-value-view .lcd-unit,
  .lcd.program-temperature-view .lcd-unit { font-size: 1.8428cqw; }
  .lcd-small,
  .lcd-small.reset-mode { font-size: 1.5971cqw; }
}

/* Rotate only touch-device portrait viewports; all hit targets rotate with the UI. */
@media (max-width: 1000px) and (orientation: portrait) and (pointer: coarse) {
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .app-shell {
    position: fixed;
    top: 0;
    left: 100%;
    width: 100dvh;
    height: 100dvw;
    transform: rotate(90deg);
    transform-origin: top left;
  }
}

@media (max-width: 1100px) {
  .app-shell {
    --rail-width: 290px;
    --layout-gap: 18px;
    padding: 12px 20px;
  }
}

@media (max-height: 600px), (max-width: 600px) and (pointer: coarse) {
  .app-shell {
    --rail-width: 258px;
    --layout-gap: 16px;
    grid-template-rows: 32px minmax(0, 1fr) 36px;
    gap: 6px;
    padding: 8px 16px;
  }
}

@container application (max-height: 600px) {
  .product-lockup strong { font-size: 22px; }
  .brand-logo { width: 136px; height: 36px; }
  .control-rail { gap: 7px; }
  .rail-view-tabs {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    flex: none;
    padding: 3px;
    border-radius: 4px;
    background: #164e47;
  }
  .rail-view-tabs button {
    min-height: 30px;
    padding: 3px 5px;
    border: 0;
    border-radius: 2px;
    color: #eef8f4;
    background: none;
    font-size: 12px;
    cursor: pointer;
  }
  .rail-view-tabs button[aria-selected='true'] {
    color: #123e37;
    background: #e3f4ed;
  }
  .control-rail[data-rail-view='phone'] .field-controls,
  .control-rail[data-rail-view='field'] .mobile-linkage { display: none; }
  .control-heading { display: none; }
  .mobile-linkage { gap: 6px; padding: 8px; }
  .phone-view-tabs { height: 32px; }
  .phone-view-tabs button { min-height: 26px; height: 26px; font-size: 12px; }
  .phone-feature-heading { min-height: 28px; }
  .phone-feature-heading > div span { display: none; }
  .phone-mode-list { gap: 4px; }
  .phone-mode-list button { min-height: 30px; height: 30px; font-size: 11px; }
  .mode-control { gap: 3px; }
  .subsection-heading { min-height: 16px; gap: 4px; }
  .subsection-heading span { font-size: 9px; }
  .phone-temperature { min-height: 63px; gap: 2px; padding: 5px 8px; }
  .phone-stepper { height: 32px; }
  .phone-stepper button { width: 32px; height: 32px; }
  .phone-stepper output { font-size: 22px; }
  .field-controls { padding: 8px; }
  .panel-workbench { grid-template-rows: minmax(0, 1fr) 64px; gap: 6px; }
  .long-press-legend { gap: 6px; padding-top: 6px; font-size: 11px; line-height: 18px; }
  .long-press-legend-list { gap: 8px 6px; }
  .long-press-legend-list li { gap: 5px; }
  .long-press-legend-list img { width: 18px; height: 18px; }
  .training-footer p { font-size: 10px; line-height: 1.4; }
}

/* Narrow desktop windows remain readable without rotating a mouse/keyboard UI. */
@media (max-width: 700px) and (pointer: fine) and (min-height: 601px) {
  .app-shell {
    height: auto;
    min-height: 100dvh;
    grid-template-rows: 44px auto auto;
    container-type: inline-size;
    padding: 12px 16px;
  }
  .simulator-layout { grid-template-columns: 1fr; }
  .panel-workbench { grid-template-rows: auto auto; }
  .panel-stage { container-type: normal; }
  .panel-scroll { height: auto; }
  .panel { width: 100%; }
  .long-press-legend { min-height: 84px; gap: 6px; font-size: 11px; }
  .control-rail { overflow: visible; }
  .training-footer { grid-template-columns: 1fr; gap: 10px; }
  .brand-logo { width: 136px; height: 36px; }
  .product-lockup strong { font-size: 22px; }
}