/* ============================================================
   个人主页 · 样式
   风格：微软直角扁平（Metro），茉莉深绿 + 白
   除图标圆环外，页面任何位置都不出现圆角
   ============================================================ */

/* ============================================================
   1. 配色
   想换颜色，只改「亮色」那一段就够了；暗色用同一批变量名重新赋一遍值。
   顶栏用的是 --accent / --on-accent。
   ============================================================ */

/* ---------- 亮色（默认） ---------- */
:root {
  --bg:        #ffffff;  /* 页面底色 */
  --fg:        #1b4332;  /* 正文文字 */
  --icon:      #000000;  /* 图标图案，悬停时也用作圆环填充色 */
  --on-icon:   #ffffff;  /* 悬停反相后的图案色 */
  --line:      #d8e3dd;  /* 圆环描边、分隔线 */
  --muted:     #52796f;  /* 爱好小字、页脚 */
  --accent:    #1b4332;  /* 顶栏底色（重点色） */
  --on-accent: #ffffff;  /* 顶栏文字 */
  --clock:     #0f2a1f;  /* 数字时钟：比顶栏再深一档的绿 */
  --drawer-bg: #ffffff;  /* 抽屉面底色（亮色下与页面同色） */
  --btn-line:  rgba(255, 255, 255, 0.45); /* 切换器未选中按钮的描边 */

  --tile: 72px;          /* 图标圆环直径 */

  color-scheme: light;
}

/* ---------- 暗色：跟随系统（用户没手动选亮色时生效） ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #000000;  /* 纯黑底 */
    --fg:        #ffffff;
    --icon:      #ffffff;
    --on-icon:   #000000;
    --line:      #2d6a4f;
    --muted:     #a9c4b8;
    --accent:    #1b4332;  /* 顶栏保持茉莉深绿，在纯黑上是一条清楚的绿带 */
    --on-accent: #ffffff;
    --clock:     #52b788;  /* 黑底上「更深」会看不见，所以反过来用更亮一档的绿 */
    --drawer-bg: #0d1f18;

    color-scheme: dark;
  }
}

/* ---------- 暗色：用户手动选了「暗色」，无视系统设置 ---------- */
:root[data-theme="dark"] {
  --bg:        #000000;
  --fg:        #ffffff;
  --icon:      #ffffff;
  --on-icon:   #000000;
  --line:      #2d6a4f;
  --muted:     #a9c4b8;
  --accent:    #1b4332;
  --on-accent: #ffffff;
  --clock:     #52b788;
  --drawer-bg: #0d1f18;

  color-scheme: dark;
}

/* ============================================================
   2. 基础重置
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-radius: 0; /* 直角扁平：唯一的圆角例外是下面 .tile 的圆环 */
}

html {
  height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC",
               system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* 选中文字时反相 */
::selection {
  background: var(--fg);
  color: var(--bg);
}

/* ============================================================
   3. 顶栏：整块重点色
   ============================================================ */
.site-header {
  position: relative;   /* 压住 z-index，好让时钟收起时滑到它「下面」去 */
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 20px;
  padding: 18px 32px;
  background: var(--accent);
  color: var(--on-accent);
}

.brand {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
    letter-spacing: 0.14em;
}
.brand-main {
  font-size: 19px; 
  font-weight: 700; 
}

.brand-sub {
  font-size: 0.7rem;
  opacity: 0.7;
  transform: translateY(3px);
}

/* ---------- 右上角：颜色模式切换器（图标按钮） ---------- */
.theme-switch {
  display: flex;
}

.theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--btn-line);
  border-radius: 50%;
  background: transparent;
  color: var(--on-accent);
  cursor: pointer;
  transition: transform 140ms ease, background-color 140ms ease;
}

.theme-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: scale(1.08);
}

/* 当前主题按钮：填充反色 */
.theme-btn[aria-pressed="true"] {
  background: var(--on-accent);
  border-color: var(--on-accent);
  color: var(--accent);
}

.theme-btn:focus-visible {
  outline: 2px solid var(--on-accent);
  outline-offset: 2px;
}

/* 太阳 / 月亮 / 显示器，按点击顺序循环 */
.theme-icon {
  display: block;
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* ============================================================
   4. 数字时钟（北京时间 UTC+8）
   ============================================================ */
.clock-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* 抽屉的「格子」：高度平时是 auto（交给 CSS，永远准），
   只有拖动 / 收起的那几秒由脚本写明确的像素值。
   刻意不设 overflow: hidden —— 抽屉要越过自己的格子，一路滑进顶栏底下 */
.clock-slot {
  transition: height 450ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* 抽屉本体：位移和悬停缩放挂在它身上。
   耳朵是它的子元素，所以拖动时耳朵天然跟着走 */
.drawer {
  --drag: 0px;   /* 抽屉位移，由脚本写 */
  --zoom: 1;     /* 悬停放大 */

  position: relative;
  transform: translateY(var(--drag)) scale(var(--zoom));
  transition: transform 180ms ease;
}

.drawer:hover {
  --zoom: 1.02;                /* 整个模块轻微缩放 */
}

/* 拖动过程中关掉过渡，画面完全跟手 */
.clock-area.is-dragging .clock-slot,
.clock-area.is-dragging .drawer,
/* 量尺寸时也要关掉过渡，否则读到的还是动画起点 */
.clock-area.no-anim .clock-slot,
.clock-area.no-anim .drawer {
  transition: none;
}

/* 抽屉面：矩形，无阴影 */
.clock {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 8px 22px;
  background: var(--drawer-bg);

  color: var(--clock);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;  /* 等宽数字，秒和毫秒跳动时宽度不动 */
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  touch-action: none;          /* 手机上按住拖动时不触发页面滚动 */
}

.clock:focus-visible {
  outline: 2px solid var(--clock);
  outline-offset: 2px;
}

.clock-time {
  display: inline-flex;
}

/* 分与秒之间的冒号：脚本每半秒切一次 visibility（不用 display，避免布局跳动） */
.clock-colon {
  display: inline-block;
  width: 0.44em;
  text-align: center;
}

/* 秒右侧：三个点 / 毫秒。固定宽度，两者互切时后面的标注不会跳 */
.clock-tail {
  display: inline-flex;
  align-items: center;
  width: 30px;
}

.clock-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.clock-dots i {
  width: 5px;
  height: 5px;
  background: currentColor;
  opacity: 0.2;                /* 暗着的点 */
}

.clock-dots i.is-on {
  opacity: 1;                  /* 亮着的点 */
}

.clock-ms {
  display: none;
  font-size: 0.55em;
  font-variant-numeric: tabular-nums;
}

.clock.is-ms .clock-dots { display: none; }
.clock.is-ms .clock-ms   { display: inline; }

.clock-zone {
  font-size: 0.5em;
  font-weight: 500;
  letter-spacing: 0.12em;
  opacity: 0.75;
}

/* 抽屉耳朵：贴在抽屉下沿正中，跟着抽屉一起上下走。
   抽屉推进顶栏后，留在外面的就只剩它 */
.clock-ear {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 15px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: grab;
  touch-action: none;
}

.clock-ear svg {
  display: block;
  width: 11px;
  height: 11px;
  fill: currentColor;
}

.clock-ear:hover {
  color: var(--clock);
}

.clock-ear:active {
  cursor: grabbing;
}

.clock-ear:focus-visible {
  outline: 2px solid var(--clock);
  outline-offset: 2px;
}

/* ============================================================
   5. 主区：图标与爱好居中
   ============================================================ */
.content {
  position: relative;   /* 收起后的 ▼ 以这里为定位基准 */
  flex: 1; /* 撑开剩余高度，把页脚压到底部 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 48px 24px;
}

.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

/* ---------- 图标圆环 ---------- */
.tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tile);
  height: var(--tile);
  border: 2px solid var(--line);
  border-radius: 50%; /* 唯一的圆角例外：外轮廓是正圆 */
  background: transparent;
  color: var(--icon);
  text-decoration: none;
  /* 刻意不加 transition：悬停是硬切，最贴近 Metro */
}

/* 悬停 / 按下：圆环填充反相（黑圆白图 ↔ 白圆黑图） */
.tile:hover,
.tile:active {
  background: var(--icon);
  border-color: var(--icon);
  color: var(--on-icon);
}

/* 键盘 Tab 聚焦 */
.tile:focus-visible {
  outline: 2px solid var(--icon);
  outline-offset: 3px;
}

.tile-icon {
  display: block;
  width: 32px;
  height: 32px;
  fill: currentColor; /* 颜色跟随 .tile，反相自动生效 */
}

/* ---------- 爱好小字 ---------- */
.hobbies {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-align: center;
}

/* ============================================================
   6. 页脚
   ============================================================ */
.site-footer {
  padding: 18px 24px;
  border-top: 1px solid var(--line);
  text-align: center;
  display: flex;              /* 让子元素横向排列 */
  justify-content: center;    /* 整体居中；想靠左改 flex-start，靠右改 flex-end */
  align-items: center;        /* 垂直居中对齐 */
  gap: 1rem;                  /* 两段文字之间的间距 */
}


.site-footer p {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.06em;
}


.site-footer p {
  margin: 1px;                  /* 去掉 <p> 默认的上下外边距，否则会撑高、错位 */
}

.site-footer a {
  color: inherit;             /* 链接颜色跟随主题 */
  text-decoration: none;      /* 去掉下划线，可选 */
}

.site-footer a:hover {
  text-decoration: underline;
}

/* ============================================================
   7. 窄屏适配
   ============================================================ */
@media (max-width: 480px) {
  :root {
    --tile: 60px;
  }

  .clock {
    font-size: 18px;
    padding: 6px 14px;
  }

  .clock-tail {
    width: 22px;
  }

  .clock-dots i {
    width: 4px;
    height: 4px;
  }

  .site-header {
    padding: 14px 20px;
  }

  .brand {
    font-size: 15px;
  }

  .theme-btn {
    width: 32px;
    height: 32px;   /* 必须和 width 相等，否则 50% 圆角会变成椭圆 */
  }

  .theme-icon {
    width: 14px;
    height: 14px;
  }

  .content {
    gap: 36px;
    padding: 40px 20px;
  }

  .links {
    gap: 14px;
  }

  .tile-icon {
    width: 26px;
    height: 26px;
  }

  .hobbies {
    font-size: 12px;
    letter-spacing: 0.04em;
  }

  .site-footer {
    padding: 16px 20px;
  }
}