/* Fives — "Add to home screen": the install invitation + guided sheet.
   Hand-authored (no .jsx sibling). Loaded on every page AFTER spine.css,
   because it offsets the spine FAB while the slip is up.

   Three surfaces:
     1. a quiet row in the mobile drawer + the footer (markup lives in
        nav.jsx / footer.jsx / homepage-app.jsx, hidden until a2hs.js
        puts .fv-can-a2hs on <html>),
     2. an earned bottom slip, shown once, only after real intent,
     3. the guided sheet, modelled on the spine sheet.

   Reduced motion honoured in CSS + JS. Everything pinned to an edge
   reserves the safe-area insets (standalone PWA rule). */

/* ── 0 · gating ────────────────────────────────────────────────
   The drawer/footer rows ship in the markup on every page and stay
   display:none until the device can actually do this. No CLS: the
   rows sit inside already-laid-out flex/grid columns and the slip
   is position:fixed, so neither ever enters the flow late. */
.a2hs-entry { display: none; }
html.fv-can-a2hs .a2hs-entry { display: block; }
html.fv-can-a2hs .fn-drawer-irow.a2hs-entry,
html.fv-can-a2hs .hp-drawer-irow.a2hs-entry { display: flex; }

/* The rows are <button>s wearing link/row clothes, so each one needs the UA
   button box reset away. That reset lives in the HOST file next to the rule
   it has to match (nav.jsx, footer.jsx, homepage-app.jsx), not here: those
   style blocks are injected at runtime and therefore land after this
   stylesheet, so a reset written here would lose to them on order and win on
   specificity in exactly the wrong places (it would strip the drawer row
   border). Only the gating above is cross-cutting enough to live here. */

/* ── 1 · the earned slip ───────────────────────────────────────
   Bottom-anchored by rule (nothing goes above the sticky nav) and
   by taste. Mobile only. */
.a2hs-slip {
  position: fixed;
  left: max(12px, var(--safe-left));
  right: max(12px, var(--safe-right));
  bottom: calc(12px + var(--safe-bottom));
  z-index: 190;            /* above the spine FAB (180), below the sheet (400) */
  display: flex;
  align-items: center;
  gap: var(--fives-s-3);
  box-sizing: border-box;
  padding: 12px 12px 12px 14px;
  background: var(--fives-primary);
  color: #F5EFE1;
  border-radius: var(--fives-r-lg);
  box-shadow: 0 8px 28px rgba(42, 36, 24, 0.28);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--fives-t-gentle) var(--fives-e-settle),
              transform var(--fives-t-gentle) var(--fives-e-settle);
  pointer-events: none;
}
.a2hs-slip.is-up {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
@media (min-width: 760px) { .a2hs-slip { display: none !important; } }

.a2hs-slip-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: var(--fives-r-md);
  display: block;
  /* The icon is a cream V on the same court green as the slip, so without an
     edge it reads as a floating letter rather than the tile they are about to
     get. A cream hairline gives it back its edges. */
  box-shadow: 0 0 0 1px rgba(245, 239, 225, 0.38);
}
.a2hs-slip-copy { flex: 1 1 auto; min-width: 0; }
.a2hs-slip-copy p {
  margin: 0;
  font-family: var(--fives-body);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
}
.a2hs-slip-copy span {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 400;
  color: rgba(245, 239, 225, 0.72);
}
.a2hs-slip-go,
.a2hs-slip-no {
  flex: 0 0 auto;
  box-sizing: border-box;
  font-family: var(--fives-body);
  font-weight: 600;
  border: 0;
  cursor: pointer;
  transition: transform var(--fives-t-instant) var(--fives-e-settle);
}
.a2hs-slip-go {
  min-height: 44px;               /* A4 · touch-target floor, as spine.css */
  padding: 0 14px;
  font-size: 13px;
  color: var(--fives-primary);
  background: #F5EFE1;
  border-radius: var(--fives-r-md);
}
.a2hs-slip-go:active { transform: scale(0.95); }
.a2hs-slip-no {
  width: 44px;
  height: 44px;
  margin-right: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: rgba(245, 239, 225, 0.7);
  background: transparent;
}
.a2hs-slip-no:active { transform: scale(0.9); }
.a2hs-slip-no svg { display: block; }

/* Lift the spine FAB clear of the slip while it is up. Needs to beat
   `.spine-fab.is-visible` (0,2,0), hence the html qualifier (0,2,1). */
html.fv-a2hs-slip .spine-fab.is-visible {
  bottom: calc(20px + var(--safe-bottom) + 82px);
}
/* The pointer aims at the bottom toolbar from the same corner the FAB lives
   in, so take the FAB down entirely for the few seconds it is up. Same
   treatment spine.css gives it near the footer. */
html.fv-a2hs-point .spine-fab.is-visible {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

/* ── 2 · the guided sheet ──────────────────────────────────────
   Same skeleton as the spine sheet: scrim + bottom panel, focus
   trapped and scroll locked by a2hs.js. */
.a2hs-root {
  position: fixed;
  inset: 0;
  z-index: 400;
  visibility: hidden;
}
.a2hs-root.is-open { visibility: visible; }

.a2hs-scrim {
  position: absolute;
  inset: 0;
  background: rgba(42, 36, 24, 0.44);
  opacity: 0;
  transition: opacity var(--fives-t-standard) var(--fives-e-settle);
}
.a2hs-root.is-open .a2hs-scrim { opacity: 1; }

.a2hs-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 86vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  padding: 20px max(24px, var(--safe-right))
           calc(20px + var(--safe-bottom)) max(24px, var(--safe-left));
  background: var(--fives-bg);
  border-top: 1px solid var(--fives-line);
  border-top-left-radius: var(--fives-r-lg);
  border-top-right-radius: var(--fives-r-lg);
  transform: translateY(100%);
  transition: transform var(--fives-t-standard) var(--fives-e-settle);
}
.a2hs-root.is-open .a2hs-sheet { transform: translateY(0); }

/* On a wide screen it stops being a sheet and becomes a centred card. */
@media (min-width: 760px) {
  .a2hs-sheet {
    left: 50%;
    bottom: 50%;
    right: auto;
    width: min(520px, calc(100vw - 48px));
    max-height: 80vh;
    border-radius: var(--fives-r-lg);
    border: 1px solid var(--fives-line);
    transform: translate(-50%, calc(50% + 16px));
    opacity: 0;
    transition: transform var(--fives-t-standard) var(--fives-e-settle),
                opacity var(--fives-t-standard) var(--fives-e-settle);
  }
  .a2hs-root.is-open .a2hs-sheet {
    transform: translate(-50%, 50%);
    opacity: 1;
  }
}

.a2hs-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--fives-s-3);
}
.a2hs-title {
  margin: 0;
  font-family: var(--fives-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--fives-text);
}
.a2hs-lede {
  margin: 8px 0 0;
  font-family: var(--fives-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--fives-muted);
}
.a2hs-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: -10px -12px 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--fives-text);
  transition: transform var(--fives-t-standard) var(--fives-e-rebound);
}
.a2hs-close:active { transform: scale(0.95); transition-duration: var(--fives-t-instant); }
.a2hs-close svg { display: block; }

/* steps */
.a2hs-steps {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.a2hs-step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 0 var(--fives-s-3);
  padding: 18px 0;
  border-top: 1px solid var(--fives-line);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--fives-t-gentle) var(--fives-e-settle),
              transform var(--fives-t-gentle) var(--fives-e-settle);
}
.a2hs-step:first-child { border-top: 0; padding-top: 4px; }
.a2hs-step.is-lit { opacity: 1; transform: none; }
.a2hs-step-n {
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fives-display);
  font-size: 14px;
  font-weight: 700;
  color: #F5EFE1;
  background: var(--fives-primary);
  border-radius: 50%;
}
.a2hs-step-h {
  margin: 3px 0 0;
  font-family: var(--fives-body);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--fives-text);
}
.a2hs-step-h b {
  font-weight: 700;
  color: var(--fives-primary);
}
.a2hs-step-p {
  margin: 4px 0 0;
  font-family: var(--fives-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fives-muted);
}
.a2hs-step-art {
  grid-column: 2;
  margin-top: 12px;
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  color: var(--fives-text);
}

/* the drawn stroke that lands on the thing you are meant to tap */
.a2hs-ring {
  stroke: var(--fives-accent);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
}
.a2hs-step.is-lit .a2hs-ring {
  transition: stroke-dashoffset var(--fives-t-hero) var(--fives-e-draw) 160ms;
  stroke-dashoffset: 0;
}

/* step 3 · the real icon on a sketched home screen */
.a2hs-home {
  grid-column: 2;
  margin-top: 12px;
  width: 100%;
  max-width: 260px;
  box-sizing: border-box;
  padding: 14px 12px 30px;
  display: grid;
  /* minmax(0,·), not 1fr: the real 180x180 icon sets a min-content floor that
     blows a plain 1fr track out to 180px a column and bursts the max-width. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 10px;
  background: var(--fives-bg-2);
  border: 1px solid var(--fives-line);
  border-radius: var(--fives-r-lg);
}
.a2hs-slot {
  min-width: 0;
  aspect-ratio: 1 / 1;
  border-radius: var(--fives-r-md);
  border: 1px dashed var(--fives-line);
}
.a2hs-cell { position: relative; min-width: 0; }
.a2hs-cell .a2hs-tile {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--fives-r-md);
  opacity: 0;
  transform: scale(0.7);
}
.a2hs-step.is-lit .a2hs-cell .a2hs-tile {
  transition: opacity var(--fives-t-gentle) var(--fives-e-settle) 260ms,
              transform var(--fives-t-gentle) var(--fives-e-pop) 260ms;
  opacity: 1;
  transform: none;
}
/* Hung under the tile, out of flow, so it can be wider than its column
   without stretching the grid track. */
.a2hs-caption {
  position: absolute;
  top: 100%;
  left: -60%;
  right: -60%;
  margin-top: 5px;
  font-family: var(--fives-body);
  font-size: 10px;
  line-height: 1.3;
  text-align: center;
  color: var(--fives-muted);
}

/* foot */
.a2hs-foot {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--fives-line);
  display: flex;
  align-items: center;
  gap: var(--fives-s-3);
}
.a2hs-note {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--fives-body);
  font-size: 12px;
  line-height: 1.4;
  color: var(--fives-muted);
}
.a2hs-done,
.a2hs-copy {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 20px;
  font-family: var(--fives-body);
  font-size: 14px;
  font-weight: 600;
  color: #F5EFE1;
  background: var(--fives-primary);
  border: 0;
  border-radius: var(--fives-r-md);
  cursor: pointer;
  transition: transform var(--fives-t-instant) var(--fives-e-settle),
              background var(--fives-t-quick) var(--fives-e-settle);
}
.a2hs-done:active,
.a2hs-copy:active { transform: scale(0.96); }
.a2hs-done:hover,
.a2hs-copy:hover { background: var(--fives-primary-700); }
.a2hs-copy.is-done { background: var(--fives-accent); }

/* ── 3 · the pointer ───────────────────────────────────────────
   After the sheet closes, a chalk arrow lands on where the share
   button actually is. iPhone: bottom toolbar. iPad: top right. */
.a2hs-point {
  position: fixed;
  z-index: 390;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--fives-t-gentle) var(--fives-e-settle);
}
.a2hs-point.is-up { opacity: 1; }
.a2hs-point-b {
  left: 50%;
  bottom: calc(4px + var(--safe-bottom));
  transform: translateX(-50%);
}
.a2hs-point-t {
  right: calc(8px + var(--safe-right));
  top: calc(4px + var(--safe-top));
  flex-direction: column-reverse;
}
.a2hs-point p {
  margin: 0;
  padding: 7px 12px;
  max-width: 74vw;
  font-family: var(--fives-body);
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 600;
  text-align: center;
  color: #F5EFE1;
  background: var(--fives-primary);
  border-radius: var(--fives-r-md);
  box-shadow: 0 6px 20px rgba(42, 36, 24, 0.26);
}
.a2hs-point svg { display: block; color: var(--fives-primary); }
.a2hs-point-t svg { transform: rotate(180deg); }
.a2hs-point .a2hs-nib {
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
}
.a2hs-point.is-up .a2hs-nib {
  transition: stroke-dashoffset var(--fives-t-hero) var(--fives-e-draw) 120ms;
  stroke-dashoffset: 0;
}

/* ── 4 · reduced motion (belt; the JS is the braces) ───────────── */
@media (prefers-reduced-motion: reduce) {
  .a2hs-slip,
  .a2hs-scrim,
  .a2hs-sheet,
  .a2hs-step,
  .a2hs-point,
  .a2hs-cell .a2hs-tile,
  .a2hs-step.is-lit .a2hs-cell .a2hs-tile {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .a2hs-step { opacity: 1 !important; transform: none !important; }
  .a2hs-cell .a2hs-tile { opacity: 1 !important; transform: none !important; }
  .a2hs-ring,
  .a2hs-point .a2hs-nib { stroke-dashoffset: 0 !important; transition: none !important; }
}
