/* Design Skill Lab 设计方向实验室：外壳样式。只管 reset、切换过渡、顶部实验室横条与跳过链接；
   页面本体（含风格入口）完全由各风格文件（styles/*.css，按 html[data-style] 作用域）负责。 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* 切换风格时的过渡（支持 View Transitions 的浏览器） */
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: .45s; animation-timing-function: cubic-bezier(.22, .61, .21, 1);
}
::view-transition-old(root) { animation-name: dsl-out; }
::view-transition-new(root) { animation-name: dsl-in; }
@keyframes dsl-out { to { opacity: 0; transform: scale(.985); filter: blur(6px); } }
@keyframes dsl-in { from { opacity: 0; transform: translateY(14px) scale(1.01); filter: blur(6px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---- 实验室横条：每个风格顶上都有，链回新版站点，并给出全部方向的下拉（任何风格里都能到达任何方向）。
   配色取新版站点的墨色与纸色（docs/assets/site.css 的 --ink / --paper），不随风格变化。
   墨底上的文字：#f5f7f8 on #14171a = 16.7:1，#c9d0d6 on #14171a = 11.6:1；下拉边框 #7d858c on #1e2124 = 4.3:1（UI ≥ 3）（color_tools.py）。 */
.lab-bar {
  position: relative; z-index: 1000;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px;
  padding: 6px max(16px, calc((100% - 1440px) / 2 + 24px));
  background: #14171a; color: #f5f7f8; border-bottom: 3px solid #555c63;
  font: 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  letter-spacing: 0; text-transform: none;
}
.lab-bar a { color: #f5f7f8; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lab-bar a:hover { text-decoration-thickness: 2px; }
.lab-bar :focus-visible { outline: 2px solid #f5f7f8; outline-offset: 2px; }
.lab-bar-nav { display: flex; gap: 16px; white-space: nowrap; }
.lab-bar-note { margin: 0; flex: 1 1 320px; color: #c9d0d6; }
.lab-bar-note b { color: #f5f7f8; font-weight: 600; }
.lab-bar-pick { display: flex; align-items: center; gap: 8px; white-space: nowrap; color: #c9d0d6; }
.lab-bar select {
  font: inherit; color: #f5f7f8; background: #1e2124; border: 1px solid #7d858c; border-radius: 3px;
  padding: 3px 6px; min-height: 30px; max-width: 58vw; color-scheme: dark;
}
@media (max-width: 720px) {
  .lab-bar { gap: 2px 12px; font-size: 12.5px; }
  .lab-bar-nav { gap: 12px; }
  .lab-bar-note { order: 3; flex-basis: 100%; }
  .lab-bar-pick { margin-left: auto; font-size: 0; }   /* 窄屏只留下拉本身（它有 aria-label），省掉"方向"二字 */
  .lab-bar select { font-size: 12.5px; max-width: 42vw; }
}
.lab-skip {
  position: absolute; left: 12px; top: -60px; z-index: 1001;
  padding: 8px 14px; background: #14171a; color: #f5f7f8; font: 600 14px/1.4 system-ui, sans-serif; text-decoration: none;
}
.lab-skip:focus { top: 8px; }
/* 视觉上隐藏、读屏可见：结果条数播报，以及版式里没有可见大标题的风格的 h1 */
.lab-live, .lab-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* 安装命令等代码块：窄屏里换行而不是把整页撑宽（网格里的 pre 会按最长一行撑开所在列）。 */
#app pre { max-width: 100%; }
@media (max-width: 720px) {
  #app pre:not(.tm-banner) { white-space: pre-wrap; overflow-wrap: anywhere; }
}

/* A text input's own width follows the font's average glyph (20 of them by default), so a wide face pushed narrow
   screens sideways: found by CI on Linux, where the fallback faces are wider. An input may always shrink. */
input[type="search"], input[type="text"], input:not([type]) { min-width: 0; max-width: 100%; }