/**
 * Page help.
 *
 * DOCUMENTED DECISION — this is a separate stylesheet from guide.css, and the
 * separation is the fix for a real fault rather than tidiness.
 *
 * These rules used to live at the bottom of guide.css, next to the guided
 * tour, because the two features were written in the same week and read as one
 * subject. They are not deployed as one subject. The tour runs only inside the
 * authenticated shell, so guide.css is linked by layouts/portal.php — but the
 * help control is rendered by both layouts, including on the sign-in screens,
 * which extend layouts/base.php and never loaded guide.css at all.
 *
 * The result was a help button on /login, /forgot, /reset and
 * /change-password with no rules behind it: an unstyled <button> in normal
 * flow at the top of the document, instead of the control pinned to the
 * corner that .help--floating below describes. It shipped that way because
 * every one of those pages was correct in every other respect, and a control
 * that renders — wrongly — does not look like a missing stylesheet.
 *
 * Splitting the file puts the styles where the markup is. base.php links this,
 * so every page that can render partials/help.php has it by construction, and
 * portal.php keeps guide.css for the tour and the handbook — which the sign-in
 * screens still do not need and no longer pay for.
 *
 * Everything positional here is written in logical properties, so the whole
 * thing mirrors for Arabic without a second rule set. The one place that
 * cannot be logical is the mobile sheet's vertical anchoring, which is
 * genuinely vertical in every locale.
 */

.help { position: relative; }

.help__trigger {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 7px 11px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
}
.help__trigger:hover { background: var(--paper-sunken); border-color: var(--line); color: var(--text); }
.help__trigger[aria-expanded="true"] { background: var(--paper-sunken); color: var(--text); }

.help__panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  z-index: var(--z-dropdown);
  width: min(27rem, calc(100vw - var(--s-6)));
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lifted);
  overflow: hidden;
}

/* The panel is opened and closed by toggling the `hidden` attribute, and
 * `[hidden] { display: none }` is a *user-agent* rule. Any author declaration
 * of `display` on the same element beats it — specificity does not come into
 * it, the UA sheet simply loses to the author sheet.
 *
 * The mobile block below sets `display: flex` to make the sheet a column with
 * a scrolling body. Without this guard that declaration overrode `hidden`, so
 * on a phone the panel was painted over the page from first load and pressing
 * its close button set an attribute that changed nothing visible. It read as a
 * dead close button, which is why it was reported as one.
 *
 * `.account__menu` and `.lang__menu` are the same kind of control and declare
 * no `display` at all, which is why neither has ever needed this. This rule is
 * what lets the one below declare it safely.
 */
.help__panel[hidden] { display: none; }

.help__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-block-end: 1px solid var(--line);
}

.help__title {
  font-size: var(--t-md);
  font-weight: var(--w-medium);
  color: var(--text);
  margin: 0;
}

.help__close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  cursor: pointer;
}
.help__close:hover { background: var(--paper-sunken); color: var(--text); }

.help__body { padding: var(--s-5); }

.help__lead {
  color: var(--text);
  line-height: 1.6;
  margin: 0;
}

/* Counter-driven rather than a real list marker: the marker cannot be given a
   background and a fixed width, and a number that changes width between 1 and
   10 drags the text edge with it. Bangla and Arabic render their own numerals
   through the counter, which is the reason not to hardcode the digits. */
.help__steps {
  list-style: none;
  counter-reset: help-step;
  margin: var(--s-5) 0 0;
  padding: 0;
}

.help__step {
  counter-increment: help-step;
  position: relative;
  padding-inline-start: calc(var(--s-6) + 4px);
  color: var(--text-muted);
  line-height: 1.6;
}
.help__step + .help__step { margin-block-start: var(--s-4); }

.help__step::before {
  content: counter(help-step);
  position: absolute;
  inset-inline-start: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  background: var(--paper-sunken);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* The note is the one thing in the panel a reader must not skim past, so it
   is the one thing that does not look like the rest of it. */
.help__note {
  margin-block-start: var(--s-5);
  padding: var(--s-4);
  background: var(--warning-tint);
  border-radius: var(--r-md);
  border-inline-start: 3px solid var(--warning);
}

.help__note-label {
  display: block;
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--warning);
  margin-block-end: var(--s-2);
}

.help__note p {
  margin: 0;
  color: var(--text);
  line-height: 1.6;
}

.help__more {
  display: block;
  padding: var(--s-4) var(--s-5);
  border-block-start: 1px solid var(--line);
  background: var(--paper-sunken);
  color: var(--text);
  font-size: var(--t-sm);
  text-decoration: none;
}
.help__more:hover { text-decoration: underline; }

/* On the sign-in screens there is no top bar to sit in, so the control places
   itself against the corner of the viewport. */
.help--floating { position: fixed; inset-block-start: var(--s-5); inset-inline-end: var(--s-5); z-index: var(--z-dropdown); }
.help--floating .help__trigger { background: var(--card); border-color: var(--line-strong); }

@media (max-width: 560px) {
  .help__label { display: none; }
  .help__trigger { padding: 7px; }

  /* A sheet, not a dropdown. Anchored to the bottom edge because that is
     where a thumb is, and capped in height with its body scrolling so a long
     panel cannot push its own close button off the screen. */
  .help__panel {
    position: fixed;
    inset-inline: var(--s-3);
    inset-block-start: auto;
    bottom: var(--s-3);
    width: auto;
    max-height: 78vh;
    display: flex;
    flex-direction: column;
  }
  .help__body { overflow-y: auto; }
}

/* Touch targets.
 *
 * These used to sit in portal.css with the rest of the coarse-pointer floors,
 * which is the wrong file for them: portal.css is not loaded on the sign-in
 * screens, so the panel a student opens on a phone before they can get in had
 * a close button below the 44px floor every other control on the site meets.
 * The rule that styles a component travels with the component.
 *
 * `.topbar .help__trigger` stays in portal.css. It is scoped to the shell and
 * belongs beside the other three triggers in that corner, which are sized as a
 * set. */
@media (pointer: coarse) {
  .help__close { min-width: 44px; min-height: 44px; }

  /* The floating trigger has no top bar to inherit a floor from. */
  .help--floating .help__trigger { min-width: 44px; min-height: 44px; }
}