/* Bolster shell for concepts: the parts of the product's top bar and section sidebar that
   system/components/shell.css doesn't cover. Sizes measured on next.bolsterbuilt.com
   (Oct 2026). Semantic tokens only. Pairs with shell.js. */

@layer concept {
  /* ---------- top bar ---------- */
  /* logo sits in a cell as wide as the rail, so it lines up with the rail icons */
  .bs-logo {
    display: grid; place-items: center; flex: none; align-self: stretch;
    inline-size: var(--shell-rail-width);
    margin-inline-start: calc(var(--space-3) * -1);
    border-inline-end: var(--border-width-default) solid var(--color-line-chrome);
  }
  .bs-logo img { block-size: 1.75rem; inline-size: auto; }
  .bs-logo:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: -4px; }

  /* company switcher: 32 tall, 14px medium, 6px gap */
  .bs-company {
    display: inline-flex; align-items: center; gap: calc(var(--space-1) + var(--space-0-5)); flex: none;
    block-size: var(--control-height-sm);
    padding: 0 calc(var(--space-2) + var(--space-0-5));
    border: 0; border-radius: var(--radius-md); background: none;
    color: var(--color-content-on-chrome); font: inherit; font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--font-weight-medium);
    cursor: pointer; white-space: nowrap;
  }
  .bs-company svg { inline-size: 0.875rem; block-size: 0.875rem; color: var(--color-content-on-chrome-muted); }

  /* round 36px icon buttons, 20px icons */
  .bs-icon-btn, .bs-avatar {
    display: inline-grid; place-items: center; flex: none;
    inline-size: var(--shell-top-control-height); block-size: var(--shell-top-control-height);
    padding: 0; border: 0; border-radius: var(--radius-full); background: none;
    color: var(--color-content-on-chrome-muted); cursor: pointer;
  }
  .bs-icon-btn svg { inline-size: var(--icon-size, 1.25rem); block-size: var(--icon-size, 1.25rem); }
  /* Bolton's head drawn at about the (?) icon's size, so the two read as a pair */
  .bs-assistant img { block-size: 1.375rem; inline-size: auto; }
  /* all three corner circles share one size: help, assistant, avatar */
  .bs-avatar .avatar { inline-size: 100%; block-size: 100%; }
  @media (hover: hover) {
    .bs-company:hover, .bs-icon-btn:hover { background: var(--color-surface-chrome-hover); color: var(--color-content-on-chrome); }
    .bs-avatar:hover { opacity: 0.75; }
  }
  .bs-company:focus-visible, .bs-icon-btn:focus-visible, .bs-avatar:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: 0; }
  .bs-top-actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }
  .bs-top .top-bar-search svg { inline-size: 1rem; block-size: 1rem; flex: none; }
  .bs-hamburger { display: none; }
  #bs-company-menu, #bs-user-menu { color: var(--color-content-primary); }

  /* ---------- section sidebar ---------- */
  .bs-sidebar { scrollbar-width: thin; }
  /* the phone menu: sections as rows, the ones with items drill in */
  .bs-sidebar button.sidebar-item { inline-size: 100%; border: 0; background: none; font-family: inherit; text-align: start; cursor: pointer; }
  .bs-sidebar .sidebar-item[aria-current="true"] { background: var(--color-surface-default); box-shadow: var(--shadow-raised); }
  .bs-sidebar .bs-chev { display: inline-flex; margin-inline-start: auto; color: var(--color-content-tertiary); }
  .bs-sidebar .bs-back { color: var(--color-content-secondary); }
  .bs-sep { margin: var(--space-2) 0; border: 0; border-block-start: var(--border-width-default) solid var(--color-line-sidebar); }

  /* settings groups: 12px medium label with a small chevron, collapsible */
  .bs-group { display: grid; margin-block-end: var(--space-2); }
  .bs-group > summary { list-style: none; cursor: pointer; border-radius: var(--radius-md); }
  .bs-group > summary::-webkit-details-marker { display: none; }
  .bs-group > summary svg { inline-size: 0.625rem; block-size: 0.625rem; margin-inline-start: var(--space-0-5); transition: rotate var(--duration-fast) var(--ease-standard); }
  .bs-group:not([open]) > summary svg { rotate: -90deg; }
  .bs-group > summary:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus-ring); outline-offset: -2px; }
  @media (hover: hover) { .bs-group > summary:hover { color: var(--color-content-primary); } }

  /* hide the section sidebar from the page header (desktop) */
  @media (min-width: 1024px) {
    .app-shell[data-sidebar-hidden] { grid-template-columns: var(--_rail-column) 0 minmax(0, 1fr); }
    .app-shell[data-sidebar-hidden] .sidebar { display: none; }
  }

  /* ---------- narrower screens ---------- */
  @media (max-width: 1023px) {
    .bs-hamburger { display: inline-grid; }
    .bs-top .bs-logo { display: none; }
  }
  @media (max-width: 767px) {
    .bs-company { display: none; }
    .bs-top .top-bar-search { margin-inline-start: auto; }
  }

  /* ---------- page header tools: hide menu, refresh ---------- */
  .page-title .page-tool { color: var(--color-content-secondary); }
  @media (max-width: 1023px) { .page-title [data-collapse-sidebar] { display: none; } }
}