/* Shared physical button behaviour for every non-Admin page. */
body.cockpit-buttons-page {
  --unified-button-height: 50px;
  --unified-button-font: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --unified-button-size: 12px;
  --unified-button-day-text: rgba(255, 255, 255, .83);
  --unified-button-night-text: var(--cockpit-night, rgb(255, 170, 32));
  --unified-button-surface: linear-gradient(180deg, #454b51 0%, #2d3237 100%);
  --unified-button-night-surface: linear-gradient(180deg, #292e33 0%, #15191d 100%);
  --unified-button-shadow:
    0 6px 0 rgba(0, 0, 0, .62),
    0 10px 17px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .24);
  --unified-button-pressed-shadow:
    0 1px 0 rgba(0, 0, 0, .7),
    0 4px 8px rgba(0, 0, 0, .26),
    inset 0 3px 8px rgba(0, 0, 0, .72);
}

body.cockpit-buttons-page .cockpit-visual-button.cockpit-visual-button {
  box-sizing: border-box !important;
  border: 2px solid #050505 !important;
  border-radius: 8px !important;
  color: var(--unified-button-day-text) !important;
  -webkit-text-fill-color: var(--unified-button-day-text) !important;
  background: var(--unified-button-surface) !important;
  box-shadow: var(--unified-button-shadow) !important;
  text-decoration: none !important;
  text-shadow: none;
  cursor: pointer;
  transition: transform 70ms linear, box-shadow 70ms linear, color 70ms linear, -webkit-text-fill-color 70ms linear !important;
}

body.cockpit-buttons-page .cockpit-visual-button.cockpit-visual-button:not(.cockpit-visual-special) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--unified-button-height) !important;
  min-height: var(--unified-button-height) !important;
  max-height: var(--unified-button-height) !important;
  padding: 0 14px !important;
  font-family: var(--unified-button-font) !important;
  font-size: var(--unified-button-size) !important;
  font-weight: 900 !important;
  font-style: normal !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

body.cockpit-buttons-page .cockpit-visual-button.cockpit-visual-button:not(.cockpit-content-rich) > :where(span, strong, small) {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

body.cockpit-buttons-page .cockpit-visual-button.cockpit-visual-button:hover:not(:disabled):not([aria-disabled="true"]),
body.cockpit-buttons-page .cockpit-visual-button.cockpit-visual-button:focus-visible {
  border-color: rgba(235, 242, 248, .92) !important;
  outline: 2px solid rgba(235, 242, 248, .34);
  outline-offset: 2px;
}

body.cockpit-buttons-page .cockpit-visual-button.cockpit-visual-button:is(:disabled, [aria-disabled="true"], .is-disabled) {
  opacity: .52;
  cursor: not-allowed;
}

/* Momentary controls remain physically down for the whole pointer/key press. */
body.cockpit-buttons-page .cockpit-visual-button.cockpit-visual-button.is-physically-pressed:not(:disabled):not([aria-disabled="true"]),
body.cockpit-buttons-page .cockpit-visual-button.cockpit-visual-button:active:not(:disabled):not([aria-disabled="true"]) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  transform: translateY(5px) !important;
  box-shadow: var(--unified-button-pressed-shadow) !important;
  text-shadow: 0 0 3px rgba(255, 255, 255, .72), 0 0 7px rgba(255, 255, 255, .28) !important;
}

body.cockpit-buttons-page .cockpit-visual-button.cockpit-visual-button.is-physically-pressed *,
body.cockpit-buttons-page .cockpit-visual-button.cockpit-visual-button:active * {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  text-shadow: inherit !important;
}

/* IN/OUT, ON/OFF and selected-position controls keep their physical position. */
body.cockpit-buttons-page .cockpit-visual-button.cockpit-visual-button:is(
  [aria-pressed="true"],
  .is-active,
  .is-selected,
  .is-source-active,
  .is-language-active,
  .is-calculator-open,
  .is-formulae-open,
  .is-logout-armed,
  .is-visible,
  .is-invalidated
) {
  transform: translateY(5px) !important;
  box-shadow: var(--unified-button-pressed-shadow) !important;
}

/* Specialised controls retain their approved dimensions, with shorter travel. */
body.cockpit-buttons-page .cockpit-visual-button.cockpit-visual-special.is-physically-pressed:not(.password-toggle):not(.secret-toggle),
body.cockpit-buttons-page .cockpit-visual-button.cockpit-visual-special:active:not(.password-toggle):not(.secret-toggle),
body.cockpit-buttons-page .cockpit-visual-button.cockpit-visual-special:is([aria-pressed="true"], .is-active, .is-selected, .is-source-active, .is-visible) {
  transform: translateY(3px) !important;
}

body.cockpit-buttons-page .cockpit-visual-button:is(.password-toggle, .secret-toggle).is-physically-pressed,
body.cockpit-buttons-page .cockpit-visual-button:is(.password-toggle, .secret-toggle):active,
body.cockpit-buttons-page .cockpit-visual-button:is(.password-toggle, .secret-toggle).is-visible {
  transform: translateY(calc(-50% + 3px)) !important;
}

/* Night lighting: amber at rest, EL-controlled white during the press. */
body.cockpit-buttons-page.is-night-mode .cockpit-visual-button.cockpit-visual-button {
  position: relative;
  z-index: 10000;
  color: var(--unified-button-night-text) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--unified-button-night-text) var(--el-output, 100%), transparent) !important;
  background: var(--unified-button-night-surface) !important;
  text-shadow:
    0 0 3px color-mix(in srgb, var(--cockpit-night-glow, rgba(255, 126, 0, .66)) var(--el-output, 100%), transparent),
    0 0 7px color-mix(in srgb, rgba(255, 126, 0, .28) var(--el-output, 100%), transparent) !important;
}

body.cockpit-buttons-page.is-night-mode .cockpit-visual-button.cockpit-visual-button:not(.cockpit-content-rich) > :where(span, strong, small) {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  text-shadow: inherit !important;
}

body.cockpit-buttons-page.is-night-mode .cockpit-visual-button.cockpit-visual-button.is-physically-pressed,
body.cockpit-buttons-page.is-night-mode .cockpit-visual-button.cockpit-visual-button:active {
  color: #fff !important;
  -webkit-text-fill-color: color-mix(in srgb, #fff var(--el-output, 100%), transparent) !important;
  text-shadow:
    0 0 3px color-mix(in srgb, rgba(255, 255, 255, .72) var(--el-output, 100%), transparent),
    0 0 7px color-mix(in srgb, rgba(255, 255, 255, .28) var(--el-output, 100%), transparent) !important;
}

/* SIGN OUT is the global safety egress control, never a standard grey/amber key. */
body.cockpit-buttons-page .app-nav a.logout-manual-button.cockpit-visual-button.cockpit-visual-button {
  width: auto !important;
  min-width: 96px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 12px !important;
  border: 2px solid #050505 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: repeating-linear-gradient(135deg, #ffd400 0 14px, #050505 14px 28px) !important;
  box-shadow:
    0 6px 0 rgba(0, 0, 0, .62),
    0 10px 17px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .26) !important;
  text-shadow:
    0 2px 2px #050505,
    2px 0 2px #050505,
    0 -2px 2px #050505,
    -2px 0 2px #050505 !important;
}

body.cockpit-buttons-page .app-nav a.logout-manual-button.cockpit-visual-button:hover,
body.cockpit-buttons-page .app-nav a.logout-manual-button.cockpit-visual-button:focus-visible {
  border-color: #fff !important;
  outline: 3px solid #ffd400 !important;
  outline-offset: 2px;
  filter: brightness(1.08);
}

body.cockpit-buttons-page.is-night-mode .app-nav a.logout-manual-button.cockpit-visual-button {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: repeating-linear-gradient(135deg, #ffd400 0 14px, #050505 14px 28px) !important;
  filter: brightness(var(--el-output, 100%));
  text-shadow:
    0 2px 2px #050505,
    2px 0 2px #050505,
    0 -2px 2px #050505,
    -2px 0 2px #050505 !important;
}

body.cockpit-buttons-page .app-nav a.logout-manual-button.cockpit-visual-button.is-logout-armed {
  color: #ff544f !important;
  -webkit-text-fill-color: #ff544f !important;
  background: repeating-linear-gradient(135deg, #ffd400 0 14px, #050505 14px 28px) !important;
}

/* Password controls are anchored inside their fields, not part of the normal button flow. */
body.cockpit-buttons-page .cockpit-visual-button:is(.password-toggle, .secret-toggle) {
  position: absolute !important;
  top: 50% !important;
  right: 6px !important;
  left: auto !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  transform: translateY(-50%) !important;
}

/* The reveal control is a latched indicator inside an input: never move it. */
body.cockpit-buttons-page .cockpit-visual-button.cockpit-visual-special:is(.password-toggle, .secret-toggle).is-physically-pressed,
body.cockpit-buttons-page .cockpit-visual-button.cockpit-visual-special:is(.password-toggle, .secret-toggle):active,
body.cockpit-buttons-page .cockpit-visual-button.cockpit-visual-special:is(.password-toggle, .secret-toggle).is-visible {
  transform: translateY(-50%) !important;
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, .58),
    0 1px 1px rgba(255, 255, 255, .14) !important;
}

body.cockpit-buttons-page .cockpit-visual-button:is(.password-toggle, .secret-toggle) {
  width: 32px !important;
  min-width: 32px !important;
  height: 30px !important;
  min-height: 30px !important;
  pointer-events: auto !important;
}

/* Latched study tools: green while open, white only during the physical press. */
body.cockpit-buttons-page .cockpit-visual-button.cockpit-visual-button:is(.is-calculator-open, .is-formulae-open):not(.is-physically-pressed):not(:active) {
  color: #37ff68 !important;
  -webkit-text-fill-color: color-mix(in srgb, #37ff68 var(--el-output, 100%), transparent) !important;
  text-shadow:
    0 0 3px color-mix(in srgb, rgba(55, 255, 104, .72) var(--el-output, 100%), transparent),
    0 0 7px color-mix(in srgb, rgba(55, 255, 104, .28) var(--el-output, 100%), transparent) !important;
}

/* Preserve semantic answer feedback while keeping the shared button body. */
body.cockpit-buttons-page .altimetry-option.cockpit-visual-button.is-correct {
  border-color: #38e892 !important;
  background: rgba(16, 120, 71, .2) !important;
}

body.cockpit-buttons-page .altimetry-option.cockpit-visual-button:is(.is-wrong, .is-caution) {
  border-color: #ff646d !important;
  background: rgba(150, 30, 43, .2) !important;
}

body.cockpit-buttons-page .user-team-service-button.cockpit-visual-button.is-notification {
  border-color: #fa9c35 !important;
}

@media (prefers-reduced-motion: reduce) {
  body.cockpit-buttons-page .cockpit-visual-button.cockpit-visual-button {
    transition: none !important;
  }
}