:root {
  --blush: #f5cec7;
  --rose: #e79796;
  --apricot: #ffc988;
  --peach: #ffb284;
  --sage: #c6c09c;
  --ink: #413838;
  --muted: #766b68;
  --paper: #fffaf7;
  --page: #fff9f4;
  --line: rgba(65, 56, 56, 0.12);
  --shadow-card: 0 8px 20px rgba(92, 68, 58, 0.07);
  --shadow-content: 0 10px 26px rgba(92, 68, 58, 0.08);
  --t: 0.18s ease;
  /* fx.js 呼吸位移統一調幅，預設 1 */
  --amp: 1;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 16px 48px;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 2px 20px;
  /* 讓右側的按鈕或身分 pill 在窄螢幕換到下一行，而不是去擠壓左邊的頁名。
   * 沒有這一條的話，加上 Logo 之後「一樓環境評核月報」這種較長的頁名
   * 在 375px 會被擠成兩行（2026-08-27 實測，逐頁量測抓到）。 */
  flex-wrap: wrap;
}

header h1 {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* 站名與頁名並列（Logo 置左）。
 *
 * 包一層 .brand 而不是把 img 直接丟進 header：header 是
 * space-between，直接放進去會變成「Logo ─ 頁名 ─ 身分」三等分，
 * 頁名會被推到畫面正中央。包起來之後 header 仍然只有兩個孩子。
 *
 * 列印時整條 header 本來就 display:none（見列印段），報表與教材
 * 各自有自己的抬頭，所以這裡不必為列印另外設一份。 */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  /* 不讓 flex 壓縮站名這一組：要換行的是右邊的操作區（見 header 的
   * flex-wrap），不是頁名。max-width 是安全網——真的長到一整列都放不下時，
   * 才讓 h1 自己折行，而不是整條 header 橫向溢出。 */
  flex-shrink: 0;
  max-width: 100%;
}

.brand-logo {
  height: 32px;
  width: auto;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .brand-logo {
    height: 24px;
  }
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  padding: 22px 20px;
  margin-bottom: 16px;
}

.card.hero {
  border-radius: 32px;
  box-shadow: var(--shadow-content);
}

.card h2 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 500;
}

.muted {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
}

.identity {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 6px;
}

.identity .name {
  font-size: 22px;
  font-weight: 500;
}

.pill {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 13px;
  background: var(--blush);
  color: var(--ink);
  border: 1px solid var(--line);
}

.pill.warn {
  background: var(--apricot);
}

button,
.btn {
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--rose);
  color: var(--paper);
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  transition: transform var(--t), box-shadow var(--t), background var(--t);
}

button.secondary {
  background: var(--paper);
  color: var(--ink);
}

button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

button:active {
  transform: translateY(0) scale(0.99);
}

button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

button[disabled] {
  opacity: 0.5;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.state {
  border-radius: 22px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.state.error {
  background: #fdeeea;
}

.uid {
  display: block;
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--page);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  word-break: break-all;
  user-select: all;
}

/* --- 打卡 --- */

.punch-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

button.punch {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 116px;
  border-radius: 24px;
  padding: 0;
}

button.punch.in {
  background: var(--peach);
  color: var(--ink);
}

button.punch.out {
  background: var(--sage);
  color: var(--paper);
}

.punch-label {
  font-size: 26px;
  letter-spacing: 0.06em;
}

.punch-sub {
  font-size: 13px;
  opacity: 0.75;
}

.ok-text {
  color: #4a6b3d;
}

.err-text {
  color: #9a3f3f;
}

.warn-dot {
  color: var(--peach);
  font-size: 11px;
}

.center {
  text-align: center;
}

a {
  color: var(--muted);
}

.code-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 22px;
  letter-spacing: 0.28em;
  text-align: center;
  text-transform: uppercase;
}

.code-chip {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--blush);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px;
  letter-spacing: 0.16em;
  user-select: all;
}

.radius-input {
  width: 72px;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
}

.pill.tiny-pill {
  font-size: 11px;
  padding: 1px 9px;
  margin-left: 6px;
  vertical-align: middle;
}

.pill.ok {
  background: var(--sage);
  color: var(--paper);
}

.pill.off {
  background: transparent;
  color: var(--muted);
}

button.tiny {
  min-height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

.mt {
  margin-top: 12px;
}

summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.hidden {
  display: none;
}

/* --- 人資後台 --- */

.wrap.wide {
  max-width: 1080px;
}

.row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.card h3 {
  font-size: 15px;
  font-weight: 500;
  margin: 22px 0 2px;
}

.muted.small {
  font-size: 13px;
}

.muted.ok {
  color: var(--sage);
}

button.danger {
  color: #9a3f3f;
}

label.inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  min-height: 44px;
}

select {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
}

input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--rose);
}

input[type="text"],
input[type="date"],
input[type="time"],
input[type="number"] {
  flex: 1 1 220px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
}

input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

/* 加班申請的日期／時數欄位：手機一行兩欄，桌機四欄排開 */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field span {
  color: var(--muted);
  font-size: 13px;
}

.field input {
  flex: none;
  width: 100%;
}

.field select {
  width: 100%;
  min-width: 0;
}

.form-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.item:last-child {
  border-bottom: none;
}

.item-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.item-name {
  font-size: 16px;
}

.item-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

th,
td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  vertical-align: middle;
}

th {
  font-weight: 500;
  color: var(--muted);
  font-size: 13px;
}

tr.row-left {
  opacity: 0.6;
}

/* 勾選欄。窄一點，但可點目標仍靠 input 本身的 44px 撐開。 */
th.pick,
td.pick {
  width: 36px;
}

th.pick input,
td.pick input {
  width: 20px;
  height: 20px;
  margin: 0;
}

.batch-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
}

.batch-count {
  font-size: 14px;
  font-weight: 500;
  margin-right: 4px;
}

.batch-result {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.batch-result h3 {
  margin: 0;
}

.batch-result ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.batch-result li {
  font-size: 14px;
  padding: 2px 0;
}

.batch-result .blocked-reason {
  color: var(--muted);
  font-size: 13px;
}

.result-group {
  margin-top: 10px;
}

/* 排班格線。
   一個月三十欄乘上十幾列，手機上不可能塞得下——所以它自己橫向捲動，
   頁面本身不橫捲（.wrap 仍維持不出現水平捲軸）。姓名欄釘在左邊，
   否則捲到月底就不知道正在看誰。 */
.grid-scroll {
  overflow-x: auto;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

table.sched {
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  min-width: max-content;
}

table.sched th,
table.sched td {
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 4px 6px;
  font-size: 13px;
  text-align: center;
  white-space: nowrap;
}

table.sched th.who {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--paper);
  text-align: left;
  min-width: 84px;
}

table.sched thead th {
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 1;
}

table.sched thead th.who {
  z-index: 3;
}

table.sched .wd {
  font-size: 11px;
  color: var(--muted);
}

table.sched th.holiday,
table.sched td.holiday {
  background: rgba(231, 151, 150, 0.14);
}

table.sched th.weekend {
  color: var(--rose, #e79796);
}

/* 人工調整過的格子要一眼看得出來——那是店長的決定，
   不該與引擎排出來的長得一樣。 */
table.sched td.manual {
  box-shadow: inset 0 0 0 2px var(--ink, #413838);
  font-weight: 600;
}

table.sched td.unavail {
  background: rgba(65, 56, 56, 0.12);
}

table.sched td.prefer-off {
  background: rgba(198, 192, 156, 0.22);
}

table.sched td.cell {
  cursor: pointer;
  min-width: 34px;
  height: 34px;
}

table.sched td.cell:hover {
  background: rgba(255, 201, 136, 0.25);
}

select.cell-pick {
  font-size: 13px;
  padding: 2px;
  max-width: 120px;
}

/* 格線不套用 720px 以下的「表格改卡片」規則：那會把一張月曆
   拆成四百張卡片。它有自己的橫向捲動容器。 */
@media (max-width: 720px) {
  table.sched,
  table.sched thead,
  table.sched tbody,
  table.sched tr,
  table.sched th,
  table.sched td {
    display: revert;
  }
  table.sched thead {
    display: table-header-group;
  }
  table.sched tr {
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
  }
  table.sched td::before {
    content: none;
  }
}

.form-row.compact {
  margin: 0;
  gap: 6px;
}

textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--paper);
  color: inherit;
  resize: vertical;
  box-sizing: border-box;
}

textarea:focus-visible,
.note-input:focus-visible {
  outline: 2px solid var(--apricot, #ffc988);
  outline-offset: 1px;
}

.note-input {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 6px 10px;
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: inherit;
  box-sizing: border-box;
}

/* 日誌內文保留換行。使用者是分行寫的，擠成一段會讀不出他原本的分段。 */
.log-body {
  white-space: pre-wrap;
  font-size: 14px;
  margin-top: 4px;
}

.log-entry {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.log-entry:first-child {
  padding-top: 0;
}

.log-entry:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.log-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

label.inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.toast {
  position: sticky;
  bottom: 16px;
  margin: 16px auto 0;
  max-width: 560px;
  padding: 12px 18px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--sage);
  color: var(--paper);
  text-align: center;
}

.toast.error {
  background: #9a3f3f;
}

@media (hover: none) {
  button:hover {
    transform: none;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media (max-width: 720px) {
  .wrap {
    padding: 16px 14px 40px;
  }
  .card {
    border-radius: 22px;
  }
  .card.hero {
    border-radius: 25px;
  }

  /* 表格改為逐欄卡片，避免橫向捲動 */
  table,
  thead,
  tbody,
  tr,
  th,
  td {
    display: block;
  }
  thead {
    display: none;
  }
  tr {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 8px 12px;
    margin-bottom: 12px;
  }
  td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: none;
    padding: 6px 0;
  }
  td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 13px;
  }
  td:empty {
    display: none;
  }
  .item {
    align-items: flex-start;
  }
}

/* --- 組織圖 --- */

.dept-head {
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-radius: 10px;
}

ul.tree {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 子層往內縮並拉一條導引線，層級一眼看得出來 */
ul.tree ul.tree {
  margin-left: 16px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
}

.node-wrap {
  margin: 4px 0;
}

.node {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  transition: transform var(--t), box-shadow var(--t), background var(--t);
}

.node.editable {
  cursor: grab;
  /* 觸控時保留垂直捲動；長按拾起後由 JS 接管 */
  touch-action: pan-y;
  user-select: none;
}

.node.editable:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

.node.editable:active {
  transform: none;
}

.node.dragging {
  opacity: 0.4;
}

.node-name {
  font-size: 16px;
}

.node-panel {
  margin: 6px 0 10px 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--page);
}

/* 拖曳中的浮動標籤。必須不吃指標事件，否則落點永遠是它自己 */
.drag-ghost {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--rose);
  color: var(--paper);
  font-size: 14px;
  box-shadow: var(--shadow-content);
}

body.dragging-active {
  user-select: none;
  touch-action: none;
}

.drop-ok {
  outline: 2px solid var(--sage);
  outline-offset: 2px;
  background: rgba(198, 192, 156, 0.16);
}

.drop-bad {
  outline: 2px dashed #9a3f3f;
  outline-offset: 2px;
}

/* --- A4 列印版月報表 --- */

.sheet {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  padding: 26px 24px;
  margin-bottom: 20px;
}

.sheet-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.sheet-org {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.sheet-title {
  margin: 2px 0 0;
  font-size: 18px;
  font-weight: 500;
}

.sheet-person {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 4px;
}

.sheet-name {
  font-size: 20px;
}

.sheet-total {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--blush);
  font-size: 14px;
}

.sheet-foot {
  margin-top: 18px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

/* 共用導覽列。六頁掛同一個容器，項目由 nav.js 依 /api/me 的旗標產生。
   未綁定時容器是空的，靠 :empty 收掉，不要在版面上留一條空隙。
   列印隱藏走既有的 .no-print 規則（見下方 @media print），這裡不另寫。 */
#nav {
  display: flex;
  gap: 6px;
  margin: 0 0 20px;
  padding: 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

#nav::-webkit-scrollbar {
  display: none;
}

#nav:empty {
  display: none;
}

#nav a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--t), box-shadow var(--t), color var(--t),
    background var(--t);
}

#nav a:hover {
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

#nav a:active {
  transform: none;
}

#nav a:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 2px;
}

#nav a[aria-current="page"] {
  background: var(--blush);
  border-color: transparent;
  color: var(--ink);
  font-weight: 500;
}

@media (hover: none) {
  #nav a:hover {
    transform: none;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #nav a {
    transition-duration: 0.01ms;
  }
}

@media print {
  @page {
    size: A4;
    margin: 12mm;
  }

  body {
    background: #fff;
  }

  .no-print,
  header,
  .toast {
    display: none !important;
  }

  .wrap,
  .wrap.wide {
    max-width: none;
    padding: 0;
  }

  /* 一位同仁一頁。最後一頁不要多帶一張空白紙。 */
  .sheet {
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    background: #fff;
    page-break-after: always;
    break-after: page;
  }

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

  /* A4 的可列印寬度小於 720px，會誤觸手機的「表格轉卡片」規則。
     這裡把表格還原成表格 —— 這段必須排在那條 media query 之後才蓋得掉。 */
  table,
  thead,
  tbody,
  tr,
  th,
  td {
    display: revert;
  }
  table {
    width: 100%;
    border-collapse: collapse;
  }
  thead {
    display: table-header-group; /* 跨頁時重複表頭 */
  }
  tr {
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  td::before {
    content: none;
  }
  th,
  td {
    font-size: 12px;
    padding: 5px 6px;
    border-bottom: 1px solid rgba(65, 56, 56, 0.25);
  }

  .sheet-total {
    background: transparent;
    border: 1px solid rgba(65, 56, 56, 0.25);
  }
}

/* --- 集合頁卡片（/hr、/manage）：整張卡片本身就是連結，不另外放按鈕 --- */
.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.link-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 44px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: var(--shadow-card);
  color: inherit;
  text-decoration: none;
  transition: transform var(--t), box-shadow var(--t);
}

.link-card h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}

.link-card p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.link-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-content);
}

.link-card:active {
  transform: translateY(0) scale(0.99);
}

.link-card:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

@media (hover: none) {
  .link-card:hover {
    transform: none;
    box-shadow: var(--shadow-card);
  }
}

@media (max-width: 720px) {
  .link-grid {
    grid-template-columns: 1fr;
  }
}

/* --- 例行檢查：行動端時間軸（013） --- */

.shift-tabs {
  display: flex;
  gap: 8px;
  margin: 4px 0 14px;
}

.checklist-manual-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.checklist-manual-link .btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.shift-tab {
  flex: 1;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--page);
  color: var(--ink);
  font-size: 15px;
}

.shift-tab.active {
  background: var(--rose);
  color: var(--paper);
}

.progress-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

.progress-label {
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
}

.progress-bar {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--sage);
  transition: width var(--t);
}

.tl-empty {
  text-align: center;
  padding: 24px 0;
}

.tl-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform var(--t), box-shadow var(--t), opacity var(--t), background var(--t);
}

.tl-card:hover {
  transform: translateY(-1px);
}

.tl-card:active {
  transform: translateY(0) scale(0.99);
}

.tl-card:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.tl-card.done {
  background: var(--page);
  opacity: 0.6;
}

.tl-card.locked {
  cursor: default;
}

.tl-card.locked:hover {
  transform: none;
}

.tl-card.warn {
  border-color: var(--apricot);
}

.tl-anchor {
  flex-shrink: 0;
  min-width: 60px;
  padding-top: 3px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.tl-body {
  flex: 1;
  min-width: 0;
}

.tl-title {
  font-size: 16px;
  font-weight: 600;
}

.tl-field-label {
  color: var(--rose);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.tl-criteria-label {
  margin-top: 8px;
}

.tl-tag {
  font-size: 11px;
  color: var(--muted);
  margin-left: 6px;
}

.tl-desc {
  font-size: 14px;
  color: var(--ink);
  margin-top: 1px;
}

.tl-note {
  margin-top: 4px;
  font-size: 13px;
}

.tl-note-input {
  margin-top: 8px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: var(--page);
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
}

.tl-note-input:focus-visible {
  outline: 2px solid var(--apricot);
}

.tl-check {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: transparent;
}

.tl-check.checked {
  background: var(--sage);
  border-color: var(--sage);
  color: var(--paper);
}

.tl-check.failed {
  background: var(--apricot);
  border-color: var(--apricot);
  color: var(--ink);
}

.locked-banner {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 13px;
  background: var(--page);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}

/* --- 抽查首屏與評分 --- */

.today-shift-status {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.shift-status,
.week-shift-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--page);
}

.shift-status {
  min-height: 56px;
  padding: 10px 14px;
}

.shift-status.complete,
.week-shift-cell.complete {
  border-color: rgba(74, 107, 61, 0.35);
  background: rgba(198, 192, 156, 0.18);
}

.shift-status.missing,
.week-shift-cell.missing {
  border-color: rgba(231, 151, 150, 0.5);
  background: rgba(245, 206, 199, 0.22);
}

.week-shift-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 12px 0 8px;
}

.week-shift-cell {
  padding: 6px 9px;
  font-size: 12px;
}

.score-choice-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 6px;
  width: 100%;
}

.score-choice-group label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--page);
  cursor: pointer;
}

.score-choice-group input {
  width: 20px;
  height: 20px;
  margin: 0;
}

.pii-reminder {
  margin: 14px 0;
  font-size: 13px;
}

.secondary-entry-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.secondary-entry-grid a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--page);
  color: var(--ink);
  text-decoration: none;
}

@media (hover: none) {
  .tl-card:hover {
    transform: none;
  }
}

@media (max-width: 720px) {
  .log-filters {
    grid-template-columns: 1fr;
  }

  .checklist-manual-link {
    align-items: stretch;
    flex-direction: column;
  }

  .tl-anchor {
    min-width: 52px;
  }
}

/* --- 「查看教學」小連結（017）：掛在時間軸卡片與抽驗項目上 --- */

.item-wiki-link,
.tl-wiki-link {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--rose);
  text-decoration: none;
}

.item-wiki-link:hover,
.tl-wiki-link:hover {
  text-decoration: underline;
}

/* ==========================================================
   /wiki：一樓環境教學頁。2026-08-21 從收合讀卡改成一頁完整圖文。
   閱讀型頁面：動效只用安靜的過渡，不上音效、不上視差／粒子層。
   ========================================================== */

.wiki-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.wiki-side {
  position: sticky;
  top: 16px;
}

.wiki-jump {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wiki-jump a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
  transition: background var(--t), color var(--t), border-color var(--t);
}

.wiki-jump a:hover {
  background: var(--paper);
  border-color: var(--line);
  color: var(--ink);
}

.wiki-toc-no {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--blush);
  color: var(--ink);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wiki-search-card {
  padding: 14px 16px;
}

.wiki-search-row {
  display: flex;
  gap: 8px;
}

.wiki-search-row input {
  flex: 1;
  min-height: 44px;
  border-radius: 13px;
  border: 1px solid var(--line);
  padding: 0 14px;
  font-size: 15px;
  background: var(--paper);
  color: var(--ink);
}

.wiki-chapter {
  margin: 0 0 34px;
}

/* 全站的 <header> 是 flex（頁首那條），章節標題要的是一般文件流：
   標號、標題、引言各自一行。不改回 block 的話三段會被擠成三欄。 */
.wiki-chapter-head {
  display: block;
  margin: 0 0 14px;
  padding: 0 0 0 2px;
}

.wiki-chapter-no {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--muted);
}

.wiki-chapter-head h2 {
  margin: 2px 0 6px;
  font-size: 22px;
  font-weight: 600;
}

.wiki-chapter-intro {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
  max-width: 62ch;
}

.wiki-item {
  margin-bottom: 14px;
  scroll-margin-top: 16px;
}

.wiki-item h3 {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 600;
}

.wiki-points {
  margin: 0 0 12px;
  padding-left: 18px;
}

.wiki-points li {
  font-size: 15px;
  line-height: 1.85;
  margin-bottom: 4px;
}

.wiki-line {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
}

.wiki-line-tag {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--blush);
  color: var(--ink);
  font-size: 12px;
}

.wiki-line-tag.ok {
  background: var(--sage);
}

/* 教學文字的輕量標記（web/wiki-format.js 產出）。
   標籤是掃讀用的入口詞，清單是要逐項確認的檢核點——兩者都不該跟內文同權重。 */
.qc-p {
  margin: 0;
}

.qc-p + .qc-p,
.qc-p + .qc-list,
.qc-list + .qc-p {
  margin-top: 6px;
}

.qc-label {
  font-weight: 700;
  color: var(--ink);
}

.qc-list {
  margin: 4px 0 0;
  padding-left: 20px;
}

.qc-list li {
  margin-bottom: 2px;
}

.wiki-line .qc-list,
.wiki-line .qc-p {
  display: inline-block;
  vertical-align: top;
  max-width: calc(100% - 60px);
}

.wiki-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

/* 單張圖時不要撐滿整個閱讀寬度：這些是設備特寫，放大到 700px 只是
   讓人得上下捲，並沒有多看到什麼。 */
.wiki-figure {
  margin: 0;
  max-width: 440px;
}

.wiki-figure img {
  width: 100%;
  max-width: 100%;
  border-radius: 14px;
  border: 1px solid var(--line);
  display: block;
}

.wiki-figure figcaption {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}

/* 從「查看教學」深連結進來時，標一下是哪一條，免得使用者要自己找。 */
.wiki-target {
  outline: 2px solid var(--peach);
  outline-offset: 3px;
  transition: outline-color 1.2s ease;
}

/* 每日作業頁裡的教學目錄（第三順位那一段）。 */
.wiki-toc-inline {
  display: grid;
  gap: 6px;
}

.wiki-toc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
}

.wiki-toc-count {
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 760px) {
  .wiki-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .wiki-side {
    position: static;
  }
  .wiki-jump {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .wiki-jump a {
    flex: none;
    border: 1px solid var(--line);
    background: var(--paper);
    border-radius: 999px;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wiki-jump a,
  .wiki-target {
    transition-duration: 0.01ms;
  }
}

/* 每日作業頁的工作日誌輸入區。 */
#worklog-text {
  width: 100%;
  border-radius: 13px;
  border: 1px solid var(--line);
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.7;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  resize: vertical;
  margin-bottom: 10px;
}

/* ==========================================================
   /qc-report：一樓環境評核月報。2026-08-21 從六張卡的儀錶板收斂成
   「一頁交付」——螢幕上看得懂，列印出來剛好一張 A4。
   inline SVG 圖表，不引外部庫；顏色沿用既有 CSS 變數。
   ========================================================== */

.qc-page {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-content);
  padding: 26px 28px 20px;
}

.qc-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}

.qc-page-brand {
  margin: 0;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--muted);
}

.qc-page-title {
  margin: 4px 0 0;
  font-size: 21px;
  font-weight: 600;
}

.qc-page-meta {
  text-align: right;
}

.qc-page-meta p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
}

/* 主角區：整頁只有這一個數字用這個字級，其餘一律降階。 */
.qc-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 4px 0 20px;
}

.qc-headline-main {
  display: flex;
  align-items: center;
  gap: 18px;
}

.qc-headline-ring {
  flex: none;
  line-height: 0;
}

.qc-headline-value {
  display: block;
  font-size: 46px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1px;
}

.qc-headline-label {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 500;
}

.qc-headline-sub {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  max-width: 34ch;
  line-height: 1.6;
}

.qc-headline-side {
  display: flex;
  gap: 26px;
  margin: 0;
}

.qc-headline-side dt {
  font-size: 12px;
  color: var(--muted);
}

.qc-headline-side dd {
  margin: 2px 0 0;
  font-size: 22px;
  font-weight: 600;
}

.qc-sub {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 1px;
}

.qc-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.qc-block {
  padding: 14px 0 6px;
  border-top: 1px solid var(--line);
}

.qc-block h3 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
}

.qc-foot-note {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
}

.qc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.qc-table th {
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  color: var(--muted);
  padding: 4px 8px 6px 0;
  border-bottom: 1px solid var(--line);
}

.qc-table td {
  padding: 7px 8px 7px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.6;
}

.qc-table .qc-num {
  white-space: nowrap;
}

.qc-page-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
}

@media (max-width: 640px) {
  .qc-page {
    padding: 18px 16px 14px;
    border-radius: 18px;
  }
  .qc-headline-value {
    font-size: 38px;
  }
  .qc-headline-side {
    gap: 18px;
  }
  .qc-headline-side dd {
    font-size: 18px;
  }
  /* 窄螢幕的逐人考核改逐欄卡片，沿用全站表格的作法。 */
  .qc-table thead {
    display: none;
  }
  .qc-table tr {
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
  }
  .qc-table td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border: none;
    padding: 2px 0;
  }
  .qc-table td::before {
    content: attr(data-label);
    font-size: 12px;
    color: var(--muted);
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media print {
  /* 一頁 A4：邊框、陰影、圓角在紙上沒有意義，字級整體降一階讓內容進得去。 */
  .qc-page {
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    background: #fff;
  }
  .qc-page-title {
    font-size: 18px;
  }
  .qc-headline {
    padding: 2px 0 14px;
  }
  .qc-headline-value {
    font-size: 38px;
  }
  .qc-headline-side dd {
    font-size: 18px;
  }
  .qc-block {
    padding: 10px 0 4px;
    break-inside: avoid;
  }
  .qc-table {
    font-size: 11px;
  }
  .qc-table td {
    padding: 4px 6px 4px 0;
  }
}

/* ==========================================================
   fx.js：呼吸／粒子／耳語框（純展示層，見 /fx.js）

   2026-08-22 依使用者指示拆掉慣性視差與 8-bit 音效兩層。深度層容器本身
   保留——它現在的角色是呼吸動畫與粒子欄的宿主，不再被 JS 逐幀位移。
   ========================================================== */

/* 深度層：兩個固定容器，內層由 web/fx.js 掛上呼吸動畫與粒子欄。
   z-index 皆為負值，永遠壓在一般內容之下，pointer-events:none 保證
   不吃掉任何點擊。 */
.fx-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
#fxLayerBg {
  z-index: -2;
}
#fxLayerFg {
  z-index: -1;
}

.fx-bg-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 質數錯拍呼吸：背 11s／中 7s／前 5s，彼此互質不對拍；統一由 --amp 調幅 */
.fx-breathe-bg {
  animation: fx-breathe-bg 11s ease-in-out infinite;
}
.fx-breathe-fg {
  animation: fx-breathe-fg 5s ease-in-out infinite;
}
@keyframes fx-breathe-bg {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(calc(-2.5px * var(--amp)));
  }
}
@keyframes fx-breathe-fg {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(calc(-5px * var(--amp))) rotate(calc(0.3deg * var(--amp)));
  }
}

/* 懸浮粒子：至多 7 顆，固定種子（left%／delay）由 fx.js 寫死，不隨機 */
.fx-particle-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.fx-particle {
  position: absolute;
  top: 100%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--apricot);
  opacity: 0.5;
  animation-name: fx-drift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.fx-particle.c-rose {
  background: var(--rose);
}
.fx-particle.c-sage {
  background: var(--sage);
  width: 3px;
  height: 3px;
}
.fx-particle.c-blush {
  background: var(--blush);
}
@keyframes fx-drift {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 0;
  }
  8% {
    opacity: 0.6;
  }
  92% {
    opacity: 0.35;
  }
  to {
    transform: translate3d(calc(20px * var(--amp)), -120vh, 0);
    opacity: 0;
  }
}

/* 耳語框 tooltip：全頁單一 fixed 容器，由 fx.js 依懸停／焦點/點按控制顯隱 */
.fx-whisper {
  position: fixed;
  z-index: 60;
  max-width: 240px;
  padding: 8px 10px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  line-height: 1.5;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--t), transform var(--t);
}
.fx-whisper.show {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fx-breathe-bg,
  .fx-breathe-fg {
    animation: none !important;
  }
  .fx-particle-field {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------------
   我的班表（打卡頁最上方，2026-08-21）

   同仁開這一頁最常問的是「我今天幾點上」，所以今天的班用大字獨占一行，
   往後六天壓成一排小格子當佐證——那是「隨時可查」的資訊，不是主角。
   --------------------------------------------------------------------------- */

.tiny-link {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
}
.tiny-link:hover {
  color: var(--ink);
}

.shift-today {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 6px 0 14px;
}
.shift-today-name {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.shift-today-time {
  font-size: 17px;
  color: var(--muted);
}

.shift-week {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}
.shift-cell {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 4px;
  text-align: center;
  background: var(--paper);
  min-height: 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.shift-cell.off {
  background: transparent;
  color: var(--muted);
}
.shift-cell-day {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}
.shift-cell-label {
  font-size: 15px;
  font-weight: 600;
}

@media (max-width: 480px) {
  .shift-week {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- 代看橫幅（view-as，019）--- */
/*
 * 這一條的工作是「不讓人忘記自己不是自己」，所以刻意用 ink 底、跨滿版、
 * sticky 釘在頂端——它必須明顯到不會被當成一般提示，但又不能蓋住內容，
 * 所以用 sticky 推開版面而不是 fixed 浮在上面。
 */
.acting-as-banner {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 2px 10px rgba(65, 56, 56, 0.2);
}

.acting-as-banner strong {
  color: var(--apricot);
  font-weight: 700;
}

.acting-as-text {
  flex: 1 1 auto;
  min-width: 0;
}

.acting-as-meta {
  flex: 0 0 auto;
  opacity: 0.75;
  font-size: 13px;
}

/* 44px 可點目標下限，與站台其他行動列一致。 */
.acting-as-exit {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(255, 250, 247, 0.5);
  border-radius: 999px;
  background: transparent;
  color: var(--paper);
  font-size: 14px;
  cursor: pointer;
  transition: 0.18s ease;
}

.acting-as-exit:hover {
  background: rgba(255, 250, 247, 0.14);
}

.acting-as-exit:active {
  transform: scale(0.98);
}

.acting-as-exit:focus-visible {
  outline: 2px solid var(--apricot);
  outline-offset: 2px;
}

@media (hover: none) {
  .acting-as-exit:hover {
    background: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .acting-as-exit {
    transition-duration: 0.01ms;
  }
}

/* ---------------------------------------------------------------------------
 * 招募日誌 /recruit（020）
 *
 * 版面分兩層：面試、海選、工作日誌三塊等權為第一順位，系統迭代建議為
 * 第二順位。第二層不是「藏起來」——它仍是完整可寫可看歷史的一整張卡，
 * 只是標題與底色明顯輕一階，讓視線先落在上面三塊。
 * ------------------------------------------------------------------------- */

/* 兩個可比較的數字（今天約到 / 今天寄出）用同一個尺寸。刻意相同：
 * 日後要算「寄出 → 約到」的轉換率，這兩個數就是分母與分子，
 * 大小不一樣會讓人下意識以為其中一個比較重要。 */
.rc-metric {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 10px 0 4px;
}

.rc-metric-value {
  font-size: 46px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1px;
}

.rc-metric-label {
  font-size: 15px;
  font-weight: 500;
}

.rc-metric-sub {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 12px;
}

.rc-form {
  margin-top: 6px;
}

.rc-sub-head {
  margin: 18px 0 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.rc-list {
  margin-top: 8px;
}

.rc-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-height: 44px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.rc-item:first-child {
  border-top: none;
}

.rc-item-main {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
}

/* 建議是整段文字，一行放不下，讓它自己佔一整行再換行顯示。 */
.rc-item-block .rc-item-main {
  flex-basis: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.rc-item-done .rc-item-main {
  color: var(--muted);
}

.rc-item-tag {
  flex: none;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.rc-item-meta {
  flex: none;
  color: var(--muted);
  font-size: 13px;
}

.rc-item-btn {
  flex: none;
  min-height: 36px;
  padding: 6px 14px;
  font-size: 13px;
}

.rc-empty {
  margin: 8px 0 0;
}

.rc-manage {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.rc-manage summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}

.rc-manage summary:focus-visible {
  outline: 2px solid var(--apricot);
  outline-offset: 2px;
}

.rc-manage input[type="text"] {
  flex: 1 1 180px;
}

/* 第二順位：同樣是一張完整的卡，但不用 hero 的大圓角與強陰影，
 * 標題也降一階。降權重是縮小與弱化，不是把功能藏起來。 */
.rc-tier2 {
  background: transparent;
  box-shadow: none;
}

.rc-tier2-head {
  font-size: 14px;
  color: var(--muted);
}