/* Weekspan — 人生周格 styles */

/* 主题：JS 按设置/系统偏好切换 .theme-dark（index.html 引导脚本先行落位，避免闪白） */
:root {
  color-scheme: light;

  /* 图表 token */
  --cell: 12px;
  --gap: 2px;
  --label-w: 8.4em;

  /* 颜色 token（spec §5.2 建议，可调；状态绝不只靠颜色表达） */
  --past: #365f79;
  --future: #dce6e5;
  --slow: #edc17c;
  --nogo: #b6a6d8;
  --cur: #1e8ca8;
  --ring: #1c2833;
  --sel: #d81e5b;
  --ms-care: #b3543c;
  --ms-life: #5c7aa5;
  --mark: #e63946;
  --pat: rgba(0, 0, 0, 0.14);

  --bg: #f6f4f1;
  --card: #ffffff;
  --fg: #1c2833;
  --muted: #5d6b77;
  --border: #e2ddd6;
  --focus: #2f6fb2;
  --err: #c0392b;
}

:root.theme-dark {
  color-scheme: dark;
  --past: #5d94b1;
  --future: #38434c;
  --slow: #a9873f;
  --nogo: #7a6ba3;
  --cur: #35b5d4;
  --ring: #dfe6ec;
  --sel: #ff5c8a;
  --ms-care: #d07a5f;
  --ms-life: #8aa6cf;
  --pat: rgba(255, 255, 255, 0.18);
  --bg: #14181c;
  --card: #1d232a;
  --fg: #e8e6e3;
  --muted: #9aa7b1;
  --border: #2c353f;
  --focus: #7ab3ff;
  --err: #ff8f8f;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
    'Noto Sans', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.55;
}

.wrap {
  max-width: 1080px; margin: 0 auto;
  /* 刘海屏横屏安全区 */
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

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

.noscript { padding: 16px; text-align: center; }

/* ————— Header ————— */
.site-header { padding: 22px 0 6px; }
.header-inner { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
h1 { margin: 0; font-size: 1.7rem; letter-spacing: 0.4px; }
.tagline { margin: 2px 0 0; color: var(--muted); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* 图标按钮（语言/主题）：不常用功能，图标化省空间；aria-label 提供可读名称 */
.icon-btn {
  width: 42px; min-width: 42px; height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn svg { width: 18px; height: 18px; }
/* 基础规则不用 ID 选择器，避免特异性压过下面的模式规则（曾致图标不显示） */
.ti { display: none; }
:root[data-theme-mode='auto'] .ti-auto,
:root[data-theme-mode='light'] .ti-sun,
:root[data-theme-mode='dark'] .ti-moon { display: block; }

/* 语言弹出菜单 */
.menu { position: relative; }
.menu-list {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 80;
  min-width: 170px; margin: 0; padding: 6px; list-style: none;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
}
.menu-list li { margin: 0; }
.menu-list button {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; padding: 9px 10px;
  border: none; border-radius: 7px; background: none;
  color: var(--fg); font: inherit; cursor: pointer; text-align: left;
}
.menu-list button:hover { background: var(--bg); }
.menu-list button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.menu-list .check { visibility: hidden; color: var(--focus); font-weight: 700; }
.menu-list button[aria-checked='true'] .check { visibility: visible; }

/* ————— 控件 ————— */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin: 14px 0;
}
.controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 18px; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
label { font-weight: 600; font-size: 0.92rem; }

input[type='date'], input[type='number'], select {
  font: inherit;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--fg);
  min-width: 0;
}
input[type='number'] { max-width: 160px; }
input[aria-invalid='true'] { border-color: var(--err); }

.hint { margin: 0; color: var(--muted); font-size: 0.78rem; }
.err { margin: 0; color: var(--err); font-size: 0.85rem; }

.btn {
  font: inherit; font-weight: 600;
  background: var(--fg); color: var(--bg);
  border: none; border-radius: 8px;
  padding: 8px 14px; cursor: pointer;
}
.btn.ghost { background: transparent; color: var(--fg); border: 1px solid var(--border); }
.btn.ghost.copied { border-color: var(--focus); color: var(--focus); }
.btn.tiny { padding: 4px 10px; font-size: 0.8rem; border-radius: 7px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

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

/* ————— 空状态 ————— */
.empty { text-align: center; padding: 34px 18px; }
.empty h2 { margin: 0 0 8px; }
.empty p { margin: 0 auto 16px; max-width: 46ch; color: var(--muted); }

/* ————— 汇总 ————— */
.summary { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.sum-item {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

/* ————— 图例 ————— */
.legend h2, .detail h2 { margin: 0 0 8px; font-size: 1rem; }
.legend-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.legend-head h2 { margin: 0; }
.legend-list { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; margin: 0; padding: 0; font-size: 0.9rem; }
.legend-list li { display: flex; align-items: center; gap: 7px; }

/* 色块与格子共用状态样式（颜色 + 纹理双重编码） */
.sw {
  width: 15px; height: 15px; border-radius: 3px;
  display: inline-flex; background: var(--future);
  border: 1px solid rgba(0, 0, 0, 0.18);
  flex: none;
}
.sw.st-past, .cell.st-past { background: var(--past); }
.sw.st-current, .cell.st-current { background: var(--cur); box-shadow: inset 0 0 0 1.5px var(--ring); }
.sw.st-future, .cell.st-future { background: var(--future); }
.cell.ph-slow, .sw.ph-slow {
  background-color: var(--slow);
  background-image: repeating-linear-gradient(45deg, var(--pat) 0 2px, transparent 2px 5px);
}
.cell.ph-nogo, .sw.ph-nogo {
  background-color: var(--nogo);
  background-image: radial-gradient(var(--pat) 1px, transparent 1.2px);
  background-size: 4px 4px;
}

/* ————— 详情面板 ————— */
.detail-body { min-height: 118px; }
.det-week { margin: 0 0 2px; font-weight: 700; }
.today-mark { color: var(--focus); font-weight: 600; }
.det-year { margin: 0 0 10px; color: var(--muted); font-size: 0.92rem; }
.det-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 24px; margin: 0; }
.det-kv > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dashed var(--border); }
.det-kv dt { color: var(--muted); }
.det-kv dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }

/* ————— 图表 ————— */
.slide-hint { display: none; color: var(--muted); font-size: 0.8rem; margin: 10px 0 6px; }
@media (max-width: 900px) { .slide-hint { display: block; } }

/* 图表高度自适应视口（见 render.js applyChartScale）：
   整幅人生一屏可见，容器不做纵向滚动；仅保留必要的横向滚动 */
.chart-scroll {
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.row {
  display: grid;
  grid-template-columns: var(--label-w) repeat(52, var(--cell));
  gap: var(--gap);
  align-items: center;
  padding: 1px 10px 1px 6px;
}

/* 行标签：水平滚动时固定在左侧；translateZ 提升为独立图层，
   规避 iOS Safari 横向滚动时 sticky 元素重绘不及/透底的老毛病 */
.row-label {
  position: sticky; left: 0; z-index: 2;
  transform: translateZ(0);
  background: var(--card);
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding-right: 8px;
  font-size: var(--row-font, 0.72rem); color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.row-label .n { color: var(--fg); font-weight: 600; }

/* 列号参考行：垂直滚动时固定在顶部 */
.col-header {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding-top: 7px; padding-bottom: 3px;
}
.col-header .row-label { z-index: 4; }
.wk { font-size: calc(var(--row-font, 0.72rem) * 0.85); color: var(--muted); text-align: center; line-height: 1; }

.cell {
  width: var(--cell); height: var(--cell);
  border-radius: 2.5px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  touch-action: manipulation; /* 去除移动端点击延迟与双击缩放 */
}

/* 当前周：轮廓 + 中心白点（非颜色标记，尺寸随格子缩放） */
.cell.st-current::after {
  content: '';
  width: max(3px, calc(var(--cell) * 0.3));
  height: max(3px, calc(var(--cell) * 0.3));
  border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.cell.selected, .cell:focus-visible {
  position: relative; z-index: 1;
}
.cell.selected { box-shadow: 0 0 0 max(2px, calc(var(--cell) * 0.25)) var(--sel); }
.cell:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* 重要节点标记：鲜艳红 + 白色内描边（非颜色信号），优先于状态色 */
.cell.marked, .sw.mark { background: var(--mark) !important; }
.cell.marked { box-shadow: inset 0 0 0 1.5px #fff; }
.cell.selected.marked { box-shadow: inset 0 0 0 1.5px #fff, 0 0 0 max(2px, calc(var(--cell) * 0.25)) var(--sel); }
.sw.mark { box-shadow: inset 0 0 0 1.5px #fff; }

.det-hint { margin: 10px 0 0; color: var(--muted); font-size: 0.78rem; }
.mark-chip { color: var(--mark); font-weight: 700; }
.mark-toggle { margin-top: 12px; min-height: 40px; }

/* 每 10 年一条轻分隔 */
.row.dec-end { margin-bottom: 7px; }

/* 里程碑线：位于该行上方，不覆盖格子 */
.milestone {
  position: relative;
  border-top: 2px dashed var(--ms-care);
  margin: 4px 0 2px;
  padding: 2px 0 4px;
  min-height: 1.3em;
  white-space: nowrap;
}
.milestone.ms-life { border-color: var(--ms-life); }
.milestone.ms-both { border-top-style: solid; border-image: linear-gradient(90deg, var(--ms-care), var(--ms-life)) 1; }
.ms-label {
  position: sticky; left: 8px; z-index: 2;
  transform: translateZ(0);
  display: inline-block;
  background: var(--card);
  font-size: 0.74rem; color: var(--muted);
  padding: 0 6px; margin-right: 10px;
}

.notes { margin: 10px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 0.88rem; }
.notes li { margin: 3px 0; }
.notes li::before { content: '· '; }

/* ————— Footer ————— */
.site-footer {
  margin: 28px 0 42px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.84rem;
}

/* 大屏稍微放大格子 */
@media (min-width: 1500px) { :root { --cell: 13px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}