/* 🐕 小狗的家 — pagebar.css（2026-09-28 拆页，配三代目玄关）
   拆页以后每一页顶上的那一栏：左边「‹ 玄关」回玄关正门（/，10/6 🎫#48 起；原来是「‹ 小狗的家」回走廊 /#home）；中间是这间房的小门和名字；
   右边风铃，点一下叮一声、摆完回小狗的家的走廊（/#home，fuurin.js）。
   颜色、门型跟玄关走廊里那扇门一样：留言 玫瑰粉 / 记账 琥珀·方顶 / 健康 薰衣草·圆拱 / 食谱 杏橘 / 备忘 奶油黄 / 阳台 叶绿·圆拱 / 基金 焦糖·圆门 / 日历 晴空蓝·方顶（10/6 🎫#12）。
   字体：先用家里的 Home Hand（rooms.css 里的 @font-face，字表 fonts/hand-strings.txt「顶栏」一段：小狗的家 + 八个房间名；地址带 ?v=，换字体手机马上拿新的），
   再兜底玄关的文楷子集 Portal Hand（/portal/fonts/wenkai/，文件名没 ?v=，10/6 日历上线时手机拿着旧子集、「历」掉成黑体，所以不再靠它）；
   子集里没有的字会自动掉到后面的系统字体，不会坏。
   联动：app.js 的 setPagebar(page) 写 body[data-page] 和名字；fuurin.js 把风铃挂在这一栏的右边。
   字表：「玄关」也在 fonts/hand-strings.txt「顶栏」一段。 */
@font-face { font-family:'Portal Hand'; font-style:normal; font-weight:400; font-display:swap; src:url('/portal/fonts/wenkai/portal-regular.woff2') format('woff2'); }
@font-face { font-family:'Portal Hand'; font-style:normal; font-weight:700; font-display:swap; src:url('/portal/fonts/wenkai/portal-bold.woff2') format('woff2'); }

body { --room:#f2ab7c; --room-tint:#fde4d0; --ink:#6b5138; }
body[data-page="notes"]   { --room:#eeaa9c; --room-tint:#fbe4de; }
body[data-page="ledger"]  { --room:#ebbb6c; --room-tint:#fbecd0; }
body[data-page="health"]  { --room:#c9bde0; --room-tint:#efeaf7; }
body[data-page="recipes"] { --room:#f3ae7b; --room-tint:#fde6d2; }
body[data-page="todos"]   { --room:#eed48f; --room-tint:#fbf1d4; }
body[data-page="garden"]  { --room:#bfd29d; --room-tint:#eaf1dc; }
body[data-page="funds"]   { --room:#d9b08a; --room-tint:#f4e6d7; }
body[data-page="calendar"] { --room:#a9c6e6; --room-tint:#e6effa; }

.pagebar { position:sticky; top:0; z-index:100; height:60px; display:flex; align-items:center; padding:0 14px;
  background:color-mix(in srgb, var(--room-tint) 88%, #fffdf8);
  border-bottom:1px solid rgba(107,81,56,.12); box-shadow:0 10px 22px -18px rgba(107,81,56,.55);
  transition:background-color .4s; }
.pagebar .back { position:relative; z-index:1; display:inline-flex; align-items:center; gap:1px; height:34px; padding:0 14px 0 8px;
  border-radius:999px; background:rgba(255,253,248,.88); border:1px solid rgba(107,81,56,.14);
  color:#87705a; text-decoration:none; font-family:'Home Hand', 'Portal Hand', 'PingFang SC', 'Noto Sans CJK SC', sans-serif;
  font-size:14px; letter-spacing:1px; -webkit-tap-highlight-color:transparent; }
.pagebar .back svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.pagebar-title { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); display:flex; align-items:center; gap:9px; pointer-events:none; }
.mini-door { position:relative; flex-shrink:0; width:22px; height:29px; border:1.8px solid var(--ink);
  border-radius:11px 11px 3px 3px / 8px 8px 3px 3px;
  background:linear-gradient(168deg, color-mix(in srgb, var(--room) 58%, #fff) 0%, var(--room) 92%); }
.mini-door::after { content:''; position:absolute; right:3px; top:56%; width:3.4px; height:3.4px; border-radius:50%; background:var(--ink); }  /* 门把 */
body:is([data-page="ledger"], [data-page="calendar"]) .mini-door { border-radius:4px 4px 3px 3px; }
body[data-page="health"] .mini-door, body[data-page="garden"] .mini-door { border-radius:11px 11px 3px 3px; }
body[data-page="funds"] .mini-door { width:28px; height:28px; border-radius:50%; }
body[data-page="funds"] .mini-door::after { right:4px; top:46%; }
.pagebar-name { position:relative; z-index:0; font-family:'Home Hand', 'Portal Hand', 'PingFang SC', 'Noto Sans CJK SC', sans-serif;
  font-weight:700; font-size:20px; letter-spacing:3px; color:#4f3b2b; line-height:1.3; }
/* 名字底下一笔门色的笔刷（和玄关同一个笔刷形状） */
.pagebar-name::before { content:''; position:absolute; z-index:-1; left:-5px; right:-3px; bottom:-1px; height:.6em;
  background:color-mix(in srgb, var(--room) 70%, transparent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M4 13.5 C 30 9.5, 70 10.5, 110 10 C 145 9.6, 178 8.8, 195 10.6 C 199 11.1, 199.5 15.2, 195.5 16 C 170 17.8, 140 16.6, 110 17.2 C 75 17.8, 35 18.8, 8 18.2 C 2.5 18, 1.2 14.8, 4 13.5 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M4 13.5 C 30 9.5, 70 10.5, 110 10 C 145 9.6, 178 8.8, 195 10.6 C 199 11.1, 199.5 15.2, 195.5 16 C 170 17.8, 140 16.6, 110 17.2 C 75 17.8, 35 18.8, 8 18.2 C 2.5 18, 1.2 14.8, 4 13.5 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
/* 风铃从这一栏的上沿挂下来（fuurin.js 找不到旧的 .navbar-top 时挂到 .pagebar 末尾） */
.pagebar .fuurin-wrap { position:absolute; right:16px; top:0; margin:0; }