.ad-tool-rail {
  display: none;
}

.ad-tool-shell {
  display: grid;
  grid-template-columns: var(--tool-ad-columns, minmax(0, 1fr));
  grid-template-rows: auto minmax(0, 1fr);
  height: 100dvh;
}

.ad-tool-shell > .site-header {
  grid-column: 1 / -1;
}

.ad-tool-shell > #editor,
.ad-tool-shell > #board-app {
  height: 100%;
}

@media (min-width: 1200px) and (min-height: 360px) {
  :root:not([data-layout=mobile]) {
    --tool-ad-width: 200px;
    --tool-ad-height: 200px;
    --tool-ad-leading-space: 17px;
    --tool-theme-swatch-inset: calc((var(--theme-switch-button-width) - var(--theme-switch-swatch-width)) / 2);
    --tool-ad-track: calc(var(--tool-ad-width) + var(--tool-ad-leading-space) + var(--tool-theme-swatch-inset));
    --tool-ad-columns: minmax(0, 1fr) var(--tool-ad-track);
  }

  :root[data-layout=pc]:has(.site-header > .tool-header-nav:not([hidden])) {
    scrollbar-gutter: auto;
  }

  :root:not([data-layout=mobile]) .ad-tool-shell {
    --tool-ad-columns: minmax(0, 1fr) calc(var(--tool-ad-track) + var(--tool-inline-gutter));
  }

  :root:not([data-layout=mobile]) .ad-tool-rail {
    display: block;
    min-block-size: 0;
    padding-block: 16px;
    padding-inline-start: var(--tool-ad-leading-space);
    /* Let the scrollbar use the outer page gutter without moving either slot. */
    margin-inline-end: calc(0px - var(--tool-inline-gutter));
    overflow-y: auto;
    scrollbar-gutter: stable;
    box-shadow: inset 1px 0 var(--edge, #8886);
  }

  :root:not([data-layout=mobile]) .ad-tool-shell > .ad-tool-rail {
    margin-inline-end: 0;
  }

  .ad-tool-title {
    margin: 0 0 16px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.14em;
    color: var(--muted, inherit);
  }

  .ad-space {
    inline-size: var(--tool-ad-width);
    max-inline-size: 100%;
    min-block-size: var(--tool-ad-height);
    outline: 1px solid var(--edge, #8886);
    outline-offset: -1px;
  }

  .ad-tool-divider {
    inline-size: var(--tool-ad-width);
    max-inline-size: 100%;
    margin: 16px 0;
    border: 0;
    border-block-start: 1px solid var(--edge, #8886);
  }
}

@media (min-width: 1440px) and (min-height: 360px) {
  :root:not([data-layout=mobile]) {
    --tool-ad-width: 300px;
    --tool-ad-height: 250px;
  }
}