/* ==========================================================================
 * 7REE · 林间笔记 —— 现代 CSS 增强层（在 public.css 之后加载）
 *
 * 用到的现代能力，全部是渐进增强，老浏览器只是少一点效果：
 *   oklch() / color-mix() —— 感知均匀的色彩空间，透明度混合不再发灰
 *   CSS 嵌套              —— 组件样式收在一处
 *   容器查询 @container   —— 组件按「自己被放进多宽的栏」自适应，而不是看视口
 *   :has()                —— 用选择器表达状态，省掉一堆 JS
 *   text-wrap: balance    —— 标题断行更自然
 *   滚动驱动动画           —— 进度条与卡片浮现由滚动位置驱动，主线程零开销
 *   @starting-style       —— 元素初次出现时的入场过渡
 *   @view-transition      —— 跨页面时由浏览器做视图过渡，像单页应用
 *   @layer                —— 新组件显式分层（注意：层内规则优先级低于未分层的
 *                            public.css，所以「覆盖」类的规则一律留在层外）
 * ========================================================================== */

@layer components, utilities;

/* ------------------------------------------------------------------ *
 *  1. 设计令牌：用 oklch 重述主色
 *  （不支持 oklch 的浏览器整段跳过，继续用 public.css 里的 sRGB 值）
 * ------------------------------------------------------------------ */
@supports (color: oklch(0.6 0.1 150)) {
  :root {
    --accent:        oklch(0.52 0.106 156);
    --accent-deep:   oklch(0.42 0.098 156);
    --accent-soft:   oklch(0.72 0.086 152);
    --brand:         oklch(0.34 0.052 158);
    --brand-2:       oklch(0.24 0.038 158);
    --ring:          color-mix(in oklch, var(--accent) 34%, transparent);
    --surface-tint:  color-mix(in oklch, var(--accent) 7%, var(--surface));
    --line-tint:     color-mix(in oklch, var(--accent) 16%, var(--line));
  }
  [data-theme="dark"] {
    --accent:        oklch(0.78 0.108 152);
    --accent-deep:   oklch(0.86 0.094 150);
    --accent-soft:   oklch(0.62 0.086 154);
    --ring:          color-mix(in oklch, var(--accent) 42%, transparent);
    --surface-tint:  color-mix(in oklch, var(--accent) 10%, var(--surface));
    --line-tint:     color-mix(in oklch, var(--accent) 22%, var(--line));
  }
}

/* 焦点环：只在键盘操作时出现，且用 color-mix 调成半透明 */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
::selection { background: color-mix(in oklab, var(--accent) 26%, transparent); }
:root { accent-color: var(--accent); }

/* ------------------------------------------------------------------ *
 *  2. 排版细节
 * ------------------------------------------------------------------ */
h1, h2, h3, .section-title, .card h3, .page-head h1 { text-wrap: balance; }
p, li, .lede, .card p, .sh-body { text-wrap: pretty; }
.article-body p { hanging-punctuation: allow-end; }

/* picture 用 display:contents 抽掉包装盒，<img> 的行为与改造前完全一致 */
picture { display: contents; }

/* ------------------------------------------------------------------ *
 *  3. 卡片封面 / 正文大图（配合 <picture> 输出）
 * ------------------------------------------------------------------ */
.cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
.card:hover .cover img { transform: scale(1.045); }

.hero-wrap { margin: 8px 0 26px; text-align: center; }
.article .hero-img {
  width: auto;
  max-width: 100%;
  max-height: 640px;
  border-radius: 14px;
  object-fit: contain;
}

/* ------------------------------------------------------------------ *
 *  4. 原生 <dialog> 灯箱
 *     焦点圈定、ESC 关闭、顶层渲染、::backdrop 全部由浏览器负责
 * ------------------------------------------------------------------ */
dialog.lightbox {
  border: 0;
  padding: 0;
  margin: auto;
  max-width: none;
  max-height: none;
  width: 100vw;
  height: 100dvh;
  background: transparent;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  justify-items: center;
  gap: 8px;
  animation: lb-in .26s cubic-bezier(.22, 1, .36, 1);

  @starting-style { opacity: 0; }

  &::backdrop {
    background: color-mix(in srgb, #06090b 88%, transparent);
    backdrop-filter: blur(10px) saturate(120%);
  }

  & img {
    grid-column: 2;
    max-width: min(88vw, 1400px);
    max-height: 82dvh;
    border-radius: 14px;
    box-shadow: 0 40px 90px -20px #000c;
    view-transition-name: lb-image;
  }

  & button {
    border: 0;
    cursor: pointer;
    background: color-mix(in srgb, #ffffff 14%, transparent);
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    display: grid;
    place-items: center;
    transition: background .2s, transform .2s;

    &:hover {
      background: color-mix(in srgb, #ffffff 26%, transparent);
      transform: scale(1.06);
    }
  }
  & .lb-prev { grid-column: 1; }
  & .lb-next { grid-column: 3; }
  & .lb-close {
    position: absolute;
    top: max(18px, env(safe-area-inset-top));
    right: 18px;
    width: 42px;
    height: 42px;
    font-size: 17px;
  }
  & .lb-cap {
    grid-column: 1 / -1;
    margin: 4px 0 0;
    color: color-mix(in srgb, #fff 72%, transparent);
    font: 13px/1.6 var(--font-ui);
    letter-spacing: .04em;
  }
}
@keyframes lb-in {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
}

/* ------------------------------------------------------------------ *
 *  5. 分享菜单：Popover API（点击别处自动关闭、渲染在最顶层）
 * ------------------------------------------------------------------ */
.share-pop {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 14px;
  padding: 6px;
  margin: 0;
  inset: auto;
  width: 200px;
  box-shadow: 0 20px 50px -16px #00000038;
  display: grid;
  gap: 2px;
  animation: pop-in .18s ease-out;

  @starting-style { opacity: 0; transform: translateY(-6px); }

  & button, & a {
    display: block;
    text-align: left;
    border: 0;
    background: transparent;
    color: inherit;
    text-decoration: none;
    font: 14px var(--font-ui);
    padding: 9px 12px;
    border-radius: 9px;
    cursor: pointer;

    &:hover {
      background: var(--surface-tint, var(--bg-soft));
      color: var(--accent-deep);
    }
  }
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px); } }

/* 没有 popover 支持时的兜底 */
.share-pop.fallback-open {
  position: absolute;
  z-index: 70;
  display: grid;
}

/* ------------------------------------------------------------------ *
 *  6. 实时在线指示
 * ------------------------------------------------------------------ */
.live-line {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font: 12.5px var(--font-ui);
  color: color-mix(in srgb, #fff 76%, transparent);

  & .live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: oklch(0.82 0.14 156);
    animation: live-pulse 2.4s ease-out infinite;
  }
  &.on { color: #fff; }
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 #6ee7a866; }
  70%  { box-shadow: 0 0 0 9px #6ee7a800; }
  100% { box-shadow: 0 0 0 0 #6ee7a800; }
}

/* ------------------------------------------------------------------ *
 *  7. 搜索结果（新组件，放进 components 层）
 * ------------------------------------------------------------------ */
@layer components {
  .search-list { display: grid; gap: 0; }

  .search-hit {
    padding: 22px 0;
    border-bottom: 1px solid var(--line);

    &:last-child { border-bottom: 0; }

    & .sh-title {
      font: 600 21px/1.5 var(--font-display);
      color: var(--text);
      text-decoration: none;
      display: inline-block;
    }
    & .sh-title:hover { color: var(--accent-deep); }
    & .sh-body {
      color: var(--text-soft);
      margin: 8px 0 10px;
      line-height: 1.8;
      font-size: 15px;
    }
    & .sh-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  }

  mark {
    background: color-mix(in oklab, var(--accent) 24%, transparent);
    color: inherit;
    padding: 0 2px;
    border-radius: 4px;
  }
}

/* ------------------------------------------------------------------ *
 *  8. 容器查询：同一个组件放进不同宽度的栏里，自己换形态
 *     （容器是父级，查询作用于后代元素——这是容器查询的正确用法）
 *
 *     注意：千万别把「顶层大块」（.article 这类）设成容器。
 *     container-type: inline-size 会让元素的内在尺寸归零，
 *     一旦它恰好又是 flex 项（body 就是 display:flex），整栏直接塌缩。
 *     这里只列真正会出现在不同栏宽里的组件。
 * ------------------------------------------------------------------ */
.today-grid, .now-duo, .now-col, .gallery, .search-list {
  container-type: inline-size;
}

@container (max-width: 520px) {
  .fx { padding: 18px 16px; border-radius: 14px; }
  .fx .now-temp { font-size: 40px; }
  .sh-title { font-size: 18px !important; }
}
@container (max-width: 420px) {
  /* 窄栏里日期常显，不依赖悬停（触摸设备没有 hover） */
  .g-item span { opacity: 1; }
}

/* ------------------------------------------------------------------ *
 *  9. :has() —— 用选择器表达状态
 * ------------------------------------------------------------------ */
/* 列表里只剩一句「还没有内容」时，让它独占整行 */
.grid:has(> .empty) { display: block; }
/* 顶栏里搜索框获得焦点时，弱化其他导航项 */
nav.topbar:has(.search-box input:focus) .navlink { opacity: .45; }
/* 有封面的卡片才加图片底部渐变遮罩 */
.card:has(.cover img) .cover::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(transparent, #00000038);
  pointer-events: none;
}

/* ------------------------------------------------------------------ *
 *  10. 长列表渲染优化（只用于静态列表，不动参与滚动动画的卡片）
 * ------------------------------------------------------------------ */
.archive-list > article {
  content-visibility: auto;
  contain-intrinsic-size: auto 96px;
}

/* ------------------------------------------------------------------ *
 *  11. 滚动驱动动画（Chrome/Edge 115+；其他浏览器只是没有动画）
 * ------------------------------------------------------------------ */
@supports (animation-timeline: scroll()) {
  #progress {
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: none;
    animation: progress-grow linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes progress-grow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  @media (prefers-reduced-motion: no-preference) {
    .grid > .card {
      animation: card-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 38%;
    }
    @keyframes card-rise {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(0); }
    }
  }
}

/* ------------------------------------------------------------------ *
 *  12. 跨文档视图过渡：换页像同一页里流动，而不是白屏闪一下
 * ------------------------------------------------------------------ */
@view-transition { navigation: auto; }

/* 顶栏与进度条保持稳定，不参与淡入淡出，观感更接近单页应用 */
nav.topbar { view-transition-name: topbar-7ree; }
#progress  { view-transition-name: progress-7ree; }

::view-transition-old(root) { animation: vt-out .22s ease both; }
::view-transition-new(root) { animation: vt-in .30s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(8px); } }

/* ------------------------------------------------------------------ *
 *  13. 响应式与无障碍
 * ------------------------------------------------------------------ */
@media (max-width: 760px) {
  dialog.lightbox {
    grid-template-columns: 1fr;

    & .lb-prev, & .lb-next { display: none; }
    & img { max-width: 94vw; max-height: 74dvh; }
  }
  .live-line { font-size: 11.5px; }
}

/* 尊重系统的「减少动效」偏好 */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}