/* (c) 2026 Wayne State University. All rights reserved. */
html, body {
  position: fixed;
  inset: 0;
  overflow: hidden;
  margin: 0;
  background: var(--sl-paper);
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
input, textarea, select { -webkit-user-select: text; user-select: text; }
.cc-feedback-form .sl-input, .cc-feedback-form .sl-select, .cc-feedback-form textarea { font-size: 16px; }

.ph-stage {
  position: fixed;
  inset: 0;
  background: var(--sl-paper);
}
.ph-pending .ph-stage { visibility: hidden; }

#ph-eeg {
  position: absolute;
  top: 0;
  left: env(safe-area-inset-left, 0px);
  display: block;
  width: calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  height: 100%;
}

.ph-zones {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 30% 40% 30%;
}
.ph-zone {
  display: flex;
  align-items: center;
  padding: 0 calc(env(safe-area-inset-right, 0px) + 2px) 0 calc(env(safe-area-inset-left, 0px) + 2px);
  border: 0;
  background: transparent;
  color: var(--sl-text-3);
  font-size: var(--sl-fs-6);
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
.ph-zone--back { justify-content: flex-start; padding-left: calc(env(safe-area-inset-left, 0px) + 56px); }
.ph-zone--next { justify-content: flex-end; }
.ph-zone[aria-disabled="true"] span { opacity: .25; }
.ph-zone:focus-visible { outline: 2px solid var(--sl-focus); outline-offset: -4px; }

.ph-card {
  position: absolute;
  left: 50%;
  width: min(72%, 620px);
  padding: var(--sl-space-2) var(--sl-space-3);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-md);
  background: color-mix(in srgb, var(--sl-surface) 95%, transparent);
  box-shadow: var(--sl-shadow-1);
  color: var(--sl-text-1);
  font-size: var(--sl-fs-3);
  line-height: 1.3;
  transform: translateX(-50%);
  pointer-events: none;
}
.ph-card[data-edge="bottom"] { bottom: max(var(--sl-space-2), env(safe-area-inset-bottom, 0px)); }
.ph-card[data-edge="top"] { top: 18px; }
.ph-card[hidden] { display: none; }
.ph-card p { margin: 0; }
.ph-card__meta { color: var(--sl-text-3); font-size: var(--sl-fs-1); }
.ph-card__text { font-weight: 600; }
.ph-card__more,
.ph-card__facts,
.ph-card__hint { margin-top: 2px !important; color: var(--sl-text-2); font-size: var(--sl-fs-1); line-height: 1.25; }
.ph-card__facts { color: var(--sl-text-1); font-weight: 600; }
.ph-card a { pointer-events: auto; }
.ph-card__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sl-space-2);
  margin: var(--sl-space-1) 0 0;
  padding: 0;
  list-style: none;
}
.ph-card__options .sl-btn {
  min-height: 38px;
  height: auto;
  padding-inline: var(--sl-space-2);
  pointer-events: auto;
  touch-action: manipulation;
}

.ph-nudge { animation: ph-nudge 240ms var(--sl-ease); }
@keyframes ph-nudge {
  25% { transform: translateX(calc(-50% - 6px)); }
  75% { transform: translateX(calc(-50% + 6px)); }
}
@media (prefers-reduced-motion: reduce) {
  .ph-nudge { animation: none; }
}

.ph-top {
  position: absolute;
  top: 2px;
  right: calc(env(safe-area-inset-right, 0px) + 2px);
  display: flex;
  align-items: center;
  gap: var(--sl-space-2);
}
.ph-menu-open {
  min-height: 36px;
  background: color-mix(in srgb, var(--sl-surface) 90%, transparent);
}
.ph-home {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--sl-border);
  border-radius: 50%;
  background: color-mix(in srgb, var(--sl-surface) 90%, transparent);
  box-shadow: var(--sl-shadow-1);
  color: var(--sl-brand);
}
.ph-home svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; }
.ph-home:active { transform: scale(0.94); background: var(--sl-brand-tint); }
.ph-home:focus-visible { outline: 2px solid var(--sl-focus); outline-offset: 2px; }

.ph-toast {
  position: absolute;
  top: var(--sl-space-3);
  left: 50%;
  margin: 0;
  padding: var(--sl-space-2) var(--sl-space-3);
  border-radius: var(--sl-radius-md);
  background: var(--sl-text-1);
  color: var(--sl-surface);
  font-size: var(--sl-fs-3);
  transform: translateX(-50%);
  pointer-events: none;
}

.ph-rotate { display: none; }
@media (orientation: portrait) {
  .ph-stage { display: none; }
  .ph-rotate {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sl-space-3);
    padding: var(--sl-space-5);
    background: var(--sl-bg);
    color: var(--sl-text-1);
    text-align: center;
  }
  .ph-pending .ph-rotate { visibility: hidden; }
  .ph-rotate h1 { margin: 0; font-size: var(--sl-fs-5); }
  .ph-rotate p { margin: 0; color: var(--sl-text-2); }
  .ph-rotate .ph-rotate__note { max-width: 300px; font-size: var(--sl-fs-2); }

  .ph-sideways .ph-rotate { display: none; }
  .ph-sideways .ph-stage {
    display: block;
    top: 0;
    right: auto;
    bottom: auto;
    left: 100%;
    width: 100dvh;
    height: 100vw;
    transform: rotate(90deg);
    transform-origin: 0 0;
  }
  .ph-sideways #ph-eeg {
    left: env(safe-area-inset-top, 0px);
    width: calc(100% - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
  .ph-sideways .ph-menu {
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(720px, calc(100dvh - 32px));
    max-width: none;
    max-height: calc(100vw - 16px);
    margin: 0;
    transform: translate(-50%, -50%) rotate(90deg);
  }
}

.cc-feedback-form { display: grid; gap: var(--sl-space-2); }
.cc-feedback-form textarea { width: 100%; min-height: 80px; resize: vertical; font: inherit; }
@media (orientation: landscape) and (max-height: 420px) {
  .cc-feedback-form { grid-template-columns: 1fr 1fr; align-items: start; }
  .cc-feedback-form textarea { height: 76px; min-height: 76px; resize: none; }
  .cc-feedback-form .sl-error { grid-column: 1 / -1; order: 1; margin: 0; }
  .cc-feedback-form .sl-hint { margin: 0; }
  .cc-feedback-form .sl-dialog__actions { padding: 0; }
}

.ph-menu { width: min(720px, calc(100vw - 32px)); }
.ph-menu[open] { display: flex; flex-direction: column; }
.ph-menu__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sl-space-2) var(--sl-space-4);
  padding: var(--sl-space-2) var(--sl-space-5) 0;
}
.ph-menu__tools .sl-segmented { display: flex; align-items: center; gap: var(--sl-space-2); }
.ph-menu__title { margin: 0 0 var(--sl-space-1); color: var(--sl-text-2); font-size: var(--sl-fs-2); font-weight: 600; }
.ph-menu__tools .ph-menu__title { margin: 0; }
.ph-menu__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.ph-menu__scroll .ph-menu__title { margin-top: var(--sl-space-2); }
#ph-lessons .ph-menu__title:first-child { margin-top: 0; }
.ph-menu__scroll .ph-menu__hint { margin: var(--sl-space-2) 0 0; color: var(--sl-text-2); font-size: var(--sl-fs-2); }
.ph-menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sl-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ph-menu .sl-btn { min-height: 38px; height: auto; padding-inline: var(--sl-space-2); }
.ph-menu .sl-btn[aria-current="step"] { border-color: var(--sl-focus); font-weight: 600; }
@media (max-height: 420px) {
  .sl-dialog { max-height: calc(100dvh - 16px); }
  .sl-dialog__head { padding-top: var(--sl-space-3); }
  .sl-dialog__body { padding-top: var(--sl-space-2); padding-bottom: var(--sl-space-2); font-size: var(--sl-fs-3); }
  .sl-dialog__body p { margin-bottom: var(--sl-space-2); }
}