/* @layer ui — 日历工作面的外壳：内容区上沿的视图切换条，以及五个视图共用的字阶。
 *
 * 五个决定值得写下来：
 *
 *   1. 这是**第二级**导航，不能长得像顶栏那个工作面切换器。
 *      第一级（Chat / 日历 / 待办）是嵌在凹槽里的胶囊，代表"换个地方"；
 *      这一级是贴着内容上沿的标签，代表"同一块内容换个看法"。
 *      层级差别靠**形状**说清楚——胶囊 vs 标签——而不是靠把颜色调深调浅。
 *
 *   2. 选中只用一条 1.5px 直尺压在分隔线上，不铺色块、不加投影。
 *      直尺正落在标签与内容的交界处，"这个标签管着下面这块"就不必再解释。
 *
 *   3. 切换不做位移动画。让一条指示条在标签间滑过去是 Material 的语汇；
 *      何况日历本身要整块重画，指示条再滑一次只会显得慢。只做颜色过渡。
 *
 *   4. 这条只占 40px，并且不放日期导航。日历本来就该把高度全给格子，
 *      多一行工具栏就少一行事件；今天/翻页/时间范围标题在顶栏已经有位置了。
 *
 *   5. 五个视图的**字阶**也放在这里（文件后半段），不放回各自的样式表。
 *      月/周/日/日程/年画的是同一批东西的五种切法，"谁先被读到"必须五处一致；
 *      分散写就会漂成五份字号表。本文件在 index.html 里最后加载，
 *      同特异度下这里说了算——所以它也是唯一能一处收口的地方。
 */

.calshell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* ---------------- 切换条 ---------------- */

.calbar {
  position: relative;
  flex: none;
  display: flex;
  align-items: stretch;
  min-height: 40px;
  padding: 0 12px;
}
/* 分区靠发丝线，与顶栏、侧栏同一种做法。 */
.calbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--hairline);
}

/* 标签装不下时横向滚动，绝不换行、也绝不压缩单个标签
   （中文标签一被压到 min-content 就会竖排成「日 / 程」）。 */
.calbar__tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.calbar__tabs::-webkit-scrollbar { display: none; }

.calbar__tab {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-weight: 520;
  letter-spacing: var(--tracking-body);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.calbar__tab:hover { color: var(--text); background: var(--surface-hover); }
.calbar__tab.is-active { color: var(--text); font-weight: 650; }

/* 标签是通栏高的，全局那条 outline-offset: 2px 的焦点环会溢出到日历格子上。
   这里把环收进来贴着标签自身画。 */
.calbar__tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius-xs);
}

/* 压在分隔线上的直尺。左右各收进 10px，让它对着字而不是对着整个热区。
   1.5px 而不是 2px：这条尺正压在 .calbar::after 那道 1px 发丝线上。
   2px 时它比发丝线粗一倍还多，是整套界面里最粗的一根线——
   线宽体系（hairline/border/border-strong 三级 alpha、1px 的分隔线、
   格子上 1px 的内描边）通篇是发丝，只有它是一根马克笔，
   于是它读起来像"一个色块的边"，而不是"一支笔画的下划线"。
   降到 1.5px 后它仍是这条线上唯一带强调色的一段，指向照旧清楚——
   "这个标签管着下面这块" 本来就是靠位置说的，不必再靠粗细喊；
   何况和顶栏那个胶囊的形状差已经足够，不需要重量再帮一次忙。 */
.calbar__tab.is-active::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 1.5px;
  background: var(--accent);
}

/* ---------------- 内容 ---------------- */

/* 五个视图都写着 height: 100%，所以这里必须是一个有确定高度的 flex 项。 */
.calshell__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overscroll-behavior: contain;
}
.calshell__body > * { flex: 1 1 auto; min-height: 0; }

/* ================================================================
   五个视图共用的字阶
   ================================================================
   为什么落在这个文件里：五个日历视图共用同一层外壳（.calshell），
   "一个格子/一行里谁先被读到"是外壳级的决定，不是某一个视图自己的事。
   写回各视图的样式表，就会变成五份各自漂移的字号表——月视图的日程 13、
   跨天条 12、周视图的块 13、日程视图的标题 13.5，正是这么来的。

   一条规则统一它们：**一条日程在全应用只有一个字号角色 —— --fs-tiny(12)**。
   月视图的 chip、跨天的 bar、周/日视图的时间块，是同一个东西的三种形态；
   字号一旦不同，同一条日程在三个视图里就像三条重要程度不同的日程。
   剩下两个角色照令牌注释分工：
     --fs-body(13.5) 给"锚"（月格的日期数字、日程视图的事件标题）
     --fs-micro(11)  给注解（刻度、农历、地点、标签、"还有 N 项"）
   ================================================================ */

/* ---------------- 月视图：一个格子里的四级 ----------------

   一个格子里同时住着四类东西，原来它们是四行等重的小字：
     日期 13/550/muted、日程 13/400/text、待办 12/400/muted、农历 11/400/faint
   日期比农历只大 2px，还比日程更浅——格子的锚反倒是最弱的一行。
   重排成四级，每一级同时动字号、字重、色阶三样，外加原有的形状差：

     1 日期  13.5 / 560 / --text        实心药丸（今天）
     2 日程  12   / 500 / --text        实心圆点 chip、实心色块 bar
     3 待办  12   / 400 / --text-muted  空心方框；回访是带缺口的环 + --warning
     4 农历  11   / 400 / --text-faint  居中、无形状

   比差 13.5 : 11 ≈ 1.23×。单靠字号做不出四级（小号端只有 11/12/13.5 三个位置），
   所以第 2 与第 3 级同字号，靠字重 + 色阶 + 标记形状分开——
   这正是原则 4 说的"白底上线和字重才是排版工具"。

   几何不动：cell padding-top 4 + .month__num 20 + .month__badge 13 − 1 = 36，
   .month__bars 压在 35px。下面只改字号/字重/颜色，
   .month__num(20) / .month__num-text(21px 高、21px 最小宽) / .month__badge(13)
   三个盒子的高度一个都没碰，chip 与待办的高度仍是 var(--chip-h)，
   所以这串咬合数原样成立。浏览器里量过（相对格子上沿的偏移）：
   .month__num +4 / .month__badge +23 / .month__lane-space +36 / .month__bars +35，
   舒适与紧凑两档密度、浅深两套主题下都是这四个数。 */

.calshell .month__num-text {
  font-size: var(--fs-body);
  font-weight: 560;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
/* "今天"的实心药丸在 views.css 里用 .month__cell.is-today .month__num-text 定义，
   特异度比这里高，颜色与 650 的字重照旧归它管——这里只把字号垫上去。 */

/* 日程：降到 12，与 bar、与周/日视图的时间块同级；标题加半档字重，
   把它和同字号的待办分开。只动字号与字重，不碰颜色——全天 chip 的前景是
   components.css 里按色块亮度算出来的 --on-fill，在这里覆盖会把它压掉。 */
.calshell .month__chips .chip { font-size: var(--fs-tiny); gap: 5px; }
.calshell .month__chips .chip__title { font-weight: 500; }
/* 待办/回访保持 12 / --text-muted（linkage.css 已经是），
   只显式钉住 400 字重，免得日后 chip 的字重改动被顺手抄过来抹平第 2 与第 3 级。 */
.calshell .month__task-title { font-weight: 400; }

/* ---------------- 周/日视图：时间块 ----------------

   时间块原来是 13（--fs-small），在 50px/小时 的网格里根本放不下：
   实测一周 18 个块有 5 个被纵向切掉，其中每一个 15 分钟的短会
   （块高 17px，内容高 27px）都在裁字——短会恰恰是最需要看清标题的那种。
   降到 12 并收紧行距，纯粹是让字装得进格子；
   而 12 也正好是 bar 与月视图 chip 的字号，同一条日程在三个视图里一样重。
   块内三级仍在：时间 11/muted → 标题 12/550/text → 地点 11/faint。 */
.calshell .tgev { font-size: var(--fs-tiny); line-height: 1.32; }

/* ≤43 分钟的块（.is-tiny）是单行 flex，行高必须小于块高；
   而且标题得真的只占一行——它是可收缩的 flex 项，列一窄就会把
   "晨会" 竖着拆成两行，把 27px 高的内容塞进 17px 的盒子，字被上下各切一截。
   实测同一周 18 个块，纵向被切的从 5 个降到 1 个（剩下那个是半宽列里
   标题自然换到第三行，属于密集网格的正常裁切，不是字装不下）。

   窄到放不下"时间 + 标题"时，先丢时间：块的上沿就压在刻度线上，
   位置已经把"几点"说完了，再写一遍要花掉这唯一一行的一半宽度，
   代价是标题被省略号吃光——那才是这块唯一不能从别处读到的信息。
   宽度阈值只能由块自己决定（同一个 15 分钟的会，在日视图是整列宽、
   在周视图重叠时只有半列），所以用容器查询；container-type 只加在
   .is-tiny 上，这些块的 left/width 全部来自模板的行内样式，
   不会去动 dnd.js 那个没有显式宽度的 .tgev--ghost。

   **阈值量的是内容盒，不是块本身。** @container 拿的是容器的 content box，
   而 .tgev 是 border-box、带 7px 左右内边距和 2.5px 左边框，
   所以容器查询里的每一个 px 都比"块宽"小 16.5px。
   写成 80px 时它其实在块宽 96.5px 处就触发了——那不是"重叠成半列"，
   而是**整列**：窗口 910–1010px（侧栏 248px 在场）时周视图一列只有 83–96px，
   于是同一列里 60 分钟的块显示"08:00 体检"、紧挨着的 15 分钟块只显示"牙医"，
   用户看不出这两者凭什么不一样。实测窗口 950px：整列 90.7px，三个整列宽的
   短会全部丢掉了时间。
   收到 62px（= 块宽 78.5px）：重叠出来的半列（1280px 下 68.4px、
   1024px 下 50.1px）照旧丢时间，而整列在窗口窄到 ~610px 之前都保得住。 */
.calshell .tgev.is-tiny {
  line-height: 1.2;
  container-type: inline-size;
}
.calshell .tgev.is-tiny .tgev__time { flex: none; }
.calshell .tgev.is-tiny .tgev__title {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@container (max-width: 62px) {
  .calshell .tgev.is-tiny .tgev__time { display: none; }
}

/* ---------------- 日程视图：一行里的三级 ----------------

   这一屏的日期已经是 32px 的大字，但一行之内是平的：
   时间 13、标题 13.5、地点/标签 13——三种角色几乎同一个字号，
   等于把"什么时候 / 什么事 / 在哪"排成了一条等重的长句。
   拉成 12 / 13.5 / 11 三级，标题再加半档字重，一行里就有了主语。 */
.calshell .agenda__time { font-size: var(--fs-tiny); }
.calshell .agenda__title { font-weight: 540; }
.calshell .agenda__loc,
.calshell .agenda__tag,
.calshell .agenda__badge { font-size: var(--fs-micro); }

/* ---------------- 年视图：月名要读得像标题 ----------------

   十二个迷你月并排，月名 13.5 而格子里的日期 12 —— 差 1.5px，
   月名不像标题，像"第一格"。抬到 16（--fs-lead）后比差 1.33×，
   十二块的边界一眼可分。这不是加装饰：加的是分组，减的是找月份的时间。
   （--fs-lead 不随 compact 密度缩，所以紧凑模式下比差反而更大，正确。） */
.calshell .year__title { font-size: var(--fs-lead); }

/* ---------------- 密度与窄屏 ---------------- */

:root[data-density='compact'] .calbar { min-height: 36px; }

/* 顶栏在 820px 以下会把日期沉到第二行，主区的垂直空间更紧，切换条跟着收一点。 */
@media (max-width: 820px) {
  .calbar { min-height: 38px; padding: 0 8px; }
  .calbar__tab { padding: 0 11px; }
}

/* 手机：工作面切换器沉到底部栏之后，这条就是屏幕上唯一的日历内导航，
   热区给到 44px，两端留出可滚动的余量。

   为什么要把 :root[data-density='compact'] 也写进来：上面那条紧凑规则是
   (0,3,0)，这里的 .calbar 只有 (0,1,0)，媒体查询并不加特异度——
   所以紧凑密度下手机上量到的是 36px，这条 44px 从来没生效过。
   44 不是密度问题而是手指问题：密度可以决定一行有多密，不能决定拇指有多大，
   所以这里让屏幕宽度说了算，紧凑密度在手机上不再往下压。 */
/* 条件里那句 (max-height: 500px) 是**横屏的手机**：844×390 时窗口宽 844，
   上面所有按宽度写的规则一条都不命中，于是标签退回 36.9×40 —— 手机横过来
   拇指并没有变小。视口矮于 500px 的设备实际上只有"横过来的手机/平板"这一类，
   桌面窗口偶尔被拖到这么矮时多拿到几个像素的热区，不是问题。 */
@media (max-width: 640px), (max-height: 500px) {
  .calbar,
  :root[data-density='compact'] .calbar { min-height: 44px; padding: 0 6px; }
  /* 高度早就是 44 了，宽度差一点：单字标签「月/周/日/年」实测 39.4px 宽，
     13px 的一个中文字 + 2×13 内边距。44×44 是下限，两个维度都算数，
     所以钉一条 min-width——padding 再加会让「日程」两个字的标签胖到 57，
     五个标签在 320px 下就该横滚了。
     五个 44 + 四个 2px 间距 + 两边 6px 内边距 = 240px，320px 下仍然一屏放得下。 */
  .calbar__tab { min-width: 44px; padding: 0 12px; font-size: var(--fs-body); justify-content: center; }
  /* 直尺贴着字画（左右各收 10）在 44px 宽的标签上会宽过字本身，
     单字标签更是变成一条比字还长的横杠。改成按热区居中、只画字那么宽。 */
  .calbar__tab.is-active::after { left: 12px; right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .calbar__tab { transition: none; }
}