/* ============================================================
   Install and update prompts
   ------------------------------------------------------------
   Two bars that dock to the bottom of the viewport: one offering
   to install the site to the home screen, one saying a new
   version is waiting. Both are injected by assets/pwa.js and
   neither is ever on screen at page load, so nothing here is in
   the way of first paint.

   Bottom rather than top because the site's own header already
   owns the top edge, and because a thumb reaches the bottom of
   a phone and does not reach the top.
   ============================================================ */

.pwa-bar {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  z-index: 60;
  width: min(560px, calc(100vw - 32px));
  transform: translate(-50%, calc(100% + 32px));

  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;

  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(14, 36, 57, .16);

  opacity: 0;
  visibility: hidden;
  transition: transform .28s ease, opacity .28s ease, visibility .28s;
}

.pwa-bar[data-open] {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
}

/* Somebody who has asked for less motion gets the bar without the
   slide — it still appears, it just does not travel. */
@media (prefers-reduced-motion: reduce) {
  .pwa-bar { transition: opacity .2s ease, visibility .2s; transform: translate(-50%, 0); }
}

.pwa-bar img {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
}

.pwa-bar-text {
  flex: 1 1 auto;
  min-width: 0;
}

.pwa-bar-text strong {
  display: block;
  color: var(--navy);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.pwa-bar-text span {
  display: block;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.45;
  margin-top: 2px;
}

.pwa-bar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

/* The dismiss control is an icon button rather than a "Not now" label:
   the bar is already three lines of text on a narrow phone, and a
   fourth word would push the primary action off the row. */
.pwa-bar-close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.pwa-bar-close:hover {
  background: var(--surface-2);
  color: var(--navy);
}

/* On a narrow phone the bar stacks into three rows: the icon and the
   dismiss control, then the message, then a full-width button. Squeezing
   all four onto one line leaves the text about nine characters wide. */
@media (max-width: 460px) {
  .pwa-bar { flex-wrap: wrap; gap: 10px 12px; }
  .pwa-bar img { order: 1; }
  .pwa-bar-close { order: 2; margin-left: auto; }
  .pwa-bar-text { order: 3; flex: 1 1 100%; }
  .pwa-bar-actions { order: 4; flex: 1 1 100%; }
  .pwa-bar-actions .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   install.html
   ------------------------------------------------------------
   The page behind the "Use as an app" link. It carries the real
   instructions for each platform, so it works with no script at
   all; assets/pwa.js only adds the one-tap button on the
   browsers that support one, and marks the card matching the
   device you are holding.
   ============================================================ */

.install-action {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  border-color: var(--border-strong);
}

/* `display` in an author stylesheet beats the browser's own
   `[hidden] { display: none }`, so without this the panel renders even
   though the markup ships it hidden — and a reader in Safari, which
   cannot be prompted at all, would be shown a button that does nothing.
   assets/pwa.js only unhides it once there is a real prompt to fire. */
.install-action[hidden] { display: none; }

.install-action-icon {
  flex: 0 0 auto;
  border-radius: 12px;
}

.install-action-text {
  flex: 1 1 auto;
  min-width: 0;
}

.install-action-text strong {
  display: block;
  color: var(--navy);
  font-size: 16px;
  font-weight: 600;
}

.install-action-text span {
  display: block;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  margin-top: 3px;
}

/* Already on the home screen. The panel stays, because "you have this
   already" is a more useful answer than an absent button. */
.install-action[data-state="installed"] { border-color: var(--green); }
.install-action[data-state="installed"] .install-action-text strong { color: var(--green); }

@media (max-width: 560px) {
  .install-action { flex-wrap: wrap; }
  .install-action-text { flex: 1 1 100%; order: 3; }
  .install-action .btn { flex: 1 1 100%; order: 4; justify-content: center; }
}

.install-h2 { margin: 0 0 14px; font-size: 20px; }
.install-h3 { margin: 22px 0 8px; font-size: 15px; }

.install-platforms, .install-notes { margin-bottom: 28px; }

/* The card for the device actually in the reader's hands. Everything
   stays on the page — a student on an iPhone helping a friend with an
   Android still needs to be able to read the other steps. */
.install-platforms .card[data-current] {
  border-color: var(--orange);
  background: var(--orange-soft);
}

.install-platforms .card[data-current] h3 { color: var(--orange-ink); }

.install-platforms h3, .install-notes h3 {
  margin: 0 0 10px;
  font-size: 15.5px;
}

.install-steps, .install-list {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.install-steps li + li, .install-list li + li { margin-top: 7px; }

.install-p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.install-p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .install-platforms, .install-notes { grid-template-columns: minmax(0, 1fr); }
}

/* The home-page line pointing here. Quiet by design — it sits under the
   hero buttons next to the other two asides, and an installable site is
   a convenience rather than the reason anybody came. */
.install-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blue);
  font-weight: 500;
  text-decoration: none;
}

.install-hint:hover { text-decoration: underline; }
.install-hint svg { flex: 0 0 auto; }

/* The iOS instructions replace the button, because Safari has no
   programmatic install and the only thing we can do is point at the
   Share menu. */
.pwa-ios-steps {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}

.pwa-ios-steps svg {
  vertical-align: -3px;
  margin: 0 2px;
  color: var(--blue);
}