/*!
 * Site Name v1.0
 * Designed and Developed by Urban Air Design Limited (https://urbanairdesign.com/en/)
 * Copyright 2026 Urban Air Design Limited
 */
:root {
  --bg: #f2f2f2;
  --ink: #333;
  --accent: #b5121b;
  --toolbar-bg: #ffffff;
  --btn-bg: #ffffff;
  --btn-border: #c9c9c9;
  --btn-hover: #f0f0f0;

  /* Source page geometry (one page). Used for proportional calc. */
  --page-w: 1240;
  --page-h: 1754;
  /* Two-page spread aspect ratio: width/height = (2*1240)/1754 = 1.4142 */
  --spread-ratio: calc(2 * var(--page-w) / var(--page-h));
  /* Single-page portrait ratio: 1240/1754 = 0.7071 */
  --portrait-ratio: calc(var(--page-w) / var(--page-h));

  /* Vertical chrome reserved (masthead + toolbar + hint + padding) */
  --chrome-h: 180px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family:
    "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC",
    Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.app {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  /* dynamic viewport unit so iOS Safari bottom bar does not chop content */
  min-height: 100svh;
}

.masthead {
  text-align: center;
  padding: clamp(10px, 2.4vw, 18px) 16px 6px;
}

.masthead h1 {
  margin: 0;
  font-size: clamp(0.95rem, 2.6vw, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.masthead p {
  margin: 4px 0 0;
  font-size: clamp(0.7rem, 2vw, 0.8rem);
  color: #777;
}

.stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(6px, 1.6vw, 12px);
  min-height: 0;
}

/* ------------------------------------------------------------------ *
 * Proportional sizing.
 *
 * The flipbook container width is whichever of these is smallest:
 *   - available container width (100%)
 *   - viewport-height minus chrome, multiplied by aspect ratio
 *     (so the book never gets cropped vertically)
 *   - explicit cap (1100px / 1000px) so it stays readable on huge
 *     desktops
 * The library reads this width and computes its own canvas height,
 * keeping page proportions perfect.
 * ------------------------------------------------------------------ */
#flipbook {
  width: 100%;
  max-width: min(750px, calc((100svh - var(--chrome-h)) * var(--spread-ratio)));
  margin: 0 auto;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: clamp(8px, 1.8vw, 12px) 16px clamp(14px, 2.4vw, 22px);
}

.toolbar button {
  font: inherit;
  font-size: clamp(0.82rem, 2.2vw, 0.9rem);
  /* 44px min hit target for touch */
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--btn-border);
  border-radius: 6px;
  background: var(--btn-bg);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease;
}

.toolbar button:hover:not(:disabled) {
  background: var(--btn-hover);
}
.toolbar button:disabled {
  opacity: 0.4;
  cursor: default;
}

.toolbar .pageinfo {
  min-width: 80px;
  text-align: center;
  font-size: clamp(0.78rem, 2vw, 0.85rem);
  color: #555;
}

.hint {
  text-align: center;
  font-size: clamp(0.68rem, 1.8vw, 0.75rem);
  color: #999;
  padding: 0 16px 14px;
}

.csp-badge {
  display: inline-block;
  margin: 0 auto 10px;
  padding: 4px 12px;
  font-size: 0.72rem;
  border: 1px solid #cfe3cf;
  background: #eef7ee;
  color: #2e7d32;
  border-radius: 999px;
}

/* ------------------------------------------------------------------ *
 * Phone-portrait breakpoint.
 * StPageFlip auto-switches to single-page (portrait) mode via
 * usePortrait:true at narrow widths, so the container's aspect ratio
 * also flips. Recompute max-width using the portrait ratio so the
 * page still fits vertically without cropping.
 * ------------------------------------------------------------------ */
@media (max-width: 600px) {
  :root {
    --chrome-h: 200px;
  }
  #flipbook {
    max-width: min(
      100%,
      calc((100svh - var(--chrome-h)) * var(--portrait-ratio))
    );
  }
  .toolbar {
    gap: 8px;
  }
  .hint {
    padding-bottom: 18px;
  }
}

/* 細螢幕手機 – 收窄 masthead 留多啲位畀書本 */
@media (max-width: 380px) {
  .masthead {
    padding-top: 8px;
  }
  .masthead p {
    display: none;
  }
}

/* 橫向手機 / 平板 – 上下chrome細, 畀書本闊啲 */
@media (max-height: 500px) {
  :root {
    --chrome-h: 140px;
  }
  .masthead {
    padding: 6px 16px 2px;
  }
  .hint {
    display: none;
  }
}

/* ------------------------------------------------------------------ *
 * 互動目錄 (Interactive Table of Contents)
 * 左方滑出 panel + 半透明遮罩。喺 .app 之外、fixed 喺 viewport，
 * 唔會影響 flipbook 嘅 layout 計算。
 * ------------------------------------------------------------------ */
.toc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 90;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.toc-overlay.is-open {
  opacity: 1;
}

.toc-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(380px, 86vw);
  background: #ffffff;
  z-index: 100;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
  transform: translateX(-100%);
  transition: transform 0.25s ease;
}
.toc-panel.is-open {
  transform: translateX(0);
}

.toc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid #e0e0e0;
  background: #fafafa;
}
.toc-header h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
}
#toc-close {
  font: inherit;
  font-size: 1.6rem;
  line-height: 1;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: #555;
  cursor: pointer;
  border-radius: 4px;
}
#toc-close:hover {
  background: #ececec;
}

/* 可滾動嘅章節清單 */
.toc-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 6px 0 12px;
  -webkit-overflow-scrolling: touch;
}

/* 每個 entry 用 button，整行可撳 */
.toc-entry {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.4;
  padding: 8px 16px;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.toc-entry:hover {
  background: #f4f4f4;
}
.toc-entry:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.toc-entry.is-current {
  background: #fcefef;
  border-left-color: var(--accent);
}
.toc-entry .toc-title {
  flex: 1 1 auto;
}
.toc-entry .toc-page {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: #999;
  font-size: 0.82rem;
}

/* 層級縮進 */
.toc-entry.level-1 {
  font-weight: 700;
  padding-top: 14px;
  padding-bottom: 8px;
  color: var(--accent);
}
.toc-entry.level-2 {
  padding-left: 28px;
}
.toc-entry.level-3 {
  padding-left: 44px;
  font-size: 0.85rem;
  color: #555;
}

#toc-toggle {
  font-weight: 600;
}

/* Desktop 寬屏：遮罩淡啲，畀人見到書仲喺度 */
@media (min-width: 1024px) {
  .toc-overlay {
    background: rgba(0, 0, 0, 0.25);
  }
}

/* ------------------------------------------------------------------ *
 * 社交分享列 (Social share bar)
 * Icon 按鈕撳咗開新 tab 分享 URL。全部同源，冇第三方 widget、
 * iframe 或 external script。Icon 用 inline SVG (係 HTML markup，
 * 唔係 <style>/<script>)。
 * ------------------------------------------------------------------ */
.share-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 16px 20px;
  position: relative;
}
.share-label {
  font-size: 0.8rem;
  color: #666;
  margin-right: 4px;
}
.share-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--btn-border);
  border-radius: 50%;
  background: var(--btn-bg);
  color: #555;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.share-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}
.share-btn:hover,
.share-btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  color: var(--accent);
  background: #fdf4f4;
}
.share-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(181, 18, 27, 0.2);
}

/* 每個平台 hover 時用番自己嘅品牌色 */
.share-btn[data-share="facebook"]:hover {
  color: #1877f2;
  border-color: #1877f2;
}
.share-btn[data-share="x"]:hover {
  color: #000000;
  border-color: #000000;
}
.share-btn[data-share="linkedin"]:hover {
  color: #0a66c2;
  border-color: #0a66c2;
}
.share-btn[data-share="whatsapp"]:hover {
  color: #25d366;
  border-color: #25d366;
}
.share-btn[data-share="email"]:hover {
  color: #555;
  border-color: #555;
}
.share-btn[data-share="copy"]:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* 「已複製」提示 */
.share-toast {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  font-size: 0.75rem;
  padding: 6px 12px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.share-toast.is-visible {
  opacity: 1;
}

/* 手機：按鈕細啲、隱藏 label 慳位 */
@media (max-width: 480px) {
  .share-bar {
    gap: 6px;
    padding-bottom: 14px;
  }
  .share-label {
    display: none;
  }
  .share-btn {
    width: 36px;
    height: 36px;
  }
  .share-btn svg {
    width: 18px;
    height: 18px;
  }
}

/* ------------------------------------------------------------------ *
 * Floating action buttons (FAB) — corner-anchored controls.
 *
 * .fab             base circular button
 * .fab-tl          fixed top-left
 * .fab-tr          fixed top-right
 * .fab-share-wrap  positioning wrapper (holds the share popover)
 *
 * Sits above the flipbook but below the TOC panel/overlay.
 * ------------------------------------------------------------------ */
.fab {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--btn-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.fab svg {
  width: 22px;
  height: 22px;
  display: block;
}
.fab:hover,
.fab:focus-visible {
  outline: none;
  border-color: var(--accent);
  color: var(--accent);
  background: #ffffff;
}
.fab:focus-visible {
  box-shadow:
    0 0 0 3px rgba(181, 18, 27, 0.25),
    0 2px 8px rgba(0, 0, 0, 0.15);
}
.fab:active {
  transform: scale(0.96);
}
.fab[aria-expanded="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.fab-tl {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 80;
}
.fab-tr {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 80;
}

/* ------------------------------------------------------------------ *
 * Share popover (dropdown card anchored under the share FAB)
 * ------------------------------------------------------------------ */
.share-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  padding: 12px 12px 10px;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top right;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
  pointer-events: none;
}
.share-popover.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.share-popover-title {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Inside the popover, the share bar becomes a compact icon grid. */
.share-popover .share-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  position: static;
}
.share-popover .share-label {
  display: none;
}
.share-popover .share-btn {
  width: 40px;
  height: 40px;
}
.share-popover .share-btn svg {
  width: 20px;
  height: 20px;
}
.share-popover .share-toast {
  bottom: -34px;
  top: auto;
}

/* Phone */
@media (max-width: 480px) {
  .fab {
    width: 40px;
    height: 40px;
  }
  .fab svg {
    width: 20px;
    height: 20px;
  }
  .fab-tl {
    top: 8px;
    left: 8px;
  }
  .fab-tr {
    top: 8px;
    right: 8px;
  }
  .share-popover {
    min-width: 220px;
    padding: 10px;
  }
}

/* Landscape phones (very short viewport) */
@media (max-height: 500px) {
  .fab {
    width: 36px;
    height: 36px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  }
  .fab svg {
    width: 18px;
    height: 18px;
  }
}