/* PUBLIC-SHELL-DOORS-20261020 §25.2: shell containers only.
   No layout change to the Claude page; every colour comes from styles/tokens.css. */

html[data-shell="index"] main#main {
  /* The shell swaps the view inside this box; the static rhythm stays the base
     so the first paint and the first mount share one baseline. */
  position: relative;
}

/* Live region for the single post-reveal announcement. */
.pm-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* Placeholder body of a column whose real view task has not landed yet. */
.pm-placeholder {
  box-sizing: border-box;
  max-width: 62ch;
  margin: var(--pm-s-4) 0 0;
  padding: var(--pm-s-4) var(--pm-s-5);
  color: var(--pm-ink-2);
  background: var(--pm-card);
  border: 1px dashed var(--pm-line);
  border-radius: var(--pm-r-sheet);
  font: 400 var(--pm-fs-ui)/1.6 var(--pm-font-sans);
  box-shadow: var(--pm-e-sheet);
}

html[data-state="dream"] .pm-placeholder {
  color: var(--pm-on-scene-2);
  background: transparent;
  border-color: var(--pm-table-line);
  box-shadow: none;
}

/* Height reserve for a mounted column so the footer does not jump between the
   static home main and a column view. */
#page-view[data-shell-view] {
  display: block;
  min-height: clamp(180px, 32vh, 320px);
}

/* =====================================================================
   §2 两侧顶栏材质（195 / 196 / 197 的授权增量，壳内同规格落地）

   dev/components/c-001..003.html 与 tools/webui/cases/component_c001..003.mjs
   仍然是 c-001/c-002/c-003 的 owner；公开站不接组件运行时（index.html 的样式/
   脚本清单不许改），所以这一份把同一套材质写进共享壳。只改材质、形状、选中与
   焦点：门楣 64/56、六个/四个入口的 href、顺序、文案、aria-current 语义、
   抽屉、品牌/添灯油/菜单钮/暗锁一律不动。

   本增量的局部令牌（生产优先映射现行同义 token，不全库替换）：
   铜 #C6A36C / #D1AF72、深绿 #1A2F2A / #315346、
   月蓝 #172D34 / #294852、银青 #B5D6D5、字 #EDE4CD。

   材质分层各自成条，不用「一个色块 + box-shadow」冒充：
     · 上沿 1px 亮边      body.h-house .pm-lintel::before
     · 梁面胡桃木纹        body.h-house .pm-lintel 的 background-image（沿用 page-shell
                          §3 已有的 assets/house/walnut.webp，不引新图）
     · 下沿 1px 铜线      body.h-house .pm-lintel 背景的最上一层（bottom / 100% 1px）
     · 3px 接触影         body.h-house .pm-lintel 的 box-shadow 第一段（落在门楣之外）
     · 定位菱钉           .pm-lintel__in::before（3px，纯装饰伪元素，不进读屏树）

   原先门楣自带一条三层铜轨（1px #5E4520 / 1px #D3B474 / 1px #6E5428）与一排齿饰
   （page-shell §3 的 ::after）。本次把铜轨收成 1px 铜线、后接 3px 接触影；齿饰是
   既有装饰，原样保留，两者都不占门楣高度（64 / 56 一分未变）。
   ===================================================================== */

/* ---------- A. 承梁（两态共用骨架） ---------- */
body.h-house .pm-lintel {
  background:
    /* 下沿 1px 铜线：最上层，压住木纹底边 */
    linear-gradient(90deg, rgb(198 163 108 / 0) 0, rgb(198 163 108 / .55) 8%, rgb(211 180 116 / .95) 50%, rgb(198 163 108 / .55) 92%, rgb(198 163 108 / 0) 100%) bottom center / 100% 1px no-repeat,
    /* 梁面竖向受光（原有层） */
    linear-gradient(180deg, rgb(255 230 180 / .06) 0, transparent 40%, rgb(0 0 0 / .25) 100%),
    /* 木纹压暗（原有层） */
    linear-gradient(rgb(18 10 6 / .5), rgb(18 10 6 / .5)),
    /* 胡桃木纹位图（原有层，不引新图） */
    url("../assets/house/walnut.webp") 0 0 / 512px 512px,
    #2A1C12;
  /* 第一段是 3px 接触影（替换原来的三层铜轨），第二段保留原有的房间落影 */
  box-shadow: 0 3px 0 rgb(0 0 0 / .22), 0 14px 22px -10px rgb(0 0 0 / .7);
}

/* 上沿 1px 细亮边 */
body.h-house .pm-lintel::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, rgb(246 230 180 / 0) 0, rgb(246 230 180 / .42) 12%, rgb(255 244 214 / .58) 50%, rgb(246 230 180 / .42) 88%, rgb(246 230 180 / 0) 100%);
  pointer-events: none;
}

/* 铜线中央的定位菱钉：3px、纯装饰（伪元素，天然不进读屏树），不表示通知或完成 */
.pm-lintel__in {
  position: relative;
}
.pm-lintel__in::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 3px;
  height: 3px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--pm-brass-hi);
  box-shadow: 0 0 0 1px rgb(94 69 32 / .55);
  pointer-events: none;
}

/* 梦态：梁面转月蓝，前后两道薄边（前 = 顶亮边，后 = 下沿），铜线与菱钉撤掉 */
html[data-state="dream"] body.h-house .pm-lintel {
  background:
    linear-gradient(90deg, rgb(181 214 213 / 0) 0, rgb(181 214 213 / .40) 8%, rgb(214 238 237 / .72) 50%, rgb(181 214 213 / .40) 92%, rgb(181 214 213 / 0) 100%) bottom center / 100% 1px no-repeat,
    linear-gradient(180deg, rgb(255 255 255 / .05) 0, rgb(255 255 255 / 0) 30%, rgb(0 0 0 / .22) 100%),
    linear-gradient(180deg, #294852 0, #1F3A44 46%, #172D34 100%),
    #172D34;
  box-shadow: 0 3px 0 rgb(0 0 0 / .25), 0 14px 22px -12px rgb(0 0 0 / .6);
}
html[data-state="dream"] body.h-house .pm-lintel::before {
  background: linear-gradient(90deg, rgb(181 214 213 / 0) 0, rgb(181 214 213 / .34) 12%, rgb(214 238 237 / .50) 50%, rgb(181 214 213 / .34) 88%, rgb(181 214 213 / 0) 100%);
}
html[data-state="dream"] .pm-lintel__in::before {
  display: none;
}

/* ---------- B / C 已停用（2026-10-21）----------
   这里原来是「醒侧六块独立铜牌 + 梦侧冷青书签」那套：每项一枚切角铜框、
   独立深绿内板、当前项整块珐琅加金线。用户判定设计不合格，顶栏还原为
   Claude R3 那版（styles/page-shell.css 191–220 行的 .pm-lintel / .pm-nav）：
   透明底、hover 微亮、当前项一条 3px 金色光条。
   铜牌那套实现仍留在 styles/components/c-002.css 与 c-003.css 里，未删除，
   需要时重新引入即可。 */

/* ---------- §4.5 narrow drawer (C-009 contract, shell fallback) ----------
   page-shell.css hides nav.pm-nav below 900px and shows .pm-menubtn; this is the
   panel that button opens. Every rule is scoped by [data-shell-drawer] so the
   component sheet (components/c-009.css) can style the same class names on a
   page that links it without a second, competing drawer. Colours are tokens. */
.pm-drawer[data-shell-drawer] {
  position: fixed;
  inset: 0;
  /* Above the 60 door layer, below the 70 skip link. */
  z-index: 65;
  display: block;
}

.pm-drawer[data-shell-drawer][hidden] { display: none; }

/* The layer is the mask: it carries the dim and owns the outside click. */
.pm-drawer[data-shell-drawer]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pm-lintel);
  opacity: .62;
}

html.pm-drawer-open,
html.pm-drawer-open body { overflow: hidden; }

.pm-drawer__in {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  display: grid;
  grid-auto-rows: min-content;
  gap: var(--pm-s-3);
  width: min(320px, 86vw);
  max-width: 100%;
  padding: var(--pm-s-5) var(--pm-s-5) var(--pm-s-6);
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--pm-ink);
  background: var(--pm-card);
  border-left: 1px solid var(--pm-line);
  box-shadow: var(--pm-e-overlay);
}

.pm-drawer[data-shell-drawer]:not([hidden]) .pm-drawer__in {
  animation: pm-shell-drawer-in var(--pm-t-move) cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes pm-shell-drawer-in {
  from { transform: translateX(100%); }
  to { transform: none; }
}

.pm-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pm-s-3);
  padding-bottom: var(--pm-s-3);
  border-bottom: 1px solid var(--pm-line);
}

.pm-drawer__head b {
  font: 600 var(--pm-fs-sm)/1 var(--pm-font-sans);
  letter-spacing: .12em;
  color: var(--pm-ink-2);
}

.pm-drawer__close {
  box-sizing: border-box;
  min-width: 36px;
  min-height: 36px;
  padding: 0 var(--pm-s-3);
  color: var(--pm-ink-2);
  background: transparent;
  border: 1px solid var(--pm-line);
  border-radius: var(--pm-r-ctl);
  font: 600 var(--pm-fs-sm)/1 var(--pm-font-sans);
  cursor: pointer;
}

.pm-drawer__nav {
  display: grid;
  gap: var(--pm-s-2);
  margin-top: var(--pm-s-2);
}

.pm-drawer__item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--pm-s-4);
  color: var(--pm-ink);
  background: var(--pm-paper-2);
  border: 1px solid var(--pm-line);
  border-radius: var(--pm-r-ctl);
  font: 600 var(--pm-fs-ui)/1.2 var(--pm-font-serif);
  text-decoration: none;
}

.pm-drawer__item[aria-current="page"] {
  color: var(--pm-lintel-ink);
  background: var(--pm-lintel);
  border-color: var(--pm-lintel);
}

.pm-drawer__item:focus-visible,
.pm-drawer__close:focus-visible {
  outline: 2px solid var(--pm-accent);
  outline-offset: 2px;
}

/* The primary navigation is back: the drawer is not part of that layout. */
@media (min-width: 900px) {
  .pm-drawer[data-shell-drawer] { display: none; }
}

html.pm-motion-off .pm-drawer[data-shell-drawer]:not([hidden]) .pm-drawer__in {
  animation-name: pm-shell-drawer-fade;
}

@media (prefers-reduced-motion: reduce) {
  .pm-drawer[data-shell-drawer]:not([hidden]) .pm-drawer__in {
    animation-name: pm-shell-drawer-fade;
    animation-duration: 80ms;
  }
}

@keyframes pm-shell-drawer-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 公开站是单文档：栏目标签只是切视图的把手，不是另一份页面。
   关掉系统级的"拖链接"行为——鼠标稍一挪动就把标签拖出去变新标签页，
   这是用户明确点名的毛病（拖拽在 Chromium 里由 -webkit-user-drag 控制，
   JS 侧另有 dragstart 兜底拦住一切 hash 链接）。 */
.pm-nav a,
.pm-brand,
.pm-foot a,
.pm-drawer__item,
.pm-drawer a {
  -webkit-user-drag: none;
  user-select: none;
}