/* The app frame (js/core.js): Basecoat's sidebar with our brand block and account menu, the main column, and the
   prototype's dock, controls panel and notes (not part of the product). */
@layer components {
  /* Sidebar (customised: its own surface; the current page a raised pill in the accent; brand block; account button
     and menu as mockup 02). Basecoat resolves its ring colour once, at the root: inside the sidebar it is the
     sidebar's, so a ring on a dark sidebar (theme Petrol) is drawn light. */
  .app-sidebar { --ring: var(--sidebar-ring); --color-ring: var(--sidebar-ring); }
  .app-sidebar > nav { border-color: var(--sidebar-border); }
  .app-sidebar nav > section a { transition: background-color var(--duration-hover) var(--ease-out), color var(--duration-hover) var(--ease-out); }
  .app-sidebar.sidebar > nav li > a[aria-current="page"] { background: var(--sidebar-active); color: var(--sidebar-active-foreground); font-weight: 600; }
  /* Its lift is a shadow, so it gives way to the focus ring, which Basecoat also draws as one. */
  .app-sidebar.sidebar > nav li > a[aria-current="page"]:not(:focus-visible) { box-shadow: var(--shadow-raised); }
  .app-brand { display: block; padding: 0.5rem 0.5rem 0.75rem; font-weight: 700; font-size: var(--text-section); letter-spacing: var(--tracking-title); line-height: 1.2; }
  .app-brand small { display: block; margin-top: 0.125rem; font-weight: 500; letter-spacing: 0; color: var(--sidebar-muted-foreground); font-size: var(--text-label); }
  .app-account { display: flex; width: 100%; }
  .app-account-trigger { width: 100%; height: auto !important; justify-content: flex-start; gap: 0.625rem; padding: 0.5rem 0.375rem; color: var(--sidebar-foreground); }
  .app-account-trigger:hover, .app-account-trigger[aria-expanded="true"] { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
  .app-account-who { flex: 1; text-align: start; line-height: 1.25; font-weight: 500; }
  .app-account-who small { display: block; color: var(--sidebar-muted-foreground); font-size: var(--text-label); font-weight: 400; }
  /* The account menu floats on the page's surfaces, so it takes the page's ring back. */
  .app-account [data-popover] { width: 15.5rem; --ring: var(--page-ring); --color-ring: var(--page-ring); }

  /* Narrower than 64rem (FOLD_PX in core.js) the sidebar folds away: a top bar with a menu button takes its place and
     the sidebar opens over the page with Basecoat's backdrop, which Basecoat itself only does below 48rem. The bar
     sticks at the top, so the navigation is a click away at any scroll, and sticky headers stick under it. */
  .app-topbar { display: none; }
  @media (width < 64rem) {
    .app-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 0.75rem;
      height: var(--app-topbar-height); padding-inline: var(--page-gutter); background: var(--sidebar); color: var(--sidebar-foreground);
      border-bottom: 1px solid var(--sidebar-border); --ring: var(--sidebar-ring); --color-ring: var(--sidebar-ring); }
    .app-topbar-brand { font-weight: 700; letter-spacing: var(--tracking-title); display: flex; align-items: baseline; gap: 0.5rem; }
    .app-topbar-brand small { font-weight: 500; letter-spacing: 0; color: var(--sidebar-muted-foreground); font-size: var(--text-label); }
    .app-topbar > .avatar { margin-inline-start: auto; }
    /* The menu button keeps the page's colours on a dark top bar (theme Petrol). */
    .app-topbar > #app-menu { color: var(--foreground); }
    .app-sidebar[data-side] + * { margin-left: 0; }
    .app-sidebar[aria-hidden="false"] { position: fixed; inset: 0; z-index: 40; background-color: var(--scrim); }
    .app-sidebar > nav { width: var(--sidebar-mobile-width); }
  }

  /* The main column is the container page layouts query (@container main): its width, not the window's, decides
     how many columns a page grid has, since the sidebar takes 16rem at some window widths and none at others. */
  .app-column { min-width: 0; }
  .app-main { container: main / inline-size; padding: 2rem var(--page-gutter) 3rem; min-width: 0; min-height: 100vh; }
  .app-main:focus { outline: none; }
  .app-notfound { margin-top: 4rem; padding-block: 3rem; }

  /* Prototype only. */
  /* The dock: Components and Prototype controls, small and quiet where they cover no page content: in the sidebar's
     foot above the account button, or in the folded navigation's top bar; in a corner of a page without the frame. */
  .proto-dock { display: flex; flex-wrap: wrap; gap: 0.25rem; padding-inline: 0.25rem; font-size: var(--text-label); }
  .proto-dock > :is(a, button) { display: inline-flex; align-items: center; height: 1.625rem; padding: 0 0.625rem; border-radius: 9999px;
    border: 1px dashed var(--sidebar-border); color: var(--sidebar-muted-foreground); font-weight: 500; white-space: nowrap; cursor: pointer;
    transition: background-color var(--duration-hover) var(--ease-out), color var(--duration-hover) var(--ease-out); }
  .proto-dock > :is(a, button):is(:hover, [aria-expanded="true"]) { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
  .proto-dock[data-floating] { position: fixed; left: 0.75rem; bottom: 0.75rem; z-index: 35; }
  .proto-dock[data-floating] > :is(a, button) { border-color: var(--border); color: var(--muted-foreground); }
  .proto-dock[data-floating] > :is(a, button):is(:hover, [aria-expanded="true"]) { background: var(--accent); color: var(--foreground); }
  /* In the sidebar's foot: outside the sidebar (not part of the product's navigation), over its panel, above the
     account button; hidden while the account menu, which opens over that spot, is open. */
  .proto-dock[data-sidebar] { position: fixed; left: 0.5rem; bottom: 4.5rem; z-index: 51; max-width: calc(var(--sidebar-width) - 1rem); }
  #root:has(.app-account [aria-expanded="true"]) .proto-dock[data-sidebar] { visibility: hidden; }
  @media (width < 64rem) { .proto-dock[data-sidebar] { display: none; } }
  .app-topbar > .proto-dock { margin-inline-start: auto; }
  .app-topbar > .proto-dock + .avatar { margin-inline-start: 0; }
  .proto-panel { position: fixed; left: calc(var(--sidebar-width) + 0.75rem); bottom: 0.75rem; z-index: 60; width: 21rem; max-height: calc(100vh - 1.5rem); overflow: auto;
    box-shadow: var(--shadow-floating); animation: ui-enter var(--duration-enter) var(--ease-out); }
  @media (width < 64rem) {
    .proto-panel { left: auto; right: 0.75rem; bottom: auto; top: calc(var(--app-topbar-height) + 0.5rem); max-height: calc(100vh - var(--app-topbar-height) - 1rem); }
  }
  .proto-panel > section { display: grid; gap: 0.75rem; }
  .proto-panel-group { display: grid; gap: 0.5rem; border: 0; padding: 0; margin: 0; }
  .proto-panel-group > legend { font-size: var(--text-label); font-weight: 600; color: var(--muted-foreground); margin-bottom: 0.25rem; }
  .proto-panel-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
  .proto-note { border: 1px dashed var(--warning); background: var(--warning-surface); border-radius: var(--radius-lg); padding: 0.625rem 0.75rem; font-size: var(--text-label); }
}