/* 有應 YOIN — 封閉 Beta 需求對齊示範站 */
/* 平面白底、細邊框、規律留白。無玻璃、無光暈、無膠囊。 */

:root {
  --ink: #0B1020;
  --paper: #F5F7F2;
  --surface: #FFFFFF;
  --link: #5B8CFF;
  --link-ink: #315FCB;
  --response: #C7FF3D;
  --response-edge: #8FBF1F;
  --muted: #4E596B;
  --rail: #DCE2DA;
  --urgent: #B54708;
  --danger: #B42318;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;

  --r-control: 8px;
  --r-panel: 12px;
  --r-dialog: 16px;

  --shell: 1120px;
  --reading: 720px;
  --form: 640px;

  --font-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --font-latin: "Sora", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding-top: 40px; /* 固定 Beta bar 高度 */
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; height: auto; }

h1, h2, h3, h4 { line-height: 1.3; margin: 0 0 var(--s4); }
h1 { font-size: 34px; line-height: 1.18; }
h2 { font-size: 24px; }
h3 { font-size: 19px; }
h4 { font-size: 17px; }
p, ul, ol, dl { margin: 0 0 var(--s4); }

a { color: var(--link-ink); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--link); }

code, .mono { font-family: var(--font-mono); font-size: 0.95em; }

.shell { max-width: var(--shell); margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.reading { max-width: var(--reading); }
.form-width { max-width: var(--form); }

@media (min-width: 768px) {
  .shell { padding-left: clamp(24px, 5vw, 64px); padding-right: clamp(24px, 5vw, 64px); }
  h1 { font-size: 48px; line-height: 1.12; }
  h2 { font-size: 28px; }
}

/* ---------- 焦點與無障礙 ---------- */

:focus-visible {
  outline: 3px solid #5B8CFF;
  outline-offset: 3px;
}

@media (forced-colors: active) {
  :focus-visible { outline-color: CanvasText; }
  .btn-primary, .rail-status { forced-color-adjust: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--surface);
  color: var(--ink);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--ink);
  border-radius: var(--r-control);
}
.skip-link:focus-visible,
.skip-link:focus {
  left: var(--s4);
  top: 48px;
}

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

/* ---------- Beta bar 與 Header ---------- */

.beta-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 40px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: #FFFFFF;
  font-size: 13px;
  line-height: 1.5;
  padding: 0 var(--s3);
  text-align: center;
}

.site-header {
  position: sticky;
  top: 40px;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--rail);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  gap: var(--s4);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--s4);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--r-control);
  font: inherit;
  cursor: pointer;
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.site-nav a:not(.btn) {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s3);
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--r-control);
}
.site-nav a:not(.btn):hover { color: var(--link-ink); text-decoration: underline; }
.site-nav a[aria-current="page"] { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

/* 手機：收合面板 */
.site-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--rail);
  padding: var(--s4);
}
.site-nav[data-open="true"] { display: block; }
.site-nav .nav-cta { margin-top: var(--s3); }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-nav {
    display: flex;
    position: static;
    align-items: center;
    gap: var(--s4);
    border: 0;
    padding: 0;
    background: transparent;
  }
  .site-nav ul { flex-direction: row; gap: var(--s1); }
  .site-nav .nav-cta { margin-top: 0; }
}

/* ---------- 按鈕 ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--r-control);
  border: 1px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { border-color: var(--link-ink); color: var(--link-ink); }

.btn-primary {
  height: 52px;
  padding: 0 20px;
  background: var(--response);
  border-color: var(--response-edge);
  color: var(--ink);
  font-weight: 700;
}
.btn-primary:hover { background: #BBF32F; color: var(--ink); border-color: var(--ink); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---------- 版面區塊 ---------- */

.section { padding: var(--s7) 0; }
.section + .section { border-top: 1px solid var(--rail); }
.section-lead { color: var(--muted); max-width: var(--reading); }

.panel {
  background: var(--surface);
  border: 1px solid var(--rail);
  border-radius: var(--r-panel);
  padding: var(--s5);
}

.panel-grid {
  display: grid;
  gap: var(--s4);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .panel-grid-2 { grid-template-columns: 1fr 1fr; }
  .panel-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
}

.note {
  border: 1px solid var(--rail);
  border-left: 4px solid var(--muted);
  background: var(--surface);
  border-radius: var(--r-control);
  padding: var(--s4);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.note-urgent { border-left-color: var(--urgent); color: var(--urgent); }
.note-danger { border-left-color: var(--danger); color: var(--danger); }

/* ---------- 狀態標籤（文字為主，不只靠色彩） ---------- */

.chip {
  display: inline-block;
  padding: 2px var(--s2);
  border: 1px solid var(--rail);
  border-radius: var(--r-control);
  font-size: 14px;
  line-height: 1.5;
  background: var(--surface);
  color: var(--muted);
}
.chip-open { border-color: var(--response-edge); background: #F2FBDD; color: #3D5A00; }
.chip-pending { border-color: var(--rail); color: var(--muted); }
.chip-unsupported { border-color: var(--danger); color: var(--danger); }
.chip-planned { border-color: var(--link-ink); color: var(--link-ink); }
.chip-demo { border-color: var(--urgent); color: var(--urgent); font-weight: 700; }

/* ---------- 需求—回應對齊軌（唯一 signature 圖形） ---------- */

.align-rail {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
  align-items: stretch;
}
@media (min-width: 600px) {
  .align-rail { grid-template-columns: 1fr minmax(120px, 160px) 1fr; }
}

.rail-side {
  background: var(--surface);
  border: 1px solid var(--rail);
  border-radius: var(--r-panel);
  padding: var(--s4);
}
.rail-side .rail-title {
  display: block;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: var(--s2);
  color: var(--ink);
}
.rail-side ul {
  margin: 0;
  padding-left: 1.2em;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.rail-side li + li { margin-top: var(--s1); }

.rail-track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
}
.rail-track::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, var(--rail) 0 8px, transparent 8px 14px);
}
.align-rail[data-state="clear"] .rail-track::before {
  background: linear-gradient(90deg, var(--rail), var(--response-edge), var(--rail));
}

.rail-status {
  position: relative;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-control);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
  border: 1px solid var(--rail);
  background: var(--surface);
  color: var(--muted);
  text-align: center;
}
.align-rail[data-state="clear"] .rail-status {
  background: var(--response);
  border-color: var(--response-edge);
  color: var(--ink);
}

.align-rail-caption {
  grid-column: 1 / -1;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

/* Hero 內的軌道示意（桌面約 360x220） */
.hero-rail { width: 100%; }
@media (min-width: 1024px) {
  .hero-rail { max-width: 360px; min-height: 220px; margin-left: auto; }
}

/* ---------- Hero ---------- */

.hero { padding: var(--s7) 0 var(--s7); }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr 1fr; gap: var(--s8); }
}
.hero .lede { font-size: 18px; color: var(--muted); max-width: 34em; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.hero-nomatch {
  display: inline-block;
  margin-top: var(--s2);
  font-weight: 700;
  color: var(--urgent);
}

/* ---------- 限制區：夜藍實色帶 ---------- */

.limit-band {
  background: var(--ink);
  color: #E7EBF4;
  padding: var(--s7) 0;
}
.limit-band h2 { color: #FFFFFF; }
.limit-band a { color: #AFC6FF; }
.limit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
}
@media (min-width: 768px) {
  .limit-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.limit-group {
  border: 1px solid #2A3350;
  border-radius: var(--r-panel);
  padding: var(--s4);
}
.limit-group h3 { color: #FFFFFF; font-size: 16px; }
.limit-group ul { margin: 0; padding-left: 1.2em; font-size: 14px; line-height: 1.6; }
.limit-group li + li { margin-top: var(--s1); }

/* ---------- 任務卡片與篩選 ---------- */

.filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
  margin-bottom: var(--s5);
}
@media (min-width: 700px) {
  .filters { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; }
}
.filters .field { margin: 0; }

.task-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
}
@media (min-width: 700px) { .task-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .task-grid { grid-template-columns: 1fr 1fr 1fr; } }

.task-card {
  background: var(--surface);
  border: 1px solid var(--rail);
  border-radius: var(--r-panel);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.task-card h3 { margin: 0; font-size: 17px; }
.task-meta {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.task-meta dt { font-weight: 700; float: left; margin-right: var(--s2); }
.task-meta dd { margin: 0 0 var(--s1); }
.task-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }

.no-results {
  border: 1px dashed var(--rail);
  border-radius: var(--r-panel);
  padding: var(--s6);
  text-align: center;
  color: var(--muted);
}

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

.field { margin-bottom: var(--s5); }
.field > label, .field > .field-label {
  display: block;
  font-weight: 700;
  margin-bottom: var(--s2);
}
.req { color: var(--danger); font-weight: 700; font-size: 14px; margin-left: var(--s1); }
.hint { display: block; font-size: 14px; line-height: 1.5; color: var(--muted); margin-top: var(--s1); }

input[type="text"], select, textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--s2) var(--s3);
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--muted);
  border-radius: var(--r-control);
}
textarea { min-height: 120px; resize: vertical; }

input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--danger);
  border-width: 2px;
}

.choice-list { border: 0; margin: 0 0 var(--s5); padding: 0; }
.choice-list legend { font-weight: 700; padding: 0; margin-bottom: var(--s2); }
.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3);
  border: 1px solid var(--rail);
  border-radius: var(--r-control);
  background: var(--surface);
  margin-bottom: var(--s2);
}
.choice input { width: 20px; height: 20px; margin-top: 3px; flex: none; }
.choice label { min-height: 24px; }

.field-error {
  display: block;
  color: var(--danger);
  font-size: 14px;
  line-height: 1.5;
  margin-top: var(--s1);
  font-weight: 700;
}
.field-error:empty { display: none; }

.error-summary {
  border: 2px solid var(--danger);
  border-radius: var(--r-panel);
  background: var(--surface);
  padding: var(--s4);
  margin-bottom: var(--s5);
}
.error-summary h3 { color: var(--danger); font-size: 16px; margin-bottom: var(--s2); }
.error-summary ul { margin: 0; padding-left: 1.2em; }
.error-summary:not([data-visible="true"]) { display: none; }

/* 多步驟表單 */
.steps-indicator {
  list-style: none;
  margin: 0 0 var(--s5);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.steps-indicator li {
  border: 1px solid var(--rail);
  border-radius: var(--r-control);
  padding: 2px var(--s2);
  background: var(--surface);
}
.steps-indicator li[aria-current="step"] {
  border-color: var(--ink);
  color: var(--ink);
  font-weight: 700;
}

.step { margin-bottom: var(--s5); }
.js .step[data-active="false"] { display: none; }
.step h2:focus-visible, .step h2:focus { outline: 3px solid #5B8CFF; outline-offset: 3px; }

.step-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }

.preview-list { border: 1px solid var(--rail); border-radius: var(--r-panel); background: var(--surface); padding: var(--s4); margin: 0 0 var(--s5); }
.preview-list dt { font-weight: 700; font-size: 14px; color: var(--muted); }
.preview-list dd { margin: 0 0 var(--s3); }

.draft-output {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
  min-height: 200px;
}

.result-permanent {
  border: 2px solid var(--urgent);
  border-radius: var(--r-panel);
  background: var(--surface);
  padding: var(--s4);
  color: var(--urgent);
  font-weight: 700;
  margin-bottom: var(--s4);
}

/* ---------- Toast（輔助回饋，非唯一回饋） ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--s5);
  transform: translateX(-50%);
  z-index: 70;
  max-width: min(90vw, 480px);
  background: var(--ink);
  color: #FFFFFF;
  border-radius: var(--r-control);
  padding: var(--s3) var(--s4);
  font-size: 14px;
  line-height: 1.5;
}
.toast:empty { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: toast-in 200ms ease-out; }
  @keyframes toast-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* ---------- 表格 ---------- */

.cap-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--rail); border-radius: var(--r-panel); font-size: 15px; }
.cap-table caption { text-align: left; font-weight: 700; padding: var(--s3) 0; }
.cap-table th, .cap-table td { border: 1px solid var(--rail); padding: var(--s3); text-align: left; vertical-align: top; line-height: 1.5; }
.cap-table th { background: var(--paper); }
.table-scroll { overflow-x: auto; }

/* ---------- FAQ ---------- */

.faq-item {
  background: var(--surface);
  border: 1px solid var(--rail);
  border-radius: var(--r-panel);
  margin-bottom: var(--s3);
}
.faq-item summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding: var(--s3) var(--s4);
  cursor: pointer;
  font-weight: 700;
  list-style-position: inside;
}
.faq-item .faq-body { padding: 0 var(--s4) var(--s4); }

/* ---------- 文章 ---------- */

.article { max-width: var(--reading); }
.article h2 { margin-top: var(--s6); }
.breadcrumb { font-size: 14px; line-height: 1.5; color: var(--muted); margin-bottom: var(--s4); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "›"; margin-right: var(--s2); color: var(--muted); }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--rail);
  background: var(--surface);
  padding: var(--s7) 0 var(--s8);
  margin-top: var(--s8);
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--s5); }
@media (min-width: 600px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.site-footer h2 { font-size: 15px; color: var(--ink); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--s1); }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; padding: var(--s1) 0; }
.footer-disclaimer { margin-top: var(--s5); border-top: 1px solid var(--rail); padding-top: var(--s4); }

/* ---------- 共用間距（避免頁面 inline style 漂移） ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.mt-s5 { margin-top: var(--s5); }
.mt-s6 { margin-top: var(--s6); }
.mt-s7 { margin-top: var(--s7); }
.mb-s4 { margin-bottom: var(--s4); }
.mb-s5 { margin-bottom: var(--s5); }
.mb-s6 { margin-bottom: var(--s6); }
.list-reset { list-style: none; padding: 0; }
.privacy-note h3 { margin-bottom: var(--s2); }
.privacy-note ul { margin-bottom: 0; }