/* ============================================================
   Speedy TWAC — Landing + Login (static, Cloudflare Pages root '/')
   暖紙感 + 襯線高級感 + 人文溫度。
   色票/字型照搬 design-system/tokens.css（inline 以免依賴 deploy 路徑）。
   - 標題用 Noto Serif TC；內文/UI/數字用 Noto Sans TC（tabular-nums 空心 0）。
   - 主色磚紅 #B04F2F；press #9A3F22。
   - 無 IBM Plex Mono、無手寫字、無 bottom sheet、無筆記本橫線。
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;600;700&family=Noto+Serif+TC:wght@500;600;700;900&display=swap");

:root {
  /* warm paper */
  --paper-50:  #FFFCF4;
  --paper-100: #FAF5EB;
  --paper-200: #F3EDDE;
  --paper-300: #E8DFCC;
  --paper-400: #D8CCB4;
  --paper-500: #C9BCA4;

  --ink-900: #2B2117;
  --ink-700: #4A3C2E;
  --ink-500: #6B5D4C;
  --ink-400: #8A7F70;
  --ink-300: #B5A99A;

  /* terracotta */
  --terracotta-600: #9A3F22;  /* press */
  --terracotta-500: #B04F2F;  /* primary CTA */
  --terracotta-400: #D4633F;
  --terracotta-100: #FBE7DE;
  --terracotta-50:  #FDF3ED;

  --sage-500: #3E7D5C;
  --rouge-500: #C8332A;

  /* semantic */
  --bg:            var(--paper-100);
  --bg-elev:       var(--paper-50);
  --bg-sunk:       var(--paper-200);
  --fg:            var(--ink-900);
  --fg-2:          var(--ink-700);
  --fg-3:          var(--ink-500);
  --fg-muted:      var(--ink-400);
  --fg-on-primary: #FFF8F2;
  --border:        var(--paper-300);
  --border-strong: var(--paper-500);
  --rule:          var(--paper-400);

  --primary:       var(--terracotta-500);
  --primary-ink:   var(--terracotta-600);
  --primary-soft:  var(--terracotta-100);
  --primary-faint: var(--terracotta-50);
  --danger:        var(--rouge-500);

  /* typography */
  --font-serif: "Noto Serif TC", "Songti TC", "STSong", Georgia, serif;
  --font-sans:  "Noto Sans TC", -apple-system, BlinkMacSystemFont,
                "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --num-feat: "tnum" 1;

  --fz-2xs: 11px; --fz-xs: 12px; --fz-sm: 14px; --fz-md: 16px;
  --fz-lg: 18px;  --fz-xl: 22px; --fz-2xl: 28px; --fz-3xl: 36px; --fz-4xl: 48px;
  --lh-tight: 1.15; --lh-snug: 1.3; --lh-base: 1.5; --lh-loose: 1.7;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-2xl: 28px;
  --r-pill: 999px;

  --sh-sm: 0 1px 0 rgba(70,50,30,.04), 0 2px 6px -3px rgba(70,50,30,.14);
  --sh-md: 0 2px 0 rgba(70,50,30,.04), 0 6px 16px -6px rgba(70,50,30,.18);
  --sh-primary: 0 8px 24px -10px rgba(176,79,47,.55);
  --sh-dialog: 0 18px 50px -12px rgba(43,33,23,.30);
  /* login overlay 卡用較柔的暖 shadow（spec: soft warm shadow） */
  --sh-card: 0 8px 30px rgba(43,33,23,.10);

  --ease-ios:    cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 380ms;

  --tap-min: 44px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 數字 helper — 護照號/航班/日期/ID/驗證碼 一律掛 .num（空心 0 + 等寬對齊） */
.num {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--num-feat);
  letter-spacing: .01em;
}
.serif { font-family: var(--font-serif); }

/* ============================================================
   1) 登入 overlay — 全螢幕 fixed cover（非 bottom sheet）
   ============================================================ */
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--safe-top) + 24px) 20px calc(var(--safe-bottom) + 24px);
  background: var(--bg);
  overflow: auto;
  animation: auth-fade var(--dur-base) var(--ease-out);
}
.auth-overlay[hidden] { display: none; }

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--bg-elev);          /* cream #FFFCF4 */
  border: 1px solid var(--border);     /* #E8DFCC */
  border-radius: var(--r-lg);          /* 16 */
  padding: 28px 24px;
  box-shadow: var(--sh-card);
  animation: auth-pop var(--dur-base) var(--ease-out);
}

.auth-title {
  font-family: var(--font-serif);
  font-size: var(--fz-xl);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--fg);
  margin: 0 0 8px;
  line-height: var(--lh-snug);
}
.auth-sub {
  font-size: var(--fz-sm);
  color: var(--fg-3);
  margin: 0 0 20px;
  line-height: var(--lh-base);
}
.auth-sub strong { color: var(--fg-2); font-weight: 600; }

.auth-label {
  display: block;
  font-size: var(--fz-xs);
  color: var(--fg-3);
  margin: 0 0 6px;
  letter-spacing: .02em;
}

.auth-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-size: var(--fz-md);             /* 16 — 防 iOS zoom */
  font-family: var(--font-sans);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #fff;
  color: var(--fg);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.auth-input::placeholder { color: var(--ink-300); }
.auth-input:focus { border-color: var(--primary); }

/* 單一寬欄驗證碼（非 6 分離 box，避開 React stale-commit 雷） */
.auth-code {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--num-feat);
  letter-spacing: .55em;
  text-indent: .55em;                  /* 補正 letter-spacing 造成的右偏，使視覺置中 */
  text-align: center;
  font-size: var(--fz-2xl);
  font-weight: 600;
  padding: 14px;
}

/* Turnstile 容器 — 預留高度避免跳動 */
.auth-turnstile {
  margin-top: 16px;
  min-height: 65px;
  display: flex;
  justify-content: center;
}

.auth-btn {
  width: 100%;
  margin-top: 16px;
  padding: 14px;
  font-size: var(--fz-md);
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--fg-on-primary);
  background: var(--primary);          /* solid #B04F2F */
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  box-shadow: var(--sh-primary);
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.auth-btn:hover { background: var(--primary-ink); }
.auth-btn:active { transform: scale(.985); background: var(--primary-ink); }
.auth-btn:disabled { opacity: .6; cursor: default; box-shadow: none; }

/* error <p> — min-height 防跳動 */
.auth-err {
  min-height: 1.25em;
  margin: 12px 0 0;
  font-size: var(--fz-xs);
  line-height: 1.4;
  color: var(--danger);
}
.auth-err.is-hint { color: var(--fg-muted); }

.auth-links {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  font-size: var(--fz-sm);
}
.auth-links a {
  color: var(--primary);
  text-decoration: none;
  cursor: pointer;
  padding: 4px 2px;
  -webkit-tap-highlight-color: transparent;
}
.auth-links a:active { color: var(--primary-ink); }

/* ============================================================
   2) Landing（登入後）
   ============================================================ */
.landing {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--safe-top) + 20px) 20px calc(var(--safe-bottom) + 40px);
  animation: auth-fade var(--dur-base) var(--ease-out);
}
.landing[hidden] { display: none; }

.landing-topbar {
  width: 100%;
  max-width: 560px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 32px;
}
.logout-btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-muted);
  font-family: var(--font-sans);
  font-size: var(--fz-xs);
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast);
  -webkit-tap-highlight-color: transparent;
}
.logout-btn:hover { color: var(--fg-2); border-color: var(--border); }
.logout-btn:disabled { opacity: .5; cursor: default; }

.landing-hero {
  width: 100%;
  max-width: 560px;
  margin-top: 28px;
  margin-bottom: 28px;
  text-align: center;
}
.landing-brand {
  font-family: var(--font-serif);
  font-size: var(--fz-3xl);
  font-weight: 900;
  letter-spacing: .01em;
  color: var(--fg);
  margin: 0;
  line-height: var(--lh-tight);
}
.landing-tagline {
  font-size: var(--fz-sm);
  color: var(--fg-3);
  margin: 10px 0 0;
  line-height: var(--lh-base);
}
.landing-email {
  font-size: var(--fz-xs);
  color: var(--fg-muted);
  margin: 6px 0 0;
}

.tool-cards {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.tool-card {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  text-decoration: none;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 22px;
  color: var(--fg);
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.tool-card:hover {
  border-color: var(--primary);
  box-shadow: var(--sh-md);
}
.tool-card:active { transform: scale(.99); }

.tool-card-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--primary-faint);
  color: var(--primary);
}
.tool-card-icon svg { width: 28px; height: 28px; display: block; }

.tool-card-body { flex: 1 1 auto; min-width: 0; }
.tool-card-title {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--fz-xl);
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 4px;
  line-height: var(--lh-snug);
}
.tool-card-desc {
  display: block;
  font-size: var(--fz-sm);
  color: var(--fg-3);
  margin: 0;
  line-height: var(--lh-snug);
}

.tool-card-arrow {
  flex-shrink: 0;
  color: var(--ink-300);
  transition: color var(--dur-base), transform var(--dur-base) var(--ease-out);
}
.tool-card-arrow svg { width: 22px; height: 22px; display: block; }
.tool-card:hover .tool-card-arrow {
  color: var(--primary);
  transform: translateX(3px);
}

.landing-foot {
  width: 100%;
  max-width: 560px;
  margin-top: auto;
  padding-top: 32px;
  text-align: center;
  font-size: var(--fz-2xs);
  color: var(--ink-300);
}

/* ============================================================
   boot 期間：兩者都 hidden，避免閃爍
   ============================================================ */
.boot-hidden { display: none !important; }

@keyframes auth-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes auth-pop {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-overlay, .auth-card, .landing { animation: none !important; }
  .tool-card:hover .tool-card-arrow { transform: none; }
}

@media (min-width: 480px) {
  .landing-brand { font-size: var(--fz-4xl); }
}