:root {
  color-scheme: light;
  --craggy-bg: #F8F9FA;
  --craggy-surface: #F1F3F5;
  --craggy-surface-hover: #E9ECEF;
  --craggy-charcoal: #151515;
  --craggy-dark-muted: #1C1C1E;
  --craggy-muted: #71717A;
  --craggy-border: #E4E4E7;
  --craggy-danger: #C03A2B;
  --craggy-emerald: #2F7A55;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  container-type: scroll-state;
}

/* ==========================================
   60-30-10 画布質感：溫潤白底 + 細膩漸層光暈 + 菱格紋 + 微噪點 (Noise)
   ========================================== */
body.craggy-app {
  position: relative;
  background-color: var(--craggy-bg);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(47, 122, 85, 0.045) 0%, transparent 42%),
    radial-gradient(circle at 88% 18%, rgba(21, 21, 21, 0.035) 0%, transparent 48%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0L24 24M24 0L0 24' stroke='rgba(21,21,21,0.035)' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  background-size: 100% 100%, 100% 100%, 24px 24px;
  background-attachment: fixed, fixed, scroll;
  color: var(--craggy-charcoal);
  font-family: "Noto Sans TC", "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.02em;
  line-height: 1.65;
  -webkit-tap-highlight-color: transparent;
}

/* 雜誌紙感微噪點濾鏡層 (Subtle Editorial Film Grain) */
body.craggy-app::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: 0.026;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* ==========================================
   Editorial 排印層級系統 (Editorial Typography)
   ========================================== */
.craggy-app h1,
.craggy-app h2,
.craggy-app h3,
.craggy-app .craggy-heading {
  font-family: "Noto Sans TC", "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.craggy-app .editorial-display {
  font-family: "Barlow Condensed", "Noto Sans TC", sans-serif;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 0.96;
  text-transform: uppercase;
}

.craggy-app .editorial-index {
  font-family: "Barlow Condensed", "JetBrains Mono", sans-serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
}

.craggy-app h1 {
  font-weight: 700;
  letter-spacing: 0.015em;
  line-height: 1.25;
}

.craggy-app h2 {
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.craggy-app h3 {
  font-weight: 600;
  letter-spacing: 0.015em;
  line-height: 1.4;
}

.craggy-app .craggy-label {
  font-family: "Barlow", "Noto Sans TC", sans-serif;
  letter-spacing: 0.035em;
}

.craggy-app .craggy-time {
  font-family: "JetBrains Mono", "Barlow", monospace;
  font-weight: 600;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}

.craggy-app .craggy-room-num {
  font-family: "Barlow Condensed", "Noto Sans TC", sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}

/* ==========================================
   Sharp Geometry (0px Radius) & Editorial Micro-interactions
   ========================================== */
.craggy-app button,
.craggy-app input,
.craggy-app select,
.craggy-app textarea,
.craggy-app fieldset,
.craggy-app dialog,
.craggy-app .craggy-card,
.craggy-app .craggy-card--surface,
.craggy-app .craggy-badge,
.craggy-app .btn-craggy-primary,
.craggy-app .btn-craggy-secondary,
.craggy-app .btn-craggy-danger,
.craggy-app .day-tab,
.craggy-app .member-pill,
.craggy-app .craggy-nav-chip {
  border-radius: 0px;
}

.craggy-app .btn-craggy-primary {
  background-color: var(--craggy-charcoal);
  color: var(--craggy-bg);
  border: 1px solid var(--craggy-charcoal);
  font-family: "Noto Sans TC", "Barlow", sans-serif;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: background-color 240ms var(--ease-out-expo), color 240ms var(--ease-out-expo), border-color 240ms var(--ease-out-expo);
}

.craggy-app .btn-craggy-primary:hover {
  background-color: var(--craggy-bg);
  color: var(--craggy-charcoal);
  border-color: var(--craggy-charcoal);
}

.craggy-app .btn-craggy-secondary {
  background-color: var(--craggy-bg);
  color: var(--craggy-charcoal);
  border: 1px solid var(--craggy-charcoal);
  font-family: "Noto Sans TC", "Barlow", sans-serif;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: background-color 240ms var(--ease-out-expo), color 240ms var(--ease-out-expo), border-color 240ms var(--ease-out-expo);
}

.craggy-app .btn-craggy-secondary:hover {
  background-color: var(--craggy-charcoal);
  color: var(--craggy-bg);
  border-color: var(--craggy-charcoal);
}

.craggy-app .btn-craggy-danger {
  background-color: var(--craggy-bg);
  color: var(--craggy-danger);
  border: 1px solid var(--craggy-danger);
  font-family: "Noto Sans TC", "Barlow", sans-serif;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: background-color 240ms var(--ease-out-expo), color 240ms var(--ease-out-expo), border-color 240ms var(--ease-out-expo);
}

.craggy-app .btn-craggy-danger:hover {
  background-color: var(--craggy-danger);
  color: var(--craggy-bg);
  border-color: var(--craggy-danger);
}

.craggy-app .day-tab {
  position: relative;
  border: 1px solid transparent;
  background-color: transparent;
  color: var(--craggy-muted);
  font-family: "Noto Sans TC", "Barlow", sans-serif;
  font-weight: 600;
  letter-spacing: 0.025em;
  transition: background-color 240ms var(--ease-out-expo), color 240ms var(--ease-out-expo), border-color 240ms var(--ease-out-expo);
}

.craggy-app .day-tab:hover {
  color: var(--craggy-charcoal);
  background-color: var(--craggy-surface-hover);
}

.craggy-app .day-tab.is-active {
  background-color: var(--craggy-charcoal);
  color: var(--craggy-bg);
  border-color: var(--craggy-charcoal);
}

.craggy-app .day-tab.is-active:hover {
  background-color: var(--craggy-dark-muted);
  color: var(--craggy-bg);
}

.craggy-app .member-pill {
  background-color: var(--craggy-bg);
  color: var(--craggy-muted);
  border: 1px solid var(--craggy-border);
  font-family: "Noto Sans TC", "Barlow", sans-serif;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background-color 220ms var(--ease-out-expo), color 220ms var(--ease-out-expo), border-color 220ms var(--ease-out-expo);
}

.craggy-app .member-pill:hover {
  color: var(--craggy-charcoal);
  border-color: var(--craggy-charcoal);
}

.craggy-app .member-pill.is-active {
  background-color: var(--craggy-charcoal);
  color: var(--craggy-bg);
  border-color: var(--craggy-charcoal);
  font-weight: 600;
}

/* 卡片容器與角落建築準星微互動 */
.craggy-app .craggy-card {
  position: relative;
  background-color: rgba(248, 249, 250, 0.94);
  backdrop-filter: blur(6px);
  border: 1px solid var(--craggy-border);
  transition: border-color 260ms var(--ease-out-expo), background-color 260ms var(--ease-out-expo), box-shadow 260ms var(--ease-out-expo);
}

.craggy-app .craggy-card::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--craggy-charcoal);
  border-right: 2px solid var(--craggy-charcoal);
  opacity: 0;
  transition: opacity 220ms var(--ease-out-expo);
  pointer-events: none;
}

.craggy-app .craggy-card:hover {
  border-color: var(--craggy-charcoal);
  background-color: var(--craggy-bg);
  box-shadow: 5px 5px 0px rgba(21, 21, 21, 0.07);
}

.craggy-app .craggy-card:hover::after {
  opacity: 1;
}

/* 重點站點編輯級左側結構粗線與漸層底色 */
.craggy-app .craggy-card--highlight {
  border-color: rgba(21, 21, 21, 0.45);
  border-left: 3px solid var(--craggy-charcoal);
  background-image: linear-gradient(90deg, rgba(241, 243, 245, 0.75) 0%, rgba(248, 249, 250, 0.96) 45%);
}

/* 分頁內容切換微過渡 (@starting-style 支援) */
@media (prefers-reduced-motion: no-preference) {
  .craggy-app .day-content:not(.hidden) {
    opacity: 1;
    translate: 0 0;
    transition: opacity 280ms var(--ease-out-expo), translate 280ms var(--ease-out-expo);
  }

  @starting-style {
    .craggy-app .day-content:not(.hidden) {
      opacity: 0;
      translate: 0 8px;
    }
  }
}

/* 精準時間軸軌道與節點對齊 */
.craggy-app .timeline-track {
  position: relative;
  padding-left: 1.75rem;
  border-left: 1px solid var(--craggy-border);
}

@media (min-width: 640px) {
  .craggy-app .timeline-track {
    padding-left: 2.25rem;
  }
}

.craggy-app .timeline-node {
  position: absolute;
  left: -1.75rem;
  top: 1.5rem;
  width: 11px;
  height: 11px;
  translate: -50% 0;
}

@media (min-width: 640px) {
  .craggy-app .timeline-node {
    left: -2.25rem;
  }
}

.craggy-app .craggy-card--surface {
  background-color: rgba(241, 243, 245, 0.88);
  backdrop-filter: blur(8px);
  border: 1px solid var(--craggy-border);
  transition: border-color 260ms var(--ease-out-expo);
}

.craggy-app .craggy-footer-dark {
  background-color: var(--craggy-dark-muted);
  color: var(--craggy-bg);
  border: 1px solid var(--craggy-charcoal);
}

.craggy-app .craggy-badge {
  border: 1px solid var(--craggy-border);
  background-color: var(--craggy-surface);
  color: var(--craggy-muted);
}

.craggy-app .craggy-nav-chip {
  background-color: var(--craggy-bg);
  color: var(--craggy-charcoal);
  border: 1px solid var(--craggy-border);
  font-family: "Noto Sans TC", "Barlow", sans-serif;
  transition: background-color 220ms var(--ease-out-expo), color 220ms var(--ease-out-expo), border-color 220ms var(--ease-out-expo);
}

.craggy-app .craggy-nav-chip:hover {
  background-color: var(--craggy-charcoal);
  color: var(--craggy-bg);
  border-color: var(--craggy-charcoal);
}

/* 箭頭符號微互動 */
.craggy-app .arrow-glyph {
  display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
  .craggy-app .arrow-glyph {
    transition: translate 220ms var(--ease-out-expo);
  }

  .craggy-app a:hover .arrow-glyph,
  .craggy-app button:hover .arrow-glyph {
    translate: 2px -2px;
  }
}

/* ==========================================
   Scroll Reveal 滾動進場系統 (Compositor-Only + Reduced Motion Safe)
   ========================================== */
@keyframes editorial-reveal {
  from {
    opacity: 0;
    translate: 0 18px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Native CSS Scroll-Driven View Timeline */
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .scroll-reveal {
      animation: editorial-reveal auto var(--ease-out-expo) both;
      animation-timeline: view();
      animation-range: entry 0% entry 28%;
    }
  }

  /* IntersectionObserver Fallback 狀態 (僅在無原生 view() 支援時由 JS 掛載) */
  .js-reveal-fallback .scroll-reveal {
    opacity: 0;
    translate: 0 18px;
    transition: opacity 520ms var(--ease-out-expo), translate 520ms var(--ease-out-expo);
  }

  .js-reveal-fallback .scroll-reveal.is-revealed {
    opacity: 1;
    translate: 0 0;
  }
}

/* ==========================================
   Sticky 頂部列：毛玻璃質感 + 向下捲動自動收合
   ========================================== */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: rgba(248, 249, 250, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

@media (prefers-reduced-motion: no-preference) {
  .top-bar {
    transition: transform 280ms var(--ease-out-expo);
  }
}

@container scroll-state((scrolled: bottom) and (scrollable: top)) {
  .top-bar {
    transform: translateY(-100%);
  }
}

.top-bar:focus-within {
  transform: none;
}

.top-bar.is-hidden:not(:focus-within) {
  transform: translateY(-100%);
}

:target {
  scroll-margin-top: 5rem;
}

/* ==========================================
   Native <dialog> modal scroll containment & backdrop
   ========================================== */
dialog:modal {
  overscroll-behavior: contain;
}

dialog::backdrop {
  overflow: hidden;
  overscroll-behavior: contain;
  background-color: rgba(21, 21, 21, 0.62);
  backdrop-filter: blur(4px);
}

/* ==========================================
   Native <details> accordion styling
   ========================================== */
details.checklist-accordion > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
}

details.checklist-accordion > summary::-webkit-details-marker {
  display: none;
}

details.checklist-accordion > summary .summary-label {
  display: flex;
  align-items: center;
  gap: 0.6ch;
}

details.checklist-accordion > summary .summary-label::before {
  content: "";
  inline-size: 1.1em;
  block-size: 1.1em;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain;
  rotate: -90deg;
}

details.checklist-accordion[open] > summary .summary-label::before {
  rotate: 0deg;
}

details.checklist-accordion::details-content {
  interpolate-size: allow-keywords;
  overflow: clip;
  contain: layout;
}

details.checklist-accordion:not([open])::details-content {
  block-size: 0;
}

@media (prefers-reduced-motion: no-preference) {
  details.checklist-accordion > summary .summary-label::before {
    transition: rotate 240ms var(--ease-out-expo);
  }

  details.checklist-accordion::details-content {
    transition: block-size 320ms var(--ease-out-expo), content-visibility 320ms var(--ease-out-expo), display 320ms var(--ease-out-expo);
    transition-behavior: allow-discrete;
  }
}

/* ==========================================
   公積金與智慧分帳表單及無障礙驗證樣式
   ========================================== */
.craggy-app .visually-hidden {
  position: absolute;
  clip-path: inset(50%);
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
}

.craggy-app .craggy-input {
  font: inherit;
  font-size: max(1rem, 1em);
  min-height: 48px;
  box-sizing: border-box;
  transition: border-color 200ms var(--ease-out-expo), background-color 200ms var(--ease-out-expo);
}

.craggy-app .craggy-input:focus-visible,
.craggy-app button:focus-visible,
.craggy-app a:focus-visible,
.craggy-app summary:focus-visible {
  outline: 2px solid var(--craggy-charcoal);
  outline-offset: 2px;
}

.craggy-app .error-msg {
  display: none;
}

.craggy-app .craggy-input:is(:user-invalid, .user-invalid-fallback) {
  border-color: var(--craggy-danger);
  background-color: rgba(192, 58, 43, 0.04);
}

.craggy-app .craggy-input:is(:user-invalid, .user-invalid-fallback) + .error-msg {
  display: block;
}

.craggy-app input.craggy-input:is(:user-valid, .user-valid-fallback) {
  border-color: var(--craggy-emerald);
}

.craggy-app label.split-member-option {
  cursor: pointer;
  user-select: none;
}

.craggy-app label.split-member-option:has(input:checked),
.craggy-app label.split-member-option.is-checked {
  background-color: var(--craggy-charcoal);
  color: var(--craggy-bg);
  border-color: var(--craggy-charcoal);
  font-weight: 600;
}

.craggy-app label.split-member-option:has(input:focus-visible) {
  outline: 2px solid var(--craggy-charcoal);
  outline-offset: 2px;
}