/* ==========================================================================
   hobbies.css · 热爱专题横向展廊（man-city.html / red-bull-racing.html）· v4
   --------------------------------------------------------------------------
   两页共享本文件。每页是一条横向图片轨道 + 控制栏，不再有纵向章节与介绍文案。

   作用域：<body class="hobby hobby--city"> / <body class="hobby hobby--racing">。
   色板只作用于专题区块；顶栏、页脚、命令面板继续用 tokens.css 的站点语义变量，
   所以深浅主题切换在专题页仍然有效。

   三条硬约束（来自操作方案 §1 / §3 / §11）：
     1. 页面上没有自写的图片介绍、故事、赛事名、日期或情绪解读。
        轨道里只有图片、序号和功能控件；原图里的文字与签名原样保留。
     2. 照片完整呈现。画框用 contain，绝不用 cover 截取画面；
        也不对图片做缩放式入场（会切边）。
     3. 横向浏览是基本能力，不依赖脚本、不依赖动效门控。
        没有 JS 时轨道照样能左右滚、图片链接照样能打开原图。

   动效只做一件事：第一项外侧的装饰遮罩沿 x 退出（两页各一个主效果）。
   遮罩默认位于轨道外侧，不在可视范围内，因此无脚本 / 减少动效时什么都不缺。
   ========================================================================== */

/* ==========================================================================
   1. 作用域与色板
   ========================================================================== */

.hobby {
  --hb-max: 1440px;
  --hb-gutter: clamp(1.25rem, 3vw, 4rem);
  --hb-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* 轨道画框高度。
     桌面目标 58–68vh，但要给顶栏 64px + 专题栏 ~53px + 标题区 + 控制栏留出空间，
     否则控制栏会被挤到首屏之外（方案 §4.1 要求它与图片同屏可达）。
     用 vh 减去固定占用再取比例，短屏时不会溢出。 */
  --hb-chrome: 300px;
  --hb-stage-h: clamp(240px, calc((100vh - var(--hb-chrome)) * 0.92), 620px);
  --hb-gap: clamp(1rem, 2.4vw, 3rem);
}

.hobby-main { display: block; }

/* -------------------------------------------------- 曼城：BLUE MOON 蓝月
   浅色：冰蓝底 + 深海军蓝文字 + 少量天蓝线条
   深色：压暗的蓝底 + 清楚的浅色文字 */
body.hobby--city {
  --hb-field: #eaf4fa;
  --hb-field-2: #cfe6f4;
  --hb-ink: #061c36;
  --hb-ink-soft: #2a4a68;
  --hb-accent: #0b6ba8;
  --hb-line: rgba(6, 28, 54, 0.16);
  --hb-on-accent: #ffffff;
  --hb-radius: 12px;
  --hb-shadow: 0 18px 44px -26px rgba(6, 28, 54, 0.5);
  /* 背景那层静态径向光：只在图片之外，不覆盖原图 */
  --hb-glow: radial-gradient(60% 46% at 22% 8%, rgba(152, 197, 232, 0.5), transparent 68%);
}

[data-theme="dark"] body.hobby--city {
  --hb-field: #08243c;
  --hb-field-2: #0d2b45;
  --hb-ink: #eaf4fa;
  --hb-ink-soft: #a9c6dc;
  --hb-accent: #8ccbf0;
  --hb-line: rgba(234, 244, 250, 0.18);
  --hb-on-accent: #04131f;
  --hb-shadow: 0 24px 56px -28px rgba(0, 0, 0, 0.85);
  --hb-glow: radial-gradient(60% 46% at 22% 8%, rgba(29, 92, 134, 0.55), transparent 68%);
}

/* --------------------------------------- 赛车：CHASE THE LIMIT 向极限靠近
   深色：近黑 + 深蓝 + 白字 + 少量红线
   浅色：中性浅底 + 深字，保留红色强调 */
body.hobby--racing {
  --hb-field: #070a10;
  --hb-field-2: #101b34;
  --hb-ink: #f4f6f8;
  --hb-ink-soft: #9aa8ba;
  --hb-accent: #e5233d;
  --hb-line: rgba(244, 246, 248, 0.16);
  --hb-on-accent: #ffffff;
  --hb-radius: 6px;          /* 赛车页画框更利落：4–8px */
  --hb-shadow: 0 26px 64px -32px rgba(0, 0, 0, 0.9);
  --hb-glow: radial-gradient(58% 44% at 18% 6%, rgba(16, 27, 52, 0.9), transparent 70%);
  --hb-gap: clamp(0.875rem, 2vw, 2.25rem);   /* 赛车页间距更紧：28–36px */
}

[data-theme="light"] body.hobby--racing {
  --hb-field: #f4f6f8;
  --hb-field-2: #e6ebf1;
  --hb-ink: #070a10;
  --hb-ink-soft: #4a5566;
  --hb-accent: #b3152b;
  --hb-line: rgba(7, 10, 16, 0.16);
  --hb-on-accent: #ffffff;
  --hb-shadow: 0 18px 44px -26px rgba(7, 10, 16, 0.3);
  --hb-glow: radial-gradient(58% 44% at 18% 6%, rgba(200, 208, 219, 0.6), transparent 70%);
}

/* ==========================================================================
   2. 专题栏（紧贴站点顶栏下方）
   ========================================================================== */

.hb-bar { border-bottom: 1px solid var(--border); }

.hb-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 52px;
  flex-wrap: wrap;
  padding-block: var(--space-2);
}

.hb-bar__back {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.3em 0.7em;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.hb-bar__back:hover { color: var(--text); border-color: var(--border-strong); }

.hb-bar__links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
  flex-wrap: wrap;
}
.hb-bar__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.75em;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.hb-bar__link:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface); }

/* ==========================================================================
   3. 展廊本体
   ========================================================================== */

/* 整块展廊：色场从这里开始，页面其余部分保持站点背景 */
.hb-exhibit {
  position: relative;
  padding-block: clamp(0.5rem, 1.4vw, 1.25rem) clamp(0.75rem, 1.6vw, 1.25rem);
  background: var(--hb-field);
  color: var(--hb-ink);
  /* 视口背景光：只在图片之外，图片本身不叠任何滤镜 */
  background-image: var(--hb-glow);
  background-repeat: no-repeat;
  overflow: clip;           /* 裁掉装饰遮罩的越界，避免横向滚动条 */
  isolation: isolate;
}

/* 专题头：只有专题名与功能链接，不放图片介绍 */
.hb-exhibit__head {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
  max-width: var(--hb-max);
  margin-inline: auto;
  padding-inline: var(--hb-gutter);
  padding-bottom: clamp(0.5rem, 1.2vw, 0.875rem);
}

.hb-exhibit__title {
  margin: 0;
  font-size: clamp(1.5rem, 1.1rem + 2.6vw, 3rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.hb-exhibit__meta {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hb-ink-soft);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- 横向轨道
   原生 overflow-x；不接管页面纵向滚动，也不写 touch-action 限制。 */
.hb-rail {
  display: flex;
  align-items: center;
  gap: var(--hb-gap);
  max-width: 100%;
  padding: clamp(0.5rem, 1.2vw, 1rem) var(--hb-gutter) clamp(0.875rem, 1.8vw, 1.5rem);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--hb-gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--hb-line) transparent;
  overscroll-behavior-x: contain;   /* 不把横向滚动传给父级/浏览器返回手势之外 */
}

.hb-rail::-webkit-scrollbar { height: 8px; }
.hb-rail::-webkit-scrollbar-track { background: transparent; }
.hb-rail::-webkit-scrollbar-thumb {
  background: var(--hb-line);
  border-radius: var(--radius-full);
}

/* 键盘聚焦轨道时给一个清楚但不喧哗的轮廓 */
.hb-rail:focus-visible {
  outline: 2px solid var(--hb-accent);
  outline-offset: -2px;
}

/* ---------------------------------------------------------- 画框 */
.hb-panel {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  scroll-snap-align: center;
  border-radius: var(--hb-radius);
  background: color-mix(in srgb, var(--hb-ink) 6%, transparent);
  box-shadow: var(--hb-shadow);
  /* 高度固定、宽度按图片比例算，见下方 --hb-ar */
  height: var(--hb-stage-h);
  /* 必须裁切：入场遮罩动画结束后停在画框两侧，
     没有 overflow 会盖到相邻画框上（实测：灰色遮罩压住了第二张照片）。
     border-radius 也让遮罩与照片圆角一致。 */
  overflow: hidden;
}

/* 画框宽度 = 高度 × 宽高比。每项在 HTML 里写 --hb-ar 与 data-ar。
   不能用 cover 填满：宽高比已经等于原图比例，contain 只是兜底。 */
.hb-panel {
  width: calc(var(--hb-stage-h) * var(--hb-ar, 1.5));
}

/* 竖幅照片不要铺成一整屏高一整屏宽，按比例自然会窄；这里只兜一个上限 */
.hb-panel { max-width: min(78vw, calc(var(--hb-stage-h) * 2.2)); }
@media (max-width: 767px) {
  /* 手机：画框统一 86vw，高度按「该图自身比例」算，
     这样画框不会比照片高一截、把照片顶到中间留白。
     上限 62vh，竖幅照片也不会撑满整屏。 */
  .hb-panel {
    width: 86vw;
    max-width: 86vw;
    height: min(62vh, calc(86vw / var(--hb-ar, 1.5)));
    min-height: 0;
  }
  /* 竖幅被 62vh 封顶后画框比照片矮。图片必须直接受画框高度约束：
     只给 .hb-panel__link 加 max-height 不生效，因为它自己 height:100%
     继承了画框高度，图片仍按宽度铺开（实测溢出 124%）。
     这里改用「宽高都 auto + 双 max-」让浏览器按 contain 规则自己收。 */
  /* 关键：p li nk 用 grid，默认 grid 项目会被拉伸到行高，
     图片的 max-height:100% 因此解析不到一个确定高度。
     这里把 grid 行改成 minmax(0,1fr) 并让项目居中，
     图片才能真正按画框高度收缩（实测竖幅从 584px 溢收回 471px 内）。 */
  .hb-panel__link {
    height: 100%;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    justify-items: center;
  }
  /* 手机竖幅：画框高度被 62vh 封顶后，照片比画框高。
     试过 max-height:100% / height:100% / grid 行约束，都因为父级是
     弹性高度而解析不到确定值（实测图片仍是 584px，画框 471px）。
     最终用绝对定位：让图片直接铺满画框的包含块，再用 object-fit: contain
     把整幅画面缩进去 —— 完整呈现、不裁切，也不会溢出画框。 */
  .hb-panel__link {
    position: relative;
  }
  .hb-panel__link picture { display: contents; }
  .hb-panel__link img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
  }
}

.hb-panel__link {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  cursor: zoom-in;
}

.hb-panel__link img {
  display: block;
  width: 100%;
  height: 100%;
  /* contain：任何情况下都不裁画面。比例本来就等于原图，
     这条是给「取整误差 / 极窄屏」兜底，保证永不切边。 */
  object-fit: contain;
  object-position: center;
  border-radius: inherit;
  background: transparent;
}

/* 竖幅在固定高度画框里会留出左右空白，这是有意的呼吸，不是缺图 */
body.hobby--city .hb-panel { background: color-mix(in srgb, var(--hb-ink) 5%, transparent); }

/* 当前项：边界清楚，相邻项仍然可见 */
.hb-panel.is-current {
  outline: 1px solid var(--hb-accent);
  outline-offset: 3px;
}

/* 图片加载失败时，画框不塌陷；序号仍可读 */
.hb-panel__fallback {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--hb-ink-soft);
  text-align: center;
}

/* ==========================================================================
   4. 入场遮罩（每页一个主效果）
   --------------------------------------------------------------------------
   遮罩默认定位在图片左侧之外（translateX(-101%) 配合外层 overflow:clip），
   所以没有 html.hb-motion 时它根本不在画面里，照片本来就是完整的。
   只作用于第一项，不给其余 24 张逐一套动画。
   ========================================================================== */

.hb-entry {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background: var(--hb-field-2);
  transform: translateX(-101%);
}

/* 曼城：横向光幕，沿 x 退出 */
html.hb-motion .hb-panel--entry .hb-entry {
  animation: hb-veil-out 560ms var(--hb-ease) both;
}
@keyframes hb-veil-out {
  0%   { transform: translateX(0); opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translateX(101%); opacity: 0; }
}

/* 赛车：斜切碎片，两片沿 x 离开 */
html.hb-motion .hb-panel--entry .hb-entry--a {
  animation: hb-slice-a 540ms var(--hb-ease) both;
}
html.hb-motion .hb-panel--entry .hb-entry--b {
  animation: hb-slice-b 600ms var(--hb-ease) both;
  animation-delay: 60ms;
}
/* 结束时用 opacity 归零，配合画框 overflow:hidden，
   保证遮罩绝不会在动画后残留到相邻画框上。 */
@keyframes hb-slice-a {
  0%   { transform: translateX(0) skewX(0deg); opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translateX(-118%) skewX(-7deg); opacity: 0; }
}
@keyframes hb-slice-b {
  0%   { transform: translateX(0) skewX(0deg); opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translateX(118%) skewX(7deg); opacity: 0; }
}

/* ==========================================================================
   5. 控制栏
   ========================================================================== */

.hb-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: var(--hb-max);
  margin-inline: auto;
  padding-inline: var(--hb-gutter);
  flex-wrap: wrap;
}

.hb-controls__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  min-height: 42px;
  min-width: 42px;
  padding: 0.5em 1em;
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--hb-ink);
  background: color-mix(in srgb, var(--hb-ink) 7%, transparent);
  border: 1px solid var(--hb-line);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.hb-controls__btn:hover { background: color-mix(in srgb, var(--hb-ink) 14%, transparent); border-color: var(--hb-accent); }
.hb-controls__btn[disabled] { opacity: 0.36; cursor: default; }
.hb-controls__btn[disabled]:hover { background: color-mix(in srgb, var(--hb-ink) 7%, transparent); border-color: var(--hb-line); }

/* 序号：01 / 11，等宽数字，避免翻页时抖动 */
.hb-controls__count {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--hb-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 5.5ch;
  text-align: center;
}
.hb-controls__count b { color: var(--hb-accent); font-weight: 800; }

/* 位置条：由脚本按真实 scrollLeft 写入 --hb-progress */
.hb-progress {
  flex: 1 1 160px;
  min-width: 120px;
  height: 2px;
  background: var(--hb-line);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.hb-progress::after {
  content: "";
  display: block;
  height: 100%;
  width: calc(var(--hb-progress, 0) * 100%);
  background: var(--hb-accent);
  /* 反向浏览也要跟手：短过渡，不是"只增"棘轮 */
  transition: width 120ms linear;
}

/* 极简操作提示：只出现一次，且不占主操作位 */
.hb-hint {
  font-size: var(--text-xs);
  color: var(--hb-ink-soft);
  letter-spacing: 0.04em;
}
@media (max-width: 640px) {
  /* 手机上"Shift + 滚轮"没有意义，只留滑动提示 */
  .hb-hint--wheel { display: none; }
}

/* 序号导航：小圆点按钮，数量与图片数一致 */
.hb-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  max-width: var(--hb-max);
  margin: clamp(0.75rem, 1.6vw, 1.25rem) auto 0;
  padding-inline: var(--hb-gutter);
}
.hb-dot {
  width: 22px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--hb-ink) 22%, transparent);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.hb-dot:hover { background: color-mix(in srgb, var(--hb-ink) 45%, transparent); }
.hb-dot[aria-current="true"] {
  background: var(--hb-accent);
  transform: scaleY(2);
}
/* 触控热区：视觉只有 3px 高，可点范围补到 24px */
.hb-dot::before {
  content: "";
  position: absolute;
  inset: -11px -2px;
}
.hb-dot { position: relative; }

/* ==========================================================================
   6. 大图（原生 dialog）—— 无图注
   ========================================================================== */

.hb-lightbox {
  width: min(96vw, 1400px);
  max-width: none;
  max-height: 94dvh;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: #05070c;
  color: #f4f6f8;
  overflow: hidden;
}
.hb-lightbox::backdrop {
  background: rgba(4, 6, 12, 0.86);
}
.hb-lightbox__figure {
  margin: 0;
  display: grid;
  place-items: center;
  max-height: 94dvh;
}
.hb-lightbox__figure img {
  display: block;
  width: auto;
  height: auto;
  max-width: 96vw;
  max-height: calc(94dvh - 8px);
  /* 大图同样 contain：完整画面，不裁签名与边缘 */
  object-fit: contain;
  background: #05070c;
}
.hb-lightbox__ui {
  position: absolute;
  inset: var(--space-3) var(--space-3) auto auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.hb-lightbox__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 1rem;
  color: #f4f6f8;
  background: rgba(10, 14, 22, 0.75);
  border: 1px solid rgba(244, 246, 248, 0.24);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.hb-lightbox__btn:hover { background: rgba(30, 38, 52, 0.95); border-color: rgba(244, 246, 248, 0.5); }
.hb-lightbox__btn[disabled] { opacity: 0.35; cursor: default; }
.hb-lightbox__count {
  margin-inline-end: auto;
  padding-inline: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: #b9c3d1;
  font-variant-numeric: tabular-nums;
}
.hb-lightbox__nav {
  position: absolute;
  inset: 50% var(--space-3) auto;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
}
.hb-lightbox__nav .hb-lightbox__btn { pointer-events: auto; }
.hb-lightbox:not([open]) { display: none; }

/* ==========================================================================
   7. 轻量页尾
   ========================================================================== */

.hb-foot {
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--hb-field);
  color: var(--hb-ink-soft);
  border-top: 1px solid var(--hb-line);
}
.hb-foot__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: var(--hb-max);
  margin-inline: auto;
  padding-inline: var(--hb-gutter);
  font-size: var(--text-xs);
}

/* ==========================================================================
   8. 响应式
   ========================================================================== */

@media (max-width: 1023px) {
  .hobby { --hb-stage-h: clamp(280px, 58vh, 520px); --hb-gap: clamp(0.875rem, 2vw, 1.5rem); }
}

@media (max-width: 767px) {
  /* 手机保持横向：更紧的间距、强制吸附，露出下一张的一部分 */
  .hb-rail {
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-inline: 20px;
    scroll-padding-inline: 20px;
  }
  .hobby { --hb-gap: 12px; }
  .hb-exhibit { padding-block: var(--space-4) var(--space-5); }
  .hb-exhibit__head { align-items: center; }
  .hb-exhibit__title { font-size: clamp(1.5rem, 1.1rem + 4vw, 2.25rem); }
  .hb-controls { gap: var(--space-2); }
  .hb-controls__count { margin-inline-start: auto; }
  .hb-dots { padding-inline: 20px; }
}

/* 横屏 / 短屏：缩小图片区高度，让控制栏仍在可到达范围内 */
@media (max-height: 560px) {
  .hobby { --hb-stage-h: clamp(200px, 52vh, 320px); }
  .hb-exhibit { padding-block: var(--space-2) var(--space-3); }
  .hb-exhibit__title { font-size: clamp(1.25rem, 1rem + 2vw, 2rem); }
}

/* ==========================================================================
   9. 降级：无脚本 / 减少动态效果 / 强制配色 / 打印
   ========================================================================== */

/* 无脚本时按钮没有意义，不该占据主操作位 */
html:not(.hb-js) .hb-controls,
html:not(.hb-js) .hb-dots { display: none; }
/* 无脚本时序号仍要可见：轨道顶部保留一行纯文本序号 */
html:not(.hb-js) .hb-exhibit__meta { display: flex; }

@media (prefers-reduced-motion: reduce) {
  /* 去掉入场、位移与平滑滚动；横向浏览保持有效 */
  .hb-entry { display: none; }
  .hb-rail { scroll-behavior: auto; }
  .hb-progress::after { transition: none; }
  .hb-dot { transition: none; }
  .hb-dot[aria-current="true"] { transform: none; }
}

@media (forced-colors: active) {
  .hb-entry { display: none; }
  .hb-panel { border: 1px solid CanvasText; }
  .hb-panel.is-current { outline: 2px solid Highlight; }
}

@media print {
  .hb-entry, .hb-controls, .hb-dots, .hb-lightbox { display: none !important; }
  .hb-rail { overflow: visible; flex-wrap: wrap; }
  .hb-panel { height: auto; width: 100%; max-width: 100%; }
}