/**
 * [INPUT]: Manrope 自托管字体、SiteShell 的 data 标记、工具页内容锚点、ToolWorkbenchFrame slot 标记
 * [OUTPUT]: 全局 Tailwind CSS 到达前的字体、排版、站点 Header 占位与工具页首屏几何布局
 * [POS]: public 静态关键样式；规则全部位于 @layer base，Tailwind utilities 到达后必然覆盖它（未分层样式会压过所有分层 utility）；锁定首屏视觉契约，不承载颜色、业务状态或交互逻辑；字体文件与 globals.css 同源
 * [PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md
 */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/manrope-latin-wght.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;
}

@layer base {
  html,
  body {
    margin: 0;
  }

  :root {
    --site-header-height: calc(4.25rem + env(safe-area-inset-top, 0px));
  }

  .site-shell {
    display: flex;
    flex-direction: column;
    font-family:
      Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    min-height: 100vh;
  }

  .site-shell *,
  .site-shell *::before,
  .site-shell *::after {
    box-sizing: border-box;
  }

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

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

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

  .site-shell > [data-site-header] {
    box-sizing: border-box;
    min-height: 4.25rem;
  }

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

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

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

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

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

  @media (min-width: 64rem) {
    .site-shell [data-workbench-frame="tool"] {
      grid-template-columns: minmax(312px, 372px) minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr) auto;
      height: 100%;
      min-height: 0;
    }

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

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

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

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

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

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

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