/* ==========================================================================
   星辉娱乐 · 场刊设计系统
   文件 2/4：layer-shell.css —— 页面骨架
   包含：顶部灯光跑马、巡演式横向导航带、昼/夜切换、抽屉导航、面包屑、
   「曲目栏 + 内容区」章节骨架（容器查询驱动）、票根页脚。
   ========================================================================== */

@layer shell {
  /* ---------- 顶部灯光跑马条 ---------- */
  .xh-beam {
    overflow: hidden;
    background: var(--xh-band);
    color: var(--xh-band-fg);
    border-bottom: 1px solid rgba(0, 0, 0, .3);
  }
  .xh-beam__track {
    display: flex;
    width: max-content;
    gap: 34px;
    padding: 6px 0;
    font-family: var(--xh-mono);
    font-size: .7rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    animation: xh-beam 34s linear infinite;
  }
  .xh-beam__track span { display: inline-flex; gap: 8px; align-items: center; opacity: .86; }
  .xh-beam__track span i { width: 5px; height: 5px; border-radius: 50%; background: var(--xh-brass-hi); }
  .xh-beam:hover .xh-beam__track { animation-play-state: paused; }
  @keyframes xh-beam { to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .xh-beam__track { animation: none; } }

  /* ---------- 巡演导航带 ---------- */
  .xh-head {
    position: sticky;
    top: 0;
    z-index: 60;
    background: color-mix(in srgb, var(--xh-bg) 88%, transparent);
    backdrop-filter: blur(10px) saturate(1.1);
    border-bottom: 1px solid var(--xh-line-2);
  }
  .xh-head__in {
    width: min(var(--xh-wrap), 100% - (var(--xh-pad) * 2));
    margin-inline: auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    min-height: 74px;
  }
  .xh-brand { display: flex; align-items: center; gap: 12px; }
  .xh-brand__disc {
    position: relative;
    width: 40px; height: 40px; border-radius: 50%;
    background:
      repeating-radial-gradient(circle at 50% 50%, #1a1712 0 1.6px, #2b241a 1.6px 3.2px);
    box-shadow: inset 0 0 0 1px var(--xh-line-3);
    flex: none;
  }
  .xh-brand__disc::after {
    content: ""; position: absolute; inset: 13px; border-radius: 50%;
    background: conic-gradient(from 210deg, var(--xh-cue), var(--xh-brass) 55%, var(--xh-cue) 100%);
  }
  .xh-brand__disc i {
    position: absolute; inset: 0; border-radius: 50%;
    background: linear-gradient(120deg, transparent 42%, rgba(255, 255, 255, .3) 50%, transparent 58%);
    animation: xh-sheen 5.5s var(--xh-ease) infinite;
  }
  @keyframes xh-sheen { 0%, 70%, 100% { transform: translateX(-6px); opacity: 0; } 82% { opacity: .9; } }
  .xh-brand__txt { display: grid; line-height: 1.15; }
  .xh-brand__txt b { font-size: 1.12rem; font-weight: 800; letter-spacing: .02em; }
  .xh-brand__txt em {
    font-family: var(--xh-mono); font-style: normal;
    font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--xh-fg-3);
  }

  .xh-nav { display: none; align-items: center; gap: 2px; }
  .xh-nav a {
    display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 6px;
    padding: 9px 11px; border-radius: var(--xh-rad);
    font-size: .93rem; font-weight: 600; white-space: nowrap;
    transition: background .2s var(--xh-ease), color .2s var(--xh-ease);
  }
  .xh-nav a i {
    font-family: var(--xh-mono); font-size: .62rem; font-style: normal;
    letter-spacing: .06em; color: var(--xh-fg-3);
  }
  .xh-nav a:hover { background: var(--xh-surface-2); color: var(--xh-cue); }
  .xh-nav a[aria-current="page"] { background: var(--xh-cue); color: var(--xh-on-accent); }
  .xh-nav a[aria-current="page"] i { color: color-mix(in srgb, var(--xh-on-accent) 72%, transparent); }
  .xh-nav__split { width: 1px; height: 26px; background: var(--xh-line-2); margin: 0 8px; }

  .xh-head__acts { display: flex; align-items: center; gap: 10px; }

  /* 昼/夜场切换 */
  .xh-theme {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 12px; border: 1px solid var(--xh-line-2); border-radius: 999px;
    font-family: var(--xh-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--xh-fg-2); background: var(--xh-surface);
    transition: border-color .2s var(--xh-ease), color .2s var(--xh-ease);
  }
  .xh-theme:hover { border-color: var(--xh-brass); color: var(--xh-brass); }
  .xh-theme::before {
    content: ""; width: 11px; height: 11px; border-radius: 50%;
    background: radial-gradient(circle at 32% 32%, var(--xh-brass-hi), var(--xh-cue) 78%);
    box-shadow: 0 0 0 1px var(--xh-line-2);
  }
  :root[data-theme="night"] .xh-theme::before {
    background: conic-gradient(from 0deg, var(--xh-fg-3) 0 50%, #12100c 50% 100%);
  }

  /* 汉堡 */
  .xh-burger { display: grid; gap: 4px; padding: 10px; }
  .xh-burger span { display: block; width: 22px; height: 2px; background: var(--xh-fg); transition: transform .25s var(--xh-ease); }
  .xh-head.is-open .xh-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .xh-head.is-open .xh-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* 抽屉（移动端导航） */
  .xh-drawer {
    position: fixed; inset: 0 auto 0 0; z-index: 80;
    width: min(320px, 86vw);
    background: var(--xh-surface);
    border-right: 1px solid var(--xh-line-2);
    transform: translateX(-102%);
    transition: transform .34s var(--xh-ease);
    display: grid; grid-template-rows: auto 1fr auto;
    overflow-y: auto;
  }
  .xh-drawer.is-open { transform: none; }
  .xh-drawer__head { padding: 18px var(--xh-pad); border-bottom: 1px solid var(--xh-line); font-family: var(--xh-mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--xh-fg-3); }
  .xh-drawer a { display: flex; align-items: baseline; gap: 10px; padding: 13px var(--xh-pad); border-bottom: 1px dashed var(--xh-line); font-weight: 600; }
  .xh-drawer a i { font-family: var(--xh-mono); font-size: .66rem; font-style: normal; color: var(--xh-brass); }
  .xh-drawer a[aria-current="page"] { color: var(--xh-cue); background: var(--xh-cue-soft); }
  .xh-scrim {
    position: fixed; inset: 0; z-index: 70; background: rgba(10, 8, 5, .5);
    opacity: 0; visibility: hidden; transition: opacity .3s var(--xh-ease), visibility .3s;
  }
  .xh-scrim.is-open { opacity: 1; visibility: visible; }

  @media (min-width: 1180px) {
    .xh-nav { display: flex; }
    .xh-burger { display: none; }
  }
  /* 中等宽度收紧导航（隐藏编号，避免换行） */
  @media (min-width: 1180px) and (max-width: 1359px) {
    .xh-nav a { padding: 8px 8px; font-size: .86rem; }
    .xh-nav a i { display: none; }
  }
  @media (max-width: 620px) {
    .xh-head__acts .xh-btn { display: none; }
    .xh-theme span { display: none; }
  }

  /* ---------- 页内骨架：幕布标题区 ---------- */
  .xh-act {
    padding: clamp(44px, 7vw, 96px) 0 clamp(34px, 5vw, 64px);
    border-bottom: 1px solid var(--xh-line);
  }
  .xh-act__grid { display: grid; gap: clamp(28px, 5vw, 56px); }
  @media (min-width: 1000px) { .xh-act__grid { grid-template-columns: 1.08fr .92fr; align-items: center; } }
  .xh-kicker {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    font-family: var(--xh-mono); font-size: .68rem; letter-spacing: .2em;
    text-transform: uppercase; color: var(--xh-fg-3); margin-bottom: 18px;
  }
  .xh-kicker b { color: var(--xh-cue); font-weight: 700; }
  .xh-kicker em { font-style: normal; color: var(--xh-teal); }
  .xh-h1 em { font-style: normal; color: var(--xh-cue); }
  .xh-h1 span { display: block; font-size: .5em; letter-spacing: .01em; color: var(--xh-fg-2); font-weight: 600; margin-top: .4em; }
  .xh-marks { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }

  /* ---------- 章节骨架：左曲目栏 + 右内容（容器查询） ---------- */
  .xh-sect {
    container-type: inline-size;
    container-name: sect;
    display: grid;
    gap: 20px;
    padding: clamp(38px, 6vw, 74px) 0;
    border-bottom: 1px solid var(--xh-line);
    scroll-margin-top: 90px;
  }
  .xh-sect--band { background: var(--xh-bg-2); border-block: 1px solid var(--xh-line-2); }
  .xh-sect__rail { display: grid; gap: 8px; align-content: start; }
  .xh-sect__no {
    font-family: var(--xh-mono); font-weight: 700; font-size: 2.1rem; line-height: 1;
    color: transparent; -webkit-text-stroke: 1px var(--xh-line-3); letter-spacing: -.02em;
  }
  .xh-sect__en { font-family: var(--xh-mono); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--xh-teal); }
  .xh-sect__title { margin: 0; }
  .xh-sect__note { color: var(--xh-fg-2); font-size: .93rem; max-width: 30ch; }
  @container sect (min-width: 860px) {
    .xh-sect { grid-template-columns: var(--xh-rail) minmax(0, 1fr); gap: 34px; }
    .xh-sect__rail { position: sticky; top: 96px; }
  }
  @container sect (min-width: 1080px) {
    /* 用 :has() 判断是否存在侧栏，避免空列（不支持时退化为两栏） */
    .xh-sect { grid-template-columns: var(--xh-rail) minmax(0, 1fr); }
    .xh-sect:has(.xh-sect__aside) { grid-template-columns: var(--xh-rail) minmax(0, 1fr) 216px; }
    .xh-sect__aside { border-left: 1px solid var(--xh-line-2); padding-left: 22px; }
  }

  /* 目录点线（本站标志性排版语言） */
  .xh-leader { display: flex; align-items: baseline; gap: 10px; width: 100%; }
  .xh-leader::after {
    content: ""; flex: 1; border-bottom: 1.4px dotted var(--xh-line-3);
    transform: translateY(-4px);
  }
  .xh-leader b { font-weight: 700; }
  .xh-leader span { font-family: var(--xh-mono); font-size: .74rem; letter-spacing: .08em; color: var(--xh-fg-3); }

  /* ---------- 面包屑 ---------- */
  .xh-crumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-family: var(--xh-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--xh-fg-3); }
  .xh-crumb i { font-style: normal; color: var(--xh-line-3); }
  .xh-crumb a:hover { color: var(--xh-cue); }

  /* ---------- 票根页脚 ---------- */
  .xh-foot { margin-top: 20px; background: var(--xh-band); color: var(--xh-band-fg); }
  .xh-foot__word {
    font-family: var(--xh-display); font-weight: 800; letter-spacing: -.04em;
    font-size: clamp(2.6rem, 12vw, 8.4rem); line-height: .86;
    color: transparent; -webkit-text-stroke: 1px rgba(238, 246, 244, .3);
    padding: clamp(28px, 5vw, 56px) 0 0;
    user-select: none;
  }
  .xh-foot__grid { display: grid; gap: 30px; padding: clamp(30px, 5vw, 54px) 0; }
  @media (min-width: 780px) { .xh-foot__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1080px) { .xh-foot__grid { grid-template-columns: 1.4fr repeat(3, 1fr); } }
  .xh-foot h4 { font-family: var(--xh-mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--xh-brass-hi); margin: 0 0 14px; font-weight: 700; }
  .xh-foot a { display: inline-block; padding: 4px 0; color: color-mix(in srgb, var(--xh-band-fg) 86%, transparent); }
  .xh-foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
  .xh-foot__about p { max-width: 46ch; color: color-mix(in srgb, var(--xh-band-fg) 78%, transparent); font-size: .93rem; }
  .xh-foot__legal {
    border: 1px dashed rgba(238, 246, 244, .3);
    padding: 16px 18px; margin: 0 0 26px;
    font-size: .84rem; line-height: 1.7;
    color: color-mix(in srgb, var(--xh-band-fg) 82%, transparent);
    background: rgba(0, 0, 0, .18);
  }
  .xh-foot__legal b { color: var(--xh-brass-hi); }
  .xh-foot__bar {
    display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center;
    padding: 18px 0 26px; border-top: 1px solid rgba(238, 246, 244, .2);
    font-family: var(--xh-mono); font-size: .68rem; letter-spacing: .1em;
    color: color-mix(in srgb, var(--xh-band-fg) 72%, transparent);
  }
  .xh-foot__bar a { color: inherit; }

  /* ---------- 提示条 / 徽标 ---------- */
  .xh-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 11px; border: 1px solid var(--xh-line-2); border-radius: 999px;
    font-family: var(--xh-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
    background: var(--xh-surface); color: var(--xh-fg-2);
  }
  .xh-chip--cue { border-color: var(--xh-cue); color: var(--xh-cue); background: var(--xh-cue-soft); }
  .xh-chip--brass { border-color: var(--xh-brass); color: var(--xh-brass); }
  .xh-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: xh-pulse 1.8s ease-in-out infinite; }
  @keyframes xh-pulse { 50% { opacity: .25; } }
  @media (prefers-reduced-motion: reduce) { .xh-chip i { animation: none; } }

  /* ---------- 按钮 ---------- */
  .xh-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 24px; border: 1px solid var(--xh-fg);
    background: var(--xh-cue); color: var(--xh-on-accent);
    border-radius: var(--xh-rad);
    font-weight: 700; font-size: .95rem; letter-spacing: .01em;
    transition: transform .18s var(--xh-ease), box-shadow .18s var(--xh-ease), background .2s var(--xh-ease);
  }
  .xh-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--xh-fg); }
  .xh-btn--ghost { background: transparent; color: var(--xh-fg); border-color: var(--xh-line-3); }
  .xh-btn--ghost:hover { background: var(--xh-surface-2); }
  .xh-btn--ink { background: var(--xh-fg); color: var(--xh-bg); border-color: var(--xh-fg); }
  .xh-btn--sm { padding: 9px 15px; font-size: .84rem; }
  .xh-btn--wide { width: 100%; }
  .xh-btn--band { background: var(--xh-brass-hi); border-color: var(--xh-brass-hi); color: #17140f; }
  .xh-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
}