/**
 * [INPUT]: 现代无衬线工程字体栈、ToolMarketingShell 的 data 标记、工具页内容锚点、ToolWorkbenchFrame 与 Header action slot 标记
 * [OUTPUT]: 全局 Tailwind CSS 到达前的字体、排版、工具页正文与工具壳首屏几何布局（单列，无侧边栏；移动 Header 与可选桌面顶栏按断点显隐）；锁定异步 Header 动作槽位
 * [POS]: public 静态关键样式；锁定首屏视觉契约，不承载颜色、业务状态或交互逻辑。
 *        元素级重置放在 @layer base，只有带具体选择器的几何锁定规则保持不分层
 * [PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md
 */

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 800;
  font-display: optional;
  src: url("/fonts/nunito-latin-v32.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html,
body {
  margin: 0;
}

.site-shell-tool {
  --site-header-height: 4.25rem;
  --font-nunito:
    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: flex;
  font-family: var(--font-nunito);
  min-height: 100vh;
}

/* 预置重置放进 base 层：Tailwind 到达前照样生效，到达后让位给 utilities。
   不分层的规则会压过所有分层样式，标题的 text-* / font-* 与按钮的 text-xs 都会失效 */
@layer base {
  .site-shell-tool *,
  .site-shell-tool *::before,
  .site-shell-tool *::after {
    box-sizing: border-box;
  }

  .site-shell-tool :where(h1, h2, h3, h4, h5, h6, p) {
    margin: 0;
  }

  .site-shell-tool :where(h1, h2, h3, h4, h5, h6) {
    font-size: inherit;
    font-weight: inherit;
  }

  .site-shell-tool :where(button, input, select, textarea) {
    font: inherit;
  }
}

.site-shell-tool [data-workbench-slot="unified-header"] h2 {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-shell-tool > [data-tool-shell-main] {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
}

.site-shell-tool > [data-tool-shell-main] > main {
  flex: 1 1 0%;
  min-width: 0;
}

.site-shell-tool .tool-page-content {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: 90rem;
  padding-inline: 1.5rem;
  width: 100%;
}

.site-shell-tool > [data-tool-shell-main] > [data-tool-mobile-header] {
  box-sizing: border-box;
  display: block;
  min-height: 4.3125rem;
}

.site-shell-tool > [data-tool-shell-main] > [data-tool-desktop-header] {
  display: none;
}

.site-shell-tool [data-workbench-frame="tool"] {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
}

.site-shell-tool [data-workbench-slot="unified-header"] {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  height: 3.5rem;
  flex-shrink: 0;
  min-width: 0;
  padding-inline: 1rem;
}

.site-shell-tool [data-workbench-slot="unified-header"] > div {
  align-items: center;
  display: flex;
}

.site-shell-tool [data-workbench-slot="unified-header"] > div:first-child {
  gap: 0.5rem;
  min-width: 0;
}

.site-shell-tool [data-workbench-slot="unified-header"] > div:last-child {
  flex-shrink: 0;
  gap: 0.5rem;
}

.site-shell-tool [data-workbench-header-actions] {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 0.5rem;
  min-height: 2.75rem;
}

.site-shell-tool [data-workbench-header-slot] {
  align-items: center;
  display: flex;
  flex-shrink: 0;
}

.site-shell-tool [data-workbench-header-slot="credits"] {
  height: 2rem;
  justify-content: flex-end;
  min-width: 10rem;
}

.site-shell-tool [data-workbench-header-slot="user"] {
  height: 2.75rem;
  justify-content: flex-end;
  min-width: 4.5rem;
}

.site-shell-tool [data-workbench-header-slot] > * {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 39.999rem) {
  .site-shell-tool [data-workbench-header-slot="credits"],
  .site-shell-tool [data-workbench-header-slot="preferences"] {
    display: none;
  }

  .site-shell-tool [data-workbench-header-slot="user"] {
    height: 2.75rem;
    min-width: 2.75rem;
    width: 2.75rem;
  }

  .site-shell-tool [data-workbench-header-actions] {
    gap: 0.375rem;
  }

  .site-shell-tool [data-workbench-header-action] {
    height: 2.75rem;
    width: 2.75rem;
  }

  .site-shell-tool [data-workbench-header-action] > span {
    display: none;
  }
}

.site-shell-tool [data-workbench-slot="controls"],
.site-shell-tool [data-workbench-slot="stage"],
.site-shell-tool [data-workbench-slot="actions"] {
  box-sizing: border-box;
  min-width: 0;
}

.site-shell-tool [data-workbench-slot="stage"] {
  display: flex;
}

@media (min-width: 64rem) {
  .site-shell-tool {
    --site-header-height: 0px;
  }

  .site-shell-tool > [data-tool-shell-main] > [data-tool-mobile-header] {
    display: none;
  }

  .site-shell-tool > [data-tool-shell-main] > [data-tool-desktop-header] {
    display: flex;
    min-height: 4rem;
  }

  .site-shell-tool [data-workbench-frame="tool"] {
    grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100%;
    min-height: 0;
  }

  .site-shell-tool [data-workbench-slot="unified-header"] {
    grid-column: span 2 / span 2;
    grid-row: 1;
    height: 4rem;
    padding-inline: 1.5rem;
  }

  .site-shell-tool [data-workbench-slot="controls"] {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    overflow-y: auto;
  }

  .site-shell-tool [data-workbench-slot="stage"] {
    grid-column: 2;
    grid-row: 2 / span 2;
    min-height: 0;
  }

  .site-shell-tool [data-workbench-slot="actions"] {
    grid-column: 1;
    grid-row: 3;
  }
}

@media (min-width: 40rem) {
  .site-shell-tool .tool-page-content {
    padding-inline: 3rem;
  }

  .site-shell-tool [data-workbench-slot="unified-header"] > div {
    gap: 0.75rem;
  }

  .site-shell-tool [data-workbench-header-actions] {
    gap: 0.625rem;
  }

  .site-shell-tool [data-workbench-slot="unified-header"] h2 {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

@media (min-width: 48rem) {
  .site-shell-tool .tool-page-content {
    padding-inline: 4rem;
  }
}

@media (min-width: 64rem) {
  .site-shell-tool .tool-page-content {
    padding-inline: 5rem;
  }
}

@media (min-width: 64rem) and (min-height: 40rem) {
  .site-shell-tool .tool-page-workbench {
    height: calc(100svh - var(--site-header-height));
  }
}