/* =========================================================
   components.css — reusable UI pieces that sit on top of the page
   (overlays, sheets, debug panel). Load after sections.css.
   ========================================================= */

/* ----- Xiaohongshu logo badge -----
   Official look: white 小红书 wordmark on a red (#FF2442) rounded tile.
   Default = text badge. When the <img> (assets/images/brand/xiaohongshu.svg) loads,
   main.js (initXhsLogo) adds .has-icon and the SVG wordmark replaces the text.
   The filter turns any single-colour wordmark (Simple Icons' black file, or a coloured one)
   into white. An <img> is used rather than a CSS mask because Chrome blocks mask images
   when the page is opened as a local file (file://). */
.xhs-logo {
  --xhs-red: #e03a4e;   /* brand red #ff2442, slightly toned down to sit calmer next to the gold/green */
  display: inline-flex; align-items: center; justify-content: center;
  height: 24px; padding: 0 7px;
  background: var(--xhs-red); color: var(--white);
  border-radius: 6px;
  font-family: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; line-height: 1;
}
.xhs-logo__glyph { display: none; }
.xhs-logo.has-icon { padding: 0 5px; }
.xhs-logo.has-icon .xhs-logo__text { display: none; }
.xhs-logo.has-icon .xhs-logo__glyph {
  display: block;
  /* the wordmark fills the width of a 24×24 viewBox but only its middle third vertically
     (y ≈ 7.7–16.3): a 36×14 box with object-fit: cover crops to exactly the text */
  width: 36px; height: 14px; object-fit: cover;
  filter: brightness(0) invert(1);   /* any colour → white */
}

/* ----- Xiaohongshu link: shared overlay (see assets/js/xhs-link.js) ----- */
.xhs-lock, .xhs-lock body { overflow: hidden; }

.xhs-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; justify-content: center;
  padding: 16px;
  background: rgba(10, 25, 14, .72);
  animation: xhs-fade .2s ease-out;
}
.xhs-guide { align-items: flex-start; padding-top: 120px; }
.xhs-sheet { align-items: flex-end; padding: 0; }

.xhs-card {
  position: relative;
  width: 100%; max-width: 400px;
  padding: 28px 24px 22px;
  background: var(--white); color: var(--card-text);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  text-align: center;
  animation: xhs-rise .25s var(--ease);
}
.xhs-card--sheet {
  max-width: 520px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding-bottom: calc(22px + env(safe-area-inset-bottom));
}
.xhs-card__title { font-size: 22px; color: var(--green-deepest); margin: 0 0 8px; }
.xhs-card__text { margin: 0 0 14px; font-size: 15px; line-height: 1.6; }
.xhs-card__text--small { font-size: 13px; color: var(--muted); }
.xhs-card__close {
  position: absolute; top: 8px; right: 10px;
  width: 36px; height: 36px; border: 0; background: none;
  font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer;
}
.xhs-card .btn { box-shadow: none; }
.xhs-card .btn.is-done { background: var(--green-dark); color: var(--white); }
.xhs-card__link {
  display: inline-block; margin-top: 14px;
  font-size: 14px; color: var(--green-dark); font-weight: 500;
}
.xhs-card__row { display: flex; gap: 10px; margin-top: 12px; }
.xhs-card__secondary {
  flex: 1; padding: 11px 8px;
  font: inherit; font-size: 14px; font-weight: 500;
  color: var(--green-deepest); background: #eef4ee;
  border: 0; border-radius: 999px; cursor: pointer;
}
.xhs-card__secondary:hover { background: #e1ece2; }

.xhs-steps {
  margin: 0 auto 14px; padding: 12px 16px 12px 36px;
  width: fit-content; text-align: left;
  background: #f3f7f3; border-radius: var(--radius);
  font-size: 15px; line-height: 1.9;
}
.xhs-steps b { color: var(--green-deepest); }

/* long-press-to-copy fallback, shown only if copying fails */
.xhs-url {
  margin: 12px 0 0; padding: 10px;
  font-size: 12px; line-height: 1.5; word-break: break-all; text-align: left;
  background: #f3f7f3; border-radius: var(--radius);
  user-select: all; -webkit-user-select: all;
}
.xhs-url[hidden] { display: none; }

/* arrow pointing at the in-app browser's "···" menu (top-right) */
.xhs-guide__arrow {
  position: absolute; top: 10px; right: 18px;
  color: var(--gold-light);
  animation: xhs-nudge 1.2s ease-in-out infinite;
}

@keyframes xhs-fade { from { opacity: 0; } }
@keyframes xhs-rise { from { opacity: 0; transform: translateY(20px); } }
@keyframes xhs-nudge { 50% { transform: translate(4px, -4px); } }

/* ----- Debug panel (only with ?xhs_debug=1) ----- */
.xhs-debug {
  position: fixed; left: 8px; bottom: 8px; z-index: 2000;
  width: min(560px, calc(100vw - 16px)); max-height: 40vh; overflow: auto;
  margin: 0; padding: 8px 10px;
  font: 11px/1.45 ui-monospace, Menlo, Consolas, monospace;
  white-space: pre-wrap; word-break: break-all;
  color: #d9f99d; background: rgba(0, 0, 0, .85);
  border-radius: 6px;
}