/* static/styles/help.css */

body.setup-page #sidebar,
body.setup-page #toggle-help {
  display: none !important;
}

body.admin-page #sidebar,
body.admin-page #toggle-help {
  display: none !important;
}

#sidebar {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 400px;
  max-width: 80vw;
  background: var(--box-overlay);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--fg);
  font-size: 0.95rem;
  border-left: 1px solid var(--border);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 10;
  /* layout.js publishes the sticky header's real block size. The old fake
     spacer scrolled with this panel, which let the Help heading climb above
     the application header as soon as the panel itself was scrolled. */
  top: var(--app-header-block-size, 0px);
  padding-right: 16px;
}

#sidebar.active {
  transform: translateX(0);
}

#sidebar-header {
  position: sticky;
  top: 0;
  z-index: 1;
  padding-top: 10px;
  padding-bottom: 10px;
  background: var(--accent);
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

#sidebar-header h2 {
  margin: 0;
  vertical-align: middle;
  font-size: 1.4rem;
  color: var(--on-accent);
}

#sidebar-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.help-title {
  margin: 0;
  text-align: center;
  font-size: 1.2rem;
  color: var(--accent);
}

/* <dfn> marks a term where the topic teaches it, which is what every help
   topic's bold first mention always was. Giving that its own tag means the
   accent marks vocabulary only, and <strong> stays free for plain emphasis.
   Browsers italicise <dfn> by default; here it is upright and accented. */
#sidebar-content dfn {
  font-style: normal;
  font-weight: 600;
  color: var(--accent);
}

.help-card {
  background: var(--box-overlay);
  padding: 12px 14px;
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  min-height: 60px;
}

/* Every topic owns the same visual stage. Empty visual fragments deliberately
   leave this space blank so switching topics never shifts the explanation. */
#help-visual {
  box-sizing: border-box;
  height: clamp(320px, 50vh, 420px);
  display: grid;
  place-items: center;
  overflow: hidden;
}

#gate-animation {
  background: var(--fg);
  width: 90%;
  aspect-ratio: 3/2;
  padding: 0px 30px;
  border-radius: var(--radius);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

html.light #gate-animation {
  background: var(--bg);
}

/* Light: sidebar & help.

   No background overrides here. The panel and its cards used to be pinned at
   0.95 and 0.9 alpha on this theme while the dark one sat at 0.55, so the light
   sidebar read as a solid wall where the dark one read as frosted glass. Both
   now take --box-overlay and --tile-muted, which are already theme-aware, so
   the two themes are translucent to the same degree. */
html.light .help-card {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* #help-visual is a fixed-height stage that clips, so this column has to fit
   inside it at every width. The caption and the state buttons take the height
   they actually need and the illustration absorbs whatever is left; reserving a
   flat 50px for them instead meant that as soon as the caption or the buttons
   wrapped to a second line the selector was clipped away entirely. */
.gate-visual {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.gate-visual img {
  width: 100%;
  /* flex-basis:0, not auto. With `auto` the base size comes from the image's
     own aspect-ratio, which it then defends against shrinking, so the caption
     and buttons were pushed past the clip. At 0 the picture claims only the
     space those two leave over, and object-fit keeps it undistorted in it. */
  flex: 1 1 0;
  min-height: 0;
  object-fit: contain;
}

/* Never squeezed: these two are the controls, the picture is the decoration. */
.gate-visual > p,
.gate-visual .state-selector {
  flex: 0 0 auto;
}

.gate-visual > p {
  margin: 0.4em 0 0;
}

.state-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: 0.5em;
  justify-content: center;
}

/* Match the gate illustrations' width so Pin does not read as a secondary or
   thumbnail-sized action in the same Help pane. */
.pin-move-visual {
  width: 90%;
  max-height: 100%;
  object-fit: contain;
}

/* Inline/mobile Help panel (togglable) */
@media (max-width: 720px) {
  #sidebar.inline {
    position: static;
    width: 100%;
    max-width: none;
    display: none;
    transform: none;
    transition: none;
    z-index: auto;
    border-left: none;
    border-top: 1px solid var(--border);
    background: var(--box-overlay);
    padding: 12px 12px 16px;
    border-radius: var(--radius);
    margin: 12px 0;
  }

  #sidebar.inline.active {
    display: block;
  }

  #sidebar.inline #sidebar-header {
    background: transparent;
    color: var(--fg);
    border-bottom: 1px solid var(--tile-muted);
    padding: 6px 0 10px;
  }

  /* The inline header drops its accent fill above, so the heading has to drop
     --on-accent with it: that token is only legible on top of an accent fill.
     Unscoped deliberately -- both themes need it. */
  #sidebar.inline #sidebar-header h2 {
    color: var(--fg);
  }

  html.light #sidebar.inline .help-card {
    background: var(--box-overlay);
  }
}