/* Application defaults stay below the shared components and page compositions. */
@layer reset, base, app;

:root {
  --application-min-width: var(--size-320);
  --application-content-width: var(--size-960);
  --application-page-padding: var(--size-32) var(--space-5);
  --application-page-padding-narrow: var(--space-5) var(--space-4);
  --application-focus-outline: var(--focus-width) solid var(--color-focus-ring);
  --application-link-offset: var(--space-1);
  --application-shell-rail: max(var(--space-6), calc((100% - var(--application-content-width)) / 2));
  --application-header-height: var(--size-64);
  --application-header-gap: var(--space-3);
  --application-header-padding: var(--space-2-5);
  --application-border: var(--control-border-width) solid var(--color-border);
  --application-page-inset: var(--size-32);
  --application-skip-inset: var(--space-3);
  --application-skip-radius: var(--radius-6);
  --application-skip-hidden-transform: translateY(calc(-100% - var(--application-skip-inset)));
  --application-error-padding: var(--space-2-5) var(--space-3);
  --application-error-border: var(--control-border-width) solid var(--color-error-border);
  --application-error-radius: var(--radius-10);
  --application-error-list-inset: var(--size-18);
  --application-error-gap: var(--space-1);
  --application-empty-gap: var(--space-4);
  --application-empty-height: var(--size-240);
  --application-empty-padding: var(--space-6);
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { color-scheme: only light; }
  body, h1, h2, h3, p { margin: 0; }
  button, input, select, textarea { font: inherit; }
  img, svg { display: block; max-width: 100%; }
}

@layer base {
  html { min-width: var(--application-min-width); background: var(--color-background); }
  body {
    min-height: 100vh;
    background: var(--color-background);
    color: var(--color-foreground);
    -webkit-font-smoothing: antialiased;
  }
  :focus-visible { outline: var(--application-focus-outline); outline-offset: var(--focus-offset); }
  ::selection { background: var(--color-selected-strong); color: var(--color-selected-strong-foreground); }
  a { color: inherit; text-underline-offset: var(--application-link-offset); }
  a:hover { color: var(--color-link-hover); text-decoration: underline; }
  summary { cursor: pointer; }
}

@layer app {
  body { padding: var(--application-page-padding); }
  .container { width: min(100%, var(--application-content-width)); margin-inline: auto; overflow-wrap: anywhere; }
  .container :where(section, article, header, form, fieldset, nav, ul, li, div, details, a, label) { min-width: 0; }
  .muted { color: var(--color-muted-foreground); }
  .attachment-file-input { display: none; }

  /* Remaining inline validation and transcript notices are not shared controls. */
  article.error, .form-errors.error {
    padding: var(--application-error-padding);
    border: var(--application-error-border);
    border-radius: var(--application-error-radius);
    background: var(--color-error-subtle);
    color: var(--color-error-text);
  }
  .form-errors ul { margin: 0; padding-left: var(--application-error-list-inset); }
  .form-errors ul > li + li { margin-top: var(--application-error-gap); }
  .form-errors:not(:has(*)) { display: none; }
  .transcript.empty-state { display: grid; place-items: center; gap: var(--application-empty-gap); min-height: var(--application-empty-height); padding: var(--application-empty-padding); text-align: center; }

  /* Sidebar/breadcrumb composition; navigation_controller owns dialog behavior. */
  html:has(body.authenticated) { scrollbar-gutter: stable; }
  body.authenticated { padding: 0; }
  .application-shell { --shell-rail: var(--application-shell-rail); min-height: 100dvh; }
  .shell-content { min-width: 0; }
  .shell-header { height: var(--application-header-height); display: flex; align-items: center; gap: var(--application-header-gap); padding: var(--application-header-padding) var(--shell-rail); border-bottom: var(--application-border); }
  #page-content { padding: var(--application-page-inset) var(--shell-rail); }
  #page-content > .container { margin-inline: 0; }
  .skip-link { position: fixed; inset-inline-start: var(--application-skip-inset); inset-block-start: var(--application-skip-inset); transform: var(--application-skip-hidden-transform); z-index: 20; padding: var(--application-skip-inset); border: var(--application-border); border-radius: var(--application-skip-radius); background: var(--color-background); }
  .skip-link:focus { transform: none; }
  .navigation-drawer[open] { display: flex; flex-direction: column; }
  .navigation-drawer::backdrop { background: var(--color-scrim); }

  @media (width < 60rem) {
    .application-shell { --shell-rail: var(--space-6); }
  }
  @media (max-width: 40rem) {
    body { padding: var(--application-page-padding-narrow); }
    .application-shell { --shell-rail: var(--space-4); }
    #page-content { padding-block: var(--space-6); }
  }
}

/* Accessibility utilities must not depend on a particular component. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}