breadcrumb-the-shire/web/css/layout/app-shell.css

@charset "UTF-8";

@layer layout {
  a {
    --app-text-decoration: underline;
  }

  a.contrast,
  a.secondary {
    --app-text-decoration: underline;
  }

  small {
    --app-font-size: 0.875em;
    line-height: var(--leading-loose);
  }

  div#debugger-bar {
    display: none;
  }

  @media (min-width: 768px) {
    .app-container.is-sidebar-hidden .app-sidebar {
      display: none;
    }

    .sidebar-hidden .app-sidebar {
      display: none;
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    --app-font-weight: var(--font-bold);
  }

  h1 {
    --app-font-size: var(--text-page-title);
    --app-line-height: var(--leading-tight);
    --app-typography-spacing-top: 3rem;
  }

  h2 {
    --app-font-size: var(--text-title);
    --app-line-height: var(--leading-tight);
    --app-typography-spacing-top: 2.625rem;
  }

  h3 {
    --app-font-size: var(--text-lg);
    --app-line-height: var(--leading-tight);
    --app-typography-spacing-top: 2.25rem;
  }

  h4 {
    --app-font-size: var(--text-base);
    --app-line-height: var(--leading-tight);
    --app-typography-spacing-top: 1.874rem;
  }

  h5 {
    --app-font-size: var(--text-sm);
    --app-line-height: var(--leading-tight);
    --app-typography-spacing-top: 1.6875rem;
  }

  h6 {
    --app-font-size: var(--text-sm);
    --app-line-height: var(--leading-tight);
    --app-typography-spacing-top: 1.5rem;
  }

  tfoot td,
  tfoot th,
  thead td,
  thead th {
    --app-font-weight: var(--font-semibold);
    --app-border-width: 2px;
  }

  code,
  kbd,
  pre,
  samp {
    --app-font-family: var(--app-font-family-monospace);
  }

  kbd {
    --app-font-weight: var(--font-bold);
  }

  :where(select, textarea),
  input:not(
    [type="submit"],
    [type="button"],
    [type="reset"],
    [type="checkbox"],
    [type="radio"],
    [type="file"]
  ) {
    --app-outline-width: 0.0625rem;
  }

  [type="checkbox"],
  [type="radio"] {
    --app-border-width: 0.125rem;
  }

  [type="checkbox"][role="switch"] {
    --app-border-width: 0.1875rem;
  }

  details.dropdown summary:not([role="button"]) {
    --app-outline-width: 0.0625rem;
  }

  nav details.dropdown summary:focus-visible {
    --app-outline-width: 0.125rem;
  }

  [role="search"] {
    --app-border-radius: 5rem;
  }

  [role="group"]:has(
    button.secondary:focus,
    [type="submit"].secondary:focus,
    [type="button"].secondary:focus,
    [role="button"].secondary:focus
  ),
  [role="search"]:has(
    button.secondary:focus,
    [type="submit"].secondary:focus,
    [type="button"].secondary:focus,
    [role="button"].secondary:focus
  ) {
    --app-group-box-shadow-focus-with-button: 0 0 0 var(--app-outline-width)
      var(--app-secondary-focus);
  }

  [role="group"]:has(
    button.contrast:focus,
    [type="submit"].contrast:focus,
    [type="button"].contrast:focus,
    [role="button"].contrast:focus
  ),
  [role="search"]:has(
    button.contrast:focus,
    [type="submit"].contrast:focus,
    [type="button"].contrast:focus,
    [role="button"].contrast:focus
  ) {
    --app-group-box-shadow-focus-with-button: 0 0 0 var(--app-outline-width)
      var(--app-contrast-focus);
  }

  [role="group"] [role="button"],
  [role="group"] [type="button"],
  [role="group"] [type="submit"],
  [role="group"] button,
  [role="search"] [role="button"],
  [role="search"] [type="button"],
  [role="search"] [type="submit"],
  [role="search"] button {
    --app-form-element-spacing-horizontal: 2rem;
  }

  [role="group"] form:last-child button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  table td [role="group"] {
    margin: 0;
  }

  th {
    text-transform: uppercase;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    border-top: 1px solid var(--app-border);
  }

  table td .grid-actions button,
  table td .grid-actions [role="button"] {
    padding: 4px 10px;
    color: var(--app-muted-color);
    border: 1px solid var(--app-border);
    font-size: var(--text-sm);
    background: var(--app-form-element-background-color);
    box-shadow: var(--app-group-box-shadow);
  }

  table td .grid-actions button:has(i),
  table td .grid-actions [role="button"]:has(i) {
    max-width: 42px;
  }

  table td .grid-actions button:hover,
  table td .grid-actions [role="button"]:hover {
    color: var(--app-contrast);
  }

  details summary[role="button"]:not(.outline)::after {
    filter: brightness(0) invert(1);
  }

  [aria-busy="true"]:not(input, select, textarea):is(
      button,
      [type="submit"],
      [type="button"],
      [type="reset"],
      [role="button"]
    ):not(.outline)::before {
    filter: brightness(0) invert(1);
  }

  @media only screen and (prefers-color-scheme: dark) {
    :host(:not([data-theme]))
      details
      summary[role="button"].contrast:not(.outline)::after,
    :root:not([data-theme])
      details
      summary[role="button"].contrast:not(.outline)::after {
      filter: brightness(0);
    }

    :host(:not([data-theme]))
      [aria-busy="true"]:not(input, select, textarea).contrast:is(
        button,
        [type="submit"],
        [type="button"],
        [type="reset"],
        [role="button"]
      ):not(.outline)::before,
    :root:not([data-theme])
      [aria-busy="true"]:not(input, select, textarea).contrast:is(
        button,
        [type="submit"],
        [type="button"],
        [type="reset"],
        [role="button"]
      ):not(.outline)::before {
      filter: brightness(0);
    }
  }

  [data-theme="dark"]
    details
    summary[role="button"].contrast:not(.outline)::after {
    filter: brightness(0);
  }

  [data-theme="dark"]
    [aria-busy="true"]:not(input, select, textarea).contrast:is(
      button,
      [type="submit"],
      [type="button"],
      [type="reset"],
      [role="button"]
    ):not(.outline)::before {
    filter: brightness(0);
  }

  [type="checkbox"],
  [type="radio"],
  [type="range"],
  progress {
    accent-color: var(--app-primary);
  }

  *,
  ::after,
  ::before {
    box-sizing: border-box;
    background-repeat: no-repeat;
  }

  ::after,
  ::before {
    text-decoration: inherit;
    vertical-align: inherit;
  }

  :where(:host),
  :where(:root) {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background-color: var(--app-background-color);
    color: var(--app-color);
    font-weight: var(--app-font-weight);
    font-size: var(--app-font-size);
    line-height: var(--app-line-height);
    font-family: var(--app-font-family);
    text-underline-offset: var(--app-text-underline-offset);
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
  }

  body {
    width: 100%;
    margin: 0;
  }

  main {
    display: block;
  }

  body > main {
    padding-block: var(--app-block-spacing-vertical);
  }

  /* Footer layout, spacing and colors live in components/app-footer.css. */

  header[data-align="center"],
  hgroup[data-align="center"] > h1,
  hgroup[data-align="center"] > h2,
  hgroup[data-align="center"] > h3,
  hgroup[data-align="center"] > p,
  hgroup[data-align="center"] > *,
  hgroup[data-align="center"] {
    text-align: center;
    justify-content: center;
  }

  section {
    margin-bottom: var(--app-block-spacing-vertical);
  }

  .container-small {
    max-width: 420px;
    margin-right: auto;
    margin-left: auto;
  }

  .container,
  .container-fluid {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--app-spacing);
    padding-left: var(--app-spacing);
  }

  .app-main-content {
    padding-inline: calc(var(--app-spacing) * 1);
    padding-block-start: var(--app-spacing);
  }

  /* Details pages provide their own sticky titlebar with padding — let it manage
     the gap to the topbar itself, don't double it. */
  .app-main-content:has(.app-details-container) {
    padding-block-start: 0;
  }

  @media (min-width: 576px) {
    .container {
      max-width: 510px;
      padding-right: 0;
      padding-left: 0;
    }
  }

  @media (min-width: 768px) {
    .container {
      max-width: 700px;
    }
    .app-container.is-sidebar-hidden:has(.aside-icon-bar):has(.app-sidebar) {
      display: grid;
      min-height: calc(100dvh - var(--app-topbar-height));
      align-items: stretch;
      grid-template-columns: minmax(0, 52px) minmax(0, 1fr);
    }
    .sidebar-hidden .app-container:has(.aside-icon-bar):has(.app-sidebar) {
      grid-template-columns: minmax(0, 52px) minmax(0, 1fr);
    }
    .app-container:has(.aside-icon-bar):has(.app-sidebar) {
      display: grid;
      min-height: calc(100dvh - var(--app-topbar-height));
      align-items: stretch;
      grid-template-columns: minmax(0, 52px) minmax(0, 220px) minmax(0, 1fr);
    }
    .app-container.is-sidebar-collapsed:has(.aside-icon-bar):has(.app-sidebar) {
      display: grid;
      min-height: calc(100dvh - var(--app-topbar-height));
      align-items: stretch;
      grid-template-columns: minmax(0, 52px) minmax(0, 220px) minmax(0, 1fr);
    }

    .app-container.is-sidebar-collapsed {
      grid-template-columns: minmax(0, 52px) minmax(0, 220px) minmax(0, 1fr);
    }

    .sidebar-collapsed .app-container {
      grid-template-columns: minmax(0, 52px) minmax(0, 220px) minmax(0, 1fr);
    }

    .app-main {
      border-left: 1px solid var(--app-border);
      min-height: calc(100dvh - var(--app-topbar-height));
      background: var(--app-background-color);
    }

    .app-main-content {
      padding-inline: calc(var(--app-spacing) * 2);
      padding-block-start: calc(var(--app-spacing) * 2);
      margin-bottom: calc(var(--app-spacing) * 2);
    }
    .app-main-content:has(.app-details-container) {
      margin-bottom: 0;
      padding: 0;
      position: relative;
      z-index: 1;
    }
  }

  @media (min-width: 1024px) {
    .container {
      max-width: 950px;
    }
  }

  @media (min-width: 1280px) {
    .container {
      max-width: 1200px;
    }
  }

  @media (min-width: 1536px) {
    .container {
      max-width: 1450px;
    }
  }

  .grid {
    grid-column-gap: var(--app-grid-column-gap);
    grid-row-gap: var(--app-grid-row-gap);
    display: grid;
    --app-grid-template-columns: 1fr;
    grid-template-columns: var(--app-grid-template-columns);
  }

  .flex {
    display: flex;
    flex-wrap: wrap;
    gap: var(--app-flex-gap);
  }

  .flex h1,
  .flex h2,
  .flex h3,
  .flex h4,
  .flex h5,
  .flex h6 {
    margin-bottom: 0;
  }

  .align-center {
    align-items: center;
  }

  .align-flex-start {
    align-items: flex-start;
  }

  .justify-space-between {
    justify-content: space-between;
  }

  @media (min-width: 768px) {
    .grid {
      --app-grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
    }

    .grid.grid-2,
    .grid.grid-1-1 {
      --app-grid-template-columns: repeat(2, minmax(0%, 1fr));
    }

    .grid.grid-3 {
      --app-grid-template-columns: repeat(3, minmax(0%, 1fr));
    }

    .grid.grid-4 {
      --app-grid-template-columns: repeat(4, minmax(0%, 1fr));
    }

    .grid.grid-5 {
      --app-grid-template-columns: repeat(5, minmax(0%, 1fr));
    }

    .grid.grid-6 {
      --app-grid-template-columns: repeat(6, minmax(0%, 1fr));
    }

    .grid.grid-1-2 {
      --app-grid-template-columns: minmax(0%, 1fr) minmax(0%, 2fr);
    }

    .grid.grid-2-1 {
      --app-grid-template-columns: minmax(0%, 2fr) minmax(0%, 1fr);
    }

    .grid.grid-1-3 {
      --app-grid-template-columns: minmax(0%, 1fr) minmax(0%, 3fr);
    }

    .grid.grid-3-1 {
      --app-grid-template-columns: minmax(0%, 3fr) minmax(0%, 1fr);
    }
  }

  .grid > * {
    min-width: 0;
  }

  .overflow-auto {
    overflow: auto;
  }

  b,
  strong {
    font-weight: bolder;
  }

  sub,
  sup {
    position: relative;
    font-size: 0.75em; /* em-relative sizing — intentional, scales with parent */
    line-height: 0; /* intentional px — sub/sup vertical alignment */
    vertical-align: baseline;
  }

  sub {
    bottom: -0.25em;
  }

  sup {
    top: -0.5em;
  }

  address,
  blockquote,
  dl,
  ol,
  p,
  pre,
  table,
  ul {
    margin-top: 0;
    margin-bottom: var(--app-typography-spacing-vertical);
    color: var(--app-color);
    font-style: normal;
    font-weight: var(--app-font-weight);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 0;
    margin-bottom: var(--app-typography-spacing-vertical);
    color: var(--app-color);
    font-weight: var(--app-font-weight);
    font-size: var(--app-font-size);
    line-height: var(--app-line-height);
    font-family: var(--app-font-family);
  }

  h1 {
    --app-color: var(--app-h1-color);
  }

  h2 {
    --app-color: var(--app-h2-color);
  }

  h3 {
    --app-color: var(--app-h3-color);
  }

  h4 {
    --app-color: var(--app-h4-color);
  }

  h5 {
    --app-color: var(--app-h5-color);
  }

  h6 {
    --app-color: var(--app-h6-color);
  }

  :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul)
    ~ :is(h1, h2, h3, h4, h5, h6) {
    margin-top: var(--app-typography-spacing-top);
  }

  p {
    margin-bottom: var(--app-typography-spacing-vertical);
  }

  hgroup {
    margin-bottom: var(--app-typography-spacing-vertical);
  }

  .flex hgroup {
    margin-bottom: 0;
  }

  hgroup > * {
    margin-top: 0;
    margin-bottom: 0;
  }

  hgroup > :not(:first-child):last-child {
    --app-color: var(--app-muted-color);
    --app-font-weight: unset;
    font-size: var(--text-base);
  }

  :where(ol, ul) li {
    margin-bottom: calc(var(--app-typography-spacing-vertical) * 0.25);
  }

  :where(dl, ol, ul) :where(dl, ol, ul) {
    margin: 0;
    margin-top: calc(var(--app-typography-spacing-vertical) * 0.25);
  }

  ul li {
    list-style: square;
  }

  mark {
    padding: 0.125rem 0.25rem;
    background-color: var(--app-mark-background-color);
    color: var(--app-mark-color);
    vertical-align: baseline;
  }

  abbr[title] {
    border-bottom: 1px dotted;
    text-decoration: none;
    cursor: help;
  }

  ins {
    color: var(--app-ins-color);
    text-decoration: none;
  }

  del {
    color: var(--app-del-color);
  }

  ::-moz-selection {
    background-color: var(--app-text-selection-color);
  }

  ::selection {
    background-color: var(--app-text-selection-color);
  }

  :where(a:not([role="button"])),
  [role="link"] {
    --app-color: var(--app-primary);
    --app-background-color: transparent;
    --app-underline: var(--app-primary-underline);
    outline: 0;
    background-color: var(--app-background-color);
    color: cornflowerblue;
    -webkit-text-decoration: var(--app-text-decoration);
    text-decoration: var(--app-text-decoration);
    text-decoration-color: var(--app-underline);
    text-underline-offset: 0.125em;
    transition:
      background-color var(--app-transition),
      color var(--app-transition),
      box-shadow var(--app-transition),
      -webkit-text-decoration var(--app-transition);
    transition:
      background-color var(--app-transition),
      color var(--app-transition),
      text-decoration var(--app-transition),
      box-shadow var(--app-transition);
    transition:
      background-color var(--app-transition),
      color var(--app-transition),
      text-decoration var(--app-transition),
      box-shadow var(--app-transition),
      -webkit-text-decoration var(--app-transition);
  }

  :where(a:not([role="button"])):is(
    [aria-current]:not([aria-current="false"]),
    :hover,
    :active,
    :focus
  ),
  [role="link"]:is(
    [aria-current]:not([aria-current="false"]),
    :hover,
    :active,
    :focus
  ) {
    --app-color: var(--app-primary-hover);
    --app-underline: var(--app-primary-hover-underline);
    --app-text-decoration: underline;
  }

  :where(a:not([role="button"])):focus-visible,
  [role="link"]:focus-visible {
    box-shadow: 0 0 0 var(--app-outline-width) var(--app-primary-focus);
  }

  :where(a:not([role="button"])).secondary,
  [role="link"].secondary {
    --app-color: var(--app-secondary);
    --app-underline: var(--app-secondary-underline);
  }

  :where(a:not([role="button"])).secondary:is(
      [aria-current]:not([aria-current="false"]),
      :hover,
      :active,
      :focus
    ),
  [role="link"].secondary:is(
      [aria-current]:not([aria-current="false"]),
      :hover,
      :active,
      :focus
    ) {
    --app-color: var(--app-secondary-hover);
    --app-underline: var(--app-secondary-hover-underline);
  }

  :where(a:not([role="button"])).contrast,
  [role="link"].contrast {
    --app-color: var(--app-contrast);
    --app-underline: var(--app-contrast-underline);
  }

  :where(a:not([role="button"])).contrast:is(
      [aria-current]:not([aria-current="false"]),
      :hover,
      :active,
      :focus
    ),
  [role="link"].contrast:is(
      [aria-current]:not([aria-current="false"]),
      :hover,
      :active,
      :focus
    ) {
    --app-color: var(--app-contrast-hover);
    --app-underline: var(--app-contrast-hover-underline);
  }

  a[role="button"] {
    display: inline-block;
  }

  button {
    margin: 0;
    overflow: visible;
    font-family: inherit;
    text-transform: none;
  }

  a.transparent[role="button"],
  button.transparent,
  .transparent[role="button"] {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--app-muted-color);
  }
  a.transparent[role="button"]:hover,
  button.transparent:hover,
  .transparent[role="button"]:hover {
    background: var(--app-muted-border-color);
    color: var(--app-contrast);
  }

  [type="button"],
  [type="reset"],
  [type="submit"],
  button {
    -webkit-appearance: button;
  }

  [role="button"],
  [type="button"],
  [type="file"]::file-selector-button,
  [type="reset"],
  [type="submit"],
  button {
    --app-background-color: var(--app-primary-background);
    --app-border-color: var(--app-primary-border);
    --app-color: var(--app-primary-inverse);
    --app-box-shadow: var(--app-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
    padding: var(--app-button-padding-vertical)
      var(--app-button-padding-horizontal);
    border: var(--app-border-width) solid var(--app-border-color);
    border-radius: var(--app-border-radius);
    outline: 0;
    background-color: var(--app-background-color);
    box-shadow: var(--app-box-shadow);
    color: var(--app-color);
    font-weight: var(--app-font-weight);
    font-size: var(--text-base);
    line-height: var(--app-line-height);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    transition:
      background-color var(--app-transition),
      border-color var(--app-transition),
      color var(--app-transition),
      box-shadow var(--app-transition);
  }

  :where(
    button,
    [type="submit"],
    [type="reset"],
    [type="button"],
    [role="button"]
  ).small {
    --app-button-padding-vertical: var(--app-button-padding-vertical-small);
    --app-button-padding-horizontal: var(--app-button-padding-horizontal-small);
    font-size: var(--text-sm);
  }

  [role="button"]:is(:hover, :active, :focus),
  [role="button"]:is([aria-current]:not([aria-current="false"])),
  [type="button"]:is(:hover, :active, :focus),
  [type="button"]:is([aria-current]:not([aria-current="false"])),
  [type="file"]::file-selector-button:is(:hover, :active, :focus),
  [type="file"]::file-selector-button:is(
      [aria-current]:not([aria-current="false"])
    ),
  [type="reset"]:is(:hover, :active, :focus),
  [type="reset"]:is([aria-current]:not([aria-current="false"])),
  [type="submit"]:is(:hover, :active, :focus),
  [type="submit"]:is([aria-current]:not([aria-current="false"])),
  button:is(:hover, :active, :focus),
  button:is([aria-current]:not([aria-current="false"])) {
    --app-background-color: var(--app-primary-hover-background);
    --app-border-color: var(--app-primary-hover-border);
    --app-box-shadow: var(
      --app-button-hover-box-shadow,
      0 0 0 rgba(0, 0, 0, 0)
    );
    --app-color: var(--app-primary-inverse);
  }

  [role="button"]:focus,
  [role="button"]:is([aria-current]:not([aria-current="false"])):focus,
  [type="button"]:focus,
  [type="button"]:is([aria-current]:not([aria-current="false"])):focus,
  [type="file"]::file-selector-button:focus,
  [type="file"]::file-selector-button:is(
      [aria-current]:not([aria-current="false"])
    ):focus,
  [type="reset"]:focus,
  [type="reset"]:is([aria-current]:not([aria-current="false"])):focus,
  [type="submit"]:focus,
  [type="submit"]:is([aria-current]:not([aria-current="false"])):focus,
  button:focus,
  button:is([aria-current]:not([aria-current="false"])):focus {
    --app-box-shadow:
      var(--app-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
      0 0 0 var(--app-outline-width) var(--app-primary-focus);
  }

  [type="button"],
  [type="reset"] {
    margin-bottom: var(--app-spacing);
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).secondary,
  [type="file"]::file-selector-button,
  [type="reset"] {
    --app-background-color: var(--app-secondary-background);
    --app-border-color: var(--app-secondary-border);
    --app-color: var(--app-secondary-inverse);
    cursor: pointer;
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).secondary:is(
      [aria-current]:not([aria-current="false"]),
      :hover,
      :active,
      :focus
    ),
  [type="file"]::file-selector-button:is(
      [aria-current]:not([aria-current="false"]),
      :hover,
      :active,
      :focus
    ),
  [type="reset"]:is(
    [aria-current]:not([aria-current="false"]),
    :hover,
    :active,
    :focus
  ) {
    --app-background-color: var(--app-secondary-hover-background);
    --app-border-color: var(--app-secondary-hover-border);
    --app-color: var(--app-secondary-inverse);
  }

  :is(
      button,
      [type="submit"],
      [type="button"],
      [role="button"]
    ).secondary:focus,
  :is(button, [type="submit"], [type="button"], [role="button"]).secondary:is(
      [aria-current]:not([aria-current="false"])
    ):focus,
  [type="file"]::file-selector-button:focus,
  [type="file"]::file-selector-button:is(
      [aria-current]:not([aria-current="false"])
    ):focus,
  [type="reset"]:focus,
  [type="reset"]:is([aria-current]:not([aria-current="false"])):focus {
    --app-box-shadow:
      var(--app-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
      0 0 0 var(--app-outline-width) var(--app-secondary-focus);
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).contrast {
    --app-background-color: var(--app-contrast-background);
    --app-border-color: var(--app-contrast-border);
    --app-color: var(--app-contrast-inverse);
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).contrast:is(
      [aria-current]:not([aria-current="false"]),
      :hover,
      :active,
      :focus
    ) {
    --app-background-color: var(--app-contrast-hover-background);
    --app-border-color: var(--app-contrast-hover-border);
    --app-color: var(--app-contrast-inverse);
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).contrast:focus,
  :is(button, [type="submit"], [type="button"], [role="button"]).contrast:is(
      [aria-current]:not([aria-current="false"])
    ):focus {
    --app-box-shadow:
      var(--app-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
      0 0 0 var(--app-outline-width) var(--app-contrast-focus);
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).outline,
  [type="reset"].outline {
    --app-background-color: color-mix(in srgb, var(--app-color) 8%, transparent);
    --app-color: var(--app-primary);
    --app-border-color: var(--app-primary);
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).outline:is(
      [aria-current]:not([aria-current="false"]),
      :hover,
      :active,
      :focus
    ),
  [type="reset"].outline:is(
      [aria-current]:not([aria-current="false"]),
      :hover,
      :active,
      :focus
    ) {
    --app-background-color: color-mix(in srgb, var(--app-color) 18%, transparent);
    --app-color: var(--app-primary-hover);
    --app-border-color: var(--app-primary-hover);
  }

  :is(
      button,
      [type="submit"],
      [type="button"],
      [role="button"]
    ).outline.secondary,
  [type="reset"].outline {
    --app-color: var(--app-secondary);
    --app-border-color: var(--app-secondary);
  }

  :is(
      button,
      [type="submit"],
      [type="button"],
      [role="button"]
    ).outline.secondary:is(
      [aria-current]:not([aria-current="false"]),
      :hover,
      :active,
      :focus
    ),
  [type="reset"].outline:is(
      [aria-current]:not([aria-current="false"]),
      :hover,
      :active,
      :focus
    ) {
    --app-color: var(--app-secondary-hover);
    --app-border-color: var(--app-secondary-hover);
  }

  /* Stripe-style neutral chip — solid elevated surface, high-contrast text,
     subtle neutral border, medium font-weight. Theme-aware via tokens:
     in light mode a white chip with soft shadow, in dark mode a lifted
     dark-gray chip with white text. */
  :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary,
  [type="reset"].outline {
    --app-background-color: var(--app-button-neutral-bg);
    --app-color: var(--app-button-neutral-color);
    --app-border-color: var(--app-button-neutral-border);
    box-shadow: var(--app-button-neutral-shadow);
    font-weight: var(--font-medium);
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary:is(
      [aria-current]:not([aria-current="false"]),
      :hover,
      :active,
      :focus
    ),
  [type="reset"].outline:is(
      [aria-current]:not([aria-current="false"]),
      :hover,
      :active,
      :focus
    ) {
    --app-background-color: var(--app-button-neutral-bg-hover);
    --app-color: var(--app-button-neutral-color-hover);
    --app-border-color: var(--app-button-neutral-border-hover);
    box-shadow: var(--app-button-neutral-shadow-hover);
  }

  :is(
      button,
      [type="submit"],
      [type="button"],
      [role="button"]
    ).outline.contrast {
    --app-color: var(--app-contrast);
    --app-border-color: var(--app-contrast);
  }

  :is(
      button,
      [type="submit"],
      [type="button"],
      [role="button"]
    ).outline.contrast:is(
      [aria-current]:not([aria-current="false"]),
      :hover,
      :active,
      :focus
    ) {
    --app-color: var(--app-contrast-hover);
    --app-border-color: var(--app-contrast-hover);
  }

  :where(
    button,
    [type="submit"],
    [type="reset"],
    [type="button"],
    [role="button"]
  )[disabled],
  :where(fieldset[disabled])
    :is(
      button,
      [type="submit"],
      [type="button"],
      [type="reset"],
      [role="button"]
    ) {
    opacity: 0.5;
    pointer-events: none;
  }

  :where(table) {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    text-indent: 0;
  }

  td,
  th {
    padding: calc(var(--app-spacing) / 2) var(--app-spacing);
    border-bottom: var(--app-border-width) solid var(--app-table-border-color);
    background-color: var(--app-background-color);
    color: var(--app-color);
    font-weight: var(--app-font-weight);
    text-align: left;
    text-align: start;
  }

  tfoot td,
  tfoot th {
    border-top: var(--app-border-width) solid var(--app-table-border-color);
    border-bottom: 0;
  }

  table.striped tbody tr:nth-child(odd) td,
  table.striped tbody tr:nth-child(odd) th {
    background-color: var(--app-table-row-stripped-background-color);
  }

  :where(audio, canvas, iframe, img, svg, video) {
    vertical-align: middle;
  }

  audio,
  video {
    display: inline-block;
  }

  audio:not([controls]) {
    display: none;
    height: 0;
  }

  :where(iframe) {
    border-style: none;
  }

  img {
    max-width: 100%;
    height: auto;
    border-style: none;
  }

  img.rounded {
    border-radius: 0.5rem;
  }

  :where(svg:not([fill])) {
    fill: currentColor;
  }

  svg:not(:host),
  svg:not(:root) {
    overflow: hidden;
  }

  code,
  kbd,
  pre,
  samp {
    font-size: 0.875em; /* em-relative sizing — intentional, scales with parent */
    font-family: var(--app-font-family);
  }

  pre code,
  pre samp {
    font-size: inherit;
    font-family: inherit;
  }

  pre {
    -ms-overflow-style: scrollbar;
    overflow: auto;
  }

  code,
  kbd,
  pre,
  samp {
    border-radius: var(--app-border-radius);
    background: var(--app-code-background-color);
    color: var(--app-code-color);
    font-weight: var(--app-font-weight);
    line-height: initial;
  }

  code,
  kbd,
  samp {
    display: inline-block;
    padding: 0.375rem;
  }

  pre {
    display: block;
    margin-bottom: var(--app-spacing);
    overflow-x: auto;
  }

  pre > code,
  pre > samp {
    display: block;
    padding: var(--app-spacing);
    background: 0 0;
    line-height: var(--app-line-height);
  }

  .code-toolbar {
    position: relative;
    margin-block: var(--app-spacing);
  }

  .code-toolbar > .toolbar {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 1;
  }

  .code-toolbar > .toolbar .toolbar-item {
    display: inline-flex;
  }

  .code-toolbar > .toolbar .copy-to-clipboard-button {
    --app-background-color: transparent;
    --app-border-color: var(--app-muted-border-color);
    --app-color: var(--app-muted-color);
    --app-box-shadow: none;
    --app-button-padding-vertical: var(--app-button-padding-vertical-small);
    --app-button-padding-horizontal: var(--app-button-padding-horizontal-small);
    font-size: var(--text-xs);
  }

  .code-toolbar > .toolbar .copy-to-clipboard-button:is(:hover, :focus) {
    --app-background-color: var(--app-card-sectioning-background-color);
    --app-border-color: var(--app-muted-border-color);
  }

  .code-toolbar > pre > code {
    padding-top: calc(var(--app-spacing) * 2);
  }

  kbd {
    background-color: var(--app-code-kbd-background-color);
    color: var(--app-code-kbd-color);
    vertical-align: baseline;
  }

  figure {
    display: block;
    margin: 0;
    padding: 0;
  }

  figure figcaption {
    padding: calc(var(--app-spacing) * 0.5) 0;
    color: var(--app-muted-color);
  }

  hr {
    height: 0;
    margin: var(--app-typography-spacing-vertical) 0;
    border: 0;
    border-top: 1px solid var(--app-muted-border-color);
    color: inherit;
  }

  [hidden],
  template {
    display: none !important;
  }

  canvas {
    display: inline-block;
  }

  input,
  optgroup,
  select,
  textarea {
    margin: 0;
    font-size: var(--text-base);
    line-height: var(--app-line-height);
    font-family: inherit;
    letter-spacing: inherit;
  }

  input {
    overflow: visible;
  }

  select {
    text-transform: none;
  }

  legend {
    max-width: 100%;
    white-space: normal;
    margin: 0;
    display: block;
    color: var(--app-color);
    font-weight: var(--app-form-label-font-weight, var(--app-font-weight));
  }

  textarea {
    overflow: auto;
  }

  [type="checkbox"],
  [type="radio"] {
    padding: 0;
  }

  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button {
    height: auto;
  }

  [type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
  }

  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
  }

  ::-moz-focus-inner {
    padding: 0;
    border-style: none;
  }

  :-moz-focusring {
    outline: 0;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  ::-ms-expand {
    display: none;
  }

  [type="file"],
  [type="range"] {
    padding: 0;
    border-width: 0;
  }

  input:not([type="checkbox"], [type="radio"], [type="range"]) {
    height: calc(
      1rem * var(--app-line-height) + var(--app-form-element-spacing-vertical) *
        2 + var(--app-border-width) * 2
    );
  }

  fieldset {
    width: 100%;
    margin-bottom: var(--app-spacing);
    border: 1px solid var(--app-form-element-border-color);
    padding: var(--app-spacing);
    border-radius: var(--app-border-radius);
  }

  fieldset[role="group"] {
    padding: 0;
    border: 0;
    border-radius: 0;
  }

  label {
    display: block;
    margin-bottom: calc(var(--app-spacing) * 0.375);
    color: var(--app-color);
    font-weight: var(--app-form-label-font-weight, var(--app-font-weight));
    font-size: var(--text-sm);
  }

  label:has(input[required]) span:after {
    content: " *";
  }

  input:not([type="checkbox"], [type="radio"]),
  select,
  textarea {
    width: 100%;
  }

  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
  select,
  textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: var(--app-form-element-spacing-vertical)
      var(--app-form-element-spacing-horizontal);
  }

  input,
  select,
  textarea {
    --app-background-color: var(--app-form-element-background-color);
    --app-border-color: var(--app-form-element-border-color);
    --app-color: var(--app-form-element-color);
    --app-box-shadow: none;
    border: var(--app-border-width) solid var(--app-border-color);
    border-radius: var(--app-border-radius);
    outline: 0;
    background-color: var(--app-background-color);
    box-shadow: var(--app-box-shadow);
    color: var(--app-color);
    font-weight: var(--app-font-weight);
    transition:
      background-color var(--app-transition),
      border-color var(--app-transition),
      color var(--app-transition),
      box-shadow var(--app-transition);
  }

  :where(select, textarea):not([readonly]):is(:active, :focus),
  input:not(
      [type="submit"],
      [type="button"],
      [type="reset"],
      [type="checkbox"],
      [type="radio"],
      [readonly]
    ):is(:active, :focus) {
    --app-background-color: var(--app-form-element-active-background-color);
  }

  :where(select, textarea):not([readonly]):is(:active, :focus),
  input:not(
      [type="submit"],
      [type="button"],
      [type="reset"],
      [role="switch"],
      [readonly]
    ):is(:active, :focus) {
    --app-border-color: var(--app-form-element-active-border-color);
  }

  :where(select, textarea):not([readonly]):focus,
  input:not(
      [type="submit"],
      [type="button"],
      [type="reset"],
      [type="range"],
      [type="file"],
      [readonly]
    ):focus {
    --app-box-shadow: 0 0 0 var(--app-outline-width)
      var(--app-form-element-focus-color);
  }

  input:not(
      [type="submit"],
      [type="button"],
      [type="reset"],
      [type="checkbox"],
      [type="radio"],
      [type="range"],
      [type="file"]
    )[readonly]:not([disabled]),
  textarea[readonly]:not([disabled]),
  select[readonly]:not([disabled]) {
    --app-background-color: var(--app-form-element-readonly-background-color);
    --app-border-color: var(--app-form-element-readonly-border-color);
    --app-color: var(--app-form-element-readonly-color);
    --app-box-shadow: inset 0 0 0 0.0625rem
      var(--app-form-element-readonly-border-color);
  }

  input:not(
      [type="submit"],
      [type="button"],
      [type="reset"],
      [type="checkbox"],
      [type="radio"],
      [type="range"],
      [type="file"]
    )[readonly]:not([disabled]):focus,
  textarea[readonly]:not([disabled]):focus,
  select[readonly]:not([disabled]):focus {
    --app-box-shadow: 0 0 0 var(--app-outline-width)
      var(--app-form-element-readonly-focus-color);
  }

  :where(fieldset[disabled])
    :is(
      input:not([type="submit"], [type="button"], [type="reset"]),
      select,
      textarea
    ),
  input:not([type="submit"], [type="button"], [type="reset"])[disabled],
  label[aria-disabled="true"],
  select[disabled],
  textarea[disabled] {
    opacity: var(--app-form-element-disabled-opacity);
    pointer-events: none;
  }

  label[aria-disabled="true"] input[disabled] {
    opacity: 1;
  }

  :where(input, select, textarea):not(
      [type="checkbox"],
      [type="radio"],
      [type="date"],
      [type="datetime-local"],
      [type="month"],
      [type="time"],
      [type="week"],
      [type="range"]
    )[aria-invalid] {
    padding-right: calc(
      var(--app-form-element-spacing-horizontal) + 1.5rem
    ) !important;
    padding-left: var(--app-form-element-spacing-horizontal);
    padding-inline-start: var(--app-form-element-spacing-horizontal) !important;
    padding-inline-end: calc(
      var(--app-form-element-spacing-horizontal) + 1.5rem
    ) !important;
    background-position: center right 0.75rem;
    background-size: 1rem auto;
    background-repeat: no-repeat;
  }

  :where(input, select, textarea):not(
      [type="checkbox"],
      [type="radio"],
      [type="date"],
      [type="datetime-local"],
      [type="month"],
      [type="time"],
      [type="week"],
      [type="range"]
    )[aria-invalid="false"]:not(select) {
    background-image: var(--app-icon-valid);
  }

  :where(input, select, textarea):not(
      [type="checkbox"],
      [type="radio"],
      [type="date"],
      [type="datetime-local"],
      [type="month"],
      [type="time"],
      [type="week"],
      [type="range"]
    )[aria-invalid="true"]:not(select) {
    background-image: var(--app-icon-invalid);
  }

  :where(input, select, textarea)[aria-invalid="false"] {
    --app-border-color: var(--app-form-element-valid-border-color);
  }

  :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus) {
    --app-border-color: var(
      --app-form-element-valid-active-border-color
    ) !important
;
  }

  :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not(
      [type="checkbox"],
      [type="radio"]
    ) {
    --app-box-shadow: 0 0 0 var(--app-outline-width)
      var(--app-form-element-valid-focus-color) !important
;
  }

  :where(input, select, textarea)[aria-invalid="true"] {
    --app-border-color: var(--app-form-element-invalid-border-color);
  }

  :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus) {
    --app-border-color: var(
      --app-form-element-invalid-active-border-color
    ) !important
;
  }

  :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not(
      [type="checkbox"],
      [type="radio"]
    ) {
    --app-box-shadow: 0 0 0 var(--app-outline-width)
      var(--app-form-element-invalid-focus-color) !important
;
  }

  [dir="rtl"]
    :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is(
      [aria-invalid],
      [aria-invalid="true"],
      [aria-invalid="false"]
    ) {
    background-position: center left 0.75rem;
  }

  input::-webkit-input-placeholder,
  input::placeholder,
  select:invalid,
  textarea::-webkit-input-placeholder,
  textarea::placeholder {
    color: var(--app-form-element-placeholder-color);
    opacity: 1;
  }

  input:not([type="checkbox"], [type="radio"]),
  select,
  textarea {
    margin-bottom: var(--app-spacing);
  }

  select::-ms-expand {
    border: 0;
    background-color: transparent;
  }

  select:not([multiple], [size]) {
    padding-right: calc(var(--app-form-element-spacing-horizontal) + 1.5rem);
    padding-left: var(--app-form-element-spacing-horizontal);
    padding-inline-start: var(--app-form-element-spacing-horizontal);
    padding-inline-end: calc(
      var(--app-form-element-spacing-horizontal) + 1.5rem
    );
    background-image: var(--app-icon-chevron);
    background-position: center right 0.75rem;
    background-size: 1rem auto;
    background-repeat: no-repeat;
  }

  select[multiple] option:checked {
    background: var(--app-form-element-selected-background-color);
    color: var(--app-form-element-color);
  }

  [dir="rtl"] select:not([multiple], [size]) {
    background-position: center left 0.75rem;
  }

  textarea {
    display: block;
    resize: vertical;
  }

  textarea[aria-invalid] {
    --app-icon-height: calc(
      1rem * var(--app-line-height) + var(--app-form-element-spacing-vertical) *
        2 + var(--app-border-width) * 2
    );
    background-position: top right 0.75rem !important;
    background-size: 1rem var(--app-icon-height) !important;
  }

  :where(input, select, textarea, fieldset, .grid) + small {
    display: block;
    width: 100%;
    margin-top: calc(var(--app-spacing) * -0.75);
    margin-bottom: var(--app-spacing);
    color: var(--app-muted-color);
  }

  :where(input, select, textarea, fieldset, .grid)[aria-invalid="false"]
    + small {
    color: var(--app-ins-color);
  }

  :where(input, select, textarea, fieldset, .grid)[aria-invalid="true"]
    + small {
    color: var(--app-del-color);
  }

  label > :where(input, select, textarea) {
    margin-top: calc(var(--app-spacing) * 0.25);
  }

  label:has([type="checkbox"], [type="radio"]) {
    width: -moz-fit-content;
    width: fit-content;
    cursor: pointer;
  }

  [type="checkbox"],
  [type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 1.25em;
    height: 1.25em;
    margin-top: -0.125em;
    margin-inline-end: 0.5em;
    border-width: var(--app-border-width);
    border-radius: 0.1875rem;
    vertical-align: middle;
    cursor: pointer;
    flex-shrink: 0;
  }

  [type="radio"] {
    border-radius: 50%;
  }

  [type="checkbox"]::-ms-check,
  [type="radio"]::-ms-check {
    display: none;
  }

  [type="checkbox"]:checked,
  [type="checkbox"]:checked:active,
  [type="checkbox"]:checked:focus,
  [type="radio"]:checked,
  [type="radio"]:checked:active,
  [type="radio"]:checked:focus {
    --app-background-color: var(--app-primary-background);
    --app-border-color: var(--app-primary-border);
    background-image: var(--app-icon-checkbox);
    background-position: center;
    background-size: 0.75em auto;
    background-repeat: no-repeat;
  }

  [type="checkbox"] ~ label,
  [type="radio"] ~ label {
    display: inline-block;
    margin-bottom: 0;
    cursor: pointer;
  }

  [type="checkbox"] ~ label:not(:last-of-type),
  [type="radio"] ~ label:not(:last-of-type) {
    margin-inline-end: 1em;
  }

  [type="checkbox"]:indeterminate {
    --app-background-color: var(--app-primary-background);
    --app-border-color: var(--app-primary-border);
    background-image: var(--app-icon-minus);
    background-position: center;
    background-size: 0.75em auto;
    background-repeat: no-repeat;
  }

  [type="radio"] {
    border-radius: 50%;
  }

  [type="radio"]:checked,
  [type="radio"]:checked:active,
  [type="radio"]:checked:focus {
    --app-background-color: var(--app-primary-inverse);
    border-width: 0.35em;
    background-image: none;
  }

  [type="checkbox"][role="switch"] {
    --app-background-color: var(--app-switch-background-color);
    --app-color: var(--app-switch-color);
    width: 2.25em;
    height: 1.25em;
    border: var(--app-border-width) solid var(--app-border-color);
    border-radius: 1.25em;
    background-color: var(--app-background-color);
    line-height: 1.25em; /* em-relative sizing — intentional, switch control layout */
  }

  [type="checkbox"][role="switch"]:not([aria-invalid]) {
    --app-border-color: var(--app-switch-background-color);
  }

  [type="checkbox"][role="switch"]:before {
    display: block;
    aspect-ratio: 1;
    height: 100%;
    border-radius: 50%;
    background-color: var(--app-color);
    box-shadow: var(--app-switch-thumb-box-shadow);
    content: "";
    transition: margin 0.1s ease-in-out;
  }

  [type="checkbox"][role="switch"]:focus {
    --app-background-color: var(--app-switch-background-color);
    --app-border-color: var(--app-switch-background-color);
  }

  [type="checkbox"][role="switch"]:checked {
    --app-background-color: var(--app-switch-checked-background-color);
    --app-border-color: var(--app-switch-checked-background-color);
    background-image: none;
  }

  [type="checkbox"][role="switch"]:checked::before {
    margin-inline-start: calc(2.25em - 1.25em);
  }

  [type="checkbox"][role="switch"][disabled] {
    --app-background-color: var(--app-border-color);
  }

  [type="checkbox"][aria-invalid="false"]:checked,
  [type="checkbox"][aria-invalid="false"]:checked:active,
  [type="checkbox"][aria-invalid="false"]:checked:focus,
  [type="checkbox"][role="switch"][aria-invalid="false"]:checked,
  [type="checkbox"][role="switch"][aria-invalid="false"]:checked:active,
  [type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
    --app-background-color: var(--app-form-element-valid-border-color);
  }

  [type="checkbox"]:checked:active[aria-invalid="true"],
  [type="checkbox"]:checked:focus[aria-invalid="true"],
  [type="checkbox"]:checked[aria-invalid="true"],
  [type="checkbox"][role="switch"]:checked:active[aria-invalid="true"],
  [type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"],
  [type="checkbox"][role="switch"]:checked[aria-invalid="true"] {
    --app-background-color: var(--app-form-element-invalid-border-color);
  }

  [type="checkbox"][aria-invalid="false"]:checked,
  [type="checkbox"][aria-invalid="false"]:checked:active,
  [type="checkbox"][aria-invalid="false"]:checked:focus,
  [type="checkbox"][role="switch"][aria-invalid="false"]:checked,
  [type="checkbox"][role="switch"][aria-invalid="false"]:checked:active,
  [type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus,
  [type="radio"][aria-invalid="false"]:checked,
  [type="radio"][aria-invalid="false"]:checked:active,
  [type="radio"][aria-invalid="false"]:checked:focus {
    --app-border-color: var(--app-form-element-valid-border-color);
  }

  [type="checkbox"]:checked:active[aria-invalid="true"],
  [type="checkbox"]:checked:focus[aria-invalid="true"],
  [type="checkbox"]:checked[aria-invalid="true"],
  [type="checkbox"][role="switch"]:checked:active[aria-invalid="true"],
  [type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"],
  [type="checkbox"][role="switch"]:checked[aria-invalid="true"],
  [type="radio"]:checked:active[aria-invalid="true"],
  [type="radio"]:checked:focus[aria-invalid="true"],
  [type="radio"]:checked[aria-invalid="true"] {
    --app-border-color: var(--app-form-element-invalid-border-color);
  }

  [type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
  }

  [type="color"]::-moz-focus-inner {
    padding: 0;
  }

  [type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: calc(var(--app-border-radius) * 0.5);
  }

  [type="color"]::-moz-color-swatch {
    border: 0;
    border-radius: calc(var(--app-border-radius) * 0.5);
  }

  input:not(
      [type="checkbox"],
      [type="radio"],
      [type="range"],
      [type="file"]
    ):is(
      [type="date"],
      [type="datetime-local"],
      [type="month"],
      [type="time"],
      [type="week"]
    ) {
    --app-icon-position: 0.75rem;
    --app-icon-width: 1rem;
    padding-right: calc(var(--app-icon-width) + var(--app-icon-position));
    background-image: var(--app-icon-date);
    background-position: center right var(--app-icon-position);
    background-size: var(--app-icon-width) auto;
    background-repeat: no-repeat;
  }

  input:not(
      [type="checkbox"],
      [type="radio"],
      [type="range"],
      [type="file"]
    )[type="time"] {
    background-image: var(--app-icon-time);
  }

  [type="date"]::-webkit-calendar-picker-indicator,
  [type="datetime-local"]::-webkit-calendar-picker-indicator,
  [type="month"]::-webkit-calendar-picker-indicator,
  [type="time"]::-webkit-calendar-picker-indicator,
  [type="week"]::-webkit-calendar-picker-indicator {
    width: var(--app-icon-width);
    margin-right: calc(var(--app-icon-width) * -1);
    margin-left: var(--app-icon-position);
    opacity: 0;
  }

  @-moz-document url-prefix() {
    [type="date"],
    [type="datetime-local"],
    [type="month"],
    [type="time"],
    [type="week"] {
      padding-right: var(--app-form-element-spacing-horizontal) !important;
      background-image: none !important;
    }
  }

  [dir="rtl"]
    :is(
      [type="date"],
      [type="datetime-local"],
      [type="month"],
      [type="time"],
      [type="week"]
    ) {
    text-align: right;
  }

  [type="file"] {
    --app-color: var(--app-muted-color);
    margin-left: calc(var(--app-outline-width) * -1);
    background: 0 0;
    border: 2px dashed var(--app-form-element-border-color);
    padding: 1.5rem;
    height: auto !important;
  }

  [type="file"]::file-selector-button {
    margin-right: calc(var(--app-spacing) / 2);
    padding: calc(var(--app-form-element-spacing-vertical) * 0.5)
      var(--app-form-element-spacing-horizontal);
  }

  [type="file"]:is(:hover, :active, :focus)::file-selector-button {
    --app-background-color: var(--app-secondary-hover-background);
    --app-border-color: var(--app-secondary-hover-border);
  }

  [type="file"]:focus::file-selector-button {
    --app-box-shadow:
      var(--app-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
      0 0 0 var(--app-outline-width) var(--app-secondary-focus);
  }

  [type="range"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 1.25rem;
    background: 0 0;
  }

  [type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 0.375rem;
    border-radius: var(--app-border-radius);
    background-color: var(--app-range-border-color);
    -webkit-transition:
      background-color var(--app-transition),
      box-shadow var(--app-transition);
    transition:
      background-color var(--app-transition),
      box-shadow var(--app-transition);
  }

  [type="range"]::-moz-range-track {
    width: 100%;
    height: 0.375rem;
    border-radius: var(--app-border-radius);
    background-color: var(--app-range-border-color);
    -moz-transition:
      background-color var(--app-transition),
      box-shadow var(--app-transition);
    transition:
      background-color var(--app-transition),
      box-shadow var(--app-transition);
  }

  [type="range"]::-ms-track {
    width: 100%;
    height: 0.375rem;
    border-radius: var(--app-border-radius);
    background-color: var(--app-range-border-color);
    -ms-transition:
      background-color var(--app-transition),
      box-shadow var(--app-transition);
    transition:
      background-color var(--app-transition),
      box-shadow var(--app-transition);
  }

  [type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: -0.4375rem;
    border: 2px solid var(--app-range-thumb-border-color);
    border-radius: 50%;
    background-color: var(--app-range-thumb-color);
    cursor: pointer;
    -webkit-transition:
      background-color var(--app-transition),
      transform var(--app-transition);
    transition:
      background-color var(--app-transition),
      transform var(--app-transition);
  }

  [type="range"]::-moz-range-thumb {
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: -0.4375rem;
    border: 2px solid var(--app-range-thumb-border-color);
    border-radius: 50%;
    background-color: var(--app-range-thumb-color);
    cursor: pointer;
    -moz-transition:
      background-color var(--app-transition),
      transform var(--app-transition);
    transition:
      background-color var(--app-transition),
      transform var(--app-transition);
  }

  [type="range"]::-ms-thumb {
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: -0.4375rem;
    border: 2px solid var(--app-range-thumb-border-color);
    border-radius: 50%;
    background-color: var(--app-range-thumb-color);
    cursor: pointer;
    -ms-transition:
      background-color var(--app-transition),
      transform var(--app-transition);
    transition:
      background-color var(--app-transition),
      transform var(--app-transition);
  }

  [type="range"]:active,
  [type="range"]:focus-within {
    --app-range-border-color: var(--app-range-active-border-color);
    --app-range-thumb-color: var(--app-range-thumb-active-color);
  }

  [type="range"]:active::-webkit-slider-thumb {
    transform: scale(1.25);
  }

  [type="range"]:active::-moz-range-thumb {
    transform: scale(1.25);
  }

  [type="range"]:active::-ms-thumb {
    transform: scale(1.25);
  }

  input:not(
      [type="checkbox"],
      [type="radio"],
      [type="range"],
      [type="file"]
    )[type="search"] {
    padding-inline-start: calc(
      var(--app-form-element-spacing-horizontal) + 1.75rem
    );
    background-image: var(--app-icon-search);
    background-position: center left
      calc(var(--app-form-element-spacing-horizontal) + 0.125rem);
    background-size: 1rem auto;
    background-repeat: no-repeat;
  }

  input:not(
      [type="checkbox"],
      [type="radio"],
      [type="range"],
      [type="file"]
    )[type="search"][aria-invalid] {
    padding-inline-start: calc(
      var(--app-form-element-spacing-horizontal) + 1.75rem
    ) !important;
    background-position:
      center left 1.125rem,
      center right 0.75rem;
  }

  input:not(
      [type="checkbox"],
      [type="radio"],
      [type="range"],
      [type="file"]
    )[type="search"][aria-invalid="false"] {
    background-image: var(--app-icon-search), var(--app-icon-valid);
  }

  input:not(
      [type="checkbox"],
      [type="radio"],
      [type="range"],
      [type="file"]
    )[type="search"][aria-invalid="true"] {
    background-image: var(--app-icon-search), var(--app-icon-invalid);
  }

  [dir="rtl"]
    :where(input):not(
      [type="checkbox"],
      [type="radio"],
      [type="range"],
      [type="file"]
    )[type="search"] {
    background-position: center right 1.125rem;
  }

  [dir="rtl"]
    :where(input):not(
      [type="checkbox"],
      [type="radio"],
      [type="range"],
      [type="file"]
    )[type="search"][aria-invalid] {
    background-position:
      center right 1.125rem,
      center left 0.75rem;
  }

  details {
    display: block;
    margin-bottom: var(--app-spacing);
  }

  details summary {
    line-height: var(--leading-tight);
    list-style-type: none;
    cursor: pointer;
    transition: color var(--app-transition);
    vertical-align: middle;
  }

  details summary:not([role]) {
    color: var(--app-accordion-close-summary-color);
  }

  details summary::-webkit-details-marker {
    display: none;
  }

  details summary::marker {
    display: none;
  }

  details summary::-moz-list-bullet {
    list-style-type: none;
  }

  details summary::after {
    display: block;
    width: 1rem;
    height: 1rem;
    margin-inline-start: calc(var(--app-spacing, 1rem) * 0.5);
    float: right;
    transform: rotate(-90deg);
    background-image: var(--app-icon-chevron);
    background-position: right center;
    background-size: 1rem auto;
    background-repeat: no-repeat;
    content: "";
    transition: transform var(--app-transition);
  }

  /* Opt-out hook for components that should not render the default summary chevron. */
  details[data-summary-chevron="none"] > summary::after,
  details > summary[data-summary-chevron="none"]::after {
    display: none !important;
    content: none !important;
    background-image: none !important;
  }

  details summary:focus {
    outline: 0;
  }

  details summary:focus:not([role]) {
    color: var(--app-accordion-active-summary-color);
  }

  details summary:focus-visible:not([role]) {
    outline: var(--app-outline-width) solid var(--app-primary-focus);
    outline-offset: calc(var(--app-spacing, 1rem) * 0.5);
    color: var(--app-primary);
  }

  details summary[role="button"] {
    width: 100%;
    text-align: left;
  }

  details summary[role="button"]::after {
    height: calc(1rem * var(--app-line-height, 1.5));
  }

  details[open] > summary {
    margin-bottom: calc(var(--app-spacing) * 0.5);
  }

  details[open] > summary:not([role]):not(:focus) {
    color: var(--app-accordion-close-summary-color);
  }

  details[open] > summary::after {
    transform: rotate(0);
  }

  [dir="rtl"] details summary {
    text-align: right;
  }

  [dir="rtl"] details summary::after {
    float: left;
    background-position: left center;
  }

  article {
    margin-bottom: var(--app-block-spacing-vertical);
    padding: var(--app-block-spacing-vertical)
      var(--app-block-spacing-horizontal);
    border-radius: var(--app-border-radius);
    background: var(--app-card-background-color);
    box-shadow: var(--app-card-box-shadow);
  }

  article:not(:has(footer)) p:last-child {
    margin: 0;
  }

  article > footer,
  article > header {
    margin-right: calc(var(--app-block-spacing-horizontal) * -1);
    margin-left: calc(var(--app-block-spacing-horizontal) * -1);
    padding: calc(var(--app-block-spacing-vertical) * 1)
      var(--app-block-spacing-horizontal);
    background-color: var(--app-card-sectioning-background-color);
  }

  article > header {
    margin-top: calc(var(--app-block-spacing-vertical) * -1);
    margin-bottom: var(--app-block-spacing-vertical);
    border-bottom: var(--app-border-width) solid var(--app-card-border-color);
    border-top-right-radius: var(--app-border-radius);
    border-top-left-radius: var(--app-border-radius);
  }

  article > header > hgroup {
    margin: 0;
  }

  article > footer {
    margin-top: var(--app-block-spacing-vertical);
    margin-bottom: calc(var(--app-block-spacing-vertical) * -1);
    border-top: var(--app-border-width) solid var(--app-card-border-color);
    border-bottom-right-radius: var(--app-border-radius);
    border-bottom-left-radius: var(--app-border-radius);
  }

  details.dropdown {
    position: relative;
    border-bottom: none;
  }

  details.dropdown > a::after,
  details.dropdown > button::after,
  details.dropdown > summary::after {
    display: block;
    width: 1rem;
    height: calc(1rem * var(--app-line-height, 1.5));
    margin-inline-start: 0.25rem;
    float: right;
    transform: rotate(0) translateX(0.2rem);
    background-image: var(--app-icon-chevron);
    background-position: right center;
    background-size: 1rem auto;
    background-repeat: no-repeat;
    content: "";
  }

  details.dropdown[data-summary-chevron="none"] > summary::after,
  details.dropdown > summary[data-summary-chevron="none"]::after {
    display: none !important;
    content: none !important;
    background-image: none !important;
  }

  nav details.dropdown {
    margin-bottom: 0;
  }

  details.dropdown > summary:not([role]) {
    height: calc(
      1rem * var(--app-line-height) + var(--app-form-element-spacing-vertical) *
        2 + var(--app-border-width) * 2
    );
    padding: var(--app-form-element-spacing-vertical)
      var(--app-form-element-spacing-horizontal);
    border: var(--app-border-width) solid var(--app-form-element-border-color);
    border-radius: var(--app-border-radius);
    background-color: var(--app-form-element-background-color);
    color: var(--app-form-element-placeholder-color);
    line-height: inherit;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    transition:
      background-color var(--app-transition),
      border-color var(--app-transition),
      color var(--app-transition),
      box-shadow var(--app-transition);
  }

  details.dropdown > summary:not([role]):active,
  details.dropdown > summary:not([role]):focus {
    border-color: var(--app-form-element-active-border-color);
    background-color: var(--app-form-element-active-background-color);
  }

  details.dropdown > summary:not([role]):focus {
    box-shadow: 0 0 0 var(--app-outline-width)
      var(--app-form-element-focus-color);
  }

  details.dropdown > summary:not([role]):focus-visible {
    outline: 0;
  }

  details.dropdown > summary:not([role])[aria-invalid="false"] {
    --app-form-element-border-color: var(--app-form-element-valid-border-color);
    --app-form-element-active-border-color: var(
      --app-form-element-valid-focus-color
    );
    --app-form-element-focus-color: var(--app-form-element-valid-focus-color);
  }

  details.dropdown > summary:not([role])[aria-invalid="true"] {
    --app-form-element-border-color: var(
      --app-form-element-invalid-border-color
    );
    --app-form-element-active-border-color: var(
      --app-form-element-invalid-focus-color
    );
    --app-form-element-focus-color: var(--app-form-element-invalid-focus-color);
  }

  nav details.dropdown {
    display: inline;
    margin: calc(var(--app-nav-element-spacing-vertical) * -1) 0;
  }

  nav details.dropdown > summary::after {
    transform: rotate(0) translateX(0);
  }

  nav details.dropdown > summary:not([role]) {
    height: calc(
      1rem * var(--app-line-height) + var(--app-nav-link-spacing-vertical) * 2
    );
    padding: calc(
        var(--app-nav-link-spacing-vertical) - var(--app-border-width) * 2
      )
      var(--app-nav-link-spacing-horizontal);
  }

  nav details.dropdown > summary:not([role]):focus-visible {
    box-shadow: 0 0 0 var(--app-outline-width) var(--app-primary-focus);
  }

  details.dropdown > summary + ul {
    display: flex;
    z-index: 99;
    position: absolute;
    left: 0;
    flex-direction: column;
    width: 100%;
    min-width: -moz-fit-content;
    min-width: fit-content;
    margin: 0;
    margin-top: var(--app-outline-width);
    padding: 0.25rem;
    border: 1px solid var(--app-dropdown-border-color);
    border-radius: var(--app-border-radius);
    background-color: var(--app-dropdown-background-color);
    box-shadow: var(--app-dropdown-box-shadow);
    color: var(--app-dropdown-color);
    white-space: nowrap;
    opacity: 0;
    transition:
      opacity var(--app-transition),
      transform 0s ease-in-out 1s;
  }

  details.dropdown > summary + ul[dir="rtl"] {
    right: 0;
    left: auto;
  }

  details.dropdown > summary + ul li {
    width: 100%;
    margin-bottom: 0;
    padding: 0;
    list-style: none;
    text-align: left;
  }

  details.dropdown > summary + ul li a {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.375rem 0.5rem;
    overflow: hidden;
    border-radius: 3px;
    color: var(--app-dropdown-color);
    text-decoration: none;
    text-overflow: ellipsis;
  }

  details.dropdown > summary + ul li a:active,
  details.dropdown > summary + ul li a:focus,
  details.dropdown > summary + ul li a:focus-visible,
  details.dropdown > summary + ul li a:hover,
  details.dropdown
    > summary
    + ul
    li
    a[aria-current]:not([aria-current="false"]) {
    background: color-mix(in srgb, var(--app-contrast) 8%, transparent);
  }

  details.dropdown > summary + ul li label {
    width: 100%;
  }

  details.dropdown > summary + ul li:has(label):hover {
    background: color-mix(in srgb, var(--app-contrast) 8%, transparent);
    border-radius: 3px;
  }

  details.dropdown[open] > summary {
    margin-bottom: 0;
  }

  details.dropdown[open] > summary + ul {
    transform: scaleY(1);
    opacity: 1;
    transition:
      opacity var(--app-transition),
      transform 0s ease-in-out 0s;
  }

  details.dropdown[open] > summary::before {
    display: block;
    z-index: 1;
    position: fixed;
    width: 100vw;
    height: 100vh;
    inset: 0;
    background: 0 0;
    content: "";
    cursor: default;
  }

  label > details.dropdown {
    margin-top: calc(var(--app-spacing) * 0.25);
  }

  [role="group"],
  [role="search"] {
    display: inline-flex;
    position: relative;
    width: 100%;
    margin-bottom: var(--app-spacing);
    border-radius: var(--app-border-radius);
    box-shadow: var(--app-group-box-shadow, 0 0 0 transparent);
    vertical-align: middle;
    transition: box-shadow var(--app-transition);
  }

  [role="group"] input:not([type="checkbox"], [type="radio"]),
  [role="group"] select,
  [role="group"] > *,
  [role="search"] input:not([type="checkbox"], [type="radio"]),
  [role="search"] select,
  [role="search"] > * {
    position: relative;
    flex: 1 1 auto;
    margin-bottom: 0;
  }

  [role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child),
  [role="group"] select:not(:first-child),
  [role="group"] > :not(:first-child),
  [role="search"]
    input:not([type="checkbox"], [type="radio"]):not(:first-child),
  [role="search"] select:not(:first-child),
  [role="search"] > :not(:first-child) {
    margin-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  [role="group"] input:not([type="checkbox"], [type="radio"]):not(:last-child),
  [role="group"] select:not(:last-child),
  [role="group"] > :not(:last-child),
  [role="search"] input:not([type="checkbox"], [type="radio"]):not(:last-child),
  [role="search"] select:not(:last-child),
  [role="search"] > :not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  [role="group"] input:not([type="checkbox"], [type="radio"]):focus,
  [role="group"] select:focus,
  [role="group"] > :focus,
  [role="search"] input:not([type="checkbox"], [type="radio"]):focus,
  [role="search"] select:focus,
  [role="search"] > :focus {
    z-index: 2;
  }

  [role="group"] [role="button"]:not(:first-child),
  [role="group"] [type="button"]:not(:first-child),
  [role="group"] [type="reset"]:not(:first-child),
  [role="group"] [type="submit"]:not(:first-child),
  [role="group"] button:not(:first-child),
  [role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child),
  [role="group"] select:not(:first-child),
  [role="search"] [role="button"]:not(:first-child),
  [role="search"] [type="button"]:not(:first-child),
  [role="search"] [type="reset"]:not(:first-child),
  [role="search"] [type="submit"]:not(:first-child),
  [role="search"] button:not(:first-child),
  [role="search"]
    input:not([type="checkbox"], [type="radio"]):not(:first-child),
  [role="search"] select:not(:first-child) {
    margin-left: calc(var(--app-border-width) * -1);
  }

  [role="group"] [role="button"],
  [role="group"] [type="button"],
  [role="group"] [type="reset"],
  [role="group"] [type="submit"],
  [role="group"] button,
  [role="search"] [role="button"],
  [role="search"] [type="button"],
  [role="search"] [type="reset"],
  [role="search"] [type="submit"],
  [role="search"] button {
    width: auto;
  }

  @supports selector(:has(*)) {
    [role="group"]:has(
      button:focus,
      [type="submit"]:focus,
      [type="button"]:focus,
      [role="button"]:focus
    ),
    [role="search"]:has(
      button:focus,
      [type="submit"]:focus,
      [type="button"]:focus,
      [role="button"]:focus
    ) {
      --app-group-box-shadow: var(--app-group-box-shadow-focus-with-button);
    }

    [role="group"]:has(
        button:focus,
        [type="submit"]:focus,
        [type="button"]:focus,
        [role="button"]:focus
      )
      input:not([type="checkbox"], [type="radio"]),
    [role="group"]:has(
        button:focus,
        [type="submit"]:focus,
        [type="button"]:focus,
        [role="button"]:focus
      )
      select,
    [role="search"]:has(
        button:focus,
        [type="submit"]:focus,
        [type="button"]:focus,
        [role="button"]:focus
      )
      input:not([type="checkbox"], [type="radio"]),
    [role="search"]:has(
        button:focus,
        [type="submit"]:focus,
        [type="button"]:focus,
        [role="button"]:focus
      )
      select {
      border-color: transparent;
    }

    [role="group"]:has(
      input:not([type="submit"], [type="button"]):focus,
      select:focus
    ),
    [role="search"]:has(
      input:not([type="submit"], [type="button"]):focus,
      select:focus
    ) {
      --app-group-box-shadow: var(--app-group-box-shadow-focus-with-input);
    }

    [role="group"]:has(
        input:not([type="submit"], [type="button"]):focus,
        select:focus
      )
      [role="button"],
    [role="group"]:has(
        input:not([type="submit"], [type="button"]):focus,
        select:focus
      )
      [type="button"],
    [role="group"]:has(
        input:not([type="submit"], [type="button"]):focus,
        select:focus
      )
      [type="submit"],
    [role="group"]:has(
        input:not([type="submit"], [type="button"]):focus,
        select:focus
      )
      button,
    [role="search"]:has(
        input:not([type="submit"], [type="button"]):focus,
        select:focus
      )
      [role="button"],
    [role="search"]:has(
        input:not([type="submit"], [type="button"]):focus,
        select:focus
      )
      [type="button"],
    [role="search"]:has(
        input:not([type="submit"], [type="button"]):focus,
        select:focus
      )
      [type="submit"],
    [role="search"]:has(
        input:not([type="submit"], [type="button"]):focus,
        select:focus
      )
      button {
      --app-button-box-shadow: 0 0 0 var(--app-border-width)
        var(--app-primary-border);
      --app-button-hover-box-shadow: 0 0 0 var(--app-border-width)
        var(--app-primary-hover-border);
    }

    [role="group"] [role="button"]:focus,
    [role="group"] [type="button"]:focus,
    [role="group"] [type="reset"]:focus,
    [role="group"] [type="submit"]:focus,
    [role="group"] button:focus,
    [role="search"] [role="button"]:focus,
    [role="search"] [type="button"]:focus,
    [role="search"] [type="reset"]:focus,
    [role="search"] [type="submit"]:focus,
    [role="search"] button:focus {
      box-shadow: none;
    }
  }

  [role="search"] > :first-child {
    border-top-left-radius: 5rem;
    border-bottom-left-radius: 5rem;
  }

  [role="search"] > :last-child {
    border-top-right-radius: 5rem;
    border-bottom-right-radius: 5rem;
  }

  html {
    scroll-behavior: smooth;
    background: var(--app-sidebar-background-color);
  }

  .white-space-nowrap {
    white-space: nowrap;
  }

  [aria-busy="true"]:not(input, select, textarea, html, form) {
    white-space: nowrap;
  }

  [aria-busy="true"]:not(input, select, textarea, html, form)::before {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: var(--app-icon-loading);
    background-size: 1em auto;
    background-repeat: no-repeat;
    content: "";
    vertical-align: -0.125em;
  }

  [aria-busy="true"]:not(input, select, textarea, html, form):not(
      :empty
    )::before {
    margin-inline-end: calc(var(--app-spacing) * 0.5);
  }

  [aria-busy="true"]:not(input, select, textarea, html, form):empty {
    text-align: center;
  }

  [role="button"][aria-busy="true"],
  [type="button"][aria-busy="true"],
  [type="reset"][aria-busy="true"],
  [type="submit"][aria-busy="true"],
  a[aria-busy="true"],
  button[aria-busy="true"] {
    pointer-events: none;
  }

  dialog {
    display: flex;
    z-index: 999;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    width: inherit;
    min-width: 100%;
    height: inherit;
    min-height: 100%;
    padding: 0;
    border: 0;
    -webkit-backdrop-filter: var(--app-modal-overlay-backdrop-filter);
    backdrop-filter: var(--app-modal-overlay-backdrop-filter);
    background-color: var(--app-modal-overlay-background-color);
    color: var(--app-color);
  }

  dialog > article {
    width: 100%;
    max-height: calc(100vh - var(--app-spacing) * 2);
    margin: var(--app-spacing);
    overflow: auto;
  }

  .bi::before,
  [class^="bi-"]::before,
  [class*=" bi-"]::before {
    vertical-align: -0.125em;
  }

  @media (min-width: 576px) {
    dialog > article {
      max-width: 510px;
    }
  }

  @media (min-width: 768px) {
    dialog > article {
      max-width: 700px;
    }
  }

  /* Dialog header/footer/close styles → web/css/components/app-dialog.css */

  dialog:not([open]),
  dialog[open="false"] {
    display: none;
  }

  .modal-is-open {
    padding-right: var(--app-scrollbar-width, 0);
    overflow: hidden;
    pointer-events: none;
    touch-action: none;
  }

  .modal-is-open dialog {
    pointer-events: auto;
    touch-action: auto;
  }

  :where(.modal-is-opening, .modal-is-closing) dialog,
  :where(.modal-is-opening, .modal-is-closing) dialog > article {
    animation-duration: 0.2s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
  }

  :where(.modal-is-opening, .modal-is-closing) dialog {
    animation-duration: 0.8s;
    animation-name: modal-overlay;
  }

  :where(.modal-is-opening, .modal-is-closing) dialog > article {
    animation-delay: 0.2s;
    animation-name: modal;
  }

  .modal-is-closing dialog,
  .modal-is-closing dialog > article {
    animation-delay: 0s;
    animation-direction: reverse;
  }

  @keyframes modal-overlay {
    from {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      background-color: transparent;
    }
  }

  @keyframes modal {
    from {
      transform: translateY(-100%);
      opacity: 0;
    }
  }

  :where(nav li)::before {
    float: left;
    content: "​";
  }

  nav,
  nav ul {
    display: flex;
  }

  nav {
    justify-content: space-between;
    overflow: visible;
  }

  nav ol,
  nav ul {
    align-items: center;
    margin-bottom: 0;
    padding: 0;
    list-style: none;
  }

  nav ol:first-of-type,
  nav ul:first-of-type {
    margin-left: calc(var(--app-nav-element-spacing-horizontal) * -1);
  }

  nav ol:last-of-type,
  nav ul:last-of-type {
    margin-right: calc(var(--app-nav-element-spacing-horizontal) * -1);
  }

  nav li {
    display: inline-block;
    margin: 0;
    padding: var(--app-nav-element-spacing-vertical)
      var(--app-nav-element-spacing-horizontal);
  }

  nav li :where(a, [role="link"]) {
    display: inline-block;
    margin: calc(var(--app-nav-link-spacing-vertical) * -1)
      calc(var(--app-nav-link-spacing-horizontal) * -1);
    padding: var(--app-nav-link-spacing-vertical)
      var(--app-nav-link-spacing-horizontal);
    border-radius: var(--app-border-radius);
  }

  nav li :where(a, [role="link"]):not(:hover) {
    text-decoration: none;
  }

  nav li [role="button"],
  nav li [type="button"],
  nav li button,
  nav
    li
    input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
  nav li select {
    height: auto;
    margin-right: inherit;
    margin-bottom: 0;
    margin-left: inherit;
    padding: calc(
        var(--app-nav-link-spacing-vertical) - var(--app-border-width) * 2
      )
      var(--app-nav-link-spacing-horizontal);
  }

  nav[aria-label="breadcrumb"] {
    --app-breadcrumb-separator-size: 0.75rem;
    --app-nav-element-spacing-vertical: 0.25rem;
    --app-nav-element-spacing-horizontal: 0.25rem;
    --app-nav-link-spacing-vertical: 0.25rem;
    --app-nav-link-spacing-horizontal: 0.25rem;
    align-items: center;
    justify-content: start;
    font-size: 0.875em; /* em-relative sizing — intentional, scales with parent */
  }

  nav[aria-label="breadcrumb"] ol,
  nav[aria-label="breadcrumb"] ul {
    margin: 0;
  }

  nav[aria-label="breadcrumb"] :is(ol, ul) li {
    padding: 0;
  }

  nav[aria-label="breadcrumb"] :is(ol, ul) li:not(:first-child) {
    margin-inline-start: 0;
  }

  nav[aria-label="breadcrumb"] :is(ol, ul) li a {
    margin: calc(var(--app-nav-link-spacing-vertical) * -1) 0;
    margin-inline-start: calc(var(--app-nav-link-spacing-horizontal) * -1);
  }

  nav[aria-label="breadcrumb"] :is(ol, ul) li:not(:last-child)::after {
    display: inline-block;
    width: var(--app-breadcrumb-separator-size);
    height: var(--app-breadcrumb-separator-size);
    margin-inline: calc(var(--app-nav-link-spacing-horizontal) * 0.75);
    content: "";
    background-image: var(--app-icon-chevron);
    background-size: var(--app-breadcrumb-separator-size) auto;
    background-repeat: no-repeat;
    opacity: 0.7;
    transform: rotate(-90deg);
  }

  nav[aria-label="breadcrumb"] a[aria-current]:not([aria-current="false"]) {
    background-color: transparent;
    color: inherit;
    text-decoration: none;
    pointer-events: none;
  }

  aside li,
  aside nav,
  aside ol,
  aside ul {
    display: block;
  }

  aside li {
    padding: calc(var(--app-nav-element-spacing-vertical) * 0.5)
      var(--app-nav-element-spacing-horizontal);
  }

  aside li a {
    display: block;
    text-decoration: none;
  }

  aside li [role="button"] {
    margin: inherit;
  }

  .text-align-center {
    text-align: center;
  }

  /* Loading state - global cursor and interaction blocking */
  body.is-loading {
    cursor: wait;
  }

  body.is-loading * {
    cursor: wait !important;
  }

  body.is-loading button,
  body.is-loading a,
  body.is-loading input,
  body.is-loading select,
  body.is-loading textarea {
    pointer-events: none;
  }

  /* ── Print: hide all navigation chrome ── */
  @media print {
    .app-header,
    aside.aside-icon-bar,
    aside.app-sidebar,
    .app-drawer-backdrop {
      display: none !important;
    }

    .app-container {
      display: block !important;
    }
  }
}