/* R-024: item guide page ("Meet the family") — docs/design/FamilyGuide.dc.html
   at 390 x 844. Colour only via the --c-<key> custom properties main.js sets
   from theme.palette (R-008.10, R-024.12) and rgba(0, 0, 0, a) lips; the art
   tile's fill is set from script (the item's own colour at 33 %). Ribbon and
   close-button looks are reused from cards.css (.ribbon-title, .popup-close). */

/* R-024.4: full-screen page inside the app column, above the HUD, board and
   tray, the title (z 30) and the Settings popup (z 35), below the landscape
   overlay (z 40). It never scrolls as a document (R-008.7). */
.guide-page {
  position: fixed;
  top: 0;
  bottom: calc(-1 * var(--screen-gap, 0px)); /* R-008.19 */
  left: 0;
  right: 0;
  z-index: 36;
  margin-inline: auto;
  width: min(100%, var(--app-max-width, 480px));
  box-sizing: border-box;
  /* R-008.20: + --status-clearance in the installed app */
  padding: max(12px, calc(env(safe-area-inset-top, 0px) + 5px + var(--status-clearance, 0px))) 16px max(14px, env(safe-area-inset-bottom, 0px));
  background: var(--c-background);
  color: var(--c-text);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  overscroll-behavior: none;
}
.guide-page[hidden], .guide-page [hidden] { display: none !important; }

.guide-cloud { position: absolute; background: var(--c-surface); border-radius: 999px; pointer-events: none; }
.guide-cloud--a { left: -40px; top: 70px; width: 150px; height: 46px; opacity: 0.7; }
.guide-cloud--b { right: -30px; top: 110px; width: 120px; height: 38px; opacity: 0.55; }

/* R-024.5: top bar — back button, ribbon title, a spacer that centres it. */
.guide-top { position: relative; flex-shrink: 0; height: 56px; display: flex; align-items: center; justify-content: space-between; }
.guide-back.popup-close { position: relative; top: auto; right: auto; flex-shrink: 0; }
.guide-top-spacer { width: 46px; height: 46px; flex-shrink: 0; }
.guide-ribbon.ribbon-title {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  min-width: 0;
  max-width: calc(100% - 100px); /* clear of the back button and its mirror spacer */
  height: 52px;
  padding: 0 22px;
  flex-shrink: 1;
}
.guide-ribbon h2 { font-size: 25px; }
@media (max-width: 360px) {
  .guide-ribbon.ribbon-title { padding: 0 10px; }
  .guide-ribbon h2 { font-size: 20px; letter-spacing: 0; }
}

.guide-chev { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.guide-back { color: var(--c-text); }

/* R-024.6: the strip — a white pill with every tier as a button. */
.guide-strip {
  position: relative;
  flex-shrink: 0;
  height: 54px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--c-surface);
  border: 3px solid var(--c-text);
  box-shadow: 0 4px 0 var(--c-text);
  display: flex;
  align-items: center;
}
.guide-strip-btn {
  flex: 1 1 0;
  min-width: 0;
  height: 44px;
  padding: 0 0 4px;
  border: 0;
  border-bottom: 4px solid transparent;
  background: transparent;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  cursor: pointer;
  opacity: 0.8;
}
.guide-strip-btn[aria-current="true"] { border-bottom-color: var(--c-accent); opacity: 1; }
.guide-strip-sprite { display: block; width: 22px; max-width: 100%; height: auto; aspect-ratio: 1; }
.guide-strip-btn[aria-current="true"] .guide-strip-sprite { width: 28px; }

/* R-024.7: the card — the popup cards' panel, ink border and drop. */
.guide-card {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 16px 16px;
  border-radius: 32px;
  background: var(--c-panel);
  border: 4px solid var(--c-text);
  box-shadow: 0 8px 0 var(--c-text);
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow: hidden;
  /* R-024.9: vertical drags scroll the body; horizontal ones reach the
     swipe handler as pointer events. */
  touch-action: pan-y;
}
.guide-art {
  position: relative;
  flex-shrink: 0;
  height: 148px;
  border-radius: 22px;
  border: 3px solid var(--c-text);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6px;
}
.guide-art-sprite { display: block; width: 150px; height: 136px; max-width: 100%; }
.guide-chip { position: absolute; top: 10px; border-radius: 999px; font-weight: 700; }
.guide-chip--tier { left: 10px; padding: 3px 10px; background: var(--c-text); color: var(--c-surface); font-size: 14px; }
.guide-chip--stage { right: 10px; padding: 2px 10px; background: var(--c-surface); border: 2px solid var(--c-text); font-size: 13px; }

/* R-024.7: only this part scrolls when the content is taller than the card. */
.guide-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.guide-head { display: flex; flex-direction: column; gap: 2px; }
.guide-name { margin: 0; font-size: 30px; line-height: 1.05; }
/* Secondary text: the same 0.7 fade as .popup-note (cards.css). */
.guide-role { margin: 0; font-size: 15px; font-weight: 600; opacity: 0.7; }
.guide-quote {
  margin: 2px 0 0;
  padding: 8px 12px;
  border-radius: 16px;
  background: var(--c-surface);
  border: 3px solid var(--c-text);
  font-size: 17px;
  line-height: 1.2;
}
.guide-story { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.38; }
.guide-lines { display: flex; flex-direction: column; gap: 5px; font-size: 14px; font-weight: 500; line-height: 1.3; }
.guide-line { display: flex; gap: 8px; align-items: flex-start; }
.guide-line-icon { flex-shrink: 0; margin-top: 1px; }
.guide-heart { fill: var(--c-accent); stroke: var(--c-text); }
.guide-disc { fill: var(--c-muted); stroke: var(--c-text); }
.guide-cross { fill: none; stroke: var(--c-text); stroke-linecap: round; }
.guide-foot {
  margin: auto 0 0;
  padding-top: 8px;
  border-top: 2px dashed var(--c-railShade);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}
.guide-family, .guide-pun-text { opacity: 0.7; }

/* R-024.8: previous / counter / next. */
.guide-bottom { position: relative; flex-shrink: 0; height: 60px; display: flex; align-items: center; justify-content: space-between; }
.guide-step {
  width: 72px;
  height: 56px;
  padding: 0 0 4px;
  border-radius: 18px;
  border: 3px solid var(--c-text);
  color: var(--c-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.guide-step--prev { background: var(--c-surface); box-shadow: inset 0 -5px 0 var(--c-muted), 0 4px 0 var(--c-text); }
.guide-step--next { background: var(--c-primary); box-shadow: inset 0 -5px 0 var(--c-primaryLip), 0 4px 0 var(--c-text); }
.guide-step:active:not([disabled]) { transform: translateY(4px); }
.guide-step[disabled] {
  background: var(--c-muted);
  border-color: var(--c-mutedLine);
  color: var(--c-mutedLine);
  box-shadow: none;
  cursor: default;
}
.guide-counter {
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--c-surface);
  border: 3px solid var(--c-text);
  font-weight: 700;
  font-size: 17px;
}

/* R-024.3: the Settings row button (layout like docs/design/Settings.dc.html). */
.guide-btn { min-height: 56px; padding: 0 16px 0 10px; justify-content: flex-start; gap: 10px; font-size: 18px; color: var(--c-text); }
.guide-btn-sprite { width: 32px; height: 32px; flex-shrink: 0; display: block; }
.guide-btn-label { flex-grow: 1; text-align: left; }
.guide-btn-chev { display: flex; flex-shrink: 0; }