/* Picturebook 示範皮：繪本貼紙風覆寫層（基於 site.css 之上）。
 * 來源：line-flex-picturebook-demo.json
 * 紙色 #FFFCF6 / 墨 #3E3A39 / 天空藍 #A8D3E6 / 太陽黃 #F6D27A / 珊瑚粉 #F2A497 / 薄荷綠 #B9DAA5
 * 還原：MBOX_THEME 未設或為 default 即不載入此檔。 */
:root {
  --pb-paper: #FFFCF6;
  --pb-ink: #3E3A39;
  --pb-sky: #A8D3E6;
  --pb-sun: #F6D27A;
  --pb-coral: #F2A497;
  --pb-mint: #B9DAA5;
  --pb-border: 2px solid #3E3A39;
  --pb-shadow: 4px 4px 0 #3E3A39;
  --brand: #3E3A39;
  --muted: #7A6F6A;
  color: #3E3A39;
  background: #FFFCF6;
}

body {
  background: var(--pb-paper);
  color: var(--pb-ink);
}

/* 頂欄：紙色 + 墨色粗底線 */
.topbar {
  background: var(--pb-paper);
  border-bottom: 3px solid var(--pb-ink);
}

.brand {
  color: var(--pb-ink);
}

.brand span {
  color: var(--pb-ink);
  background: var(--pb-sun);
  border: var(--pb-border);
  border-radius: 10px;
  padding: 0 8px;
  margin-right: 6px;
  display: inline-block;
  transform: rotate(-2deg);
}

.brand small {
  color: var(--pb-ink);
  font-weight: 700;
}

.public-nav a {
  color: var(--pb-ink);
  font-weight: 600;
}

/* 按鈕：太陽黃貼紙 */
button,
.button {
  background: var(--pb-sun);
  color: var(--pb-ink);
  border: var(--pb-border);
  border-radius: 12px;
  box-shadow: var(--pb-shadow);
  transition: transform 0.1s;
}

button:hover,
.button:hover {
  background: var(--pb-coral);
  transform: translate(-1px, -1px);
}

.quiet {
  background: #fff;
  color: var(--pb-ink);
  border: var(--pb-border);
  box-shadow: var(--pb-shadow);
}

.quiet:hover {
  background: var(--pb-mint);
}

/* 卡片：貼紙感描邊 + 大圓角 + 硬陰影 */
.card {
  background: #fff;
  border: var(--pb-border);
  border-radius: 18px;
  box-shadow: var(--pb-shadow);
}

.page-heading .eyebrow {
  display: inline-block;
  background: var(--pb-ink);
  color: var(--pb-paper);
  border-radius: 8px;
  padding: 4px 12px;
  letter-spacing: 2px;
}

/* 首頁 hero：天空藍主卡 + 太陽黃訊息泡泡 */
.hero-note {
  background: var(--pb-sky);
  border: 3px solid var(--pb-ink);
  border-radius: 18px;
  box-shadow: var(--pb-shadow);
}

.hero-note .eyebrow {
  color: var(--pb-ink);
  font-weight: 800;
}

.message-bubble {
  background: #fff;
  border: var(--pb-border);
  border-radius: 18px 18px 18px 4px;
  color: var(--pb-ink);
  box-shadow: var(--pb-shadow);
}

.pill {
  background: var(--pb-sun);
  border: var(--pb-border);
  color: var(--pb-ink);
  font-weight: 700;
}

.number {
  display: inline-block;
  background: var(--pb-mint);
  border: var(--pb-border);
  border-radius: 8px;
  color: var(--pb-ink);
  padding: 2px 10px;
}

/* 側欄：紙色 + 作用中項目為薄荷綠貼紙 */
.sidebar {
  background: var(--pb-paper);
  border-right: 3px solid var(--pb-ink);
}

.navigation a {
  color: var(--pb-ink);
  border: 2px solid transparent;
  border-radius: 12px;
  font-weight: 600;
}

.navigation a[aria-current] {
  background: var(--pb-mint);
  border: var(--pb-border);
  color: var(--pb-ink);
}

.tenant {
  border-top: 2px dashed var(--pb-ink);
}

/* 表格：墨色表頭線 */
th {
  background: var(--pb-sun);
  color: var(--pb-ink);
  border-bottom: 2px solid var(--pb-ink);
}

td {
  border-bottom: 1px solid #D8CFC4;
}

/* 表單：粗描邊圓角輸入框 */
input,
select,
textarea {
  border: var(--pb-border);
  border-radius: 12px;
  background: #fff;
  color: var(--pb-ink);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--pb-sky);
  outline-offset: 2px;
}

/* 通知：薄荷綠 / 珊瑚粉貼紙 */
.notice {
  background: var(--pb-mint);
  border: var(--pb-border);
  border-radius: 12px;
  color: var(--pb-ink);
  box-shadow: var(--pb-shadow);
}

.error {
  background: var(--pb-coral);
  border: var(--pb-border);
  border-radius: 12px;
  color: var(--pb-ink);
}

/* 頁尾 */
.footer {
  color: var(--pb-ink);
  border-top: 3px solid var(--pb-ink);
  background: var(--pb-paper);
  font-weight: 600;
}

/* 首頁三欄貼紙：依序上薄荷/珊瑚/太陽黃 */
.feature-grid .card:nth-child(1) {
  background: #EFF7E8;
}

.feature-grid .card:nth-child(2) {
  background: #FDEDE8;
}

.feature-grid .card:nth-child(3) {
  background: #FDF3D7;
}

.stats strong {
  color: var(--pb-ink);
}

a {
  color: #4A6FA5;
}

/* ---- 繪本文字層次：螢光筆標題、label 貼紙、內文連結 ---- */

/* 卡片標題：太陽黃螢光筆畫線 */
.card h2 {
  display: inline-block;
  background: linear-gradient(transparent 55%, var(--pb-sun) 55%, var(--pb-sun) 95%, transparent 95%);
  padding: 0 8px;
}

.section-heading h2 {
  margin: 0;
}

/* 表單欄位名稱：呼應 demo 的 xs 粗體小標籤 */
.form-grid label,
.form-stack label {
  color: var(--pb-ink);
}

.form-grid label,
.form-stack label {
  background: #fff;
  border: var(--pb-border);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 3px 3px 0 #3E3A39;
}

.form-grid label.check-label,
.form-stack label.check-label {
  box-shadow: none;
  border-style: dashed;
}

.form-grid small {
  color: var(--pb-ink);
  opacity: 0.75;
}

/* 明細定義清單：dt 做成墨色小貼紙 */
.application-details dt {
  background: var(--pb-ink);
  color: var(--pb-paper);
  border-radius: 8px;
  padding: 2px 10px;
  font-size: 12px;
  letter-spacing: 1px;
  justify-self: start;
  align-self: start;
}

.application-details dd {
  font-weight: 600;
  font-size: 17px;
}

/* 卡片內文連結：加粗 + 底線加粗，hover 上螢光筆 */
.card a:not(.button),
td a {
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.card a:not(.button):hover,
td a:hover {
  background: var(--pb-sun);
  text-decoration: none;
}

/* 發送確認三格數據：呼應 demo 航班/住宿/待辦三貼紙 */
.stats > div {
  background: #fff;
  border: var(--pb-border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--pb-shadow);
}

.stats > div:nth-child(1) {
  background: #EFF7E8;
}

.stats > div:nth-child(2) {
  background: #FDF3D7;
}

.stats > div:nth-child(3) {
  background: #FDEDE8;
}

.stats span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
}

/* 空狀態：虛線貼紙框 */
.empty {
  border: 2px dashed var(--pb-ink);
  border-radius: 12px;
  background: #fff;
}

/* 群組 fieldset 圖例：薄荷小貼紙 */
fieldset {
  border: var(--pb-border);
  border-radius: 12px;
  background: #fff;
}

legend {
  background: var(--pb-mint);
  border: var(--pb-border);
  border-radius: 8px;
  padding: 2px 12px;
  font-weight: 800;
}

/* 次要按鈕在繪本皮下維持紙白貼紙 */
.button.quiet,
button.quiet {
  background: #fff;
}