/* 物品借用 — 手機優先
   白底黑字，可以按的地方（按鈕、選起來的選項、連結）一律是藍色。2026-10-02 使用者從三個配色方案挑的：
   兩家公司共用、不偏哪一家的品牌色；工地大太陽下對比最清楚；跟手機內建 App 一樣，看到藍色就知道能按。
   紅色只給錯誤；綠、黃、紅、灰的章是物品狀態，不拿來做別的事。
   逾期也不用這幾個顏色：逾期不是錯誤，也不是物品狀態，所以用黑底白字的牌子（--overdue），最醒目又不跟章搞混。
   預約的重疊提醒同一個道理（只提醒、不擋，不是錯誤）：黑色的左邊條（--reminder）。名字刻意不叫 warn：.stamp-warn、.status-note-warn 是維修中的黃色。
   「預約中」的章跟「借出中」一樣是從借用算出來的，用藍色，但框是虛線、點是空心的：東西還沒拿。
   招牌元素：物品頁最上面那張「標籤」，照實體標籤的層級——物品編號最大、名稱次之，
   章蓋在標籤上，蓋的是這件物品的目前狀態：借出中（從借用算出來的），不然是物品狀態，再來今天有人預約要來拿的是預約中。
   清單上的物品編號也做成一張小標籤（黑框、最粗的字），跟貼在物品上的編號一眼對得上。
   清單整列是連到物品頁的連結：字維持黑色好讀，右邊的「›」是藍色，看到藍色就知道整列能按。 */

:root {
  --ink: #111113;          /* 內文 */
  --ink-2: #45454D;        /* 次要文字 */
  --ink-3: #6A6A73;        /* 說明文字（白底 5.4:1、頁面底色 4.8:1） */
  --brand: #1D4ED8;        /* 可以按的地方：主按鈕、選起來的選項、連結、頁首字（白字在上面 6.7:1） */
  --brand-press: #1E40AF;
  --brand-tint: #E6EDFC;   /* 「借出中」的章（藍字在上面 5.7:1） */
  --canvas: #F2F2F4;       /* 頁面底色 */
  --paper: #FFFFFF;        /* 卡片、標籤 */
  --line: #D1D1D6;         /* 輸入框、按鈕框 */
  --line-soft: #E5E5EA;    /* 卡片內分隔線 */
  --track: #E3E3E8;        /* 分段按鈕的底（比頁面底色深一階，才看得出是一整條） */
  --red: #B21D29;          /* 錯誤 */
  --red-tint: #FBECEE;
  --green: #1C7346;
  --green-tint: #E3F2E9;
  --amber: #875000;
  --amber-tint: #FBF0DC;
  --grey: #6A6A73;         /* 停用的章（灰底上 4.6:1） */
  --grey-tint: #EDEDF0;
  --overdue: var(--ink);   /* 逾期的牌子：黑底白字（18:1） */
  --on-overdue: var(--paper);
  --reminder: var(--ink);  /* 重疊提醒的左邊條和字 */
  --issue: var(--ink);     /* 最近歸還（16）有狀況的牌子：跟逾期一樣不是錯誤、也不是物品狀態（保管人另外改），黑底白字 */
  --on-issue: var(--paper);
  --on-brand: #FFFFFF;     /* 藍色按鈕上的字 */
  --press: #F5F5F7;        /* 白色按鈕按下去 */
  --glass: rgba(242, 242, 244, 0.85);  /* 半透明頁首（頁面底色） */
  --hairline: rgba(17, 17, 19, 0.08);
  --focus-ring: rgba(29, 78, 216, 0.25);
  --dev-bg: #FFF4C2;       /* 開發模式提醒 */
  --dev-ink: #5A4500;
  --shadow-tag: 0 16px 32px -20px rgba(17, 17, 19, 0.45);
  --shadow-segment: 0 1px 3px rgba(17, 17, 19, 0.16);  /* 分段按鈕選中的那一格 */
  --shadow-paper: 0 1px 3px rgba(17, 17, 19, 0.16), 0 14px 32px -18px rgba(17, 17, 19, 0.4);  /* 標籤頁上的 A4 標籤貼紙 */
  --print-ink: #000000;    /* 印出來的標籤：純黑。近黑色會被印表機打成網點，QR code 的邊緣就不銳利 */

  --radius: 14px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
          "PingFang TC", "Noto Sans TC", "Noto Sans CJK TC", "Microsoft JhengHei", sans-serif;
}

/* ---------- 基礎（繁體中文排版） ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-synthesis: none;          /* 系統字型沒有的字重不要假粗體 */
  text-spacing-trim: space-first;
  text-autospace: normal;
  -webkit-text-size-adjust: 100%;
  /* 送出時焦點跳到填錯的欄位：捲動時留出頁首的高度，欄位才不會被半透明頁首蓋住 */
  scroll-padding-top: calc(80px + env(safe-area-inset-top));
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
  line-break: strict;
  overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

h1 {
  font-size: 1.5rem;
  font-weight: 700;
}

p {
  margin: 0;
  text-wrap: pretty;             /* 最後一行不要只剩一兩個字 */
}

a {
  color: var(--brand);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

/* 換頁時程式把焦點移到標題（給螢幕閱讀器），標題不能點，不需要框。
   不加這條的話，掃標籤直接打開物品頁時，物品編號外面會多一個框。 */
[tabindex="-1"]:focus {
  outline: none;
}

.noscript {
  padding: 24px 16px;
}

/* 句子裡的日期（「10/7（三）」）不從中間換行：app.js 的 keepDates 包起來的 */
.nowrap {
  white-space: nowrap;
}

/* 程式用 hidden 屬性開關的區塊，就算 CSS 給了 display 也要真的藏起來 */
[hidden] {
  display: none !important;
}

/* 只給螢幕閱讀器看的字，例如首頁的 h1（畫面上頁首已經寫著「物品借用」） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- 版面 ---------- */

.page,
.gate {
  max-width: 480px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

.page {
  padding-top: 20px;
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
}

.page > h1 + .lead,
.gate > h1 + .lead {
  margin-top: 8px;
}

.page > .lead + .list-section {
  margin-top: 24px;
}

.gate {
  padding-top: max(48px, calc(env(safe-area-inset-top) + 32px));
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
}

.gate > .lead {
  margin-bottom: 24px;
}

.gate > .callout {
  margin-bottom: 20px;
}

.lead {
  color: var(--ink-2);
}

.hint {
  color: var(--ink-3);
  font-size: 0.9375rem;
}

.stack {
  display: flex;
  flex-direction: column;
}

.back {
  margin-top: 24px;
}

.screen-enter {
  animation: screen-enter 180ms ease-out;
}

@keyframes screen-enter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 品牌記號：一張小標籤 ---------- */

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  color: var(--brand);
  font-weight: 700;
  line-height: 1.4;
}

.mark {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2.5px solid var(--ink);
  border-radius: 9px;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.mark-sm {
  width: 28px;
  height: 28px;
  border-width: 2px;
  border-radius: 7px;
  font-size: 0.9375rem;
}

/* ---------- 頁首（半透明，內容從底下捲過） ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px 8px 16px;
  padding-top: max(8px, env(safe-area-inset-top));
  background: var(--glass);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--hairline);
}

/* 左邊：回首頁的字標；管理身分時後面接一個「管理」 */
.topbar-start {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--brand);
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

.who {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  max-width: 60%;
  padding: 5px 5px 5px 14px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}

.who-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.who-switch {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--grey-tint);
  color: var(--brand);
  font-size: 0.8125rem;
}

.who:active {
  background: var(--grey-tint);
}

/* 管理身分的記號（11）：管理身分會一直記住，頁首看得到才不會忘了登出。
   字是藍色（可以按，連到管理畫面），底跟「切換」一樣是灰的：淡藍是「借出中」的章，用了會看成章；按得到的範圍照樣 44px 高 */
.admin-mark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: var(--brand);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

.admin-mark > span {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--grey-tint);
}

.devbar {
  padding: 6px 16px;
  background: var(--dev-bg);
  color: var(--dev-ink);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: center;
}

/* ---------- 表單 ---------- */

.field-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
  line-height: 1.4;
}

.input {
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1.25rem;          /* 16px 以上，iPhone 才不會自動放大 */
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.input[aria-invalid="true"] {
  border-color: var(--red);
}

.input-code {
  font-variant-numeric: tabular-nums lining-nums;
  text-transform: uppercase;
}

.input-code::placeholder {
  text-transform: none;
}

.field-error {
  min-height: 1.7em;
  margin: 8px 0 12px;
  color: var(--red);
  font-weight: 700;
}

/* 找物品：輸入框和「搜尋」按鈕排一列 */
.find-row {
  display: flex;
  gap: 10px;
}

.find-row .input {
  flex: 1;
  min-width: 0;
}

/* 寬度留給「搜尋中…」：送出時字變長，按鈕才不會變寬、把輸入框擠窄 */
.find-row .btn {
  flex: none;
  min-width: 6.5em;
}

.input-search {
  -webkit-appearance: none;
  appearance: none;
}

/* ---------- 按鈕：按下去的瞬間就有反應 ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 20px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;       /* 「借出」「借東西」是連到借東西畫面的連結，長得跟按鈕一樣 */
  cursor: pointer;
  transition: transform 80ms ease-out, background-color 120ms ease-out;
}

.btn:active {
  transform: scale(0.98);
}

.btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.btn-block {
  width: 100%;
}

.btn-primary {
  background: var(--brand);
  color: var(--on-brand);
}

.btn-primary:active {
  background: var(--brand-press);
}

.btn-secondary {
  border-color: var(--line);
  background: var(--paper);
  color: var(--brand);
}

.btn-quiet {
  margin-top: 16px;
  background: transparent;
  color: var(--brand);
}

/* ---------- 選名字 ---------- */

.names {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.names > .hint,
.names > .callout,
.names > .first-staff {
  grid-column: 1 / -1;
}

.name {
  position: relative;
  min-height: 60px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  transition: transform 80ms ease-out;
}

.name:active {
  transform: scale(0.98);
  background: var(--press);
}

.name.is-current {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1.5px var(--brand);
}

.name.is-current::after {
  content: "目前";
  position: absolute;
  top: 6px;
  right: 8px;
  color: var(--brand);
  font-size: 0.75rem;
  font-weight: 700;
}

/* ---------- 提示框 ---------- */

.callout {
  padding: 14px 16px;
  border-radius: 12px;
}

.callout-info {
  border: 1px solid var(--line-soft);
  background: var(--paper);
  color: var(--ink-2);
}

.callout-error {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--red-tint);
  color: var(--red);
  font-weight: 700;
}

.callout-error .btn {
  align-self: flex-start;
}

.callout-success {
  background: var(--green-tint);
  color: var(--green);
  font-weight: 700;
}

/* 重疊提醒：黑色的左邊條（為什麼是黑色見檔案開頭） */
.callout-reminder {
  border: 1px solid var(--line-soft);
  border-left: 4px solid var(--reminder);
  background: var(--paper);
  color: var(--reminder);
}

.callout-title {
  font-weight: 700;
  line-height: 1.5;
}

.reminder-list {
  margin: 4px 0 0;
  padding-left: 1.2em;
}

.reminder-list > li + li {
  margin-top: 4px;
}

.page > .callout,
.page > .notice {
  margin-top: 12px;
}

/* 物品頁上剛做完的動作，下面接著重疊提醒 */
.notice > * + * {
  margin-top: 8px;
}

/* ---------- 物品頁：標籤 ---------- */

.tag {
  padding: 18px 20px 22px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: var(--shadow-tag);
}

.tag-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 12px;
}

/* 物品編號只有拉丁字母和數字（T-001），不套中文標題的行高 1.3–1.45 與字距規則：
   大字的拉丁字要收緊行高和字距（apple-design 的字距隨字級調整）。
   800 在 iPhone 是 SF Pro Heavy；Windows、Android 沒有 800，會用更粗的 Black（900），
   都是「最粗的那一級」，跟實體標籤上的大編號一樣醒目。 */
.tag-code {
  font-size: clamp(3rem, 16vw, 4.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}

.tag-name {
  margin-top: 14px;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.4;
}

.tag.is-loading .tag-name {
  color: var(--ink-3);
  font-weight: 400;
}

/* 物品狀態：像蓋在標籤上的章 */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 4px 10px;
  border: 1.5px solid currentColor;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.stamp::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.stamp-ok {
  background: var(--green-tint);
  color: var(--green);
}

.stamp-warn {
  background: var(--amber-tint);
  color: var(--amber);
}

.stamp-bad {
  background: var(--red-tint);
  color: var(--red);
}

.stamp-off {
  background: var(--grey-tint);
  color: var(--grey);
}

/* 借出中不是物品狀態，是從借用算出來的：用主色，跟「有問題」的黃、紅分開 */
.stamp-loan {
  background: var(--brand-tint);
  color: var(--brand);
}

/* 預約中也是從借用算出來的：同樣是主色，虛線框、空心的點，表示東西還沒拿 */
.stamp-reserve {
  border-style: dashed;
  background: var(--paper);
  color: var(--brand);
}

.stamp-reserve::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px currentColor;
}

.status-note {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 700;
}

.status-note-warn {
  background: var(--amber-tint);
  color: var(--amber);
}

.status-note-bad {
  background: var(--red-tint);
  color: var(--red);
}

.status-note-ok,
.status-note-off {
  background: var(--grey-tint);
  color: var(--grey);
}

/* ---------- 物品頁：資料 ---------- */

/* 區塊標題（目前借用、物品資料）：小字灰色，像手機設定畫面的分組標題 */
.section-title {
  margin: 28px 0 8px;
  padding: 0 4px;
  color: var(--ink-3);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;      /* 標題字距 0–0.02em（tw-typography） */
}

.facts {
  margin: 20px 0 0;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--paper);
}

/* 標題下面緊接著資料卡片。自己借的「目前借用」，標題列和卡片中間夾著修改的面板（沒在修改時是空的） */
.section-title + .facts,
.section-head + .edit-area + .facts {
  margin-top: 0;
}

.fact {
  display: grid;
  grid-template-columns: 5em minmax(0, 1fr);
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid var(--line-soft);
}

.fact:first-child {
  border-top: 0;
}

.fact dt {
  color: var(--ink-3);
  line-height: 1.5;
}

.fact dd {
  margin: 0;
  line-height: 1.5;
}

/* 借用人：目前借用裡最先要看到的那一格 */
.fact-strong dd {
  font-size: 1.125rem;
  font-weight: 700;
}

/* 值下面的小字：延期過的「延期1次，原本10/3（六）」 */
.fact-sub {
  display: block;
  margin-top: 2px;
  color: var(--ink-3);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* ---------- 物品頁：修改（放在它改的那筆紀錄旁邊） ---------- */

/* 標題列：標題在左，「修改」或連到別的畫面的連結在右。物品頁的目前借用（自己借的才有修改）外距照 .section-title；
   首頁的找物品、我借的見 .list-head */
.section-head,
.list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.section-head {
  margin: 28px 0 8px;
  padding: 0 4px;
}

.section-head .section-title {
  margin: 0;
  padding: 0;
}

/* 自己那筆預約的第一行：誰在左、「修改」在右 */
.record-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* 「修改」和標題列上的連結（首頁的物品總覽、我的紀錄）：看起來像連結（藍字），按得到的範圍照樣 44px 高；
   上下用負的外距抵掉多出來的高度，標題列不會跟著變高。
   寫成兩個 class：.link-button 定義在後面，同樣權重時它的 margin-top 會蓋掉這裡 */
.link-button.record-edit,
.link-button.list-link {
  flex: none;
  margin: -12px 0;
  padding: 0 4px;
  font-size: 0.9375rem;
}

/* 「修改」和管理的「修正」（15）並排在標題列右邊 */
.record-tools {
  display: flex;
  flex: none;
  gap: 16px;
}

/* 紀錄上的一筆（查物品時，管理身分）：「修正」在那一筆下面靠左，按下去面板接在原地 */
.history-tools {
  margin-top: -8px;
  padding: 0 12px 10px;
}

.history-rows > li > .edit-area:not(:empty) {
  padding: 0 12px 12px;
}

/* 修正的時間欄位：日期、幾點並排 */
.time-pair {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 8px;
}

.field-hint + .time-pair,
.field-hint + .input {
  margin-top: 8px;
}

/* 修正的結束時間、結束操作人、有狀況：包成一組，選「還沒結束」時整組收起來；組的上下照欄位之間的間距。
   有狀況的說明接在勾選下面 */
.field + .correction-ended,
.correction-ended + .field {
  margin-top: 28px;
}

.correction-ended .check + .input {
  margin-top: 12px;
}

/* 代誰登記（15）：歸還的面板裡，放在有狀況前面 */
.proxy-box:not(:empty) {
  margin: 16px 0;
}

/* 修改的面板：原地換掉紀錄的資料。目前借用的接在標題列下面（跟資料卡片一樣），預約的接在第一行下面；
   管理畫面員工名單、案場清單（14）的一筆也一樣 */
.reservation .edit-area:not(:empty),
.entry .edit-area:not(:empty) {
  margin-top: 10px;
}

/* ---------- 物品頁：之後的預約 ---------- */

/* 跟目前借用、物品資料同一種白底卡片；一筆一列。管理畫面的員工名單、案場清單（14，.entries）也是這個樣子 */
.reservations,
.entries {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--paper);
}

.reservation,
.entry {
  padding: 14px 16px;
}

.reservation + .reservation,
.entry + .entry {
  border-top: 1px solid var(--line-soft);
}

.reservation-who,
.entry-title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5;
}

.reservation-meta,
.entry-meta {
  margin-top: 2px;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* 自己那筆預約的按鈕（已取走、延期、取消預約）：上下排，跟動作區一樣 */
.reservation-hint {
  margin-top: 10px;
}

.reservation-actions,
.entry-actions {
  margin-top: 14px;
}

.reservation-actions > .btn + .btn,
.entry-actions > .btn + .btn {
  margin-top: 10px;
}

/* 展開的面板已經在預約的卡片裡，不再多一層框 */
.reservation .panel,
.entry .panel {
  padding: 0;
  border: 0;
}

/* ---------- 物品頁：動作（借出、預約、歸還、延期、接手） ---------- */

.actions {
  margin-top: 16px;
}

/* 按鈕上下排：可用時借出、預約；借出中時歸還（主要）、延期（自己借的）、我接手、預約 */
.actions > .btn + .btn {
  margin-top: 12px;
}

/* 歸還、延期、接手、修改：從按鈕原地展開的面板 */
.panel {
  display: flex;
  flex-direction: column;
  padding: 18px 16px 8px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.panel-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
}

.panel-lead {
  margin-top: 6px;
  color: var(--ink-2);
}

.panel .hint {
  margin-top: 8px;
}

.panel .btn-primary {
  margin-top: 16px;
}

.panel .btn-quiet {
  margin-top: 4px;
}

/* 接手、修改的欄位（跟借東西同一組）：接在說明下面 */
.panel-fields {
  margin-top: 20px;
}

/* 勾選框：整列都按得到 */
.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 56px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}

.check:has(.check-input:checked) {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.check-input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 1px 0 0;
  accent-color: var(--brand);
}

.check-text {
  display: flex;
  flex-direction: column;
  font-weight: 700;
  line-height: 1.4;
}

.check-sub {
  color: var(--ink-3);
  font-size: 0.9375rem;
  font-weight: 400;
}

.issue-field {
  margin-top: 16px;
}

/* ---------- 借東西畫面 ---------- */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin: -8px 0 4px;
  font-weight: 700;
  text-decoration: none;
}

.back-link::before {
  content: "‹";
  font-size: 1.5rem;
  line-height: 1;
}

.borrow-body {
  margin-top: 24px;
}

.field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field + .field {
  margin-top: 28px;
}

/* 欄位標題；fieldset 的 legend 用 padding 撐開下方間距（legend 的 margin 在有些瀏覽器不算）。
   「要借的物品」是 h2，字級要寫明，不然會用瀏覽器給 h2 的大字，跟頁面標題一樣大 */
.legend {
  display: block;
  padding: 0 0 10px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}

.optional {
  margin-left: 8px;
  color: var(--ink-3);
  font-size: 0.875rem;
  font-weight: 400;
}

/* 一般打字的欄位：字比通行碼、物品編號小一號，中文字距照內文 */
.input-text {
  font-size: 1.0625rem;      /* 17px，iPhone 不會自動放大 */
  letter-spacing: 0.02em;
}

.textarea {
  min-height: 96px;
  line-height: 1.6;
  resize: vertical;
}

.input-date,
.input-time {
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-appearance: none;
  appearance: none;
}

.input-date::-webkit-date-and-time-value,
.input-time::-webkit-date-and-time-value {
  text-align: left;
}

/* 案場／其他地點：二選一的分段按鈕（底下是真的 radio，鍵盤和螢幕閱讀器照常用） */
.segmented {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--track);
}

.segment-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.segmented label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 9px;
  color: var(--ink-2);
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
}

.segment-input:checked + label {
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-segment);
}

.segment-input:focus-visible + label {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

.segment-input:disabled + label {
  color: var(--ink-3);
  cursor: not-allowed;
}

.segmented ~ .site-picker,
.segmented ~ .input,
.segmented ~ .planned-field {
  margin-top: 10px;
}

/* 案場（09）：輸入案號或名稱找，清單當場跟著縮小；找不到可以當場新增。
   搜尋結果的那一句、清單、每一列都跟勾要借的物品同一套（.pick-status、.pick-list、.rows 加 .pick），只是單選。
   平常只列幾個（app.js 的 SITE_LIST_LIMIT），按「列出全部」才全部列出來，不然幾十個案場會把下面的預計歸還推得很遠。
   清單是 fieldset（一組單選框）：拿掉瀏覽器給 fieldset 的框線、內距，上面的間距照 .pick-list */
.site-list {
  min-width: 0;
  margin-inline: 0;
  margin-bottom: 0;
  padding: 0;
  border: 0;
}

/* 清單下面的「列出全部」「新增案場」：兩個連結按鈕排一列，中間留開，放不下時換行 */
.site-links {
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
}

/* 沒選案場就送出：清單外框變紅，錯誤訊息寫在清單上面 */
.site-list.is-invalid > .rows {
  border-color: var(--red);
}

/* 新增案場：在帶去哪裡這一格裡原地展開的小表單。外面已經是借出表單（或接手、修改的面板），不能再包一層 form */
.site-add {
  padding: 14px 14px 6px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}

.site-add-title {
  font-weight: 700;
  line-height: 1.4;
}

.site-add .hint {
  margin-top: 4px;
}

.site-add .field-label {
  margin-top: 16px;
}

.site-add .btn-secondary {
  margin-top: 16px;
}

.site-add .btn-quiet {
  margin-top: 4px;
}

/* 選項小按鈕：日期捷徑、借用原因 */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chips-dates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  line-height: 1.4;            /* 單行 UI 文字 1.4–1.5（tw-typography） */
  cursor: pointer;
  transition: transform 80ms ease-out;
}

.chip:active {
  transform: scale(0.97);
  background: var(--press);
}

/* 選著的（篩選、借用原因）和現在查的那一位（紀錄的人），都是藍底 */
.chip[aria-pressed="true"],
.chip[aria-current="page"] {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--on-brand);
}

.chip-date {
  flex-direction: column;
  padding: 8px 4px;
  border-radius: 12px;
}

.chip-sub {
  font-size: 0.8125rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums lining-nums;
}

.chips + .input {
  margin-top: 10px;
}

/* 看起來像連結的按鈕（加上幾點） */
.link-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.time-field {
  margin-top: 4px;
}

/* 欄位錯誤：沒有錯的時候不佔位置（跟通行碼畫面預留高度的 .field-error 不同） */
.form-error {
  margin-top: 8px;
  color: var(--red);
  font-weight: 700;
  line-height: 1.5;
}

.form-error:empty {
  display: none;
}

.form-error-submit {
  margin-top: 24px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--red-tint);
}

.borrow-form > .btn-primary {
  margin-top: 28px;
}

/* 有錯誤訊息時，按鈕貼近訊息。:not(:empty) 不能拿掉：沒有錯誤時訊息框還在（只是藏起來），
   拿掉的話這條永遠蓋過上面的間距，按鈕會一直貼著最後一個欄位 */
.form-error-submit:not(:empty) + .btn-primary {
  margin-top: 12px;
}

.borrow-form > .btn-quiet {
  margin-top: 8px;
}

/* 要借的物品（在欄位上面）：搜尋框在清單上面，勾選時清單不會變長，正要點的那一列不會被擠開 */
.picker + .borrow-form {
  margin-top: 28px;
}

/* 「要借的物品」標題旁的「已勾2件」 */
.legend-count {
  margin-left: 8px;
  color: var(--ink-3);
  font-size: 0.875rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums lining-nums;
}

.pick-notice {
  margin-bottom: 10px;
}

.pick-status:not(:empty) {
  margin-top: 8px;
  padding: 0 4px;
}

.pick-list {
  margin-top: 10px;
}

/* 勾選的一列：整列都按得到（label 包住勾選框），跟清單的一列一樣高 */
.pick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  min-height: 64px;
  padding: 12px 14px 12px 16px;
  cursor: pointer;
}

.pick:active {
  background: var(--press);
}

.pick .check-input {
  margin: 0;
}

/* 不能借的（借出中、維修中、遺失、停用）：名稱變淡，章寫著為什麼；按了沒有反應 */
.pick:has(.check-input:disabled) {
  cursor: default;
}

.pick:has(.check-input:disabled):active {
  background: transparent;
}

.pick:has(.check-input:disabled) .pick-name {
  color: var(--ink-3);
}

/* 勾不了、在別人那裡的那一件：下面一行連到物品頁的「我接手」，跟上面的名稱對齊（勾選框 24px 加間距 12px） */
.pick-more {
  margin: -6px 0 0;
  padding: 0 14px 12px 52px;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.pick-more > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
}

/* ---------- 清單：首頁（找物品、我借的、全公司逾期）、借出結果 ---------- */

.list-section + .list-section,
.list-section + .home-lists {
  margin-top: 32px;
}

/* 區塊標題：比物品頁的灰色小標題大一級，首頁和借出結果的這幾塊本身就是主要內容 */
.list-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
  padding: 0 4px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
}

.list-count {
  color: var(--ink-3);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums lining-nums;
}

/* 區塊標題列（排法見 .section-head）：標題在左，連到別的畫面的連結在右（首頁的「物品總覽」「我的紀錄」） */
.list-head {
  margin-bottom: 10px;
}

.list-head > .list-title {
  margin-bottom: 0;
}

.list-hint {
  padding: 0 4px;
}

.list-empty {
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink-2);
}

/* 首頁最上面的「借東西」：首頁的主要動作 */
.home-borrow + .list-section {
  margin-top: 28px;
}

.find-result:not(:empty) {
  margin-top: 12px;
}

.find-result > .hint {
  margin-bottom: 8px;
  padding: 0 4px;
}

/* 清單：整列都可以按，打開那件物品的物品頁 */
.rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;              /* 按下去的底色不要超出圓角 */
}

.rows > li + li {
  border-top: 1px solid var(--line-soft);
}

/* 三欄：資料、牌子或章、「›」。牌子和「›」各自固定一欄，有沒有牌子「›」都對齊在最右邊 */
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 10px;
  min-height: 64px;
  padding: 12px 14px 12px 16px;
  color: var(--ink);
  text-decoration: none;
}

.row:active {
  background: var(--press);
}

/* 清單外框會裁掉超出去的部分，焦點框改畫在列的裡面 */
.row:focus-visible {
  outline-offset: -3px;
}

/* 「›」：可以按，所以是藍色（見檔案開頭）。跟下拉選單的箭頭一樣用框線畫，不用圖片 */
.row::after {
  content: "";
  grid-column: 3;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-top: 2.5px solid var(--brand);
  border-right: 2.5px solid var(--brand);
  transform: rotate(45deg);
}

.row > .badge-overdue,
.row > .badge-issue,
.row > .stamp,
.row > .record-end {
  grid-column: 2;
}

/* 不能按的一列（紀錄裡查物品時：本來就在那件物品的紀錄裡）：沒有「›」，按了也沒有反應 */
.row-static::after {
  content: none;
}

.row-static:active {
  background: transparent;
}

.row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.row-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
}

.row-meta {
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* 每一項資料是一個整體：要換行時在兩項之間換，不會把「10/3（六）」或案場名稱從中間拆開 */
.row-part {
  display: inline-block;
  max-width: 100%;
}

.row-sep {
  margin: 0 2px;
  color: var(--line);
}

/* 物品編號的小標籤：黑框、最粗的字，跟物品頁的標籤、貼在物品上的實體標籤同一個樣子 */
.code-chip {
  flex: none;
  padding: 0 6px;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums lining-nums;
}

/* 逾期的牌子（為什麼是黑底白字見檔案開頭）；最近歸還有狀況的牌子（16）同一個樣子 */
.badge-overdue,
.badge-issue {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}

.badge-overdue {
  background: var(--overdue);
  color: var(--on-overdue);
}

.badge-issue {
  background: var(--issue);
  color: var(--on-issue);
}

/* 找到的物品清單上的章：小一號 */
.stamp-sm {
  margin-top: 0;
  padding: 2px 8px;
  font-size: 0.8125rem;
}

.stamp-sm::before {
  width: 6px;
  height: 6px;
}

/* ---------- 借出結果 ---------- */

/* 已借出這一批共用的案場或地點、預計歸還：寫在區塊標題下面一次就好 */
.list-sub {
  margin: -4px 0 10px;
  padding: 0 4px;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* 沒借到的原因：紅色只給錯誤 */
.row-error {
  color: var(--red);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.5;
}

/* 已經是你借的：不是錯誤，用一般的說明文字 */
.row-note {
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* 借到的那一件的重疊提醒：跟物品頁的提醒一樣是黑色的左邊條，不是錯誤的紅字 */
.row-reminders {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.row-reminder {
  padding-left: 10px;
  border-left: 3px solid var(--reminder);
  color: var(--reminder);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.results-home {
  margin-top: 32px;
}

/* ---------- 物品總覽 ---------- */

.overview-search {
  margin-top: 20px;
}

/* 篩選（種類、辦公室）：一組是一個 fieldset，小標題（legend）在上、一排按鈕在下，一次選一個；選著的是藍底。
   不用 .field：兩組相鄰時 .field + .field 的上距太開，間距交給 .filters 的 gap */
.filters {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}

.filter {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* legend 用 padding 撐開下方間距（legend 的 margin 在有些瀏覽器不算，見 .legend） */
.filter-label {
  padding: 0 4px 6px;
  color: var(--ink-3);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
}

.overview-status {
  margin: 20px 0 8px;
}

/* 換篩選時，等新的結果回來前舊的清單先變淡：看得出按了、正在讀 */
.overview-list[aria-busy="true"] > .rows {
  opacity: 0.5;
}

/* ---------- 紀錄 ---------- */

/* 「查別的紀錄」：標題下面的連結，按下去原地展開面板 */
.history-chooser-wrap {
  margin-top: 4px;
}

.history-chooser {
  gap: 14px;
  margin: 4px 0 8px;
  padding-bottom: 16px;
}

.chooser-body .pick-status:not(:empty) {
  margin-top: 8px;
}

.chooser-body .rows {
  margin-top: 10px;
}

/* 人的按鈕是連到他的紀錄的連結；現在查的那一位跟選著的篩選一樣是藍底（.chip[aria-current]） */
a.chip {
  text-decoration: none;
}

/* 三個選項的分段按鈕（查紀錄的人、物品、案場） */
.segmented-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.history-chooser-wrap + .rows,
.history-chooser-wrap + .section-title {
  margin-top: 16px;
}

/* 紀錄上結束了的那幾筆：怎麼結束的（歸還、接手、取消、遺失）或失效。只是說明，不是物品狀態也不是錯誤：細框灰字，不用章的顏色 */
.record-end {
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

/* 物品頁最下面「這件物品的紀錄」 */
.item-more {
  margin-top: 20px;
}

/* ---------- 管理（11） ---------- */

/* 首頁最下面的「管理」：大部分人用不到，小字放在最後 */
.home-admin {
  margin-top: 32px;
  padding: 0 4px;
  text-align: center;
}

.home-admin > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  font-weight: 700;
}

.admin-gate {
  margin-top: 20px;
}

.admin-gate > .btn-quiet {
  margin-top: 8px;
}

/* 管理畫面的說明：區塊標題下面、表單上面 */
.admin-hint {
  margin-bottom: 16px;
  padding: 0 4px;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.admin-body {
  margin-top: 24px;
}

.admin-body > .list-section + .list-section {
  margin-top: 40px;
}

/* 新增好的那一句：送出按鈕下面 */
.admin-status:not(:empty) {
  margin-top: 16px;
}

.admin-status + .list-section {
  margin-top: 24px;
}

/* 改物品狀態：借出中的物品選遺失時，那筆借用會怎樣 */
.panel-fields > .callout {
  margin-top: 16px;
}

/* 員工名單、案場清單的面板（14）一開頭就是提醒：上距交給 .panel-fields，不再多空一段 */
.panel-fields > .callout:first-child {
  margin-top: 0;
}

/* 欄位下面的說明（保管人：這個辦公室預設是誰） */
.field-hint:not(:empty) {
  margin-top: 8px;
}

.admin-logout {
  margin-top: 40px;
}

/* 印標籤（12）：種類篩選、勾選清單，跟物品總覽、借東西的勾選清單同一個樣子 */
.label-filters {
  margin: 0 0 20px;
}

.label-filters:has(> .filter[hidden]) {
  display: none;
}

/* 「全選」靠右，在勾選清單上面 */
.label-pick-head {
  display: flex;
  justify-content: flex-end;
  margin-top: -6px;
}

.label-pick-head > .link-button {
  margin-top: 0;
}

.label-pick-head + .pick-list {
  margin-top: 4px;
}

.label-form > .btn-primary {
  margin-top: 24px;
}

/* 「剛新增的」最下面：印這幾件的標籤 */
.added-print {
  margin-top: 12px;
}

/* 匯入盤點（13）：按鈕下面是匯入了幾件、沒匯入的列、匯入的物品 */
.import-problems-area:not(:empty),
.import-problems-area + .list-section {
  margin-top: 24px;
}

/* 沒匯入的列：不是錯誤（紅色只給錯誤），是要回試算表改的清單，照 .list-empty 的白卡片；列號粗體，對著試算表找 */
.import-problems {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink-2);
}

.import-problems > li {
  padding: 12px 16px;
  line-height: 1.6;
}

.import-problems > li + li {
  border-top: 1px solid var(--line-soft);
}

.import-row {
  margin-inline-end: 0.5em;
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
}

/* 選名字畫面新增第一位員工（14）：說明、姓名、管理密碼上下排，欄位之間空開 */
.first-staff > .field-label {
  margin-top: 20px;
}

.first-staff > .btn-primary {
  margin-top: 16px;
}

/* 員工名單、案場清單（14）：新增員工的欄位、案場的篩選和搜尋在清單上面；做完的那一句接在清單上面 */
.staff-form > .btn-primary {
  margin-top: 16px;
}

.admin-site-filters {
  margin: 0 0 16px;
}

.admin-list .input-search + .pick-status {
  margin-top: 8px;
}

.admin-status + .admin-list,
.staff-form + .admin-status:empty + .admin-list {
  margin-top: 20px;
}

.admin-list .entries + .link-button {
  margin-top: 8px;
}

/* 面板上「改之前先知道」的物品：連到物品頁，後面接一句（誰借著） */
.reminder-list a {
  font-weight: 700;
}

/* 最近歸還（16）：「全部／只看我保管的」在清單上面，件數接在清單上面 */
.admin-returns-filters {
  margin: 0 0 16px;
}

.admin-list > .pick-status + .rows {
  margin-top: 8px;
}

/* 複製逾期清單（16）：要貼到 LINE 的文字照原樣一行一行顯示，數字對齊；複製的按鈕在框下面 */
.overdue-text {
  min-height: 0;
  white-space: pre;
  overflow-x: auto;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums lining-nums;
}

.overdue-copy > .btn-primary,
.passcode-form > .btn-primary {
  margin-top: 16px;
}

/* ---------- 標籤頁（12） ---------- */

/* 上面的說明和「列印」照一般畫面的寬度；下面的 A4 標籤貼紙照實際大小，手機上左右捲動 */
.labels-screen {
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
}

.labels-controls {
  padding-top: 20px;
}

.labels-intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}

.label-tips {
  margin: 6px 0 0;
  padding-left: 1.25em;
}

.label-tips > li + li {
  margin-top: 6px;
}

.label-size {
  margin-top: 36px;
}

.label-size-head {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px;
}

/* 張數、印在第幾頁、標籤貼紙的規格：一行資料，跟清單的第二行一樣 */
.label-size-facts {
  margin-top: 2px;
  padding: 0 4px;
  font-variant-numeric: tabular-nums lining-nums;
}

.label-start-field {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.label-start-field > .legend {
  padding: 0 0 0 4px;
}

.label-start {
  width: 6.5em;
  font-variant-numeric: tabular-nums lining-nums;
}

.label-size-head > .hint {
  margin-top: 6px;
  padding: 0 4px;
}

/* 一頁頁的標籤貼紙：寬過畫面時在這一塊裡左右捲動，頁面本身不會橫向捲動 */
.label-pages {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 16px;
  padding: 4px 16px 20px;
  overflow-x: auto;
}

/* 一張 A4 標籤貼紙。格數、每格大小、邊界、間距是 label-sheets.js 的毫米數（app.js 的 setSheetSize 設成變數）。
   第一格的位置用 padding 推到上邊界、左邊界，之後一格接一格，跟標籤貼紙上的格子對齊 */
.label-page {
  display: grid;
  flex: none;
  grid-template-columns: repeat(var(--cols), var(--label-w));
  grid-auto-rows: var(--label-h);
  column-gap: var(--gap-x);
  row-gap: var(--gap-y);
  align-content: start;
  width: 210mm;
  height: 297mm;
  margin: 0 auto;
  padding: var(--sheet-top) 0 0 var(--sheet-left);
  list-style: none;
  background: var(--paper);
  box-shadow: var(--shadow-paper);
  overflow: hidden;
}

/* 一張標籤：左邊 QR code、右邊文字。字的大小跟著格子的大小（cqh、cqw 是格子的高、寬的百分之一），
   換了標籤貼紙的尺寸不用另外調字級。畫面上用虛線畫出標籤貼紙的格子，印的時候不印 */
.label {
  display: flex;
  min-width: 0;
  padding: 1.2mm;
  overflow: hidden;
  color: var(--print-ink);
  outline: 1px dashed var(--line);
  outline-offset: -1px;
  container-type: size;
}

/* QR code 是正方形，跟格子一樣高（四周的空白已經畫在圖裡） */
.label > svg {
  flex: none;
  width: auto;
  height: 100%;
  aspect-ratio: 1;
}

.qr-paper {
  fill: var(--paper);
}

.qr-ink {
  fill: var(--print-ink);
}

/* 文字上下各空一段 QR code 四周空白的高度（--qr-quiet：空白佔整張圖的比例，app.js 的 labelCell 照 QR code 的格數設）：
   物品編號的頂端對齊 QR code 的黑格，「借用、歸還請掃碼」的底端對齊 QR code 的底 */
.label-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: calc(100cqh * var(--qr-quiet, 0)) 0;
}

/* 物品編號最大，跟物品頁最上面的標籤一樣用最粗的那一級、收緊字距 */
.label-code {
  font-size: min(28cqh, 14cqw);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}

/* 名稱次之，最多兩行，太長的收成「…」 */
.label-name {
  display: -webkit-box;
  margin-top: max(0.6mm, 3cqh);
  overflow: hidden;
  font-size: min(11cqh, 6cqw);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* 最下面一行：小一號的標籤也至少 1.8 毫米高（約 5 級字） */
.label-scan {
  margin-top: auto;
  padding-top: 0.4mm;
  font-size: max(1.8mm, min(8cqh, 5cqw));
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* 列印：只印標籤貼紙那幾頁。紙張 A4、邊界 0：標籤貼紙的邊界已經算在每一頁的 padding 裡。
   只有標籤頁需要印（其他畫面是給手機用的），所以 @page 不用分畫面 */
@page {
  size: A4;
  margin: 0;
}

@media print {
  body {
    background: var(--paper);
  }

  .topbar,
  .devbar,
  .labels-controls,
  .label-size-head {
    display: none !important;
  }

  .labels-screen,
  .label-size,
  .label-pages {
    margin: 0;
    padding: 0;
  }

  .screen-enter {
    animation: none;
  }

  .label-pages {
    display: block;
    overflow: visible;
  }

  .label-page {
    margin: 0;
    box-shadow: none;
    break-after: page;
  }

  .label-size:last-child .label-page:last-child {
    break-after: auto;
  }

  .label {
    outline: none;
  }
}

/* ---------- 減少動態 ---------- */

@media (prefers-reduced-motion: reduce) {
  .screen-enter {
    animation: none;
  }

  .btn,
  .name,
  .chip {
    transition: none;
  }

  .btn:active,
  .name:active,
  .chip:active {
    transform: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .topbar {
    background: var(--canvas);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}