/*
 * PDF 工具
 *
 * Claude 風格：暖米畫布、白色表面、Book Cloth 橘作為唯一強調色。
 * 層次靠「畫布 → 卡片 → 凹陷區」三層底色建立，而不是靠陰影堆疊。
 *
 * 每一份輸出是一張白卡片，卡片裡的頁面預覽再往內凹一層 ——
 * 那層凹陷加上常駐捲軸，就是「這裡可以橫著拉」的訊號。
 */

:root {
  --canvas: #f0eee6;
  --surface: #ffffff;
  --sunken: #f6f4ec;

  --ink: #191919;
  --ink-soft: #5f5e5b;
  --ink-faint: #8c8a83;

  --line: #ddd9cb;
  --line-soft: #e8e5d9;

  --accent: #cc785c;
  --accent-hover: #b65f42;
  --accent-tint: #f8ebe4;

  --danger: #a8362a;
  --danger-tint: #faece9;

  --radius: 12px;
  --radius-sm: 8px;

  --sans: "Styrene B", -apple-system, BlinkMacSystemFont, "Segoe UI",
          "PingFang TC", "Noto Sans TC", "Helvetica Neue", sans-serif;

  --bar-height: 60px;
}

* { box-sizing: border-box; }

/* id 選擇器上的 display 特異性高過 [hidden] 的預設值，會讓 hidden 失效。
   這裡把它釘死，否則覆蓋層與工作區會同時出現在畫面上。 */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 15px/1.65 var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;

  /* 訊息在上、內容填滿剩下的空間 —— 錯誤橫幅不會把開始畫面推出視窗 */
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* 焦點：統一成橘色細環，有問題時整個轉紅。
   拿掉瀏覽器預設的藍色 outline —— 它會蓋過錯誤的紅框，看不出哪一格填錯了。 */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.bi { line-height: 1; }

@keyframes spin { to { transform: rotate(360deg); } }
.spin { display: inline-block; animation: spin 1.1s linear infinite; }

/* ── 按鈕 ───────────────────────────────────────────────── */

button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  transition: background-color .13s, border-color .13s, color .13s;
}

button:hover {
  background: var(--sunken);
  border-color: var(--ink-faint);
}

button:disabled {
  color: var(--ink-faint);
  border-color: var(--line-soft);
  background: transparent;
  cursor: not-allowed;
}

button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button.primary:disabled { background: var(--line-soft); border-color: var(--line-soft); color: var(--ink-faint); }

/* ── 輸入 ───────────────────────────────────────────────── */

input {
  font: inherit;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  transition: border-color .13s;
}

input:hover { border-color: var(--ink-faint); }

input[type="number"] { width: 4.8em; }

input[type="text"] {
  flex: 1 1 auto;
  min-width: 8em;
}

input.invalid { border-color: var(--danger); }
input.invalid:focus-visible { outline-color: var(--danger); }

/* ── 開始畫面：整個視窗都是拖放區 ─────────────────────────── */

#drop-zone {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}

.intro-mark {
  font-size: 40px;
  color: var(--accent);
}

.intro h1 {
  margin: 20px 0 0;
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.25;
}

.intro-alt {
  margin: 14px 0 0;
  font-size: 17px;
  color: var(--ink-soft);
}

/* 「選擇檔案」是句子裡的一個動作，不是一顆方塊按鈕 */
#pick-file {
  display: inline;
  border: 0;
  padding: 0;
  background: none;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  border-radius: 0;
  font-size: inherit;
}
#pick-file:hover {
  background: none;
  color: var(--accent-hover);
  border-bottom-color: var(--accent-hover);
}

/* 拖曳中：整個視窗回應，不只中間那塊 */
#drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  /* 純視覺，不參與拖曳事件 —— 否則它自己會干擾進出計數 */
  pointer-events: none;
  background: rgba(240, 238, 230, .9);
  display: flex;
  padding: 14px;
}

.drop-overlay-frame {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
  font-size: 19px;
  color: var(--accent);
}
.drop-overlay-frame .bi { font-size: 34px; }

/* ── 載入守門（見 index.html 的說明） ───────────────────── */

#boot-error {
  position: fixed;
  left: 16px;
  right: 16px;
  top: 16px;
  z-index: 100;
  padding: 14px 16px;
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  background: var(--danger-tint);
  color: var(--danger);

  /* 預設看不見，過幾秒才浮現。ui.js 正常跑起來的話早就把它藏掉了。 */
  visibility: hidden;
  animation: boot-warn 0s linear 6s forwards;
}
#boot-error strong { display: block; font-weight: 600; }
#boot-error p { margin: 2px 0 0; color: var(--ink-soft); }

@keyframes boot-warn { to { visibility: visible; } }

body.ready #boot-error { display: none; }

/* ── 訊息 ───────────────────────────────────────────────── */

#error-banner {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 16px 16px 0;
  padding: 14px 16px;
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  background: var(--danger-tint);
}
#error-banner > .bi { color: var(--danger); font-size: 17px; margin-top: 3px; }
.banner-text { flex: 1; min-width: 0; }
#error-banner strong { display: block; color: var(--danger); font-weight: 600; }
#error-banner p { margin: 2px 0 0; color: var(--ink-soft); }

#error-close {
  flex: 0 0 auto;
  border: 0;
  background: none;
  color: var(--danger);
  padding: 4px 6px;
}
#error-close:hover { background: rgba(168, 54, 42, .1); border-color: transparent; }

/* ── 工作區 ─────────────────────────────────────────────── */

#workspace {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--bar-height);
  padding: 0 16px 0 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-size: 18px;
  text-decoration: none;
  transition: background-color .13s;
}
.logo:hover { background: var(--accent-tint); }

.doc {
  flex: 1;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

#source-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#source-pages {
  flex: 0 0 auto;
  color: var(--ink-faint);
  font-weight: 400;
}

.bar-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
}

.columns {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 132px 1fr;
}

/* ── 左欄：整份文件 ─────────────────────────────────────── */

#thumbnails {
  overflow-y: auto;
  padding: 16px 14px 40px;
  border-right: 1px solid var(--line);
  background: var(--sunken);
}

#thumbnails figure {
  margin: 0 0 14px;
  text-align: center;
}

#thumbnails canvas {
  display: block;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
}

#thumbnails figcaption {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-faint);
}

/* ── 右欄：每一份是一張卡片 ─────────────────────────────── */

#ranges {
  overflow-y: auto;
  padding: 18px 20px 40px;
}

#preview-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 16px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 14px;
}
#preview-warning .bi { margin-top: 3px; flex: 0 0 auto; }

.range {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}

.range-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.range-span {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-soft);
}

.range-download, .range-remove { flex: 0 0 auto; }
.range-remove { color: var(--ink-soft); }
.range-remove:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-tint); }

.range-error {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 12px 0 0;
  color: var(--danger);
  font-size: 14px;
}

/*
 * 頁面預覽：往內凹一層。
 * 這層底色加上常駐的捲軸，就是「這裡可以橫著拉」的訊號 ——
 * 不然一整排頁面被切在卡片邊緣，看不出來後面還有。
 */
.range-pages {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  border-radius: var(--radius-sm);
  overflow-x: auto;

  /*
   * 邊緣陰影：內容超出時左右自動浮現，捲到底就消失。
   * macOS 的捲軸平常是藏起來的，光靠它沒人知道還能往右拉，
   * 這組漸層是純 CSS 的「還有更多」訊號（background-attachment 的 local
   * 讓前兩層跟著內容捲、後兩層固定在容器邊緣）。
   */
  background-color: var(--sunken);
  background-image:
    linear-gradient(to right, var(--sunken) 30%, rgba(246, 244, 236, 0)),
    linear-gradient(to left, var(--sunken) 30%, rgba(246, 244, 236, 0)),
    radial-gradient(farthest-side at 0 50%, rgba(25, 25, 25, .3), rgba(25, 25, 25, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(25, 25, 25, .3), rgba(25, 25, 25, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 22px 100%, 22px 100%;
  background-attachment: local, local, scroll, scroll;
}
.range-pages:empty { display: none; }

/* 捲軸常駐而且看得見 —— macOS 預設會把它藏起來，那樣就沒人知道還能往右拉 */
.range-pages::-webkit-scrollbar { height: 10px; }
.range-pages::-webkit-scrollbar-track {
  background: rgba(25, 25, 25, .05);
  border-radius: 5px;
}
.range-pages::-webkit-scrollbar-thumb {
  background: var(--ink-faint);
  border-radius: 5px;
}
.range-pages::-webkit-scrollbar-thumb:hover { background: var(--ink-soft); }
/* 不要設 scrollbar-width —— 它會讓 Chrome 改用 macOS 的浮動捲軸，
   平常整條藏起來，前面那些設定就白做了。 */

.range-pages figure {
  flex: 0 0 auto;
  width: 76px;
  margin: 0;
  text-align: center;
}

.range-pages canvas {
  display: block;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
}

.range-pages figcaption {
  margin-top: 5px;
  font-size: 12px;
  color: var(--ink-faint);
}

/*
 * 範圍超出文件頁數時的那幾頁：沒有紙可以顯示，所以不畫空白框，
 * 只留一個紅色頁碼站在原地，跟旁邊的頁碼對齊。
 */
.range-pages .page-missing {
  flex: 0 0 auto;
  width: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  color: var(--danger);
  font-size: 12px;
}

/* ── 右下角的提示 ───────────────────────────────────────── */

#toast-area {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px 11px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 6px 22px rgba(25, 25, 25, .13);
  color: var(--ink-soft);
  font-size: 14px;
  pointer-events: auto;
  animation: toast-in .18s ease-out;
}
.toast .bi { color: var(--ink-faint); }
.toast button { padding: 4px 11px; }
.toast--busy .bi { color: var(--accent); }

.toast-label {
  max-width: 22em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
}

/* 靠右，跟上面每張卡片的動作按鈕對齊在同一條線上 */
#add-range {
  display: flex;
  margin-left: auto;
  color: var(--ink-soft);
}
#add-range:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-tint); }

/* ── 窄畫面：左欄改成橫躺的一條 ─────────────────────────── */

@media (max-width: 720px) {
  .columns {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  #thumbnails {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 14px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  #thumbnails figure { flex: 0 0 auto; width: 72px; margin: 0; }
  .bar { height: auto; padding: 12px 16px; flex-wrap: wrap; gap: 12px; }
  #ranges { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  /* 只停掉裝飾性的動態。#boot-error 的動畫是功能性的，停掉會讓守門失效。 */
  .spin, .toast { animation: none !important; }
}