/* Isolated floating help menu for pages that do not load the app shell CSS. */
:root {
  --howto-accent: #0284c7;
  --howto-accent-hover: #0369a1;
  --howto-surface: var(--lrn-surface, #ffffff);
  --howto-border: var(--lrn-rule, #e2e8f0);
  --howto-text: var(--lrn-ink, #1f2937);
}

.howto-tab {
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 9200;
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  padding: 16px 10px;
  border: 0;
  border-radius: 0 10px 10px 0;
  color: #ffffff;
  background: var(--howto-accent);
  box-shadow: -2px 0 10px rgba(2, 132, 199, .35);
  font: 600 13px/1.2 var(--lrn-sans, "Inter", system-ui, sans-serif);
  letter-spacing: .02em;
  writing-mode: vertical-rl;
  white-space: nowrap;
  cursor: pointer;
  transform: translateY(-50%) rotate(180deg);
  transition:
    background 150ms ease,
    right 320ms cubic-bezier(.16, 1, .3, 1),
    height 320ms cubic-bezier(.16, 1, .3, 1);
}

.howto-tab:hover { background: var(--howto-accent-hover); }

.howto-menu {
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 9201;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  overflow: hidden;
  border: 1px solid var(--howto-border);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  color: var(--howto-text);
  background: color-mix(in srgb, var(--howto-surface) 94%, transparent);
  box-shadow: 0 12px 40px rgba(31, 41, 55, .14);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-50%) translateX(100%);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  transition:
    transform 320ms cubic-bezier(.16, 1, .3, 1),
    opacity 200ms ease,
    visibility 0ms 320ms;
}

.howto-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
  transition:
    transform 320ms cubic-bezier(.16, 1, .3, 1),
    opacity 200ms ease,
    visibility 0ms 0ms;
}

.howto-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  border: 0;
  border-bottom: 1px solid var(--howto-border);
  color: var(--howto-text);
  background: transparent;
  font: 600 14px/1.35 var(--lrn-sans, "Inter", system-ui, sans-serif);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, padding-left 150ms ease;
}

.howto-menu-item:last-child { border-bottom: 0; }
.howto-menu-item[hidden] { display: none; }
.howto-menu-item:hover {
  padding-left: 26px;
  color: var(--lrn-accent, #156082);
  background: var(--lrn-accent-soft, #e8f0f5);
}

.howto-menu-icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.session-active .howto-menu,
body.session-active .howto-tab { display: none; }

@media (max-width: 760px) {
  .howto-tab { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .howto-tab { transition: none; }
  .howto-menu { transition: opacity 150ms ease, visibility 0ms 150ms; }
  .howto-menu.is-open { transition: opacity 150ms ease, visibility 0ms 0ms; }
  .howto-menu-item { transition: none; }
}