/* ============================================================================
   伊月手記 —— 版面层
   只写「长什么样」，颜色/字号/圆角一律从 tokens.css 取，这里不出现裸颜色值。
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--canvas);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: var(--t-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* 页面本体永不横向滚动。宽内容（表格、代码）各自包一层 overflow-x
     自己滚，不许把整个 body 撑宽 —— 手机上整页能左右晃是最败好感的一种 bug。 */
  overflow-x: hidden;
}

::selection { background: var(--accent-weak); color: var(--ink-1); }

/* 键盘走到哪儿要看得见。只在键盘操作时显示，鼠标点击不显示（:focus-visible 的作用）。 */
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: var(--r-xs); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--sp-6); }

/* ── 顶栏 ────────────────────────────────────────────────────────
   原来那版是一颗浮在页面上的半透明胶囊 + 毛玻璃。
   换成贴顶的一条，底下一根发丝线。理由：这是工具不是落地页，
   顶栏的职责是「随时能跳走」，不是被人欣赏。 */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--canvas);
  border-bottom: 1px solid var(--rule);
}
.topbar-in {
  max-width: 1080px; margin: 0 auto; padding: 0 var(--sp-6);
  height: 56px; display: flex; align-items: center; gap: var(--sp-6);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  text-decoration: none; color: var(--ink-1); flex: none;
}
.brand-mark {
  width: 24px; height: 24px; border-radius: var(--r-sm);
  background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 500; line-height: 1;
}
.brand-name { font-size: var(--t-sm); font-weight: 500; letter-spacing: var(--tracking-tight); }

.nav { display: flex; align-items: center; gap: var(--sp-4); margin-left: auto; }
.nav a {
  font-size: var(--t-sm); color: var(--ink-3); text-decoration: none;
  white-space: nowrap; transition: color var(--dur) var(--ease);
}
.nav a:hover { color: var(--ink-1); }
.nav a[aria-current="page"] { color: var(--ink-1); }

/* 语言切换：中文页上写「日本語」，日语页上写「中文」，点了跳到同一页的另一版。
   做成带框的方块而不是一条普通链接 —— 它跟旁边四条导航不是一回事，
   长得一样的话会被当成第五个栏目。窄屏也不收起来：日语版的入口就这一个。 */
.langbtn {
  flex: none; height: 28px; padding: 0 var(--sp-3);
  display: inline-flex; align-items: center;
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: transparent; color: var(--ink-3); text-decoration: none;
  font-size: var(--t-caption); white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.langbtn:hover { background: var(--surface); color: var(--ink-1); }

/* 主题切换：一个 24px 的方块，不带文字标签。
   里面的图标用 CSS 画（两个半圆），不引图标字体。 */
.theme-btn {
  flex: none; width: 28px; height: 28px; border-radius: var(--r-sm);
  border: 1px solid var(--rule); background: transparent; cursor: pointer;
  display: grid; place-items: center; padding: 0;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.theme-btn:hover { background: var(--surface); border-color: var(--ink-4); }
.theme-btn i {
  display: block; width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid var(--ink-3);
  /* 右半边填实 = 一个「半明半暗」的圆，比太阳/月亮图标省事且不歧义 */
  background: linear-gradient(90deg, transparent 50%, var(--ink-3) 50%);
}

/* ── 通用小件 ───────────────────────────────────────────────── */

/* 小标签：全大写 + 拉开字距。用来标一段是什么，不参与内容。 */
.eyebrow {
  font-size: var(--t-caption); font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--ink-3);
}

/* 章节头：标签在左，一根发丝线一直拉到右边。 */
.sec-head {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.sec-head::after { content: ''; flex: 1; height: 1px; background: var(--rule); }

section { margin-top: var(--sp-24); }
/* 首屏底下本来就有一条分隔线收口，再空 96px 会空出一个洞 */
.hero + section { margin-top: var(--sp-12); }

h1, h2, h3 {
  color: var(--ink-1); font-weight: 500;
  letter-spacing: var(--tracking-tight); text-wrap: balance;
}
h1 { font-size: var(--t-d-lg); line-height: 1; }
h2 { font-size: var(--t-d-sm); line-height: 1.33; }
h3 { font-size: var(--t-md); line-height: 1.4; }

a { color: var(--accent-text); }

/* 数字一律等宽 + tabular-nums：这样上下两行的数字会严格对齐成一列。
   比例字体里「1」比「8」窄，一列数字会歪歪扭扭。 */
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* 压低一档的附注文字，跟在正文后面（时刻、括号说明这种） */
.dim { color: var(--ink-3); }

/* 图下面那行说明。图表必须自带一句「这张图的横轴是什么」，
   否则读者得自己猜刻度的含义。 */
.cap { font-size: var(--t-caption); color: var(--ink-3); margin-top: var(--sp-3); }

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
}

/* ── 首屏 ────────────────────────────────────────────────────── */
.hero { padding: var(--sp-12) 0 0; }
.hero-lead {
  color: var(--ink-3); font-size: var(--t-md);
  margin-top: var(--sp-4); max-width: 46ch;
}

/* 最近一个截止：整页最大的一个数。
   这是首页唯一该被一眼看见的东西 —— 别的都可以往下翻。 */
.nextup {
  margin-top: var(--sp-8);
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-6) var(--sp-8);
  align-items: end;
  padding-bottom: var(--sp-6); border-bottom: 1px solid var(--rule);
}
.nextup-days {
  font-size: var(--t-d-xl); line-height: .9; color: var(--ink-1);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}
.nextup-days .u { font-size: var(--t-d-sm); color: var(--ink-3); margin-left: var(--sp-2); }
.nextup-what { padding-bottom: var(--sp-1); }
.nextup-what .t { color: var(--ink-1); font-size: var(--t-lg); display: block; }
.nextup-what .d { color: var(--ink-3); font-size: var(--t-sm); margin-top: var(--sp-1); display: block; }

/* ── 出願航路 ────────────────────────────────────────────────────
   一条横轴：左端是今天，右端是最后一个节点（2026-11-02 最終合格発表）。
   两条泳道分别是两所学校，每个节点按真实日期落位。

   为什么值得画这一条：光看下面那张日期表，只知道「有十三件事」；
   看这条才知道它们几乎全挤在 9 月初和 10 月那两段里，中间是空的。
   这个「疏密」是表格给不了的信息。

   轴不画到 2027-04 入学：那之后五个月一个节点都没有，
   画进来只会把前面这段真正要紧的挤成一条缝。 */
.runway { margin-top: var(--sp-8); }
.runway-plot {
  /* 左边这条 6.5rem 的槽专门放泳道名，轨道从槽的右边才开始。
     原来的写法是把名字浮在轨道左端上方 —— 随着日子一天天过去，
     最左边那个点会一路挪到名字底下被盖住。留槽就不会有这个问题。 */
  position: relative;
  padding-left: 6.5rem;
}
.runway-lane { position: relative; height: 36px; }
.runway-lane::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: var(--rule);
}
.runway-name {
  position: absolute; left: -6.5rem; top: 50%; transform: translateY(-50%);
  width: 6rem; font-size: var(--t-caption); color: var(--ink-3);
}
.runway-dot {
  /* top 和 transform 缺一不可：左右靠 left% 定位再回拉半个身位，
     上下靠 top:50% 落到轨道线上再回拉半个身位。
     少写 top 的话点会掉到泳道顶上，浮在线的上方。 */
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  top: 50%; transform: translate(-50%, -50%);
  /* 2px 的底色环：两个点靠得近时不会糊成一坨 */
  box-shadow: 0 0 0 2px var(--canvas);
  cursor: default; z-index: 1;
}
.runway-dot.s-tsukuba { background: var(--s1); }
.runway-dot.s-keio    { background: var(--s3); }
/* 最近的那一个：加一圈，让「下一个就是它」不用靠颜色也看得出 */
.runway-dot.is-next {
  width: 11px; height: 11px;
  box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--accent-weak);
}
/* 系统维护期：慶應的出願网站 08-07〜08-18 关掉，这 12 天想交也交不了。
   用斜线纹表示「不可用」，不是用颜色 —— 颜色已经被「哪所学校」占掉了，
   再加一种颜色就要读者同时记两套色义。纹理跟颜色互不干扰，可以叠着看。 */
.runway-band {
  position: absolute; top: 50%; height: 4px; transform: translateY(-50%);
  background: repeating-linear-gradient(45deg,
              var(--ink-4) 0 1.5px, transparent 1.5px 4.5px);
  z-index: 0;
}
.runway-axis {
  position: relative; height: 20px; margin-top: var(--sp-1);
}
.runway-tick {
  position: absolute; transform: translateX(-50%);
  font-size: 11px; color: var(--ink-3);
  font-family: var(--font-mono);
  white-space: nowrap;
}
/* 轴两端的月份标签会伸出画布被裁掉，靠边时改成贴着刻度往里写 */
.runway-tick.at-start { transform: none; }
.runway-tick.at-end   { transform: translateX(-100%); }

/* 图例：≥2 个系列必须有图例，不能只靠颜色区分 */
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-4); }
.legend span { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--t-caption); color: var(--ink-3); }
.legend i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
/* 图例的图形必须跟图上真画的那个东西长得一样，否则读者对不上号 */
.legend i.hatch {
  width: 16px; height: 5px; border-radius: 0;
  background: repeating-linear-gradient(45deg,
              var(--ink-3) 0 1.5px, transparent 1.5px 4.5px);
}

/* ── 表格 ────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; }
table.t th {
  text-align: left; padding: 0 var(--sp-4) var(--sp-2) 0;
  font-size: var(--t-caption); font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
  border-bottom: 1px solid var(--rule);
}
table.t td {
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 0;
  border-bottom: 1px solid var(--rule-faint);
  color: var(--ink-2); font-size: var(--t-sm); vertical-align: baseline;
}
table.t tr:last-child td { border-bottom: none; }
table.t td.n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.t td.k { color: var(--ink-1); }
/* 已过的日程要退到后面，但仍得读得出来 —— 用 ink-4 是 1.78:1，读不了。
   ink-3 跟正常行的 ink-2 已经差出一档，退让效果够了。 */
table.t tr.is-past td { color: var(--ink-3); }
table.t tr.is-next td { background: var(--accent-weak); }
table.t tr.is-next td.k { color: var(--ink-1); }

/* 学校标记：一个色点 + 文字。文字穿文字色，不穿系列色 ——
   系列色只归那个点所有，文字一旦染上系列色就会跟正文打架、对比度也压不住。 */
.tag-school { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
.tag-school i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.tag-school.s-tsukuba i { background: var(--s1); }
.tag-school.s-keio i    { background: var(--s3); }
.tag-school.s-both i    { background: var(--ink-3); }

/* ── 项目卡 ───────────────────────────────────────────────────── */
.projects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.proj { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.proj > * { min-width: 0; overflow-wrap: break-word; }
.proj-top { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.proj-name { font-size: var(--t-lg); color: var(--ink-1); letter-spacing: var(--tracking-tight); }
.proj-ver {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--t-caption); color: var(--ink-3); margin-left: auto;
}
.proj-sub { font-size: var(--t-sm); color: var(--ink-3); }
.proj-focus { font-size: var(--t-sm); color: var(--ink-2); }
.proj-meta {
  margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--rule-faint);
  display: flex; gap: var(--sp-4); flex-wrap: wrap;
  font-size: var(--t-caption); color: var(--ink-3);
}

/* 状态药丸：颜色 + 文字一起给。
   只靠颜色区分状态，红绿分不清的人就完全读不到这一层。 */
.pill {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: 11px; padding: 2px var(--sp-2); border-radius: var(--r-pill);
  border: 1px solid var(--rule); color: var(--ink-3); white-space: nowrap;
}
.pill[data-shape="pill"] { }
.pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill.is-live   { color: var(--st-good); border-color: color-mix(in srgb, var(--st-good) 32%, transparent); }
.pill.is-build  { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent-text) 32%, transparent); }
.pill.is-hold   { color: var(--ink-3); }
.pill.is-urgent { color: var(--st-crit); border-color: color-mix(in srgb, var(--st-crit) 32%, transparent); }

/* ── 链接行（笔记 / 工具 / 私密区三页的主体）────────────────────
   没有序号列。序号只有在「内容真是一条有先后的序列」时才该出现 ——
   这三页是几份互不依赖的文档，编号 01/02/03 只会假装它们有顺序。
   右边那个标签放真信息（属于哪个项目 / 能不能装到手机 / 有没有上线）。 */
.rows { border-top: 1px solid var(--rule); }
.row {
  display: grid; grid-template-columns: 1fr auto 1.25rem;
  gap: var(--sp-4); align-items: center;
  padding: var(--sp-4) var(--sp-2);
  border-bottom: 1px solid var(--rule-faint);
  text-decoration: none; color: inherit;
  transition: background var(--dur) var(--ease);
}
.row:hover { background: var(--surface); }
.row-t { color: var(--ink-1); font-size: var(--t-md); letter-spacing: var(--tracking-tight); }
.row > div, .row-t, .row-d { min-width: 0; overflow-wrap: break-word; }
/* 说明文字掐宽。单位用 em 不用 ch：一个汉字正好是 1em，
   所以 42em 读作「一行最多 42 个汉字」，心里有数。
   （ch 是数字「0」的宽度，对汉字来说约等于半个字，用它算会掐得过窄。）
   一行太长时眼睛从行尾荡回行首容易串行，中文舒服的区间在 35〜45 字。 */
.row-d { color: var(--ink-3); font-size: var(--t-sm); margin-top: 2px; max-width: 42em; }
.row-tag { font-size: var(--t-caption); color: var(--ink-3); white-space: nowrap; }
.row-go { color: var(--ink-3); text-align: right; transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.row:hover .row-go { color: var(--accent-text); transform: translateX(2px); }
/* 还没上线的条目：整行不可点，右边那个箭头换成一句说明 */
.row.is-off { cursor: default; }
.row.is-off:hover { background: none; }
.row.is-off .row-t { color: var(--ink-3); }
.row.is-off .row-go { color: var(--ink-4); }

/* ── 历程 ─────────────────────────────────────────────────────── */
.tl { display: grid; gap: 0; }
.tl-item {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--sp-6);
  padding: var(--sp-6) 0; border-bottom: 1px solid var(--rule-faint);
}
.tl-item:last-child { border-bottom: none; }
.tl-when { font-family: var(--font-mono); font-size: var(--t-caption); color: var(--ink-3); padding-top: 3px; }
.tl-item > * { min-width: 0; }
.tl-t { color: var(--ink-1); font-size: var(--t-md); letter-spacing: var(--tracking-tight); overflow-wrap: break-word; }
.tl-d { color: var(--ink-2); font-size: var(--t-sm); margin-top: var(--sp-2); max-width: 68ch; }

/* ── 版本史 ───────────────────────────────────────────────────── */
.vlog { border-top: 1px solid var(--rule); }
.vrow {
  display: grid; grid-template-columns: 7.5rem 5rem 1fr 4rem;
  gap: var(--sp-4); align-items: baseline;
  padding: var(--sp-3) var(--sp-2);
  border-bottom: 1px solid var(--rule-faint);
}
.vv { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-caption); color: var(--ink-2); white-space: nowrap; }
.vd { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--t-caption); color: var(--ink-3); white-space: nowrap; }
/* min-width:0 这一条不能省：网格里的格子默认「不肯缩到比自己内容还窄」，
   一段长文字会把格子撑出容器、右边被裁掉。写了它才允许格子变窄让文字换行。
   同理 break-word 管的是「一长串不带空格的东西」（比如 v0.24.9~v0.27.0），
   中文本来到哪都能断，但这种串不行。 */
.vt {
  font-size: var(--t-sm); color: var(--ink-2);
  min-width: 0; overflow-wrap: break-word;
}
/* 「+3 ▾」：数字说明点开能看到几条补丁，比一个光秃秃的三角有用 */
.vc {
  color: var(--ink-3); font-size: var(--t-caption); text-align: right;
  font-family: var(--font-mono); white-space: nowrap;
}
.vc b { font-weight: 400; display: inline-block; margin-left: 3px;
        transition: transform var(--dur) var(--ease); }
details.vgroup > summary:hover .vc { color: var(--ink-1); }
.vrow.is-minor .vv { color: var(--ink-1); }
.vrow.is-now { background: var(--accent-weak); }
.vrow.is-now .vt, .vrow.is-now .vv { color: var(--ink-1); }
.vrow.is-goal .vv { color: var(--st-warn); }

details.vgroup { border-bottom: 1px solid var(--rule-faint); }
details.vgroup > summary { list-style: none; cursor: pointer; }
details.vgroup > summary::-webkit-details-marker { display: none; }
details.vgroup > summary.vrow { border-bottom: none; }
details.vgroup > summary:hover { background: var(--surface); }
details.vgroup[open] > summary .vc b { transform: rotate(180deg); }
.vsub { padding: 0 0 var(--sp-3) var(--sp-6); }
.vsub .vrow { border-bottom: none; grid-template-columns: 7rem 1fr; padding: var(--sp-2); }
.vsub .vd, .vsub .vc { display: none; }

/* ── 页脚 ─────────────────────────────────────────────────────── */
.foot {
  margin-top: var(--sp-24); padding: var(--sp-6) 0 var(--sp-12);
  border-top: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-3);
  font-size: var(--t-caption); color: var(--ink-3);
}
.foot a { color: var(--ink-3); text-decoration: none; }
.foot a:hover { color: var(--ink-1); }

/* ── 提示条 ───────────────────────────────────────────────────── */
.note {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4); border-radius: var(--r-lg);
  border: 1px solid var(--rule); background: var(--surface);
  font-size: var(--t-sm); color: var(--ink-2); max-width: 72ch;
}
.note.is-warn { border-color: color-mix(in srgb, var(--st-warn) 34%, transparent); }
.note b { color: var(--ink-1); font-weight: 500; }
/* 那个圆点默认是灰的。只有挂了 is-warn 才变琥珀色 ——
   不然一条普通说明也顶着一个警告色圆点，看久了警告色就不再是警告了。 */
.note .ico { color: var(--ink-4); flex: none; font-size: var(--t-sm); line-height: 1.5; }
.note.is-warn .ico { color: var(--st-warn); }
/* 提示条里偶尔要写个用户名、文件名。等宽字 + 一块浅底，跟正文分开。 */
.note code {
  font-family: var(--font-mono); font-size: 0.92em;
  padding: 0.1em 0.35em; border-radius: var(--r-sm);
  background: var(--canvas); color: var(--ink-1);
}

/* ── 窄屏 ─────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  section { margin-top: var(--sp-12); }
  h1 { font-size: var(--t-d-md); }
  .projects { grid-template-columns: minmax(0, 1fr); }
  .nextup { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
  .nextup-days { font-size: var(--t-d-lg); }
  .brand-name { display: none; }
  .nav { gap: var(--sp-3); }
  .nav a { font-size: var(--t-caption); }
  .vrow { grid-template-columns: 6rem 1fr 3.25rem; }
  .vd { display: none; }
  .tl-item { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
}
@media (max-width: 560px) {
  .wrap, .topbar-in { padding: 0 var(--sp-4); }

  /* 手机上四列表格会被压到「事项」那栏只剩 85px，一句话断成五行。
     所以窄屏改成一行一张小卡：
         日期    学校          还有
         事项（占满一整行）
     让表格横着滚也行，但那意味着每读一行都要左右拖，更烦。 */
  table.t thead {  /* 眼睛看不见，读屏软件仍然读得到列名 */
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%);
  }
  table.t, table.t tbody, table.t td { display: block; }
  table.t tr {
    display: grid;
    grid-template-columns: 4.5rem 1fr auto;
    gap: var(--sp-1) var(--sp-3);
    /* 左右也留 8px：这样「当前那一行」的紫底看着像一张卡，
       而不是一条贴着边缘的色带。所有行都留，高亮行才不会比别人偏右。 */
    padding: var(--sp-3) var(--sp-2);
    border-bottom: 1px solid var(--rule-faint);
  }
  table.t tr:last-child { border-bottom: none; }
  table.t td { border: none; padding: 0; }
  table.t td:nth-child(3) { grid-column: 1 / -1; }   /* 事项独占第二行 */
  table.t td:nth-child(4) { grid-column: 3; grid-row: 1; text-align: right; }
  /* 块状布局下每个格子各占各的方块，底色得挂在整行上，否则会露出缝 */
  table.t tr.is-next { background: var(--accent-weak); border-radius: var(--r-md); }
  table.t tr.is-next td { background: none; }
  .row { grid-template-columns: 1fr 1rem; }
  .row-tag { display: none; }
  .runway-name { font-size: 11px; }
}