/* 静室 CSS：15-soft-interface.css。以内容优先的柔和控制层缓解界面的冷硬感。 */
@layer pages {
  :root {
    --soft-radius:16px;
    --soft-radius-small:10px;
    --soft-control-surface:color-mix(in srgb,var(--surface-canvas) 82%,transparent);
    --soft-elevated-surface:color-mix(in srgb,var(--surface-canvas) 91%,var(--surface-subtle));
    --soft-line:color-mix(in srgb,var(--border-subtle) 80%,transparent);
    --soft-shadow:0 1px 1px rgb(24 31 27/.035),0 12px 30px rgb(24 31 27/.055);
    --motion-feedback:180ms;
  }

  /* 极浅的纸面光感只属于页面背景；文章正文保持稳定纸面，不引入背景图或纹理。 */
  body {
    background:
      radial-gradient(ellipse 72% 42% at 50% -12%,color-mix(in srgb,var(--action-subtle) 25%,transparent),transparent 72%),
      var(--surface-canvas);
  }

  .site-header {
    position:sticky;
    z-index:80;
    top:0;
    border-bottom-color:var(--soft-line);
    background:var(--soft-control-surface);
    box-shadow:0 1px 0 color-mix(in srgb,var(--surface-canvas) 42%,transparent);
    backdrop-filter:blur(18px) saturate(1.12);
    -webkit-backdrop-filter:blur(18px) saturate(1.12);
  }

  .masthead {
    min-height:66px;
  }

  .brand {
    gap:11px;
  }

  .brand b {
    letter-spacing:.075em;
  }

  .primary-nav-main,
  .primary-nav-explore {
    display:flex;
    align-items:center;
    gap:var(--space-2);
  }

  .primary-nav {
    gap:var(--space-3);
  }

  .primary-nav a,
  .masthead-tools > a,
  .footer-actions > a {
    border-radius:var(--radius-pill);
    padding:7px 9px;
    text-decoration:none;
    text-decoration-color:transparent;
  }

  .primary-nav a:hover,
  .primary-nav a:focus-visible,
  .primary-nav a.active,
  .masthead-tools > a:hover,
  .masthead-tools > a:focus-visible,
  .masthead-tools > a.active,
  .footer-actions > a:hover,
  .footer-actions > a:focus-visible {
    background:color-mix(in srgb,var(--action-subtle) 46%,transparent);
    color:var(--text-primary);
  }

  .masthead-tools {
    gap:7px;
  }

  .desk-nav {
    border-left:0;
  }

  .reading-environment-controls {
    gap:2px;
    padding:3px;
    border:var(--stroke-hairline) solid var(--soft-line);
    border-radius:var(--radius-pill);
    background:var(--soft-elevated-surface);
    box-shadow:0 1px 1px rgb(24 31 27/.035);
  }

  .reading-environment-controls .quiet-control {
    width:29px;
    height:29px;
    border:var(--stroke-hairline) solid transparent;
    border-radius:var(--radius-pill);
    background:transparent;
    color:var(--text-secondary);
  }

  .reading-environment-controls .quiet-control:hover,
  .reading-environment-controls .quiet-control:focus-visible,
  .reading-environment-controls .quiet-control[aria-pressed="true"] {
    border-color:color-mix(in srgb,var(--border-strong) 70%,transparent);
    background:color-mix(in srgb,var(--surface-canvas) 72%,var(--action-subtle));
    color:var(--action-primary);
  }

  .start-daily-edition .start-daily-folio {
    margin-inline:calc(var(--gutter)*-1);
    padding-inline:var(--gutter);
    border-radius:0 0 var(--soft-radius) var(--soft-radius);
    background:linear-gradient(180deg,color-mix(in srgb,var(--edition-wash) 43%,transparent),transparent 78%);
  }

  .start-daily-edition .start-daily-editorial-grid {
    border-bottom-color:var(--soft-line);
  }

  .start-daily-edition .start-daily-rail {
    border-left-color:var(--soft-line);
  }

  .start-daily-reading-route {
    overflow:clip;
    border:var(--stroke-hairline) solid var(--soft-line);
    border-bottom-color:var(--edition-rule);
    border-radius:var(--soft-radius);
    background:var(--soft-elevated-surface);
    box-shadow:var(--soft-shadow);
  }

  .start-daily-reading-route a,
  .start-daily-reading-route a+a {
    transition:color var(--motion-feedback) var(--motion-easing),background-color var(--motion-feedback) var(--motion-easing),border-color var(--motion-feedback) var(--motion-easing),opacity var(--motion-feedback) var(--motion-easing);
  }

  .start-daily-reading-route a:hover,
  .start-daily-reading-route a:focus-visible {
    background:color-mix(in srgb,var(--edition-wash) 62%,var(--surface-canvas));
  }

  .library-entry,
  .collection-entry,
  .mark-row {
    border-radius:var(--soft-radius-small);
    transition:background-color var(--motion-feedback) var(--motion-easing),border-color var(--motion-feedback) var(--motion-easing),color var(--motion-feedback) var(--motion-easing);
  }

  .library-entry:hover,
  .library-entry:focus-within,
  .collection-entry:hover,
  .collection-entry:focus-within,
  .mark-row:hover,
  .mark-row:focus-within {
    background:color-mix(in srgb,var(--action-subtle) 20%,transparent);
  }

  .article-outline,
  .reading-resume,
  .essay-turning,
  .essay-exits {
    border-color:var(--soft-line);
  }

  .article-outline,
  .reading-resume {
    border-radius:var(--soft-radius-small);
    background:linear-gradient(110deg,color-mix(in srgb,var(--surface-subtle) 58%,transparent),transparent 78%);
  }

  .reading-resume {
    padding-inline:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }

  .reading-resume button,
  .text-button {
    min-height:32px;
    border-radius:var(--radius-pill);
    transition:color var(--motion-feedback) var(--motion-easing),background-color var(--motion-feedback) var(--motion-easing),border-color var(--motion-feedback) var(--motion-easing),opacity var(--motion-feedback) var(--motion-easing);
  }

  .text-button:hover,
  .text-button:focus-visible {
    background:color-mix(in srgb,var(--action-subtle) 36%,transparent);
  }

  .reading-resume button:hover,
  .reading-resume button:focus-visible {
    background:transparent;
  }

  .site-footer {
    border-top-color:var(--soft-line);
  }

  html[data-theme="night"] body {
    background:
      radial-gradient(ellipse 72% 42% at 50% -12%,color-mix(in srgb,var(--action-subtle) 31%,transparent),transparent 72%),
      var(--surface-canvas);
  }

  @media (prefers-contrast:more) {
    .site-header {
      background:var(--surface-canvas);
      box-shadow:none;
      backdrop-filter:none;
      -webkit-backdrop-filter:none;
    }
    .reading-environment-controls,
    .start-daily-reading-route {
      box-shadow:none;
    }
  }

  @media (max-width:760px) {
    .masthead {
      min-height:58px;
    }
    .brand small,
    .primary-nav-explore {
      display:none;
    }
    .primary-nav {
      gap:2px;
    }
    .primary-nav a,
    .masthead-tools > a {
      padding:7px 6px;
    }
    .start-daily-edition .start-daily-folio {
      border-radius:0 0 12px 12px;
    }
    .start-daily-reading-route {
      border-radius:12px;
      box-shadow:0 8px 20px rgb(24 31 27/.045);
    }
    .reading-resume {
      padding-inline:var(--space-3);
    }
  }
}